@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   AILÉA v3 — 共通の土台
   ──────────────────────────────────────────────────────────
   v3を適用するすべてのページで読み込まれます。
   デザイントークン／12カラム／共通パーツ／ヘッダー／フッター／
   リビール（登場アニメーション）を持ちます。

   ページ固有の見た目は別ファイルにあります：
     v3-top.css     … トップページ
     v3-journal.css … ジャーナル一覧・記事ページ

   どのページにv3を当てるかは functions.php の ailea_is_v3()。
   ══════════════════════════════════════════════════════════ */

/* ─────────── 1. デザイントークン ─────────── */
body.v3{
  /* ── 地の色 ──
     アイボリー #F4F1EA から白へ。アイボリーは嵐山店の色に近く、
     別ブランドとして見分けがつきませんでした。

     途中でアイボリーの代わりに薄墨紙 #EBEBE8 も試しましたが、
     「白にすると写真の輪郭が地に溶ける」という懸念は、
     この4枚の写真では成り立ちませんでした（外周1pxを実測したところ、
     白に近い画素は0%。どの写真も縁が緑・暗い室内・ネオンで暗いため）。
     文字のコントラストも白のほうが高くなります（本文 5.97 → 7.13）。

     ※ --paper-rgb は同じ色の数値だけを持ったものです。
       半透明で使う箇所（締めCTAの文字、ライトボックス、スマホのメニュー）で
       rgba(var(--paper-rgb), .5) のように使います。
       以前はここに 244,241,234 とベタ書きしてあって地の色に追従せず、
       締めCTAの文字だけ古い色で残りました。必ず2つ一緒に直すこと。
     ※ --paper-d は「地より少しだけ沈んだ面」（プランの帯・地図の下地）です。
       地を白にしたので、これも白基準に取り直しています。 */
  --paper:   #FFFFFF;
  --paper-rgb: 255,255,255;
  --paper-d: #F4F4F2;
  --paper-l: #FFFFFF;
  /* 墨。真っ黒ではなく、茶を含んだ黒 */
  --ink:     #1C1A16;
  --ink-2:   #5E574C;
  --ink-3:   #9C9488;
  /* 英文キッカー（章とアクセスの斜体1行）専用。--ink-2 と --ink-3 のあいだ。
     和文見出しに主役を譲るぶんだけ淡くしつつ、白地でのコントラストは
     4.56 を保っています（本文の目安は4.5）。これ以上薄くすると、
     読ませる一文なのに読みにくくなります。 */
  --ink-lead: #7C7568;
  /* 補足テキスト用。本文（--ink-2）より退くが、読める濃さを保つ段です。
     白地とのコントラストは 4.56:1 で、通常の文字サイズの基準 4.5 を満たします。
     --ink-3（#9C9488）は 3.0:1 しかなく、12pxの文章では読めません。
     --ink-3 は「欧文の小ラベル」専用に戻してあります
     （大文字・字間広め・短い語。読むというより位置を示すもの）。
     ※ 値は --ink-lead と同じですが、役割が違うので別に持ちます。
       片方だけ動かしたくなったときに、ここで分かれます。 */
  --ink-sub:  #7C7568;
  --line:    rgba(28,26,22,.13);
  --line-f:  rgba(28,26,22,.07);
  /* リンクの下線だけは、区切り線（--line 13%）より濃くします。
     13%は白地とのコントラスト比が1.30で、事実上見えません。
     36%＝比2.25。細いままですが「線がある」ことは分かります。 */
  --line-link: rgba(28,26,22,.36);

  /* ── 書体：和文2＋欧文2 の4役 ──
     和文は明朝1本の方針どおり。欧文だけ別に持たせています。

     ■ なぜ欧文を分けるのか
       和文明朝に入っているラテン字形は「おまけ」で、字幅も抑揚も均一です。
       英字だけを並べたとき（Chapter 01 / Scroll / Dress Portrait など）、
       どのサイズ・どの役でも同じ顔になり、平板に見えていました。
       欧文に専用の書体を当てると、そこだけ表情が出ます。

     ■ 役の分けかた（欧文は2書体だけ）
       --fe（ディスプレイ）… 章の英文キッカー、価格の数字。斜体を積極的に使います
                             Bodoni Moda。明朝と同じ「縦太・横細」の骨格なので、
                             和文見出しの隣に置いても構造の理屈が揃います
       --fl（ラベル）      … 9〜12pxの大文字＋広い字間。ここは明朝だと線が
                             消えるので、線幅の均一な幾何学サンセリフに任せます

     ■ 本文（--fb）の中の英字は明朝のままにしています
       「AILÉAは、京都の…」のように和文の中に混ざる英字は、
       和文明朝のラテンで組むほうが行として揃います。
       欧文書体を当てるのは、英文が独立して立っている場所だけです。
       （以前ここに Newsreader を入れていましたが、そのためだけに
         1書体まるごと読み込むのは割に合わないのでやめました）

     ■ 並び順に意味があります
       欧文 → YakuHanMP → 和文明朝 の順。こうしておくと、和英が混ざった
       一行でも、英字だけ欧文・かなは明朝、と自動で振り分けられます。

     ■ 使ってはいけない書体
       Playfair Display / Cormorant Garamond / Space Mono。
       旧デザインの3点セットで、「テンプレっぽさ」の主因だったものです。 */
  /* 和文見出しは Zen Old Mincho。ただし本文より1段太い500で使います。
     ここに至るまでの経緯（同じ道を繰り返さないために残します）：
       ・当初は Zen Old Mincho 400。本文の Shippori Mincho 400 と
         太さが同じで、並べても見分けがつきませんでした
       ・Hina Mincho … 品はあるが線が細く、紙色の背景で薄く沈む
       ・Kaisei HarunoUmi … 終筆が丸く、柔らかい＝カジュアルに寄る
     見出しと本文を分けるのに必要だったのは「別の書体」ではなく
     「同じ格の書体で、はっきりした太さの差」でした。
     ※ --fd を使う箇所のうち、17px以上のものは font-weight:500 です。
        13〜14pxの小さな見出しだけ400のままにしてあります（500だと潰れるため）。 */
  --fd: 'Bodoni Moda','YakuHanMP','Zen Old Mincho',serif;         /* 見出し（和欧とも） */
  --fb: 'YakuHanMP','Shippori Mincho',serif;                      /* 和文本文 */
  /* ※ Bodoni Moda は 400 が最軽量です。300 を指定しても 400 になるだけなので、
        --fe を使う箇所は 400 以上で書いてください（指定と実体をずらさないため）。 */
  --fe: 'Bodoni Moda','YakuHanMP','Zen Old Mincho',serif;         /* 欧文ディスプレイ */
  /* ラベルの役は、和文も明朝ではなくゴシックに落とします。
     ここは9〜12pxに字間を広げて使う場所で、明朝だと線が細くて弱く、
     しかも同じ一行の中で英字（幾何学サンセリフ）と質感がずれます。
     M PLUS 1 は Jost と同じく円を基本にした骨格なので、
     「すべて Standard Premium」のような和英混在でも声が揃います。
     ※ ここをゴシックにするのはラベルだけです。見出しと本文は明朝のまま。 */
  --fl: 'Jost','YakuHanMP','M PLUS 1',sans-serif;                 /* ラベル（和欧とも） */

  /* 余白 */
  --gut:  clamp(24px, 6vw, 120px);     /* 左右 */
  /* 内容の最大幅。これが無いと、画面が広いほど際限なく広がります。
     1920pxでは本文が1行64文字相当になり、撮影セットの帯も1690pxまで伸びて
     「余白のあるサイト」ではなくなっていました（指摘を受けた箇所）。
     1440px は、このデザインを組んだときの幅です。
     それ以上の画面では、広がるのではなく左右に余白が増えます。 */
  --maxw: 1440px;
  --secY: clamp(170px, 27vh, 340px);   /* セクション上下 */
  --hgut: clamp(16px, 2.2vw, 40px);    /* ヒーロー写真の外側。ここだけ狭くする */
  --colgap: clamp(14px, 1.8vw, 30px);  /* 12カラムの間隔（文字の段組用） */
  /* 写真が横に並ぶときの間隔。
     --colgap は文字の段組のための寸法で、画像の大きさと関係なく一定です。
     それを写真にも使うと、大きい写真ほど詰まって見えます
     （実測：369pxの写真で7.0%、211pxの写真で12.3%）。
     写真どうしは「画像幅の11〜12%」を目安に空けます。
     この値は幅370px前後の写真向けです。もっと小さい写真は各所で下げてください。 */
  --imggap: clamp(16px, 2.8vw, 48px);

  --ease: cubic-bezier(.16,1,.3,1);
  /* ホバー用。上のeaseは勢いが強すぎるので、写真にはこちらの穏やかな曲線を使います */
  --ease-slow: cubic-bezier(.25,.46,.45,.94);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: .085em;
  -webkit-font-smoothing: antialiased;
}
body.v3 ::selection{ background:var(--ink); color:var(--paper); }

