@charset "UTF-8";

/* =========================================================
   MOMENT — prototype C
   toC寄り × LEXUS的な骨格
   ・巨大で細い欧文が主役、日本語は小さく従わせる
   ・写真は画面端へ抜けさせ、テキストパネルを重ねる
   ・罫線は写真の下へもぐらせる
   ========================================================= */

:root{
  --ink:#1c1a17;
  --ink-2:#6d655b;
  --ink-3:#7a756e;          /* 注記・補足。#9d968c は 2.90:1 で WCAG AA 未達だったので下げた（4.53:1） */
  --paper:#fffefb;
  --paper-2:#f6f3ed;
  --sand:#c2b6a1;
  --line:#e3ddd2;
  --line-2:#efeae0;
  --line-light:rgba(243,240,233,.28);   /* 濃色セクションの上に引く罫線 */
  --line-green:#06c755;
  --gold:#d9b682;           /* 選択中のプランタブを囲う線（2026-08-21 クライアント指定） */

  --latin:"Jost",sans-serif;                       /* 細い欧文ディスプレイ */
  --mincho:"Shippori Mincho","Yu Mincho",serif;    /* 日本語の見出し・数字 */
  --gothic:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;

  --pad:clamp(20px,5vw,80px);
  --wrap:1280px;                             /* 内側の最大幅（親が --pad を持つとき） */
  --full:calc(1280px + var(--pad) * 2);      /* 自分で --pad を持つブロック用 */
  --read:calc(760px + var(--pad) * 2);       /* 読み物の1カラム用 */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
/* 写真や罫線を画面端まで抜く箇所が複数あるため、文書はビューポートより
   約186px広くなる（.limit__fig の margin-right、.hero__rule の width:100vw。
   **どちらも意図した演出**）。
   body の overflow-x:hidden だけだと「見えないがスクロールはできる」状態で、
   横スワイプや要素へのフォーカスで画面が左へずれることがある。
   clip はスクロール自体が成立しないので、ずれようがない。
   hidden は clip が効かない古い環境向けの控え。 */
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px;
  overflow-x:hidden;
  overflow-x:clip;
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--gothic); font-weight:400; font-size:15px;
  line-height:1.95; letter-spacing:.03em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
img,video,svg{ display:block; max-width:100%; }
/* **width/height 属性を付けたら、これが要る**（2026-10-07）。
   moment_webp_swap() が実寸の width/height を全 <img> に足すようにした。
   height:auto が無いと、**属性の数値がそのまま高さになる。**
   実際に .blook img（CSS は aspect-ratio:1/1）が 220x1200 で描画された。
   aspect-ratio は「片方が auto のとき」にしか効かないため。
   明示的に高さを決めている規則（.gfig--2 img の height:clamp など）は
   詳細度で勝つので、そちらは変わらない。 */
img{ height:auto; }
/* hidden属性はUAスタイルのdisplay:noneなので、著者側のdisplay指定に負ける。
   モーダルのように display を持つ要素で hidden を使うため、明示的に打ち消す */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 30px; font-size:14px; font-weight:500; letter-spacing:.08em;
  line-height:1.4; text-align:center; transition:opacity .3s, background .3s, color .3s;
}
.btn svg{ width:19px; height:19px; fill:currentColor; flex:none; }
.btn--line{ background:var(--line-green); color:#fff; }
.btn--line:hover{ opacity:.86; }
.btn--dark{ background:var(--ink); color:var(--paper); }
.btn--dark:hover{ background:#3a342c; }
/* Instagram。LINEの緑と並べるので、こちらは --ink に留める。
   ブランドのグラデーションは、このサイトの配色（有彩色の面は2つだけ）から外れる */
.btn--ig{ background:var(--ink); color:var(--paper); }
.btn--ig:hover{ background:#3a342c; }
.btn--sm{ padding:12px 20px; font-size:12.5px; }
.btn--lg{ padding:21px 54px; font-size:16px; }
/* ヘッダーは濃色。緑は本命CTAだけに絞る */
.hd .btn--line{ background:var(--ink); color:var(--paper); }
.hd .btn--line:hover{ background:#3a342c; opacity:1; }

/* ---------- シェブロンリンク（LEXUS的） ---------- */
/* 別ページへの誘導。文字だけだとリンクだと気づかれないので、枠で囲って押せると分かる形にする。
   サイト内42箇所すべてがこの役割なので、個別のボタンを作らずここを直している。
   濃い地の上（.gcta / 黒基調ページ）は、下の方で色だけ差し替える */
.chev{
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 22px; border:1px solid var(--line);
  font-size:13px; letter-spacing:.06em; line-height:1.4;
  transition:border-color .3s, background .3s;
}
.chev:hover{ border-color:var(--ink-3); background:var(--paper-2); }
/* ボタンと縦に並ぶ場合、スマホでは親が align-items:stretch で横に伸ばす。
   inline-flex のままだと中身が左に寄って、上のボタンと揃わない。
   伸ばされたときだけ中央に寄せる */
.price__act .chev,.mov__act .chev,.inv__act .chev,.gcta__act .chev{ justify-content:center; }
/* 文中に置くときは枠を外す（段落の途中で箱になると読みにくい） */
.chev--inline{
  display:inline; padding:0; border:0; background:none;
  border-bottom:1px solid var(--line); padding-bottom:1px;
}
.chev--inline:hover{ background:none; border-bottom-color:var(--ink); }
.chev::after{
  content:""; width:6px; height:6px; flex:none;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg); transition:transform .4s var(--ease);
}
.chev:hover::after{ transform:rotate(45deg) translate(3px,-3px); }

/* ---------- セクション見出し ---------- */
/* 欧文が主役／日本語は小さく／下にヘアライン */
.shead{
  max-width:var(--wrap); margin:0 auto clamp(38px,5vw,66px);
  display:grid; grid-template-columns:1fr minmax(0,auto); align-items:end; gap:20px 40px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.shead__en{
  font-family:var(--latin); font-weight:200;
  font-size:clamp(30px,4.6vw,62px); letter-spacing:.09em; line-height:1;
}
.shead__en--sm{ font-size:clamp(22px,2.6vw,34px); }
.shead__jp{
  margin-top:14px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(14px,1.4vw,17px); letter-spacing:.12em; color:var(--ink-2);
}
.shead__note{ font-size:12.5px; color:var(--ink-2); max-width:420px; padding-bottom:4px; }
.more{ margin-top:clamp(30px,4vw,48px); text-align:right; }
.shead .more{ margin-top:0; padding-bottom:4px; }

/* 出現アニメ（控えめ） */
[data-in]{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-in].is-in{ opacity:1; transform:none; }

/* =========================================================
   LOADER — サイトと同じ言語（細い欧文＋ヘアライン＋カウンター）で組む
   ・進捗はダミーではなく、実際の読み込み状況に連動
   ・JSが落ちてもCSSアニメーションで必ず開く
   ========================================================= */
.ld{
  position:fixed; inset:0; z-index:200; background:var(--ink); color:var(--paper);
  display:grid; align-content:center; padding:0 var(--pad);
  animation:ldFailOpen 0s linear 5s forwards;   /* 保険：JSが落ちても5秒で必ず消す */
}
.ld__in{ max-width:var(--wrap); width:100%; margin:0 auto; }
.ld__mark,.ld__sub{ overflow:hidden; }
.ld__mark span,.ld__sub span{
  display:block; transform:translateY(105%);
  animation:ldUp 1.2s var(--ease) forwards;
}
.ld__sub span{ animation-delay:.14s; }
.ld__mark span{
  font-family:var(--latin); font-weight:200;
  font-size:clamp(34px,6.4vw,88px); letter-spacing:.14em; line-height:1.05;
}
/* 銘はロゴ画像に変えた（loader.php）。
   幅は、それまでの Jost の "MOMENT" とほぼ同じ見え幅になるように取っている。
   文字のときは font-size:clamp(34px,6.4vw,88px) ＋ letter-spacing:.14em で、
   実際の横幅は font-size のおよそ4.6倍＝約155〜400px だった。
   display:block にしないと、行間ぶんの余白が span の下に残る */
/* ロゴのPNGは字がぴったりまで詰まっている（余白0px、実測）。
   文字で組んでいたときは line-height:1.05 のぶん字の下に約12px（最大時）の空きがあり、
   サブ行の margin-top:14px と合わせて 26px ほど離れて見えていた。
   画像にすると、その行送りぶんが消えてサブ行が詰まる。同じだけ足して戻す */
.ld__mark img{
  display:block; width:clamp(158px,29vw,400px); height:auto;
  margin-bottom:clamp(4px,.9vw,12px);
}
.ld__sub span{
  margin-top:14px; font-family:var(--latin); font-weight:300;
  font-size:clamp(10px,1.1vw,13px); letter-spacing:.28em; color:rgba(255,254,251,.55);
}
/* 読み込み量がそのまま線になる。ヒーローのダッシュと同じ見立て */
.ld__bar{
  display:block; margin-top:clamp(30px,4vw,52px); height:1px; width:100%;
  background:rgba(255,254,251,.18); overflow:hidden;
}
.ld__bar b{
  display:block; height:100%; width:100%; background:var(--paper);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.ld__num{
  position:absolute; left:var(--pad); bottom:clamp(24px,3vw,40px);
  display:flex; align-items:baseline; gap:7px;
  font-family:var(--latin); font-weight:300; letter-spacing:.1em;
}
.ld__num b{ font-weight:400; font-size:15px; }
.ld__num span{ font-size:11px; color:rgba(255,254,251,.45); }

/* 幕が上へ抜けて、下からヒーローが現れる */
.ld.is-out{ transform:translateY(-100%); transition:transform 1.05s cubic-bezier(.76,0,.24,1) .25s; }
.ld.is-out .ld__in,.ld.is-out .ld__num{ opacity:0; transition:opacity .35s ease; }
.ld.is-done{ display:none; }
/* 初回以外や reduced-motion のときは出さない */
.ld.is-skip{ display:none; }

@keyframes ldUp{ to{ transform:translateY(0); } }
@keyframes ldFailOpen{ to{ transform:translateY(-100%); visibility:hidden; } }

/* ローダー表示中は背後をスクロールさせない */
body.is-loading{ overflow:hidden; }

/* =========================================================
   HEADER
   ========================================================= */
.hd{
  position:fixed; top:0; left:0; width:100%; z-index:60;
  background:rgba(255,254,251,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2); transition:transform .5s var(--ease);
}
.hd.is-hidden{ transform:translateY(-100%); }
.hd__in{
  max-width:1560px; margin:0 auto; padding:0 var(--pad);
  height:72px; display:flex; align-items:center; gap:clamp(16px,3vw,44px);
}
.hd__logo{ width:108px; flex:none; }
/* 中身はインラインSVG（.blogo）。色は currentColor で、a{color:inherit} から --ink を拾う */
.hd__logo .blogo{ width:100%; height:auto; display:block; }
/* **.hd__nav は出力ごと廃止（2026-09-20）。**全幅でハンバーガーに寄せた。
   以下 .hd__nav / .mega の指定は、横並びに戻すときのために残してある。
   いまはマークアップが出ていないので効いていない。 */
.hd__nav{ display:flex; gap:clamp(14px,2vw,30px); margin-left:auto; }
.hd__nav a{ font-size:13px; letter-spacing:.05em; padding:6px 0; position:relative; white-space:nowrap; }
.hd__nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.hd__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* 「衣装・ブーケ」だけ、下にパネルが開く。
   .hd__nav は flex なので、この div がそのまま1項目ぶんの席になる。
   .hd__nav a のスタイルは中の <a> にもそのまま効く（子孫セレクタなので） */
.hd__has{ position:relative; display:flex; }
/* パネルの位置は**カーソルの動きで決める。**
   はじめ right:0 で出していたが、項目がパネルの右端に来るため
   左のカードまで約500px 横移動することになり、途中で外れて閉じた（実測：中心が246pxずれ）。
   項目の真下に中央そろえで出す。移動は「まっすぐ下」で済む。

   left:50% + translateX(-50%) だと狭い幅で画面外へ出るので、
   はみ出す側だけ効く max() / min() で内側に寄せる。
   ヘッダーの左右 padding は var(--pad)。 */
.mega{
  position:absolute; top:100%; left:50%; z-index:1;
  transform:translateX(-50%);
  background:var(--paper); border:1px solid var(--line-2);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
/* **すき間は作らない。**top:100% で項目の下端にぴったり付ける。
   以前は 6px 空けていて、そこを通った瞬間に mouseleave が飛んで閉じ始めていた。
   透明の「橋」を ::before で架ける手もあるが、**橋が項目の上に乗って
   リンクが押せなくなる**（実測：38pxの項目のうち26pxが覆われた）。
   すき間が無ければ橋も要らない。 */
.mega.is-open{ opacity:1; pointer-events:auto; }
.mega.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mega__in{ display:grid; grid-template-columns:repeat(3,190px); gap:1px; background:var(--line-2); }
/* **セレクタは必ず .hd__nav から書くこと。**
   .hd__nav a（0,1,1）は .mega__i（0,1,0）に勝つので、クラス1つだと
   padding も white-space も上書きされる。実際それで
   ・padding が 6px 0 になって写真がカード幅いっぱいに広がり
   ・white-space:nowrap が継承されて説明文が折り返さずはみ出した。
   .ptabs__fig でも同じ取り違えをしている（seo-notes.md 参照）。 */
.hd__nav .mega__i{
  display:block; padding:16px 16px 18px; background:var(--paper);
  white-space:normal; font-size:inherit; letter-spacing:normal;
  transition:background .3s;
}
.hd__nav .mega__i:hover{ background:var(--paper-2); }
/* .hd__nav a の下線アニメーションはパネルの中では邪魔なので消す */
.hd__nav .mega__i::after{ display:none; }
.hd__nav .mega__i figure{ margin:0 0 12px; aspect-ratio:3 / 4; overflow:hidden; background:var(--paper-2); }
.hd__nav .mega__i img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease); }
.hd__nav .mega__i:hover img{ transform:scale(1.05); }
.mega__t{ font-size:13px; letter-spacing:.06em; line-height:1.5; color:var(--ink); }
.mega__t small{
  display:block; margin-top:3px; font-family:var(--latin); font-weight:300;
  font-size:10.5px; letter-spacing:.12em; color:var(--ink-3);
}
.mega__d{ margin-top:8px; font-size:11px; line-height:1.7; color:var(--ink-3); }
/* 外部サイトへ出ることは、アイコンではなく文字で書く */
.mega__ext{
  display:inline-block; margin-left:6px; padding:1px 6px;
  border:1px solid var(--line); font-size:9.5px; letter-spacing:.04em; color:var(--ink-3);
}
.hd__act{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.hd__nav + .hd__act{ margin-left:0; }
/* 3本線ではなく MENU / CLOSE の文字にする。欧文が主役の組みに合う */
.hd__menu{
  display:block; position:relative; z-index:2; flex:none;
  padding:5px 1px 6px;
  font-family:var(--latin); font-weight:300; font-size:12px; letter-spacing:.2em; text-indent:.2em;
}
.hd__menu::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink);
  transform:scaleX(1); transform-origin:left; transition:transform .45s var(--ease);
}
.hd__menu:hover::after{ transform:scaleX(0); transform-origin:right; }
.hd__menu .lbl-close{ display:none; }
body.is-menu .hd__menu .lbl-open{ display:none; }
body.is-menu .hd__menu .lbl-close{ display:inline; }

/* ヘッダーCTAの短縮ラベル（スマホ用） */
.ct-short{ display:none; }

/* ---------- ドロワー ---------- */
/* 背後を覆う幕。ドロワーの1つ下、ヘッダーより下。
   ヘッダー（z:60）は幕の上に残るので、CLOSE はいつでも押せる */
.scrim{
  position:fixed; inset:0; z-index:54; background:rgba(13,12,11,.34);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
body.is-menu .scrim{ opacity:1; visibility:visible; }

/* 右から出るシート。画面の約3/4（2026-09-20 クライアント指示）。
   **幅は vw と px の min。**vw だけだと 2560px のディスプレイで 1900px の
   帯になり、2列の項目が間延びする。

   上端は 0。ヘッダー（半透明・z:60）がシートの上にかぶさる形になり、
   シートが header の下へ滑り込んで見える。**padding-top で 72px を空ける。**
   ここを空けないとロゴの裏に項目が隠れる。 */
.drawer{
  position:fixed; inset:0 0 0 auto; z-index:55; background:var(--paper);
  /* 860px 上限だと 1440px の画面で 60% しか出ず「3/4」にならなかった。
     上限を上げ、**中身は下で max-width＋中央寄せ**にして受ける。
     シートだけ広げて項目を横に引き伸ばすと、1行が540pxの間延びした表になる */
  width:min(76vw,1120px);
  /* **内側の余白は左列が持つ。**右列の写真を端まで出すため、シートは上だけ空ける */
  padding:72px 0 0;
  overflow-y:auto; overscroll-behavior:contain;
  border-left:1px solid var(--line-2);
  visibility:hidden; transform:translateX(100%);
  transition:transform .55s var(--ease), visibility .55s;
}
body.is-menu .drawer{ visibility:visible; transform:none; }
/* ---------- ドロワーの中身 ----------
   左＝行き先、右＝プレビュー写真。**スマホでは右を出さない。**
   375pxで写真と一覧を並べると、どちらも読めない大きさになる。

   **2026-10-04 に作り替えた。**それまでは子項目を枠つきチップで出していて、
   プランの子・ブランドの子・衣装の子・汎用リンクが全部おなじ見た目だった。
   クライアントから「ありきたり／見づらい」。
   参考：TRUNK(HOTEL) CAT STREET。**枠を1つも使わず、
   グループの小見出しと余白だけで階層をつける。** */
.drawer__in{ display:grid; grid-template-columns:1fr; min-height:calc(100dvh - 72px); }
.dcol--main{
  display:flex; flex-direction:column;
  /* 下の余白は控えめに。**1440×900でスクロールを出さない**のが条件。
     ここを48pxにしていたら11pxだけ溢れてスクロールバーが出た */
  padding:clamp(22px,2.6vw,36px) clamp(22px,3.4vw,54px) clamp(24px,2.6vw,32px);
}

/* --- 行き先（グループ） ---
   スマホは1グループずつ積み、グループの中だけ2列。
   1列に積むと18項目で画面3枚ぶんになる */
.dnav{ display:grid; grid-template-columns:1fr; gap:clamp(20px,2.6vw,30px); }
/* **グループの中は1列。**2列にすると親と子が横に並んでしまい、
   「料金プラン」の下に4つのプラン、という関係が読めなくなる。
   スマホでは縦に長くなるが、メニューは縦に送るものなので許容する */
.dgrp{ display:grid; grid-template-columns:1fr; align-content:start; }
.dgrp__en{
  grid-column:1 / -1;
  font-family:var(--latin); font-weight:300; font-size:10px; letter-spacing:.22em;
  color:var(--sand); padding-bottom:9px; margin-bottom:4px;
  border-bottom:1px solid var(--line-2);
}
/* **枠を持たせない。**下線は hover のときだけ、文字の幅ぶんだけ伸ばす */
.dnav__i{ display:flex; align-items:baseline; gap:8px; padding:8px 0; position:relative; }
/* 英字はスマホ専用。PCはグループ見出し（PLAN / ABOUT …）が同じ役目をしている */
.dnav__en{ display:none; }
.dnav__ja{
  font-family:var(--mincho); font-weight:500;
  font-size:15px; letter-spacing:.05em; line-height:1.6; color:var(--ink);
}
.dnav__i i{
  font-style:normal; font-family:var(--latin); font-weight:300;
  font-size:9.5px; letter-spacing:.12em; color:var(--ink-3); white-space:nowrap;
}
.dnav__i::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.dnav__i:hover::after,.dnav__i:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

/* --- 下層の項目 ---
   「料金プラン」の下に4つのプラン、「衣装・ブーケ」の下にドレス・和装・ブーケ、
   「ブランド」の下に3ブランド。**並べただけでは兄弟に見える**ので、
   字下げ＋左の細線でつなぐ（2026-10-04 クライアント指示）。
   線は項目ごとの ::before。上下の padding で箱が接しているため、
   縦に並ぶと**1本の線につながって見える。** */
.dnav__i.is-child{ padding-left:15px; }
.dnav__i.is-child::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--line-2);
}
/* 最後の子は線を文字の高さで止める。**行の下まで引くと宙に浮く。**
   :last-child だけでは足りない。TEAM は「ブランド→3ブランド→撮影チーム」で、
   **CYGNE は最後の子だがグループの最後の行ではない。**
   「次が子でない子」を :has() で拾う（対応していない環境でも :last-child が効く） */
.dnav__i.is-child:last-child::before,
.dnav__i.is-child:not(:has(+ .dnav__i.is-child))::before{ bottom:50%; }
.dnav__i.is-child::after{ left:15px; }
/* **PCでは箱を無かったことにする。**display:contents なら、
   字下げも縦の細線も :has() の判定もこれまでどおり効く（2026-10-06） */
.dnav__kids{ display:contents; }
.dnav__sh{ display:none; }   /* 短い名前はスマホでだけ使う */
.dnav__i.is-child .dnav__ja{ font-size:13.5px; color:var(--ink-2); }
.dnav__i.is-child:hover .dnav__ja,
.dnav__i.is-child:focus-visible .dnav__ja{ color:var(--ink); }

/* --- 汎用リンク。**主項目と同じ形にしない。**小さく、下の帯に沈める --- */
.dsub{
  margin-top:auto; padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:6px clamp(14px,2vw,24px);
}
.dsub a{ font-size:12px; letter-spacing:.04em; color:var(--ink-3); }
.dsub a:hover{ color:var(--ink); }

/* --- 予約の導線 --- */
.drawer__cta{ margin-top:clamp(16px,2vw,22px); display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; }
.drawer__cta .btn{ flex:none; }
.drawer__cta p{ flex:1 1 100%; order:3; font-size:12px; color:var(--ink-3); }
.dcta__ig{ display:inline-flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.06em; color:var(--ink-2); }
.dcta__ig:hover{ color:var(--ink); }
.dcta__ig svg{ width:15px; height:15px; }

/* --- プレビュー写真 --- */
.dside{ display:none; }
.dprev__f img,.dprev__f .csoon{ width:100%; height:100%; object-fit:cover; display:block; }
.dprev__f .csoon{ aspect-ratio:auto !important; }

/* ---------- ドロワー：広い画面 ----------
   ここで初めて2枚組になる。**右列は写真だけ。**余白を作らず端まで出す。 */
@media (min-width:781px){
  .drawer__in{ grid-template-columns:1fr minmax(300px,430px); }
  /* グループは2列×2段。4つとも1画面に収まる（スクロールさせない） */
  .dnav{ grid-template-columns:1fr 1fr; gap:clamp(22px,2.6vw,34px) clamp(26px,3.4vw,54px); }
  /* 広い画面では1行1項目。字と行の高さを一緒に上げる */
  .dgrp{ grid-template-columns:1fr; }
  .dnav__i{ padding:clamp(8px,1vw,11px) 0; }
  .dnav__ja{ font-size:clamp(15px,1.15vw,17px); letter-spacing:.07em; }
  .dnav__i.is-child{ padding-left:18px; }
  .dnav__i.is-child::after{ left:18px; }
  .dnav__i.is-child .dnav__ja{ font-size:clamp(13px,1vw,14.5px); }

  /* **写真は3:2の枠に収める**（2026-10-04 に全面から変更）。
     全面（430×828）にしていたら、手持ちの写真がどれも足りず引き伸ばしになっていた。
     素材の多くが 3:2（800×533・1600×1017・1600×1066）なので、
     **枠を素材の形に合わせる。**切らずに済むぶん、いちばんくっきり出る。
     写真と説明をまとめて、列の中で上下中央に置く */
  .dcol--side{
    position:relative; overflow:hidden; background:var(--paper-2);
    display:flex; align-items:center;
  }
  .dside{ display:block; width:100%; }
  .dprev{ position:relative; width:100%; aspect-ratio:3 / 2; overflow:hidden; background:var(--paper-2); }
  .dprev__f{
    position:absolute; inset:0; margin:0;
    opacity:0; transition:opacity .6s var(--ease);
  }
  .dprev__f.is-on{ opacity:1; }
  /* 説明は写真の下。紙地の上に置くので、グラデも白文字も要らない */
  .dprev__cap{
    padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,28px) 0;
  }
  .dprev__cap b{
    display:block; font-family:var(--mincho); font-weight:500;
    font-size:clamp(15px,1.2vw,17px); letter-spacing:.06em; color:var(--ink);
  }
  .dprev__cap span{
    display:block; margin-top:8px; font-size:12px; line-height:1.9; color:var(--ink-2);
  }
}

/* ---------- ドロワー：中くらいの画面（781〜1199px） ----------
   **写真の列を細くして、左に幅を返す。**
   430px のままだと1024pxの画面で左が347pxしか残らず、
   2列に割ると1マス121px。「ロケーションプラン」「家族だけの結婚式」が
   2行に折り返して、行の高さがバラバラになった */
@media (min-width:781px) and (max-width:1199px){
  .drawer__in{ grid-template-columns:1fr minmax(210px,300px); }
  .dnav{ gap:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px); }
  .dnav__ja{ font-size:14px; letter-spacing:.04em; }
  .dnav__i.is-child .dnav__ja{ font-size:12.5px; }
  .dnav__i{ padding:7px 0; }
  /* 説明は写真の下。全面だったころの「グラデを避ける上余白」は要らない */
  .dprev__cap{ padding:14px 16px 0; }
  .dprev__cap b{ font-size:14px; }
  .dprev__cap span{ margin-top:6px; font-size:11.5px; line-height:1.8; }
}

