/* ============================================================
   さ竹 SATAKE — Kyoto temple treatment
   和モダン / 自然素材   EN main + JA toggle
   配色はロゴ（若竹色 × 濃緑）に合わせています
   ============================================================ */

:root{
  /* 生成り・墨・竹 */
  --kinari:      #F3EFE7;
  --kinari-deep: #E8E2D6;
  --washi:       #FAF8F3;
  --sumi:        #1B1F19;
  --sumi-70:     #474C42;
  --sumi-45:     #797D71;

  /* ロゴ由来 */
  --bamboo:      #8CAB5F;   /* 若竹色 */
  --bamboo-deep: #003D20;   /* 濃緑：ロゴ実物から抽出した正確な値 */
  --deep:        #002815;   /* 濃緑の暗部：申込セクション背景 */

  --moss:        #003D20;
  --accent:      #6E8A4A;   /* 見出し番号・時刻などの差し色 */
  --wood:        #A88C6B;
  --gold:        #B7C68E;
  --line:        rgba(27,31,25,.14);
  --line-soft:   rgba(27,31,25,.07);

  --serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --serif-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans-ja:  "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --gut: clamp(20px, 5vw, 72px);
  --sec: clamp(80px, 12vw, 180px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
/* hidden 属性を確実に効かせる（display:flex/block の指定より優先させるため） */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--kinari);
  color:var(--sumi);
  font-family:var(--serif-en), var(--serif-ja);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden;
}
body[data-lang="ja"]{
  font-family:var(--serif-ja);
  line-height:2.05;
  letter-spacing:.06em;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:400; margin:0; letter-spacing:.04em; }
p{ margin:0 0 1.2em; }

::selection{ background:var(--moss); color:var(--washi); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ width:100%; max-width:720px; margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); position:relative; }
.section-alt{ background:var(--washi); }
.section-dark{ background:var(--deep); color:var(--kinari); }
.section-dark .section-num,
.section-dark .section-sub{ color:rgba(243,239,231,.55); }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:22px var(--gut);
  color:var(--washi);
  transition:background .5s var(--ease), color .5s var(--ease),
             padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-solid{
  background:rgba(243,239,231,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--sumi);
  padding-block:14px;
  box-shadow:0 1px 0 var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; flex:none; }
.brand-text{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.brand-mark{ font-family:var(--serif-ja); font-size:17px; letter-spacing:.28em; }
.brand-romaji{ font-family:var(--serif-en); font-size:10px; letter-spacing:.34em; opacity:.72; }
/* ヘッダーは横組みロゴ（assets/logo-wide.png / 1301:377）、
   フッターは縦組みロゴ（assets/logo.png）を使います。 */
.brand-logo{ width:auto; }
.brand-logo[hidden]{ display:none; }
.site-header .brand-logo{ height:30px; transition:height .5s var(--ease); }
.site-header.is-solid .brand-logo{ height:25px; }
/* ヒーローに重なっている間（背景が暗い間）だけ白抜きにする */
.site-header:not(.is-solid) .brand-logo{ filter:grayscale(1) invert(1); }
.brand-footer{ margin-right:0; }
.brand-footer .brand-logo{ height:96px; }

.nav{ display:flex; gap:20px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
body[data-lang="ja"] .nav{ font-size:11.5px; letter-spacing:.1em; text-transform:none; }
/* flex:none と nowrap が無いと、幅が詰まったとき「THE SETTING」が2行に折り返します */
.nav a{ position:relative; padding-block:4px; opacity:.85; transition:opacity .3s; white-space:nowrap; flex:none; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); }

.header-right{ display:flex; align-items:center; gap:16px; flex:none; }
/* Instagram。線の色は currentColor なので、ヘッダーが
   動画の上（生成り）でも生成り地（濃色）でも自動で合います */
.ig{ display:flex; align-items:center; flex:none; opacity:.75;
     transition:opacity .35s var(--ease); }
.ig:hover{ opacity:1; }
.ig svg{ display:block; }
.lang-toggle{ display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.12em; flex:none; }
.lang-toggle button{
  background:none; border:0; padding:2px 0; cursor:pointer;
  font:inherit; color:inherit; opacity:.5; transition:opacity .3s;
}
.lang-toggle button.is-active{ opacity:1; border-bottom:1px solid currentColor; }
.lang-sep{ opacity:.3; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--serif-en);
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  padding:15px 32px; border:1px solid currentColor; border-radius:0;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  cursor:pointer; background:none; color:inherit; line-height:1;
}
body[data-lang="ja"] .btn{ font-family:var(--serif-ja); letter-spacing:.18em; text-transform:none; font-size:13px; }
.btn:hover{ background:var(--sumi); color:var(--kinari); border-color:var(--sumi); }
.btn-sm{ padding:9px 17px; font-size:10px; letter-spacing:.14em; white-space:nowrap; }
.btn-ghost{ border-color:rgba(250,248,243,.5); color:var(--washi); }
.btn-ghost:hover{ background:var(--washi); color:var(--sumi); border-color:var(--washi); }
.btn-solid{
  background:var(--kinari); color:var(--sumi); border-color:var(--kinari);
  padding:17px 44px; width:100%; margin-top:8px;
}
.btn-solid:hover{ background:transparent; color:var(--kinari); border-color:var(--kinari); }
.site-header.is-solid .btn-sm:hover{ background:var(--sumi); color:var(--kinari); }

