/* =========================================================
   UBAKU Villa 宇莫別荘（ubakuvilla.com）
   ・雰囲気は Studio 版を引き継ぐ（明朝・縦書き・生成りの帯・大きな写真）
   ・緑はブランドの緑 #29463D、動きは ubaku.jp と同じ（2026-10-25 mashuさん決定）
   ・色・フォント・余白は必ずこの :root の変数を通す
   ========================================================= */
:root{
  /* ---- 色 ---- */
  --green:#29463D;        /* 【深い緑】ヘッダーのメニュー・ROOMの帯・フッター（ubaku.jp のブランドの緑と同じ） */
  --green-soft:#3A5A50;   /* 【少し明るい緑】Room の間取り・アメニティの帯 */
  --cream:#E3E1D1;        /* 【生成り】ページ見出しの帯・トップの帯 */
  --paper:#F6F7F3;        /* 【ごく淡い地色】本文の帯 */
  --white:#FFFFFF;
  --ink:#2B2B28;          /* 見出しの文字 */
  --text:#4A4A44;         /* 本文の文字 */
  --sub:#7A786E;          /* 日付・補足の文字 */
  --line:#D4D1C2;         /* 細い罫線 */
  --on-green:#F1EBDF;     /* 緑の上の文字 */
  --on-green-sub:#BFC8BF; /* 緑の上の小さな文字 */
  --sage:#9DB8A6;         /* 緑の上のラベル（Address など） */
  --gold:#C4B370;         /* 【金色】宇莫別荘のブランド色。緑の上のアクセントだけに使う（生成り・白の上では読みにくいので使わない） */
  --title-green:var(--green); /* 生成りの帯の英字見出し（ROOM・NEWS など） */

  /* ---- フォント ---- */
  /* 2026-10-26 ubaku.jp と同じ書体に変更（同じブランドに見えるように）。変数の名前は前のまま */
  --f-en:'Jost', sans-serif;                      /* 英字の見出し（ROOM・NEWS など）＝ ubaku.jp の Jost */
  --f-mincho:'Murecho', 'Noto Sans JP', sans-serif; /* 日本語の見出し・縦書き＝ ubaku.jp の Murecho（名前は mincho のまま） */
  --f-body:'Noto Sans JP', sans-serif;            /* 本文・メニュー（ubaku.jp と同じ） */
  --f-en-sub:'Jost', sans-serif;                  /* 英語の小さな文字・英文＝ ubaku.jp と同じ Jost */

  /* ---- 余白 ---- */
  --pad-x:clamp(20px, 6vw, 96px);   /* 画面の左右の余白 */
  --sec-y:clamp(80px, 11vw, 160px); /* セクションの上下の余白 */
  --wrap:1180px;                    /* 中身の最大幅 */
  --narrow:760px;                   /* 文章を読むページの最大幅 */
  --header-h:76px;

  /* ---- 動き（ubaku.jp と同じ数値） ---- */
  --reveal-dist:28px;     /* スクロールで下から浮き上がる距離 */
  --reveal-time:1.1s;     /* 現れるまでの時間 */
  --lift:-8px;            /* マウスを乗せたときに浮く距離 */
  --zoom-time:1.8s;       /* 写真がゆっくり拡大する時間 */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 基本 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--f-body);font-weight:300;font-size:15px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:400;margin:0;color:var(--ink);line-height:1.6}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}
.wrap{max-width:calc(var(--wrap) + var(--pad-x) * 2);margin:0 auto;padding:0 var(--pad-x)}
.wrap.narrow{max-width:calc(var(--narrow) + var(--pad-x) * 2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.en-title{font-family:var(--f-en);font-weight:200;font-size:clamp(24px, 2.8vw, 34px);letter-spacing:.05em;color:var(--title-green);line-height:1}
.mincho{font-family:var(--f-mincho)}
.en{font-family:var(--f-en-sub);letter-spacing:.02em}

/* リンクの下線は左から伸びる（ubaku.jp と同じ） */
.u-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease);padding-bottom:2px}
.u-link:hover{background-size:100% 1px}
.more{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-en);font-size:13px;letter-spacing:.08em;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.more::after{content:"→";transition:transform .45s var(--ease)}
.more:hover::after{transform:translateX(4px)}

