/* ══════════════════════════════════════════════════════════════════════
   page-ml.css — 多言語ワンページ（/zh-hant/ /fr/ /es/）専用。
   色・書体は theme.css の変数をそのまま使う（象牙の白基調・単一テーマ）。
   クラスはすべて ml- 接頭辞で、共通テーマの .top / .btn-go 等と衝突させない。
   欧文見出し＝--f-lat（Cormorant）、和文・CJK＝--f-disp（明朝）、本文＝--f-body。
   ══════════════════════════════════════════════════════════════════════ */
.ml-main{display:block}
/* 第3言語の配下ページ（ご利用にあたって・予約フォーム）は sticky の .ml-top を使うため、
   固定ヘッダー用に body へ入る上余白（.page:not(.ska-flush)）を打ち消す。下余白は残す。 */
.page.ska-ml-chrome,.single.ska-ml-chrome{padding-top:0}
/* 見出しの初期化はワンページ本体だけに限定（配下の案内・フォームは各ページCSSの見出しを尊重） */
.ska-ml .ml-main h1,.ska-ml .ml-main h2,.ska-ml .ml-main h3{font-weight:400;margin:0;text-wrap:balance;line-height:1.28}
.ml-main a{text-decoration:none}
/* リンクは地の色を継ぐが、ボタン類は自前の配色を保つ（doc/webform の .btn-go が暗文字にならないように）。 */
.ml-main a:not([class*="btn"]){color:inherit}
/* 第3言語の配下ページ（案内・フォーム）は、本文をサイト標準幅に収め、読み幅を見出しにそろえる。 */
.ska-ml-chrome .doc-in,.ska-ml-chrome .doc-end,.ska-ml-chrome .wf-in{max-width:var(--pw);margin-inline:auto}
.ska-ml-chrome .doc-sec,.ska-ml-chrome .doc-lead{max-width:46em}
.ml-wrap{max-width:var(--pw);margin-inline:auto;padding-inline:clamp(22px,5vw,60px)}
.ml-eyebrow{font-family:var(--f-lat);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--kogane-moji);display:inline-block}
.ml-rule{height:1px;background:var(--keisen);border:0;margin:0}
.ml-skip{position:absolute;left:-9999px;top:0;background:var(--enji);color:var(--han);padding:8px 14px;z-index:100}
.ml-skip:focus{left:8px;top:8px}

/* ── 上辺の帯 ── */
.ml-top{position:sticky;top:0;z-index:40;background:rgba(var(--ji-rgb),.88);
  backdrop-filter:blur(9px) saturate(1.05);-webkit-backdrop-filter:blur(9px) saturate(1.05);
  border-bottom:1px solid var(--keisen)}
.ml-top-in{display:flex;align-items:center;gap:16px;min-height:62px}
.ml-brand{display:flex;align-items:center;margin-right:auto;line-height:0}
.ml-brand img{height:30px;width:auto;display:block}
.ml-langs{display:flex;align-items:center;gap:2px}
.ml-lang{font-family:var(--f-body);font-size:12px;letter-spacing:.06em;color:var(--moji-2);padding:6px 7px;border-radius:2px;transition:color .3s}
a.ml-lang:hover{color:var(--moji)}
.ml-lang.on{color:var(--enji);font-weight:500}
.ml-sep{width:1px;height:12px;background:var(--keisen);margin-inline:3px}
.ml-book{font-family:var(--f-body);font-size:12.5px;letter-spacing:.1em;color:var(--han);
  background:var(--enji);padding:9px 16px;border-radius:2px;white-space:nowrap;margin-left:6px;transition:background .3s,transform .3s}
.ml-book:hover{background:var(--ebicha);transform:translateY(-1px)}