/* =========================================================
   HERO — 写真は右端へ抜け、罫線がその下へもぐる
   ========================================================= */
.hero{ padding-top:72px; }
/* 切り替わる範囲を面で囲う。下の情報バー（固定）と地の色を変えて、
   「ここまでがスライド」を一目で分からせる */
.hero__in{
  position:relative;
  background:var(--paper-2); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:minmax(300px,40%) 1fr;
  align-items:center; gap:0;
  padding:clamp(40px,6vw,90px) 0 clamp(40px,5vw,70px) var(--pad);
}
/* インジケーターと重ならないよう、コピーの下に余白を確保 */
.hero__copies{ padding-bottom:clamp(46px,5vw,72px); }
/* コピーは同じセルに重ねる。opacityはスライド自身ではなく中身にかける
   （スライドに opacity を持たせると重ね順が閉じて、罫線を写真の下へ送れなくなる） */
.hero__copies{ display:grid; padding-right:clamp(20px,3vw,50px); }
.hcopy{ grid-area:1 / 1; visibility:hidden; pointer-events:none; }
.hcopy.is-on{ visibility:visible; pointer-events:auto; }
.hcopy > *{
  position:relative; z-index:2;
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.hcopy.is-on > *{ opacity:1; transform:none; }
.hcopy.is-on > *:nth-child(1){ transition-delay:.05s }
.hcopy.is-on > *:nth-child(2){ transition-delay:.12s }
.hcopy.is-on > *:nth-child(3){ transition-delay:.19s }
.hcopy.is-on > *:nth-child(4){ transition-delay:.26s }
.hcopy.is-on > *:nth-child(5){ transition-delay:.33s }
/* 罫線だけ写真の下（z:0）、他のコピーは写真の上（z:2） */
.hcopy > .hero__rule{ z-index:0; }

/* h1 の中に span で入れているので block にする（span の既定は inline） */
.hero__en{
  display:block;
  font-family:var(--latin); font-weight:200;
  font-size:clamp(44px,7.4vw,108px); letter-spacing:.05em; line-height:1.02;
}
/* 罫線は画面幅まで伸ばし、写真の下へ消えていく */
/* h1 が既定の余白と太字を持たないように */
.hcopy h1{ margin:0; font-weight:inherit; font-size:inherit; }
.hero__rule{
  display:block; height:1px; background:rgba(28,26,23,.2);
  margin:clamp(22px,2.6vw,34px) 0 clamp(24px,2.8vw,36px);
  width:100vw;
}
.hero__jp{
  display:block;
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(19px,1.9vw,26px); line-height:1.75; letter-spacing:.1em;
}
.hero__lead{ margin-top:20px; font-size:13.5px; line-height:2.05; color:var(--ink-2); }
.hcopy .chev{ margin-top:26px; align-self:start; }

.hero__medias{ position:relative; z-index:1; display:grid; overflow:hidden; }
/* クロスフェードだけだと切り替わりが分かりにくいので、わずかに横へ動かす */
.hmedia{
  grid-area:1 / 1; opacity:0; transform:translateX(3%);
  transition:opacity 1s var(--ease), transform 1.3s var(--ease);
}
.hmedia.is-on{ opacity:1; transform:none; }
.hero__medias video,.hero__medias img{
  width:100%; height:clamp(320px,46vw,620px); object-fit:cover;
}

/* ---------- インジケーター ---------- */
/* 写真の下端に揃えて、左の白場の底に置く（LEXUSのダッシュと同じ位置） */
.hero__nav{
  position:absolute; left:var(--pad); bottom:clamp(40px,5vw,70px); z-index:3;
  /* 左カラム内に収める。写真の下へ潜るとラベルが読めなくなる */
  max-width:calc(40% - var(--pad) - 20px);
  display:flex; align-items:center; gap:clamp(14px,1.9vw,26px); flex-wrap:wrap;
}
/* 何枚目かを明示する。スライダーであること自体を伝えるための表示 */
.hcount{
  display:flex; align-items:baseline; gap:6px; margin-right:6px;
  font-family:var(--latin); font-weight:300; letter-spacing:.1em;
}
.hcount b{ font-weight:400; font-size:15px; }
.hcount span{ font-size:11px; color:var(--ink-3); }

.hdot{ display:flex; align-items:center; gap:10px; }
.hdot i{
  display:block; width:clamp(20px,2.2vw,32px); height:1px;
  background:rgba(28,26,23,.22); position:relative; overflow:hidden;
}
.hdot i b{
  position:absolute; inset:0; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
}
.hdot.is-on i b{ animation:hdotFill var(--hero-dur,6500ms) linear forwards; }
@keyframes hdotFill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.hdot span{
  font-family:var(--latin); font-weight:300; font-size:10px;
  letter-spacing:.1em; white-space:nowrap; color:var(--ink-3); transition:color .4s;
}
.hdot.is-on span{ color:var(--ink); }
.hdot:hover span{ color:var(--ink); }

/* =========================================================
   受付状況（左ラベル＋縦罫線＋リスト）
   ========================================================= */
.notice{ padding:clamp(46px,6vw,84px) var(--pad); }
.notice__in{
  max-width:var(--wrap); margin:0 auto;
  /* また1段に戻った（お知らせがFV下端へ出ていった 2026-10-10）。行の gap は 0 */
  display:grid; grid-template-columns:180px 1fr; gap:0 clamp(24px,4vw,56px);
}
.notice__label{
  font-size:13.5px; font-weight:500; letter-spacing:.08em; padding-top:14px;
}
/* .notice__list（3行のお知らせ）は 2026-10-10 に撤去した。
   トップにしか無かったものがトップから消えたので、規則ごと消している。
   タグの見た目は .hnews__cat が引き継いだ（**2か所に同じ見た目を置かない**）。 */

/* ---------- お知らせの帯（FV下端）2026-10-10 ---------- */
/* **border-top を付けない。**.hero__in が border-bottom を持っているので、
   付けると1pxの線が2本並ぶ。上の線はあちらに任せる */
.hnews{ background:var(--paper); border-bottom:1px solid var(--line); }
.hnews a{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); height:58px;
  display:flex; align-items:center; gap:clamp(12px,1.8vw,24px); font-size:13.5px;
}
.hnews__lb{
  font-family:var(--latin); font-size:10px; letter-spacing:.16em; color:var(--sand); flex:none;
}
/* タグ。**旧 .notice__list em の見た目をそのまま引き継いでいる。**
   名前が可変（カテゴリ名）なので width ではなく min-width */