/* ---------- mobile menu ---------- */
.menu-btn{
  display:none; width:34px; height:34px; background:none; border:0;
  padding:0; cursor:pointer; position:relative; color:inherit;
}
.menu-btn span{
  position:absolute; left:5px; right:5px; height:1px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s;
}
.menu-btn span:nth-child(1){ top:14px; }
.menu-btn span:nth-child(2){ top:20px; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--kinari);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:28px; text-align:center; }
.mobile-menu a{ font-size:20px; letter-spacing:.16em; }
/* メニュー内のInstagramは、行き先が外部なので他のリンクより控えめに */
.mobile-menu .menu-ig{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:6px; padding-top:26px; border-top:1px solid var(--line-soft);
  font-size:14px; letter-spacing:.18em; color:var(--sumi-70);
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex;
  align-items:center; justify-content:center; text-align:center;
  color:var(--washi); overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 20%, #2f3329 0%, #14150F 60%, #0B0C08 100%);
}
.hero-media{ position:absolute; inset:0; }
.hero-media video{
  width:100%; height:100%; object-fit:cover;
  animation:heroIn 2.6s var(--ease) both;
}
@keyframes heroIn{ from{ opacity:0; transform:scale(1.06); } to{ opacity:1; transform:none; } }
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(11,12,8,.55) 0%, rgba(11,12,8,.28) 38%, rgba(11,12,8,.72) 100%);
}
/* z-index は指定しません。指定すると stacking context ができて、
   ロゴの mix-blend-mode が背景動画と合成されなくなるためです。
   DOM順で .hero-media / .hero-veil より後にあるので、これで前面に出ます。 */
.hero-inner{
  position:relative; padding:0 var(--gut);
  max-width:820px;
}
.hero-title{ margin:0 0 36px; animation:fadeUp 1.6s .5s var(--ease) both; }
.hero-logo{ height:clamp(140px, 24vh, 240px); width:auto; margin:0 auto; }
.hero-logo[hidden]{ display:none; }

/* 暗い背景の上ではロゴを白抜きにする（背景透過のロゴが前提）
   すでに白抜き版のロゴをご用意の場合は、HTMLから .on-dark クラスを外してください */
.on-dark{ filter:grayscale(1) invert(1); }
.hero-ja{
  display:block; font-family:var(--serif-ja);
  font-size:clamp(52px, 11vw, 108px); letter-spacing:.3em;
  text-indent:.3em; line-height:1.1; font-weight:400;
}
.hero-en{
  display:block; margin-top:20px; font-family:var(--serif-en);
  font-size:clamp(10px, 1.5vw, 13px); letter-spacing:.72em; text-indent:.72em;
  color:rgba(250,248,243,.62);
}
/* 旧 .hero-eyebrow（KYOTO — …）と同じ組み方。
   3行構成。最長行は45文字（A FEW DAYS…）。
   360px以上の端末では3行を保ちます（下のメディアクエリでサイズを可変）。 */