/* Lenis 稼働中はネイティブのスムーススクロールを切る（二重補間の防止） */
html.lenis, html.lenis body{ height:auto; }
html.lenis{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }

/* ─────────── 1-b. 12カラムのグリッド ─────────── */
/* 要素を中央に置かず、カラム番号で「どこから どこまで」を決めます。
   章ごとに置き場所をずらすことで、左右の余白が毎回変わり、
   ページ全体が対称に落ち着かないようにしています。
   数字を書き換えれば寄せ方を変えられます（1が左端、13が右端）。 */
body.v3 .v-cols{
  /* 最大幅を超えたら、広がらずに中央へ寄せます */
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  display:grid;
  /* minmax(0,1fr) にすること。ただの 1fr だと、中身が広い要素があったとき
     そのカラムだけ広がり、以降のカラムが全部ずれます */
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap);
  padding-left:var(--gut); padding-right:var(--gut);
  text-align:left;
}

/* ─────────── 2. 共通パーツ ─────────── */

/* 欧文の小ラベル。字間を広く、すべて大文字 */
body.v3 .v-en{
  font-family:var(--fl); font-size:10px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.8; display:block;
}
body.v3 .v-no{
  font-family:var(--fl); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink); display:block;
}

/* 見出し。
   和文は大きくすると途端に安く見えるため、欧文サイトの感覚より二回り小さく取り、
   そのぶん字間と行間で「格」を作ります。上限25pxを超えさせないこと。 */
body.v3 .v-h{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(17px,1.75vw,25px);
  line-height:2.35; letter-spacing:.16em; color:var(--ink);
}
body.v3 .v-h.sm{ font-size:clamp(15px,1.35vw,19px); line-height:2.4; letter-spacing:.17em; }

body.v3 .v-p{
  font-size:13px; line-height:2.5; letter-spacing:.1em;
  color:var(--ink-2);
}
/* 段落のあいだは、必ず行間より広く取ること。
   1.9em（13px×1.9＝24.7px）は行間32.5pxより狭く、2段落が1つの塊に
   見えていました（トップの章・Occasions など、各所で同じ症状が出ました）。
   3.2em＝41.6pxで、行間をはっきり上回ります。
   個別に 3.2em を書いている箇所（.p-sec-lead / .p-a / .s-about-txt /
   .v-occ-head）は、この既定と同じ値なので残しておいても害はありません。 */
body.v3 .v-p + .v-p{ margin-top:3.2em; }

/* 罫線ひとつ分の区切り */
body.v3 .v-rule{ height:1px; background:var(--line-f); border:0; }

/* テキストリンク。下線が左から引かれる */
body.v3 .v-more{
  display:inline-block; position:relative; text-decoration:none;
  font-family:var(--fl); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink); padding-bottom:9px;
}
body.v3 .v-more::before,
body.v3 .v-more::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
}
body.v3 .v-more::before{ background:var(--line-link); }
body.v3 .v-more::after{
  background:var(--ink); transform:scaleX(0); transform-origin:right center;
  transition:transform .7s var(--ease);
}
body.v3 .v-more:hover::after{ transform:scaleX(1); transform-origin:left center; }

/* ── 指で触る画面のリンク ──
   このサイトのリンクは「薄い下線が、ホバーで濃い線に置き換わる」作りです。
   ところが指で触る画面にホバーはないので、濃い線は一生出ません。
   結果、11pxの文字＋ほぼ見えない線だけが残り、押せると分かりません。
   ホバーが無い環境では、濃い線を最初から出しておきます。
   （幅ではなく hover の有無で判定すること。タブレットや
     タッチ対応ノートも幅では拾えません） */
@media (hover: none){
  body.v3 .v-more::after{ transform:scaleX(1); }
  /* 押せる範囲も広げます。33pxでは指には小さすぎます */
  body.v3 .v-more{ padding-top:8px; padding-bottom:13px; }
  /* 電話・メールなどの本文中のリンクも同じ理由で濃くします */
  body.v3 .v-ac-val a{ border-bottom-color:var(--ink-3); }
  /* 絞り込みとカテゴリの列も同じ事情ですが、それぞれの
     ページ固有CSS（v3-look.css / v3-journal.css）が
     このファイルより後に読まれて上書きするため、指定はあちらに置いてあります。 */
}

/* ─────────── 3. ヘッダー ─────────── */
/* 本文とまったく同じ12カラムに乗せます。
   ヘッダーだけ別の基準で並べていると、何をしても落ち着きません。
     ロゴ    … 1カラム目（左端の基準線）
     メニュー … 2カラム目から（＝ページ内の全見出しと同じ位置）
     右の塊  … 13カラム目で終わる（＝本文の右の基準線）
   囲みボタンは置きません。ページ全体が細い罫線と文字だけで出来ているため、
   箱がひとつあるだけで浮きます。 */