.hnews__cat{
  flex:none; min-width:64px; padding:0 7px; text-align:center;
  font-style:normal; font-size:10.5px; letter-spacing:.06em; line-height:1.9;
  color:var(--ink-2); border:1px solid var(--line);
}
.hnews__cat.is-now{ background:#7a8b5e; border-color:#7a8b5e; color:#fff; }
/* **1行に収める。**見出しが長い記事でも帯の高さを変えない。
   はみ出しは … で詰める（min-width:0 が無いと flex 子が縮まず ellipsis が効かない） */
.hnews__t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hnews time{
  font-family:var(--latin); font-size:11px; letter-spacing:.08em; color:var(--ink-3); flex:none;
}
.hnews i{
  width:7px; height:7px; flex:none;
  border-top:1px solid var(--ink-3); border-right:1px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .4s var(--ease);
}
.hnews a:hover i{ transform:rotate(45deg) translate(3px,-3px); }

/* ---- 空き状況（2026-10-09 C案）----
   **行が平日／土日祝、列が月。**月をまたいで同じ条件を追えるのが狙い。
   左の縦罫線は .notice__label との段組みの区切り。
   （以前は .notice__list と揃えていたが、あちらは 2026-10-10 に無くなった） */
.notice__slots{ border-left:1px solid var(--line); padding-left:clamp(24px,4vw,56px); }
.slots{
  /* 色はここでまとめて持つ。**3状態の定義が散らないように。**
     どれも「紙色の上に重ねた実効色」で AA（4.5:1）を満たす値を実測で選んでいる——
     ◯ 5.62:1 ／ △ 5.13:1 ／ × 7.14:1。
     **×を薄いグレーにしない。**最初 #b3aca2 で置いたら 2.03:1 しか無く、
     いちばん読んでほしい「満枠」が読めなくなっていた。
     見た目の差は文字色ではなく**塗りの濃さ**で付ける（×は濃いグレーの面）。 */
  --slot-o-bg:rgba(122,139,94,.13);  --slot-o-ink:#54633c;  /* 5.62:1 */
  --slot-a-bg:rgba(217,182,130,.30); --slot-a-ink:#7a5c27;  /* 5.13:1 */
  /* 4段目（2026-10-10 追加）。**赤茶。**--gold / --sand と同じ土系なので浮かない。
     候補3つを測って、**△からいちばん離れる**これにした
     （赤茶 1.270／テラコッタ 1.223／濃い金 1.198）。
     ×との明度差は 1.099 と小さいが、**色相がまったく違う**ので見分けられる */
  --slot-b-bg:rgba(162,86,60,.30);   --slot-b-ink:#7c3a21;  /* 5.51:1 */
  --slot-x-bg:rgba(109,102,94,.24);  --slot-x-ink:#474238;  /* 7.14:1 */

  width:100%; border-collapse:collapse;
  /* **fixed。**自動だと「土日祝」の列だけ広がって月のまとまりが崩れる */
  table-layout:fixed;
}
/* マスの隙間は td の padding で作る。border-spacing は表の外側にも効くので使わない */
.slots td{ padding:0 0 5px; }
.slots td + td,
.slots thead th + th{ padding-left:5px; }
.slots thead th:first-of-type{ padding-left:5px; }
/* 左の見出し列。1行目の最初のセルで幅が決まる（table-layout:fixed） */
.slots thead td:first-child{ width:clamp(46px,5vw,62px); }
.slots thead th{
  padding-bottom:9px; font-size:12.5px; font-weight:500; letter-spacing:.04em; text-align:center;
}
.slots thead small{
  display:block; font-family:var(--latin);
  font-size:9.5px; letter-spacing:.1em; color:var(--sand);
}
.slots tbody th{
  font-size:11.5px; font-weight:400; letter-spacing:.04em; color:var(--ink-2);
  text-align:left; vertical-align:middle; padding:0 0 5px;
}
.slots__c{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:13px 0 11px; border-radius:2px;
}
.slots__c b{ font-size:18px; font-weight:400; line-height:1; }
/* 1マスが214px（1340px幅）あるので、言葉は小さすぎないほうがいい。
   狭くなるSP側で落とす */
.slots__c i{ font-style:normal; font-size:10.5px; letter-spacing:.02em; line-height:1; }
.slots__c.is-o{ background:var(--slot-o-bg); color:var(--slot-o-ink); }
.slots__c.is-a{ background:var(--slot-a-bg); color:var(--slot-a-ink); }
.slots__c.is-b{ background:var(--slot-b-bg); color:var(--slot-b-ink); }
.slots__c.is-x{ background:var(--slot-x-bg); color:var(--slot-x-ink); }
.slots__note{ margin-top:12px; font-size:11.5px; letter-spacing:.03em; color:var(--ink-3); }


/* =========================================================
   月10組限定 — 写真を右端へ抜き、パネルを重ねる
   ========================================================= */
.limit{
  max-width:var(--wrap); margin:0 auto; padding:clamp(46px,6vw,90px) var(--pad);
  display:grid; grid-template-columns:repeat(12,1fr); align-items:center;
}
.limit__fig{ grid-column:5 / -1; grid-row:1; margin-right:calc(50% - 50vw); }
.limit__fig img{ width:100%; height:clamp(280px,34vw,480px); object-fit:cover; }
.limit__panel{
  grid-column:1 / span 6; grid-row:1; position:relative; z-index:2;
  background:var(--paper); padding:clamp(28px,3.2vw,46px);
  border-top:1px solid var(--ink);
}
.limit__en{ font-family:var(--latin); font-weight:300; font-size:11px; letter-spacing:.3em; color:var(--ink-3); }
.limit__num{
  margin-top:14px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(20px,2.2vw,28px); letter-spacing:.06em; line-height:1;
}
.limit__num b{ font-weight:500; font-size:clamp(46px,6vw,84px); letter-spacing:.01em; margin:0 2px; }
.limit__num small{ font-size:14px; color:var(--ink-2); margin-left:6px; }
/* 見出しは大きな数字そのもの。line-height:1 で詰まっているぶん、本文は多めに離す */
.limit__lead{ margin-top:26px; font-size:13.5px; line-height:2.05; color:var(--ink-2); }
.limit__note{ margin-top:14px; font-size:12px; line-height:1.95; color:var(--ink-3); }
.limit .chev{ margin-top:22px; }

/* =========================================================
   EXPERIENCE — コンセプトメッセージ＋体験の3点
   ========================================================= */
.exp{ background:var(--paper-2); padding:clamp(50px,7vw,100px) var(--pad); }
.exp__msg{
  max-width:var(--wrap); margin:0 auto clamp(40px,5.4vw,72px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(30px,5vw,80px); align-items:start;
}
.exp__label{
  font-family:var(--latin); font-weight:300; font-size:11px; letter-spacing:.26em;
  color:var(--ink-3); white-space:nowrap; padding-top:6px;
}
.exp__poem{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(15px,1.7vw,21px); line-height:2.4; letter-spacing:.1em;
  padding-left:clamp(18px,2.4vw,34px); border-left:1px solid var(--line);
}
.exp__poem strong{ font-weight:500; position:relative; }
.exp__poem strong::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--sand);
}
.exp__lead{
  grid-column:2; font-size:13.5px; line-height:2.1; color:var(--ink-2);
  margin-top:clamp(22px,2.6vw,32px); padding-left:clamp(18px,2.4vw,34px); max-width:760px;
}
.exp__list{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px);
}
/* 4つ目（ISUM）が出るときだけ4列。テンプレが data-n で枚数を渡す。
   **写真の高さも下げる。**列が狭くなるのに高さが同じだと、
   3:2で書き出してある絵が左右に深く切られる。
   1280pxで列幅291px、高さ205pxなら約1.42。
   3列のとき（400/270＝1.48）とほぼ同じ切り方で揃う。 */
.exp__list[data-n="4"]{ grid-template-columns:repeat(4,1fr); }
.exp__list[data-n="4"] .exp__item img{ height:clamp(150px,16vw,205px); }
.exp__item figure{ overflow:hidden; }
.exp__item img{ width:100%; height:clamp(190px,22vw,270px); object-fit:cover; transition:transform 1.2s var(--ease); }
.exp__item:hover img{ transform:scale(1.04); }
.exp__item h3{
  margin-top:20px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(16px,1.6vw,19px); letter-spacing:.06em; line-height:1.7; text-wrap:balance;
}
.exp__item p{ margin-top:12px; font-size:13px; line-height:2; color:var(--ink-2); }

/* =========================================================
   The MOMENT Standard — 全面写真の上に数字を置く
   ========================================================= */
.std{ position:relative; padding:clamp(56px,8vw,110px) var(--pad); color:var(--paper); overflow:hidden; }
.std__bg{ position:absolute; inset:0; background:var(--ink); }
.std__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; opacity:.55; }
/* 数字が写真の被写体に重なるので、中間帯のスクリムを少し濃くして可読性を確保 */
.std__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,.55) 0%,rgba(20,18,15,.44) 38%,rgba(20,18,15,.48) 62%,rgba(20,18,15,.66) 100%);
}
/* 見出しと、カードの下に置く「詳しく」。
   **「詳しく」はカードの中に入れない。**6枚の高さを .std__go{margin-top:auto} で
   揃えているので、7枚目の扱いにすると列の高さが崩れる（2026-10-05）。

   **position:relative が要る。**
   この節は .std__bg（position:absolute）で全面に写真を敷いている。
   静的配置のままだと、絶対配置の背景のほうが後に描かれて**文字が写真の下になる。**
   .std__grid が relative を持っているのは同じ理由。
   2026-10-05、見出し（THE MOMENT STANDARD／6つの理由）と「詳しく」が
   PC・スマホとも写真に隠れて見えていなかったのを修正。
   **この節に要素を足すときは position を持たせること。** */
.std .shead,
.std__more{ position:relative; max-width:var(--wrap); margin:clamp(22px,2.6vw,34px) auto 0; }