/* ---------- ヘッダー ---------- */
.site-header{position:fixed;inset:0 0 auto;height:var(--header-h);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px, 2.6vw, 36px);color:var(--white);transition:background .5s ease,color .5s ease,box-shadow .5s ease}
.site-header .logo{display:block;width:86px}
.site-header .logo img{width:100%}
.site-header .logo .logo-dark{display:none}
.global-nav{display:flex;align-items:center;gap:clamp(18px, 2.4vw, 40px);font-family:var(--f-en-sub);font-size:15px;letter-spacing:.06em}
.global-nav .reserve-btn{border:1px solid currentColor;padding:3px 16px;font-size:14px;font-family:var(--f-body);letter-spacing:.08em;transition:background-color .4s ease,border-color .4s ease,color .4s ease}   /* 枠・面・文字を同じ速さで変える（2026-11-07） */
.global-nav .reserve-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--green)}   /* 写真の上では金色に */
.lang-btn{font-family:var(--f-en-sub);font-size:14px;letter-spacing:.08em;opacity:.85;transition:opacity .3s}
.lang-btn:hover{opacity:1}
.drawer-langs{display:flex;gap:18px;margin:0 0 28px}
.drawer-langs{flex-wrap:wrap}
.drawer-langs .lang-btn{font-size:14px}
.drawer-langs .lang-btn[aria-current]{color:var(--gold-light);opacity:1}
/* 言語メニュー：地球の印を押すと開く */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;display:flex;align-items:center;width:24px;height:24px;cursor:pointer;opacity:.85;transition:opacity .3s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu[open] summary{opacity:1}
.lang-menu svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.1}
.lang-panel{position:absolute;top:calc(100% + 14px);right:-12px;min-width:132px;padding:8px 0;background:var(--white);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.lang-panel .lang-btn{display:block;padding:7px 20px;line-height:1.5;opacity:1;white-space:nowrap}
.lang-panel .lang-btn:hover{color:var(--gold-ink)}
.lang-btn[aria-current]{color:var(--gold-ink)}
.menu-btn{width:44px;height:44px;margin-left:4px;background:none;border:0;color:inherit;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px}
.menu-btn span{display:block;height:1px;background:currentColor}
/* 写真の上を過ぎたら・写真のないページでは、地色つきのヘッダーに */
.site-header.is-solid,.no-hero .site-header{background:rgba(246,247,243,.94);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.site-header.is-solid .logo-light,.no-hero .site-header .logo-light{display:none}
.site-header.is-solid .logo-dark,.no-hero .site-header .logo-dark{display:block}
.site-header.is-solid .reserve-btn:hover,.no-hero .site-header .reserve-btn:hover{background:var(--green);color:var(--white);border-color:var(--green)}

/* ---------- メニュー（右から出る緑の帯） ---------- */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.drawer::before{content:"";position:absolute;inset:0;background:rgba(20,30,26,.35);opacity:0;transition:opacity .5s ease}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(440px, 100%);background:var(--green);color:var(--on-green);padding:88px 40px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .6s var(--ease)}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer.is-open::before{opacity:1}
.drawer.is-open .drawer-panel{transform:none}
.drawer-close{position:absolute;top:18px;right:20px;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;font-size:28px;line-height:1;font-weight:200}
.drawer-nav{list-style:none;margin:0 0 32px;padding:0;font-family:var(--f-en-sub);font-size:18px;letter-spacing:.06em}
.drawer-nav li{border-bottom:1px solid rgba(241,235,223,.12)}
.drawer-nav a{display:block;padding:10px 0}
.drawer .reserve-wide{display:block;text-align:center;border:1px solid var(--on-green);padding:12px;margin-bottom:40px;letter-spacing:.1em;transition:background-color .4s ease,border-color .4s ease,color .4s ease}
.drawer .reserve-wide:hover{background:var(--gold);border-color:var(--gold);color:var(--green)}

/* ---------- ヒーロー（ページ最上部の写真） ---------- */
.hero{position:relative;height:clamp(260px, 36vw, 600px);overflow:hidden;background:var(--cream)}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,0) 40%)}
.hero-top{height:100svh;min-height:520px}
.hero-top .slide{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease}
.hero-top .slide.is-active{opacity:1}
.hero-top .slide img{transform:scale(1.08);transition:transform 9s linear}
.hero-top .slide.is-active img{transform:scale(1)}
.hero-top::after{background:rgba(0,0,0,.18)}
.hero-copy{position:absolute;inset:auto 0 18%;z-index:2;text-align:center;color:var(--white)}
.hero-copy h1{color:var(--white);font-family:var(--f-mincho);font-size:clamp(20px, 2.6vw, 30px);letter-spacing:.24em}
.hero-copy p{font-size:clamp(11px, 1.1vw, 13px);letter-spacing:.2em;margin-top:6px}
.scroll-sign{position:absolute;left:50%;bottom:28px;z-index:2;width:1px;height:56px;background:rgba(255,255,255,.4);overflow:hidden}
.scroll-sign::after{content:"";position:absolute;left:0;top:-56px;width:1px;height:56px;background:var(--white);animation:scroll 2.4s var(--ease) infinite}
@keyframes scroll{to{top:56px}}