.hero-lead{
  white-space:pre-line;        /* HTML内の改行をそのまま行として扱う */
  font-size:12.5px;
  letter-spacing:.18em;
  padding-left:.18em;          /* 大文字＋字送りで生じる行末の余白を中央寄せ用に相殺 */
  text-transform:uppercase;
  line-height:2.9;
  color:rgba(250,248,243,.78);
  margin:0 auto 48px;
  max-width:58em;
  animation:fadeUp 1.6s .85s var(--ease) both;
}
body[data-lang="ja"] .hero-lead{
  text-transform:none; letter-spacing:.24em; padding-left:.24em;
  font-size:clamp(11px, 1.4vw, 13.5px); line-height:2.6; max-width:42em;
}
.hero .btn-ghost{ animation:fadeUp 1.6s 1.1s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.scroll-cue{ position:absolute; bottom:38px; left:50%; transform:translateX(-50%); z-index:2; }
.scroll-line{
  display:block; width:1px; height:64px;
  background:linear-gradient(to bottom, transparent, rgba(250,248,243,.75));
  animation:cue 2.6s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cue{ 0%{ transform:scaleY(0); opacity:0; } 40%{ opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

/* ---------- prologue ---------- */
/* 背景は assets/prologue.jpg（施術中の寺院の一室）。
   写真が暗いため、暗いスクリップを重ねて文字を白系にしています。
   写真を差し替えて明るくなった場合は、スクリムを濃くするか
   .prologue-text の色を濃色（var(--sumi-70)）に戻してください。 */
/* セクションの比率を写真（2000×1252 = 16:10）に合わせています。
   高さを固定値ではなく aspect-ratio で決めることで、
   どの幅でも写真がほとんど切れずに収まります。
   写真を差し替えて比率が変わったら、この 16/10 も合わせてください。 */
.prologue{
  position:relative; text-align:center;
  width:100%;                         /* これが無いと max-height に合わせて幅まで縮みます */
  aspect-ratio:16 / 10;
  min-height:360px;                   /* 文字が入りきらない極端に狭い幅への保険 */
  max-height:100svh;                  /* 超ワイド画面で1画面を超えないよう頭打ち */
  display:flex; align-items:center; justify-content:center;
  padding:40px 0;                     /* 左右は中の .wrap-narrow が持っています */
  background-color:var(--deep);       /* 読込前・写真が無いときの下地 */
  background-image:var(--img); background-size:cover; background-position:center;
}
.prologue::before{
  content:""; position:absolute; inset:0;
  /* 写真がもともと暗いので、スクリムは薄め。
     上下だけ濃くして、中央の文字まわりは写真が見えるようにしています */
  background:linear-gradient(to bottom, rgba(0,18,9,.62), rgba(0,18,9,.34) 45%, rgba(0,18,9,.68));
}
.prologue > *{ position:relative; }
.rule{
  width:1px; height:40px; background:rgba(243,239,231,.4);
  margin:0 auto 28px;
}
.prologue-text{
  white-space:pre-line; margin:0 auto; max-width:52ch;
  /* あえて小さく組み、写真に対して控えめに置いています */
  font-size:clamp(12.5px, 1.15vw, 16px); line-height:2.5; letter-spacing:.09em;
  color:rgba(243,239,231,.95);
  text-shadow:0 1px 20px rgba(0,12,6,.6);   /* 小さい字でも写真の明部で読めるように */
}

/* ---------- section heads ---------- */
.section-head{ max-width:640px; margin-bottom:clamp(48px,7vw,86px); }
.section-num{
  font-family:var(--serif-en); font-size:11px; letter-spacing:.4em;
  color:var(--sumi-45); margin:0 0 18px;
}
.section-title{ font-size:clamp(28px, 4.2vw, 46px); line-height:1.35; margin-bottom:20px; }
body[data-lang="ja"] .section-title{ font-size:clamp(24px,3.6vw,38px); letter-spacing:.12em; }
.section-sub{ color:var(--sumi-45); font-size:15px; margin:0; }

/* ---------- courses (施術＋料金 統合) ---------- */
.course-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-soft); border-block:1px solid var(--line-soft);
}
.course{
  background:var(--kinari); padding:clamp(34px,4vw,52px) clamp(24px,3vw,42px) clamp(30px,3.5vw,44px);
  display:flex; flex-direction:column; transition:background .6s var(--ease);
}
.section-alt .course{ background:var(--washi); }
.course:hover{ background:var(--washi); }
.course-num{
  display:block; font-family:var(--serif-ja); font-size:13px;
  letter-spacing:.3em; color:var(--accent); margin-bottom:24px;
}
.course-title{ font-size:clamp(21px,2.4vw,27px); line-height:1.4; margin-bottom:14px; }
.course-lead{ margin:0 0 22px; font-size:14px; letter-spacing:.06em; color:var(--accent); }
.course-body{ margin:0 0 26px; font-size:14.5px; line-height:2.05; color:var(--sumi-70); }
.course-parts{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.course-parts li{
  font-size:12px; letter-spacing:.1em; color:var(--sumi-70);
  border:1px solid var(--line); padding:6px 13px; border-radius:100px;
}
.course .price-rows{ margin-top:auto; }

/* ---------- setting ---------- */
/* 施術者セクションと同じ配置・同じ比率（左に写真・右に本文、3:2） */
.setting-grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(36px,6vw,80px); align-items:center;
}
.setting-media{
  aspect-ratio:3/2; background-color:var(--kinari-deep);
  background-image:
    linear-gradient(160deg, rgba(140,171,95,.10), rgba(0,61,32,.14) 70%),
    var(--img);
  background-size:cover; background-position:center;
}
.setting-body p{ font-size:15.5px; line-height:2.15; color:var(--sumi-70); }
.setting-body .note{
  border-left:1px solid var(--accent); padding-left:22px;
  font-size:14px; color:var(--sumi-45);
}

/* ---------- practitioner ---------- */
/* PCは左に写真・右に本文。写真は横長（3:2）なので、
   カラム幅いっぱいでも高さは本文と釣り合います */
.practitioner-grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(36px,6vw,80px); align-items:center;
}
/* 写真が入る前は緑のグラデーションだけが見えます。
   写真が入ったあとは色かぶりしないよう、ごく薄い膜だけ残しています */
.practitioner-media{
  aspect-ratio:3/2; background-color:var(--kinari-deep);
  background-image:
    linear-gradient(160deg, rgba(140,171,95,.10), rgba(0,61,32,.14) 70%),
    var(--img);
  background-size:cover; background-position:center;
}
.practitioner-body p{ font-size:15.5px; line-height:2.15; color:var(--sumi-70); }
.practitioner-name{ margin:0 0 26px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.pn-ja{ font-family:var(--serif-ja); font-size:22px; letter-spacing:.16em; color:var(--sumi); }
.pn-en{ font-family:var(--serif-en); font-size:11px; letter-spacing:.34em; color:var(--sumi-45); }
.spec{ list-style:none; padding:0; margin:38px 0 0; border-top:1px solid var(--line-soft); }
.spec li{
  display:flex; justify-content:space-between; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
}
.spec span{ color:var(--sumi-45); letter-spacing:.14em; }
.spec b{ font-weight:400; text-align:right; }

/* ---------- timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; max-width:760px; }
.timeline li{
  /* 「60 / 90 min」が入る幅を確保しています */
  display:grid; grid-template-columns:108px 1fr; gap:clamp(18px,4vw,44px);
  padding:30px 0; border-top:1px solid var(--line-soft);
}
.timeline li:last-child{ border-bottom:1px solid var(--line-soft); }
.t-time{
  font-family:var(--serif-en); font-size:13px; letter-spacing:.14em;
  color:var(--accent); padding-top:5px; white-space:nowrap;
}
body[data-lang="ja"] .t-time{ font-family:var(--serif-ja); letter-spacing:.08em; }
.timeline h3{ font-size:18px; margin-bottom:9px; }
.timeline p{ margin:0; font-size:14px; line-height:1.95; color:var(--sumi-70); }

/* ---------- 料金行 ---------- */
.price-rows{ list-style:none; margin:0; padding:0; }
.price-rows li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:14px 0; border-top:1px solid var(--line-soft);
}
.price-rows span{ font-size:13.5px; letter-spacing:.14em; color:var(--sumi-45); }
.price-rows b{ font-family:var(--serif-en); font-weight:400; font-size:clamp(21px,2.4vw,25px); letter-spacing:.04em; white-space:nowrap; }