/* ── ヒーロー（写真＋ヴェール。他ページと同じ流儀で、文字は白く起こす）── */
.ml-hero{position:relative;z-index:0;padding:clamp(60px,12vh,132px) 0 clamp(50px,9vh,92px)}
.ml-hero .ml-wrap{position:relative;z-index:1}
.ml-hero--photo{min-height:clamp(540px,88vh,860px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(122px,20vh,188px) 0 clamp(46px,7vh,76px);overflow:hidden;isolation:isolate}
.ml-hero--photo h1{font-size:clamp(30px,5vw,56px)}
.ml-hero-bg{position:absolute;inset:0;z-index:-2}
.ml-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;filter:var(--shashin)}
.ml-hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(18,14,11,.10) 0%,rgba(18,14,11,.26) 42%,rgba(18,14,11,.70) 100%)}
.ml-hero-loc{margin:0 0 24px;font-family:var(--f-lat);font-size:12px;letter-spacing:.38em;text-transform:uppercase;color:var(--kogane-moji)}
.ml-hero h1{font-family:var(--f-disp);font-size:clamp(32px,5.6vw,64px);letter-spacing:.02em;color:var(--midashi);max-width:16ch}
.ml-hero-sub{margin:28px 0 0;max-width:52ch;color:var(--moji-2);font-size:clamp(14.5px,1.5vw,16px);line-height:2.05}
.ml-hero-cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.ml-btn-go{font-family:var(--f-body);font-size:14px;letter-spacing:.09em;color:var(--han);background:var(--enji);
  padding:14px 30px;border-radius:2px;transition:background .3s,transform .3s}
.ml-btn-go:hover{background:var(--ebicha);transform:translateY(-1px)}
.ml-btn-line{font-family:var(--f-lat);font-size:14.5px;letter-spacing:.05em;color:var(--kogane-moji);
  border-bottom:1px solid var(--keisen);padding-bottom:3px;transition:color .3s,border-color .3s}
.ml-btn-line:hover{color:var(--enji);border-color:var(--enji)}
/* 写真ヒーローでは文字と補助線を白へ */
.ml-hero--photo .ml-hero-loc{color:rgba(255,255,255,.82)}
.ml-hero--photo h1{color:#fff}
.ml-hero--photo .ml-hero-sub{color:rgba(255,255,255,.92)}
.ml-hero--photo .ml-btn-line{color:#fff;border-color:rgba(255,255,255,.5)}
.ml-hero--photo .ml-btn-line:hover{color:#fff;border-color:#fff}

/* ── セクション見出し ── */
.ml-sec{padding:clamp(54px,9vh,100px) 0}
.ml-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:42px}
.ml-sec-head .t .ml-eyebrow{display:block;margin-bottom:12px}
.ml-sec-head h2{font-family:var(--f-disp);font-size:clamp(23px,3.2vw,34px);letter-spacing:.05em;color:var(--midashi)}
.ml-note{font-size:12.5px;color:var(--moji-3);letter-spacing:.05em;max-width:34ch;text-align:right}
.ml-lead{max-width:60ch;color:var(--moji-2);font-size:clamp(15px,1.6vw,17px);line-height:2.1}

/* ── プラン詳細（選べるように内容を全部載せる）── */
.ml-plan-nav{display:flex;flex-wrap:wrap;gap:8px 10px;margin:34px 0 clamp(28px,3.6vw,46px);padding-top:26px;border-top:1px solid var(--keisen)}
.ml-plan-nav a{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--keisen);border-radius:2px;
  padding:7px 13px;transition:border-color .3s,background .3s}
.ml-plan-nav a:hover{border-color:var(--pc,var(--enji));background:var(--ji-2)}
.ml-pn-eye{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--pc,var(--kogane-moji))}
.ml-pn-nm{font-family:var(--f-disp);font-size:14px;letter-spacing:.03em;color:var(--midashi)}

.ml-pd{position:relative;padding:0;border-top:1px solid var(--keisen)}
.ml-pd:first-of-type{border-top:0}
.ml-pd::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:52px;background:var(--pc,var(--enji))}
/* プランブロックの写真（heroまたは個別指定）。上の色バーの下に横帯で置く。 */
.ml-pd-shot{margin:0 0 24px;overflow:hidden;border:1px solid var(--keisen);background:var(--ji-2)}
.ml-pd-shot img{display:block;width:100%;height:clamp(200px,32vw,320px);object-fit:cover;object-position:50% 32%}
.ml-pd-head{margin-bottom:26px}

/* ── 各プランは折りたたみ（閉）で始め、開くと詳細を表示（ページを短く感じさせる）── */
.ml-acc{}
.ml-acc-sum{list-style:none;display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);cursor:pointer;padding:clamp(20px,2.6vw,28px) 0}
.ml-acc-sum::-webkit-details-marker{display:none}
.ml-acc-sum::marker{content:""}
.ml-acc-thumb{flex:0 0 auto;width:clamp(62px,8vw,84px);height:clamp(62px,8vw,84px);overflow:hidden;border:1px solid var(--keisen);background:var(--ji-2)}
.ml-acc-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.ml-acc-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.ml-acc-nm{font-family:var(--f-disp);font-size:clamp(19px,2.6vw,25px);letter-spacing:.04em;color:var(--midashi);line-height:1.2}
.ml-acc-pr{margin-left:auto;flex:0 0 auto;font-family:var(--f-disp);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--kogane-moji);white-space:nowrap}
.ml-acc-ic{flex:0 0 auto;width:11px;height:11px;border-right:1.5px solid var(--moji-2);border-bottom:1.5px solid var(--moji-2);transform:rotate(45deg);margin:0 2px 4px 4px;transition:transform .35s var(--ease)}
.ml-acc[open] .ml-acc-ic{transform:rotate(-135deg);margin:4px 2px 0 4px}
.ml-acc-sum:hover .ml-acc-nm{color:var(--pc,var(--enji))}
.ml-acc-body{padding:4px 0 clamp(26px,3.2vw,42px)}
.ml-acc-body>.ml-pd-desc{margin:0 0 6px}

/* スタイル等の写真カード（日英プランページと同じ写真グリッド）。閉じている間は非表示。 */
.ml-pd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:clamp(12px,1.6vw,16px);margin:0;padding:0;list-style:none}
.ml-card{min-width:0}
.ml-card-ph{display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--keisen);background:var(--ji-2)}
.ml-card-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .8s var(--ease)}
.ml-card:hover .ml-card-ph img{transform:scale(1.04)}
.ml-card-nm{display:block;margin-top:8px;font-size:12.5px;line-height:1.65;letter-spacing:.02em;color:var(--moji)}
/* オプションのカード（写真＋名前＋価格＋説明） */
.ml-pd-cards--opt{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ml-card--opt .ml-card-ph{aspect-ratio:4/3;object-position:50% 30%}
.ml-card-pr{font-style:normal;font-family:var(--f-disp);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--kogane-moji)}
.ml-card-tx{display:block;margin-top:5px;font-size:11.5px;line-height:1.7;color:var(--moji-2)}
.ml-card-more{display:inline-block;margin-top:8px;font-family:var(--f-lat);font-size:11.5px;letter-spacing:.06em;color:var(--kogane-moji);border-bottom:1px solid var(--keisen);padding-bottom:2px;transition:color .3s,border-color .3s}
.ml-card-more:hover{color:var(--enji);border-color:var(--enji)}

/* mlは無地背景。plan.css の交互セクション背景（tone用）は使わない。 */
.ml-acc-body .pl-list{border-top-color:var(--keisen)}
/* mlはコース写真を持たないため、pl-course を全幅にして左の空きを無くす（情報だけ全幅表示）。 */
.ml-acc-body .pl-course--plain{grid-template-columns:1fr;gap:0}
.ml-acc-body .pl-course--plain .pl-course-main{grid-column:auto}
.ml-booth-tx{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--moji-2)}
.ml-pd-hl{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ml-pd-eye{font-family:var(--f-lat);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--pk,var(--kogane-moji))}
.ml-pd-head h3{font-family:var(--f-disp);font-size:clamp(22px,3vw,30px);letter-spacing:.04em;color:var(--midashi)}
.ml-pd-desc{margin:12px 0 0;color:var(--moji-2);font-size:14.5px;line-height:1.95;max-width:60ch}

.ml-pd-group{padding:20px 0;border-top:1px solid var(--keisen)}
.ml-pd-gh{display:block;font-family:var(--f-lat);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kogane-moji);margin-bottom:14px}
.ml-pd-gh-pr{font-family:var(--f-disp);font-style:normal;font-size:12.5px;letter-spacing:.03em;color:var(--moji-2);text-transform:none;margin-left:6px}

