/* ===========================================================================
   KOKORO Culture Guide — Theme styles

   デザインの考え方
     - コンセプトは屏風。画面を面に割り、余白と細い金の罫で和を出す
     - 装飾で和風にしない。写真が濃厚なので、UIは色を持たず黒子に回る
     - 読み物（生成り紙）が主、体験・写真（藍墨）が従。面を交互に置く
     - 見出しは明朝、本文はゴシック。英語の可読性を最優先する
     - 弁柄色は予約導線にしか使わない。画面上で赤は常に一箇所だけになる
   ======================================================================== */

:root{
  --ink:        #141A24;
  --ink-deep:   #0C1017;
  --indigo:     #22344E;
  --paper:      #EAE6DC;
  --paper-lit:  #F4F1EA;
  --bengara:    #A33A2A;
  --bengara-dk: #8C2E20;
  --kincha:     #B08A47;
  --kincha-ink: #8A6A32;

  --on-ink:      #EFEBE2;
  --on-ink-mute: #9AA3AF;
  --on-paper:      #1A1F27;
  --on-paper-mute: #5C6470;

  --rule-dark:  rgba(239,235,226,.18);
  --rule-light: rgba(26,31,39,.16);

  --display: "Shippori Mincho B1", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --body:    "Zen Kaku Gothic New", "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;

  --measure:      64ch;   /* 一般ページの本文幅 */
  --measure-read: 42rem;  /* 読み物の本文幅。英語で1行72〜75字に収める */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --stack:  clamp(3.5rem, 8vw, 6rem);
  --shell:  70rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper-lit);
  color:var(--on-paper);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.4; margin:0; }
img{ max-width:100%; height:auto; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--kincha); outline-offset:3px; }

.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{
  left:1rem; top:1rem; z-index:100;
  background:var(--paper-lit); color:var(--on-paper);
  padding:.6rem 1.1rem; text-decoration:none;
}

.wrap{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.narrow{ max-width:var(--measure); }

.label{
  margin:0;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--kincha-ink);
}
.on-ink .label,
.panel--ink .label,
.panel--indigo .label,
.hero .label{ color:var(--kincha); }

/* --- 画像コンテナ共通 ------------------------------------------------------
   kkp_img() は WebP がある場合 <picture> で包む。
   picture 自体は既定でインライン要素のため、指定がないと
   親の高さいっぱいに広がらず、下端に背景色の線が出る。
   ここで picture と img の両方を明示的に埋める。
   -------------------------------------------------------------------------- */
.hero__media picture,
.leaf__media picture,
.city__media picture,
.read__plate picture{
  display:block; width:100%; height:100%;
}
.hero__media img,
.leaf__media img,
.city__media img,
.read__plate img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* ギャラリーと本文中の画像は aspect-ratio で高さを決めるため、
   height は指定せず display のみ揃える。 */
.gallery__grid picture,
.culture__section figure picture{ display:block; width:100%; }
.gallery__grid img,
.culture__section figure img{ display:block; }

/* ==========================================================================
   ヘッダー
   ======================================================================== */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(244,241,234,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule-light);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding-block:.9rem;
}

/* ロゴ：屏風のマーク＋文字。文字はwebフォントで描くので常に鮮明 */
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand__mark{ width:1.75rem; height:1.75rem; color:var(--kincha); flex:none; }
.brand__mark svg{ display:block; width:100%; height:100%; }
.brand__text{ line-height:1.25; }
.brand__name{
  display:block;
  font-family:var(--display); font-size:1.0625rem; font-weight:700;
  letter-spacing:.2em; color:var(--on-paper);
}
.brand__sub{
  display:block;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--kincha-ink);
}
.brand__img{ max-height:2.5rem; width:auto; }

.site-nav > ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:1.75rem;
  font-size:.875rem;
}
.site-nav li{ position:relative; }

/* :not(.btn) で除外しないと、ここの指定がボタンの文字色より強く当たり、
   Book ボタンの白文字が薄いグレーに上書きされてしまう。 */
.site-nav a:not(.btn){ text-decoration:none; color:var(--on-paper-mute); display:block; }
.site-nav a:not(.btn):hover,
.site-nav .current-menu-item > a:not(.btn){ color:var(--on-paper); }
.site-nav a.btn{ text-decoration:none; }
.site-header .btn{ padding:.55rem 1.1rem; font-size:.75rem; }

.site-header__tools{ display:flex; align-items:center; gap:.75rem; }

/* --- 子メニュー（PC） --------------------------------------------------- */
.site-nav .sub-menu{
  list-style:none; margin:0; padding:.5rem 0;
  position:absolute; top:100%; left:-1rem; z-index:40;
  min-width:14rem;
  background:var(--paper-lit);
  border:1px solid var(--rule-light);
  box-shadow:0 12px 28px rgba(20,26,36,.1);
  opacity:0; visibility:hidden; transform:translateY(-.35rem);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.site-nav .sub-menu a{ padding:.5rem 1rem; font-size:.8125rem; }

/* 子を持つ項目の目印 */
.site-nav > ul > .menu-item-has-children > a::after{
  content:""; display:inline-block; vertical-align:middle;
  width:.34em; height:.34em; margin-left:.45em;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);
}

