@charset "UTF-8";
/* =========================================================
SOL Pilates Studio — main stylesheet
Breakpoints: 1100px (tablet) / 700px (mobile)
========================================================= */
:root{
--bg:#FFFCF8;
--bg-warm:#FBF2E7;
--band:#F8E9D8;
--white:#FFFFFF;
--ink:#2B2725;
--ink-2:#3A342F;
--ink-3:#443D38;
--ink-4:#4B443E;
--muted:#786D65;
--muted-2:#A79D95;
--accent:#9A5C22;
--accent-lite:#B77A3E;
--gold:#CE9856;
--gold-lite:#EBB77E;
/* 2026-09-24の打ち合わせ:「全体的にダークグレーで色のメリハリが強すぎる」。
面で使う濃色をグレーから茶寄りに振り、大きな面は明るい側へ寄せた。
--deep-2 はオプション欄だけに使う黒（視認性のため黒地に白文字と決定）。 */
--deep:#33281F;
--deep-2:#171310;
--line:rgba(43,39,37,.17);
--line-soft:rgba(43,39,37,.12);
--serif:'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
--gothic:'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
--en:'Jost', sans-serif;
--en-serif:'Cormorant Garamond', serif;
--pad:96px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:var(--gothic);font-weight:300;line-height:1.9;
-webkit-font-smoothing:antialiased;overflow-x:clip;
/* 禁則処理。小書きのかなや句読点が行頭に来るのを防ぐ */
line-break:strict;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit;text-decoration:none;transition:color .3s ease}
a:hover{color:var(--accent)}
button{font-family:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
/* 日本語は任意の位置で折り返せるので、放っておくと最終行が1〜2文字だけになる。
balance は見出しの行を均等に割り、pretty は本文の最終行が極端に短くなるのを防ぐ。
非対応ブラウザは無視するだけなので、崩れることはない。 */
h2,h3,h4{text-wrap:balance}
p,li,dd{text-wrap:pretty}
ul,ol{list-style:none;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 文字を選択したときの色。既定の青はこのサイトの配色から浮くため、
マーカーで引いたような温かい色に差し替えている。 */
::selection{background:#F4D5AC;color:#2B2725;text-shadow:none}
::-moz-selection{background:#F4D5AC;color:#2B2725;text-shadow:none}
/* 和文の見出しに混ざる欧文（SOL など）は、字面の高さが和文より1割ほど低く、
そこだけ沈んで見える。実測で和文の字面/欧文の大文字高 ≒ 1.17 だったので、
その手前まで持ち上げて光学的にそろえる。 */
.en-in{font-size:1.12em;letter-spacing:.015em}
/* 改行の出し分け。定義が無いと
がPCでも効いてしまうので必ず対で持つ。 */
.sp-only{display:none}
@media (max-width:700px){
.sp-only{display:inline}
.pc-only{display:none}
}
/* ---------- layout ---------- */
.section{padding:130px var(--pad) 140px}
.section--warm{background:var(--bg-warm)}
.section--white{background:var(--bg)}
.section__label{
margin:0 0 22px;font-family:var(--en);font-size:11.5px;letter-spacing:.4em;
text-transform:uppercase;white-space:nowrap;color:var(--accent);
}
/* text-wrap は日本語の折り返しを均等に割ってくれる。非対応ブラウザは無視するだけ。 */
.section__title{margin:0;font-family:var(--serif);font-weight:500;font-size:38px;letter-spacing:.08em;line-height:1.5;text-wrap:balance}
.section__lead{margin:20px 0 0;font-size:14px;line-height:2.2;color:var(--ink-4);text-wrap:pretty}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:60px}
.section__head--center{flex-direction:column;align-items:center;text-align:center;gap:0}
.section__head--center .section__lead{max-width:640px}
.section__head .section__lead{width:420px;margin:0}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;
padding:20px 44px;font-family:var(--en);font-size:12px;letter-spacing:.22em;
text-transform:uppercase;white-space:nowrap;
transition:background .3s ease,color .3s ease,border-color .3s ease,transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
/* ホバーはわずかに浮かせる程度に留める（動きは控えめにという要望のため） */
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(43,39,37,.13)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn--dark{background:var(--deep);color:var(--bg)}
.btn--dark:hover{background:var(--accent-lite);color:var(--bg)}
.btn--accent{background:var(--accent);color:#FFF6EA}
.btn--accent:hover{background:var(--deep);color:#FFF6EA}
.btn--ghost{border:1px solid rgba(43,39,37,.28);color:var(--ink)}
.btn--ghost:hover{background:rgba(43,39,37,.05);border-color:rgba(43,39,37,.5);color:var(--ink)}
.btn--light{background:var(--bg);color:var(--ink)}
.btn--light:hover{background:var(--gold-lite);color:var(--ink)}
.btn--block{display:flex;width:100%;padding:16px;font-size:11.5px;letter-spacing:.2em}
.link-under{
display:inline-block;position:relative;font-family:var(--en);font-size:12px;letter-spacing:.22em;
text-transform:uppercase;white-space:nowrap;border-bottom:1px solid rgba(154,92,34,.35);padding-bottom:6px;
}
/* 下線が左から引き直されるように見せる */
.link-under::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent);
transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.link-under:hover::after{transform:scaleX(1)}
/* ---------- pre-open bar ---------- */
.prebook{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:26px;padding:20px var(--pad);background:var(--deep);color:#FFF6EA;text-align:center}
/* 数秒に一度だけ、温かい光がゆっくり流れる。
1周10秒のうち光が動いているのは最後の3.2秒ほどで、残りは静止している。 */
.prebook::after{
content:"";position:absolute;pointer-events:none;z-index:1;
top:-60%;bottom:-60%;left:0;width:32%;
background:linear-gradient(100deg,transparent 12%,rgba(244,213,172,.24) 40%,rgba(235,183,126,.38) 54%,rgba(206,152,86,.16) 70%,transparent 90%);
transform:translateX(-110%) skewX(-16deg);
/* 負の遅延で待機時間の途中から始め、読み込み直後（約1秒後）に1回目が流れるようにする */
animation:solPrebookShine 7s cubic-bezier(.4,0,.5,1) -3s infinite;
}
@keyframes solPrebookShine{
0%,58%{transform:translateX(-110%) skewX(-16deg)}
100%{transform:translateX(330%) skewX(-16deg)}
}
.prebook>*{position:relative;z-index:2}
.prebook__tag{padding:7px 18px;border:1px solid rgba(235,183,126,.6);background:rgba(235,183,126,.12);color:#F4D5AC;font-family:var(--en);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.prebook p{margin:0;font-family:var(--serif);font-size:18px;letter-spacing:.08em;line-height:1.7;text-wrap:balance}
/* 本文のうちオープン時期だけ暖色にして、他の文字と差をつける */
.prebook strong{font-weight:500;color:var(--gold)}
/* 前半（日付）と後半（訴求）は、それぞれの内部では改行させない。
禁止しないと「オープン」の途中などで切れる。入りきらないときは
この2つのあいだで折り返る。区切りの「｜」は前半側に付けてある。 */
.prebook__when,.prebook__what{white-space:nowrap}
.prebook a{font-family:var(--en);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#FFF6EA;border-bottom:1px solid rgba(255,246,234,.6);padding-bottom:3px}
.prebook a:hover{color:#FFF}
.image-note{margin:0;padding:0 var(--pad) 90px;font-size:12.5px;line-height:1.9;letter-spacing:.04em;color:var(--muted)}
/* ---------- header ---------- */
.site-header{
position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;
align-items:center;gap:20px;padding:22px 56px;
background:rgba(255,252,248,.9);backdrop-filter:blur(14px);
border-bottom:1px solid rgba(43,39,37,.07);
}
.site-header__nav{display:flex;flex-wrap:wrap;gap:8px 17px;font-family:var(--en);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;color:var(--ink-2)}
.site-header__nav a{padding-bottom:3px;border-bottom:1px solid transparent}
.site-header__nav a:hover{border-bottom-color:var(--accent-lite)}
/* ナビが8項目あり、1360px を下回るとロゴとの間で折り返してしまう。
ヘッダーが2段になると安っぽく見えるので、余白と字送りを詰めて1行に保つ。
1100px以下ではナビ自体を隠してドロワーに切り替わる（後述のブレークポイント）。 */
@media (max-width:1360px){
.site-header{padding:20px 32px;gap:16px}
.site-header__nav{gap:8px 13px;font-size:10.5px;letter-spacing:.06em}
}
.site-header__logo{display:block;justify-self:center;width:148px}
.site-header__logo img{width:148px}
.site-header__side{display:flex;align-items:center;justify-content:flex-end;gap:24px}
.site-header__tel{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--muted)}
.site-header__cta{padding:16px 34px;border-radius:999px;font-family:var(--gothic);font-size:14px;letter-spacing:.1em;text-transform:none;
transition:background .3s ease,color .3s ease,transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,opacity .35s ease,visibility .35s}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;border:none;background:transparent;cursor:pointer}
.burger span{display:block;height:1px;background:var(--ink)}
/* ---------- drawer (mobile nav) ---------- */
.drawer{
position:fixed;inset:0;z-index:70;display:none;flex-direction:column;
padding:18px;background:var(--bg);overflow-y:auto;
}
.drawer.is-open{display:flex;animation:solRise .35s ease both}
.drawer__top{display:flex;align-items:center;justify-content:space-between;height:44px}
.drawer__mark{font-family:var(--en-serif);font-size:22px;letter-spacing:.3em}
.drawer__close{width:44px;height:44px;border:none;background:transparent;font-family:var(--en);font-size:20px;cursor:pointer}
.drawer__nav{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid var(--line-soft)}
.drawer__nav a{display:flex;align-items:baseline;gap:14px;padding:17px 2px;border-bottom:1px solid var(--line-soft)}
.drawer__en{width:74px;font-family:var(--en);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.drawer__ja{font-family:var(--serif);font-size:15px;letter-spacing:.06em}
.drawer__actions{display:flex;gap:10px;margin-top:26px}
.drawer__actions a{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px;text-align:center;border:1px solid rgba(43,39,37,.25);font-family:var(--en);font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
/* ドロワーは幅に余裕があるので、固定バーと違いラベルを残してアイコンを添える */
.drawer__actions svg{width:20px;height:20px;flex:none}
.drawer__actions .is-ig svg{color:#C9377D}
/* ---------- hero ---------- */
.hero{position:relative;min-height:880px;padding-bottom:64px;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;animation:solDrift 26s ease-in-out infinite alternate}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,252,248,.97) 0%,rgba(255,252,248,.9) 26%,rgba(255,250,244,.4) 48%,rgba(255,246,232,.06) 66%,rgba(255,214,160,.08) 100%)}
.hero__body{position:relative;width:740px;padding:104px 0 0 var(--pad);animation:solRise 1.2s cubic-bezier(.22,.61,.36,1) both}
/* PCでは写真を全面に敷くと中央のアーチ（入口）が見出しと重なるため、
写真を見出しの右側だけに置き、左端を背景色へ溶かして文字とアーチの領域を分ける */
@media (min-width:1101px){
.hero{--hero-img-left:max(46%,calc(var(--pad) + 640px))}
/* img は置換要素なので width:auto だと right:0 が効かず原寸幅になる。幅を明示する */
.hero__img{left:var(--hero-img-left);width:calc(100% - var(--hero-img-left));object-position:50% 50%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.hero__scrim{background:linear-gradient(90deg,rgba(255,252,248,0) 60%,rgba(255,214,160,.08) 100%)}
/* 見出しの下にも写真をうっすら透かす。アーチが二重に見えないよう、写真の左端（アーチより左の壁、横0〜36%）だけを拡大して使う */
.hero::before{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(var(--hero-img-left) + 14%);
background:linear-gradient(90deg,rgba(255,252,248,.92) 0%,rgba(255,252,248,.8) 45%,rgba(255,252,248,.45) 100%),var(--hero-bg) left top/278% auto no-repeat;
-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
}
.hero__eyebrow{margin:0 0 30px;font-family:var(--en);font-size:12px;line-height:1.9;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-lite)}
/* 打ち合わせ後にコピーが長くなり、62pxでは「自分を整える時間を。」が
枠(740px - 左余白96px = 644px)に収まらず「を。」だけ次行に落ちていた。 */
.hero__title{margin:0;font-family:var(--serif);font-weight:500;font-size:57px;line-height:1.5;letter-spacing:.08em}
.hero__note{width:480px;margin:34px 0 0;padding-top:30px;border-top:1px solid rgba(43,39,37,.2)}
/* サイトで最も伝えたい要点。本文ではなく見出しの続きとして見せる */
.hero__sub{margin:30px 0 0;max-width:560px;font-size:22px;font-weight:400;line-height:1.95;letter-spacing:.05em;color:var(--ink)}
.hero__chips{display:flex;gap:14px;margin-top:40px}
.chip{display:flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid rgba(183,122,62,.3);background:rgba(255,252,248,.62)}
.chip>span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.5;letter-spacing:.04em;color:var(--ink-2)}
.chip__sub{font-size:11.5px;color:var(--muted)}
.chip__icon{flex:none;color:var(--accent-lite)}
.btn--arrow{justify-content:flex-start;gap:12px;min-width:300px;padding:22px 30px;font-family:var(--gothic);font-size:14.5px;letter-spacing:.14em;text-transform:none}
.btn--arrow svg{width:18px;height:18px;flex:none}
/* 矢印だけ右端へ。アイコンと文言は左に固める */
.btn--arrow span{margin-left:auto}
.btn--arrow span{font-family:var(--en);font-size:15px;line-height:1;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.btn--arrow:hover span{transform:translateX(5px)}
.btn--ghost.btn--arrow{min-width:250px;background:rgba(255,252,248,.7)}
.btn--ghost.btn--arrow:hover{background:var(--bg)}
.hero__lead{margin:26px 0 0;font-size:16px;line-height:2.05;letter-spacing:.07em;color:var(--accent-lite)}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.hero__scroll{position:absolute;right:56px;bottom:44px;display:flex;align-items:center;gap:14px;font-family:var(--en);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#7A716A}
.hero__scroll::before{content:"";display:block;width:64px;height:1px;background:rgba(122,113,106,.5)}
/* ---------- opening banner（ファーストビュー直後のキャンペーン画像） ---------- */
.opening-banner{padding:clamp(28px,4vw,48px) var(--pad);background:var(--bg)}
.opening-banner__link{display:block;max-width:1100px;margin:0 auto}
.opening-banner__img{width:100%;height:auto;border-radius:4px}
/* ---------- marquee ---------- */
.marquee{padding:26px 0;background:var(--band);overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;gap:56px;animation:solMarquee 34s linear infinite;font-family:var(--en-serif);font-size:30px;letter-spacing:.14em;color:#D0A876}
/* ---------- concept ---------- */
/* 写真列を固定幅にすると、1440px未満で文章列が潰れて見出しが崩れる。
1440px時の比率を保ったまま縮むよう、比率指定にしている。 */
.concept{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:90px;align-items:center;padding:150px var(--pad) 140px}
.concept__figure{position:relative}
.concept__figure img{width:100%;height:480px;object-fit:cover;object-position:50% 22%}
.concept__glow{position:absolute;right:-46px;bottom:-46px;width:200px;height:200px;border-radius:999px;
background:radial-gradient(circle at 34% 30%,rgba(255,231,190,1),rgba(240,178,104,.6) 62%,rgba(240,178,104,0) 76%)}
.concept__title{margin:0 0 34px;font-family:var(--serif);font-weight:500;font-size:clamp(30px,2.7vw,38px);line-height:1.72;letter-spacing:.08em}
.concept p{margin:0 0 26px;font-size:15px;line-height:2.5;color:var(--ink-3)}
/* ---------- features ---------- */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px}
.feature__figure{width:100%;height:210px;margin-bottom:30px;border-radius:160px 160px 6px 6px;overflow:hidden;background:#EDE3D8}
.feature__figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.feature__figure:hover img{transform:scale(1.05)}
.feature .feature__num{margin:0 0 20px;font-family:var(--en-serif);font-style:italic;font-size:40px;line-height:1;color:var(--gold)}
.feature__title{margin:0 0 16px;font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:.09em;line-height:1.7}
.feature p{margin:0;font-size:14px;line-height:2.3;color:var(--ink-4)}
/* ---------- gallery ---------- */
/* 5枚そろったときの非対称グリッドが基本。写真が少ないあいだは
空きが出ないよう、枚数に応じて組み方を変える（--2 / --3 / --4）。 */
.gallery__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:300px 240px;gap:18px}
.gallery__grid>*{overflow:hidden;background:#EDE3D8}
.gallery__grid>*:first-child{grid-row:span 2}
.gallery__grid--2{grid-template-columns:1fr 1fr;grid-template-rows:400px}
.gallery__grid--3{grid-template-columns:1.4fr 1fr;grid-template-rows:200px 200px}
.gallery__grid--3>*:nth-child(2),.gallery__grid--3>*:nth-child(3){grid-column:2}
.gallery__grid--4{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:300px}
.gallery__grid--4>*:first-child{grid-row:auto}
.gallery__grid--2>*:first-child,.gallery__grid--4>*:first-child{grid-row:auto}
.gallery__grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.gallery__grid a:hover img,.gallery__grid figure:hover img{transform:scale(1.05)}
.ph{position:relative;background:var(--bg-warm)}
.ph span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 16px;background:rgba(255,252,248,.88);
font-family:var(--en);font-size:10.5px;letter-spacing:.18em;white-space:nowrap;color:#7A6C5C}
.ph__inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--accent-lite)}
.ph__icon{width:34%;max-width:52px;height:auto;opacity:.55}
.ph__inner em{font-style:normal;font-family:var(--en);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:#8A7A68}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:64px;padding-top:46px;border-top:1px solid var(--line-soft)}
.step__label{margin:0 0 12px;font-family:var(--en);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.step__title{margin:0 0 12px;font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.07em}
.steps p{margin:0;font-size:13.5px;line-height:2.2;color:var(--ink-4)}
/* ---------- lesson menu ---------- */
.lesson-photo{height:460px;margin:0 0 64px;overflow:hidden;background:#EDE3D8}
.lesson-photo img{width:100%;height:100%;object-fit:cover;object-position:45% 32%}
.menu-list{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
/* 本文の行数がカードごとに違っても「〜におすすめ」を下端でそろえるため、縦のflexにする */
.menu-item{display:flex;flex-direction:column;border-top:1px solid rgba(43,39,37,.2);padding-top:26px;transition:border-color .3s ease}
.menu-item:hover{border-top-color:var(--accent-lite)}
.menu-item__figure{width:100%;height:240px;margin-bottom:28px;overflow:hidden;background:#EDE3D8}
.menu-item__figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.menu-item:hover .menu-item__figure img{transform:scale(1.05)}
.menu-item .menu-item__label{margin:0 0 22px;font-family:var(--en);font-size:11px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
/* レッスン名は英字（Basic など）。Cormorant を先に置くことで、英字はこちら、
日本語のレッスン名を入れたときは Shippori Mincho へ自然に落ちる。 */
.menu-item__title{margin:0 0 12px;font-family:'Cormorant Garamond',var(--serif);font-weight:500;font-size:27px;letter-spacing:.04em}
/* 強度。3段階のうちどのあたりかが一目で分かるよう、満たない分も薄く出す */
.menu-item__level{display:block;margin:0 0 18px;font-size:12px;letter-spacing:.3em;color:rgba(43,39,37,.22)}
.menu-item__level .is-on{color:var(--accent-lite)}
.menu-item p{margin:0;font-size:14px;line-height:2.3;color:var(--ink-4)}
/* 「〜におすすめ」。本文と混ざらないよう、罫線で区切って小さく置く。
`.menu-item p` のほうが詳細度が高いので、カードを含めた指定にしないと余白が効かない。
margin-top:auto で、本文が短いカードでも罫線の高さが行内でそろう。 */
.menu-item .menu-item__rec{margin:18px 0 0;margin-top:auto;padding-top:16px;
border-top:1px solid rgba(43,39,37,.1);font-size:13px;line-height:1.95;color:var(--accent)}
.menu-item__rec span{color:var(--ink-4);opacity:.75}
/* ---------- campaign band ---------- */
.campaign{display:flex;align-items:center;justify-content:center;gap:26px;padding:20px var(--pad);background:var(--accent);color:#FFF6EA;text-align:center}
.campaign__tag{padding:5px 14px;border:1px solid rgba(255,246,234,.5);font-family:var(--en);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.campaign p{margin:0;font-family:var(--serif);font-size:18px;letter-spacing:.08em;line-height:1.7}
.campaign a{font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid rgba(255,246,234,.6);padding-bottom:3px;color:#FFF6EA}
.campaign a:hover{color:#FFF}
/* ---------- price ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:stretch}
.plan{padding:54px 44px 48px;background:var(--white);border:1px solid rgba(43,39,37,.12)}
/* 人気No.1のプランは黒地をやめ、生成り＋茶の罫線と影で立たせる。 */
.plan--featured{position:relative;background:var(--bg-warm);color:var(--ink);border-color:var(--accent-lite);box-shadow:0 16px 38px rgba(154,92,34,.13)}
/* 「人気No.1」が入るので、英字前提の大文字化と広い字間はやめる。 */
.plan__badge{position:absolute;top:0;left:44px;transform:translateY(-50%);padding:8px 20px;background:var(--accent);color:#FFF;
font-family:var(--gothic);font-size:12px;letter-spacing:.08em;text-transform:none;white-space:nowrap}
.plan__en{margin:0 0 8px;font-family:var(--en-serif);font-size:15px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.plan--featured .plan__en{color:var(--accent)}
.plan__count{margin:0 0 30px;font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:.06em}
.plan__price{margin:0 0 6px;font-family:var(--en);font-weight:300;font-size:44px;letter-spacing:.01em}
.plan__unit{margin:0 0 34px;font-family:var(--en);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.plan--featured .plan__unit{color:var(--muted)}
.plan__note{margin:0 0 34px;font-size:13.5px;line-height:2.3;color:var(--ink-4)}
.plan--featured .plan__note{color:var(--ink-4)}
.plan .btn--block{border:1px solid rgba(43,39,37,.25)}
.plan .btn--block:hover{background:var(--deep);color:var(--bg);border-color:var(--deep)}
.plan--featured .btn--block{background:var(--accent);color:#FFF6EA;border:none}
.plan--featured .btn--block:hover{background:var(--deep);color:#FFF6EA}
.price__note{margin:34px 0 0;text-align:center;font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.plan__perk{display:flex;align-items:baseline;gap:10px;margin:0 0 26px;padding:12px 14px;background:var(--bg-warm);font-size:12.5px;line-height:1.8;letter-spacing:.03em;color:var(--ink-2)}
.plan__perk span{color:var(--accent)}
.plan--featured .plan__perk{background:rgba(154,92,34,.10);color:var(--ink-2)}
.plan--featured .plan__perk span{color:var(--accent)}
.plan__unit{margin-bottom:26px}
/* personal lesson */
.personal{display:grid;grid-template-columns:1.15fr 1fr;margin-top:80px;border:1px solid rgba(183,122,62,.34)}
.personal__main{padding:54px 56px 50px;background:var(--bg-warm)}
.personal__title{margin:0 0 22px;font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:.07em;line-height:1.6}
.personal__body{margin:0 0 32px;font-size:14.5px;line-height:2.3;letter-spacing:.04em;color:var(--ink-2)}
.personal__spec{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding-top:28px;border-top:1px solid rgba(43,39,37,.16)}
.personal__spec dt{margin:0 0 8px;font-family:var(--en);font-size:10px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.personal__spec dd{margin:0;font-size:14px;letter-spacing:.03em;color:var(--ink)}
/* 黒地ではなくテラコッタ地に。濃さではなく色でメリハリを付ける。 */
.personal__plus{display:flex;flex-direction:column;justify-content:center;padding:54px 48px 50px;background:var(--accent);color:#FFF6EA}
.personal__plus-label{margin:0 0 16px;font-family:var(--en);font-size:11px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;color:#F4D5AC}
.personal__plus-title{margin:0 0 20px;font-family:var(--serif);font-weight:500;font-size:25px;letter-spacing:.07em;line-height:1.7}
.personal__plus-price{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-family:var(--en);font-weight:300;font-size:40px;letter-spacing:.01em}
.personal__plus-price span{font-size:12px;letter-spacing:.1em;color:#F0D9BC}
.personal__plus-body{margin:0 0 30px;font-size:13.5px;line-height:2.2;color:#F7E7D5}
/* 「料金に含まれるもの」を削除して1カラムになったので、中央寄せの1列に戻す。 */
.price__detail{max-width:680px;margin:56px auto 0}
.mini-label{margin:0 0 18px;font-family:var(--en);font-size:11px;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.mini-title{margin:0 0 26px;font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:.07em}
.included{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.included li{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--ink-2)}
.included li::before{content:"✓";color:var(--accent)}
/* 2026-09-24の打ち合わせ:オプションは視認性のため黒地に白文字と決定。 */
.options{padding:34px 40px 36px;background:var(--deep-2);color:#F5EFE7}
.options .mini-label{color:var(--gold-lite)}
.options ul{display:flex;flex-direction:column;gap:14px;font-size:13.5px}
.options li{display:flex;justify-content:space-between;gap:20px;padding-bottom:13px;border-bottom:1px solid rgba(245,239,231,.16)}
.options li:last-child{padding-bottom:0;border-bottom:none}
.options li span{font-family:var(--en);font-size:15px;letter-spacing:.02em;color:#FFF}
/* 「Payment」の小さな英字ラベルでは見落とされるため、
和文の見出しとして立て、支払い方法も読める大きさにしている。 */
.payments{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:44px}
.payments__label{position:relative;padding-bottom:12px;font-family:var(--serif);font-weight:500;font-size:16px;letter-spacing:.1em;white-space:nowrap;color:var(--ink)}
.payments__label::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:26px;height:1px;background:var(--accent-lite)}
.payments ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.payments li{padding:11px 22px;border:1px solid var(--accent-lite);background:var(--white);font-size:13px;letter-spacing:.05em;white-space:nowrap;color:var(--ink-2)}
.compare{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr}
.compare>div{padding:18px 10px;text-align:center;border-bottom:1px solid var(--line-soft);font-family:var(--en);font-size:15px;color:var(--accent)}
.compare>div.is-row{padding:18px 4px;text-align:left;font-family:var(--gothic);font-size:14px;color:var(--ink-2)}
.compare>div.is-null{color:var(--muted-2)}
.compare>div.is-head{padding:0 10px 14px;border-bottom:1px solid rgba(43,39,37,.3);font-size:11px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#5A524B}
.compare>div.is-head.is-featured{border-bottom-color:var(--accent);color:var(--accent)}
.compare>div.is-head.is-blank{border-bottom:1px solid rgba(43,39,37,.3)}
/* ---------- flow ---------- */
/* 日本語の見出しは、語の途中で折り返されて1〜2文字だけ次行に残ると崩れて見える。
balance で行の長さを揃えて防ぐ（非対応環境では無視される）。
word-break:auto-phrase は文節優先で折り返せるが、要素の最小幅を押し上げるため、
min-width:auto のグリッド列を広げてページ全体が横に溢れる。採用しない。 */
.hero__title,.section__title,.concept__title,.band__title,.feature__title,.flow__title,
.menu-item__title,.page-hero__title,.personal__title,.step__title,.trial__title,.voice__title{
text-wrap:balance;
}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.flow__card{display:flex;flex-direction:column;padding:40px 32px 36px;background:var(--bg);border:1px solid rgba(43,39,37,.1)}
/* 本文の行数がカードごとに違っても、所要時間の行は下端でそろえる */
.flow__card>div{display:flex;flex-direction:column;flex:1}
/* `.flow__card p` のほうが詳細度が高いため、カードを含めた指定にしないと
番号が本文と同じサイズに潰れてしまう */
.flow__card .flow__num{margin:0 0 18px;font-family:var(--en-serif);font-style:italic;font-size:48px;line-height:1;color:var(--gold)}
.flow__title{margin:0 0 14px;font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.06em}
.flow__card p{margin:0 0 18px;font-size:13.5px;line-height:2.1;color:var(--ink-4)}
.flow__card .flow__meta{margin:auto 0 0}
.flow__meta{margin:0;font-family:var(--en);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
/* 黒地をやめ、白地＋茶の罫線に。流れのセクション（生成り）から浮き上がる。 */
.trial{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;margin-top:70px;padding:54px 60px;background:var(--white);color:var(--ink);border:1px solid var(--accent-lite);box-shadow:0 16px 38px rgba(154,92,34,.10)}
.trial .trial__label{margin:0 0 16px;font-family:var(--en);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.trial__title{margin:0 0 20px;font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:.07em}
.trial p{margin:0;font-size:14px;line-height:2.2;color:var(--ink-4)}
.trial__spec{display:flex;flex-direction:column;gap:16px}
.trial__spec li{display:flex;justify-content:space-between;gap:20px;padding-bottom:12px;border-bottom:1px solid var(--band);font-size:13.5px}
.trial__spec li span{color:var(--muted)}
/* ---------- instructor / voice cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;max-width:900px}
.staff__name--en{margin:0 0 18px;font-family:var(--en);font-weight:400;font-size:28px;letter-spacing:.16em}
.staff__figure{height:340px;margin-bottom:26px;overflow:hidden;background:#EDE3D8}
.staff__figure img{width:100%;height:100%;object-fit:cover}
.staff .staff__role{margin:0 0 10px;font-family:var(--en);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.staff__name{margin:0 0 6px;font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.08em}
.staff .staff__en{margin:0 0 16px;font-family:var(--en-serif);font-style:italic;font-size:15px;letter-spacing:.08em;color:var(--muted-2)}
.staff p{margin:0 0 16px;font-size:13.5px;line-height:2.1;color:var(--ink-4)}
.staff p:last-child{margin-bottom:0}
.voice{padding:50px 42px 44px;background:var(--white);border:1px solid rgba(43,39,37,.11)}
.voice .voice__quote{margin:0 0 22px;font-family:var(--en-serif);font-size:52px;line-height:.6;color:#E0A868}
.voice__title{margin:0 0 20px;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.8;letter-spacing:.06em}
.voice p{margin:0 0 30px;font-size:13.5px;line-height:2.2;color:var(--ink-4)}
.voice__meta{margin:0;font-family:var(--en);font-size:11.5px;letter-spacing:.14em;color:var(--muted)}
/* ---------- schedule ---------- */
.split{display:grid;grid-template-columns:320px 1fr;gap:90px}
.timetable{border-top:1px solid rgba(43,39,37,.25)}
.timetable li{display:grid;grid-template-columns:100px 1fr 150px;gap:20px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line-soft)}
.timetable time{font-family:var(--en);font-size:14px;letter-spacing:.06em;color:var(--accent)}
.timetable .lv{font-family:var(--en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
/* ---------- cta band ---------- */
.band{position:relative;height:420px;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.band__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,32,22,.3),rgba(43,32,22,.46))}
.band__body{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:0 22px;text-align:center;color:var(--bg)}
.band__sub{margin:0 0 24px;font-family:var(--en-serif);font-style:italic;font-size:22px;letter-spacing:.08em;color:#F4D5AC}
.band__title{margin:0 0 38px;font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.7;letter-spacing:.1em}
/* ---------- topics ---------- */
.topics__list{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.topics__list a{display:grid;grid-template-columns:110px 120px 1fr;gap:28px;align-items:center;padding:28px 4px;border-top:1px solid var(--line);transition:background .3s ease}
.topics__list a:hover{background:var(--bg-warm);color:inherit}
.topics__date{font-family:var(--en);font-size:13px;letter-spacing:.1em;color:var(--muted)}
.topics__cat{padding:6px 0;text-align:center;border:1px solid rgba(183,122,62,.6);font-family:var(--en);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.topics__title{font-size:15px;letter-spacing:.04em}
/* ---------- studio & access ---------- */
.studio{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-warm)}
.studio__body{padding:130px 80px 130px var(--pad)}
.studio__table{display:grid;grid-template-columns:130px 1fr;row-gap:26px;column-gap:20px;font-size:14.5px;line-height:2.1}
.studio__table dt{font-family:var(--en);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);padding-top:6px}
.studio__table dd{margin:0;color:var(--ink-2)}
.studio__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:52px}
.studio__actions .btn{padding:18px 38px;font-size:11.5px;letter-spacing:.2em}
.studio__map{min-height:620px;background:#E8E6DF}
.studio__map iframe{display:block;width:100%;height:100%;min-height:620px;border:0}
/* ---------- faq ---------- */
/* PCは左の細い列に2行で。スマホは .section__title の共通サイズで1行（改行は pc-only） */
.faq__title{font-size:34px;line-height:1.7}
.faq__list{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.faq__item summary{
display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:30px 4px;
border-top:1px solid var(--line);font-family:var(--serif);font-size:17px;line-height:1.7;letter-spacing:.05em;
cursor:pointer;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__q{display:flex;align-items:baseline;gap:18px}
.faq__q::before{content:"Q";font-family:var(--en-serif);font-style:italic;font-size:20px;color:var(--gold)}
.faq__mark{font-family:var(--en);font-size:13px;color:var(--accent)}
.faq__item[open] .faq__mark{color:var(--accent)}
.faq__a{display:flex;gap:18px;padding:4px 40px 30px 4px}
.faq__a::before{content:"A";font-family:var(--en-serif);font-style:italic;font-size:20px;color:var(--gold)}
.faq__a p{margin:0;font-size:14px;line-height:2.3;color:var(--ink-3)}
/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:420px 1fr;gap:96px;padding:140px 150px 150px var(--pad)}
.contact__info{display:flex;flex-direction:column;gap:22px;padding-top:34px;border-top:1px solid var(--line-soft)}
.contact__info div{display:flex;flex-direction:column;gap:6px}
.contact__info dt,.contact__info .k{font-family:var(--en);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--accent)}
.contact__tel{font-family:var(--en);font-size:20px;letter-spacing:.06em}
.contact__mail{font-family:var(--en);font-size:17px;letter-spacing:.04em}
.contact__form{padding:62px 64px;background:var(--white);border:1px solid rgba(43,39,37,.12)}
/* Contact Form 7 */
.contact__form .wpcf7-form{display:flex;flex-direction:column;gap:34px}
.cf7-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.cf7-field{display:flex;flex-direction:column;gap:12px}
.cf7-label{font-family:var(--en);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.cf7-label .req{color:var(--accent)}
.contact__form input[type=text],
.contact__form input[type=email],
.contact__form input[type=tel],
.contact__form select,
.contact__form textarea{
width:100%;padding:12px 2px;border:none;border-bottom:1px solid rgba(43,39,37,.22);
background:transparent;font-family:var(--gothic);font-size:16px;color:var(--ink);
outline:none;border-radius:0;appearance:none;
}
.contact__form textarea{line-height:1.9;resize:vertical}
.contact__form input:focus,.contact__form select:focus,.contact__form textarea:focus{border-bottom-color:var(--accent)}
.cf7-consent{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3)}
.cf7-consent input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.cf7-consent-link{margin:8px 0 0;font-size:12px}
.cf7-consent-link a{display:inline-flex;align-items:center;gap:6px;color:var(--accent);border-bottom:1px solid rgba(154,92,34,.4)}
/* 別タブで開くことが見て分かるようにアイコンを添える（入力中に離脱させないため） */
.cf7-consent-link a::after{content:"";width:11px;height:11px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
/* reCAPTCHAのバッジは右下固定で、PCの縦バー・SPの下部バーと重なるため隠す。
代わりに .contact__recaptcha で規約を明示している（Googleが認める方法）。 */
.grecaptcha-badge{visibility:hidden}
/* 営業お断りの一文。主張させると「営業が多い店」の印象が先に立つため、最小限に */
.contact__notice{margin:16px 0 0;font-size:11px;line-height:1.9;letter-spacing:.04em;color:var(--muted-2)}
.contact__recaptcha{margin:10px 0 0;font-size:11.5px;line-height:1.9;letter-spacing:.04em;color:var(--muted)}
.contact__recaptcha a{color:var(--muted);border-bottom:1px solid rgba(120,109,101,.4)}
.contact__form .wpcf7-list-item{margin:0}
.contact__form input[type=submit]{
align-self:flex-start;padding:20px 56px;border:none;background:var(--accent);color:#FFF6EA;
font-family:var(--en);font-size:12px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
transition:background .3s ease,transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
.contact__form input[type=submit]:hover{background:var(--accent-lite);transform:translateY(-2px);box-shadow:0 10px 22px rgba(43,39,37,.13)}
.contact__form input[type=submit]:active{transform:translateY(0);box-shadow:none}
.wpcf7 form .wpcf7-response-output{margin:0;padding:16px 20px;border:1px solid var(--line);font-size:13.5px}
/* ---------- footer ---------- */
.site-footer{padding:100px var(--pad) 44px;background:var(--deep);color:#DAD2CB}
.site-footer__inner{display:grid;grid-template-columns:1fr auto;align-items:start;gap:60px;padding-bottom:70px;border-bottom:1px solid rgba(255,252,248,.14)}
.site-footer__mark{margin:0 0 24px;font-family:var(--en-serif);font-size:34px;letter-spacing:.34em;color:var(--bg)}
.site-footer__sub{margin:0;font-family:var(--en);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted-2)}
.site-footer__copy{margin:32px 0 0;font-family:var(--serif);font-size:15px;letter-spacing:.14em;color:#F4D5AC}
.site-footer__nav{display:grid;grid-template-columns:repeat(3,150px);gap:36px;font-family:var(--en);font-size:12px;letter-spacing:.14em}
.site-footer__nav ul{display:flex;flex-direction:column;gap:16px}
.site-footer__nav a:hover{color:var(--gold-lite)}
.site-footer__legal-links{margin:34px 0 0;font-family:var(--en);font-size:11px;letter-spacing:.1em;color:#8B817A;display:flex;gap:22px;flex-wrap:wrap}
.site-footer__legal-links a{color:#8B817A}
.site-footer__legal-links a:hover{color:var(--gold-lite)}
.site-footer__legal{margin:14px 0 0;font-family:var(--en);font-size:11px;letter-spacing:.16em;color:#8B817A}
/* ---------- fixed side rail (PC) ---------- */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:1px;width:58px;max-height:calc(100vh - 120px)}
.rail a,.rail button{
display:flex;align-items:center;justify-content:center;
background:rgba(255,252,248,.96);border:1px solid rgba(43,39,37,.1);border-right:none;
backdrop-filter:blur(8px);font-family:var(--en);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-2);writing-mode:vertical-rl;transition:background .3s ease,color .3s ease;cursor:pointer;
}
.rail a:hover,.rail button:hover{background:var(--deep);color:var(--bg)}
/* 連絡手段はアイコンのみ。形と色で見分けられるので、文字は省いて正方形に揃える。
体験予約だけは主要導線なので、アイコンと文字を併記して大きく残す。
縦書き（vertical-rl）では flex の row が上下方向になるため、アイコンが文字の上に並ぶ。 */
.rail__ig,.rail__line,.rail__tel,.rail__mail{height:58px}
.rail__ig svg,.rail__line svg,.rail__tel svg,.rail__mail svg{width:20px;height:20px;flex:none}
.rail__ig svg{color:#C9377D}
/* `.rail a` のほうが詳細度が高いため、塗りの指定は a を含めた形で書く必要がある
（クラス名だけだと背景が上書きされ、塗りつぶしのCTAにならない） */
.rail a.rail__cta{height:152px;gap:9px;background:var(--deep);border-color:var(--deep);color:var(--bg);font-family:var(--gothic);font-size:13px;letter-spacing:.14em;text-transform:none}
.rail a.rail__cta svg{width:19px;height:19px;flex:none}
.rail a.rail__cta:hover{background:var(--accent-lite);color:var(--bg)}
/* ---------- fixed bottom bar (SP) ---------- */
.spbar{
position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;align-items:stretch;gap:8px;
padding:10px 14px 14px;background:rgba(255,252,248,.95);backdrop-filter:blur(12px);
border-top:1px solid rgba(43,39,37,.1);opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.spbar.is-on{opacity:1;pointer-events:auto}
.spbar a{display:flex;align-items:center;justify-content:center;height:50px;
font-family:var(--en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
/* 連絡手段はアイコンのみ。体験予約はアイコン＋文字で主要導線として目立たせる */
.spbar .is-tel,.spbar .is-line,.spbar .is-ig{flex:0 0 52px;border:1px solid rgba(43,39,37,.25);color:var(--ink-2)}
.spbar .is-tel svg,.spbar .is-line svg,.spbar .is-ig svg{width:21px;height:21px;display:block}
.spbar .is-ig svg{color:#C9377D}
.spbar .is-cta{flex:1;gap:7px;background:var(--deep);color:var(--bg);font-family:var(--gothic);font-size:12px;letter-spacing:.1em;text-transform:none}
.spbar .is-cta svg{width:17px;height:17px;flex:none}
/* ---------- ローディング ---------- */
/* 内装と特長欄の写真枠に共通するアーチを一筆書きする。
ロゴや文字を使わず、この店の形そのものを記号にしている。
背景はベース色をほんの少し暖色へ寄せ、明ける際に本編が下からせり上がる。 */
.loader{
position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
background:radial-gradient(135% 105% at 50% 42%,#FFFDFA 0%,#F9F0E2 100%);
transition:opacity .85s ease;
}
.loader__arch{width:96px;height:136px;overflow:visible}
.loader__arch path{
fill:none;stroke:var(--accent-lite);stroke-width:1.2;stroke-linecap:round;
stroke-dasharray:1;stroke-dashoffset:1;
animation:solArchDraw 1.3s cubic-bezier(.5,.05,.2,1) forwards;
}
.loader.is-done{opacity:0}
/* 読み込み中は、背後で始まってしまう動きを止めておく */
html.is-loading{overflow:hidden}
html.is-loading .hero__body,html.is-loading .prebook::after{animation-play-state:paused}
/* 明ける瞬間だけ、本編を下からせり上げる */
html.is-revealing .site-header,html.is-revealing #main{
animation:solReveal 1s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes solArchDraw{
to{stroke-dashoffset:0}
}
@keyframes solReveal{
0%{transform:translateY(28px);opacity:0}
100%{transform:none;opacity:1}
}
/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
.loader{display:none}
[data-reveal]{opacity:1;transform:none;transition:none}
.hero__img,.marquee__track{animation:none}
.prebook::after{display:none}
.btn:hover,.contact__form input[type=submit]:hover{transform:none;box-shadow:none}
.btn--arrow:hover span{transform:none}
html{scroll-behavior:auto}
}
/* ---------- inner pages ---------- */
.page-hero{padding:90px var(--pad) 60px;border-bottom:1px solid var(--line-soft)}
.page-hero__label{margin:0 0 18px;font-family:var(--en);font-size:11.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent)}
.page-hero__title{margin:0;font-family:var(--serif);font-weight:500;font-size:34px;letter-spacing:.08em}
.entry{max-width:760px;margin:0 auto;padding:80px var(--pad) 120px;font-size:15px;line-height:2.3;color:var(--ink-3)}
.entry h2{margin:56px 0 20px;font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:.06em;color:var(--ink);text-wrap:balance}
.entry h3{margin:40px 0 16px;font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.06em;color:var(--ink);text-wrap:balance}
.entry p{margin:0 0 26px}
.entry ul,.entry ol{margin:0 0 26px;padding-left:22px;list-style:disc}
.entry img{margin:26px 0}
.entry a{color:var(--accent);border-bottom:1px solid rgba(154,92,34,.4)}
.entry-meta{display:flex;gap:16px;align-items:center;margin-bottom:20px;font-family:var(--en);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.pagination{display:flex;justify-content:center;gap:10px;padding:0 var(--pad) 100px;font-family:var(--en);font-size:13px;letter-spacing:.1em}
.pagination .page-numbers{padding:10px 16px;border:1px solid var(--line)}
.pagination .current{background:var(--deep);color:var(--bg);border-color:var(--deep)}
/* ---------- keyframes ---------- */
@keyframes solMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes solRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes solDrift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
/* =========================================================
Tablet — 1100px
========================================================= */
@media (max-width:1100px){
.cards-2{grid-template-columns:1fr 1fr;gap:30px;max-width:none}
:root{--pad:40px}
.site-header{padding:16px 24px}
.site-header__nav,.site-header__tel{display:none}
.site-header{grid-template-columns:auto 1fr auto;gap:12px}
.site-header__logo{justify-self:start}
.burger{display:flex}
.rail{display:none}
.hero{height:auto;min-height:640px;padding-bottom:60px}
.hero__body{width:auto;max-width:660px;padding:70px 40px 0}
.hero__title{font-size:48px}
.hero__note{width:auto;max-width:520px}
.concept{grid-template-columns:1fr;gap:44px;padding:100px 40px}
.concept__figure img{height:380px}
/* 1カラムになると写真が画面端まで広がるため、はみ出す装飾の光を内側に寄せる */
.concept__glow{right:-18px;bottom:-26px;width:150px;height:150px}
.features{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.gallery__grid,.gallery__grid--2,.gallery__grid--3,.gallery__grid--4{grid-template-columns:1fr 1fr;grid-template-rows:260px 220px;grid-auto-rows:220px}
.gallery__grid>*:first-child{grid-row:auto}
.gallery__grid--2{grid-template-rows:300px}
.gallery__grid--3>*:nth-child(2),.gallery__grid--3>*:nth-child(3){grid-column:auto}
.menu-list{grid-template-columns:1fr 1fr}
.plans{grid-template-columns:1fr;gap:40px}
.plan__badge{left:24px}
.price__detail{grid-template-columns:1fr;gap:50px}
.personal{grid-template-columns:1fr;margin-top:56px}
.personal__main{padding:40px 34px 36px}
.personal__plus{padding:40px 34px 36px}
.flow{grid-template-columns:1fr 1fr}
.trial{grid-template-columns:1fr;gap:34px;padding:40px}
.cards-3{grid-template-columns:1fr 1fr;gap:30px}
.split{grid-template-columns:1fr;gap:40px}
.studio{grid-template-columns:1fr}
.studio__body{padding:90px 40px}
.studio__map,.studio__map iframe{min-height:400px}
.lesson-photo{height:360px;margin-bottom:48px}
.contact{grid-template-columns:1fr;gap:50px;padding:100px 40px}
.contact__form{padding:44px 34px}
.site-footer{padding:80px 40px 40px}
.site-footer__inner{grid-template-columns:1fr;gap:44px}
.site-footer__nav{grid-template-columns:repeat(3,1fr)}
.spbar{display:flex}
}
/* =========================================================
Mobile — 700px
========================================================= */
@media (max-width:700px){
:root{--pad:22px}
body{font-size:14px}
.section{padding:76px 22px 80px}
/* スマホでは左右の余白ぶん画像が縮み、中の文字が小さく見えるため、
この帯だけ横を余白ゼロにして画面幅いっぱいに見せる。 */
.opening-banner{padding-left:0;padding-right:0}
.opening-banner__img{border-radius:0}
.section__head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:30px}
.section__head .section__lead{width:auto}
.section__title{font-size:clamp(21px,6.6vw,26px)}
.section__lead{font-size:13px;line-height:2.1}
.site-header{padding:12px 18px}
.site-header__logo,.site-header__logo img{width:104px}
.site-header__cta{padding:13px 22px;font-size:12px;letter-spacing:.14em}
/* 下部バーが出たら、同じ「体験予約」が画面に2つ並ばないようヘッダー側を引っ込める。
場所は確保したまま消すことで、中央のロゴがずれないようにしている。 */
html.is-spbar .site-header__cta{opacity:0;visibility:hidden;transform:translateY(-6px)}
.hero{height:auto;min-height:0;padding-bottom:62px}
.hero__img{object-position:50% 50%}
.hero__scrim{background:linear-gradient(168deg,rgba(255,252,248,.97) 0%,rgba(255,252,248,.93) 44%,rgba(255,250,244,.74) 66%,rgba(255,214,160,.14) 100%)}
.hero__body{padding:44px 22px 0}
.hero__eyebrow{margin-bottom:24px;font-size:11px;letter-spacing:.26em}
/* 「自分を整える時間を。」の10文字が1行に収まる上限から逆算している。
左右の余白22px×2を引いた幅を、1文字あたりの送り（1em＋字間）で割った値。 */
.hero__title{font-size:clamp(22px,calc((100vw - 44px) / 10.8),34px);line-height:1.55;letter-spacing:.04em}
.hero__note{width:auto;margin-top:28px;padding-top:24px}
.hero__sub{margin-top:22px;font-size:clamp(14px,calc((100vw - 44px) / 17.8),18px);line-height:1.95}
/* 写真が透けてテラコッタ色が沈むため、スマホでは濃いほうのアクセント色にする */
.hero__lead{margin-top:20px;font-size:14.5px;line-height:2;color:var(--accent)}
.hero__chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.chip{flex-direction:column;gap:8px;padding:14px 8px;text-align:center}
.chip>span{align-items:center;font-size:11.5px;line-height:1.6}
.hero__actions{flex-direction:column;gap:12px;margin-top:28px}
.hero__actions .btn--arrow{width:100%;min-width:0;padding:20px 24px;font-size:14.5px;letter-spacing:.1em}
.hero__scroll{display:none}
.marquee{padding:16px 0}
.marquee__track{gap:34px;font-size:20px}
.concept{padding:76px 22px 80px}
.concept__title{font-size:clamp(21px,6.6vw,26px);margin-bottom:22px}
.concept p{font-size:13.5px;line-height:2.3}
.concept__figure img{height:260px}
.concept__glow{right:-14px;bottom:-22px;width:116px;height:116px}
.features{grid-template-columns:1fr;gap:40px}
.feature{display:grid;grid-template-columns:108px minmax(0,1fr);gap:18px;align-items:start}
.feature__figure{height:138px;margin-bottom:0;border-radius:60px 60px 4px 4px}
.feature .feature__num{font-size:26px;margin-bottom:8px}
.feature__title{font-size:17px;margin-bottom:10px}
.feature p{font-size:13px;line-height:2.05}
.gallery__grid{display:flex;overflow-x:auto;gap:12px;margin:0 -22px;padding:0 22px 12px;scrollbar-width:none}
.gallery__grid::-webkit-scrollbar{display:none}
.gallery__grid>*{flex:0 0 230px;height:300px}
.gallery__grid>*:first-child{flex-basis:250px}
.steps{grid-template-columns:1fr;gap:24px;margin-top:34px;padding-top:30px}
.menu-list{grid-template-columns:1fr;gap:26px}
.menu-item{border-top:none;padding-top:0}
.menu-item__figure{height:190px;margin-bottom:16px}
.menu-item__title{font-size:22px;margin-bottom:8px}
.menu-item__level{margin-bottom:12px}
.menu-item p{font-size:13px;line-height:2.05}
.menu-item .menu-item__rec{margin-top:14px;padding-top:12px;font-size:12.5px}
.prebook{flex-direction:column;gap:9px;padding:18px 22px}
/* 以前は字数から逆算した clamp を使っていたが、文言を変えるたびにずれる。
上の nowrap で切れ方を決めているので、素直な可変幅にしている。 */
.prebook p{font-size:clamp(14px,4vw,17px);line-height:1.8}
.prebook__tag{padding:6px 16px;font-size:11.5px;letter-spacing:.2em}
.prebook a{display:none}
.image-note{padding:0 22px 60px;font-size:11.5px}
.campaign{flex-direction:column;gap:10px;padding:20px 22px}
.campaign p{font-size:15px;line-height:1.8}
.plan{padding:30px 24px 26px}
.plan--featured{padding-top:34px}
.plan__badge{left:24px;padding:6px 14px;font-size:9.5px}
.plan__count{font-size:22px;margin-bottom:14px}
.plan__price{font-size:34px}
.plan__unit{font-size:11px;margin-bottom:16px}
.plan__note{font-size:12.5px;line-height:2;margin-bottom:20px}
.plan__perk{margin-bottom:18px;padding:11px 13px;font-size:12px;line-height:1.75}
.personal{margin-top:44px}
.personal__main,.personal__plus{padding:30px 22px 28px}
.personal__title{font-size:22px;line-height:1.65;margin-bottom:16px}
.personal__body{font-size:13px;line-height:2.15;margin-bottom:22px}
.personal__spec{grid-template-columns:1fr;gap:12px;padding-top:20px}
.personal__spec div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.personal__spec dt{margin:0;font-size:9.5px;letter-spacing:.2em}
.personal__spec dd{font-size:13px}
.personal__plus-title{font-size:20px}
.personal__plus-price{font-size:32px}
.personal__plus-body{font-size:12.5px;line-height:2.05;margin-bottom:22px}
.price__note{font-size:11.5px;line-height:1.9}
.price__detail{margin-top:50px}
.included{gap:10px 16px}
.included li{font-size:12.5px}
.compare>div{padding:13px 2px;font-size:12px}
.compare>div.is-row{font-size:12px}
.compare>div.is-head{font-size:9.5px;letter-spacing:.14em}
.flow{grid-template-columns:1fr;gap:12px}
.flow__card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;padding:22px 20px}
.flow__card .flow__num{font-size:40px;margin:0}
.flow__title{font-size:17px;margin-bottom:8px}
.flow__card p{font-size:12.5px;line-height:2;margin-bottom:10px}
.trial{margin-top:30px;padding:30px 24px}
.trial__title{font-size:22px}
.trial p{font-size:13px;line-height:2.1}
.cards-3,.cards-2{display:flex;overflow-x:auto;gap:14px;margin:0 -22px;padding:0 22px 8px;scrollbar-width:none;max-width:none}
.cards-3::-webkit-scrollbar,.cards-2::-webkit-scrollbar{display:none}
.cards-3>*,.cards-2>*{flex:0 0 250px}
#instructor .cards-3,#instructor .cards-2{display:grid;grid-template-columns:1fr;gap:44px;margin:0;padding:0;overflow:visible}
#instructor .cards-3>*,#instructor .cards-2>*{flex:none}
.staff__name--en{font-size:23px;letter-spacing:.14em;margin-bottom:14px}
.staff__figure{height:280px;margin-bottom:16px}
.staff__name{font-size:19px}
.voice{flex-basis:268px;padding:30px 24px 26px}
.voice__title{font-size:17px}
.voice p{font-size:12.5px;line-height:2.05;margin-bottom:20px}
.timetable li{grid-template-columns:62px 1fr;gap:12px;padding:15px 2px}
.timetable .lv{display:none}
.band{height:340px}
.band__sub{font-size:17px;margin-bottom:16px}
.band__title{font-size:clamp(18px,5.9vw,23px);margin-bottom:28px}
.topics__list a{grid-template-columns:1fr;gap:10px;padding:20px 2px}
.topics__cat{justify-self:start;padding:4px 10px}
.topics__title{font-size:14px;line-height:1.8}
.studio__body{padding:60px 22px 76px}
.studio__table{grid-template-columns:1fr;row-gap:16px}
.studio__table dt{padding-top:0}
.studio__actions{gap:10px;margin-top:30px}
.studio__actions .btn{flex:1;padding:16px 10px;font-size:10.5px;letter-spacing:.14em}
.studio__map,.studio__map iframe{min-height:300px}
.lesson-photo{height:240px;margin-bottom:34px}
.faq__item summary{padding:20px 2px;font-size:15px;gap:14px}
.faq__q{gap:12px}
.faq__a{padding:0 8px 20px 2px;gap:12px}
.faq__a p{font-size:13px;line-height:2.15}
.contact{padding:76px 22px 80px}
.contact__form{padding:30px 22px 28px}
.contact__form .wpcf7-form{gap:24px}
.cf7-grid{grid-template-columns:1fr;gap:24px}
.contact__form input[type=submit]{align-self:stretch;width:100%;padding:18px}
.site-footer{padding:60px 22px 110px}
.site-footer__mark{font-size:28px}
.site-footer__nav{grid-template-columns:1fr 1fr;gap:14px 20px}
.site-footer__nav ul{gap:14px}
.entry{padding:60px 22px 90px;font-size:14px}
.page-hero{padding:50px 22px 34px}
.page-hero__title{font-size:26px}
.pagination{padding:0 22px 90px}
}
/*--------------- Group × Personal（循環） ---------------*/
/* 実物写真が撮れるのは内装引き渡し（10/17）以降なので、
当面は線画のアイコンを丸に収めて代替している。 */
.cycle{padding:clamp(72px,9vw,120px) 22px;background:var(--bg-warm)}
.cycle__head{max-width:980px;margin:0 auto clamp(44px,5vw,72px);text-align:left}
.cycle__title{margin-top:8px;font-family:var(--serif);font-weight:500;font-size:clamp(23px,2.7vw,33px);line-height:1.7;color:var(--ink);text-wrap:balance}
.cycle__lead{max-width:620px;margin-top:18px;color:var(--muted);font-size:13.5px;line-height:2.1;text-wrap:pretty}
.cycle__steps{max-width:980px;margin:0 auto;display:grid;gap:0}
.cycle__step{position:relative;display:grid;grid-template-columns:120px 1fr 260px;align-items:center;gap:28px;padding:26px 0}
/* 手順をつなぐ縦の線と矢印 */
.cycle__step:not(:last-child)::after{content:'';position:absolute;left:59px;bottom:-14px;width:1px;height:28px;background:var(--accent-lite)}
.cycle__step:not(:last-child)::before{content:'';position:absolute;left:55px;bottom:-16px;width:9px;height:9px;border-right:1px solid var(--accent-lite);border-bottom:1px solid var(--accent-lite);transform:rotate(45deg)}
.cycle__mark{position:relative;width:120px;height:120px}
.cycle__icon{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--white);border:1px solid var(--band);color:var(--accent)}
.cycle__svg{width:52px;height:52px}
.cycle__num{position:absolute;top:-4px;left:-4px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--white);font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.04em}
.cycle__en{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.24em;color:var(--accent-lite)}
.cycle__name{margin-top:8px;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.7;color:var(--ink)}
.cycle__text{margin-top:8px;font-size:13.5px;line-height:2;color:var(--muted)}
.cycle__list{padding:18px 20px;background:var(--white);border-radius:4px}
.cycle__list-label{font-size:11.5px;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.cycle__list ul{display:grid;gap:6px}
.cycle__list li{position:relative;padding-left:20px;font-size:12.5px;line-height:1.9;color:var(--ink-3)}
.cycle__list li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:5px;border-left:1.5px solid var(--accent-lite);border-bottom:1.5px solid var(--accent-lite);transform:rotate(-45deg)}
/* 最後から最初へ戻る流れを言葉で示す */
.cycle__loop{max-width:980px;margin:22px auto 0;padding-left:20px;font-size:11.5px;letter-spacing:.1em;color:var(--accent-lite);text-align:right}
.cycle__loop::after{content:'↻';margin-left:8px;font-size:15px}
/* 締めは廣瀬さん共有の案どおり、罫線＋中央のテキストだけ。 */
.cycle__close{max-width:760px;margin:clamp(48px,6vw,80px) auto 0;padding-top:clamp(40px,5vw,64px);
border-top:1px solid var(--band);text-align:center}
.cycle__close h3{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.4vw,26px);line-height:1.9;color:var(--ink);text-wrap:balance}
.cycle__close p{margin-top:18px;font-size:14px;line-height:2.1;color:var(--muted);text-wrap:pretty}
@media (max-width:860px){
.cycle__step{grid-template-columns:84px 1fr;gap:18px}
.cycle__mark{width:84px;height:84px}
.cycle__svg{width:38px;height:38px}
.cycle__num{width:28px;height:28px;font-size:11px}
.cycle__list{grid-column:1 / -1;margin-top:4px}
.cycle__step:not(:last-child)::after{left:41px}
.cycle__step:not(:last-child)::before{left:37px}
.cycle__loop{text-align:center;padding-left:0}
}
/*--------------- Trouble（お悩み） ---------------*/
.trouble{padding:clamp(72px,9vw,120px) 22px;background:var(--bg-warm)}
/* 見出しの寄せ方はセクションごとに変えている。中央に大きな見出しが続くと
「どんっと」した印象になるため、お悩み＝中央／理由＝左右振り分け／循環＝左寄せ。 */
.trouble__head{max-width:720px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.trouble__title{margin-top:14px;font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.9vw,34px);line-height:1.7;color:var(--ink);text-wrap:balance}
.trouble__lead{margin-top:20px;font-size:14px;line-height:2.15;color:var(--muted);text-wrap:pretty}
.trouble__list{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
/* 角丸を辺ごとに変えて、有機的なかたちにする */
.trouble__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
min-height:180px;padding:30px 24px;text-align:center;background:var(--white);
border-radius:48% 52% 45% 55% / 52% 45% 55% 48%}
.trouble__item:nth-child(even){border-radius:54% 46% 56% 44% / 46% 55% 45% 54%}
.trouble__check{display:grid;place-items:center;flex:none;align-self:center;width:42px;height:42px;border-radius:50%;
background:var(--bg-warm);border:1px solid var(--accent-lite);color:var(--accent)}
.trouble__svg{width:22px;height:22px}
.trouble__item p{font-size:14px;line-height:1.95;color:var(--ink-2);word-break:auto-phrase;overflow-wrap:anywhere;text-wrap:balance}
.trouble__close{max-width:760px;margin:clamp(48px,6vw,80px) auto 0;text-align:center}
.trouble__close-lead{font-size:13.5px;color:var(--muted)}
.trouble__close-title{margin-top:10px;font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.9vw,32px);line-height:1.8;color:var(--accent)}
.trouble__close-body{margin-top:20px;font-size:14px;line-height:2.15;color:var(--muted)}
.trouble__sign{margin-top:34px;padding-top:26px;border-top:1px solid var(--band);
font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.28em;color:var(--muted-2);text-transform:uppercase}
/*--------------- Reason（選ばれる3つの理由） ---------------*/
/* 生成りの面が3つ続かないよう、お悩み（生成り）→理由（白）→循環（生成り）で交互にする。 */
.reason{padding:clamp(72px,9vw,120px) 22px;background:var(--bg)}
.reason__head{max-width:1020px;margin:0 auto clamp(40px,5vw,64px);display:grid;gap:14px;text-align:left}
/* 幅があるときだけ左右に振り分ける。狭いときは素直に縦積み。 */
@media (min-width:901px){
.reason__head{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:end;gap:18px 56px;
grid-template-areas:"label ." "title lead"}
.reason__head .section__label{grid-area:label}
.reason__head .reason__title{grid-area:title}
.reason__head .reason__lead{grid-area:lead;margin-bottom:.35em}
}
.reason__title{margin-top:6px;font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.9vw,35px);line-height:1.6;color:var(--ink);text-wrap:balance}
/* Cormorant Garamond の数字はオールドスタイル体で、3 はベースラインより下へ出る。
ライニング数字（高さのそろった字形）に直したこともあるが、崩れた字形のほうが
味があるという判断でオールドスタイルのまま使う。lnum は指定しないこと。
ただし字形そのままだと和文より沈んで見えるので、位置だけ持ち上げている。
実測（和文の字面の中心 +13.2px / 3の中心 +3.5px）から 0.15em が best。 */
.reason__title em{font-style:normal;font-family:'Cormorant Garamond',serif;font-size:1.5em;color:var(--accent);padding:0 .08em;
position:relative;top:-.15em}
.reason__lead{margin:0;font-size:13.5px;line-height:2.1;color:var(--muted);text-wrap:pretty}
.reason__list{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.reason__item{position:relative;padding:0 30px;text-align:center}
.reason__item+.reason__item{border-left:1px solid var(--band)}
.reason__num{font-family:'Jost',sans-serif;font-size:20px;letter-spacing:.08em;color:var(--accent-lite)}
.reason__num::after{content:'';display:block;width:24px;height:1px;margin:10px auto 0;background:var(--accent-lite)}
.reason__icon{display:grid;place-items:center;width:104px;height:104px;margin:24px auto 0;border-radius:50%;
background:var(--white);color:var(--accent)}
.reason__svg{width:44px;height:44px}
.reason__en{margin-top:20px;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.24em;color:var(--muted-2);text-transform:uppercase}
.reason__name{margin-top:12px;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.75;color:var(--ink)}
.reason__text{margin-top:16px;font-size:13.5px;line-height:2.1;color:var(--muted);text-align:left}
.reason__close{max-width:760px;margin:clamp(48px,6vw,80px) auto 0;padding-top:clamp(40px,5vw,64px);
border-top:1px solid var(--band);text-align:center}
.reason__close h3{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.4vw,26px);line-height:1.9;color:var(--ink)}
.reason__close p{margin-top:18px;font-size:14px;line-height:2.1;color:var(--muted)}
.reason__photo{max-width:880px;aspect-ratio:4/3;margin:clamp(40px,5vw,64px) auto 0;overflow:hidden;background:#3E4446}
.reason__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
@media (max-width:860px){
.trouble__list{grid-template-columns:minmax(0,1fr);gap:14px}
.trouble__item{flex-direction:row;justify-content:flex-start;text-align:left;min-height:0;padding:20px 22px;
border-radius:14px}
.trouble__item:nth-child(even){border-radius:14px}
.reason__list{grid-template-columns:1fr;gap:40px}
.reason__item{padding:0}
.reason__item+.reason__item{border-left:0;border-top:1px solid var(--band);padding-top:40px}
}