.ml-pd-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ml-pd-item{display:block}
.ml-pd-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ml-pd-nm{font-family:var(--f-disp);font-size:16px;letter-spacing:.03em;color:var(--midashi)}
.ml-pd-pr{font-family:var(--f-lat);font-size:15px;color:var(--moji);letter-spacing:.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right}
.ml-pd-pr i{display:block;font-family:var(--f-body);font-style:normal;font-size:11.5px;color:var(--moji-3);letter-spacing:.04em;margin-top:2px}
.ml-pd-inc{margin:7px 0 0;color:var(--moji-2);font-size:13px;line-height:1.85}
.ml-pd-data{margin:5px 0 0;color:var(--moji-3);font-size:12px;letter-spacing:.03em}

.ml-pd-styles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 8px}
.ml-pd-styles li{font-family:var(--f-disp);font-size:13.5px;letter-spacing:.02em;color:var(--midashi);
  border:1px solid var(--keisen);border-radius:2px;padding:5px 11px;background:var(--ji-2)}

.ml-pd-booths{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ml-pd-booths li{color:var(--moji-2);font-size:13.5px;line-height:1.8}
.ml-pd-booths b{font-family:var(--f-disp);color:var(--midashi);font-weight:400;letter-spacing:.02em}

.ml-pd-opts{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.ml-pd-opts .ml-pd-nm{font-size:15px}

.ml-pd-cta{margin:22px 0 0}

/* ── 流れ ── */
.ml-flow-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.ml-step{padding:6px clamp(18px,2.4vw,34px) 6px 0}
.ml-step + .ml-step{border-left:1px solid var(--keisen);padding-left:clamp(20px,2.6vw,38px)}
.ml-step .n{font-family:var(--f-lat);font-size:15px;letter-spacing:.2em;color:var(--enji);margin-bottom:16px}
.ml-step h3{font-family:var(--f-disp);font-size:18px;letter-spacing:.04em;margin-bottom:10px;color:var(--midashi)}
.ml-step p{color:var(--moji-2);font-size:13.5px;line-height:1.9;margin:0}

/* ── はじめての方へ ── */
.ml-know{background:var(--ji-2)}
.ml-know-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.ml-know-item .k{font-family:var(--f-lat);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--kogane-moji);margin-bottom:12px;display:block}
.ml-know-item p{margin:0;color:var(--moji-2);font-size:13.5px;line-height:1.95}

/* ── アクセス ── */
.ml-access-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);align-items:start}
.ml-acc-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 22px}
.ml-acc-dl dt{font-family:var(--f-lat);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--kogane-moji);padding-top:3px}
.ml-acc-dl dd{margin:0;color:var(--moji);font-size:14px;line-height:1.9}
.ml-acc-map{aspect-ratio:4/3;border:1px solid var(--keisen);background:
  repeating-linear-gradient(135deg,transparent 0 22px,rgba(var(--moji-rgb),.03) 22px 23px),
  radial-gradient(120% 90% at 70% 40%,rgba(var(--kogane-rgb,156,122,46),.14),transparent 60%),var(--ji-2);
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--moji-3);
  font-family:var(--f-lat);letter-spacing:.16em;text-transform:uppercase;font-size:12px;transition:color .3s}
a.ml-acc-map:hover{color:var(--enji)}
/* 地図はトップページと同じ Google Maps 埋め込み。背景の飾りは消し、iframe を全面に。 */
.ml-acc-map--embed{background:none;padding:0;overflow:hidden}
.ml-acc-map--embed iframe{width:100%;height:100%;border:0;display:block;filter:var(--chizu)}

/* ── 予約CTA ── */
.ml-cta{text-align:center;padding:clamp(62px,11vh,116px) 0}
.ml-cta h2{font-family:var(--f-disp);font-size:clamp(25px,4vw,42px);letter-spacing:.05em;color:var(--midashi);max-width:22ch;margin-inline:auto}
.ml-cta .ml-btn-go{margin-top:32px;display:inline-block}

/* ── フッター ── */
.ml-foot{border-top:1px solid var(--keisen);padding:44px 0 60px;color:var(--moji-3);font-size:12.5px;letter-spacing:.05em}
.ml-foot-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:baseline;justify-content:space-between}
.ml-fb{font-family:var(--f-lat);letter-spacing:.22em;text-transform:uppercase;color:var(--moji-2);font-size:13px}
.ml-fine{max-width:52ch;line-height:1.85;margin:16px 0 0;color:var(--moji-3)}
.ml-foot-r{text-align:right;line-height:1.9}
.ml-foot-r a:hover{color:var(--enji)}
.ml-copy{margin-top:8px;color:var(--moji-3)}