.std__grid{ position:relative; }
.std__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-light); border-left:1px solid var(--line-light);
}
/* リンクを下端で揃えたいので縦フレックス。注記の長さは項目ごとに違う */
.std__item{
  padding:clamp(24px,2.8vw,38px);
  border-right:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
  display:flex; flex-direction:column;
}
.std__cat{
  font-family:var(--latin); font-weight:300; font-size:11.5px;
  letter-spacing:.22em; color:rgba(255,254,251,.6);
}
.std__label{ margin-top:16px; font-size:13px; color:rgba(255,254,251,.78); letter-spacing:.06em; }
.std__num{
  margin-top:2px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(40px,5vw,64px); line-height:1.15; letter-spacing:.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.std__num small{ font-family:var(--gothic); font-weight:400; font-size:15px; letter-spacing:.04em; margin-left:4px; }
.std__num small:first-child{ margin:0 6px 0 0; }
.std__note{ margin-top:10px; font-size:12px; color:rgba(255,254,251,.6); line-height:1.8; }
/* margin-top:auto で、注記が何行でもリンクはカード下端に揃う。
   ボタンにはしない。写真の上の静かな面を壊さず、行き先だけ示す */
.std__go{
  margin-top:auto; padding-top:22px; align-self:start;
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; letter-spacing:.06em; line-height:1.5;
  color:rgba(255,254,251,.62); transition:color .35s;
}
.std__go::after{
  content:""; width:16px; height:1px; background:currentColor;
  transition:width .35s;
}
.std__go:hover{ color:var(--paper); }
.std__go:hover::after{ width:26px; }
/* 出典。go と同じ枠に置く（両方は出さない）。
   **.std__note より小さく・薄くしないこと。** 母数と出典と時点は、
   強調している数字の根拠にあたる表示なので、読めることが要件になる。 */
.std__src{
  margin-top:auto; padding-top:22px;
  font-size:12px; letter-spacing:.02em; line-height:1.7;
  color:rgba(255,254,251,.72);
}

/* FAQの「詳しく」リンク。以前は inc/faq.php 側にインラインで書いていた */
.faq__more{ margin-top:10px; }

/* 明色のセクション見出し */
.shead--light{ border-bottom-color:var(--line-light); }
.shead--light .shead__jp{ color:rgba(255,254,251,.75); }
.shead--light .shead__note{ color:rgba(255,254,251,.6); }

/* =========================================================
   FILM — 映像を全面で
   ========================================================= */
.film{ background:var(--ink); color:var(--paper); padding:0 0 clamp(50px,7vw,90px); }
.film__media{ position:relative; }
.film__media video{ width:100%; height:clamp(300px,52vw,700px); object-fit:cover; display:block; }
.film__copy{ max-width:var(--wrap); margin:clamp(34px,4.4vw,60px) auto 0; padding:0 var(--pad); }
.film__h{
  margin-top:14px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(20px,2.6vw,34px); letter-spacing:.09em; line-height:1.65;
}
.film__lead{ margin-top:18px; font-size:13.5px; line-height:2.05; color:rgba(255,254,251,.72); }
.film__meta{ margin-top:16px; font-size:11.5px; color:rgba(255,254,251,.5); }

/* =========================================================
   全面写真のブレイク
   ========================================================= */
.break{ position:relative; }
.break img{ width:100%; height:clamp(220px,34vw,460px); object-fit:cover; display:block; }
.break__cap{
  position:absolute; left:var(--pad); bottom:clamp(16px,2.4vw,28px);
  font-size:11.5px; letter-spacing:.06em; color:#fff;
  text-shadow:0 1px 16px rgba(0,0,0,.6);
}

/* =========================================================
   ロケーション人前式 — 暗い面で情緒を持たせる
   ========================================================= */
.cere{ background:var(--ink); color:var(--paper); padding:0 0 clamp(56px,7vw,100px); }
.cere__hero{ height:clamp(240px,38vw,520px); overflow:hidden; }
.cere__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.cere__in{
  max-width:var(--wrap); margin:clamp(40px,5vw,70px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(30px,4vw,60px);
}
.cere__copy{ grid-column:1 / span 5; min-width:0; }   /* 中に表が入っても列を押し広げない */
.cere__en{ font-family:var(--latin); font-weight:300; font-size:11px; letter-spacing:.3em; color:rgba(255,254,251,.55); }
.cere__h{
  margin-top:16px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(21px,2.8vw,36px); letter-spacing:.08em; line-height:1.6;
}
.cere__lead{ margin-top:20px; font-size:13.5px; line-height:2.1; color:rgba(255,254,251,.76); }
.cere__lead strong{ font-weight:500; color:var(--paper); }
.cere__pts{ margin-top:clamp(28px,3.4vw,42px); border-top:1px solid var(--line-light); }
.cere__pts li{ padding:18px 0; border-bottom:1px solid var(--line-light); display:grid; grid-template-columns:auto 1fr; gap:4px 16px; }
.cere__pts em{
  grid-row:1 / span 2; font-family:var(--latin); font-style:normal; font-weight:300;
  font-size:11px; letter-spacing:.18em; color:rgba(255,254,251,.5); padding-top:5px;
}
.cere__pts span{ font-family:var(--mincho); font-weight:500; font-size:15.5px; letter-spacing:.06em; }
.cere__pts small{ font-size:12px; line-height:1.95; color:rgba(255,254,251,.6); }
.cere__note{ margin-top:20px; font-size:11.5px; line-height:1.95; color:rgba(255,254,251,.5); }
.cere__copy .chev{ margin-top:20px; }
.cere__grid{
  grid-column:7 / -1; align-self:start;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,18px);
}
.cere__grid figure{ overflow:hidden; }
.cere__grid img{ width:100%; height:clamp(130px,15vw,200px); object-fit:cover; transition:transform 1.1s var(--ease); }
.cere__grid figure:hover img{ transform:scale(1.05); }
.cere__grid figcaption{ margin-top:9px; font-size:11.5px; color:rgba(255,254,251,.55); letter-spacing:.04em; }

/* =========================================================
   飛島（夏限定）— 明るい面で「遠征」感を出す
   ========================================================= */
.isl{ padding:0 0 clamp(50px,7vw,90px); }
/* 高さは箱側で持つ。動画も poster も object-fit:cover で埋める */
.isl__hero{ position:relative; height:clamp(240px,40vw,540px); overflow:hidden; }
.isl__hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(20,18,15,.34) 0%,rgba(20,18,15,0) 45%,rgba(20,18,15,.40) 100%);
}
/* ---------- 背景動画（飛島・人前式で共通） ----------
   親が高さを持ち、動画は cover でそれを埋める */
