@charset "utf-8";
/* ==========================================================================
   一夜限り 宵彩 -Sai- / style.css
   --------------------------------------------------------------------------
   1. Design tokens
   2. Base / Reset
   3. 日本語の改行制御（重要）
   4. Layout
   5. Components
   6. Sections
   7. Motion
   8. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --paper:      #FBF7ED;
  --paper-2:    #F6F0E2;
  --paper-3:    #F1E9D8;
  --ink:        #3F3A32;
  --ink-2:      #6B6357;
  --ink-3:      #948B7B;
  --rule:       #C3B8A2;
  --frame:      #A99B82;
  --leaf:       #8CA163;
  --leaf-2:     #B3C48F;
  --leaf-deep:  #6F8350;
  --coral:      #D79A87;
  --blush:      #E4CDC6;
  --gold:       #EBD49B;

  --serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --body:  "Noto Serif JP", "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --hand:  "Caveat", "Shippori Mincho", cursive;

  --wrap: 760px;
  --wrap-wide: 1000px;
}

/* ==========================================================================
   2. Base / Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  font-weight:300;
  color:var(--ink);
  background-color:var(--paper);
  /* 和紙のような極薄のテクスチャ（画像を使わずCSSで表現） */
  background-image:
    repeating-linear-gradient(92deg, rgba(160,140,105,.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(160,140,105,.022) 0 1px, transparent 1px 6px),
    radial-gradient(120% 70% at 50% 0%, #FFFCF4 0%, var(--paper) 55%, var(--paper-2) 100%);
  background-attachment:fixed;
  line-height:2;
  letter-spacing:.06em;
  overflow-x:hidden;
}

img,svg,iframe{ max-width:100%; }
a{ color:inherit; }
figure{ margin:0; }
button{ font:inherit; color:inherit; }

/* Caveat（手書き）を使う箇所は500で統一。読み込む字幅を1つに絞って軽量化する */
.sec-head__en,
.photo figcaption,
.photo__ph em,
.hero__date .dow,
.info dd .h,
.concept__sign,
.footer__sns,
.map__load span{ font-weight:500; }

/* ==========================================================================
   3. 日本語の改行制御
   --------------------------------------------------------------------------
   ・見出しと短いラベルは keep-all で語中改行を禁止する
   ・長い文は .nb（inline-block）で意味の単位に区切り、その境界だけで折る
     → inline-block は独立した塊として扱われるため、keep-all 下でも
       単位の間だけに改行が入る
   ========================================================================== */
.sec-head__en,
.sec-head__ja,
.hero__eyebrow,
.hero__ja,
.hero__kanji,
.hero__catch,
.hero__catch-h,
.hero__date,
.trio__label,
.trio__sub,
.frame__label,
.frame__value,
.frame__note,
.info dt,
.info dd,
.concept__lead,
.concept__body,
.access__addr,
.access__park,
.access__place,
.cta__lead,
.cta__sub,
.cta__caution,
.footer__name,
.btn,
.linkline,
.gnav__list a,
.gnav__cta,
.menu__ja{
  word-break:keep-all;
  line-break:strict;
  overflow-wrap:normal;
}

/* 見出しは行数のバランスを整える（対応ブラウザのみ適用される） */
.sec-head__ja,
.concept__lead,
.cta__lead,
.trio__label{ text-wrap:balance; }

/* 改行してよい境界を明示するための単位 */
.nb{ display:inline-block; }

/* ==========================================================================
   4. Layout
   ========================================================================== */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:26px; }
.wrap-wide{ width:100%; max-width:var(--wrap-wide); margin-inline:auto; padding-inline:26px; }

.sec{ position:relative; padding-block:74px; }
.sec--tight{ padding-block:52px; }

.sec-head{ text-align:center; margin:0 0 34px; }
.sec-head__en{
  display:block; font-family:var(--hand); font-size:1rem;
  letter-spacing:.14em; color:var(--coral); margin-bottom:2px;
}
.sec-head__ja{
  display:block; font-family:var(--serif); font-size:1.12rem; font-weight:400;
  letter-spacing:.28em; text-indent:.28em; color:var(--ink);
}
/* 英字のみの見出し */
.sec-head--solo .sec-head__en{ font-size:1.5rem; letter-spacing:.16em; }

.leafrule{ display:block; margin:0 auto; width:170px; height:16px; color:var(--leaf); opacity:.85; }
.leafrule--sm{ width:120px; }

/* ==========================================================================
   5. Components
   ========================================================================== */