/* ---------- ページ見出しの帯（生成り） ---------- */
.page-head{background:var(--cream);padding:clamp(56px, 7vw, 96px) 0}
.no-hero .page-head{padding-top:calc(var(--header-h) + clamp(48px, 6vw, 80px))}
.page-head .wrap{display:grid;grid-template-columns:minmax(160px, 1fr) 3fr;gap:24px 48px;align-items:start}
.page-head-text{color:var(--green);font-size:14px;line-height:2.2;margin:0}
.page-head-ja{font-family:var(--f-mincho);color:var(--green);font-size:15px;margin:0}
.lang-switch{grid-column:2;display:flex;gap:4px;font-family:var(--f-en-sub);font-size:14px}
.lang-switch a{padding:0 10px;border-left:1px solid var(--line);color:var(--green)}
.lang-switch a:first-child{border-left:0;padding-left:0}
.lang-switch a[aria-current]{font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* ---------- 帯（セクション） ---------- */
.band{padding:var(--sec-y) 0}
.band-cream{background:var(--cream)}
.band-paper{background:var(--paper)}
.band-green{background:var(--green);color:var(--on-green)}
.band-green-soft{background:var(--green-soft);color:var(--on-green)}
.band-green h2,.band-green h3,.band-green-soft h2,.band-green-soft h3,.band-green .en-title,.band-green-soft .en-title{color:var(--on-green)}
.sec-head{display:grid;grid-template-columns:minmax(160px, 1fr) 3fr auto;gap:24px 48px;align-items:start;margin-bottom:clamp(40px, 5vw, 64px)}
.sec-head p{font-size:14px;margin:0}
.kicker{font-family:var(--f-en);font-size:13px;letter-spacing:.12em;color:var(--sub);margin-bottom:8px}
.band-green .kicker,.band-green-soft .kicker{color:var(--gold)}
.sec-title{font-family:var(--f-mincho);font-size:clamp(20px, 2.2vw, 26px);letter-spacing:.08em;margin-bottom:24px}

/* ---------- トップ：はじめの紹介（縦書き＋英文） ---------- */
.intro{padding:clamp(100px, 13vw, 200px) 0}
.intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px, 8vw, 140px);align-items:center}
.intro-ja{writing-mode:vertical-rl;font-family:var(--f-mincho);height:clamp(380px, 32vw, 460px);justify-self:center;font-size:14px;line-height:2.4;letter-spacing:.14em}
.intro-ja h2{font-size:clamp(18px, 1.8vw, 22px);letter-spacing:.2em;margin-left:2em}
.intro-ja p{margin:0 0 0 1em;text-align:justify}
.intro-en h2{font-family:var(--f-en);font-weight:300;font-size:clamp(17px, 1.6vw, 21px);letter-spacing:.02em;margin-bottom:18px;line-height:1.5}
.intro-en p{font-family:var(--f-en-sub);font-weight:300;font-size:15px;line-height:1.85;letter-spacing:.01em;color:var(--sub)}

/* ---------- 写真＋文章の2段組 ---------- */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px, 6vw, 96px);align-items:center}
.split.reverse{grid-template-columns:1fr 1.15fr}
.split.reverse > :first-child{order:2}
.band-cream .split-wide{margin-left:calc(var(--pad-x) * -1)}

/* 写真が順番に切り替わる枠 */
.fader{position:relative;aspect-ratio:3 / 2;overflow:hidden;background:var(--paper)}
.fader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.fader img.is-active{opacity:1}

/* ---------- 写真の並び ---------- */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.photos.four{grid-template-columns:repeat(4,1fr)}
.photo{position:relative;overflow:hidden;background:rgba(0,0,0,.06);margin:0}
.photo img{width:100%;aspect-ratio:3 / 2;object-fit:cover}   /* 写真のもとの比率。切りすぎない（2026-11-07） */
.course .photo img{aspect-ratio:4 / 3}   /* ニュースの表紙は 4:3 で作ってある */
.photo.tall img{aspect-ratio:3 / 4}
.photo figcaption,.photo .cap{position:absolute;left:12px;bottom:8px;font-family:var(--f-en-sub);font-size:13px;color:var(--white);text-shadow:0 0 8px rgba(0,0,0,.4);letter-spacing:.04em}
.photo.cap-below figcaption{position:static;color:inherit;text-shadow:none;padding-top:8px;font-family:var(--f-body);font-size:13px}

/* 文章ブロック（2列） */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px clamp(40px, 6vw, 96px);margin:clamp(40px, 5vw, 64px) 0 clamp(72px, 9vw, 120px)}
.cols:last-child{margin-bottom:0}
.block-ja{font-family:var(--f-mincho);font-size:12px;letter-spacing:.1em;color:var(--gold);display:block}   /* 緑の帯の上の小見出しは金色 */
.band-paper .block-ja,.band-cream .block-ja,.band-white .block-ja{color:var(--sub)}
.block-title{font-family:var(--f-en);font-weight:300;font-size:clamp(19px, 1.8vw, 23px);letter-spacing:.03em;margin:2px 0 16px}
.cols p{font-size:14px}

/* ---------- トップ：ROOM の写真 ---------- */
.room-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}

/* ---------- トップ：数字で見る宇莫別荘（金色の数字） ---------- */
.facts-band{padding:clamp(56px, 7vw, 88px) 0}
.facts-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.facts-row.reviews{grid-template-columns:repeat(3,1fr);margin-top:40px;padding-top:40px;border-top:1px solid rgba(241,235,223,.16)}
.facts-row li{display:flex;flex-direction:column;align-items:center;gap:6px}
.facts-row .num{font-family:var(--f-en);font-weight:200;font-size:clamp(28px, 3.4vw, 42px);color:var(--gold);line-height:1.1;letter-spacing:.02em}
.facts-row.reviews .num{font-family:var(--f-mincho);font-size:clamp(22px, 2.6vw, 30px)}
.facts-row .num small{font-size:.5em;margin-left:2px}
.facts-row .lbl{font-size:12px;color:var(--on-green-sub);letter-spacing:.08em}
.facts-note{text-align:center;font-size:11px;color:var(--on-green-sub);margin-top:28px;opacity:.8}

/* ---------- トップ：OUR VILLAS ---------- */
.villas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px, 3vw, 40px)}
.villa-card{display:flex;flex-direction:column;color:var(--on-green)}
.villa-body{display:flex;flex-direction:column;gap:6px;padding-top:18px}
.villa-tag{font-family:var(--f-en-sub);font-size:13px;color:var(--gold);letter-spacing:.06em}
.villa-name{font-family:var(--f-mincho);font-size:clamp(18px, 1.8vw, 22px)}
.villa-text{font-size:13px;color:var(--on-green-sub)}
.villa-card .more{align-self:flex-start;margin-top:10px}
.soon-photo{aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;background:rgba(241,235,223,.06);border:1px solid rgba(196,179,112,.35)}
.soon-photo span{font-family:var(--f-en);font-size:18px;letter-spacing:.12em;color:var(--gold)}