body.v3 nav{
  height:auto; padding:22px var(--gut);
  background:var(--paper); backdrop-filter:none;
  border-bottom:1px solid transparent;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap); align-items:center;
  transition:border-color .8s var(--ease), padding .6s var(--ease);
}
body.v3.is-scrolled nav{
  border-bottom-color:var(--line-f);
  padding-top:15px; padding-bottom:15px;
}
/* ── 縦のライン ──
   ロゴと右の塊は「紙の余白の線」（--gut）に、メニューは「本文の線」
   （2カラム目）に乗せます。左右のどちらも --gut で終わるので、
   ヘッダーの外形がページの版面とそのまま一致します。

   ※ 以前はロゴだけ --hgut（32px）まで引き出していました。
     真下のヒーロー写真がその位置から始まっていたためですが、
     ヒーローを12カラムに組み替えた時点で写真の左端は194pxに移り、
     ロゴだけが誰も使っていない線に取り残されていました。

   ロゴはカラム幅（82px）を超えます。3カラム目までを確保して、
   メニューと重ならないようにしてあります。 */
body.v3 .nav-logo{
  grid-column:1 / 3; height:auto;
  /* 正式ロゴは細いセリフを持つディドネ系で、小さくすると横線が
     1px を割って途切れ、輪郭がガタついて見えます。
     原寸762pxに対して0.11倍まで縮めていたのが原因でした。 */
  width:clamp(104px,8.4vw,136px);
  display:block; margin-left:0;
}
body.v3 .nav-logo img{ width:100%; height:auto; object-fit:contain; }
body.v3 .nav-links{ grid-column:3 / 10; }
body.v3 .nav-right{
  grid-column:10 / 13; margin-left:0;
  display:flex; align-items:center; justify-content:flex-end;
  gap:clamp(18px,2vw,32px);
}

body.v3 .nav-links{ gap:clamp(16px,2.1vw,34px); }
body.v3 .nav-links a{
  font-family:var(--fl); font-size:12px; font-weight:400;
  letter-spacing:.1em; text-transform:none;      /* 大文字にしない */
  color:var(--ink); position:relative; padding-bottom:4px;
}
/* ホバーで左から引かれる下線。
   ※ margin / border / opacity の打ち消しを外さないこと。
     旧CSS（style.css）が、サブメニューを持つ項目の同じ ::after に
     三角マークを描いています（border-top:4px と margin-left:6px）。
     v3が指定していないプロパティはそのまま残るため、打ち消さないと
     その項目だけ下線が右に6pxずれ、太さも1px→5pxになります。 */
body.v3 .nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right center;
  transition:transform .6s var(--ease);
  margin:0; border:0; opacity:1;
}
/* 三角マークの代わりに、言語切替と同じ「1pxのシェブロン」を文字の後ろに置きます。
   下線とは別の要素（.v-nav-a::after）に持たせて、取り合いにならないようにします。 */
body.v3 .nav-links .menu-item-has-children > a .v-nav-a::after{
  content:''; display:inline-block; width:4px; height:4px;
  margin:0 0 2px 9px; vertical-align:middle;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); opacity:.55;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
body.v3 .nav-links .menu-item-has-children:hover > a .v-nav-a::after{
  transform:rotate(-135deg) translate(-1px,-1px); opacity:.9;
}
body.v3 .nav-links a:hover::after{ transform:scaleX(1); transform-origin:left center; }
/* サブメニューを持つ項目は、これも必要です。
   旧CSSの `.nav-links li.menu-item-has-children:hover > a::after` は
   三角マークを180度回す指定ですが、詳細度が上の行より高いため、
   これが無いとホバー時に下線のほうが回転します（伸びずに消えます）。 */
body.v3 .nav-links li.menu-item-has-children:hover > a::after{
  transform:scaleX(1); transform-origin:left center;
}

/* 旧CSS（style.css）のメニュー面は近白 #FAFAF7 で、v3の紙色とは別の色です。
   v3ページでも style.css は読み込まれ続けるので、ここで紙色に揃えます。
   揃えないと、メニューを開いたときだけ面の色が変わって見えます。 */
body.v3 .nav-links .sub-menu{
  background:rgba(var(--paper-rgb),.98);
  border-color:var(--line-f);
  box-shadow:0 8px 28px rgba(28,26,22,.07);
}

/* ── メニュー項目 ──
   以前はホバーで英字が上へ抜け、和文が下からせり上がる入れ替えでした。
   やめています。枠の高さを20pxに固定して中身を隠す作りだったため、
   書体や字の大きさを変えるたびに上下が切れました。
   ホバーの合図は、本文中のリンクと同じ「下線が左から引かれる」に統一します
   （.nav-links a::after が担当。仕掛けを増やさないほうが揃います）。

   和文（.v-nav-b）はPCでは出しません。狭い画面では
   ホバーが無いぶん、2行目に静かに置きます（下のレスポンシブ側）。 */
body.v3 .v-nav-roll{ display:block; }
body.v3 .v-nav-a{ display:block; white-space:nowrap; }
body.v3 .v-nav-b{ display:none; }

/* 予約導線は箱をやめ、本文中のリンクと同じ「下線が左から引かれる」作法に揃えます。
   これでヘッダーの高さを決めていた42pxの箱が消え、band が締まります。 */
body.v3 .nav-cta{
  position:relative; border:0; border-radius:0; padding:0 0 5px;
  background:none; color:var(--ink);
  /* メニューより字間を広げて、並びの中で「押すもの」として立たせます。
     囲みは付けません（このサイトは罫線と文字だけで出来ているため、
     箱がひとつあるだけで浮きます）。 */
  /* 大文字にします（2026-10-03）。
     メニュー（About / Style / Plan…）はTitle Caseなので、Booking も
     同じ組みだと並びの中で同じ格に見えます。このサイトで「押すもの」は
     .v-btn もスマホのドロワーCTAもすでに大文字なので、そちらに揃えます。
     箱で囲む案は採りません（罫線と文字だけで出来ている面に箱がひとつ
     あるだけで浮きます。下の1px罫線が同じ役割を果たしています）。 */
  font-family:var(--fl); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  line-height:20px;
}
body.v3 .nav-cta::before,
body.v3 .nav-cta::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
}
body.v3 .nav-cta::before{ background:var(--line); }
body.v3 .nav-cta::after{
  background:var(--ink); transform:scaleX(0); transform-origin:right center;
  transition:transform .62s var(--ease);
}
body.v3 .nav-cta:hover{ background:none; color:var(--ink); }
body.v3 .nav-cta:hover::after{ transform:scaleX(1); transform-origin:left center; }

/* 言語切替も、地球儀アイコンを外して文字だけに */
/* ── ヘッダー右上（言語切替 ＋ 予約） ──
   小さな面積に3つの書体・3つの字間・2種類の飾りが同居していて、
   ばらばらに見えていました。ここで揃えます。
     ・大きさと字間は、言語＝メニューと同じ、予約＝ひとまわり広い字間
     ・言語は淡い墨（従）、予約は墨（主）
     ・あいだに1pxの縦線を1本。これが無いと、予約の下線だけが
       宙に浮いた線に見えます */
body.v3 .nav-lang{ position:relative; font-family:var(--fl); }
body.v3 .nav-lang svg{ display:none; }              /* 旧デザインの国旗アイコン */
body.v3 .nav-lang summary{
  font-family:var(--fl); font-size:11px; letter-spacing:.1em;
  color:var(--ink-2); line-height:20px; gap:7px; padding:0;
  transition:color .5s var(--ease);
}
body.v3 .nav-lang summary:hover{ color:var(--ink); }
/* 開閉の合図。メニューのシェブロンと同じ寸法に揃えます */
body.v3 .nav-lang summary::after{
  width:4px; height:4px; margin-top:-1px;
  border-width:1px; opacity:.55;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
body.v3 .nav-lang[open] summary{ color:var(--ink); }
body.v3 .nav-lang[open] summary::after{ margin-top:2px; opacity:.9; }

/* 言語と予約のあいだの仕切り。gapのちょうど中央に置きます */
body.v3 .nav-lang::after{
  content:''; position:absolute; top:50%; height:12px; width:1px;
  right:calc(clamp(18px,2vw,32px) / -2);
  background:var(--line); transform:translateY(-50%);
}

/* ── 言語の一覧 ──
   旧デザインのまま残っていました（Cormorant Garamond ＋ ゴールド）。
   どちらも v3 では使わないと決めたものです。
   サブメニューと同じ「白い面＋1pxの罫線」に揃えます。 */
body.v3 .nav-lang-list{
  background:rgba(var(--paper-rgb),.98);
  border-color:var(--line-f);
  box-shadow:0 8px 28px rgba(28,26,22,.07);
  min-width:158px; padding:8px 0;
}
body.v3 .nav-lang-list a{
  font-family:var(--fl); font-size:11px; letter-spacing:.1em;
  color:var(--ink-2); padding:10px 18px;
  transition:color .4s var(--ease), background .4s var(--ease);
}
body.v3 .nav-lang-list a:hover{ color:var(--ink); background:rgba(28,26,22,.04); }
body.v3 .nav-lang-list a.is-current{ color:var(--ink); }

/* ── 公開言語が2つのとき（JP / EN）──
   ドロップダウンではなく両方そのまま出します。
   いま居る言語は墨（var(--ink)）、もう一方は淡い墨。
   押せるほうが淡いのは逆に見えますが、ここでは「いまどちらか」を
   先に読ませたいので、現在地を濃くしています（メニューの現在地と同じ扱い）。
   区切りのスラッシュは罫線より軽く、文字より薄く。 */
body.v3 .nav-lang-pair{
  display:flex; align-items:center; gap:7px;
  font-family:var(--fl); font-size:11px; letter-spacing:.1em; line-height:20px;
}
body.v3 .nav-lang-pair a,
body.v3 .nav-lang-pair .nav-lang-cur{
  font-family:var(--fl); font-size:11px; letter-spacing:.1em;
  text-decoration:none;
}
body.v3 .nav-lang-pair .nav-lang-cur{ color:var(--ink); }
body.v3 .nav-lang-pair a{
  color:var(--ink-3);
  transition:color .5s var(--ease);
}
body.v3 .nav-lang-pair a:hover{ color:var(--ink); }
body.v3 .nav-lang-sep{ color:var(--line); }

/* ─────────── 3-b. 翼の軌跡（スクロールの進み具合） ─────────── */
/* 左の余白に細い縦線を引き、読み進めた分だけ濃くなっていきます。
   その先端を、ロゴと同じ翼マークが降りていく——という作りです。
   目立たせるものではないので、線は8%、翼も10px角に留めています。 */
body.v3 .v-flight{
  position:fixed; left:calc(var(--hgut) + 3px); top:26vh; bottom:26vh;
  width:12px; z-index:120; pointer-events:none;
  opacity:0; transition:opacity 1.1s var(--ease);
}
body.v3.is-scrolled .v-flight{ opacity:1; }
/* 写真や墨色のセクションの上に来たら伏せます（判定は v3.js）。
   ここを消すと、左端まで抜いた写真の上に翼が重なります。 */
body.v3 .v-flight.is-over-art{ opacity:0; }
body.v3 .v-flight-rail{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--line-f); transform:translateX(-50%);
}
body.v3 .v-flight-rail i{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:var(--ink-3);
}
body.v3 .v-flight-wing{
  position:absolute; left:0; top:0; width:12px; height:12px;
  color:var(--ink-2); transform:translate3d(0,-50%,0);
}
body.v3 .v-flight-wing svg{ width:100%; height:auto; display:block; }
@media (max-width:1100px){ body.v3 .v-flight{ display:none; } }

/* ─────────── 12-b. ページの先頭へ戻る ─────────── */
/* 囲みボタンにはしません。細い縦線とごく小さな文字だけです。
   線はホバーで下から上へ伸びます（＝上へ戻る、という仕草）。 */
body.v3 .v-totop{
  position:fixed; right:var(--gut); bottom:clamp(22px,4vh,44px); z-index:130;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border:0; border-radius:0; cursor:pointer; padding:14px 12px;
  /* 下敷きは置きません。紙色の板を敷くと、紙の上では見えなくても
     その面積ぶんコンテンツを覆ってしまいます。
     代わりに、真下が写真や墨色の面のときだけ白文字へ切り替えます
     （判定は v3.js の isOverArt。翼のインジケータと同じ仕組み）。 */
  background:none;
  font-family:var(--fl); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-2); line-height:1;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease),
             visibility .7s var(--ease), color .5s var(--ease);
}
/* 1画面ぶん弱スクロールしたら現れます（判定は v3.js） */
body.v3.is-deep .v-totop{ opacity:1; visibility:visible; transform:none; }
body.v3 .v-totop i{
  display:block; width:1px; height:clamp(30px,4vh,46px);
  background:var(--line); position:relative; overflow:hidden;
}
body.v3 .v-totop i::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:0;
  background:var(--ink-2); transition:height .6s var(--ease);
}
body.v3 .v-totop:hover{ color:var(--ink); }
body.v3 .v-totop:hover i::after{ height:100%; }

/* 写真や墨色の面の上に来たとき。
   薄い影は、明るい写真の上でも白文字が沈まないようにするためです
   （ルックのタグ .gal-item-tag と同じ作法）。 */
body.v3 .v-totop.is-on-art{
  color:var(--paper);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
body.v3 .v-totop.is-on-art i{ background:rgba(var(--paper-rgb),.4); }
body.v3 .v-totop.is-on-art i::after{ background:var(--paper); }
body.v3 .v-totop.is-on-art:hover{ color:var(--paper); }
/* 左の翼と同じ列に来ないよう、狭い画面では翼のほうを消してあります */
@media (max-width:600px){
  body.v3 .v-totop{ right:var(--hgut); padding:12px 10px; }
}
@media (prefers-reduced-motion:reduce){
  body.v3 .v-totop{ transition:none; }
  body.v3 .v-totop i::after{ transition:none; }
}

/* ─────────── 13. フッター ─────────── */
/* 紙の色に反転。締めCTAが黒なので、その下は明るく抜く */
body.v3 footer{ background:var(--paper); padding:clamp(60px,9vh,96px) var(--gut) 0; }
/* フッターも本文と同じ上限に揃えます。
   揃えないと、本文だけ1440pxで止まりフッターだけ画面幅いっぱいに広がります。 */
body.v3 .foot-grid,
body.v3 .foot-bottom{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
/* ■ 3列の幅（2026-10-03）。旧デザインの 1.2fr / 1fr / 1fr では、
     メニューだけが11項目の1列になって538pxに伸び、左の2列が220pxで
     終わっていました（下に300pxの空きが残る状態）。
     メニューを2段に流し、住所の列を広く取って高さを揃えます。 */
body.v3 .foot-grid{
  grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr);
  border-bottom-color:var(--line-f);
  gap:clamp(32px,5vw,72px);
  padding-bottom:clamp(44px,6vh,72px);
}
body.v3 .foot-tagline{ font-family:var(--fe); font-style:normal; color:var(--ink-2); letter-spacing:.1em; }
body.v3 .foot-by,
body.v3 .foot-col-title{ font-family:var(--fl); color:var(--ink-3); letter-spacing:.24em; }
/* 列見出しと中身の間。住所の行間（20.4px）より広く取ります */
body.v3 .foot-col-title{ margin-bottom:22px; }
body.v3 .foot-info-label{ font-family:var(--fb); color:var(--ink-3); }
body.v3 .foot-info-val,
body.v3 .foot-info-val a{ color:var(--ink-2); }
/* メニューは2段組み。項目数が増減しても自動で振り分けます
   （flexの縦1列だと、本番の11項目で右の列だけが倍の高さになります）。 */
body.v3 .foot-nav{
  display:block; columns:2; column-gap:clamp(20px,2.4vw,44px);
}
/* 1行の高さは本文用の行送り（2.15）のままだと30pxあり、11項目では
   右の列だけが80px高くなります。リンクの行送りを詰めて揃えます。 */
body.v3 .foot-nav li{ break-inside:avoid; margin-bottom:13px; }
body.v3 .foot-nav a{
  display:inline-block; line-height:1.9;
  font-family:var(--fl); font-size:11px; letter-spacing:.2em; color:var(--ink-2);
}
body.v3 .foot-nav a:hover{ color:var(--ink); }
/* SNSは1列目、ロゴ・タグラインの下に置いています（footer.php）。
   枠は外しました。このサイトに囲みのボタンは1つもありません。 */
body.v3 .foot-sns{ margin-top:clamp(28px,4vh,40px); gap:clamp(14px,1.6vw,22px); }
body.v3 .foot-sns a{
  font-family:var(--fl); color:var(--ink-2);
  border:0; border-bottom:1px solid var(--line-link); padding:0 0 3px;
}
body.v3 .foot-sns a:hover{ border-bottom-color:var(--ink); color:var(--ink); }
/* ＠ハンドル。リンクではなく、検索してもらうための文字です。
   下線を引くとリンクに見えるので引きません（押せないものに下線を引かない）。 */
body.v3 .foot-sns-id{
  display:block; margin-top:12px;
  font-family:var(--fl); font-size:10px; letter-spacing:.14em; color:var(--ink-3);
}
/* ロゴ・タグライン・SNS・クレジットで1列。クレジットだけ離します */
body.v3 .foot-by{ display:block; margin-top:clamp(30px,4.4vh,46px); }
/* ■ 狭い画面。body.v3 で列を指定したため、旧CSS（style.css）の
     「900px以下は1列」が効かなくなります。ここで必ず上書きすること。 */
@media (max-width:900px){
  body.v3 .foot-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,48px); }
  /* ロゴの列は上段いっぱいに置き、下段に Studio と Menu を並べます */
  body.v3 .foot-grid > div:first-child{ grid-column:1 / -1; }
}
@media (max-width:600px){
  body.v3 .foot-grid{ grid-template-columns:minmax(0,1fr); }
  /* 1列になってもメニューは2段のまま。縦に11行並べると指が届きません */
  body.v3 .foot-nav{ column-gap:clamp(16px,5vw,32px); }
}
/* ─────────── 日本語の折り返し ─────────── */
/* 日本語は単語の切れ目に関係なくどこでも折れるため、短い見出しやラベルで
   最後の1文字だけが次の行に取り残されます（実機で「結婚の予定はないけれ／ど」
   「シークレットヴァージャ／ー」が発生）。
   ・balance … 行の長さを揃える。短いラベル・固有名詞向け
   ・pretty  … 孤立行を避ける。本文向け
   どちらも未対応のブラウザでは無視されるだけで、崩れません。
   ※ 意図的に <br> を置いている見出し（.v-h / .p-sec-title）には入れないこと。
      balance が自前の改行位置と競合します。 */
body.v3 .v-occ-ja,
body.v3 .v-jp-title,
body.v3 .v-plan-tax,
body.v3 .p-set-ja,
body.v3 .p-th-for,
body.v3 .p-style-ja,
body.v3 .p-beauty-n,
body.v3 .p-opt-n,
body.v3 .p-book-name,
body.v3 .j-card-title,
body.v3 .tc-term,
body.v3 .p-rows .l,
body.v3 .p-td-l{
  text-wrap:balance;
}
/* 本文の折り返し。
   和文は字単位で折る（word-break:normal）に統一しています。
   以前は word-break:auto-phrase（文節で折る）と text-wrap:pretty を
   入れていましたが、実測して外しました。

   段落ごとの「最長行 ÷ 容器幅」を比べた結果（禁則・transition を止めて計測）：

                          トップ         /plan/        /about/
     スマホ 375px
       auto-phrase+pretty  71〜99％ 28pt  58〜97％ 39pt  79〜100％ 21pt
       normal（採用）      97〜100％ 3pt  86〜100％ 14pt  88〜100％ 12pt
     PC 1440px
       auto-phrase+pretty  86〜99％ 13pt  86〜96％ 10pt   96〜100％ 4pt
       normal（採用）      98〜100％ 2pt  94〜99％ 5pt    99〜100％ 1pt

   auto-phrase は入りきらない文節ひとつで行末に穴があくため、段落ごとに
   右端が最大39pt（スマホで約130px）ずれ、並べたときに文章の横幅が
   まちまちに見えます。normal にすると行が端まで埋まり、どの幅でも
   右端のずれが1〜5pt（PC）／3〜14pt（スマホ）に収まります。

   text-wrap:pretty は word-break:normal と併用すると和文では
   まったく効かず（全ページで数値が1ptも動きませんでした）、
   auto-phrase と併用したときだけ2〜3行の短い段落を上下の行で
   均等割りして58〜75％に縮めます。つまり効くときは害になるので外しました。
   行の長さを揃えたい短い見出し・ラベルは、上の text-wrap:balance で
   明示的に指定しています。

   引き換えに、最終行が2〜3字だけになる段落が1ページに3〜4本出ます。
   これは字単位で折る和文では普通の見え方で、気になる箇所は
   CSSではなく原稿の長さで調整します。 */