/* ---------- 写真 ---------- */
.photo{ position:relative; }
.photo__inner{
  position:relative; display:block; overflow:hidden;
  background:var(--paper-3);
  border:1px solid var(--frame);
  border-radius:2px;
}
/* 写真の上にのせるクリームのマット線（額装のような表情） */
.photo__inner::after{
  content:""; position:absolute; inset:6px;
  border:1px solid rgba(253,251,244,.6);
  border-radius:1px; pointer-events:none; z-index:3;
}
.photo__inner img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; z-index:2;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.photo:hover .photo__inner img{ transform:scale(1.035); }

/* 写真未配置時の待ち枠 */
.photo__ph{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background-image:
    repeating-linear-gradient(92deg, rgba(160,140,105,.05) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #F5EEDF, #EFE6D2);
  color:var(--ink-3);
}
.photo__ph svg{ width:34px; height:34px; color:var(--leaf-2); }
.photo__ph em{ font-family:var(--hand); font-style:normal; font-size:1.1rem; letter-spacing:.1em; }
.photo__ph small{ font-size:.7rem; letter-spacing:.18em; }

.photo figcaption{
  margin-top:9px; font-family:var(--hand); font-size:1rem;
  letter-spacing:.06em; color:var(--ink-2); line-height:1.5;
}

.ar-wide .photo__inner{ aspect-ratio:16/10; }
.ar-port .photo__inner{ aspect-ratio:3/4; }
.ar-sq   .photo__inner{ aspect-ratio:1/1; }

/* ---------- テキストリンク ---------- */
.linkline{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--serif); font-size:.94rem; letter-spacing:.1em;
  color:var(--leaf-deep); text-decoration:none;
  border-bottom:1px solid rgba(111,131,80,.4); padding-bottom:3px;
  transition:border-color .3s, color .3s;
}
.linkline:hover{ color:var(--ink); border-color:var(--ink); }
.linkline svg{ width:14px; height:14px; flex:none; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  min-width:min(330px,100%);
  padding:19px 34px;
  background:var(--leaf-deep); color:#FDFBF4;
  font-family:var(--serif); font-size:1.04rem; letter-spacing:.13em;
  text-decoration:none; border-radius:2px;
  box-shadow:0 6px 22px -12px rgba(63,58,50,.55);
  transition:background .3s, transform .3s, box-shadow .3s;
}
.btn:hover{ background:#5E7043; transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(63,58,50,.6); }
.btn svg{ width:19px; height:19px; flex:none; }

/* ---------- アンティーク枠 ---------- */
.frame{
  position:relative;
  background:rgba(255,253,247,.55);
  border:1px solid var(--frame);
  border-radius:3px;
  padding:24px 14px 26px;
  text-align:center;
  min-height:132px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
}
/* 内側の細線＋四隅の面取り装飾（SVGはdata URIでリクエスト0件） */
.frame::before{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(169,155,130,.7);
  border-radius:2px;
  background-repeat:no-repeat;
  background-size:13px 13px;
  background-position:top left, top right, bottom right, bottom left;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><path d='M0 13 L13 0' stroke='%23A99B82' stroke-width='1' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><path d='M0 0 L13 13' stroke='%23A99B82' stroke-width='1' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><path d='M0 13 L13 0' stroke='%23A99B82' stroke-width='1' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><path d='M0 0 L13 13' stroke='%23A99B82' stroke-width='1' fill='none'/></svg>");
  pointer-events:none;
}
.frame__flora{ position:absolute; left:9px; bottom:9px; width:52px; color:var(--blush); opacity:.75; pointer-events:none; }
.frame__flora--r{ left:auto; right:9px; color:var(--leaf-2); opacity:.6; }
.frame__label{
  position:relative; font-size:.8rem;
  letter-spacing:.2em; text-indent:.2em; color:var(--ink-3); line-height:1.6;
}
.frame__value{
  position:relative; font-family:var(--serif); font-size:1.14rem;
  letter-spacing:.1em; line-height:1.7; color:var(--ink);
}
.frame__value--sm{ font-size:1rem; letter-spacing:.06em; }
.frame__note{ position:relative; font-size:.8rem; letter-spacing:.08em; color:var(--ink-2); line-height:1.8; }
.frame__link{ color:var(--leaf-deep); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 地図（クリックで読み込むファサード） ---------- */
.map{
  position:relative;
  border:1px solid var(--frame);
  border-radius:2px;
  overflow:hidden;
  background:var(--paper-3);
  aspect-ratio:16/7;
}
.map::after{
  content:""; position:absolute; inset:6px;
  border:1px solid rgba(253,251,244,.6);
  pointer-events:none; z-index:3;
}
.map__frame{ position:absolute; inset:0; z-index:2; }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* 読み込み前のプレースホルダ */
.map__load{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; border:0; cursor:pointer;
  background-image:
    repeating-linear-gradient(0deg, rgba(160,140,105,.10) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(160,140,105,.10) 0 1px, transparent 1px 34px),
    linear-gradient(150deg, #F3ECDD, #EBE1CC);
  color:var(--ink-2);
  transition:background-color .3s;
}
.map__load:hover{ background-color:rgba(255,253,247,.35); }
.map__load svg{ width:26px; height:26px; color:var(--leaf-deep); }
.map__load span{
  font-family:var(--hand); font-size:1.05rem; letter-spacing:.08em;
  border-bottom:1px solid rgba(111,131,80,.45); padding-bottom:2px;
}
.map__load small{ font-size:.72rem; letter-spacing:.1em; color:var(--ink-3); }
.map.is-loaded .map__load{ display:none; }

/* ==========================================================================
   6. Sections
   ========================================================================== */

/* ---------- ヘッダー（グローバルナビ） ---------- */
.gnav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  border-bottom:1px solid transparent;
  transition:background-color .4s ease, border-color .4s ease;
}
/* スクロールすると紙の地色が入る */
.gnav.is-solid{
  background-color:rgba(251,247,237,.93);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(195,184,162,.5);
}
.gnav__inner{
  max-width:var(--wrap-wide); margin-inline:auto;
  padding:0 26px; height:66px;
  display:flex; align-items:center; gap:0 30px;
}
/* ヒーローのロゴと二重に見えるため、スクロールするまで隠す */
.gnav__logo{
  flex:none; display:block; line-height:1;
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.gnav.is-solid .gnav__logo{ opacity:1; visibility:visible; }
.gnav__logo img{ display:block; height:40px; width:auto; }

.gnav__nav{ margin-left:auto; }
.gnav__list{ display:flex; gap:0 26px; list-style:none; margin:0; padding:0; }
.gnav__list a{
  position:relative; display:block; padding-bottom:4px;
  font-family:var(--serif); font-size:.88rem; letter-spacing:.12em;
  color:var(--ink-2); text-decoration:none;
  transition:color .3s ease;
}
.gnav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--coral);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s ease;
}
.gnav__list a:hover{ color:var(--ink); }
.gnav__list a:hover::after{ transform:scaleX(1); }

.gnav__cta{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 22px;
  border:1px solid var(--leaf-deep); border-radius:2px;
  font-family:var(--serif); font-size:.88rem; letter-spacing:.16em; text-indent:.16em;
  color:var(--leaf-deep); text-decoration:none;
  transition:background-color .3s ease, color .3s ease;
}
.gnav__cta:hover{ background-color:var(--leaf-deep); color:#FDFBF4; }

/* メニューボタン（スマホ）：×ではなく、ゆるやかに傾く2本線 */
.gnav__toggle{
  display:none;
  width:44px; height:44px; margin-left:auto; margin-right:-8px;
  flex:none; padding:0; background:none; border:0; cursor:pointer;
}
.gnav__toggle span{
  display:block; width:22px; height:1px; margin:0 auto;
  background:var(--ink);
  transition:transform .35s ease;
}
.gnav__toggle span + span{ margin-top:7px; }
.gnav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(13deg); }
.gnav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-13deg); }