/* ---------- 南邸オープン後のトップ（試作）：左右2分割で宿を選ぶ ---------- */
.chooser{height:100svh;min-height:560px;display:flex;background:var(--green)}
.chooser::after{display:none}
.choice{position:relative;flex:1 1 50%;overflow:hidden;color:var(--white);transition:flex-grow .9s var(--ease)}
.choice + .choice{border-left:1px solid rgba(255,255,255,.25)}
.choice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.choice::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.05) 35%,rgba(20,30,26,.7));transition:opacity .6s}
.choice-body{position:absolute;left:clamp(24px, 4vw, 56px);right:clamp(24px, 4vw, 56px);bottom:clamp(40px, 8vh, 80px);z-index:2;display:flex;flex-direction:column;gap:10px}
.choice-tag{font-family:var(--f-en);font-size:13px;letter-spacing:.14em;color:var(--gold)}
.choice-name{font-family:var(--f-en);font-weight:200;font-size:clamp(26px, 3.2vw, 40px);line-height:1.25;letter-spacing:.04em}
.choice-name b{font-family:var(--f-mincho);font-weight:400;font-size:.8em;letter-spacing:.12em}
.choice-text{font-size:13px;line-height:1.9;max-width:30em;color:rgba(255,255,255,.88)}
.choice-more{align-self:flex-start;margin-top:6px;font-size:14px;letter-spacing:.1em;border-bottom:1px solid var(--gold);padding-bottom:2px;color:var(--gold)}
.choice-catch{position:absolute;left:0;right:0;top:calc(var(--header-h) + 4vh);z-index:3;text-align:center;color:var(--white);font-family:var(--f-mincho);font-size:clamp(17px, 2vw, 24px);letter-spacing:.24em;pointer-events:none;text-shadow:0 0 18px rgba(0,0,0,.35)}
.choice-catch small{display:block;font-family:var(--f-body);font-size:12px;letter-spacing:.2em;margin-top:6px}
@media (hover:hover){
  .chooser:hover .choice{flex-grow:.8}
  .chooser .choice:hover{flex-grow:1.25}
  .choice:hover img{transform:scale(1.05)}
}
/* 2つの宿のちがい（表） */
.compare{overflow-x:auto}
.compare table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.compare th,.compare td{border-bottom:1px solid var(--line);padding:16px 12px;text-align:left;vertical-align:top}
.compare thead th{font-family:var(--f-mincho);font-weight:400;font-size:17px;color:var(--green);border-bottom:1px solid var(--green)}
.compare tbody th{width:18%;font-weight:400;color:var(--sub);font-size:13px}

/* ---------- ニュース一覧（トップの短い一覧） ---------- */
.news-lines{list-style:none;margin:0 auto;padding:0;max-width:880px}
.news-lines li{border-bottom:1px solid rgba(41,70,61,.15)}
.news-lines a{display:grid;grid-template-columns:110px 1fr 20px;gap:24px;align-items:center;padding:20px 4px;transition:transform .45s var(--ease)}
.news-lines a:hover{transform:translateX(6px)}
.news-lines time{font-family:var(--f-en-sub);font-size:14px;color:var(--sub)}
.news-lines .t{color:var(--green);font-size:14px;line-height:1.8}
.news-lines a::after{content:"→";color:var(--green)}

/* ---------- ニュース一覧ページ ---------- */
.news-cards{list-style:none;margin:0 auto;padding:0;max-width:920px}
.news-cards li{border-bottom:1px solid var(--line)}
.news-cards a{display:grid;grid-template-columns:minmax(0, 42%) 1fr;gap:clamp(24px, 4vw, 48px);align-items:center;padding:clamp(28px, 3.4vw, 40px) 0}
.news-cards .photo img{aspect-ratio:4 / 3}
.news-cards time{font-family:var(--f-en-sub);font-size:14px;color:var(--sub)}
.news-cards h2{font-family:var(--f-mincho);font-size:clamp(15px, 1.5vw, 18px);color:var(--green);margin:6px 0 10px;line-height:1.7}
.news-cards p{font-size:13px;line-height:1.9;color:var(--sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- ニュース記事 ---------- */
.article{padding:clamp(56px, 7vw, 96px) 0 var(--sec-y);background:var(--paper)}
.article-meta{font-family:var(--f-en-sub);font-size:14px;color:var(--sub);display:flex;gap:16px}
.article-meta a{color:var(--green)}
.article h1{font-family:var(--f-mincho);font-size:clamp(19px, 2.1vw, 25px);letter-spacing:.06em;margin:14px 0 clamp(36px, 4vw, 56px);line-height:1.7}
.prose{font-size:15px;line-height:2.1}
.prose h2,.prose h3,.prose h4{font-family:var(--f-body);font-weight:500;font-size:15px;margin:2.4em 0 .6em;color:var(--ink)}
.prose h2{font-family:var(--f-mincho);font-weight:400;font-size:19px}
.prose strong{font-weight:500;color:var(--ink)}
.prose figure{margin:2em 0}
.prose figure img{width:100%}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
.prose ul,.prose ol{padding-left:1.4em}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:2px solid var(--line);color:var(--sub)}
.prose iframe{max-width:100%}
.article-nav{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(56px, 7vw, 88px);padding-top:28px;border-top:1px solid var(--line);font-size:13px}
.article-nav a{color:var(--green);max-width:45%}

/* ---------- Room ---------- */
.plans{display:grid;gap:24px}
.plans .photo{background:transparent}
.plans .photo img{aspect-ratio:auto}
.amenity{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px, 6vw, 96px);align-items:center;margin:clamp(72px, 9vw, 120px) 0 clamp(48px, 6vw, 72px)}
.amenity-icons{background:var(--green);padding:8px}
.amenity-list{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:20px 0 0;padding:0;font-size:13px;color:var(--on-green-sub)}
.amenity-list li::before{content:"・"}

/* 寝室とベッドの構成 */
.beds{border-top:1px solid rgba(241,235,223,.18);padding-top:clamp(40px, 5vw, 64px)}
.bed-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bed-list li{border:1px solid rgba(241,235,223,.22);padding:18px 18px 16px;display:grid;gap:2px}
.bed-list .floor{font-family:var(--f-en);font-size:12px;color:var(--gold)}
.bed-list .room{font-family:var(--f-mincho);font-size:16px;color:var(--on-green)}
.bed-list .bed{font-size:13px;color:var(--on-green-sub)}
.bed-list .ppl{font-family:var(--f-en);font-size:22px;color:var(--gold);margin-top:6px}
.beds-note{font-size:13px;color:var(--on-green-sub);margin-top:18px}
.house-notes{list-style:none;margin:24px 0 0;padding:16px 0 0;border-top:1px solid rgba(241,235,223,.18);font-size:13px;color:var(--on-green-sub);display:grid;gap:6px}
.house-notes strong{color:var(--on-green);font-weight:400}

/* ---------- 所要時間の表（Explore・Access） ---------- */
.times{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px, 5vw, 72px);margin:0;padding:0}
.times div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.times dt{color:var(--ink)}
.times dt small{display:block;font-family:var(--f-en-sub);font-size:12px;color:var(--sub);line-height:1.4}
.times dd{margin:0;white-space:nowrap;color:var(--green)}
.band-white .times-box{background:var(--paper)}
.times-box{background:var(--white);padding:clamp(28px, 4vw, 48px)}
.times-box h3{font-family:var(--f-mincho);font-size:16px;margin-bottom:8px}
.times-cat{font-size:12px;letter-spacing:.12em;color:var(--sub);margin:28px 0 0}
.times-note{font-size:13px;color:var(--sub);margin-top:24px}

/* ---------- Explore ---------- */
.stay-head{max-width:720px;margin-bottom:clamp(40px, 5vw, 56px)}
.seasons{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px, 2vw, 24px)}
.season h3{font-family:var(--f-mincho);font-size:16px;margin:16px 0 6px}
.season .en{font-size:13px;color:var(--sub);display:block}
.season p{font-size:13px;line-height:1.9}
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px, 3vw, 40px)}
.course h3{font-family:var(--f-mincho);font-size:15px;line-height:1.8;margin:16px 0 8px;color:var(--ink)}
.course p{font-size:13px;color:var(--sub);line-height:1.9}

/* よくある質問（Explore の4つ・FAQページ） */
.faq{margin:0}
.faq dt{position:relative;padding:20px 0 6px 2.2em;color:var(--ink);font-weight:400;border-top:1px solid var(--line)}
.faq dt::before{content:"Q";position:absolute;left:0;font-family:var(--f-en);color:var(--green)}
.faq dd{position:relative;margin:0;padding:0 0 22px 2.2em;font-size:14px}
.faq dd::before{content:"A";position:absolute;left:0;font-family:var(--f-en);color:var(--sub)}
.tag-link{display:inline-block;margin-left:6px;font-size:12px;color:var(--green);border:1px solid rgba(41,70,61,.4);border-radius:999px;padding:0 12px;line-height:1.9;transition:background .4s,color .4s}
.tag-link:hover{background:var(--green);color:var(--white)}