/* PCでは子メニュー開閉ボタンを使わない（ホバーで開く） */
.submenu-toggle{ display:none; }

/* --- ハンバーガー ------------------------------------------------------- */
.nav-toggle{
  display:none;
  background:none; border:0; padding:.5rem; cursor:pointer;
  color:var(--on-paper);
}
.nav-toggle__box{ display:block; width:1.375rem; }
.nav-toggle__bar{
  display:block; height:1px; background:currentColor;
  transition:transform .25s, opacity .2s;
}
.nav-toggle__bar + .nav-toggle__bar{ margin-top:.34rem; }
.nav-open .nav-toggle__bar:nth-child(1){ transform:translateY(.375rem) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-open .nav-toggle__bar:nth-child(3){ transform:translateY(-.375rem) rotate(-45deg); }

/* 覆いはヘッダー(30)より奥に置く。
   ヘッダーまで暗くすると、ロゴが沈んで現在地が分かりにくくなる。
   引き出し(40)はヘッダーより手前なので、閉じるボタンは隠れない。 */
.nav-scrim{
  position:fixed; inset:0; z-index:25;
  background:rgba(12,16,23,.5);
}

/* 引き出しの閉じるボタン。PCでは引き出しを使わないので出さない。 */
.nav-close{
  display:none;
  position:absolute; top:1rem; right:1rem;
  width:2.75rem; height:2.75rem;
  background:none; cursor:pointer;
  border:1px solid var(--rule-light);
  font-size:1.375rem; line-height:1;
  color:var(--on-paper);
}
.nav-close:hover{ background:var(--paper); }

.screen-reader-text{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- スマホ：引き出し --------------------------------------------------- */
@media (max-width:56rem){
  .nav-toggle{ display:block; }

  /* backdrop-filter を持つ要素は、その中の position:fixed の基準になる。
     ヘッダーにぼかしを残したままだと、引き出しが画面ではなく
     ヘッダーの高さを基準に配置され、小さな箱になってしまう。
     スマホではぼかしを外し、背景を不透明にする。 */
  .site-header{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:var(--paper-lit);
  }

  .nav-close{ display:block; }

  /* 引き出しはヘッダーより手前に出す。
     ヘッダー（z-index:30・sticky）より奥にあると、
     右上の閉じるボタンがヘッダーの裏に隠れてしまう。 */
  .site-nav{
    position:fixed; z-index:40;
    top:0; right:0; bottom:0;
    width:min(20rem, 86vw);
    background:var(--paper-lit);
    border-left:1px solid var(--rule-light);
    padding:4.75rem 1.5rem 2rem;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .nav-open .site-nav{ transform:translateX(0); }

  .site-nav > ul{
    display:block; font-size:1rem;
  }
  .site-nav > ul > li{
    border-bottom:1px solid var(--rule-light);
  }
  .site-nav > ul > li > a{ padding:.9rem 0; }
  .site-nav > ul > .menu-item-has-children > a::after{ display:none; }

  /* 引き出しの中では Book を重複表示しない（バーに常時出ているため） */
  .site-nav .menu-item--cta{ display:none; }

  /* 子メニューは折りたたみ */
  .site-nav .sub-menu{
    position:static; min-width:0;
    background:none; border:0; box-shadow:none;
    padding:0 0 .75rem .9rem;
    opacity:1; visibility:visible; transform:none;
    display:none;
  }
  .site-nav .submenu-open > .sub-menu{ display:block; }
  .site-nav .sub-menu a{ padding:.45rem 0; font-size:.875rem; }

  /* 子メニュー開閉ボタン */
  .site-nav .menu-item-has-children{ display:flex; flex-wrap:wrap; align-items:center; }
  .site-nav .menu-item-has-children > a{ flex:1 1 auto; }
  .submenu-toggle{
    display:block; flex:none;
    width:2.5rem; height:2.75rem;
    background:none; border:0; cursor:pointer;
    position:relative; color:var(--on-paper-mute);
  }
  .submenu-toggle::before,
  .submenu-toggle::after{
    content:""; position:absolute; top:50%; left:50%;
    width:.7rem; height:1px; background:currentColor;
    transform:translate(-50%,-50%);
    transition:transform .2s;
  }
  .submenu-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
  .submenu-open > .submenu-toggle::after{ transform:translate(-50%,-50%) rotate(0); }
  .site-nav .menu-item-has-children > .sub-menu{ flex:1 0 100%; }
}

@media (min-width:56.0625rem){
  /* PCでは予約ボタンをメニュー内の項目として出すため、
     バー右側のツール群ごと隠す（隠さないとナビが中央に寄る）。 */
  .site-header__tools{ display:none; }
  .nav-scrim{ display:none; }
}

/* --- 編集者向けの案内（未ログインの訪問者には出ない） ------------------- */
.editor-notice{
  margin:1.5rem 0;
  padding:.9rem 1.1rem;
  background:#FFF6E5;
  border-left:3px solid var(--kincha);
  font-size:.875rem; line-height:1.7;
  color:#4A3A1C;
}
.editor-notice strong:first-child{
  display:block;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kincha-ink); margin-bottom:.25rem;
}

/* ==========================================================================
   ボタン
   ======================================================================== */
.btn{
  display:inline-block;
  font-family:var(--body);
  font-size:.8125rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.9rem 1.8rem;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .25s, color .25s, border-color .25s;
}
.btn--book{ background:var(--bengara); color:#FBF7F1; border-color:var(--bengara); }
.btn--book:hover{ background:var(--bengara-dk); border-color:var(--bengara-dk); }
.btn--solid{ background:var(--ink); color:var(--paper-lit); border-color:var(--ink); }
.btn--solid:hover{ background:var(--indigo); border-color:var(--indigo); }
.btn--line{ border-color:currentColor; }
.btn--line:hover{ background:var(--ink); color:var(--paper-lit); border-color:var(--ink); }
/* 暗い面の上では反転させる。
   ここに漏れがあると、ホバー時にボタンが背景と同化して消える。 */
.on-ink .btn--line:hover,
.panel--ink .btn--line:hover,
.panel--indigo .btn--line:hover,
.culture__cta--end .btn--line:hover,
.hero .btn--line:hover{
  background:var(--paper-lit); color:var(--ink); border-color:var(--paper-lit);
}
/* ただしトップと画像なしのヒーローは明るい面なので除外する */
.hero--front .btn--line:hover,
.hero--plain .btn--line:hover{
  background:var(--ink); color:var(--paper-lit); border-color:var(--ink);
}
.btn--sm{ padding:.7rem 1.35rem; font-size:.75rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.875rem; }

/* ==========================================================================
   ヒーロー
   ======================================================================== */
.hero{ position:relative; background:var(--ink); color:var(--on-ink); }
.hero__media{ position:absolute; inset:0; overflow:hidden; }
/* 2026-08-30: ヒーロー帯は横長で高さが低いため、中央クロップだと顔が切れやすい。上寄りにcrop位置をずらす。 */
.hero__media img{ object-position:center 18%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(12,16,23,.94) 6%, rgba(12,16,23,.34) 60%, rgba(12,16,23,.5) 100%);
}
.hero__body{
  position:relative;
  max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(4.5rem,12vw,8rem) clamp(2rem,4vw,2.75rem);
}
.hero__title{ font-size:clamp(2rem, 1.3rem + 3vw, 3.25rem); margin:.85rem 0 0; }

/* 画像未設定のとき */
.hero--plain{ background:transparent; color:var(--on-paper); }
.hero--plain .hero__body{ padding-block:clamp(3rem,7vw,5rem) clamp(1.25rem,2.5vw,2rem); }
.hero--plain .label{ color:var(--kincha-ink); }

/* トップ専用：写真を敷かず、文章で名乗る */
.hero--front{ background:transparent; color:var(--on-paper); }
.hero--front .hero__body{
  max-width:56rem; margin-inline:0;
  padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,5vw,4rem);
}
.hero--front .label{ color:var(--kincha-ink); }
.hero--front .hero__title{ max-width:20ch; margin-block:1.1rem 1.25rem; }
.hero--front .hero__title em{ font-style:normal; color:var(--bengara); }
.hero--front .hero__title strong{ font-weight:inherit; color:var(--bengara); }
.hero__lead{
  margin:0; max-width:var(--measure);
  color:var(--on-paper-mute); font-size:clamp(1rem,.95rem + .3vw,1.125rem);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.875rem; margin-top:2rem; }

.trust{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid var(--rule-light);
  font-size:.8125rem; letter-spacing:.06em; color:var(--on-paper-mute);
}
.trust span::before{ content:"—"; color:var(--kincha-ink); margin-right:.5rem; }

/* ==========================================================================
   パンくず
   ======================================================================== */
.breadcrumb{ background:var(--ink-deep); color:var(--on-ink-mute); }
.breadcrumb ol{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  max-width:var(--shell);
  /* ol の既定マージン（上下1em）を必ず打ち消す。
     nav に余白がないためマージンが外へ抜け、
     ヒーローとの間に隙間ができる。 */
  margin:0 auto;
  padding:.85rem var(--gutter);
  font-size:.8125rem;
}
.breadcrumb a{ color:var(--on-ink-mute); text-decoration:none; }
.breadcrumb a:hover{ color:var(--on-ink); }
.breadcrumb li + li::before{ content:"›"; margin-right:.5rem; opacity:.55; }

/* ==========================================================================
   面（セクション）
   ======================================================================== */
.panel{ padding-block:var(--stack); }
.panel--paper{ background:var(--paper); }
.panel--lit{ background:var(--paper-lit); }
.panel--ink{ background:var(--ink); color:var(--on-ink); }
.panel--indigo{ background:var(--indigo); color:var(--on-ink); }
/* 同じ色の面が連続するときだけ上余白を詰める。
   手で「上余白なし」を指定すると、前の面が別色だったときに
   見出しが上端に張り付いてしまう。 */
.panel--paper + .panel--paper,
.panel--lit   + .panel--lit,
.panel--ink   + .panel--ink,
.panel--indigo + .panel--indigo{ padding-top:0; }

.section-head{ margin-bottom:clamp(1.75rem,3.5vw,3rem); max-width:var(--measure); }
.section-head h2{ font-size:clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem); margin-top:.6rem; }
.section-head p{ margin:.9rem 0 0; color:var(--on-paper-mute); }
.panel--ink .section-head p,
.panel--indigo .section-head p{ color:var(--on-ink-mute); }