/* 全画面メニュー（スマホ） */
.menu{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px;
  padding:80px 24px 40px;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(92deg, rgba(160,140,105,.03) 0 1px, transparent 1px 4px),
    radial-gradient(120% 80% at 50% 0%, #FFFCF4 0%, var(--paper) 60%, var(--paper-2) 100%);
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu__list{ list-style:none; margin:0; padding:0; text-align:center; }
.menu__list li + li{ margin-top:24px; }
.menu__list a{ display:inline-block; text-decoration:none; }
.menu__en{
  display:block; font-family:var(--hand); font-weight:500;
  font-size:.86rem; letter-spacing:.14em; color:var(--coral); line-height:1.4;
}
.menu__ja{
  display:block; font-family:var(--serif);
  font-size:1.22rem; letter-spacing:.18em; text-indent:.18em; color:var(--ink); line-height:1.6;
}
.menu__leaf{ width:120px; height:16px; color:var(--leaf); opacity:.8; }

/* メニュー展開中は背面をスクロールさせない／下部バーを隠す */
body.is-menu-open{ overflow:hidden; }
body.is-menu-open .sticky{ display:none; }

/* 固定ヘッダーの下に見出しが隠れないようにする */
#message,#information,#notes,#access,#reserve{ scroll-margin-top:80px; }

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; padding:108px 0 46px; text-align:center; }
.hero__botanical{ position:absolute; top:-34px; right:-84px; width:330px; pointer-events:none; z-index:0; }
.hero__linework{ position:absolute; left:-30px; bottom:-10px; width:190px; color:#C6A96B; opacity:.3; pointer-events:none; z-index:0; }
.hero__inner{ position:relative; z-index:2; }

/* 縦組みキャッチコピー（PC）
   17文字×(1em+字送り.22em)＝約20.7em。余裕をみて23em確保し、列の途中で折らない */
.hero__catch{
  position:absolute; top:112px; left:max(18px, calc(50% - 400px));
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:clamp(.9rem, 1.1vw, 1.02rem);
  line-height:2.5;
  letter-spacing:.22em; color:var(--ink-2);
  height:23em;
  z-index:3;
}
.hero__catch span{ display:block; white-space:nowrap; }

.hero__eyebrow{
  font-family:var(--serif); font-size:.86rem;
  letter-spacing:.42em; text-indent:.42em; color:var(--ink-3); margin:0 0 14px;
}
.hero__ja{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 6vw, 2.5rem);
  letter-spacing:.2em; text-indent:.2em; line-height:1.4; margin:0;
}
.hero__ja ruby{ ruby-position:over; }
.hero__ja rt{ font-size:.32em; letter-spacing:.16em; font-weight:400; color:var(--ink-3); }

/* ロゴ画像（image/logo.png ／ 490×318px）
   幅を変えたいときは下の width の1行だけ調整してください */
.hero__logo{
  margin:12px auto 0;
  width:min(400px, 82vw);
  max-width:100%;
}
.hero__logo img{
  display:block;
  width:100%;
  height:auto;
}

.hero__ja{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 6vw, 2.5rem);
  letter-spacing:.2em; text-indent:.2em; line-height:1.4; margin:0;
}
.hero__ja ruby{ ruby-position:over; }
.hero__ja rt{ font-size:.32em; letter-spacing:.16em; font-weight:400; color:var(--ink-3); }