/* ---------- Access ---------- */
.map{aspect-ratio:16 / 8;width:100%;border:0;filter:grayscale(1);display:block}
.facts{display:grid;grid-template-columns:160px 1fr;gap:16px 32px;margin:clamp(40px, 5vw, 64px) 0;font-size:14px}
.facts dt{color:var(--green);font-family:var(--f-en-sub);font-size:15px}
.facts dd{margin:0}
.note-box{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(28px, 4vw, 48px) 0}
.note-box h2{font-family:var(--f-mincho);font-size:18px;color:var(--green);margin-bottom:14px}
.routes{background:#ECECE8;padding:clamp(24px, 4vw, 48px);display:grid;gap:28px}
.routes h3{font-family:var(--f-mincho);font-size:16px;color:var(--green)}
.route{display:flex;align-items:center;flex-wrap:wrap;gap:8px 0}
.route .st{background:var(--white);padding:10px 18px;font-family:var(--f-mincho);font-size:15px;color:var(--green);min-width:110px;text-align:center}
.route .st.villa{background:var(--green);color:var(--on-green);font-family:var(--f-body);font-size:13px;letter-spacing:.04em;white-space:nowrap}
.route .go{flex:1 1 90px;min-width:90px;max-width:180px;text-align:center;font-size:12px;color:var(--sub);position:relative;padding:0 10px 14px}
.route .go::after{content:"";position:absolute;left:10px;right:16px;bottom:6px;border-top:1px solid var(--green)}
.route .go::before{content:"";position:absolute;right:12px;bottom:3px;width:7px;height:7px;border-top:1px solid var(--green);border-right:1px solid var(--green);transform:rotate(45deg)}
.routes-2{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(24px, 4vw, 56px)}

/* ---------- Reserve ---------- */
.lead-jp{font-family:var(--f-mincho);font-size:clamp(18px, 2vw, 22px);color:var(--green);margin-bottom:16px}
.before-book{background:var(--cream);padding:clamp(28px, 4vw, 48px);margin:clamp(40px, 5vw, 56px) 0}
.before-book h2{font-family:var(--f-mincho);font-size:16px;color:var(--green);margin-bottom:12px}
.before-book ul{list-style:none;margin:0;padding:0;font-size:14px}
.before-book li{padding-left:1.4em;text-indent:-1.4em}
.before-book li::before{content:"－ "}
.before-book .en li{font-family:var(--f-en-sub);font-size:15px;color:var(--sub)}
.book{position:relative;display:block;overflow:hidden}
.book img{width:100%;aspect-ratio:3 / 2;object-fit:cover;filter:brightness(.8)}
.book .btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--green);color:var(--on-green);padding:16px clamp(28px, 4vw, 56px);text-align:center;letter-spacing:.12em;line-height:1.7;white-space:nowrap;transition:background .4s}
.book .btn small{display:block;font-family:var(--f-en);font-size:12px;letter-spacing:.2em}
.book:hover .btn{background:#1F372F}
.small-note{font-size:13px;color:var(--sub);margin-top:16px}
.link-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.line-btn{display:inline-flex;justify-content:space-between;align-items:center;gap:24px;min-width:240px;border:1px solid var(--green);color:var(--green);padding:10px 20px;font-size:14px;transition:background .4s,color .4s}
.line-btn::after{content:"→"}
.line-btn:hover{background:var(--green);color:var(--white)}

/* ---------- Contact フォーム ---------- */
.form{display:grid;gap:28px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;color:var(--ink)}
.req{margin-left:10px;font-size:11px;background:var(--green);color:var(--white);padding:1px 8px;vertical-align:2px}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:0;padding:12px 14px}
.field textarea{min-height:200px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green)}
.agree{display:flex;align-items:center;gap:10px;font-size:14px}
.agree input{width:18px;height:18px;accent-color:var(--green)}
.agree a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{justify-self:center;font:inherit;font-size:15px;letter-spacing:.2em;color:var(--white);background:var(--green);border:0;padding:16px 72px;cursor:pointer;transition:background .4s}
.submit:hover{background:#1F372F}
.submit:disabled{opacity:.5;cursor:wait}
.form-status{text-align:center;font-size:14px;color:var(--green);min-height:1.5em}
.form-status.is-done{background:var(--white);padding:clamp(40px,6vw,72px) 24px;line-height:2.1}
.form-status.is-done strong{display:block;font-weight:400;font-size:clamp(19px,2vw,23px);letter-spacing:.1em;margin-bottom:14px}
.form-status.is-done span{color:var(--sub);font-size:13px}

/* ---------- 文章のページ（FAQ・規約・特商法・プライバシー） ---------- */
.doc{padding:clamp(56px, 7vw, 96px) 0 var(--sec-y);background:var(--paper)}
.doc h2{font-family:var(--f-mincho);font-size:clamp(17px, 1.7vw, 20px);color:var(--green);margin:2.6em 0 1em}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:15px;font-weight:500;margin:2em 0 .5em}
.doc p,.doc li{font-size:14px}
.doc .notes{padding-left:1.2em;margin:0}
.doc .notes li{margin-bottom:.6em}
.doc .label{font-weight:500;color:var(--ink);margin:1.2em 0 .2em}
.doc-date{margin-top:3em;font-size:13px;color:var(--sub)}
.law{width:100%;border-collapse:collapse;font-size:14px}
.law th,.law td{border-bottom:1px solid var(--line);padding:18px 8px;text-align:left;vertical-align:top}
.law th{width:32%;font-weight:500;color:var(--ink)}

/* ---------- 予約への誘導の帯（Room・Access・Explore の最後） ---------- */
.cta{background:var(--green);color:var(--on-green);padding:clamp(56px, 7vw, 88px) 0;text-align:center}
.cta-lead{font-family:var(--f-mincho);font-size:clamp(17px, 1.8vw, 21px);margin-bottom:6px}
.cta-sub{font-size:13px;color:var(--on-green-sub);margin-bottom:28px}
.cta-btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:14px clamp(32px, 5vw, 64px);letter-spacing:.14em;line-height:1.7;transition:background-color .4s ease,border-color .4s ease,color .4s ease}
.cta-btn small{display:block;font-family:var(--f-en);font-size:11px;letter-spacing:.2em}
.cta-btn:hover{background:var(--gold);color:var(--green)}