.lead{ padding-block:var(--stack); }
.lead__heading{ font-size:clamp(1.5rem,1.15rem + 1.5vw,2.125rem); margin-bottom:1.1rem; }
.lead p{ margin:0 0 1.15rem; max-width:var(--measure); }
.lead p:last-child{ margin-bottom:0; }

/* ==========================================================================
   屏風パネル（トップの signature）
   ======================================================================== */
.byobu{
  display:flex;
  height:clamp(21rem, 46vh, 30rem);
  border-block:1px solid rgba(176,138,71,.3);
  overflow:hidden;
  background:var(--ink);
}
.leaf{
  position:relative; flex:1 1 0; min-width:0;
  border-right:1px solid rgba(176,138,71,.22);
  text-decoration:none; color:var(--on-ink); overflow:hidden;
  transition:flex-grow .55s cubic-bezier(.2,.7,.3,1), filter .45s ease;
}
.leaf:last-child{ border-right:0; }
.leaf__media{ position:absolute; inset:0; }
.leaf__media img{ width:100%; height:100%; object-fit:cover; }
.leaf__media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(12,16,23,.94) 0%, rgba(12,16,23,.25) 44%, rgba(12,16,23,.4) 100%);
}
.leaf__caption{ position:absolute; left:0; right:0; bottom:0; padding:1.25rem 1rem 1.5rem; text-align:center; }
.leaf__rule{ display:block; width:1px; height:1.6rem; background:var(--kincha); margin:0 auto .7rem; opacity:.85; }
.leaf__name{
  display:block; font-family:var(--display);
  font-size:clamp(.9375rem,.85rem + .35vw,1.125rem); letter-spacing:.12em;
}
.leaf__note{
  display:block; margin-top:.4rem;
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(239,235,226,.6);
}
@media (hover:hover) and (min-width:52rem){
  .byobu:hover .leaf{ filter:brightness(.55) saturate(.75); }
  .byobu .leaf:hover{ flex-grow:1.9; filter:none; }
}
.leaf:focus-visible{ outline:2px solid var(--kincha); outline-offset:-6px; }
@media (max-width:52rem){
  .byobu{ height:20rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .leaf{ flex:0 0 62%; scroll-snap-align:center; }
}

/* ==========================================================================
   読み物カード
   ======================================================================== */
/* auto-fill を使う理由：auto-fit は空の列を畳むため、
   記事が1件しかないとカードが全幅に伸びてしまう。
   auto-fill なら列の枠が保たれ、件数が少なくても本来の幅で並ぶ。 */
.reads{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));
  list-style:none; margin:0; padding:0;
}
.read{ display:block; text-decoration:none; }
.read__plate{ display:block; position:relative; aspect-ratio:16/10; margin-bottom:1.05rem; overflow:hidden; background:var(--ink); }
.read__plate img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.read:hover .read__plate img{ transform:scale(1.045); }
.read__kicker{
  display:block; margin-bottom:.35rem;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--kincha-ink);
}
.panel--ink .read__kicker,
.panel--indigo .read__kicker{ color:var(--kincha); }
.read__name{ display:block; font-family:var(--display); font-size:1.1875rem; line-height:1.5; }
.read__desc{ display:block; margin-top:.55rem; color:var(--on-paper-mute); font-size:.9375rem; }
.read:hover .read__name{ text-decoration:underline; text-underline-offset:.25em; }