/* ── 含まれるものの「—」印を文字の中心に合わせる（CJKでは上にずれるため）── */
.ml-acc-body .pl-incl li::before{top:50%;transform:translateY(-50%)}

/* ── 季節別プラン（百鬼夜行の妖・四季彩狐）の期間見出し ── */
.ml-season + .ml-season{margin-top:clamp(22px,2.8vw,36px)}
.ml-season-h{margin:0 0 14px;font-family:var(--f-lat);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--kogane-moji)}

/* ── プランごとの重要事項（お申し込み前に必ずお読みください）── */
.ml-before-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--keisen)}
.ml-before-list li{position:relative;padding:12px 0 12px 18px;border-bottom:1px solid var(--keisen);font-size:12.5px;line-height:1.85;color:var(--moji-2)}
.ml-before-list li::before{content:"";position:absolute;left:0;top:calc(12px + 0.9em);width:7px;height:1px;background:var(--enji)}

/* ── 全プラン共通の有料オプション（末尾・畳んで見せる）── */
.ml-sec-sub{margin-top:10px;color:var(--moji-2);font-size:13.5px;line-height:1.9}
.ml-common-acc{border-top:1px solid var(--keisen)}
.ml-common-acc details{border-bottom:1px solid var(--keisen)}
.ml-common-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,2vw,22px) 0;font-family:var(--f-disp);font-size:clamp(15px,1.7vw,18px);color:var(--midashi)}
.ml-common-acc summary::-webkit-details-marker{display:none}
.ml-common-acc summary i{position:relative;flex:0 0 auto;width:12px;height:12px}
.ml-common-acc summary i::before,.ml-common-acc summary i::after{content:"";position:absolute;background:var(--kogane-moji);transition:opacity .3s}
.ml-common-acc summary i::before{top:5px;left:0;width:12px;height:1px}
.ml-common-acc summary i::after{top:0;left:5px;width:1px;height:12px}
.ml-common-acc details[open] summary i::after{opacity:0}
.ml-common-a{padding:0 0 clamp(18px,2.4vw,28px)}
.ml-common-list{display:grid;grid-template-columns:1fr auto;gap:8px clamp(18px,3vw,40px)}
.ml-common-list dt{color:var(--moji-2);font-size:13.5px;line-height:1.8}
.ml-common-list dd{margin:0;text-align:right;font-family:var(--f-disp);font-size:13.5px;color:var(--moji);white-space:nowrap}
.ml-common-note{margin:16px 0 0;padding-left:16px;border-left:2px solid var(--kogane);color:var(--moji-2);font-size:12.5px;line-height:1.85}

/* ── お申し込み前に、必ずお読みください（書き漏れ防止のため本ページと同じ注意事項）── */
.ml-notice-list{border-top:1px solid var(--keisen)}
.ml-notice-list > div{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,1fr);gap:clamp(14px,3vw,44px);padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--keisen)}
.ml-notice-list dt{font-family:var(--f-disp);font-size:15px;color:var(--midashi);letter-spacing:.04em}
.ml-notice-list dd{margin:0;color:var(--moji-2);font-size:13.5px;line-height:1.95}

@media (max-width:820px){
  .ml-common-list{grid-template-columns:1fr}
  .ml-common-list dd{text-align:left}
  .ml-notice-list > div{grid-template-columns:1fr;gap:8px}
  .ml-pd-top{flex-direction:column;gap:2px}
  .ml-pd-pr{text-align:left}
  .ml-pd-pr i{display:inline;margin-left:8px}
  .ml-flow-grid{grid-template-columns:1fr}
  .ml-step + .ml-step{border-left:0;border-top:1px solid var(--keisen);padding-left:0;padding-top:24px;margin-top:24px}
  .ml-know-grid{grid-template-columns:1fr;gap:24px}
  .ml-access-grid{grid-template-columns:1fr}
  .ml-note{text-align:left}
  .ml-wm small{display:none}
}
@media (max-width:560px){
  .ml-wm{display:none}
  .ml-book{padding:8px 12px;font-size:11.5px}
  .ml-lang{padding:6px 5px;font-size:11.5px}
  .ml-hero-kanji{opacity:.05}
}