/* お連れ様（有料オプション）— コース一覧と共通項目のあいだ */
.add-on{
  margin-top:clamp(34px,4.5vw,54px);
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,56px);
  align-items:center;
  padding:28px 0; border-top:1px solid var(--line);
}
.add-on h3{ font-size:clamp(17px,1.9vw,20px); margin-bottom:10px; }
.add-on p{ margin:0; font-size:14.5px; line-height:2; color:var(--sumi-70); max-width:60ch; }
.add-on-price{ min-width:190px; }
.add-on-price li{ border-top:0; padding:0; }

.includes{
  margin-top:clamp(44px,6vw,72px); padding:34px clamp(24px,4vw,44px);
  background:var(--bamboo-deep); color:var(--kinari);
}
.includes-title{
  margin:0 0 18px; font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(243,239,231,.6);
}
body[data-lang="ja"] .includes-title{ text-transform:none; letter-spacing:.2em; font-size:12.5px; }
.includes ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
/* 和文は文字単位でどこでも折り返されるため「お越し／ください」のように
   語の途中で割れます。keep-all で自動折り返しを止め、HTML側に入れた
   ​（ゼロ幅スペース）の位置＝文節の切れ目でのみ改行させています。
   overflow-wrap:anywhere は、区切りが足りない場合のはみ出し防止の保険です。 */
.includes li{
  position:relative; padding-left:20px; font-size:14.5px; line-height:1.85;
  word-break:keep-all; overflow-wrap:anywhere;
}
.includes li::before{
  content:""; position:absolute; left:0; top:.85em; width:7px; height:1px; background:var(--bamboo);
}
.fineprint{ margin-top:30px; font-size:12.5px; color:var(--sumi-45); }

/* ---------- dates ---------- */
.date-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.date-card{
  background:var(--kinari); padding:32px 26px 30px;
  display:flex; flex-direction:column; gap:14px;
  transition:background .5s var(--ease);
}
.date-card:hover{ background:var(--washi); }
.date-month{ font-family:var(--serif-en); font-size:11px; letter-spacing:.34em; color:var(--sumi-45); text-transform:uppercase; }
.date-day{ font-family:var(--serif-en); font-size:44px; line-height:1; letter-spacing:.02em; }
.date-dow{ font-size:12px; letter-spacing:.2em; color:var(--sumi-45); }
/* 1日3枠（10:00 / 13:00 / 16:00）の空き状況 */
.slots{
  list-style:none; margin:18px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line-soft); display:grid; gap:9px;
}
.slot{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-family:var(--serif-en); font-size:14px; letter-spacing:.1em;
}
.slot::before{
  content:""; order:-1; width:5px; height:5px; border-radius:50%;
  background:var(--moss); flex:none; align-self:center;
}
.slot span{ margin-right:auto; }
.slot em{
  font-style:normal; font-family:var(--serif-ja);
  font-size:10.5px; letter-spacing:.1em; color:var(--sumi-45);
}
.slot.is-taken{ color:var(--sumi-45); opacity:.5; }
.slot.is-taken::before{ background:var(--line); }
.slot.is-taken span{ text-decoration:line-through; }

.date-seats{
  margin-top:auto; padding-top:14px;
  font-size:12px; letter-spacing:.08em;
}
.date-seats b{ font-weight:400; }
.date-card.is-full{ opacity:.45; }
.date-card.is-full .date-seats{ color:var(--sumi-45); }
.date-card.is-few .date-seats b{ color:#8A5A3B; }

/* 日程が未定のときの「近日公開」 */
.date-grid.is-soon{ display:block; }
.dates-soon{
  text-align:center; padding:clamp(38px,6vw,64px) 24px;
  border:1px solid rgba(30,68,41,.16); border-radius:2px;
  background:rgba(140,171,95,.05);
}
.dates-soon-label{
  margin:0 0 18px; font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--bamboo-deep);
}
body[data-lang="ja"] .dates-soon-label{ text-transform:none; letter-spacing:.34em; font-size:13px; }
.dates-soon-body{
  margin:0 auto; max-width:44ch; font-size:14.5px; line-height:2.05; color:var(--sumi-70);
}

/* ---------- form ---------- */
/* 自動投稿よけ。display:none だと入力しない機械もいるため、
   画面外へ押し出す形で隠しています */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form{ margin-top:8px; }
.field{ margin-bottom:26px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field label{
  /* 直後の「必須」バッジと同じ行に並べるため inline-block にしています */
  display:inline-block; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(243,239,231,.55); margin-bottom:11px;
}
body[data-lang="ja"] .field label{ text-transform:none; letter-spacing:.14em; font-size:12.5px; }
.field input, .field select, .field textarea,
.fieldset input[type="text"]{
  width:100%; background:transparent; color:var(--kinari);
  border:0; border-bottom:1px solid rgba(243,239,231,.26);
  padding:11px 0; font:inherit; font-size:15px; border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; overflow:hidden; line-height:1.8; }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(243,239,231,.6) 50%),linear-gradient(135deg,rgba(243,239,231,.6) 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:26px; }
.field select option{ background:var(--sumi); color:var(--kinari); }
.field input:focus, .field select:focus, .field textarea:focus,
.fieldset input[type="text"]:focus{
  outline:none; border-bottom-color:var(--kinari);
}
.field input::placeholder, .field textarea::placeholder,
.fieldset input::placeholder{ color:rgba(243,239,231,.3); }
/* 必須バッジ */
.req{
  display:inline-block; margin-left:10px; vertical-align:1px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bamboo); border:1px solid rgba(140,171,95,.5);
  padding:2px 7px; border-radius:100px;
}
body[data-lang="ja"] .req{ text-transform:none; letter-spacing:.08em; font-size:10px; }
.req-note{ margin:0 0 18px; font-size:11.5px; line-height:1.8; color:rgba(243,239,231,.45); }

/* 項目の下に添える小さな説明 */
.field-note{
  margin:-4px 0 14px; font-size:11.5px; line-height:1.85;
  color:rgba(243,239,231,.42); max-width:52ch;
}

/* 第2希望・連絡先の入力欄など、項目の中の小項目 */
.subfield{ margin-top:14px; }
.subfield[hidden]{ display:none; }
.subfield-label{
  display:block; margin-bottom:5px;
  font-size:11px; letter-spacing:.1em; color:rgba(243,239,231,.42);
}
body[data-lang="ja"] .subfield-label{ letter-spacing:.06em; font-size:11.5px; }

/* fieldset（健康状態・認知経路） */
.fieldset{ border:0; padding:0; margin:0 0 26px; min-width:0; }
.fieldset legend{
  padding:0; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(243,239,231,.55); margin-bottom:11px;
}
body[data-lang="ja"] .fieldset legend{ text-transform:none; letter-spacing:.14em; font-size:12.5px; }

.check-group{ display:flex; flex-direction:column; gap:2px; }
.check-group .check{ margin:0; padding:7px 0; }
.check-group-cols{ display:grid; grid-template-columns:1fr 1fr; gap:2px 26px; }
.check-sub{ margin:2px 0 12px 26px; }
/* 詳細の記入欄は行を短く（プルダウンは全幅のまま） */
.subfield input[type="text"]{ max-width:420px; }

/* 送信前の最終確認 */
.confirm{
  margin:34px 0 30px; padding:24px 26px 8px;
  border:1px solid rgba(243,239,231,.16); border-radius:2px;
  background:rgba(243,239,231,.03);
}
.confirm-head{
  margin:0 0 16px; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(243,239,231,.55);
}
body[data-lang="ja"] .confirm-head{ text-transform:none; letter-spacing:.14em; font-size:12.5px; }
.confirm .check{ margin:0 0 16px; }

/* 未入力のあいだ、申し込みボタンは押せません */
.btn-solid:disabled{ opacity:.32; cursor:not-allowed; }
.btn-solid:disabled:hover{ background:var(--kinari); color:var(--sumi); border-color:var(--kinari); }

/* 送信後の完了パネル */
.form-done{ text-align:center; padding:clamp(28px,5vw,44px) 0 8px; }
.form-done[hidden]{ display:none; }
.form-done-mark{
  width:1px; height:44px; margin:0 auto 26px;
  background:linear-gradient(to bottom, transparent, rgba(140,171,95,.9));
}
.form-done h3{
  font-size:clamp(19px,2.2vw,24px); line-height:1.6; margin-bottom:18px;
  color:var(--kinari);
}
.form-done p{
  margin:0 auto; max-width:46ch; font-size:14.5px; line-height:2.05;
  color:rgba(243,239,231,.72);
}
.form-done-sub{
  margin-top:22px !important; padding-top:20px;
  border-top:1px solid rgba(243,239,231,.16);
  font-size:12.5px !important; color:rgba(243,239,231,.5) !important;
}

.check{ display:flex; gap:12px; align-items:flex-start; font-size:12.5px; color:rgba(243,239,231,.62); line-height:1.75; margin:6px 0 30px; cursor:pointer; }
.check input{ margin-top:5px; accent-color:var(--moss); flex:none; }
.form-status{ margin:20px 0 0; font-size:13px; min-height:1.4em; color:var(--gold); }
.form-status.is-error{ color:#D08B72; }

/* ---------- faq ---------- */
.faq details{ border-top:1px solid var(--line-soft); }
.faq details:last-child{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; padding:26px 40px 26px 0;
  position:relative; font-size:16px; letter-spacing:.04em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:1px;
  background:var(--sumi-45); transition:transform .4s var(--ease);
}
.faq summary::before{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:1px;
  background:var(--sumi-45); transform:rotate(90deg); transition:transform .4s var(--ease), opacity .3s;
}
.faq details[open] summary::before{ transform:rotate(0); opacity:0; }
.faq details p{ margin:0; padding:0 40px 30px 0; font-size:14.5px; color:var(--sumi-70); }
/* キャンセル規定の段階表 */
.cancel-tiers{ list-style:none; margin:0 40px 30px 0; padding:0; max-width:400px; }
.cancel-tiers li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 0; border-top:1px solid var(--line-soft); font-size:13.5px;
}
.cancel-tiers li:last-child{ border-bottom:1px solid var(--line-soft); }
.cancel-tiers span{ color:var(--sumi-45); letter-spacing:.08em; }
.cancel-tiers b{ font-weight:400; white-space:nowrap; }