.reads--coming{ margin-top:3rem; }
.coming-list{
  display:grid; gap:1px; background:var(--rule-light);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  list-style:none; margin:1.25rem 0 0; padding:0;
  border:1px solid var(--rule-light);
}
.coming-list li{ background:var(--paper); padding:1.15rem 1.25rem; }
.coming-list strong{ display:block; font-family:var(--display); font-weight:600; font-size:1rem; }
.coming-list span{ font-size:.8125rem; color:var(--on-paper-mute); }

/* ==========================================================================
   Culture Guide 一覧（/culture/）
   構成は元案どおりだが、見た目はサイト共通の面・罫・余白に従う。
   固有の装飾はここに書かず、共通クラスの差分だけに留める。
   ======================================================================== */
.read__more{
  display:inline-block; margin-top:.9rem;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bengara);
}
.read__more::after{ content:" →"; }
.panel--ink .read__more,
.panel--indigo .read__more{ color:var(--kincha); }

/* 準備中の記事：リンクにせず、色を落として区別する */
.read--pending{ display:block; cursor:default; }
.read--pending .read__plate img{ filter:grayscale(.4) brightness(.94); }
.read--pending .read__name,
.read--pending .read__desc{ color:var(--on-paper-mute); }

/* ==========================================================================
   体験 × 記事の組
   ======================================================================== */