body.v3{ word-break:normal; }
/* 英字のラベル・ボタン類。CJKが無いので実害はありませんが、意図を明示します。
   .v-en は1文の英語リードにも使われ、2行目が1語だけ残ることがあるので
   行の長さを揃えます。 */
body.v3 .v-en{ text-wrap:balance; }

/* ─────────── もう一方のプランへの入口（全v3ページ共通）─────────── */
/* トップの「ところで、ひとりでも撮れます」の面と同じ作りです。
   いまは3か所で使っています。
     トップ   → /solo/
     /plan/   → /solo/
     /solo/   → /plan/
   写真は置きません。ここに写真を足すと、副商品が主役と同じ重さになります。
   罫線1本と短い文だけで、「ついでに、こちらもあります」の温度に留めます。
   右寄せ（7/13）なのは、本文が左から来たあとに視線を落とすためです。 */
body.v3 .v-solo{ padding-top:var(--secY); }
body.v3 .v-solo-inner{
  grid-column:7 / 13;
  padding-top:clamp(34px,4.6vh,54px);
  border-top:1px solid var(--line-f);
}
body.v3 .v-solo-txt{
  margin:clamp(22px,3vh,32px) 0 clamp(26px,3.6vh,38px);
  font-size:12.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2);
}
@media (max-width:900px){
  body.v3 .v-solo-inner{ grid-column:1 / 7 !important; }
}

/* ─────────── 締めのCTA（全v3ページ共通）─────────── */
/* .p-cta と同じ見た目ですが、あちらは v3-page.css にあります。
   Look Book は v3-look.css、ジャーナルと記事は v3-journal.css しか
   読み込まないため、共通のここに置いています。
   （下層ページは .p-cta のままで、こちらは使っていません） */
body.v3 .v-end{
  margin-top:var(--secY); padding-top:clamp(56px,8vh,110px);
  padding-bottom:clamp(90px,13vh,170px);
  border-top:1px solid var(--line-f); row-gap:0;
}
body.v3 .v-end-title{ grid-column:2 / 9; }
body.v3 .v-end-note{
  grid-column:2 / 8; margin-top:clamp(24px,3.4vh,36px);
  font-family:var(--fl); font-size:10.5px; letter-spacing:.18em;
  line-height:2.2; color:var(--ink-sub);
}
body.v3 .v-end-links{
  grid-column:9 / 13; display:flex; flex-direction:column;
  align-items:flex-start; gap:clamp(18px,2.6vh,28px);
  margin-top:clamp(30px,4vh,46px);
}
@media (max-width:900px){
  body.v3 .v-end-title,
  body.v3 .v-end-note,
  body.v3 .v-end-links{ grid-column:1 / 7; }
}

body.v3 .foot-logo img{ filter:none; opacity:1; }   /* v3のフッターは紙色なので、ロゴは元の色のまま */
body.v3 .foot-copy,
body.v3 .foot-note{ font-family:var(--fl); color:var(--ink-3); }

/* ─────────── 14. リビール（登場アニメーション） ─────────── */
/* 初期状態。JSが .is-in を付けた瞬間に立ち上がる */
body.v3 [data-rv]{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity 1.25s var(--ease), transform 1.25s var(--ease);
  transition-delay:var(--d,0s);
}
body.v3 [data-rv].is-in{ opacity:1; transform:none; }

/* 行が下からせり上がる。詩の部分に使用 */
body.v3 .v-line{ display:block; overflow:hidden; }
body.v3 .v-line > span{
  display:block; transform:translate3d(0,105%,0);
  transition:transform 1.35s var(--ease); transition-delay:var(--d,0s);
}
body.v3 .v-line.is-in > span{ transform:none; }

/* 画像が覆いを外しながら現れる */
body.v3 [data-rv-img]{ position:relative; overflow:hidden; }
body.v3 [data-rv-img]::after{
  content:''; position:absolute; z-index:3; background:var(--paper);

  /* inset:0 ではなく -6px。四辺へわざと6pxはみ出させます。
     枠の高さは aspect-ratio や % から出るので端が小数になります。
     中の写真は will-change:transform で合成レイヤーになっており、
     合成レイヤーの切り抜きは整数ピクセルへ外側に丸められますが、
     覆いの塗りは小数のままアンチエイリアスされます。
     この丸めの差だけ写真が四辺からはみ出し、覆いが閉じていても
     細い輪郭線が見えることがあります。写真は覆いの下で1.9秒かけて
     濃くなるので、「写真が出る前に線だけが見える」形になります。
     （ヒーローで実際に出たのと同じ現象です。v3-top.css の
       .v-hero-frame::after にも同じ手当てをしてあります）
     はみ出した6pxは [data-rv-img] の overflow:hidden が切るので、
     見た目は変わりません。scaleY(0) まで縮んだときも、
     基準が枠の6px下なので帯は残りません。

     ※ 2pxでは足りませんでした。パララックスの写真は毎フレーム小数の
       translate が入るので、切り抜きの丸めが1pxでは収まりません。
       余らせても overflow:hidden が切るだけなので、6px取ってあります。 */
  inset:-6px;

  transform:scaleY(1); transform-origin:bottom center;
  transition:transform 1.5s var(--ease); transition-delay:var(--d,0s);
  pointer-events:none;
}
body.v3 [data-rv-img].is-in::after{ transform:scaleY(0); }

/* ── 大きな写真は「覆いを引く」のではなく「その場で溶かす」 ──
   data-rv-img="fade" と書いた写真だけ、トップのヒーローと同じ出方になります。

   覆いを引く動きは、それ自体が仕掛けとして目に入ります。
   小さな写真が連なる場所（ルックの一覧、カード、ジャーナルの抜粋）では
   それがリズムになって効きますが、画面の半分を占める1枚にかけると
   写真より動きのほうが主役になってしまいます。
   ページの顔になる写真は、向きのない溶暗にそろえます。

   ※ 写真自体の不透明度は動かしません（下の img の規則を打ち消しています）。
     覆いと写真を二重に薄めると、見えるまでが倍かかって鈍くなります。
     ヒーローも、覆いだけを溶かして写真は最初から濃いままです。
   ※ ここで transform（scaleなど）を足してはいけません。
     これらの写真はパララックスの対象で、v3.js が毎フレーム transform を
     書き込みます。transition が乗ると動きが遅れて濁ります。
   ※ 覆いの inset:-2px は、この出方でこそ効きます。
     transform が無い覆いは、合成レイヤーになった写真と端の丸め方が変わり、
     閉じていても1pxの輪郭線が透けます（ヒーローで実際に出ました）。 */
body.v3 [data-rv-img="fade"]::after{
  transform:none;
  transition:opacity 2.2s var(--ease-slow);
  transition-delay:var(--d,0s);
}
body.v3 [data-rv-img="fade"].is-in::after{ opacity:0; transform:none; }
/* ※ 写真自体を濃いままにする指定は、下の [data-rv-img] img の“あと”に置いてあります。
     同じ強さの指定なので、前に置くと打ち消せません（実際に効きませんでした）。 */

/* 覆いが外れるのと同時に、写真そのものもゆっくり濃くなります。
   覆いだけだとシャッターが開くような硬い動きになるので、
   覆い（1.5秒）より長い1.9秒をかけ、抜けたあとも濃くなり続けるようにします。
   ヒーローで覆い1.7秒・ズーム3.0秒にしているのと同じ考え方です。

   ※ ここで transform（scale など）を足してはいけません。
     パララックスの写真は v3.js が毎フレーム transform を書き込むので、
     transition が乗ると1コマごとに2秒かけて追いかけ、動きが遅れて濁ります。
     ホバーで拡大する写真とも取り合いになります。不透明度だけに留めること。 */
body.v3 [data-rv-img] img,
body.v3 [data-rv-img] iframe{
  opacity:0;
  transition:opacity 1.9s var(--ease-slow);
  transition-delay:var(--d,0s);
}
body.v3 [data-rv-img].is-in img,
body.v3 [data-rv-img].is-in iframe{ opacity:1; }

/* 溶暗で出す写真は、覆いの下でも最初から濃いままにします。
   覆いと写真を二重に薄めると、見えるまでが倍かかって鈍くなるためです。
   transition はここで触りません。ホバーで拡大する写真（スタイル一覧など）が
   自分の transition を持っており、まとめて消すと拡大が効かなくなります。 */
body.v3 [data-rv-img="fade"] img,
body.v3 [data-rv-img="fade"] iframe{ opacity:1; }


/* ─────────── 動きを減らす設定への配慮（共通分） ─────────── */
@media (prefers-reduced-motion:reduce){
  body.v3 [data-rv],
  body.v3 .v-line > span{ opacity:1 !important; transform:none !important; transition:none !important; }
  body.v3 [data-rv-img] img,
  body.v3 [data-rv-img] iframe{ opacity:1 !important; transition:none !important; }
  body.v3 [data-rv-img]::after{ display:none; }
}

/* ─────────── 写真の拡大表示（ライトボックス） ─────────── */
/* 動きは assets/js/gallery.js が担当し、見た目だけをここで上書きします。
   旧デザインは暗い背景＋ゴールドでしたが、v3では紙の色で開きます。
   写真の周りを白で埋めることで、暗いルックでも縁が締まって見えます。 */
body.v3 .lbx{
  background:rgba(var(--paper-rgb),.97);
  backdrop-filter:blur(10px) saturate(1.05);
}

/* ── 開くときの動き ──
   もとは display:none → flex の切り替えだけで、一瞬で入れ替わっていました。
   写真を1枚ずつ見てもらう場所なので、紙 → 写真 → 操作部 の順に、
   息を継ぐように開かせます。

   ※ display は transition できないので、ここは animation で書きます
     （.open が付いて表示された瞬間に走ります）。
   ※ 旧 style.css 側には .lbx の動きの指定が1つもないので、取り合いません。 */
body.v3 .lbx.open{ animation:lbx-in .9s var(--ease-slow) both; }
@keyframes lbx-in{ from{ opacity:0; } to{ opacity:1; } }

/* 写真。gallery.js が「画像が届いてから」 .is-ready を付けます。
   わずかに引きながら静止させるのは、ヒーローと同じ考え方です。 */
body.v3 .lbx-img{
  opacity:0; transform:scale(1.035);
  transition:opacity 1.15s var(--ease-slow), transform 1.7s var(--ease-slow);
}
body.v3 .lbx-img.is-ready{ opacity:1; transform:none; }

/* 閉じる・送り・キャプション・サムネイルは、写真より遅れて現れます。
   同時に出すと、見るべきものが一度に5つ並んで散らかります。 */
body.v3 .lbx.open .lbx-close,
body.v3 .lbx.open .lbx-nav,
body.v3 .lbx.open .lbx-bottom{ animation:lbx-chrome-in 1.1s var(--ease-slow) .5s both; }
@keyframes lbx-chrome-in{ from{ opacity:0; } to{ opacity:1; } }