/* ---------- footer ---------- */
.site-footer{ background:var(--washi); padding-block:clamp(56px,8vw,90px) 34px; border-top:1px solid var(--line-soft); }
.footer-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.footer-note{ margin:14px 0 0; font-size:12.5px; color:var(--sumi-45); }
.footer-nav{ display:flex; flex-direction:column; gap:11px; font-size:13px; }
.footer-nav a{ color:var(--sumi-70); transition:color .3s; }
.footer-nav a:hover{ color:var(--sumi); }
.copyright{ text-align:center; margin:clamp(44px,7vw,74px) 0 0; font-size:11px; letter-spacing:.24em; color:var(--sumi-45); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ヘッダーだけは他より早くハンバーガーに切り替える。
   横並びのまま詰め込むと「THE SETTING」が2行に折り返すため。
   （本文のスマホ用レイアウトは 760px から） */
@media (max-width:880px){
  .nav{ display:none; }
  /* 言語トグルはハンバーガーの左隣に残す（Requestボタンだけ畳む）。
     .header-right ごと隠すと、英日の切替がスマホから消えてしまいます */
  .header-right .btn-sm{ display:none; }
  .header-right{ gap:0; }
  .ig{ margin-right:14px; }
  .lang-toggle{ font-size:11px; letter-spacing:.14em; }
  .lang-toggle button{ padding:6px 2px; }
  .menu-btn{ display:block; }
  .site-header{ padding-block:16px; }
}

@media (max-width:1000px){
  /* 幅が足りなくなったら縦積みに切り替える */
  .setting-grid, .practitioner-grid{ grid-template-columns:1fr; }
  .setting-media,
  .practitioner-media{ margin-bottom:clamp(28px,4vw,44px); }
}

@media (max-width:760px){
  /* ヘッダーの畳み方は上の 880px の指定に任せます
     （ここで .header-right を消すと言語トグルまで消えます） */

  /* ▼ スマホのヒーローの高さ。100svh = 全画面。
     長すぎる／短すぎる場合はこの値だけ変えてください（例 72svh〜100svh） */
  .hero{ min-height:78svh; }
  .hero-logo{ height:clamp(105px, 17vh, 150px); }
  .scroll-cue{ bottom:26px; }
  .scroll-line{ height:46px; }
  /* 3行を全幅で維持する。最長行は45文字（A FEW DAYS…）なので、
     字送りを詰めたうえで幅に完全連動させる（320pxでも折り返さない値） */
  .hero-lead{
    font-size:clamp(8.4px, 2.65vw, 12.5px);
    letter-spacing:.05em; padding-left:.05em; line-height:2.7;
  }
  body[data-lang="ja"] .hero-lead{
    font-size:clamp(10.5px, 2.9vw, 13.5px); letter-spacing:.1em; padding-left:.1em;
  }
  .hero-ja{ letter-spacing:.24em; text-indent:.24em; }

  /* 縦長の画面では 16:10 の画像が横に切れる。
     下限の高さと内側の余白を詰めて、切れる量を減らす */
  .prologue{ min-height:300px; padding:28px 0; }
  .prologue .rule{ height:28px; margin-bottom:20px; }

  .course-list{ grid-template-columns:1fr; }
  .add-on{ grid-template-columns:1fr; gap:18px; }
  .add-on-price{ min-width:0; }

  .timeline li{ grid-template-columns:1fr; gap:8px; padding:24px 0; }
  .t-time{ padding-top:0; }

  .field-row{ grid-template-columns:1fr; gap:0; }
  .check-group-cols{ grid-template-columns:1fr; }
  .confirm{ padding:22px 18px 6px; }
  .check-sub{ margin-left:0; }
  .date-grid{ grid-template-columns:repeat(2,1fr); }
  .date-card{ padding:24px 18px; }
  .date-day{ font-size:34px; }
  .footer-grid{ flex-direction:column; }
}

/* スマホでも開催日は2列を維持する。
   幅が足りないので、残枠の「ドット」と「残りn組」を縦に積みます */
@media (max-width:460px){
  .date-grid{ grid-template-columns:repeat(2,1fr); }
  .date-card{ padding:20px 14px 18px; gap:10px; }
  .date-month{ font-size:9.5px; letter-spacing:.2em; }
  .date-day{ font-size:30px; }
  .date-dow{ font-size:11px; letter-spacing:.14em; }
  .slots{ margin-top:14px; padding-top:13px; gap:7px; }
  .slot{ font-size:12.5px; letter-spacing:.06em; }
  .slot em{ font-size:9.5px; }
  .date-seats{ padding-top:12px; font-size:11px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}