.pairs{
  display:grid; gap:1px; background:var(--rule-dark);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  list-style:none; margin:0; padding:0;
}
/* 2026-08-30: pairs (Wear it yourself) の各カード上部に、対応するExperienceのHero画像を
   横長の帯として表示（本文は今まで通りのdark ink背景の上）。
   （同日、一度カード全面を背景画像にする案を試したが「文字が見づらい」とのことでこちらに変更）
   front-page.php側の <li class="pair"> 直後の $pair_img / .pair__media 取得部分は変更なしで流用。
   元は次の1行のみでした。完全に戻す場合はこのブロックをその1行に置き換えてください:
   .pair{ background:var(--ink); padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; }
*/
.pair{ overflow:hidden; background:var(--ink); padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; }
.pair__media{ display:block; height:8.5rem; margin:-1.75rem -1.5rem .35rem; }
.pair__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pair__name{ font-family:var(--display); font-size:1.25rem; }
.pair__name a{ text-decoration:none; }
.pair__name a:hover{ text-decoration:underline; text-underline-offset:.25em; }
.pair__meta{ font-size:.8125rem; letter-spacing:.06em; color:var(--on-ink-mute); }
.pair__link{
  margin-top:auto; padding-top:.9rem;
  border-top:1px solid var(--rule-dark); font-size:.8125rem;
}
.pair__link::before{ content:"First, read: "; color:var(--on-ink-mute); }
.pair__link a{ color:var(--kincha); text-decoration:none; }
.pair__link a:hover{ text-decoration:underline; text-underline-offset:.2em; }

/* ==========================================================================
   安心材料
   ======================================================================== */
.assure{ display:grid; gap:2.25rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
.assure__item{ border-top:1px solid rgba(26,31,39,.2); padding-top:1.15rem; }
.assure__item h3{ font-size:1.0625rem; margin-bottom:.4rem; }
.assure__item p{ margin:0; color:var(--on-paper-mute); font-size:.9375rem; }

/* ==========================================================================
   概要（facts）
   ======================================================================== */
.facts{
  display:grid; gap:1px; margin:0;
  background:var(--rule-light); border:1px solid var(--rule-light);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
}
.facts__item{ background:var(--paper); padding:1.25rem 1.35rem; }
.facts__item dt{
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--kincha-ink); margin-bottom:.35rem;
}
.facts__item dd{ margin:0; font-family:var(--display); font-size:1.125rem; line-height:1.5; }
.facts__note{
  display:block; font-family:var(--body); font-size:.75rem;
  letter-spacing:.02em; color:var(--on-paper-mute);
}

.includes{ margin-top:2.5rem; max-width:var(--measure); }
.includes h3{ font-size:1.0625rem; margin-bottom:.75rem; }
.includes ul{
  list-style:none; margin:0; padding:0; display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
}
.includes li{ position:relative; padding-left:1.25rem; font-size:.9375rem; }
.includes li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:.5rem; height:1px; background:var(--kincha);
}

/* ==========================================================================
   プラン
   ======================================================================== */
.studio-block{ border-top:1px solid var(--rule-dark); padding-top:2rem; margin-top:2.75rem; }
.studio-block:first-of-type{ margin-top:0; }
.studio-block__head{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; align-items:baseline; margin-bottom:.35rem; }
.studio-block__name{ font-size:1.375rem; }
.studio-block__name a{ text-decoration:none; }
.studio-block__name a:hover{ text-decoration:underline; text-underline-offset:.25em; }
.studio-block__area{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--kincha); }
.studio-block__tagline{ margin:0 0 1.5rem; color:var(--on-ink-mute); font-size:.9375rem; }

/* auto-fill にすると空の列が畳まれないため、プランが1件でも全幅に伸びない。
   そのぶん隙間を罫線代わりに使えなくなるので、カード側に枠線を持たせる。 */
.plan-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}