.bgvideo{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none;
}
.isl__label{ position:absolute; left:var(--pad); bottom:clamp(20px,2.8vw,34px); z-index:2; color:#fff; }
.isl__badge{
  display:inline-block; font-family:var(--latin); font-weight:300;
  font-size:11px; letter-spacing:.18em; padding:6px 14px;
  border:1px solid rgba(255,255,255,.6);
}
.isl__en{
  margin-top:14px; font-family:var(--latin); font-weight:200;
  font-size:clamp(24px,4.2vw,58px); letter-spacing:.1em; line-height:1;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.isl__in{
  max-width:var(--wrap); margin:clamp(38px,4.6vw,64px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(30px,4vw,56px);
}
.isl__copy{ grid-column:1 / span 5; }
.isl__h{
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(21px,2.8vw,36px); letter-spacing:.09em; line-height:1.6;
}
.isl__lead{ margin-top:20px; font-size:13.5px; line-height:2.1; color:var(--ink-2); }
.isl__lead strong{ font-weight:700; color:var(--ink); }
.isl__data{ margin-top:clamp(24px,3vw,36px); border-top:1px solid var(--line); }
.isl__data > div{ display:flex; gap:20px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.isl__data dt{ font-size:12px; color:var(--ink-3); width:74px; flex:none; padding-top:2px; }
.isl__data dd{ margin:0; font-size:13.5px; }
.isl__copy .chev{ margin-top:22px; }
.isl__grid{
  grid-column:7 / -1; align-self:start;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,16px);
}
.isl__grid figure{ overflow:hidden; }
.isl__g1{ grid-column:1 / -1; }
.isl__grid img{ width:100%; height:clamp(120px,14vw,190px); object-fit:cover; transition:transform 1.1s var(--ease); }
.isl__g1 img{ height:clamp(160px,19vw,250px); }
.isl__grid figure:hover img{ transform:scale(1.05); }

/* 一般化のメッセージ */
.isl__ask{
  max-width:var(--wrap); margin:clamp(44px,5.6vw,80px) auto 0; padding:clamp(28px,3.4vw,44px) var(--pad) 0;
  border-top:1px solid var(--line);
}
.isl__ask-h{
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(19px,2.4vw,30px); letter-spacing:.08em; line-height:1.6;
}
.isl__ask-t{ margin-top:16px; font-size:13.5px; line-height:2.1; color:var(--ink-2); max-width:720px; }

/* =========================================================
   衣装 — 横スクロールの帯
   ========================================================= */
.cos{ padding:clamp(50px,7vw,100px) var(--pad) clamp(56px,7vw,100px); }
.cos__row{ max-width:var(--wrap); margin:0 auto clamp(34px,4.4vw,56px); }
.cos__head{ display:flex; align-items:baseline; gap:18px; margin-bottom:16px; }
.cos__en{ font-family:var(--latin); font-weight:300; font-size:clamp(17px,2vw,24px); letter-spacing:.1em; }
.cos__t{ font-size:12.5px; color:var(--ink-2); flex:1; }
/* 端まで抜けさせて「まだ続く」感を出す */
.strip{
  display:flex; gap:clamp(8px,1.2vw,16px);
  overflow-x:auto; scroll-snap-type:x proximity;
  margin-right:calc(50% - 50vw); padding-bottom:6px;
  scrollbar-width:thin;
}
.strip figure{ flex:none; width:clamp(150px,17vw,238px); scroll-snap-align:start; overflow:hidden; }
.strip img{ width:100%; height:clamp(210px,24vw,330px); object-fit:cover; transition:transform 1.1s var(--ease); }
.strip figure:hover img{ transform:scale(1.05); }
.cos__note{ max-width:var(--wrap); margin:0 auto; font-size:12px; color:var(--ink-3); }

/* =========================================================
   プランごとの写真バンド
   ========================================================= */

/* =========================================================
   ONE TEAM — 写真が左端へ抜け、パネルが重なる
   ========================================================= */
.team{ background:var(--paper-2); padding:clamp(50px,7vw,100px) var(--pad); }
/* 中身の幅を .limit と揃える。
   .limit は max-width:var(--wrap) の内側に var(--pad) を持つので、実際の中身は wrap - pad*2。
   こちらは外側の .team が余白を持っているため、max-width を同じ分だけ縮めて合わせる。
   ※ 写真の食い込み（margin:calc(50% - 50vw)）が外側の余白を前提に計算しているので、
     余白の位置は動かさないこと。動かすと右にはみ出す。 */
.team__in{
  max-width:calc(var(--wrap) - var(--pad) * 2); margin:0 auto;
  display:grid; grid-template-columns:repeat(12,1fr); align-items:center;
}
.team__fig{ grid-column:1 / span 7; grid-row:1; margin-left:calc(50% - 50vw); }
.team__fig img{ width:100%; height:clamp(300px,36vw,500px); object-fit:cover; }
.team__panel{
  grid-column:7 / -1; grid-row:1; position:relative; z-index:2;
  background:var(--paper); padding:clamp(28px,3.2vw,46px);
}
.team__h{
  margin-top:16px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(19px,2.2vw,28px); letter-spacing:.08em;
}
.team__lead{ margin-top:18px; font-size:13.5px; line-height:2.05; color:var(--ink-2); }
.team__list{ margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.team__list li{ background:var(--paper); }
/* マスいっぱいをリンクにする。padding は a 側が持つ */
.team__list a{ display:block; padding:16px 12px; text-align:center; transition:background .4s var(--ease); }
.team__list a:hover{ background:var(--paper-2); }
.team__list a:hover .blogo{ opacity:.72; }
.team__list .blogo{ transition:opacity .4s var(--ease); }
/* ロゴが入る枠。**高さを決めて、中で上下中央に置く。**
   3つのロゴは縦横比が違う（CYGNEは白鳥のマークのぶん縦長）ので、
   幅だけ揃えると下の役職名の位置が1つずつずれる */
.team__list em{
  display:flex; align-items:center; justify-content:center; height:26px;
  font-family:var(--latin); font-style:normal; font-weight:300;
  font-size:13px; letter-spacing:.12em;
}
.team__list em .blogo{ width:min(100%,112px); }
.team__list span{ display:block; margin-top:6px; font-size:11px; color:var(--ink-3); }
/* 3ブランドが同一法人であることの一文。ブランド一覧の直後に、
   罫線を挟まず続けて置く（別の話題ではなく、上の表の読み方だから） */
.team__same{ margin-top:12px; font-size:12px; line-height:1.9; color:var(--ink-2); }
/* **ここは埋もれさせない。**値段の注記だったころは最も薄くてよかったが、
   いまは質の根拠を置く場所なので、本文（.team__same）と同じ濃さにする */
.team__foot{ margin-top:20px; font-size:12px; line-height:1.95; color:var(--ink-2); }
/* 和装まわりの注釈。言い訳に見えないよう、罫線で区切って独立させる */
.team__note{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);
  font-size:11.5px; line-height:1.95; color:var(--ink-2);
}

/* =========================================================
   料金プラン — 4カテゴリ × 4タイプの比較表
   ========================================================= */
.price{ background:var(--paper-2); padding:clamp(50px,7vw,100px) var(--pad) clamp(56px,7vw,100px); }
/* **white-space:nowrap にしないこと。**土日祝の追加料金を書き足して
   文言が長くなった（2026-08-12）ため、nowrap のままだと 1080px 付近で
   横710pxまで伸びて .shead からはみ出す。html{overflow-x:clip} に
   隠れて気づきにくいが、画面上は文字が切れている。 */
.pbadge{
  font-size:12.5px; letter-spacing:.06em; color:var(--ink-2);
  border:1px solid var(--line); background:var(--paper); padding:9px 18px;
  line-height:1.7;
}
.pbadge strong{ font-weight:700; color:var(--ink); }

/* ---------- カテゴリタブ ---------- */
/* カテゴリのタブ（.ptabs）と見出し写真（.pfig）は 2026-08-16 に廃止。
   カテゴリの切り替えは、この下の .psw ひとつに集約した。
   タブ＋写真＋切り替えの3段は、同じことを2回言っていて背が高すぎた。
   ※ .pfig は /plan/ と トップの料金プランでのみ使っていたクラスなので、
     いっしょに撤去した。写真そのものは assets/img/plan/ に残っている。 */

/* ---------- 写真の下のカテゴリ切り替え ----------
   上のタブと同じものを、写真と料金表のあいだにもう一組。
   表を読んだあと、上まで戻らずに隣のカテゴリへ移れるようにするため。
   タブと同じ見た目にはしない。**主役は上のタブ**で、こちらは道具。
   罫線1本の帯にして、選択中だけ地を反転させる。 */
.psw{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-bottom:0;
  margin-bottom:clamp(18px,2.2vw,28px);
}
.psw__btn{
  padding:11px 6px; border:0; border-left:1px solid var(--line);
  background:var(--paper); cursor:pointer; text-align:center;
  transition:background .3s, color .3s;
}
.psw__btn:first-child{ border-left:0; }
.psw__btn em{
  display:block; font-family:var(--latin); font-style:normal; font-weight:300;
  font-size:11px; letter-spacing:.12em; color:var(--ink-2); transition:color .3s;
}
.psw__btn span{ display:block; margin-top:2px; font-size:10.5px; color:var(--ink-3); transition:color .3s; }
.psw__btn:hover{ background:var(--paper-2); }

/* ---------- 写真つきのとき（.psw--fig） ----------
   写真を出すと、黒ベタで選択を示す従来のやり方が使えない。
   ベタの上に写真が乗ると、選択中のマスだけ写真が暗い枠に沈んで見える。
   **選択は「太い枠で囲う」に変える**（2026-08-21 クライアント指示）。

   枠は border ではなく inset の box-shadow。
   border を太くすると、そのマスだけ内容量が変わって**4マスの高さがずれる**。
   box-shadow なら場所を取らないので、押しても何も動かない。 */
/* 下も左右と同じ余白にする。**0 にすると写真が枠に触れて、
   下辺だけ余白が無い不揃いな囲みになる**（2026-08-21 クライアント指摘）。 */
.psw--fig .psw__btn{ padding:12px 8px 8px; position:relative; }
.psw__btn img{
  display:block; width:100%; margin-top:10px;
  aspect-ratio:4 / 3; object-fit:cover;
  /* 選ばれていないマスは写真を控えめに。並んだときに「いまここ」が一目で分かる */
  opacity:.45; filter:grayscale(.35);
  transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.psw--fig .psw__btn:hover img{ opacity:.75; filter:grayscale(.15); }
.psw--fig .psw__btn.is-on img{ opacity:1; filter:none; }

/* 選択中。写真まで含めてマス全体を囲う。

   **box-shadow ではなく疑似要素。**
   inset の box-shadow は「背景の上・中身の下」に描かれる。
   写真がマスの下端まで届いているので、**下辺の線が写真の裏に隠れて見えなかった**
   （2026-08-21 クライアント指摘）。左右と上は余白の上に出るので見えていて、
   下だけ欠けた枠になっていた。

   絶対配置の疑似要素なら、通常フローの写真より後に描かれる＝**線が写真の上に乗る。**
   pointer-events:none を付けて、クリックを奪わないようにする。 */
.psw--fig .psw__btn.is-on{ background:var(--paper); }
.psw--fig .psw__btn.is-on::after{
  content:''; position:absolute; inset:0; box-sizing:border-box;
  border:2px solid var(--gold);
  pointer-events:none;
}
.psw--fig .psw__btn.is-on em{ color:var(--ink); }
.psw--fig .psw__btn.is-on span{ color:var(--ink-2); }

/* 写真が無いとき（4枚そろうまで）は、これまでどおり黒ベタ */
.psw:not(.psw--fig) .psw__btn.is-on{ background:var(--ink); }
.psw:not(.psw--fig) .psw__btn.is-on em{ color:var(--paper); }
.psw:not(.psw--fig) .psw__btn.is-on span{ color:rgba(255,254,251,.65); }
/* 4マスを横並びのまま保つ。狭い幅では「オーダーメイド」（7字）だけが
   折り返して、そのマスだけ2行になる。実測で 375px では 9.5px・字送り0にすれば
   1行に収まる（マス83px − 余白12px = 71px に対して約66px）。
   320px はさすがに入らないので折り返させる。縦積みにはしない ——
   4つ並んでいることが見えているほうが、切り替えだと分かる。 */
@media (max-width:430px){
  .psw__btn{ padding:10px 3px; }
  .psw--fig .psw__btn{ padding:9px 4px 4px; }
  .psw__btn em{ font-size:10px; letter-spacing:.06em; }
  .psw__btn span{ font-size:9.5px; letter-spacing:0; }
  .psw__btn img{ margin-top:7px; }
  /* 枠は細くする。90px幅のマスに2pxは太すぎて、中身が窮屈に見える */
  .psw--fig .psw__btn.is-on::after{ border-width:1.5px; }
}

/* ---------- パネル ----------
   重ねる方式（グリッドで同じマスに置く）は一度やって戻した。
   器がいちばん高いパネルに揃うので、**短いカテゴリで最大192pxの空白**が出た（実測・390px幅）。
   高さを揃えるのではなく、**高さの変化をアニメーションさせる**ことにした。
   カクッと飛ぶのが問題だったので、滑らかに変われば用は足りる。
   高さは JS が測って入れる（is-anim のあいだだけ）。 */
.ppanels{
  max-width:var(--wrap); margin:0 auto;
  /* **切り替えで画面が勝手に下へ動くのを止める。**（2026-08-21）
     パネルの高さはカテゴリで最大192px違う（430px幅で実測）。
     高さが変わると Chrome の「スクロールアンカリング」が働き、
     画面内の位置を保とうとして**勝手に scrollTop を動かす。**
     しかもここは450msかけて高さを変えるので、そのあいだ何度も補正が入り、
     効いたり効かなかったりする——「たまに飛ぶ」の正体。
     この箱の中の大きさの変化は補正しなくてよい、と明示する。 */
  overflow-anchor:none;
}
.ppanel{ display:none; }
.ppanel.is-on{ display:block; }
/* パネル先頭のリード文（現状はMIXのみ。「両方を1日で撮る」の説明） */
.ppanel__lead{ margin:18px 2px 14px; font-size:13.5px; line-height:2; color:var(--ink-2); }
.ppanel__lead strong{ color:var(--ink); font-weight:700; }
/* 縮むあいだ中身がはみ出すので隠す。横スクロールは内側の .ptable-wrap が持っているので影響しない */
.ppanels.is-anim{ overflow:hidden; transition:height .45s var(--ease); }

/* ---------- 比較表 ---------- */
/* 横幅のきまり（2026-10-04 に5箇所を揃えた）
   ------------------------------------------------------------------
   節には2つの型がある。

   A) 全幅の節（.price / .opt / .gallery / .flow / .exp など）
      自分は幅を持たず `padding:… var(--pad)` だけ。
      **中のブロックが `max-width:var(--wrap); margin-inline:auto` を持つ。**
   B) 自分で幅を持つ節（.mplace / .cinc / .cnote など）
      `max-width:var(--full)` ＋ `padding:… var(--pad)`。中身は何もしなくてよい。

   A の中のブロックが max-width を書き忘れると、**その節だけ左右8px広くなる**
   （1440px幅で L80/W1280 のところが L72/W1296 になる）。
   .shead は持っていたので、**同じ節の中で見出しと中身の左端がずれていた。**
   ------------------------------------------------------------------ */
.ptable-wrap{ max-width:var(--wrap); margin-left:auto; margin-right:auto; overflow-x:auto; background:var(--paper); border:1px solid var(--line); }
.ptable{ width:100%; border-collapse:collapse; font-size:13px; }
.ptable th,.ptable td{
  border-bottom:1px solid var(--line-2); border-left:1px solid var(--line-2);
  padding:14px 12px; text-align:center; vertical-align:middle; line-height:1.7;
}
.ptable thead th{
  border-bottom:1px solid var(--line); padding:20px 12px 18px; vertical-align:bottom;
}
.ptable__rh,.ptable tbody th{
  border-left:0; text-align:left; white-space:nowrap;
  font-weight:400; font-size:12px; color:var(--ink-2); background:var(--paper-2);
  min-width:104px;
}
.ptable__name{
  display:block; font-family:var(--latin); font-weight:300;
  font-size:15px; letter-spacing:.1em; line-height:1.5;
}
.ptable__price{
  display:block; margin-top:10px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(19px,2vw,26px); letter-spacing:.01em;
}
.ptable__rec{
  display:inline-block; margin-bottom:8px; font-size:10.5px; letter-spacing:.1em;
  background:var(--ink); color:var(--paper); padding:3px 12px;
}
/* 土日祝の追加料金の行。
   価格（thead）のすぐ下に置き、**他の行より小さくしない。**
   加算は価格表示の条件なので、脚注の大きさに落とすと打消し表示になる。
   数値は他の行の文字より少し強くして、金額だと分かるようにする。 */
.ptable__wk th,.ptable__wk td{ border-bottom:1px solid var(--line); }
.ptable__wk td{ font-family:var(--mincho); font-weight:500; font-size:15px; color:var(--ink); }
.ptable__wk th sup{ font-size:9px; vertical-align:super; margin-left:2px; color:var(--ink-3); }

/* おすすめ列を通しで強調 */
.ptable th.is-rec,.ptable td.is-rec{ background:#fbf8f1; }
.ptable thead th.is-rec{ background:#f5efe2; }
.ptable .yes{ color:var(--ink); font-size:15px; }
.ptable .tri{ color:var(--ink-2); font-size:15px; }
.ptable .no{ color:var(--ink-3); }

/* ---------- 含まれるもの ---------- */
.inc{ max-width:var(--wrap); margin:clamp(22px,2.6vw,32px) auto 0; background:var(--paper); border:1px solid var(--line); padding:clamp(22px,2.6vw,32px); }
.inc__t{
  font-size:14px; font-weight:500; letter-spacing:.08em;
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.inc__t span{
  font-family:var(--latin); font-weight:300; font-size:11px; letter-spacing:.14em;
  color:var(--ink-3); border:1px solid var(--line); padding:3px 10px;
}
/* 項目数が列数で割り切れないので、余ったセルが穴に見えないよう罫線は各セルに持たせる */
.inc__list{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2); border-left:1px solid var(--line-2);
}
.inc__list li{
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  padding:14px 14px 14px 34px; font-size:12.5px; position:relative; line-height:1.7;
}
.inc__list li::before{
  content:""; position:absolute; left:14px; top:21px;
  width:9px; height:5px; border-left:1.5px solid var(--sand); border-bottom:1.5px solid var(--sand);
  transform:rotate(-45deg);
}
.inc__list sup{ font-size:9px; color:var(--ink-3); }

.price__foot{
  max-width:var(--wrap); margin:clamp(28px,3.4vw,44px) auto 0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.price__notes{ font-size:11.5px; color:var(--ink-3); line-height:1.9; max-width:640px; }
.price__act{ display:flex; align-items:center; gap:24px; }

/* =========================================================
   オプション
   ========================================================= */
.opt{ padding:clamp(50px,7vw,100px) var(--pad); }
.opt__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px);
}
.opt__group h3{
  font-family:var(--mincho); font-weight:500; font-size:15px; letter-spacing:.1em;
  padding-bottom:12px; border-bottom:1px solid var(--ink); margin-bottom:4px;
}
.opt__group h3 + dl + h3{ margin-top:34px; }
.opt__group dl > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--line-2);
}
.opt__group dt{ font-size:12.5px; }
.opt__group dd{ margin:0; font-family:var(--mincho); font-size:15px; white-space:nowrap; }
.opt__group dd small{ font-family:var(--gothic); font-size:10.5px; color:var(--ink-3); margin-left:4px; }
/* 表の下の注記（2026-10-10）。行の dd には入れられない
   （dd は white-space:nowrap で、3列の列幅を超える） */
.opt__note{
  max-width:var(--wrap); margin:clamp(20px,2.4vw,30px) auto 0;
  font-size:11.5px; line-height:1.95; letter-spacing:.03em; color:var(--ink-2);
}
.opt__note strong{ font-weight:700; color:var(--ink); }

/* =========================================================
   ロケーションのジャンル
   ========================================================= */
.genres{ max-width:var(--wrap); margin:clamp(46px,6vw,80px) auto 0; border-top:1px solid var(--line); padding-top:clamp(28px,3.4vw,44px); }
.genres__t{ font-size:14px; font-weight:500; letter-spacing:.08em; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.genres__t span{ font-size:11.5px; font-weight:400; color:var(--ink-3); letter-spacing:.04em; }
.genres__list{
  margin-top:22px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:clamp(8px,1.1vw,14px);
}
.genres__list li{ position:relative; overflow:hidden; }
.genres__list img{
  width:100%; height:clamp(150px,13vw,190px); object-fit:cover; display:block;
  transition:transform 1.1s var(--ease);
}
.genres__list li::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,0) 42%,rgba(20,18,15,.72) 100%);
}
.genres__list li:hover img{ transform:scale(1.06); }
.genres__list em,.genres__list span{ position:relative; z-index:2; color:#fff; display:block; }
.genres__list em{
  position:absolute; left:11px; bottom:26px;
  font-family:var(--latin); font-style:normal; font-weight:300;
  font-size:11px; letter-spacing:.12em; opacity:.82;
}
.genres__list span{
  position:absolute; left:11px; bottom:9px;
  font-size:12.5px; letter-spacing:.06em;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.genres__note{ margin-top:18px; font-size:11.5px; color:var(--ink-3); line-height:1.9; }

/* =========================================================
   撮影エリア（トップ）
   ・トップの本文に県名が1つも無かったので新設した。
     h1に地名を並べるのは隠しテキストへのキーワード詰め込みになるが、
     見えるリンクとして置くぶんには何の問題もなく、しかも各県ページへ
     内部リンクが集まるので、そちらのほうが実際に効く。
   ・1行が短いので、隙間1pxで罫線を作る手法で問題ない。
     会食のコース（背の高いカード）で失敗したのとは条件が違う。
   ========================================================= */
.areanav{ padding:clamp(50px,7vw,100px) var(--pad); background:var(--paper-2); }
.areanav__list{
  max-width:var(--wrap); margin:0 auto; list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
/* 写真を左、文字を右。
   **比率は 4:3 で固定する。** 一度は行の高さいっぱいに伸ばしてみたが、
   説明文の折り返し行数で行の高さが変わるため、幅によって写真が縦長になった
   （実測：900pxで 117x149、320pxで 116x174）。素材は横長なので、
   縦長に切ると人物が左右で切れる。比率を固定して、そのぶん寸法を上げるほうがよい。
   写真が無い県は figure ごと出ないので、そのときは
   .areanav__body:first-child が左の余白を補う。 */
.areanav__list a{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(16px,1.8vw,24px);
  height:100%; background:var(--paper);
  /* 余白は a が持つ。**写真の左にも余白が要る。**
     以前は写真を端まで抜く設計だったので a の余白をゼロにして
     .areanav__body 側に持たせていたが、4:3中央寄せに変えたときに
     写真だけが枠に貼りつく状態が残っていた */
  padding:clamp(16px,1.8vw,22px) clamp(20px,2.2vw,28px);
  transition:background .5s var(--ease);
}
.areanav__list a:hover{ background:var(--paper-2); }
.areanav__fig{
  margin:0; overflow:hidden; align-self:center;
  width:clamp(104px,13vw,168px); aspect-ratio:4 / 3;
}
/* 事例の写真は顔が上寄りのものが多いので、切る位置を中央より上に取る。
   .wcard img と同じ理由・同じ値（根拠は docs/seo-notes.md の顔の見切れ調査）。 */
.areanav__fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:50% 12%;
  transition:transform 1.1s var(--ease);
}
.areanav__list a:hover .areanav__fig img{ transform:scale(1.05); }
.areanav__body{ display:block; min-width:0; align-self:center; }
.areanav__body em{
  display:block; font-style:normal;
  font-family:var(--latin); font-weight:300; font-size:10px;
  letter-spacing:.24em; color:var(--ink-3);
}
.areanav__body b{
  display:block; margin-top:6px;
  font-family:var(--mincho); font-weight:500; font-size:17px; letter-spacing:.08em;
}
.areanav__body > span{
  display:block; margin-top:6px;
  font-size:12.5px; line-height:1.95; color:var(--ink-2);
}
/* 7県を2列に並べると最後の1つが余り、右側に下地の色がむき出しの枡ができる。
   最後の項目を2列ぶんに伸ばして塞ぐ（列数が奇数のときだけ効く） */
.areanav__list > li:last-child:nth-child(odd){ grid-column:1 / -1; }
.areanav__note{
  max-width:var(--wrap); margin:clamp(22px,2.6vw,30px) auto 0;
  font-size:12.5px; line-height:2.05; color:var(--ink-2);
}
.areanav__note strong{ color:var(--ink); }
.areanav__act{ max-width:var(--wrap); margin:clamp(16px,2vw,22px) auto 0; }

/* =========================================================
   撮影例
   ========================================================= */
.gallery{ padding:clamp(50px,7vw,100px) var(--pad); }
.gallery__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(200px,20vw,300px); gap:clamp(10px,1.4vw,18px);
}
.gallery__grid figure{ overflow:hidden; display:flex; flex-direction:column; }
/* 大きさに強弱をつけて、写真そのものにリズムを持たせる */
.gallery__grid .g-wide{ grid-column:span 2; }
.gallery__grid .g-tall{ grid-row:span 2; }
.gallery__grid img{ width:100%; flex:1; min-height:0; object-fit:cover; transition:transform 1.1s var(--ease); }
.gallery__grid figure:hover img{ transform:scale(1.05); }
.gallery .more{ max-width:var(--wrap); margin-left:auto; margin-right:auto; }

/* =========================================================
   撮影の流れ
   ========================================================= */
.flow{ background:var(--paper-2); padding:clamp(50px,7vw,100px) var(--pad); }
.flow__list{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,3vw,48px);
}
.flow__list li{ display:flex; gap:18px; padding:24px 0; border-top:1px solid var(--line); }
/* 番号だけだと手がかりが弱いので、細線のアイコンを添える。
   1pxストロークの線画に限定し、塗りや色は持たせない（ヘアラインの語彙に揃える） */
.flow__mark{
  flex:none; width:34px; display:grid; align-content:start; justify-items:center;
  gap:9px; padding-top:2px;
}
.flow__icon{
  width:24px; height:24px; display:block;
  fill:none; stroke:var(--ink-3); stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s;
}
.flow__list li:hover .flow__icon{ stroke:var(--ink); }
.flow__mark em{
  font-family:var(--latin); font-style:normal; font-weight:300;
  font-size:11px; letter-spacing:.14em; color:var(--ink-3);
}
.flow__list h3{ font-family:var(--mincho); font-weight:500; font-size:16px; letter-spacing:.06em; }
.flow__list p{ margin-top:7px; font-size:12.5px; color:var(--ink-2); line-height:1.95; }
.flow__tag{
  display:inline-block; margin-top:11px; font-size:10.5px; letter-spacing:.06em;
  color:var(--ink-2); background:var(--paper); border:1px solid var(--line); padding:4px 11px;
}

/* =========================================================
   撮影レポート
   ========================================================= */
.report{ padding:clamp(50px,7vw,100px) var(--pad); }
.report__list{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,36px);
}
/* 事例が3本に満たないあいだは、3列のうち右2つが空いて「読み込み失敗」に見える。
   実際の本数で組んで中央に置く。事例が増えれば自然に3列へ戻る。
   本数を偽って埋めないこと（以前ここには作り物のカードが3枚並んでいた） */