/* ---------- フッター ---------- */
.site-footer{background:var(--green);color:var(--on-green);padding:clamp(56px, 7vw, 88px) 0 32px}
.site-footer .wrap{display:grid;grid-template-columns:1fr auto;gap:48px}
.footer-logo{width:130px}
/* サイトの案内と運営（2026-11-07）：上の面＝宿の案内、下の深い緑の面＝運営の UBAKU */
.site-footer:has(.footer-op){padding-bottom:0}
.site-footer .wrap.footer-main{grid-template-columns:auto auto minmax(0,1fr);gap:40px clamp(40px,6vw,96px);padding-bottom:clamp(56px,7vw,88px);align-items:start}
.footer-home{display:block}
.footer-home .footer-logo{width:clamp(120px,12vw,160px);height:auto}
.footer-nav{display:flex;gap:clamp(32px,4vw,56px)}
.footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start;font-family:'Jost',sans-serif;font-weight:300;font-size:15px;letter-spacing:.06em}
.footer-main .footer-info{max-width:none;grid-template-columns:minmax(300px,auto) auto;gap:24px clamp(32px,4vw,56px);justify-self:end}
.footer-main .footer-info > :first-child{grid-row:span 2}
.footer-main .footer-links{display:grid;gap:2px}
.footer-op{background:#1F372F;padding:clamp(32px,4vw,44px) 0}
.footer-op .wrap{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px clamp(32px,5vw,64px)}
.footer-op-brand{display:flex;align-items:center;gap:16px;--logo-color:var(--on-green);--logo-bar:#23A0DA}   /* Ū の横線は東川青 */
.footer-op-brand small{font-size:11px;letter-spacing:.2em;color:var(--on-green-sub)}
.footer-op-brand .wordmark{width:clamp(130px,13vw,170px)}
.footer-op-text{margin:0;font-size:12.5px;line-height:1.9;letter-spacing:.06em;color:var(--on-green-sub)}
.footer-op-text span{display:block;white-space:nowrap}
.footer-op-end{display:grid;justify-items:end;gap:6px}
.footer-copy{font-family:'Jost',sans-serif;font-weight:300;font-size:12px;letter-spacing:.08em;color:var(--on-green-sub)}
/* UBAKŪ のロゴ（ubaku.jp と同じデータ） */
.wordmark{position:relative;display:block;aspect-ratio:330 / 60}
.wordmark::before,.wordmark::after{content:"";position:absolute;inset:0}
.wordmark::before{background:var(--logo-color,#2B241C);-webkit-mask:url(/assets/img/logo-wordmark-letters.svg) center / contain no-repeat;mask:url(/assets/img/logo-wordmark-letters.svg) center / contain no-repeat}
.wordmark::after{background:var(--logo-bar,#B9975B);-webkit-mask:url(/assets/img/logo-wordmark-bar.svg) center / contain no-repeat;mask:url(/assets/img/logo-wordmark-bar.svg) center / contain no-repeat}
.footer-info{display:grid;gap:28px;font-size:13px;line-height:1.9;max-width:420px}
.footer-info h2{font-family:var(--f-en-sub);font-size:13px;color:var(--sage);letter-spacing:.06em;margin-bottom:4px;font-weight:400}
.footer-info .en{color:var(--on-green-sub);font-size:13px}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;margin:0;padding:0;font-size:12px;color:var(--on-green-sub)}
/* メール・Instagram・note のアイコン（ubaku.jp と同じ形・大きさ） */
.sns-row{display:flex;align-items:center;gap:24px;margin:6px 0 0}
.sns-icon{display:inline-flex;width:22px;height:22px;color:var(--on-green);transition:color .4s,transform .45s var(--ease)}
.sns-icon:hover{color:var(--gold);transform:translateY(-2px)}
.sns-icon--note{width:65px;height:15px}
.sns-icon--note svg{width:auto;height:100%}
.sns-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sns-icon svg .dot,.sns-icon svg .fill{fill:currentColor;stroke:none}
/* UBAKU のサイト一覧（ubaku.jp のフッターと同じ並び） */
.footer-family{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0;font-family:var(--f-en);font-weight:300;font-size:12px;letter-spacing:.12em}
.footer-family a{color:var(--on-green-sub);transition:color .4s}
.footer-family a:hover,.footer-family a[aria-current]{color:var(--on-green)}
.copyright{grid-column:1 / -1;font-family:var(--f-en-sub);font-size:12px;color:var(--on-green-sub);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(241,235,223,.14);padding-top:24px}

/* ---------- 動き（ubaku.jp と同じ） ---------- */
.reveal{opacity:0;transform:translateY(var(--reveal-dist));transition:opacity var(--reveal-time) ease,transform var(--reveal-time) var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.zoom{overflow:hidden}
.zoom img{transition:transform var(--zoom-time) var(--ease)}
@media (hover:hover){
  .zoom:hover img,a:hover .zoom img{transform:scale(1.05)}
  .lift{transition:transform .45s var(--ease)}
  .lift:hover{transform:translateY(var(--lift))}
}

/* ---------- タブレット ---------- */
@media (max-width: 1000px){
  .site-footer .wrap.footer-main{grid-template-columns:auto 1fr}
  .footer-main .footer-info{grid-column:1 / -1;justify-self:start;grid-template-columns:minmax(0,auto) auto}
  .global-nav a:not(.reserve-btn):not(.lang-btn){display:none}   /* スマホでも JP/EN の切り替えは見せる */
  .sec-head{grid-template-columns:1fr auto}
  .sec-head p{grid-column:1 / -1;grid-row:2}
  .seasons{grid-template-columns:repeat(2,1fr)}
}
/* ---------- スマホ ---------- */
@media (max-width: 760px){
  body{font-size:14px}
  :root{--header-h:64px}
  .site-header .logo{width:68px}
  .global-nav .reserve-btn{font-size:12px;padding:2px 10px}
  .page-head .wrap{grid-template-columns:1fr}
  .lang-switch{grid-column:1}
  .intro .wrap{grid-template-columns:1fr}
  .intro-ja{writing-mode:horizontal-tb;height:auto;justify-self:stretch}
  .intro-ja h2{margin:0 0 20px}
  .intro-ja p{margin:0}
  .split,.split.reverse{grid-template-columns:1fr}
  .split.reverse > :first-child{order:0}
  .band-cream .split-wide{margin-left:calc(var(--pad-x) * -1);margin-right:calc(var(--pad-x) * -1)}
  .photos,.photos.four,.room-photos{grid-template-columns:repeat(2,1fr)}
  .room-photos > :last-child:nth-child(odd),.photos > :last-child:nth-child(odd){grid-column:1 / -1}
  .cols,.amenity,.times,.routes-2,.courses{grid-template-columns:1fr}
  .bed-list{grid-template-columns:repeat(2,1fr)}
  .facts-row{grid-template-columns:repeat(2,1fr);gap:28px 12px}
  .facts-row.reviews,.villas{grid-template-columns:1fr}
  .chooser{flex-direction:column;height:auto;min-height:0}
  .choice{flex:none;height:62svh;min-height:420px}
  .choice + .choice{border-left:0;border-top:1px solid rgba(255,255,255,.25)}
  .choice-catch{top:calc(var(--header-h) + 16px);font-size:15px}
  .news-lines a{grid-template-columns:1fr 16px;gap:4px 12px}
  .news-lines time{grid-column:1 / -1}
  .news-cards a{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:4px}
  .facts dd{margin-bottom:16px}
  .map{aspect-ratio:1 / 1}
  /* 行き方の図はスマホでは縦に並べる（矢印は下向き） */
  .routes{background:none;padding:0;gap:40px}
  .routes-2{gap:28px}
  .routes h3{margin:0 0 12px;font-size:16px;line-height:1.5}
  .route{display:block;background:var(--white);padding:20px 22px}
  .route + .route{margin-top:12px !important}
  .route .st,.route .st.villa{position:relative;display:block;min-width:0;padding:0 0 0 22px;background:none;font-family:var(--f-mincho);font-size:15px;letter-spacing:.04em;line-height:1.6;text-align:left;white-space:normal;color:var(--green)}
  .route .st::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border:1px solid var(--gold);border-radius:50%;background:var(--white);box-sizing:border-box}
  .route .st.villa{font-weight:500}
  .route .st.villa::before{background:var(--green);border-color:var(--green)}
  .route .go{position:relative;display:block;flex:none;min-width:0;max-width:none;min-height:0;padding:7px 0 7px 22px;font-size:12px;line-height:1.5;text-align:left}
  .route .go::after{left:4px;right:auto;top:-.45em;bottom:-.45em;border-top:0;border-left:1px solid var(--gold)}
  .route .go::before{display:none}
  .small-note{margin-top:16px}
  .course .photo img{aspect-ratio:8 / 3;width:100%;object-fit:cover;object-position:50% 50%}   /* 表紙の上下を25%ずつ切り、ロゴを真ん中に */
  .law th{width:38%}
  .site-footer .wrap,.site-footer .wrap.footer-main{grid-template-columns:1fr}
  .footer-main .footer-info{grid-template-columns:minmax(0,1fr);justify-self:start}
  .footer-op .wrap{grid-template-columns:1fr}
  .footer-op-end{justify-items:start}
  .footer-family{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 28px}   /* ubaku.jp と同じ 2×2 */
  .hero-top .slide:first-child img{object-position:80% 50%}                                /* 看板が見える位置 */
}

/* 「動きを減らす」設定では全部止める */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .zoom img,.hero-top .slide img,.lift{transition:none!important;transform:none!important}
  .hero-top .slide,.fader img{transition:none}
  .scroll-sign::after{animation:none}
}

/* ---------- 文章の文字ぞろえ（2026-11-07 mashuさん） ----------
   日本語（と繁体字）は左右両端そろえ。英語・韓国語は単語の間が空いてしまうので、世界標準の左そろえ。
   main にかけて下へ受け継がせる。中央ぞろえの場所（予約の帯など）は自分の指定が勝つのでそのまま。
   見出し・キャッチ・写真の説明は、文章ではないので左（または中央）のまま。 */
main,.footer-op-text{text-align:justify}
main :where(h1,h2,h3,h4,h5,dt,figcaption,.v3-catch):not(:is(.hero-copy,.cta,.rs-best,.facts-row,.choice-catch,[style*="text-align:center"],[style*="text-align: center"]) *){text-align:start}
main .law td{text-align:justify}
/* 英語・韓国語の本文は左そろえ。ページ全体がその言語のとき／日本語ページの中の英文のとき。中央ぞろえの場所はそのまま */
main:lang(en),main:lang(ko),.footer-op-text:lang(en),.footer-op-text:lang(ko){text-align:start}
:where(main [lang="en"]:not(:is(.hero-copy,.cta,.rs-best,.facts-row,.choice-catch,[style*="text-align:center"],[style*="text-align: center"]) *)){text-align:start}
/* 韓国語は単語の途中で改行しない */
main :lang(ko){word-break:keep-all}