/* 2026-08-30: plan-list を期間ごとに視覚的に区切る見出し（百鬼夜行など季節タグ付きプランのみ表示） */
.plan-list__season{
  grid-column:1/-1;
  display:flex; align-items:center; gap:.75rem;
  margin:.25rem 0 -.25rem;
  color:var(--kincha);
  font-family:var(--display);
  font-size:.8125rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.plan-list__season span{ white-space:nowrap; }
.plan-list__season::before,
.plan-list__season::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--kincha);
  opacity:.45;
}
.plan-list__season-note{
  grid-column:1/-1;
  margin:.5rem 0 .1rem;
  color:var(--on-ink-mute);
  font-size:.875rem;
  line-height:1.5;
}
.plan{
  background:var(--ink);
  border:1px solid var(--rule-dark);
  display:flex; flex-direction:column;
}
.plan__media{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ink-deep); }
.plan__media picture{ display:block; width:100%; height:100%; }
.plan__media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.plan:hover .plan__media img{ transform:scale(1.04); }
.plan__body{
  display:flex; flex-direction:column; gap:.6rem;
  padding:1.5rem 1.5rem 1.6rem; flex:1 1 auto;
}
.plan__name{ font-family:var(--display); font-size:1.125rem; }

/* プランに含まれるもの */
/* Summary欄を廃したため、ここがカードの説明を兼ねる。
   文字を少し大きくして読みやすくする。 */
.plan__includes{
  list-style:none; margin:.15rem 0 0; padding:0;
  font-size:.875rem; color:var(--on-ink-mute); line-height:1.75;
}
.plan__includes li{ position:relative; padding-left:1.1rem; }
.plan__includes li::before{
  content:""; position:absolute; left:0; top:.75em;
  width:.45rem; height:1px; background:var(--kincha);
}
.plan__price{ font-family:var(--display); font-size:1.5rem; line-height:1.2; }
.plan__price small{
  display:block; margin-top:.25rem;
  font-family:var(--body); font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink-mute);
}
.plan__spec{
  margin:0; padding-top:.75rem; font-size:.8125rem;
  color:var(--on-ink-mute); border-top:1px solid var(--rule-dark);
}
.plan__cta{ margin-top:auto; padding-top:.85rem; }

.policy p{ max-width:var(--measure); margin:0 0 1rem; }

/* ==========================================================================
   都市・スタジオ
   ======================================================================== */
.cities{ display:grid; gap:1px; background:rgba(176,138,71,.3); grid-template-columns:1fr 1fr; }
@media (max-width:46rem){ .cities{ grid-template-columns:1fr; } }
.city{
  position:relative; overflow:hidden; min-height:20rem;
  padding:clamp(1.75rem,4vw,2.75rem);
  display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; color:var(--on-ink); background:var(--ink-deep);
}
.city__media{ position:absolute; inset:0; }
.city__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.city:hover .city__media img{ transform:scale(1.04); }
.city__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,11,16,.92) 12%, rgba(8,11,16,.3) 72%);
}
.city__body{ position:relative; }
.city__count{ font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--kincha); }
.city__name{ display:block; margin-top:.3rem; font-family:var(--display); font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); }
.city__areas{ display:block; margin-top:.4rem; font-size:.9375rem; color:rgba(239,235,226,.75); }

.studio-list, .book-list{ list-style:none; margin:0; padding:0; display:grid; gap:2.25rem; }
.studio-list__item, .book-list__item{ border-top:1px solid var(--rule-light); padding-top:1.6rem; }
.panel--ink .studio-list__item,  .panel--ink .book-list__item,
.panel--indigo .studio-list__item, .panel--indigo .book-list__item{ border-top-color:var(--rule-dark); }
.studio-list__name, .book-list__name{ font-size:1.375rem; margin-bottom:.3rem; }
.studio-list__name a{ text-decoration:none; }
.studio-list__name a:hover{ text-decoration:underline; text-underline-offset:.25em; }
.studio-list__experiences, .book-list__experiences{ margin:0 0 .5rem; color:var(--kincha-ink); font-size:.9375rem; }
.panel--ink .studio-list__experiences,
.panel--ink .book-list__experiences,
.panel--indigo .studio-list__experiences,
.panel--indigo .book-list__experiences{ color:var(--kincha); }
.studio-list__address, .book-list__address{ margin:0 0 1rem; font-size:.875rem; color:var(--on-paper-mute); }
.panel--ink .studio-list__address,
.panel--ink .book-list__address{ color:var(--on-ink-mute); }
.studio-list__actions, .book-list__actions, .visit-info__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
.book-list__price{ margin:0 0 .5rem; font-family:var(--display); font-size:1.25rem; }

.book-city{ margin-block:var(--stack); }
.book-city__name{ font-size:clamp(1.375rem,1.15rem + 1.1vw,1.875rem); margin-bottom:1.5rem; }

/* ==========================================================================
   Plan Your Visit
   ======================================================================== */
.spots{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));
  list-style:none; margin:0; padding:0;
}
.spot{ border-top:1px solid rgba(26,31,39,.2); padding-top:1.15rem; }
.spot h3{ font-size:1.0625rem; margin-bottom:.35rem; }
.spot p{ margin:0; font-size:.9375rem; color:var(--on-paper-mute); }

/* ==========================================================================
   お客様の声
   ======================================================================== */
.voices{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));
  list-style:none; margin:0; padding:0;
}
.voice{ border-left:2px solid var(--kincha); padding-left:1.25rem; }
.voice blockquote{ margin:0; font-family:var(--display); font-size:1.0625rem; line-height:1.75; }
.voice cite{
  display:block; margin-top:.75rem; font-style:normal;
  font-size:.8125rem; letter-spacing:.06em; color:var(--on-ink-mute);
}

/* ==========================================================================
   ギャラリー
   ======================================================================== */
.gallery__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));
}
.gallery__grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

/* ==========================================================================
   FAQ
   ======================================================================== */
.faq{ max-width:var(--measure); }
.faq__heading{ font-size:1.25rem; margin:2.25rem 0 .5rem; }
.faq__item{ border-bottom:1px solid var(--rule-light); }
.panel--ink .faq__item{ border-bottom-color:var(--rule-dark); }
.faq__item summary{
  position:relative; cursor:pointer; list-style:none;
  padding:1.1rem 2rem 1.1rem 0;
  font-family:var(--display); font-size:1.0625rem;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"＋"; position:absolute; right:0; top:1.1rem;
  color:var(--kincha-ink); font-size:.875rem;
}
.faq__item[open] summary::after{ content:"−"; }
.panel--ink .faq__item summary::after{ color:var(--kincha); }
.faq__item p{ margin:0 0 1.1rem; color:var(--on-paper-mute); font-size:.9375rem; line-height:1.8; }
.panel--ink .faq__item p{ color:var(--on-ink-mute); }

/* ==========================================================================
   読み物本文
   ======================================================================== */
.culture{ padding-block:clamp(2rem,4vw,3rem); }
.culture > *{ max-width:var(--measure-read); margin-inline:auto; padding-inline:var(--gutter); }

.summary-box{
  background:var(--paper); border-left:3px solid var(--kincha);
  padding:1.5rem 1.75rem; margin-bottom:2rem;
}
.summary-box p{ margin:0; font-family:var(--display); font-size:1.125rem; line-height:1.8; }
.summary-box strong{ font-weight:700; color:var(--bengara); }

.culture__cta{ margin-bottom:3rem; text-align:center; }

.culture__section{ margin-block:2.5rem; }
.culture > .culture__section:first-of-type,
.summary-box + .culture__section{ margin-top:2rem; }
.culture__section h2{
  font-size:clamp(1.375rem,1.15rem + 1.1vw,1.75rem);
  margin-bottom:.9rem; padding-bottom:.6rem;
  border-bottom:1px solid rgba(26,31,39,.2);
}
.culture__section h3{ font-size:1.1875rem; margin:1.75rem 0 .5rem; }
.culture__section p{ margin:0 0 1.15rem; }
.culture__section p:last-child{ margin-bottom:0; }
/* 本文中の画像は本文幅より広く出す。
   長文の単調さを切り、狭い紙面に見えるのを防ぐ。 */
.culture__section figure{
  width:min(56rem, calc(100vw - 3rem));
  margin:2.25rem 0 2.25rem 50%;
  transform:translateX(-50%);
}
.culture__section figure img{ width:100%; }
.culture__section figcaption{
  margin-top:.6rem; font-size:.8125rem;
  color:var(--on-paper-mute); line-height:1.7; text-align:center;
}

/* 比較表は本文より広く取る */
.compare{ max-width:56rem; margin-block:3rem; }
.compare h2{ font-size:clamp(1.375rem,1.15rem + 1.1vw,1.75rem); margin-bottom:.75rem; text-align:center; }
.compare__lead{ margin:0 0 1.5rem; text-align:center; font-size:.875rem; color:var(--on-paper-mute); }
.compare__figure{ margin:0 0 1.5rem; }
.compare__figure img{ display:block; width:100%; }
.compare__scroll{ overflow-x:auto; }
.compare__table{ border-collapse:collapse; width:100%; min-width:34rem; font-size:.9375rem; line-height:1.7; }
.compare__table th,
.compare__table td{ border:1px solid rgba(26,31,39,.2); padding:.85rem 1rem; text-align:left; vertical-align:top; }
.compare__table thead th{
  background:var(--ink); color:var(--on-ink);
  font-family:var(--body); font-weight:500;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
}
.compare__table tbody th{
  background:var(--paper); font-family:var(--body);
  font-weight:700; font-size:.8125rem; white-space:nowrap;
}

.misconceptions{ margin-block:3rem; }
.misconceptions h2{
  font-size:clamp(1.375rem,1.15rem + 1.1vw,1.75rem);
  margin-bottom:1.25rem; padding-bottom:.6rem;
  border-bottom:1px solid rgba(26,31,39,.2);
}
.misconceptions dl{ margin:0; }
.misconceptions dt{
  position:relative; margin-top:1.5rem; padding-left:1.5rem;
  font-family:var(--display); font-size:1.0625rem; font-weight:600; line-height:1.6;
}
.misconceptions dt::before{
  content:"✕"; position:absolute; left:0; top:.1em;
  color:var(--bengara); font-family:var(--body); font-size:.875rem;
}
.misconceptions dd{ margin:.4rem 0 0 1.5rem; color:var(--on-paper-mute); font-size:.9375rem; line-height:1.8; }

.note-box{
  background:var(--paper); border-left:3px solid var(--bengara);
  padding:1.25rem 1.5rem; margin-block:2.5rem;
}
.note-box p{ margin:0; font-size:.9375rem; line-height:1.8; }

.culture__cta--end{
  max-width:none; margin-block:3.5rem 0; padding-block:clamp(2.75rem,5vw,4rem);
  background:var(--ink); color:var(--on-ink); text-align:center;
}
/* CTAは背景いっぱいの黒帯。記事の末尾に来たとき、その下に
   .culture の下padding（生成り色）が残ると帯が宙に浮いて見えるため打ち消す。 */
.culture > *:last-child{ margin-bottom:0; }
.culture__cta--end:last-child{ margin-bottom:calc(-1 * clamp(2rem,4vw,3rem)); }
.culture__cta--end h2{ font-size:clamp(1.375rem,1.15rem + 1.2vw,1.875rem); margin:.75rem 0 .9rem; }
.culture__cta--end p{ max-width:40ch; margin:0 auto 1.9rem; color:var(--on-ink-mute); }
.culture__cta--end .btn-row{ justify-content:center; }

.sources{ margin-block:3rem; font-size:.875rem; color:var(--on-paper-mute); }
.sources h2{ font-family:var(--body); font-size:1rem; font-weight:700; letter-spacing:.06em; margin-bottom:.6rem; }
.sources ul{ margin:0; padding-left:1.2rem; line-height:1.8; }

.next-reads{ background:var(--paper); padding-block:clamp(2.5rem,5vw,3.5rem); }

/* --- 本文中のリスト（簡易記法） ------------------------------------------
   本文欄で行頭に「- 」または「1. 」を置くとリストになる。
   段落内の全行が同じ記号で始まっている場合だけリストとして扱うため、
   ハイフンで始まる文が意図せずリストになることはない。
   -------------------------------------------------------------------------- */
.rt-list{ margin:0 0 1.15rem; padding-left:1.35rem; }
.rt-list li{ margin-bottom:.55rem; }
.rt-list li:last-child{ margin-bottom:0; }
.rt-list li::marker{ color:var(--kincha-ink); }
.panel--ink .rt-list li::marker,
.panel--indigo .rt-list li::marker{ color:var(--kincha); }

/* リスト先頭の太字は小見出しとして機能させる */
.rt-list li > strong:first-child{ color:var(--on-paper); }

/* ==========================================================================
   本文中のリンク（簡易記法）
   前サイトでスタイル抜けによりリンクが見えなくなる事故があったため、
   色と下線を明示的に指定し、継承任せにしない。
   ======================================================================== */
.rt-link{
  color:var(--bengara);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.rt-link:hover{ text-decoration-thickness:2px; }
.rt-link--external::after{
  content:"↗"; display:inline-block; margin-left:.25em;
  font-size:.85em; text-decoration:none;
}
.panel--ink .rt-link,
.panel--indigo .rt-link,
.on-ink .rt-link{ color:var(--kincha); }
.rt-link-missing{ background:#ffe9e9; border-bottom:1px dashed #b32d2e; padding:0 .15em; }

/* ==========================================================================
   締め
   ======================================================================== */
.closing{ text-align:center; }
.closing h2{ font-size:clamp(1.375rem,1.15rem + 1.5vw,2.125rem); }
.closing p{ margin:1rem auto 2rem; max-width:46ch; color:var(--on-paper-mute); }
.panel--ink .closing p,
.panel--indigo .closing p{ color:var(--on-ink-mute); }
.closing__actions{ display:flex; flex-wrap:wrap; gap:.875rem; justify-content:center; }

/* ==========================================================================
   フッター
   ======================================================================== */
.site-footer{ background:var(--ink-deep); color:var(--on-ink); padding-block:3rem; }
.site-footer__inner{
  max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start;
}
.site-footer .brand__name{ color:var(--on-ink); }
.site-footer .brand__sub{ color:var(--kincha); }
.footer-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.875rem; }
.footer-nav a:not(.btn){ color:var(--on-ink-mute); text-decoration:none; }
.footer-nav a:not(.btn):hover{ color:var(--on-ink); }
.footer-nav a.btn{ text-decoration:none; }
.site-footer__copy{ margin:0; font-size:.8125rem; color:#6E7683; }

/* ==========================================================================
   汎用ページ
   ======================================================================== */
.basic-page{ max-width:var(--measure); margin-inline:auto; padding:var(--stack) var(--gutter); }
.basic-page h2{ margin-top:2.5rem; }
.basic-page a{ color:var(--bengara); }

/* ==========================================================================
   配慮
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}