.report__list--n1{ grid-template-columns:minmax(0,1fr); max-width:560px; }
.report__list--n2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:860px; }
.report__item figure{ overflow:hidden; }
.report__item img{ width:100%; height:clamp(200px,22vw,270px); object-fit:cover;
                   object-position:50% 12%; transition:transform 1.1s var(--ease); }
.report__item:hover img{ transform:scale(1.05); }
.report__meta{ margin-top:15px; display:flex; gap:14px; align-items:center; font-size:11.5px; color:var(--ink-3); }
.report__meta time{ font-family:var(--latin); font-weight:300; letter-spacing:.1em; }
.report__meta span{ border-left:1px solid var(--line); padding-left:14px; }
.report__item h3{
  margin-top:8px; font-family:var(--mincho); font-weight:500; font-size:16px;
  line-height:1.7; letter-spacing:.05em;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{ background:var(--paper-2); padding:clamp(50px,7vw,100px) var(--pad); }
.faq__list{ max-width:var(--wrap); margin:0 auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 48px 22px 40px;
  font-size:15px; font-weight:500; letter-spacing:.05em; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:"Q"; position:absolute; left:2px; top:21px;
  font-family:var(--latin); font-weight:300; font-size:15px; color:var(--sand);
}
.faq summary::after{
  content:""; position:absolute; right:10px; top:30px;
  width:9px; height:9px; border-right:1px solid var(--ink-2); border-bottom:1px solid var(--ink-2);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:34px; }
.faq details > div{ padding:0 48px 24px 40px; max-width:900px; }
.faq details p{ font-size:13.5px; color:var(--ink-2); line-height:2.05; }

/* =========================================================
   スタジオ — 写真が左端へ抜け、パネルが重なる
   ========================================================= */
.studio{ background:var(--paper-2); padding:clamp(50px,7vw,100px) var(--pad); }
/* 中身の幅を .limit と揃える。
   .limit は max-width:var(--wrap) の内側に var(--pad) を持つので、実際の中身は wrap - pad*2。
   こちらは外側の .studio が余白を持っているため、max-width を同じ分だけ縮めて合わせる。
   ※ 写真の食い込み（margin:calc(50% - 50vw)）が外側の余白を前提に計算しているので、
     余白の位置は動かさないこと。動かすと右にはみ出す。 */
.studio__in{
  max-width:calc(var(--wrap) - var(--pad) * 2); margin:0 auto;
  display:grid; grid-template-columns:repeat(12,1fr); align-items:center;
}
.studio__fig{ grid-column:1 / span 8; grid-row:1; margin-left:calc(50% - 50vw); }
.studio__fig img{ width:100%; height:clamp(300px,38vw,540px); object-fit:cover; }
.studio__panel{
  grid-column:7 / -1; grid-row:1; position:relative; z-index:2;
  background:var(--paper); padding:clamp(28px,3.2vw,46px);
}
.studio__h{
  margin-top:16px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(18px,2vw,25px); line-height:1.7; letter-spacing:.08em;
}
.studio__lead{ margin-top:16px; font-size:13.5px; color:var(--ink-2); }
/* リニューアルの告知。詫びではなく「準備中」のニュースとして見せる */
.renew{
  margin-top:24px; padding:18px 20px;
  background:var(--paper-2); border-left:2px solid var(--ink);
}
.renew__label{
  font-size:11.5px; font-weight:500; letter-spacing:.1em; color:var(--ink-2);
  display:flex; align-items:center; gap:10px;
}
.renew__label::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--sand); flex:none;
}
.renew__txt{ margin-top:10px; font-size:13px; line-height:1.95; }
.renew__txt strong{ font-weight:700; }

.studio__data{ margin-top:24px; }
.studio__data > div{ display:flex; gap:20px; padding:13px 0; border-top:1px solid var(--line-2); }
.studio__data dt{ font-size:12px; color:var(--ink-3); width:92px; flex:none; padding-top:2px; }
.studio__data dd{ font-size:13.5px; line-height:1.85; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ position:relative; padding:clamp(70px,9vw,120px) var(--pad); color:var(--paper); overflow:hidden; }
.contact__fig{ position:absolute; inset:0; background:var(--ink); }
.contact__fig img{ width:100%; height:100%; object-fit:cover; opacity:.3; }
.contact__in{ position:relative; max-width:var(--wrap); margin:0 auto; }
.contact__en{ font-family:var(--latin); font-weight:200; font-size:clamp(30px,4.6vw,62px); letter-spacing:.09em; line-height:1; }
.contact__h{
  margin-top:24px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(20px,2.6vw,32px); letter-spacing:.09em; line-height:1.65;
}
.contact__lead{ margin-top:20px; font-size:13.5px; line-height:2.05; color:rgba(255,254,251,.75); }
.contact .btn--lg{ margin-top:34px; }
.contact__sub{ margin-top:28px; display:flex; gap:28px; }
.contact__sub a{ font-family:var(--latin); font-weight:300; font-size:12.5px; letter-spacing:.12em; color:rgba(255,254,251,.7); border-bottom:1px solid rgba(255,254,251,.3); padding-bottom:3px; }
.contact__sub a:hover{ color:var(--paper); }

/* =========================================================
   FOOTER
   ========================================================= */
/* 下の余白は見た目のためではない。**固定で浮いているものを逃がすため。**
   いちばん下までスクロールすると、SOUNDボタン（position:fixed・左下）と、
   スマホの固定CTAバーが、フッターの法令リンクの上に乗る。
   `elementFromPoint` で見ると**先頭のリンクが押せていなかった**（2026-10-06 実測）。
   ずっとこうなっていて、リンクを1本足したときに気づいた。
   SOUNDボタンは高さ42px＋下余白20〜32px、固定CTAは60pxほど。
   足し引きしたときは、ここの数字も見直すこと */
.ft{ padding:clamp(50px,6vw,80px) var(--pad) clamp(90px,9vw,104px); }
.ft__in{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:auto 1fr; gap:clamp(30px,6vw,90px);
  padding-bottom:32px; border-bottom:1px solid var(--line-2);
}
/* インライン画像のままだと文字のベースラインに乗るので、下に行間ぶんの
   余白がついたり消えたりする。block にして余白をCSSだけで決める */
.ft__brand img{ display:block; width:126px; height:auto; }
.ft__brand p{ margin-top:26px; font-size:12px; color:var(--ink-2); line-height:1.95; }
.ft__nav{ display:flex; gap:clamp(24px,4vw,56px); justify-content:flex-end; flex-wrap:wrap; }
.ft__nav a{ font-size:13px; color:var(--ink-2); display:inline-block; padding:6px 0; }
.ft__nav a:hover{ color:var(--ink); }
/* 5列のサイトマップ。列に見出しを付けて、どこに何があるか分かるようにする */
.ft__t{
  font-size:11px; letter-spacing:.16em; color:var(--ink-3);
  padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--line-2);
}
/* --- 下層の項目 ---
   「料金プラン」の下に4プラン、「衣装」の下にドレス・和装・ブーケ、
   「ロケーション」の下に県、「ブランド」の下に3ブランド。
   **ドロワーと同じ見せ方**（字下げ＋左の細い縦線）にそろえる（2026-10-04 クライアント指示）。
   線は項目ごとの ::before。li に余白を付けていないので箱が接し、
   縦に並ぶと**1本の線につながって見える。** */
.ft__nav li{ position:relative; }
.ft__nav li.is-ftchild{ padding-left:13px; }
.ft__nav li.is-ftchild::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--line-2);
}
/* 最後の子は線を文字の高さで止める。**行の下まで引くと宙に浮く。**
   :last-child だけでは足りない。「ブランド→3ブランド→撮影チーム」のように
   **子の下に親が続く列がある。**「次が子でない子」を :has() で拾う
   （:has() が無い環境でも :last-child のほうが効く） */
.ft__nav li.is-ftchild:last-child::before,
.ft__nav li.is-ftchild:not(:has(+ li.is-ftchild))::before{ bottom:50%; }
/* **字下げと線だけでは親子に見えない。**フッターのリンクはもともと全部 --ink-2 で、
   13px と 12px の差はほとんど読めなかった。ドロワーと同じく**濃さで分ける**——
   上位は --ink、子は --ink-2 のまま */
.ft__nav li:not(.is-ftchild) > a{ color:var(--ink); }
.ft__nav li.is-ftchild a{ font-size:12px; }
/* 外部リンクの印。**アイコンだけにしない**（inc/costume.php と同じ決めごと） */
.ft__nav a i{
  margin-left:6px; font-style:normal;
  font-size:9.5px; letter-spacing:.1em; color:var(--ink-3); white-space:nowrap;
}
/* コピーライトと法令まわりのリンクを同じ行に。
   2つのときは両端、入りきらなければ折り返して左揃え（space-between の素の挙動） */
.ft__legal{
  max-width:var(--wrap); margin:20px auto 0;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px clamp(16px,2vw,26px);
}
/* リンクは**ひとかたまりにして左**、コピーライトを右へ。
   span でくくらないと space-between が3つを等間隔に散らして、
   リンク2本のあいだに大きな穴があく（2026-10-05） */
.ft__legal-links{ display:flex; flex-wrap:wrap; gap:8px clamp(16px,2vw,26px); }

/* スマホは固定CTAバー（bottom:0・約60px）が重なるので、さらに逃がす */
@media (max-width:780px){
  .ft{ padding-bottom:132px; }
}
.ft__legal a{ font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; }
.ft__legal a:hover{ color:var(--ink); }
.ft__cr{ margin:0; font-family:var(--latin); font-weight:300; font-size:11px; color:var(--ink-3); letter-spacing:.1em; }

/* =========================================================
   コンセプトムービー
   ・ローディング直後に一度だけ。ここで空気をつくってから本編へ渡す
   ・iframeは押されるまで読み込まない
   ========================================================= */
.mov{
  position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  padding:var(--pad); background:rgba(16,14,12,.94);
  opacity:0; transition:opacity .8s var(--ease);
}
.mov.is-open{ opacity:1; }
.mov:not(.is-open){ pointer-events:none; }
.mov__panel{
  width:min(1080px,100%); color:var(--paper);
  transform:translateY(20px); transition:transform .9s var(--ease);
}
.mov.is-open .mov__panel{ transform:none; }