/* 閉じるとき。JSが0.42秒後に display を戻します */
body.v3 .lbx.is-closing{ animation:lbx-out .42s var(--ease) both; }
@keyframes lbx-out{ from{ opacity:1; } to{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  body.v3 .lbx.open,
  body.v3 .lbx.is-closing,
  body.v3 .lbx.open .lbx-close,
  body.v3 .lbx.open .lbx-nav,
  body.v3 .lbx.open .lbx-bottom{ animation:none !important; }
  body.v3 .lbx-img{ opacity:1 !important; transform:none !important; transition:none !important; }
}
body.v3 .lbx-close{
  font-family:var(--fl); font-size:11px; letter-spacing:.2em;
  text-transform:none; color:var(--ink-2);
  transition:color .5s var(--ease);
}
body.v3 .lbx-close:hover{ color:var(--ink); }

/* 送りボタンは囲みをやめ、山括弧だけを置きます */
body.v3 .lbx-nav{
  width:44px; height:44px; border:0; border-radius:0;
  background:none; color:var(--ink-3); font-size:30px;
  transition:color .5s var(--ease);
}
body.v3 .lbx-nav:hover{ background:none; border:0; color:var(--ink); }

body.v3 .lbx-title{
  font-family:var(--fl); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
}
body.v3 .lbx-count{
  font-family:var(--fl); font-size:10px; letter-spacing:.16em; color:var(--ink-sub);
}
body.v3 .lbx-thumb{ opacity:.34; }
body.v3 .lbx-thumb.active{ opacity:1; }
body.v3 .lbx-thumb.active::after{ border-color:var(--ink); }

/* ─────────── パンくず ─────────── */
/* 旧デザインは Space Mono の大文字でした。v3では明朝の小さな文字にして、
   左の基準線（12カラムの2カラム目）に合わせます。 */
body.v3 .breadcrumb{
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  padding:clamp(96px,12vh,140px) var(--gut) 0;
  font-family:var(--fl); font-size:10px; letter-spacing:.14em;
  text-transform:none; color:var(--ink-sub);
  gap:10px; flex-wrap:wrap; line-height:2;
}
body.v3 .breadcrumb a{ color:var(--ink-3); text-decoration:none; }
body.v3 .breadcrumb a:hover{ color:var(--ink); }
body.v3 .breadcrumb span{ color:var(--ink-2); }
/* 記事名が長いと折り返して段が増えるので、1行に収めます */
body.v3 .breadcrumb > :last-child{
  max-width:min(46ch, 100%); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* ─────────── レスポンシブ（共通分） ─────────── */
/* 12カラムとヘッダーの並びは、v3を当てるすべてのページで共通です。
   ここをページ固有のCSSに置くと、そのページでしか効かず崩れます。 */
@media (max-width:900px){
  /* ── 狭い画面の版面：12カラム → 6カラム ──
     12カラムのままだと1カラムが15px程度になり、文字が入りません。
     かといって1列に潰すと、このサイトの持ち味である「余白」と「ずらし」が
     まるごと消えて、ただの縦積みになります。そこで6カラムに組み替えます。

     ■ 使い分けの目安（各ページのCSSはこれに従っています）
       本文        … 1/7（紙いっぱい）か 1/6。狭い画面で本文を細くすると読めません
       小さなラベル … 1/5、2/6 など。短いので細くしても平気で、ずらしが効きます
       写真        … ここが崩しの主役。2/7 に寄せる、片側だけ画面外へ抜く、など

     ■ しくみ
       まず全部を 1/7 に戻し、そのうえで各ページが置き直します。
       !important が必要なのは、PC用の指定（例：.j-head .v-h）のほうが
       セレクタが強く、ここでの指定に勝ってしまうためです。
       置き直す側にも !important を付けてください。 */
  body.v3{ --colgap:10px; }
  body.v3 .v-cols{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  body.v3 .v-cols > *{ grid-column:1 / 7 !important; grid-row:auto; }

  /* ヘッダーは12カラムをやめて素直な横並びへ。
     狭い画面ではハンバーガーが出てくるため、グリッドのままだと
     ハンバーガーが1カラム目に自動配置されてロゴに重なります。 */
  body.v3 nav{
    display:flex; align-items:center;
    padding-left:var(--hgut); padding-right:var(--hgut);
  }
  /* スマホでも同じ理由で少し大きく。ヘッダーの高さは
     ロゴの高さ（幅÷2.6）＋上下パディングで決まります。 */
  body.v3 .nav-logo{ margin-left:0; width:clamp(96px,26vw,120px); }
  /* 全画面メニューの面も紙の色に（既定は旧CSSの近白のままです） */
  body.v3 .nav-links{ background:rgba(var(--paper-rgb),.97); }

  /* ── 全画面メニューの中身 ──
     旧CSS（style.css）とv3の指定が噛み合っておらず、こうなっていました：
       ・書体と大きさは v3 の .nav-links a が勝つ → PC用の12px
       ・font-style は v3 が指定していない → 旧CSSの italic だけ残り、
         Jost に偽の斜体がかかる
     全画面で開くメニューなので、ここは専用に組み直します。 */
  /* ■ 項目のあいだの隙間をなくします（2026-10-03）。
       PC用の .nav-links は gap:16px を持っていて、スマホでもそのまま
       効いていました。項目が9つ並ぶので 16×9＝144px を無駄にしています。
       区切りは各項目の下の罫線がすでに引いているので、隙間は要りません。 */
  body.v3 .nav-links{ gap:0; }

  /* ■ 中身が空の言語切替を畳みます（2026-10-03）。
       .nav-mobile-lang は旧デザインの名残で、いまは何も入っていません。
       それでも margin-top:38px と gap を取り、合計54pxを占めていました。
       :empty を使っているので、将来ここにリンクを入れれば自動で戻ります。 */
  body.v3 .nav-mobile-lang:empty{ display:none; }

  /* ■ 行の高さを画面の高さに追従させます（2026-10-03）。
       本番のメニューは8項目（About / Style / Plan / Solo / Look Book /
       FAQ / Journal / Contact）で、固定値のままだと1画面に収まりません。
       実測（375×812・8項目に換算）：
         旧 1項目94px → 内容1065px ／ 画面812px（253pxあふれ）
         新 1項目84px → 内容 約790px ／ 画面812px（収まる）
       背の低い端末ではそれでも入りきらないので、そのときはスクロールします
       （style.css の safe center で、いちばん上まで掴めるようにしてあります）。
       ※ 1項目の内訳＝上下padding＋英字25px＋和文22px＋あいだ＋罫線1px。
         詰めるときは padding から。文字を小さくすると読めなくなります。 */
  body.v3 .nav-links > li > a{
    font-family:var(--fl); font-style:normal;
    font-size:clamp(15px,4.2vw,19px); letter-spacing:.12em;
    padding:clamp(9px,1.7vh,20px) 0; border-bottom-color:var(--line-f);
  }
  body.v3 .nav-links > li > a::after{ display:none; }
  /* 指で触る画面にはホバーがないので、和文は最初から2行目に出します。
     PC側では display:none にしてあるので、ここで戻します。 */
  body.v3 .v-nav-a{ line-height:1.5; }
  body.v3 .v-nav-b{
    display:block; margin-top:clamp(3px,.6vh,7px);
    font-size:10px; letter-spacing:.14em; color:var(--ink-3);
  }

  /* 予約ボタン。旧CSSは「墨の面＋近白の文字」で作っていますが、
     文字色だけ v3 の .nav-links a（墨）に上書きされていて、
     墨の上に墨＝まったく読めない状態でした。 */
  body.v3 .nav-links a.nav-mobile-cta{
    background:var(--ink); color:var(--paper);
    font-family:var(--fl); font-style:normal;
    font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    padding:clamp(13px,2.1vh,17px) 44px; border-bottom:0;
    margin-top:clamp(16px,2.8vh,32px);
  }
  body.v3 .nav-right{ order:2; margin-left:auto; }
  body.v3 .nav-toggle{ order:3; margin-left:18px; }

  /* 言語と予約ボタンのあいだの縦罫線は、狭い画面では消します。
     予約ボタンはドロワーの中に移るので、罫線だけが EN の右に
     ぶら下がって残ります（実際に残りました）。 */
  body.v3 .nav-lang::after{ display:none; }
}
@media (max-width:600px){
  body.v3{ font-size:13px; }
}