.hero__kanji{
  font-family:var(--serif); font-size:clamp(.82rem, 3.2vw, .96rem);
  letter-spacing:.3em; text-indent:.3em; color:var(--ink-2); margin:18px 0 0;
}

/* スマホ用の横組みキャッチ：意味の単位でのみ改行し、常に2行に収める */
.hero__catch-h{
  display:none;
  font-family:var(--serif);
  font-size:clamp(.86rem, 3.6vw, .98rem);
  line-height:2.3;
  letter-spacing:.1em; color:var(--ink-2);
  margin:22px auto 0;
  max-width:22em;
  text-align:center;
}
.hero__catch-h .nb{ white-space:nowrap; }

.hero__date{
  margin:30px auto 0;
  display:inline-flex; align-items:baseline; gap:.5em;
  padding:10px 26px 12px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.hero__date b{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,5.4vw,1.9rem); letter-spacing:.04em; }
.hero__date .yr{ font-size:.82rem; color:var(--ink-3); letter-spacing:.14em; }
.hero__date .dow{ font-family:var(--hand); font-size:1.24rem; color:var(--coral); }

/* ---------- ヒーロー直下の写真（重ね組み） ---------- */
.opening{ padding-block:0 68px; position:relative; }
.opening__grid{
  display:grid;
  grid-template-columns:1fr 250px;
  gap:0 26px;
  align-items:end;
}
.opening__main{ grid-column:1; }
.opening__side{ grid-column:2; margin-bottom:-58px; }

/* ---------- この夜のこと ---------- */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin:0; padding:0; list-style:none;
}
.trio__label{
  display:block; margin-top:12px;
  font-family:var(--serif); font-size:1.02rem; letter-spacing:.12em;
  text-align:center; color:var(--ink);
}
.trio__sub{
  display:block; text-align:center;
  font-size:.78rem; letter-spacing:.08em; color:var(--ink-3); line-height:1.8;
}
.trio .photo figcaption{ display:none; }

/* ---------- Message ---------- */
.concept{ background:linear-gradient(var(--paper-2), rgba(246,240,226,0)); }
.concept__grid{
  display:grid; grid-template-columns:250px 1fr; gap:0 44px; align-items:start;
}
.concept__photo{ position:sticky; top:60px; }
.concept__lead{
  font-family:var(--serif);
  font-size:clamp(1.32rem,5.4vw,1.68rem);
  line-height:1.95; letter-spacing:.16em; margin:0 0 30px;
  padding-bottom:26px;
  border-bottom:1px solid rgba(215,154,135,.45);
}
.concept__body{
  font-size:1rem; line-height:2.5; letter-spacing:.08em; color:var(--ink-2); margin:0;
}
.concept__body + .concept__body{ margin-top:1.5em; }
.concept__sign{
  margin:26px 0 0; font-family:var(--hand); font-size:1.16rem;
  color:var(--coral); letter-spacing:.06em;
}

/* ---------- Information ---------- */
.info{ margin:0; }
.info__row{ display:grid; grid-template-columns:4.6em 1fr; align-items:baseline; gap:0 1em; }
.info__row + .info__row{ margin-top:4px; }
.info dt{
  font-family:var(--serif); font-size:1.06rem;
  letter-spacing:.3em; text-indent:.3em; color:var(--ink); white-space:nowrap;
}
.info dd{
  margin:0; padding:0 0 11px;
  border-bottom:1px dotted var(--blush);
  font-size:1.02rem; letter-spacing:.06em; line-height:1.9;
}
.info dd .t{ font-family:var(--serif); font-size:1.16rem; letter-spacing:.02em; }
.info dd .h{ font-family:var(--hand); font-size:1.12rem; color:var(--coral); margin-left:.4em; }
.info dd .sub{ display:block; font-size:.84rem; color:var(--ink-3); letter-spacing:.08em; }
.info dd .times{ display:flex; flex-wrap:wrap; gap:0 1.4em; }
.info dd .times > span{ white-space:nowrap; }

/* ---------- ご来店の前に ---------- */
.frames{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin:0; padding:0; list-style:none;
}

/* ---------- アクセス ---------- */
.access{ text-align:center; }
.access__detail{ margin:30px 0 0; }
.access__detail p{ margin:0; }
.access__detail p + p{ margin-top:8px; }
.access__addr{ font-size:1.06rem; letter-spacing:.08em; line-height:1.9; }
.access__park{ font-size:.9rem; color:var(--ink-2); line-height:1.9; }
.access__place{ font-size:.9rem; color:var(--ink-2); letter-spacing:.06em; line-height:1.9; }
.access__detail .linkline{ margin-top:22px; }

/* ---------- 予約CTA ---------- */
.cta{
  text-align:center;
  background:radial-gradient(90% 120% at 50% 0%, rgba(240,232,212,.9), rgba(251,247,237,0) 70%);
  padding-block:76px 84px;
}
.cta__lead{ font-family:var(--serif); font-size:clamp(1.1rem,4.2vw,1.3rem); letter-spacing:.14em; line-height:2; margin:0 0 8px; }
.cta__sub{ font-size:.88rem; color:var(--ink-2); letter-spacing:.08em; margin:0 0 30px; line-height:2; }
.cta__caution{ margin:22px 0 0; font-size:.8rem; color:var(--ink-3); letter-spacing:.06em; line-height:2; }

/* ---------- フッター ---------- */
.footer{ border-top:1px solid rgba(195,184,162,.5); padding:40px 0 120px; text-align:center; }
.footer__logo{ margin:0 auto 12px; width:170px; max-width:60%; }
.footer__logo img{ display:block; width:100%; height:auto; }
.footer__name{ font-family:var(--serif); font-size:.86rem; letter-spacing:.3em; text-indent:.3em; color:var(--ink-2); margin:0; }
.footer__sns{ margin:16px 0 0; font-family:var(--hand); font-size:1.06rem; letter-spacing:.06em; }
.footer__sns a{
  color:var(--leaf-deep); text-decoration:none;
  border-bottom:1px solid rgba(111,131,80,.35); padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.footer__sns a:hover{ color:var(--ink); border-color:var(--ink); }

/* ---------- スマホ固定バー ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,247,237,.94);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(195,184,162,.6);
}
.sticky .btn{ width:100%; min-width:0; padding:15px 20px; font-size:.98rem; }

/* ==========================================================================
   7. Motion
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 1s ease, transform 1s ease; }
.reveal.is-in{ opacity:1; transform:none; }
.reveal--d1{ transition-delay:.12s; }
.reveal--d2{ transition-delay:.24s; }
/* JSが動かない環境では最初から表示する */
.no-js .reveal{ opacity:1; transform:none; }

@keyframes riseIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

.hero__eyebrow,.hero__ja,.hero__logo,.hero__kanji,.hero__date,.hero__catch,.hero__catch-h{
  animation:riseIn 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.hero__ja{ animation-delay:.15s; }
.hero__logo{ animation-delay:.25s; }
.hero__kanji{ animation-delay:.85s; }
.hero__date{ animation-delay:1s; }
.hero__catch,.hero__catch-h{ animation-delay:1.15s; }

/* ==========================================================================
   8. Responsive
   ========================================================================== */
@media (max-width:900px){
  /* ナビはメニューボタンに切り替え */
  .gnav__inner{ height:58px; }
  .gnav__nav,.gnav__cta{ display:none; }
  .gnav__toggle{ display:block; }
  .gnav__logo img{ height:34px; }
  .hero{ padding-top:92px; }
  #message,#information,#notes,#access,#reserve{ scroll-margin-top:66px; }

  .hero__catch{ display:none; }
  .hero__catch-h{ display:block; }
  .hero__botanical{ width:220px; top:-24px; right:-62px; }
  .hero__linework{ width:130px; opacity:.24; }
  .opening__grid{ grid-template-columns:1fr 200px; }
  .opening__side{ margin-bottom:-40px; }
  .concept__grid{ grid-template-columns:200px 1fr; gap:0 30px; }
}

@media (max-width:680px){
  body{ letter-spacing:.04em; }
  .gnav__inner{ padding-inline:20px; }
  .hero{ padding-top:86px; }
  .sec{ padding-block:56px; }
  .sec--tight{ padding-block:42px; }
  .wrap,.wrap-wide{ padding-inline:20px; }

  /* 見出しは字送りを詰めて、狭い画面でも1行に収める */
  .sec-head__ja{ font-size:1.04rem; letter-spacing:.22em; text-indent:.22em; }
  .sec-head--solo .sec-head__en{ font-size:1.34rem; }

  /* 1カラムでは重ね組みを解除する（キャプションと写真が重なるため） */
  .opening{ padding-bottom:48px; }
  .opening__grid{ grid-template-columns:1fr; gap:24px; }
  .opening__main{ grid-column:1; }
  .opening__side{
    grid-column:1;
    width:60%;
    margin:0 0 0 auto;   /* 右寄せにして、縦組みの余白でリズムをつくる */
    text-align:right;
  }

  .trio{ grid-template-columns:1fr 1fr; gap:14px; }
  .trio li:first-child{ grid-column:1 / -1; }
  .trio li:first-child .photo__inner{ aspect-ratio:16/10; }
  .trio__label{ font-size:.96rem; letter-spacing:.06em; }
  .trio__sub{ font-size:.74rem; }

  .concept__grid{ grid-template-columns:1fr; gap:26px; }
  .concept__photo{ position:static; width:70%; margin-inline:auto; }
  .concept__lead{ letter-spacing:.1em; }
  .concept__body{ text-align:left; }

  .info__row{ grid-template-columns:3.6em 1fr; gap:0 .7em; }
  .info dt{ font-size:.96rem; letter-spacing:.2em; text-indent:.2em; }
  .info dd{ font-size:.94rem; }
  .info dd .t{ font-size:1.06rem; }
  .info dd .times{ display:block; }

  .frames{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .frame{ padding:20px 10px 22px; min-height:118px; }
  .frame__value{ font-size:1.02rem; letter-spacing:.04em; }
  .frame__label{ letter-spacing:.12em; text-indent:.12em; }
  .frame__flora{ width:40px; }

  .map{ aspect-ratio:4/3; }

  .cta{ padding-block:60px 68px; }
  .cta .btn{ padding:17px 18px; font-size:.96rem; letter-spacing:.08em; }
  .cta__lead{ letter-spacing:.1em; }

  .sticky{ display:block; }
}

/* 狭い端末：枠を1列にして、ラベルの折り返しを避ける */
@media (max-width:400px){
  .frames{ grid-template-columns:1fr; }
  .trio{ grid-template-columns:1fr; }
  .trio li:first-child .photo__inner{ aspect-ratio:1/1; }
  .hero__date{ padding-inline:18px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .photo:hover .photo__inner img{ transform:none; }
}

:focus-visible{ outline:2px solid var(--leaf-deep); outline-offset:3px; }