.mov__stage{
  position:relative; width:100%; aspect-ratio:1280/548; background:#000; overflow:hidden;
}
.mov__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mov__poster{ width:100%; height:100%; object-fit:cover; }
.mov__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(16,14,12,.28); transition:background .4s;
}
.mov__play:hover{ background:rgba(16,14,12,.12); }
.mov__tri{
  width:clamp(56px,6vw,84px); height:clamp(56px,6vw,84px); border-radius:50%;
  border:1px solid rgba(255,254,251,.7); display:grid; place-items:center;
  transition:transform .5s var(--ease), background .4s;
}
.mov__tri::after{
  content:""; margin-left:4px;
  border-left:13px solid var(--paper);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.mov__play:hover .mov__tri{ transform:scale(1.07); background:rgba(255,254,251,.12); }

.mov__copy{ margin-top:clamp(24px,3vw,36px); display:grid; grid-template-columns:1fr auto; gap:20px clamp(30px,5vw,70px); align-items:end; }
.mov__lead{ min-width:0; }
.mov__en{ font-family:var(--latin); font-weight:300; font-size:11px; letter-spacing:.3em; color:rgba(255,254,251,.5); }
.mov__h{
  margin-top:12px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(20px,2.6vw,30px); letter-spacing:.09em; line-height:1.6;
}
.mov__txt{ margin-top:14px; font-size:13px; line-height:2.05; color:rgba(255,254,251,.7); max-width:640px; }
.mov__txt strong{ font-weight:500; color:var(--paper); }
.mov__act{ display:flex; align-items:center; gap:clamp(16px,2.4vw,26px); flex-wrap:wrap; }
.mov__skip{
  font-size:13px; letter-spacing:.06em; color:rgba(255,254,251,.6);
  padding-bottom:3px; border-bottom:1px solid rgba(255,254,251,.28); transition:color .3s;
}
.mov__skip:hover{ color:var(--paper); }
/* 再生中はコピーを引っ込め、右上にCLOSEだけ出す */
.mov.is-playing .mov__copy{ display:none; }
.mov__close{
  position:absolute; top:clamp(18px,2.4vw,30px); right:var(--pad);
  font-family:var(--latin); font-weight:300; font-size:12px; letter-spacing:.2em;
  color:var(--paper); padding-bottom:4px; border-bottom:1px solid rgba(255,254,251,.45);
}
.mov :focus-visible,.mov__close:focus-visible{ outline:1px solid var(--paper); outline-offset:3px; }

@media (max-width:700px){
  .mov__copy{ grid-template-columns:1fr; align-items:start; }
  .mov__act{ flex-direction:column; align-items:stretch; }
  .mov__act .btn{ width:100%; }
  .mov__skip{ align-self:center; }
}

/* =========================================================
   サウンドのご案内モーダル
   ・音の自動再生は仕様上できないので、この「ひと押し」がその代わりになる
   ・押させるための飾りではなく、世界観への入口として置く
   ・断る側の選択肢も同じ重さで扱う（片方だけ弱く見せない）
   ========================================================= */
.inv{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:var(--pad); background:rgba(20,18,15,.55); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .7s var(--ease);
}
.inv.is-open{ opacity:1; }
/* 開いていない間は当たり判定を持たせない（透明なまま前面に残ると全クリックを奪う） */
.inv:not(.is-open){ pointer-events:none; }
.inv__bg{ position:absolute; inset:0; overflow:hidden; background:var(--ink); }
.inv__bg img{ width:100%; height:100%; object-fit:cover; opacity:.3; }
.inv__panel{
  position:relative; width:min(560px,100%);
  background:var(--ink); color:var(--paper);
  padding:clamp(30px,4.4vw,56px);
  border:1px solid rgba(255,254,251,.14);
  transform:translateY(18px); transition:transform .8s var(--ease);
}
.inv.is-open .inv__panel{ transform:none; }
.inv__en{ font-family:var(--latin); font-weight:300; font-size:11px; letter-spacing:.3em; color:rgba(255,254,251,.55); }
.inv__h{
  margin-top:16px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(22px,2.8vw,32px); letter-spacing:.09em; line-height:1.6;
}
.inv__txt{ margin-top:18px; font-size:13.5px; line-height:2.1; color:rgba(255,254,251,.76); }
.inv__act{ margin-top:clamp(26px,3.2vw,38px); display:flex; align-items:center; gap:clamp(16px,2.4vw,28px); flex-wrap:wrap; }
.btn--paper{ background:var(--paper); color:var(--ink); }
.btn--paper:hover{ background:var(--paper-2); }
.inv__no{
  font-size:13px; letter-spacing:.06em; color:rgba(255,254,251,.66);
  padding-bottom:3px; border-bottom:1px solid rgba(255,254,251,.32); transition:color .3s;
}
.inv__no:hover{ color:var(--paper); }
.inv__note{ margin-top:22px; font-size:11.5px; color:rgba(255,254,251,.45); }
.inv :focus-visible{ outline:1px solid var(--paper); outline-offset:3px; }

@media (max-width:560px){
  .inv__act{ flex-direction:column; align-items:stretch; gap:16px; }
  .inv__act .btn{ width:100%; }
  .inv__no{ align-self:center; }
}

/* =========================================================
   サウンドの切り替え
   ・自動再生はできないので、あくまで「任意でONにするもの」として置く
   ・主張しすぎない位置と大きさに留める
   ========================================================= */
.snd{
  position:fixed; left:var(--pad); bottom:clamp(20px,2.6vw,32px); z-index:45;
  display:flex; align-items:center; gap:11px;
  padding:10px 16px 10px 13px;
  background:rgba(255,254,251,.9); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  font-family:var(--latin); font-weight:300; font-size:10.5px; letter-spacing:.18em;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .4s;
}
.snd.is-ready{ opacity:1; transform:none; pointer-events:auto; }
.snd:hover{ border-color:var(--ink-3); }
.snd__eq{ display:flex; align-items:flex-end; gap:2px; height:11px; }
.snd__eq i{ width:1.5px; height:3px; background:var(--ink); transition:height .3s ease; }
.snd.is-on .snd__eq i{ animation:eq .9s ease-in-out infinite; }
.snd.is-on .snd__eq i:nth-child(2){ animation-delay:.15s; animation-duration:1.1s; }
.snd.is-on .snd__eq i:nth-child(3){ animation-delay:.3s; animation-duration:.8s; }
.snd.is-on .snd__eq i:nth-child(4){ animation-delay:.45s; animation-duration:1.25s; }
@keyframes eq{ 0%,100%{ height:3px } 50%{ height:11px } }
.snd .lbl-on{ display:none; }
.snd.is-on .lbl-off{ display:none; }
.snd.is-on .lbl-on{ display:inline; }

/* =========================================================
   固定CTA（スマホ）
   ========================================================= */
.fixcta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,254,251,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line-2);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.fixcta.is-on{ transform:none; }
.fixcta__sub{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ink); padding:0 18px; font-size:12.5px; white-space:nowrap;
}
.fixcta .btn{ flex:1; padding:15px 10px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  /* 4列は1枚200px台まで落ちて絵が読めないので2列へ。
     **高さは 22vw ではなく 29vw。**2列だと1枚435px（1000px幅）まで広がるので、
     22vw のままだと比率1.98＝上下が深く切られる。
     29vw なら 880〜1080px の範囲でほぼ 3:2 を保つ（実測 1.50〜1.57）。
     書き出しが3:2なので、合わせれば切らずに済む。 */
  .exp__list[data-n="4"]{ grid-template-columns:repeat(2,1fr); }
  .exp__list[data-n="4"] .exp__item img{ height:clamp(190px,29vw,300px); }

  /* ここにあった .hd__nav / .hd__menu の出し分けは不要になった（2026-09-20）。
     横並びナビを廃止し、MENU は全幅で出ている */
  /* 縦積み時は LEXUS のスマホと同じ順序：写真 → 大見出し → 罫線 → 日本語 → リンク → ダッシュ */
  .hero__in{ grid-template-columns:1fr; padding:0 0 clamp(30px,4vw,50px); }
  .hero__medias{ order:1; }                                   /* 画面幅いっぱい */
  .hero__copies{
    order:2; padding:clamp(30px,4.4vw,48px) var(--pad) 0;
    margin-bottom:0;
  }
  .hero__rule{ width:100%; }
  .hero__nav{ order:3; position:static; max-width:none; padding:clamp(24px,3.4vw,34px) var(--pad) 0; }
  .gallery__grid{ grid-template-columns:repeat(3,1fr); }
  .flow__list{ grid-template-columns:repeat(2,1fr); }
  .inc__list{ grid-template-columns:repeat(3,1fr); }
  /* 重なりは維持しつつ、写真の抜けは片側だけに */
  .limit{ grid-template-columns:repeat(8,1fr); }
  .limit__fig{ grid-column:3 / -1; }
  /* **span 6 ではなく 4。**（2026-08-21 実測）
     6だとパネルが写真の54%を覆い、881〜1080px の範囲で新郎の顔が完全に隠れる。
     この幅では写真の縦横比がちょうど2.46で object-fit が横を切らないので、
     object-position でも逃がせない。**パネル側を詰めるしか効かない。**

     5では足りない。顔の中心（x41.5%）はパネルの外に出るが、
     顔の左端（x28%）が中に残り、**顔の65%が隠れたまま**だった。
     顔は点ではなく面。**中心が外に出たかどうかで判定してはいけない。** */
  .limit__panel{ grid-column:1 / span 4; }
  .team__in{ grid-template-columns:repeat(8,1fr); }
  .team__fig{ grid-column:1 / span 6; }
  .team__panel{ grid-column:3 / -1; }   /* .limit の 1/span 6 と同じ6列。右寄せなので 3/-1 */
  .studio__in{ grid-template-columns:repeat(8,1fr); }
  .studio__fig{ grid-column:1 / span 6; }
  .studio__panel{ grid-column:3 / -1; }
}

@media (max-width:880px){
  /* 1行が短いので、縦積みでも隙間1pxの罫線で切れ目が分かる */
  .areanav__list{ grid-template-columns:1fr; }
  /* 1列になるぶん横幅に余裕ができるので、写真を大きくする。
     余白と間隔は少し詰めて、説明文が3行に折り返さない幅を残している
     （375pxで本文154px＝約12字／行、23字の説明文が2行に収まる） */
  .areanav__list a{ padding:14px 16px; gap:14px; }
  .areanav__fig{ width:clamp(120px,36vw,180px); }
  /* 写真を大きくしたぶん本文が狭い。0.5px下げるだけで、
     375pxでの説明文が3行から2行に収まる（実測） */
  .areanav__body > span{ font-size:12px; }
  .shead{ grid-template-columns:1fr; align-items:start; }
  .shead__note{ max-width:none; }
  .shead .more{ text-align:left; }
  /* 375pxでは NEWS ラベルと日付まで並べると見出しが数文字しか残らない。
     **見出しを優先して、その2つを落とす。**日付は記事を開けば出る */
  .hnews a{ height:52px; gap:12px; font-size:13px; }
  .hnews__lb,.hnews time{ display:none; }
  .hnews__cat{ min-width:58px; font-size:10px; letter-spacing:0; }

  .notice__in{ grid-template-columns:1fr; gap:16px; }
  .notice__label{ padding-top:0; }
  /* 表も縦罫線をやめて全幅に。2段目のラベルだけ上を空ける
     （1列になると gap:16px では段の切れ目が分かりにくい） */
  .notice__slots{ border-left:0; padding-left:0; }
  /* 375pxで 見出し46px＋4列。1マス約67px。いちばん長い「空きあり」でも36px
     （実測）なので言葉は消さない。消すと凡例が要るようになって、行が1つ増える */
  .slots thead th{ font-size:12px; padding-bottom:7px; }
  .slots__c{ padding:11px 0 9px; }
  .slots__c b{ font-size:16px; }
  .slots__c i{ font-size:9px; letter-spacing:0; }


  /* 受付状況：タグを上に出して2段にし、本文の幅を確保する */
  /* タグ幅は固定。可変にすると本文の頭が行ごとにずれて読みにくい */
  .report__list,.opt__grid,.exp__list{ grid-template-columns:1fr; }
  /* [data-n="4"]（0,2,0）は上の行（0,1,0）より強い。**明示的に1列へ戻す。**
     書かないとスマホで4列のまま残る */
  .exp__list[data-n="4"]{ grid-template-columns:1fr; }
  .exp__msg{ grid-template-columns:1fr; gap:18px; }
  .exp__label{ padding-top:0; }
  .exp__lead{ grid-column:1; padding-left:clamp(18px,2.4vw,34px); }
  /* スマホは下部の固定CTAとぶつかるので、その上へ逃がす */
  .snd{ bottom:88px; }
  /* FVでは出さない。固定CTAが出ていない画面だと、ボタンが冒頭の文の上に乗っていた（2026-10-13）。
     固定CTAと同じタイミングで出す（main-c.js が body に is-cta を付ける）。
     **再生中は隠さない。**止める手段がなくなる */
  body:not(.is-cta) .snd.is-ready:not(.is-on){ opacity:0; transform:translateY(10px); pointer-events:none; }
  .cere__in{ grid-template-columns:1fr; gap:clamp(28px,4vw,44px); }
  .isl__in{ grid-template-columns:1fr; gap:clamp(28px,4vw,44px); }
  .isl__copy,.isl__grid{ grid-column:1 / -1; }
  .isl__grid img{ height:30vw; }
  .isl__g1 img{ height:44vw; }
  .cere__copy,.cere__grid{ grid-column:1 / -1; }
  .cere__grid img{ height:34vw; }
  .std__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery__grid .g-wide{ grid-column:span 2; }
  .gallery__grid .g-tall{ grid-row:span 1; }
  .cos__head{ flex-wrap:wrap; gap:10px 16px; }
  .flow__list{ grid-template-columns:1fr; }
  .inc__list{ grid-template-columns:repeat(2,1fr); }
  .price__foot{ flex-direction:column; align-items:stretch; }
  .price__act{ flex-direction:column; align-items:stretch; gap:16px; }
  .price__act .btn{ width:100%; }
  /* 表は横スクロール。1列目を固定して見出しを見失わせない */
  .ptable{ font-size:12.5px; }
  /* 1列目を狭める。詰まっていた理由は2つあって、両方を外さないと効かない。

     1. 幅は min-width ではなく **いちばん長い行見出し**が決めていた。
        nowrap のせいで「土日祝の追加料金※3」が1行に伸び、160px を占めていた。
     2. **左上の角セル（.ptable__rh）が下の min-width:140px を拾っていた。**
        `.ptable thead th` は (0,1,1)、`.ptable__rh` は (0,1,0) で負ける。
        列の幅は列内でいちばん広いセルで決まるので、角セルが140pxある限り
        行見出しをいくら詰めても140pxのままになる。だから角セルを除外する。

     折り返しを許して96pxに固定。6文字（ドローン撮影・ヘアチェンジ・
     ロケーション）は1行に収まり、いちばん長いものだけ2行になる。 */
  .ptable td,.ptable thead th:not(.ptable__rh){ min-width:140px; }
  .ptable thead th.ptable__rh,
  .ptable tbody th{
    position:sticky; left:0; z-index:2;
    width:96px; min-width:96px; max-width:96px;
    padding-left:8px; padding-right:8px;
    white-space:normal; line-height:1.5;
    border-right:1px solid var(--line);
  }
  /* 横の重なりはやめ、縦に重ねる（写真の下端にパネルを乗せる） */
  .limit{ display:block; padding-left:0; padding-right:0; }
  .limit__fig{ margin:0; }
  /* 枠が比1.67になるので、比2.46の写真は左右32%が切れる。
     中央（50%）だと右端に写っているお父様の顔が半分で切れるため、
     顔ごと枠の外に出るところまで左へ寄せる。
     見える左端 = 32.1% × この値。36% → 左11.6%〜右79.4% */
  .limit__fig img{ height:60vw; object-position:36% center; }
  .limit__panel{ margin:-40px 20px 0; padding:26px 24px 28px; }
  /* .limit と同じく外側の余白を0にする。
     ここを残すと、その20pxぶんパネルが内側に入り、LIMITEDより文字幅が40px狭くなる。
     余白を0にしたので、写真の負のマージン（余白の打ち消し）も不要になる */
  .team,.studio{ padding-left:0; padding-right:0; }
  .team__in,.studio__in{ display:block; }
  .team__fig{ margin:0; }
  .team__fig img{ height:62vw; }
  .team__panel{ margin:-40px 20px 0; padding:26px 24px 28px; }
  .studio__fig{ margin:0; }
  .studio__fig img{ height:62vw; }
  .studio__panel{ margin:-40px 20px 0; padding:26px 24px 28px; }
  .ft__in{ grid-template-columns:1fr; gap:34px; }
  /* **1列になるとロゴの居場所が変わる。**
     PCでは幅 auto の細い列にロゴが収まるので126pxで釣り合うが、
     1列だと全幅のなかに126pxのロゴが左端で浮き、右が大きく空く。
     さらにロゴの下（26px）が、ブロックの区切り（.ft__in の gap 34px）より狭いので、
     **ロゴが見出しではなく住所にくっついて見える**（2026-10-05 クライアント指摘）。
     少し大きくして、下の余白を区切りと同じにそろえる */
  .ft__brand img{ width:150px; }
  .ft__brand p{ margin-top:34px; }
  /* **5列はこの幅に並ばない。**flex のままだと4列＋1列に折れて、
     2段目に1列だけ残る（2026-10-04 に階層を出して5列になったときの折れ方）。
     3列×2段にして、空くのを1マスに収める */
  .ft__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px 20px; }
  .fixcta{ display:flex; }
  body{ padding-bottom:74px; }
}

@media (max-width:560px){
  .hd__in{ height:64px; }
  /* **この幅だけシートが top:64px でヘッダーの下から始まる。**
     なので上の padding は要らない。72px を足していたせいで、
     ヘッダーの下に84pxの空白ができていた（2026-10-04 に気づいた）。
     561〜780px はシートが top:0 のままなので、あちらでは padding が必要 */
  .drawer{ top:64px; padding-top:0; }
  .hero{ padding-top:64px; }
  .hd__logo{ width:94px; }
  .hd__act{ gap:14px; }
  .hd__act .btn--sm{ padding:10px 14px; font-size:11.5px; letter-spacing:.04em; gap:7px; }
  .hd__act .btn--sm svg{ width:16px; height:16px; }
  .ct-long{ display:none; }
  .ct-short{ display:inline; }
  .hd__menu{ font-size:11px; letter-spacing:.16em; text-indent:.16em; }
  /* スマホは写真を縦長寄りに大きく取る（LEXUSのFVと同じ見え方）。
     ただしキャッチとCTAが1画面に入る高さで止める */
  .hero__medias video,.hero__medias img{ height:96vw; }
  .hero__medias video,.hero__medias img{ height:min(96vw,54svh); }
  .hero__en{ font-size:clamp(34px,10.6vw,52px); }
  /* スマホでも1行に収める */
  .hero__nav{ gap:10px; }
  .hdot{ gap:8px; }
  .hdot i{ width:20px; }
  .hdot span{ font-size:9.5px; letter-spacing:.06em; }
  .hcount{ margin-right:2px; }
  .hcount b{ font-size:14px; }
  .hcount span{ font-size:10px; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery__grid img{ height:40vw; }
  .inc__list,.team__list{ grid-template-columns:1fr; }
  .genres__list{ grid-template-columns:repeat(2,1fr); }
  .team__list li{ display:flex; align-items:baseline; gap:12px; text-align:left; }
  /* 6項目は2列×3段のまま。1列に落とすと縦に伸びすぎる */
  .std__grid{ grid-template-columns:repeat(2,1fr); }
  .std__item{ padding:18px 14px; }
  .std__cat{ font-size:10px; letter-spacing:.14em; }
  .std__label{ margin-top:12px; font-size:11.5px; letter-spacing:.02em; }
  .std__num{ font-size:31px; }
  .std__num small{ font-size:12px; margin-left:2px; }
  .std__num small:first-child{ margin:0 4px 0 0; }
  .std__note{ margin-top:8px; font-size:10.5px; line-height:1.7; }
  .std__go{ padding-top:14px; gap:7px; font-size:10.5px; letter-spacing:.02em; }
  .std__go::after{ width:12px; }
  /* SPでも .std__note（10.5px）を下回らせない */
  .std__src{ padding-top:14px; font-size:10.5px; line-height:1.6; }
  .faq summary{ padding:19px 38px 19px 32px; font-size:14.5px; }
  .faq details > div{ padding:0 38px 22px 32px; }
  .btn--lg{ width:100%; padding:19px 20px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* 確認用フラットモード（?flat=1） */
.is-flat *,.is-flat *::before,.is-flat *::after{ transition:none !important; animation:none !important; }

/* スマホのフッターは、県が8つ縦に並ぶと長くなりすぎるので横並びにする */
@media (max-width:560px){
  .ft__nav{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
  .ft__area{ grid-column:1 / -1; }
  .ft__area ul{ display:flex; flex-wrap:wrap; gap:0 18px; }
  /* **横に並ぶものに縦線は引けない。**親（ロケーション）だけで1行使い、
     県はその下に折り返す。行が分かれるぶん、字下げと線が無くても親子は読める */
  .ft__area li:not(.is-ftchild){ flex-basis:100%; }
  .ft__area li.is-ftchild{ padding-left:0; }
  .ft__area li.is-ftchild::before{ content:none; }
}

/* ---------- ページ遷移（PJAX）の切り替え ----------
   白い点滅を出さずに中身だけ入れ替える。ヘッダーとフッターは動かさない */
main{ transition:opacity .22s ease; }
.is-leaving main{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  main{ transition:none; }
  .is-leaving main{ opacity:1; }
}

/* フッターの連絡先（NAP）。電話は検索・AIが事業者を特定する手がかりになる */
.ft__nap{ margin-top:22px; }
.ft__nap div{ display:flex; gap:12px; margin-top:6px; font-size:12px; line-height:1.9; }
.ft__nap dt{ flex:none; width:44px; color:var(--ink-3); }
.ft__nap dd{ margin:0; color:var(--ink-2); }
.ft__nap a{ border-bottom:1px solid var(--line); padding-bottom:1px; }
.ft__nap a:hover{ border-bottom-color:var(--ink); }

/* 読み上げ利用者のための一行。目では見せない。
   h1の見える部分が "PHOTO WEDDING" だけだと、画面を見ずに聞いている人に
   何の店か伝わらないので、そこを補うために置いている。
   display:none だと読み上げからも消えるので、この書き方でないといけない。

   **ここにキーワードを並べないこと。** 地名や商材を列挙した瞬間、
   隠しテキストへのキーワード詰め込みになり、Googleの手動対策の対象になる。
   狙う語を増やしたいときは、隠さずに本文へ書くか、そのページを別に作る。 */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ドロワーは780px以下で全幅に戻す。
   min(76vw,860px) のままだと375pxの画面で285pxの細い帯になり、
   2列の項目が1マス140pxまで痩せて日本語が折れる */
@media (max-width:780px){
  .drawer{ width:100%; border-left:0; }
  .scrim{ display:none; }

  /* ---- スマホのメニュー（2026-10-04 に組み直し） ----
     **もとは全部15px前後で、罫線で区切った目次のようだった。**
     クライアントから「安っぽい、ダサい」。
     参考（TRUNK(HOTEL) CAT STREET のスマホ）で効いていたのは2つ：
       ・項目が大きい（26px級）。小さく詰めると一覧表に見える
       ・**グループ見出しに罫線を引かない。**小さな文字だけで十分あいている
     写真はスマホでは出さない。TRUNK も出していない。字の大きさで持たせる */
  /* **主項目だけの大きな組み**（2026-10-04 クライアント指示）。
     参考：Land Wedding（land-wedding.com）。英字を大きく、和文を小さく添える。
     **子（4プラン・3ブランド・衣装3つ）とグループ見出しはスマホでは出さない。**
     18項目を並べると一覧表になるため。
     子ページへは、親ページ（/plan/ など）の中から行ってもらう。 */
  .dcol--main{ padding-top:clamp(14px,4vw,24px); }
  .dnav{ gap:0; }
  .dgrp{ display:block; }
  .dgrp__en{ display:none; }

  /* **子項目をスマホでも出す**（2026-10-06 クライアント要望）。
     「会食付きプランが見えないのが惜しい」。

     2026-10-04 に隠したのは「18項目を並べると一覧表になる」から。
     **その理由は正しいので、縦に18行並べる形には戻さない。**
     親の下に**横1行**でたたむ。増えるのは4行だけ（PLAN／GUIDE／COSTUME／BRAND）。

     正式名は長いので 'short' を使う（header.php の .dnav__sh）。
     「会食付きプラン」→「会食付き」、「家族と撮るフォトウェディング」→「家族と撮る」。
     **375pxで1行に収まることが条件。**収まらないと一覧表に逆戻りする。 */
  .dnav__kids{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:0 14px; margin:-6px 0 clamp(8px,2.4vw,12px);
  }
  .dnav__kids.is-alt{ padding-left:clamp(26px,9vw,44px); }   /* 親の字下げに合わせる */

  /* 上下の padding はタップ領域のため。**見た目のためではない。**
     5px だと当たり判定が37pxで、推奨（44px前後）に届かない。
     文字は小さいままで、押せる範囲だけ広げる */
  .dnav__i.is-child{
    display:inline-flex; padding:9px 0; position:relative;
  }
  .dnav__i.is-child::before{ display:none; }   /* 縦の細線はPCだけ。横並びでは意味がない */
  .dnav__i.is-child .dnav__ja{ display:none; } /* 正式名は出さない */
  .dnav__i.is-child .dnav__sh{
    display:block; font-size:12.5px; letter-spacing:.06em; color:var(--ink-3);
    border-bottom:1px solid var(--line-2); padding-bottom:2px;
  }
  .dnav__i.is-child i{ display:none; }
  /* 区切りの点。**gap だけだと、どこで切れるか分からない** */
  .dnav__kids .dnav__i.is-child + .dnav__i.is-child::after{
    content:"・"; position:absolute; left:-10px; top:9px;
    width:auto; height:auto; transform:none; background:none;
    color:var(--line); font-size:11px;
  }

  .dnav__i{
    display:block; padding:clamp(11px,3vw,15px) 0; position:relative;
  }
  .dnav__en{
    display:block;
    font-family:var(--mincho); font-weight:500;
    font-size:clamp(30px,10.2vw,44px); line-height:1; letter-spacing:.01em;
    color:var(--ink);
  }
  .dnav__ja{
    display:block; margin-top:7px;
    font-size:11.5px; letter-spacing:.18em; color:var(--ink-3);
  }
  /* **交互に振る。**全部左揃えだと、字を大きくしただけの一覧に戻る。
     **:nth-child(even) では効かない**（2026-10-05 クライアント指摘で判明）。
     スマホではグループ名と子項目が display:none になるが、
     nth-child は隠れた要素も数え、グループごとに数え直すため、
     PLAN・COSTUME・BRAND がどれも「2番目」で全部字下げになっていた。
     番号は header.php の $n が持つ。**見えている主項目だけの通し番号。** */
  .dnav__i.is-alt{ padding-left:clamp(26px,9vw,44px); }
  /* 下線は英字の幅ぶんだけ。行いっぱいに引くと罫線に見える */
  .dnav__i::after{ bottom:auto; top:0; height:0; }
  .dnav__i i{ display:none; }
  /* 下の帯も、項目が大きくなったぶん離す */
  .dsub{ padding-top:clamp(22px,6vw,30px); gap:8px 18px; }
  .dsub a{ font-size:12.5px; }
  .drawer__cta{ margin-top:18px; }
}

/* =========================================================
   翻訳の切り替え（inc/translate.php・2026-10-18）
   ========================================================= */
.lang{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:12px; letter-spacing:.04em; }
.lang__t{ font-family:'Jost',sans-serif; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-right:4px; }
.lang__b{ appearance:none; background:none; border:0; padding:6px 0; font:inherit; color:inherit; cursor:pointer; opacity:.75; border-bottom:1px solid transparent; }
.lang__b:hover{ opacity:1; }
.lang__b[aria-pressed="true"]{ opacity:1; border-bottom-color:currentColor; }
.lang--drawer{ margin-top:24px; }
.lang--ft{ margin:0 0 12px; }
/* Google 翻訳が上に出す帯と、文字に重ねる強調を消す。
   帯が出ると body が40px下がり、固定ヘッダーとずれる */
body{ top:0 !important; }
iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }