/* Home page (index.html) — page-specific styles */
/* index.html のみ基準の文字ウェイトを気持ち太めに（400→500）。
見出し・名前など個別に weight 指定がある要素はそのまま維持される。 */
body { font-weight: 500; }
.home-banner-link { display: block; background: var(--color-black); }
.home-banner-link img { display: block; margin: 0 auto; }
/* ===== セクションの重なり（#53 #83「パララックスにしたいです」 2026-09-03） =====
1枚目を画面に貼り付け、2枚目がその上に乗り上げる。止める位置（top）と
仕組みの説明は idx-sticky-stack.js を参照。重ねる側は背景が不透明であることが前提
（.blog / .ymsg はどちらも不透明）。前後関係は DOM 順で決まるので z-index は要らない。 */
.js-sticky-stack .sticky-stack > :first-child { position: sticky; }
.js-sticky-stack .sticky-stack > :last-child { position: relative; }
/* ===== キャンペーンお知らせバー（Figma: 209:25 / テキストは横に流れる仕様） ===== */
.campaign-bar { background-image: var(--gradient-gold-bar); }
/* カンプ（209:25）は左右40px・上下11pxのパディングだが、中身が幅を超えるため実寸は左右27pxに収まる。
マーキーで overflow を切っているこちらでは、その実寸に合わせる。 */
.campaign-bar__link { display: flex; align-items: center; gap: 10px; padding: 11px 27px; text-decoration: none; }
.campaign-bar__marquee { flex: 1 1 auto; overflow: hidden; }
.campaign-bar__track { display: flex; gap: 48px; width: max-content; animation: campaign-bar-scroll 18s linear infinite; }
.campaign-bar__text {
font-family: var(--font-mincho); font-weight: 500; font-size: 14px; line-height: 22.75px;
color: var(--color-ink); white-space: nowrap;
}
.campaign-bar__arrow { flex: 0 0 auto; display: block; width: 16px; height: 16px; }
@keyframes campaign-bar-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 24px)); }
}
@media (prefers-reduced-motion: reduce) { .campaign-bar__track { animation: none; } }
/* ===== ヘッダー（トップのみFigma仕様：ロゴ左寄せ・FVに重ねる / 2:1216） ===== */
.page-home .site-header--full { height: 52px; background: transparent; }
.page-home .site-header__inner { justify-content: flex-start; height: 52px; max-width: none; padding: 10px 15px; }
/* ロゴ画像は「GROW｜筋肉×女風」の横長1枚。ヘッダーでは左の GROW 部分だけを見せる。 */
.page-home .site-header__logo-link { position: relative; width: 103px; height: 32px; overflow: hidden; }
.page-home .site-header__logo-img { position: absolute; left: -5.5px; top: 0; width: 193px; height: 32px; max-width: none; }
.page-home .hamburger { right: 15px; width: 24px; height: 14px; }
.page-home .hamburger__line { height: 1.5px; background: var(--color-gold-light); border-radius: 1px; }
.page-home .hamburger__line:nth-child(1) { top: 0; }
.page-home .hamburger__line:nth-child(2) { top: 6px; left: auto; right: 0; width: 16px; }
.page-home .hamburger__line:nth-child(3) { top: 12px; }
.page-home .hamburger.is-active .hamburger__line:nth-child(1),
.page-home .hamburger.is-active .hamburger__line:nth-child(3) { top: 6px; }
.page-home .hamburger.is-active .hamburger__line:nth-child(2) { width: 24px; }
/* スクロール後も、トップではロゴを残したまま背景だけ敷く */
.page-home .site-header--full.is-compact { background: rgba(10, 10, 10, 0.92); }
.page-home .site-header--full.is-compact .site-header__logo-link { opacity: 1; pointer-events: auto; }
/* ===== FV（Figma: FV見本 226:6276 の5枚。背景・ラベル・見出し・CTAがスライドごとに異なる） ===== */
.fv { position: relative; background: var(--color-ink); }
/* 横スワイプはカルーセルが受け取り、縦はブラウザのスクロールに任せる。
これを指定しないと、横に払った時点でブラウザが pointercancel を投げてスワイプが取りこぼされる。 */
/* 横スワイプを拾うため縦スクロールだけブラウザに任せる。pinch-zoom を並べないと
FVの上でピンチ操作ごと塞いでしまい、拡大して見られなくなる。 */
[data-carousel] { touch-action: pan-y pinch-zoom; }
/* カンプ（417:53）のFVは「キャンペーンバー44px + FV 722px(= 写真700 + ドット帯22)」で、
ヘッダー(417:112 y45..97)は写真に重なって置かれている。実装はヘッダーを積み上げていたぶん
52px 高くなり、端末によってFVが1画面に収まらなかった（2026-09-03 ご指示 #5）。
・ヘッダーは透過なので、FVを52px引き上げて下に潜らせる
・ステージ高は「画面高 - キャンペーンバー45px - ドット帯22px」から導く
これで背の高い画面ではカンプどおり700px、短い画面でも必ず1画面に収まる。 */
.page-home .fv { margin-top: -52px; }
.fv__stage { position: relative; overflow: hidden; height: clamp(400px, calc(100svh - 67px), 700px); }
/* 非アクティブは visibility も落として、隠れているCTAを踏めないようにする */
.fv__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.fv__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
.fv__media { position: absolute; inset: 0; overflow: hidden; }
.fv__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* スライド2の金貨レイヤー。暗部を飛ばして金貨だけを重ねる。 */
/* 左からの黒グラデ。コピーの可読性を担保する。 */
.fv__scrim { position: absolute; top: 0; bottom: 0; left: 0; width: 56%; background: linear-gradient(to right, var(--color-ink), rgba(10, 10, 10, 0)); }
/* 写真側で既に陰影が付いているスライド用。カンプの見え方に合わせて暗幕を薄くする。 */
.fv__scrim--soft { width: 46%; background: linear-gradient(to right, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0)); }
/* #104「コピーを少しだけ上にあげ、ボタンの上下paddingも少しだけ削りたい」（2026-09-03）。
FV のコピー位置。ステージ700pxに対して 38.4%(269px) → 35.5%(248.5px) で約20px上げる。 */
/* 左右padding 30px → 35px（2026-09-04 ご指示「少し余白が欲しい」）。
カンプ（コピー版 519:12）のコピーContainerは padding: 0 32px、CTAは幅342px（＝左右30px）で、
そこからさらに5pxずつ詰めた値。カンプより内側になるのは承知のうえ。 */
.fv__body { position: absolute; left: 0; right: 0; top: 35.5%; z-index: 2; padding: 0 35px; }
.fv__label {
display: flex; align-items: center; gap: 10px; margin: 0;
font-family: var(--font-mincho); font-weight: 500; font-size: 14px; line-height: 15px;
letter-spacing: 2.8px; color: var(--color-gold-light);
}
.fv__label-rule { display: block; flex: 0 0 auto; width: 32px; height: 1px; background: var(--color-gold-light); }
.fv__title {
margin: 15px 0 0;
font-family: var(--font-mincho); font-weight: 400; line-height: 1.33;
/* カンプ(402px幅)は35.2px。2026-09-04に .fv__body の左右paddingを30→35pxへ広げたぶん、
行が収まらなくなるので少し落とす（「新人セラピスト限定」は35.2pxだと332.4px必要で、
確保できる332pxに0.4px足りず2行に割れていた）。実測で折り返しが増えない最大が8.45vw。
上限は402px幅で 8.45vw = 33.97px になるので、それに合わせて34pxにしてある
（PCは中央カラムが402px固定でvwが効かず、上限値がそのまま出るため）。 */
font-size: clamp(27px, 8.45vw, 34px);
letter-spacing: 1.76px; color: var(--color-cream);
}
.fv__lead {
margin: 15px 0 0;
/* 14px → 16px（2026-09-03 ご指示 #6）。
2026-09-04 の左右padding拡大（30→35px）で「あなた好みの癒やしが、きっと見つかる」が
2行になったため15.4pxへ。実測で折り返しが増えない最大がこの値。 */
font-family: var(--font-mincho); font-weight: 500; font-size: 15.4px; line-height: 22.75px;
letter-spacing: 2.8px; color: var(--color-gold-light);
}
.fv__actions { position: absolute; left: 35px; right: 35px; bottom: 43px; z-index: 2; display: flex; flex-direction: column; gap: 15px; }
.fv__btn {
/* #84「ボタンの高さを狭くしてください padding: 14px 0;くらい？」（2026-09-03）。
#104「ボタンの上下paddingも少しだけ削りたい」（同日）でさらに1段。
カンプ（226:6099 のスライド）のボタンは実測59〜60px、14pxだと64pxだったので12pxにする。 */
display: flex; align-items: center; justify-content: center; padding: 12px 0;
border-radius: 999px; text-decoration: none;
/* 既定16px → 18px（2026-09-03 ご指示 #7）。--fv-btn-size はスライドごとの微調整用に残してある。 */
font-family: var(--font-mincho); font-weight: 600; font-size: var(--fv-btn-size, 18px);
}
.fv__btn--gold { background-image: var(--gradient-gold-btn); border: 1px solid var(--color-gold-btn-border); color: #fff; letter-spacing: 0.8px; }
.fv__btn--outline { border: 1px solid rgba(240, 232, 220, 0.5); color: var(--color-cream); letter-spacing: 2.2px; }
.fv__scroll { position: absolute; right: 14px; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fv__scroll-text { writing-mode: vertical-rl; font-family: var(--font-decor); font-weight: 400; font-size: 9px; letter-spacing: 1.8px; color: #c2a67a; }
.fv__scroll-rule { width: 1px; height: 48px; background: linear-gradient(180deg, #b8924a 0%, rgba(184, 146, 74, 0) 100%); }
/* 横に送れることを示す矢印（カンプ 519:241 / 519:242 で支給、2026-09-04）。
カンプは丸などの下敷きの無い細いシェブロン単体で、ステージの左右端から10px・上下中央。
（カンプ実値: 9.848×17.277 / #DFC08A / 左は左端10px、右は右端9.64px、
上下は700pxのステージに対して上下とも341px＝中央。左右差0.36pxは丸めなので10pxに揃えた）
見た目はカンプのままに、押せる範囲だけ左右30px×高さ44pxへ広げている。
30px はコピーとCTAの左右padding幅で、これ以上広げるとCTAの端を奪ってしまう。 */
.fv__arrow {
position: absolute; top: 50%; z-index: 3;
transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 30px; height: 44px; padding: 0;
border: 0; background: transparent; color: var(--color-gold-light); cursor: pointer;
}
.fv__arrow svg { display: block; width: 9.848px; height: 17.277px; fill: currentColor; }
.fv__arrow--prev { left: 0; }
/* 左向きはカンプの右向きシェブロンを反転して使う（左右で形をずらさないため）。 */
.fv__arrow--prev svg { transform: scaleX(-1); }
.fv__arrow--next { right: 0; }
/* カンプのドット帯は22px（上16px + ドット6px）。 */
.fv__dots { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0 0; }
.fv__dot {
width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px;
background: rgba(240, 232, 220, 0.4); cursor: pointer;
transition: width 0.3s ease, background-color 0.3s ease;
}
.fv__dot.is-active { width: 25px; background: #c2a67a; }
/* PC専用のFV上書き（ステージ760px・写真の寄せ・actionsのflex）は、
中央カラムが720pxだった頃の手当て。402pxに戻してSPと同条件になったため削除した。 */
/* 開閉パネル共通（idx-accordion.js が .is-open を付け外しする）。
0fr→1fr で高さを送るので、中身は overflow: hidden の入れ子で受ける。
余白は内側の padding ではなく、中身の margin で取ること。padding だと
開閉のたびに中身が平行移動してしまい、テキストが動いて見える。
margin ならクリップされる側にあるので、窓が広がるだけでテキストは動かない。 */
.concept__more,
.search__filter-panel,
.gconcept__more,
.flow__more,
.price-other__panel,
.pcmenu__sub,
.home-flow__more {
display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease;
}
.concept__more.is-open,
.search__filter-panel.is-open,
.gconcept__more.is-open,
.flow__more.is-open,
.price-other__panel.is-open,
.pcmenu__sub.is-open,
.home-flow__more.is-open { grid-template-rows: 1fr; }
/* ===== コンセプト（Figma: 35:1712） ===== */
.concept { padding: 80px 20px; background: var(--color-ink); text-align: center; }
.concept__text {
margin: 0;
font-family: var(--font-mincho); font-weight: 400;
/* 行は
でデザインどおりに区切ってある。文字が入り切らない端末だとその行がさらに
折り返して、意図した改行位置が崩れる（2026-09-03 ご指摘）。
いちばん長い行「長年培った技術と知見を独自メソッドとして体系化。」＝24文字が
必ず1行に収まるところまで、画面幅に応じて字を詰める。
必要幅 = 25.2em（ブラウザで実測。24文字 × (1em + 字間0.05em)）≦ 100vw - 左右padding 40px
→ font-size ≦ (100vw - 40px) / 25.2 = 3.968vw - 1.587px
係数を 3.9 に丸めているのは安全率。3.968 だと375px幅で余裕がちょうど0になり、
端数の丸め方しだいで折り返してしまう。
上限14pxはカンプ値、下限11pxは320px幅で収まる値。
字間(em)と行間(単位なし)は font-size に連動するので、これだけで3つとも追従する。 */
font-size: clamp(11px, calc(3.9vw - 1.6px), 14px);
line-height: 2;
letter-spacing: 0.05em; color: #eae5e1;
}
.concept__text + .concept__text { margin-top: 10px; }
/* 「続きを読む」で開く後半。grid で高さを 0fr→1fr に送って滑らかに開く。 */
.concept__more-inner { overflow: hidden; }
.concept__more-inner > :first-child { margin-top: 10px; }
.concept__toggle {
display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
padding: 0; border: 0; background: none; cursor: pointer;
/* カンプ（35:1707）は文字の下に 0.5px の下線が入る。 */
border-bottom: 0.5px solid var(--color-gold-light);
/* Figma指定は Jost。日本語グリフを持たないため、カンプ同様に明朝へフォールバックさせる。 */
font-family: 'Jost', var(--font-mincho); font-weight: 400; font-size: 12px; line-height: 16.5px;
letter-spacing: 1.8px; color: var(--color-gold-light);
}
.concept__toggle-icon { display: block; transition: transform 0.3s ease; }
.concept__toggle[aria-expanded="true"] .concept__toggle-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.concept__more, .concept__toggle-icon { transition: none; }
}
/* 枠にぴったり敷く画像（各カードで同じ指定）。 */
.sokumen__photo img,
.wbcard__photo img,
.mslide__link img,
.mcard__photo img,
.widecard__photo img,
.gconcept__video img {
display: block; width: 100%; height: 100%; object-fit: cover;
}
/* 画像の自然比で枠を押し広げないよう絶対配置で敷くもの。 */
.tcard__photo img,
.rkcard__photo img,
.scard__photo img,
.bcard__photo img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* ===== セラピスト一覧（Figma: 4:79） ===== */
.therapists {
padding: 80px 0;
/* 「背景をデザイン同様グレーのキラキラに」（2026-09-03 ご指示 #9）。
支給素材 therapist_bg.jpg は金色寄りのボケ（実測 R-B=+41.5 / 輝度112〜255・平均216）だが、
カンプの地は無彩色グレー（R-B=0 / 輝度233〜255・平均249）だった。
つまりカンプ側で彩度を落として白を重ねている。
・grey を saturation でブレンドして写真をグレースケール化
・その上に白85%（216 + 39*0.85 = 249、ばらつきは 37*0.15 = 5.6 でカンプの5.8と一致）
不透明度を0.8のままにすると地が明るくなりすぎ、キラキラも沈む。 */
background:
linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
linear-gradient(#808080, #808080),
url(../../../index/img/therapist-bg.jpg) center top / cover no-repeat,
#ffffff;
background-blend-mode: normal, saturation, normal, normal;
}
.therapists__inner { padding: 0 24px; }
/* セクション見出し（明るい面で使う共通パターン。カンプ 4:83） */
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.sec-head__ornament { display: block; width: 103px; height: auto; }
.sec-head__label {
margin: 0;
font-family: var(--font-decor); font-weight: 400; font-size: 14px; line-height: 15px;
letter-spacing: 3.5px; text-transform: uppercase;
/* カンプは文字自体が横グラデーション（#6B5A44 → #CCB28A → #6B5A44）。 */
background-image: var(--gradient-gold-card-btn);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head__title {
margin: 0;
font-family: var(--font-mincho); font-weight: 400; font-size: 36px; line-height: 32px;
letter-spacing: 0; color: var(--color-heading-strong);
}
.sec-head--sub .sec-head__label { font-size: 12px; letter-spacing: 3px; }
/* #94「font-weight: 500;に変更」（2026-09-03）。指示は「本日の出勤」に付いていた。 */
.sec-head--sub .sec-head__title { font-weight: 500; font-size: 30px; letter-spacing: 1.5px; }
/* すぐ会える即メン（カンプ 212:378） */
.sokumen { margin-top: 45px; }
.sokumen__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sokumen__status {
display: flex; align-items: center; gap: 5px; margin: 0;
font-family: var(--font-decor); font-weight: 400; font-size: 12px; line-height: 15px;
letter-spacing: 3px; color: var(--color-gold-mid);
}
/* Figmaコメント指示「丸が点滅するアニメーション。リアルタイム感を表現。」 */
.sokumen__dot { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; background: var(--color-gold-mid); animation: sokumen-blink 1.8s ease-in-out infinite; }
@keyframes sokumen-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.sokumen__note { margin: 0; font-family: var(--font-gothic); font-size: 12px; line-height: 15px; letter-spacing: 0.6px; color: var(--color-gold-mid); }
/* #85「少し余白を空けていただきたいです margin: 10px 0 0;くらい」（2026-09-03）。
太さは #94 の見出し一括指定（font-weight: 500）に含まれる。 */
.sokumen__title { margin: 10px 0 0; font-family: var(--font-mincho); font-weight: 500; font-size: 25.6px; line-height: 32px; letter-spacing: 1.28px; color: var(--color-ink); }
/* grid の 1fr は自動最小サイズ（＝中身の min-content）を下回れないので、
長い名前（例: TOKUGAWA）が入った列だけ広がって左右のカード幅がずれる
（2026-09-03 ご指摘）。セラピスト名を出す2カラムはすべて minmax(0, 1fr) にする。
カンプの2カラム（417:1615）も minmax(0, 1fr)。 */
.sokumen__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 15px; margin: 30px 0 0; padding: 0; list-style: none; }
.sokumen__link { display: block; text-align: center; text-decoration: none; }
.sokumen__photo { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
/* #11 +2px（2026-09-03）。 */
.sokumen__name { display: block; margin-top: 10px; font-family: var(--font-decor); font-size: 20px; line-height: 1; letter-spacing: 2.16px; color: var(--color-ink); }
.sokumen__meta { display: block; margin-top: 5px; font-family: var(--font-mincho); font-size: 14px; line-height: 15px; letter-spacing: 0.8px; color: var(--color-gold-mid); }
/* 出勤スケジュール（カンプ 555:2256）。見出しは .sec-head--sub がカンプ実測と同値なのでそのまま使う。 */
.today { margin-top: 45px; }
.today__lead { margin: 15px 0 0; text-align: center; font-family: var(--font-mincho); font-size: 14px; line-height: 2; letter-spacing: 0.7px; color: var(--color-ink); }
/* 日付選択（カンプ 556:6601）。見出しブロックの5px下・上下30pxの内側に、10px間隔で3つ並ぶ。 */
.today__picker { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; padding: 30px 0; }
.today__picker-label { margin: 0; font-family: var(--font-gothic); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: 0.7px; color: var(--color-gold-mid); }
/* カンプ（556:6602）は白地・1.5pxのゴールド枠・角丸10px・高さ52.67px、右端25pxに▼。
▼はカンプの書き出し（12×7.5 の三角・#A8895A）をそのままデータURIにしている。
日付の文字はカンプ14pxだと小さいとのことで +2px（2026-09-09 ご指示）。 */
.today__select {
width: 100%; height: 53px; appearance: none; -webkit-appearance: none;
padding: 0 25px; border: 1.5px solid var(--color-gold-mid); border-radius: 10px;
background: #fff url('data:image/svg+xml;utf8,') no-repeat right 25px center;
font-family: var(--font-gothic); font-size: 16px; line-height: 1; letter-spacing: 0.7px; color: var(--color-body-warm);
}
.today__picker-note { margin: 0; font-family: var(--font-gothic); font-size: 12px; line-height: 1; letter-spacing: 0.6px; color: var(--color-ink); }
/* 日付を切り替えている間。読み込み中と分かる程度に落とすだけで、高さは動かさない。 */
.today__panel { transition: opacity 0.2s ease; }
.today__panel[aria-busy="true"] { opacity: 0.4; }
/* 幅ずれ対策は .sokumen__list のコメント参照。 */
.today__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 15px; margin: 0; padding: 0; list-style: none; }
.today__empty { margin: 0; text-align: center; font-family: var(--font-mincho); font-size: 13px; color: var(--color-gold-mid); }
.tcard { display: flex; flex-direction: column; height: 100%; border-radius: 5px; background: var(--color-ink); overflow: hidden; }
/* 画像の自然比で押し広げられないよう、絶対配置で高さを固定する（カンプは200px） */
.tcard__photo { position: relative; display: block; height: 200px; border-radius: 5px; background: var(--color-paper-deep); overflow: hidden; }
.tcard__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; padding: 15px; text-align: center; }
.tcard__name { margin: 0; font-family: var(--font-decor); font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: 2.16px; color: var(--color-gold-light); }
.tcard__meta { margin: 0; font-family: var(--font-mincho); font-size: 10px; line-height: 15px; letter-spacing: 0.8px; color: rgba(223, 192, 138, 0.75); }
.tcard__time { padding: 5px 0; border: 0.5px solid rgba(223, 192, 138, 0.5); border-radius: 5px; background: rgba(255, 255, 255, 0.1); }
/* #13「こちらのbox内のテキストも+2px」（2026-09-03）。引出線は出勤時間ボックスを指している。 */
.tcard__time-label { display: block; font-family: var(--font-mincho); font-size: 10px; line-height: 1; letter-spacing: 0.4px; color: #fff; }
.tcard__time-value { display: block; margin-top: 5px; font-family: var(--font-mincho); font-size: 14px; line-height: 1; letter-spacing: 0.6px; color: var(--color-gold-light); }
.tcard__catch { margin: 0; font-family: var(--font-mincho); font-size: 10px; line-height: 1.6; letter-spacing: 0.5px; text-align: left; color: #fff; }
.tcard__cta {
display: flex; align-items: center; justify-content: center; gap: 3px;
/* #14 上下padding +2px（2026-09-03）。カンプは5px。 */
margin-top: auto; padding: 7px 0; border-radius: 999px;
background: var(--color-gold-mid); color: #fff; text-decoration: none;
/* #86「フォントサイズをさらに+2px上げてください」（2026-09-03）。#14 の +2px に続けて 10px → 12px。 */
font-family: var(--font-mincho); font-weight: 500; font-size: 12px; line-height: 16.5px; letter-spacing: 1px;
}
.tcard__cta-icon { flex: 0 0 auto; }
/* 導線ボタン（明るい面で使う共通パターン。カンプ 212:446 / 212:271） */
.btn-outline-pill,
.btn-gold-pill {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 20px 16px; border-radius: 999px; text-decoration: none;
font-family: var(--font-mincho); font-weight: 500; font-size: 14px; line-height: 16.5px; letter-spacing: 1.4px;
}
.btn-outline-pill {
border: 0.588px solid var(--color-brown); background: #fff; color: var(--color-brown);
filter: drop-shadow(5px 5px 5px rgba(107, 90, 68, 0.15));
}
.btn-gold-pill {
border: 0.588px solid var(--color-gold-btn-border); background-image: var(--gradient-gold-btn);
color: #fff; font-weight: 600; letter-spacing: 0.7px;
}
/* カンプ（212:271 / 4:104）はこの2つだけ塗りスタイルが btn_濃。明るい面に置くため沈ませている。 */
.therapists__actions .btn-gold-pill,
.yohito .btn-gold-pill { background-image: var(--gradient-gold-btn-deep); }
.btn-arrow { font-size: 12px; }
.therapists__actions { display: flex; flex-direction: column; gap: 15px; margin-top: 45px; }
/* #15 #16 この2つのボタンだけ +2px（2026-09-03）。カンプは14px。
.btn-gold-pill / .btn-outline-pill は他セクションでも使うので共有側は触らない。
16pxのままだと「全セラピスト一覧（プロフ・写真）を見る」が360px級の端末で
2行に折り返す（2026-09-03 ご指摘）。402pxで16pxになり、狭い端末では縮む式にした。
左右パディングも詰めている（横幅いっぱいのボタンなので見た目は変わらない）。
320〜402pxで1行に収まることを実測で確認済み。 */
.therapists__actions .btn-outline-pill,
.therapists__actions .btn-gold-pill { padding-inline: 12px; font-size: clamp(11.5px, calc(5.5vw - 6.1px), 16px); }
/* YOHITO指名（カンプ 4:93） */
.yohito {
display: flex; flex-direction: column; gap: 20px;
margin-top: 45px; padding: 30px 25px;
border: 0.588px solid var(--color-gold-mid); border-radius: 10px;
}
.yohito__label {
display: inline-flex; align-items: center; gap: 5px; margin: 0;
/* #17 +2px（2026-09-03）。カンプは12px。 */
font-family: var(--font-decor); font-weight: 400; font-size: 14px; line-height: 15px;
letter-spacing: 2.4px; text-transform: uppercase; color: var(--color-gold-mid);
}
.yohito__dot { flex: 0 0 auto; width: 12px; height: 12px; }
.yohito__title { margin: 0; font-family: var(--font-mincho); font-weight: 500; font-size: 20px; line-height: 2; letter-spacing: 1px; color: var(--color-ink); }
/* #18 +2px（2026-09-03）。カンプは11px。 */
.yohito__text { margin: 0; font-family: var(--font-gothic); font-size: 13px; line-height: 16.5px; letter-spacing: 1.1px; color: var(--color-ink); }
/* #88「少し高さを出したいです padding: 16px 35px;くらい」（2026-09-03）。 */
.yohito .btn-gold-pill { padding: 16px 35px; font-weight: 400; letter-spacing: 1.4px; }
@media (prefers-reduced-motion: reduce) { .sokumen__dot { animation: none; } }
/* ===== セラピストランキング（Figma: 38:2241） ===== */
.ranking {
padding: 80px 0;
/* カンプの塗り: 背景写真30% + #070707 */
background: linear-gradient(rgba(7, 7, 7, 0.7), rgba(7, 7, 7, 0.7)), url(../../../index/img/ranking-bg.jpg) center / cover no-repeat, #070707;
}
.ranking__head { text-align: center; padding: 0 24px; }
.ranking__crown { display: block; width: 48px; height: auto; margin: 0 auto 15px; }
.ranking__en {
margin: 0;
/* #21 45pxに（2026-09-03）。 */
font-family: var(--font-decor); font-weight: 400; font-size: 45px; line-height: 1.2;
letter-spacing: 0.16em; color: var(--color-gold-light);
}
.ranking__title {
margin: 10px 0 0;
/* #22 20pxに（2026-09-03）。 */
font-family: var(--font-mincho); font-weight: 400; font-size: 20px;
letter-spacing: 0.28em; color: rgba(240, 232, 220, 0.75);
}
/* グループ（ポイント／リピート／新人） */
.rkgroup { margin-top: 40px; }
/* #30 #32「margin-top: 60px;に」（2026-09-03）。引出線はどちらもグループとグループの
すき間を指しているので、見出し直下の1つ目は40pxのまま。 */
.rkgroup + .rkgroup { margin-top: 60px; }
/* カンプ（219:822）は幅342.38・上下パディング15px・間隔9px。角丸は左上と右下だけ10px。 */
.rkgroup__bar {
/* #23「2つのテキストが上下中央になるように」（2026-09-03）。baseline だと
和文18pxと欧文12pxで下端が揃い、上下がずれて見える。 */
display: flex; align-items: center; justify-content: center; gap: 9px;
/* 左右パディングはカンプ14px。#24/#23 で文字を 15→18px / 11→12px にした結果、
いちばん長い「リピートランキング REPEAT RANKING」が必要幅314pxに対して
内寸314pxちょうどになり2行に折り返していた。中身は中央寄せなので、
パディングを詰めても短いバーの見た目は変わらない。 */
margin: 0 30px; padding: 15px 10px;
border-radius: 10px 0 10px 0;
background-image: var(--gradient-gold-rank-bar);
}
/* 文字は白。地のグラデはトークン側で管理（--gradient-gold-rank-bar）。 */
/* #24 18pxに / #23 12pxに（2026-09-03）。
カンプ幅（402px）では収まるが、360px級の端末では
「リピートランキング REPEAT RANKING」が帯の内寸ぴったりになって2行に折り返す
（2026-09-03 ご指摘）。402pxで指定どおりの18/12pxになり、狭い端末では和欧が
一緒に縮む式にした。320〜402pxで3本の帯がすべて1行に収まることを実測で確認済み。 */
.rkgroup__name { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(13px, calc(6.1vw - 6.5px), 18px); letter-spacing: 0.12em; color: #fff; }
.rkgroup__en { font-family: var(--font-decor); font-size: clamp(8.5px, calc(4.27vw - 5.17px), 12px); letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.75); }
/* カードは横スクロール（Figmaコメント指示） */
.rkgroup__scroller { margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rkgroup__list { display: flex; gap: 12.17px; margin: 0; padding: 12px 30px 0; list-style: none; }
.rkcard {
/* カンプ（38:2261）のカード幅は137.52px、リストの間隔は12.17px。 */
position: relative; flex: 0 0 auto; width: 137.52px;
display: flex; flex-direction: column;
/* #27「デザイン少し角丸になってます。border-radius: 5px」（2026-09-03）。
写真が角を突き抜けるので、内側の写真側で切る（カード側で overflow:hidden にすると
はみ出しているメダルまで切れてしまう）。 */
border-radius: 5px;
background: #fbf8f4;
}
/* メダルはカード左上に少しはみ出して重なる */
.rkcard__medal {
position: absolute; top: -12px; left: -8px; z-index: 2;
/* #25 60px四方にサイズアップ（2026-09-03）。カンプは約40px（カード幅138pxの1/4）。 */
width: 60px; height: 60px;
/* 支給のバッジ素材（2026-09-02）。背景が透過しているので円形に切る必要はない。 */
background-repeat: no-repeat; background-position: center; background-size: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.rkcard__medal--1 { background-image: url(../../../index/img/rank-medal-1.webp); }
.rkcard__medal--2 { background-image: url(../../../index/img/rank-medal-2.webp); }
.rkcard__medal--3 { background-image: url(../../../index/img/rank-medal-3.webp); }
.rkcard__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 5px 5px 0 0; overflow: hidden; }
.rkcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 12.6px 14px; text-align: center; }
.rkcard__name { margin: 0; font-family: var(--font-decor); font-weight: 400; font-size: 20px; line-height: 1; letter-spacing: 1.81px; color: var(--color-brown); }
.rkcard__meta { margin: 4px 0 0; font-family: var(--font-mincho); font-size: 10px; line-height: 12.6px; letter-spacing: 0.67px; color: var(--color-brown); }
.rkcard__catch { margin: 8px 0 12px; font-family: var(--font-mincho); font-size: 10px; line-height: 1.6; letter-spacing: 0.5px; text-align: left; color: var(--color-ink); }
.rkcard__btn {
display: flex; align-items: center; justify-content: center;
/* #28 上下padding -2px（2026-09-03）。 */
margin-top: auto; padding: 6px 0; border-radius: 999px;
border: 1px solid var(--color-brown);
font-family: var(--font-mincho); font-size: 12px; letter-spacing: 0.08em;
color: var(--color-brown); text-decoration: none;
}
/* カード下の横スクロール進捗バー（カンプ 38:2321）。 */
.rkgroup__track {
position: relative; height: 8px; margin: 20px 30px 0;
border-radius: 300px; background: #d9d9d9; overflow: hidden;
}
.rkgroup__track[hidden] { display: none; }
/* つまみは transform で動かす。left だとスクロールのたびにレイアウトが走る。 */
.rkgroup__thumb {
position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
border-radius: 300px; background: var(--color-gold-mid);
}
.rkgroup__more { margin: 22px 30px 0; }
/* カンプ（219:1160）は上下パディング20px・角丸300px・白い細枠。 */
.btn-outline-dark {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 20px 16px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 300px;
/* #29 +2px（2026-09-03）。 */
font-family: var(--font-mincho); font-weight: 500; font-size: 15px; letter-spacing: 0.1em;
color: var(--color-cream); text-decoration: none;
}
/* ===== セラピストを探す（Figma: 8:4757） ===== */
.search { padding: 80px 0; background: var(--color-white-warm); }
.search__inner { padding: 0 30px; }
/* 見出し下の短い金線。カンプでは 32×1。 */
.sec-head__rule { display: block; width: 32px; height: 1px; margin: 13px auto 0; background: var(--color-gold-mid); }
/* こだわり検索（アコーディオン） */
.search__filter { margin-top: 40px; }
.search__filter-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; padding: 15px 25px; border: 1px solid var(--color-gold-mid); border-radius: 10px;
/* #35 全体的に+2px（2026-09-03）。カンプは14px。 */
background: #fff; font-family: var(--font-mincho); font-size: 16px; letter-spacing: 0.06em;
color: var(--color-body-warm); cursor: pointer;
}
.search__filter-chevron { flex: 0 0 auto; color: var(--color-gold-mid); transition: transform 0.3s ease; }
.search__filter-toggle[aria-expanded="true"] .search__filter-chevron { transform: rotate(180deg); }
/* 高さを 0fr→1fr に送って滑らかに開く（コンセプトの「続きを読む」と同じ手口）。 */
.search__filter-body { overflow: hidden; }
/* 先頭の見出しの margin をそのまま上の余白として使う（padding だと開閉で中身が動く）。 */
.search__group-title {
margin: 18px 0 0; font-family: var(--font-mincho); font-size: 14px;
letter-spacing: 0.1em; color: var(--color-brown);
}
.search__options { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.search__option input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.search__option label {
display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px;
border: 1px solid rgba(10, 10, 10, 0.3); border-radius: 999px; background: #fff;
font-family: var(--font-mincho); font-size: 14px; letter-spacing: 0.06em; color: var(--color-ink);
cursor: pointer;
}
.search__option-count { font-family: var(--font-gothic); font-size: 12px; color: var(--color-brown); }
.search__option input:checked + label { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.search__option input:checked + label .search__option-count { color: rgba(246, 243, 238, 0.7); }
.search__option input:focus-visible + label { outline: 2px solid var(--color-gold-mid); outline-offset: 2px; }
.search__apply {
display: block; width: 100%; margin-top: 20px; padding: 15px 16px;
border: 1px solid var(--color-gold-btn-border); border-radius: 999px; background-image: var(--gradient-gold-btn);
font-family: var(--font-mincho); font-weight: 500; font-size: 15px; letter-spacing: 0.1em;
color: #fff; cursor: pointer;
}
/* 並び替えチップ（3列） */
.search__sort {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 8px;
margin: 24px 0 0; padding: 0; list-style: none;
}
.search__sort-btn {
display: flex; align-items: center; justify-content: center;
/* カンプ（8:4775）は 108.67 × 33.18、パディング 10/16。 */
width: 100%; padding: 9px 8px; border: 1px solid rgba(10, 10, 10, 0.3); border-radius: 999px;
background: #fff; font-family: var(--font-mincho); font-size: 14px; line-height: 13px; letter-spacing: 0.04em;
color: var(--color-ink); cursor: pointer;
}
.search__sort-btn.is-selected { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
/* ランキング導線（2列） */
.search__links {
/* カンプは2列だが、#35 で 12px → 14px にしたことで
「ポイントランキングを見る」の必要幅が201pxになり、402px版面の1列ぶん(163.5px)に
収まらなくなった（間隔を0にしても171pxで足りない）。
入る幅があるときだけ2列になるようにして、狭いときは素直に縦に積む。 */
display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px 15px;
margin: 20px 0 0; padding: 0; list-style: none;
}
.search__links a {
font-family: var(--font-mincho); font-size: 14px; letter-spacing: 0.04em;
color: var(--color-brown); text-decoration: underline; text-underline-offset: 3px;
}
/* セラピスト一覧（2カラム） */
.search__list {
/* 幅ずれ対策は .sokumen__list のコメント参照。 */
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 15px;
margin: 45px 0 0; padding: 45px 0 0; border-top: 1px solid #d9d9d9; list-style: none;
}
.search__empty { margin: 45px 0 0; padding: 45px 0 0; border-top: 1px solid #d9d9d9; text-align: center; font-family: var(--font-mincho); font-size: 15px; color: var(--color-brown); }
/* 行内でカードの高さを揃え、キャッチが1行でもボタン位置が下辺で揃うようにする。 */
.search__item { display: flex; }
.scard {
flex: 1 1 auto;
display: flex; flex-direction: column; height: 100%;
border: 1px solid var(--color-gold-mid); border-radius: 10px; overflow: hidden; text-decoration: none;
}
/* 写真は 163:200 で固定。画像の自然比で押し広げられないよう絶対配置にする。 */
.scard__photo { position: relative; display: block; aspect-ratio: 163 / 200; overflow: hidden; }
/* Figmaコメント指示「新人セラピストには『NEW』アイコンをつける」。黒丸＋白のリング。 */
.scard__new {
position: absolute; top: 5px; left: 5px; display: flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 50%; background: var(--color-ink);
font-family: var(--font-decor); font-size: 14px; letter-spacing: 0.06em; color: #fff;
}
/* #36「中の枠線を細く、不透明度を下げて薄く」（2026-09-03）。
カンプの内側リング（Ellipse 4）は stroke-width 0.5 / opacity 0.5 / 径46.563（＝inset 2.72px）。 */
.scard__new::before { content: ''; position: absolute; inset: 2.72px; border: 0.5px solid rgba(255, 255, 255, 0.5); border-radius: 50%; }
.scard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 15px; text-align: center; }
/* #38 全体的に+2px（2026-09-03）。カンプは 18 / 10 / 10 / 10px。 */
.scard__name { font-family: var(--font-decor); font-size: 20px; line-height: 1; letter-spacing: 0.12em; color: var(--color-brown); }
.scard__meta { margin-top: 3px; font-family: var(--font-mincho); font-size: 12px; line-height: 1.5; letter-spacing: 0.08em; color: var(--color-brown); }
/* キャッチは2行で切る。カンプも2行組み。 */
.scard__catch {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
margin-top: 5px; font-family: var(--font-mincho); font-size: 12px; line-height: 1.6;
letter-spacing: 0.05em; text-align: left; color: var(--color-ink);
}
.scard__btn {
display: flex; align-items: center; justify-content: center; margin-top: auto; padding-top: 0;
min-height: 28px; border-radius: 999px; background-image: var(--gradient-gold-card-btn);
font-family: var(--font-mincho); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; color: #fff;
}
.scard__catch { margin-bottom: 10px; }
/* もっと見る */
.search__more { margin-top: 45px; }
.btn-more-pill {
display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 20px 16px;
border: 1px solid var(--color-brown); border-radius: 999px; background: rgba(255, 255, 255, 0.5);
box-shadow: 0 2px 8px rgba(107, 90, 68, 0.12);
/* #60「16pxにサイズアップ」（2026-09-03）。カンプは14px。
このクラスは写メ日記・筋肉日記・体験ブログ・メディア掲載・検索の「もっと見る」で共通。 */
font-family: var(--font-mincho); font-size: 16px; letter-spacing: 0.1em;
color: var(--color-brown); text-decoration: none;
}
/* PCは崩れ防止のみ。カードが間延びしないよう幅を止めて列数を増やす。 */
@media (prefers-reduced-motion: reduce) {
.search__filter-panel, .search__filter-chevron { transition: none; }
}
/* ===== 料金一覧（Figma: 8:5308） ===== */
/* カンプの塗りは「支給画像を30%で敷いた上に白」。白を70%重ねて同じ見え方にする。 */
.price {
padding: 80px 0;
background:
linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
url(../../../index/img/price-bg.jpg) center center / cover no-repeat,
#fff;
}
.price__inner { padding: 0 24px; }
/* このセクションだけ見出しが左寄せ */
.price-head__label { margin: 0; font-family: var(--font-decor); font-size: 15px; letter-spacing: 0.3em; color: var(--color-gold-mid); }
.price-head__title { margin: 10px 0 0; font-family: var(--font-mincho); font-weight: 400; font-size: 26px; line-height: 32px; letter-spacing: 0; color: var(--color-heading-strong); }
/* コース切替タブ（Figmaコメント指示「タブで切り替えられる仕組みに」） */
.price__tabs { display: flex; justify-content: center; margin-top: 30px; }
.price__tablist { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--color-paper-deep); }
.price__tab {
padding: 10px 28px; border: 0; border-radius: 999px; background: transparent;
font-family: var(--font-gothic); font-size: 12px; letter-spacing: 0.1em;
color: var(--color-ink-warm); cursor: pointer;
}
.price__tab.is-active { background: var(--color-ink-warm); color: var(--color-paper); }
.price__lead { margin: 20px 0 0; text-align: center; font-family: var(--font-mincho); font-size: 12px; letter-spacing: 0.1em; color: var(--color-brown); }
/* 料金表 */
.price-table { margin-top: 24px; border: 1px solid rgba(168, 137, 90, 0.15); border-radius: 15px; overflow: hidden; }
.price-row {
position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 75px; padding: 24px 20px; background: var(--color-white-warm);
border-bottom: 1px solid rgba(168, 137, 90, 0.1);
}
.price-row:nth-child(even) { background: var(--color-paper); }
.price-row:last-child { border-bottom: 0; }
/* おすすめ行の左端に立てる金の帯 */
.price-row--pick::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, #c9a84c 0%, #e8c97a 100%);
}
/* カンプ（224:4122）は Jost 14px・行間21px・字間1.68px・#3A3228。 */
.price-row__name { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-gothic); font-size: 14px; line-height: 21px; letter-spacing: 1.68px; color: var(--color-body-warm); }
.price-row__badge {
padding: 4px 12px; border: 1px solid rgba(168, 137, 90, 0.25); border-radius: 999px; background: #f2ece1;
font-family: var(--font-mincho); font-size: 10px; letter-spacing: 0.08em; color: var(--color-brown);
}
.price-row__value { display: inline-flex; align-items: baseline; gap: 4px; }
.price-row__amount { font-family: var(--font-decor); font-size: 24px; letter-spacing: 0.02em; color: var(--color-ink-warm); }
.price-row__tax { font-family: var(--font-mincho); font-size: 10px; color: var(--color-brown); }
.price__note { margin: 12px 0 0; font-family: var(--font-mincho); font-size: 10px; letter-spacing: 0.05em; color: var(--color-gold-mid); }
/* OPTION（抜粋） */
.price-option { margin-top: 32px; }
.price-option__label { margin: 0; font-family: var(--font-decor); font-size: 13px; letter-spacing: 0.2em; color: var(--color-gold-mid); }
.price-option__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.price-option__item {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 16px 14px; border-radius: 10px; background: var(--color-white-warm); box-shadow: 0 1px 4px rgba(107, 90, 68, 0.08);
}
.price-option__name { font-family: var(--font-mincho); font-size: 11px; letter-spacing: 0.04em; color: var(--color-ink-warm); }
.price-option__price { font-family: var(--font-decor); font-size: 15px; color: var(--color-ink-warm); }
.price-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-mincho); font-size: 12px; letter-spacing: 0.08em; color: var(--color-brown); text-decoration: none; }
/* その他料金（アコーディオン。カンプは開いた状態） */
.price-other { margin-top: 24px; border: 1px solid rgba(168, 137, 90, 0.15); border-radius: 15px; overflow: hidden; }
.price-other__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
padding: 20px; border: 0; background: var(--color-paper);
font-family: var(--font-mincho); font-size: 13px; letter-spacing: 0.06em; color: var(--color-ink-warm); cursor: pointer;
}
.price-other__chevron { flex: 0 0 auto; color: var(--color-brown); transform: rotate(180deg); transition: transform 0.3s ease; }
.price-other__toggle[aria-expanded="false"] .price-other__chevron { transform: rotate(0deg); }
.price-other__panel { background: var(--color-white-warm); }
.price-other__body { overflow: hidden; }
.fee { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-top: 1px solid rgba(168, 137, 90, 0.12); }
.price-other__body .fee:first-child { border-top: 0; }
.fee__head { display: flex; flex-direction: column; gap: 4px; }
.fee__name { font-family: var(--font-mincho); font-size: 13px; letter-spacing: 0.06em; color: var(--color-ink-warm); }
.fee__note { font-family: var(--font-mincho); font-size: 10px; line-height: 1.6; color: var(--color-brown); }
.fee__price { font-family: var(--font-mincho); font-size: 13px; letter-spacing: 0.04em; color: var(--color-ink-warm); white-space: nowrap; }
.fee__items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fee__item { display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; }
.fee__item-label { font-family: var(--font-mincho); font-size: 11px; letter-spacing: 0.04em; color: var(--color-body-warm); }
/* 料金システムへの導線 */
.price__cta { margin-top: 40px; text-align: center; }
.price__cta-text { margin: 0; font-family: var(--font-mincho); font-size: 13px; line-height: 1.9; letter-spacing: 0.08em; color: var(--color-brown); }
.btn-dark-pill {
display: flex; align-items: center; justify-content: center; min-height: 58px; margin-top: 17px; padding: 20px 16px;
border-radius: 999px; background: var(--color-ink-warm);
font-family: var(--font-mincho); font-size: 15px; letter-spacing: 0.12em; color: var(--color-paper); text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.price-other__panel, .price-other__chevron { transition: none; }
}
/* ===== 5つの特徴（Figma: 8:6538） ===== */
/* カンプの塗りは「支給画像の上に var(--color-ink) を65%」。 */
.features {
padding: 80px 0;
background:
linear-gradient(rgba(10, 10, 10, 0.65), rgba(10, 10, 10, 0.65)),
/* #39「波形の男性の顔が見えないように」（2026-09-03）。
カンプ（8:6538 の背景）は img を w=340.62% / h=100% / left=-80.1% / top=-28.17% で
置いており、逆算すると素材の x 23.5〜52.9% / y 28.2〜100% だけが見えている
（＝顔より下）。画像側をその範囲に切り直したので、ここは 100% 上寄せでよい。 */
url(../../../index/img/features/feature-bg.jpg?v=2) center top / 100% auto no-repeat,
var(--color-ink);
}
.features__inner { padding: 0 29px; }
.features__head { text-align: center; }
/* #40 +2px（2026-09-03）。カンプは12px。 */
/* #97「余白をデザインを参考に調整」（2026-09-03）。
カンプ（字面どうしの間隔）は FEATURES→GROW が約21px、GROW→5つの特徴 が約10px。
実装は44.9px / 48.5px と開いていた。原因は文字を大きくしたこと自体ではなく、
Cormorant の既定 line-height（約1.9）で字面の上下に leading が入っていたため。
行送りを詰めてから、カンプの間隔に文字サイズ比（約1.15倍）を掛けた値を margin で置く。 */
.features__label { margin: 0; font-family: var(--font-decor); font-size: 16px; line-height: 1; letter-spacing: 0.3em; color: var(--color-gold-light); }
.features__brand { margin: 16px 0 0; font-family: var(--font-decor); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 0.16em; color: #fff; }
/* #41「デザインと異なります」（2026-09-03）。
カンプ（9:6703）は「5」と「つの特徴」で書体もサイズも違い、下端で揃えている。
5 … Times New Roman / 78.325px / line-height 1
つの特徴 … Shippori Mincho / 40.102px / line-height 50.128px / tracking 4.0102px
実装は全体を1つの46pxとして組んでいたので作り直した。 */
.features__title {
display: flex; align-items: flex-end; justify-content: center;
/* #97。カンプでは GROW の字面と「5つの特徴」がほぼ接している。
「5」は Times の 78px で、line-height:1 でも字面の上に約14pxの余りが出るため、
margin を負にしないとカンプの間隔（約10px）にならない。 */
margin: -6px 0 0; color: #fff; font-weight: 400;
}
.features__title-num { font-family: 'Times New Roman', var(--font-decor), serif; font-size: 78.325px; line-height: 1; }
.features__title-text { font-family: var(--font-mincho); font-weight: 500; font-size: 40.102px; line-height: 50.128px; letter-spacing: 4.0102px; }
/* 各特徴の見出し。
#42「デザインと異なります」（2026-09-03）。カンプ（8:6548）は
左に大きな「01」、右に「Feature 01」と見出しを縦積みした横並びで、全体は左寄せ。
実装は中央寄せで「FEATURE 01」を上に置いていた。 */
.feature-no { display: flex; align-items: center; gap: 12px; }
.feature-no__num {
flex: 0 0 auto; margin: 0;
font-family: var(--font-decor); font-weight: 400; font-size: 60px; line-height: 40px;
color: var(--color-gold-light);
}
.feature-no__body { min-width: 0; }
.feature-no__label {
margin: 0;
font-family: 'Jost', var(--font-mincho); font-weight: 400; font-size: 10px; line-height: 15px;
letter-spacing: 3px; text-transform: uppercase; color: var(--color-gold-light);
}
.feature-no__name {
margin: 2px 0 0;
font-family: var(--font-mincho); font-size: 24px; line-height: 32px; letter-spacing: 1.92px; color: #fff;
}
.feature01 { margin-top: 45px; }
/* カンプは左上と右下だけ大きく落とす対角の角丸。 */
.feature01__photo { margin-top: 24px; border-radius: 60px 0 60px 0; overflow: hidden; }
.feature01__photo img { display: block; width: 100%; height: auto; }
/* #45 +2px（2026-09-03）。カンプは 13px / line-height 28.6px / tracking 0.65px。 */
.feature01__text { margin: 20px 0 0; font-family: var(--font-mincho); font-size: 13px; line-height: 28.6px; letter-spacing: 0.65px; color: var(--color-paper-deep); }
/* 特徴01にぶら下がる3コース */
.course-list { display: flex; flex-direction: column; gap: 17px; margin: 30px 0 0; padding: 0; list-style: none; }
.course-list__item { display: flex; }
/* カンプ実測（2026-09-01）: 写真は88×88の正方形、パディング20、角丸14、線は明るいゴールド。
写真は本文の高さに対して縦中央。 */
.course-card {
display: flex; align-items: center; gap: 15px; padding: 20px; width: 100%;
/* 2026-09-03 ご指摘「カードのボケ感」。カンプ（417:1584）は地を明るく薄く敷いた
すりガラス: 背景 rgba(246,243,238,0.1) ＋ backdrop-blur 17.5px、枠線 2px、角丸12px。
実装は暗い面に1pxの線だったので、カンプの作りに合わせた。 */
/* #90「枠線の太さ 1pxに」（2026-09-03）。 */
border: 1px solid var(--color-gold-btn-border); border-radius: 12px;
background: rgba(246, 243, 238, 0.1);
backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px);
text-decoration: none;
}
a.course-card { transition: border-color 0.3s ease, background-color 0.3s ease; }
a.course-card:hover { border-color: #fff; background: rgba(246, 243, 238, 0.18); }
.course-card__photo { flex: 0 0 auto; width: 88px; border-radius: 2px; overflow: hidden; }
.course-card__photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.course-card__body { display: flex; flex-direction: column; }
/* #46「数字を18pxに。デザインにあわせて余白を調整」（2026-09-03）。
カンプは 21px / line-height 13.5px / tracking 2.7px。行間を詰めて番号と見出しの間を空けすぎないようにする。 */
.course-card__no { display: block; font-family: var(--font-decor); font-size: 18px; line-height: 13.5px; letter-spacing: 2.7px; color: var(--color-gold-light); }
/* #47 見出し＋本文 +2px（02・03も同様）（2026-09-03）。カンプは 20px / 10px。 */
.course-card__title { margin-top: 5px; font-family: var(--font-decor); font-size: 20px; line-height: 1.5; letter-spacing: 1px; color: #fff; }
.course-card__text { margin-top: 5px; font-family: var(--font-mincho); font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--color-paper-deep); }
/* #49「全体的にフォントサイズを16pxに」（2026-09-03）。カンプは見出し・ボタンとも14px。 */
/* #91「改行されてしまうので1〜2px小さくしたいです」（2026-09-03）。#50 で16pxに上げた直後の再指摘。 */
.feature01__yt-note { margin: 30px 0 0; text-align: center; font-family: var(--font-mincho); font-size: 14px; letter-spacing: 0.06em; color: #fff; }
.btn-youtube {
display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; margin-top: 17px; padding: 16px;
border: 1px solid rgba(223, 192, 138, 0.45); border-radius: 999px; background: rgba(20, 18, 15, 0.75);
font-family: var(--font-mincho); font-size: 16px; letter-spacing: 0.08em; color: #fff; text-decoration: none;
}
.btn-youtube__icon { flex: 0 0 auto; }
/* カンプ実測は 342×59・文字16px・字間2.4px。
これ以外（padding・行間・枠線・文字色）は .btn-gold-pill と同値なので書かない。
書くと共有側を直したときにここだけ古い値で固定されてしまう。 */
.feature01__more { margin-top: 17px; font-size: 16px; letter-spacing: 2.4px; }
/* 特徴02〜05（2カラム） */
/* 幅ずれ対策は .sokumen__list のコメント参照（ここは英字ラベルが原因だった）。 */
.feature-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 10px; margin: 45px 0 0; padding: 0; list-style: none; }
.feature-cards__item { display: flex; }
.fcard {
/* カンプ（21:32）は 167×310、パディング 20/15、角丸5px。 */
display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 15px;
border: 1px solid rgba(223, 192, 138, 0.45); border-radius: 5px; background: rgba(20, 18, 15, 0.55);
text-decoration: none;
}
.fcard__photo { display: block; border-radius: 6px; overflow: hidden; }
.fcard__photo img { display: block; width: 100%; aspect-ratio: 130 / 100; object-fit: cover; }
/* カンプは「O2」の右に英字ラベルが2行。横並びで正しい（2026-09-01 Figmaで確認）。 */
/* #50「font-size: 12px; line-height: 1.4; くらいに調整」「2つのテキストが上端揃えに」（2026-09-03）。
英字ラベルを 8px → 12px にすると行が伸びるので、番号側の line-height を文字サイズと
同じ 1 にして、両方の1行目の上端が揃うようにしている
（既定の line-height だと番号の行の高さぶんだけ下にずれる）。 */
.fcard__head { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.fcard__num { flex: 0 0 auto; font-family: var(--font-decor); font-size: 17px; line-height: 1.4; letter-spacing: 0.06em; color: var(--color-gold-light); }
/* 書体はカンプどおり Jost（417:1623）。Cormorant のままだと12pxで
「CERTIFICATION」が120px必要になり、402px版面の1列（約105px）に入らない。
overflow-wrap は 320px級の端末での保険（列幅を押し広げずに語中で折り返す）。 */
/* #92「letter-spacing: 2px; font-weight: 400; でお願いいたします」（2026-09-03）。 */
/* 字送りはカンプ幅402pxで2px。狭い端末では字送りが増えたぶん
「PRO CERTIFICATION」が3行に落ちるので、幅に追従させて行数を保つ
（390px級で従来と同じ1px。PCは版面が常に402pxなので上限の2pxで固定される）。 */
.fcard__sub { font-family: var(--font-gothic); font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: clamp(1px, calc(2px - (402px - 100vw) * 0.1), 2px); overflow-wrap: anywhere; color: var(--color-gold-light); }
/* 日本語のサブラベル（裏メニュー）だけは字送りを詰める。2pxのままだと
「筋肉を満喫できる」が1行に収まらず、#93 で入れた改行と合わせて3行になる。 */
.fcard__sub--ja { letter-spacing: 0.02em; }
/* #51 16pxにサイズアップ（2026-09-03）。 */
.fcard__title { margin-top: 10px; font-family: var(--font-mincho); font-size: 16px; line-height: 1.5; letter-spacing: 0.06em; color: #fff; }
/* #52 +2px（2026-09-03）。 */
.fcard__text { margin-top: 8px; font-family: var(--font-mincho); font-size: 12px; line-height: 1.85; letter-spacing: 0.04em; color: var(--color-gold-light); }
/* セクションの小見出しラベル（各セクションで同じ指定）。 */
.blog-block__en,
.wblog__label,
.media__label,
.firsttime__label,
.recruit__label {
/* 11px → 13px（2026-09-03）。写メ日記(#54)・筋肉日記(#57)・体験ブログ(#63)・
初めての方へ(#66 #68)・採用情報(#71 #73 #75) がいずれも「+2pxずつ」なので共通側で上げる。
カンプは10px。 */
margin: 0; font-family: var(--font-decor); font-size: 13px; letter-spacing: 0.3em; color: var(--color-gold-mid); }
/* ===== BLOG（Figma: 24:2668） ===== */
/* 上だけ角丸。手前の暗いセクションが角から覗く。 */
/* カンプ（24:2668）は上側だけ角丸30px。 */
.blog { padding: 80px 0; background: var(--color-paper); border-radius: 30px 30px 0 0; }
/* カンプ（24:2830）のグリッド幅は344px。 */
.blog__inner { padding: 0 29px; }
.blog__title { margin: 0; text-align: center; font-family: var(--font-decor); font-weight: 400; font-size: 38px; letter-spacing: 0.16em; color: var(--color-gold-mid); }
.blog-block { margin-top: 30px; }
.blog-block + .blog-block { margin-top: 60px; }
.blog-block__head { text-align: center; }
/* #54 #57 +2px（2026-09-03）。カンプは24px。余白もカンプ実測（24:2821）に合わせる:
ラベル→見出し15px / 見出し→罫線20px / 罫線→グリッド35px（外側gap20 + グリッドのpt15）。 */
.blog-block__title { margin: 15px 0 0; font-family: var(--font-mincho); font-weight: 400; font-size: 26px; letter-spacing: 0.1em; color: var(--color-heading); }
.blog-block__rule { display: block; width: 32px; height: 1px; margin: 20px auto 0; background: var(--color-gold-mid); }
/* 幅ずれ対策は .sokumen__list のコメント参照（ここもセラピスト名が入る）。 */
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 10px; margin: 35px 0 0; padding: 0; list-style: none; }
.blog-grid__item { display: flex; }
.bcard {
display: flex; flex-direction: column; flex: 1 1 auto;
border: 1px solid var(--color-gold-mid); border-radius: 5px; background: rgba(255, 255, 255, 0.1);
overflow: hidden; text-decoration: none;
}
/* 画像はカンプの 165×150 と同じ比率で固定する。 */
.bcard__photo { position: relative; display: block; aspect-ratio: 165 / 150; overflow: hidden; }
.bcard__body { display: flex; flex-direction: column; padding: 10px 15px 14px; }
.bcard__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* #55 #58「名前・本文：14pxに / 日付：12pxに」（2026-09-03）。カンプは 10 / 7 / 10px。 */
.bcard__name { font-family: var(--font-decor); font-size: 14px; letter-spacing: 0.1em; color: var(--color-brown); }
.bcard__date { font-family: var(--font-decor); font-size: 12px; letter-spacing: 0.04em; color: var(--color-gold-mid); }
.bcard__title { margin-top: 8px; font-family: var(--font-mincho); font-size: 14px; line-height: 1.5; letter-spacing: 0.04em; color: var(--color-heading); }
.blog-block__more { margin-top: 45px; }
/* ===== 女性風俗体験ブログ（Figma: 24:2728） ===== */
/* カンプの塗りは「支給画像を60%で敷いた上に白」。 */
.wblog {
padding: 80px 0;
background:
linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
url(../../../index/img/wblog/wblog-bg.jpg) center center / cover no-repeat,
#fff;
}
/* カンプ（24:2737）のカード幅は337px。 */
.wblog__inner { padding: 0 32.5px; }
.wblog__head { text-align: center; }
/* #61 +2px（2026-09-03）。カンプは24pxで実装が20pxと元から小さかったため、
カンプ24px + 2px = 26px にして、写メ日記・初めての方へ・採用情報の見出しと揃えた。 */
/* #94「font-weight: 500;に変更」（2026-09-03）。 */
.wblog__title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; font-family: var(--font-mincho); font-weight: 500; font-size: 26px; letter-spacing: 0.08em; color: var(--color-heading); }
.wblog__icon { flex: 0 0 auto; width: 34px; height: 34px; }
.wblog__rule { display: block; width: 32px; height: 1px; margin: 12px auto 0; background: var(--color-gold-mid); }
.wblog__list { display: grid; gap: 20px; margin: 30px 0 0; padding: 0; list-style: none; }
.wbcard {
display: flex; align-items: center; gap: 15px; padding: 20px 25px;
border-radius: 15px; background: var(--color-paper); text-decoration: none;
}
.wbcard__photo { flex: 0 0 auto; display: block; width: 100px; height: 100px; overflow: hidden; }
/* #63「+2pxずつ」「タイトル・本文・日付をデザインにあわせて」（2026-09-03）。
カンプ（24:2737）は カテゴリ 10px(Shippori Mincho/tracking1.5) と 日付 7px(Jost/opacity.5/tracking0.7)
を1行で両端に振り、その下にタイトル 12px(Jost/line-height1.6/tracking0.6)。
実装は body に伸長指定が無く、両端揃えが効かずに日付が右端まで寄っていなかった。
サイズはカンプ + 2px。 */
.wbcard__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 5px; min-width: 0; }
.wbcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.wbcard__category { font-family: var(--font-mincho); font-size: 12px; line-height: 15px; letter-spacing: 1.5px; color: var(--color-gold-mid); }
/* フォールバックは --font-gothic（'Jost','Noto Sans JP'）にする。
'Jost', var(--font-mincho) だと日本語が明朝になり、カンプのJost指定と見た目が離れる。 */
.wbcard__date { flex: 0 0 auto; font-family: var(--font-gothic); font-size: 9px; line-height: 15px; letter-spacing: 0.7px; opacity: 0.5; color: var(--color-gold-mid); }
.wbcard__title { margin-top: 0; font-family: var(--font-gothic); font-size: 14px; line-height: 1.6; letter-spacing: 0.6px; color: var(--color-heading); }
.wblog__more { margin-top: 30px; }
/* セクションのタイトル（各セクションで同じ指定）。 */
.media__title,
.firsttime__title,
.recruit__title {
/* #66（初めての方へ）ほか「+2pxずつ」（2026-09-03）。カンプは25.6px。
写メ日記・体験ブログの見出しも26pxにしたので、セクション見出しは全て26pxで揃う。 */
/* #94「font-weight: 500;に変更」（2026-09-03）。指示は「初めての方へ」と「採用情報」に付いていたが、
3つは同じ見た目の見出しなので、メディア掲載情報も揃える。 */
margin: 8px 0 0; font-family: var(--font-mincho); font-weight: 500; font-size: 26px; letter-spacing: 0.1em; color: var(--color-heading); }
/* ===== メディア掲載情報（Figma: 26:4646） ===== */
.media { padding: 80px 0; background: var(--color-paper); }
.media__inner { padding: 0 30px; }
/* このセクションも見出しは左寄せ。 */
/* カルーセル */
.media__carousel { margin-top: 20px; }
.media__stage { position: relative; aspect-ratio: 342 / 220; border-radius: 16px; overflow: hidden; background: var(--color-paper-deep); }
.mslide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.mslide.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.mslide__link { position: absolute; inset: 0; display: block; text-decoration: none; }
/* キャプションの可読性を担保する下からの黒グラデ。 */
.mslide__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0)); }
/* 中身は管理画面のタイトル（最大200字）なので、長くても枠を突き抜けないよう2行で止める。 */
.mslide__caption {
position: absolute; left: 16px; right: 16px; bottom: 16px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
font-family: var(--font-mincho); font-size: 12px; line-height: 1.7; letter-spacing: 0.06em; color: #fff;
}
.media__dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.media__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(168, 137, 90, 0.3); cursor: pointer; }
.media__dot.is-active { background: var(--color-gold-mid); }
/* 掲載一覧 */
.media__list { display: grid; gap: 15px; margin: 20px 0 0; padding: 0; list-style: none; }
.mcard {
display: flex; align-items: center; gap: 16px; padding: 16px;
border: 1px solid rgba(168, 137, 90, 0.5); border-radius: 12px; text-decoration: none;
}
.mcard__photo { flex: 0 0 auto; display: block; width: 85px; height: 85px; border-radius: 6px; overflow: hidden; }
.mcard__body { display: flex; flex-direction: column; min-width: 0; }
.mcard__meta { font-family: var(--font-decor); font-size: 11px; letter-spacing: 0.14em; color: var(--color-gold-mid); }
/* カンプは1〜2行に収まる幅。タイトルが長い場合も2行で止める。 */
.mcard__text {
margin-top: 6px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
font-family: var(--font-mincho); font-size: 11px; line-height: 1.65; letter-spacing: 0.01em; color: var(--color-heading);
}
.media__more { margin-top: 45px; }
@media (prefers-reduced-motion: reduce) {
.mslide { transition: none; }
}
/* ===== 初めての方へ（Figma: 26:4825） ===== */
.firsttime { padding: 80px 0; background: var(--color-white-warm); }
.firsttime__inner { padding: 0 30px; }
.firsttime__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.firsttime__item { display: flex; }
.acard { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; }
/* カンプは上辺がアーチ。半径300pxはブラウザ側で幅の半分まで丸められ、Figmaと同じ形になる。
寸法はカンプ実測 163×174（2026-09-01 Figmaで再計測。以前の 163:200 は縦に伸びすぎだった）。
写真もこの比率に合わせて切り出し済みなので、object-fit は保険。 */
.acard__photo { position: relative; display: block; aspect-ratio: 163 / 174; border-radius: 300px 300px 0 0; overflow: hidden; background: var(--color-cream); }
.acard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* #68 +2px（2026-09-03）。カンプは en 9px / タイトル 16px / 本文 10px。
余白（写真→本文12 / ラベル→タイトル5 / タイトル→本文10 / 本文→ボタン15）は
カンプと一致していたのでそのまま。 */
/* #89「余白をデザインを参考に少し狭く」（2026-09-03）。
margin の値自体はカンプと同じ（12 / 5 / 10）だが、#68 で文字を大きくしたときに
既定の line-height ぶんの leading が増え、字面どうしの間隔が 19/23/23px まで開いていた。
行送りを詰めて、カンプ（12/5/10）に近づける。 */
.acard__en { margin-top: 12px; font-family: var(--font-decor); font-size: 13px; line-height: 1; letter-spacing: 0.2em; color: var(--color-gold-mid); text-transform: uppercase; }
.acard__title { margin-top: 2px; font-family: var(--font-mincho); font-size: 18px; line-height: 1.4; letter-spacing: 0.08em; color: var(--color-heading); }
/* カンプは2行に収まる字送り。文字を詰めて3行に落ちないようにする。 */
/* 実装は9.5pxだったが、+2pxで11.5pxは半端なのでカンプ10px + 2px = 12px にした。 */
.acard__text { flex: 1 1 auto; margin-top: 4px; font-family: var(--font-mincho); font-size: 12px; line-height: 1.7; letter-spacing: normal; color: var(--color-body); }
.acard__more {
display: flex; align-items: center; justify-content: center; min-height: 34px; margin-top: 15px; padding: 8px;
border: 1px solid rgba(168, 137, 90, 0.5); border-radius: 999px;
font-family: var(--font-mincho); font-size: 13px; letter-spacing: 0.08em; color: var(--color-brown);
}
/* 画像+テキストの横長カード（初めての方へ・採用情報で共有） */
.widecard {
display: flex; align-items: center; gap: 20px; margin-top: 30px; padding: 20px;
/* #69「不透明度20%の白背景を敷いています（デザイン参照）」（2026-09-03）。
地の rgba(255,255,255,0.2) は既に一致していた。枠線と影がカンプ（26:4857）と
違っていたので合わせる: border 0.588px / shadow 0 4px 10px rgba(168,137,90,0.1)。 */
border: 0.588px solid rgba(168, 137, 90, 0.15); border-radius: 16px; background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 10px rgba(168, 137, 90, 0.1); text-decoration: none;
}
/* 採用情報のモニター募集はクリーム地（カンプ 27:5049 は #f6f3ee ＝ --color-paper）。
影の値は #105（2026-09-04）でFigmaのプロパティパネルから読み直した。
ドロップシャドウ X0 / Y4 / ぼかし15 / 広がり0 / #A8895A 15%。以前の7.5pxは読み違い。 */
.widecard--cream { background: var(--color-paper); box-shadow: 0 4px 15px rgba(168, 137, 90, 0.15); }
.widecard__photo { flex: 0 0 auto; display: block; width: 100px; height: 100px; overflow: hidden; }
.widecard__body { display: flex; flex-direction: column; min-width: 0; }
/* #75 +2px（2026-09-03）。カンプ（27:5049）は en 9px / タイトル 16px / 本文 10px。
タイトル・本文は .acard 側（#68）と同じ 18px / 12px に揃えた。 */
/* #98「変な部分で改行されないようフォントサイズを1px小さく」（2026-09-03）。
指示は「ホテルでお待ち合わせの方へ」と「おすすめホテル一覧」の2つ。
採用情報のモニター募集も同じクラスだが、そちらは短いので見え方は変わらない。 */
/* #101。ラベル→タイトル→本文の間隔がカンプ（7.5 / 11.5）に対し 16.4 / 20.7 と開いていた。
原因は既定の行送りの余りなので、.acard と同じように行送りを詰める。
おすすめホテルのカードも同じクラスなので一緒に詰まる（同じ部品なので揃える方針）。 */
.widecard__en { font-family: var(--font-mincho); font-size: 11px; line-height: 1; letter-spacing: 0.14em; color: var(--color-gold-mid); }
.widecard__title { margin-top: 6px; font-family: var(--font-mincho); font-size: 17px; line-height: 1.4; letter-spacing: 0.08em; color: var(--color-heading); }
/* #106 カンプ（27:5055）のテキストノードの実値に合わせる（2026-09-04 ご指示）。
Figmaのプロパティ: サイズ10px / 行間150% / 文字間隔0px。
#75 の「+2pxずつ」より、この箇所はカンプ優先とのご指示。 */
.widecard__text { margin-top: 0; font-family: var(--font-mincho); font-size: 10px; line-height: 1.5; letter-spacing: 0; color: var(--color-body); }
/* ===== 採用情報（Figma: 27:5020） ===== */
/* カードは「初めての方へ」と同じ .acard / .widecard を共有する。 */
.recruit { padding: 80px 0; background: var(--color-paper-deep); }
.recruit__inner { padding: 0 30px; }
.recruit__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.recruit__item { display: flex; }
.recruit .widecard { margin-top: 30px; }
/* モニター募集の特典リスト */
/* カンプ（27:5128）は 枠線0.5px rgba(168,137,90,0.5) / 角丸5px / padding10 / 行間gap2。
文字は10pxなので #75 の +2px で12px。
#101「デザインを参考に余白感を調整」（2026-09-03）。カンプの枠は71px高、実装は94pxだった。
差は文字サイズではなく既定の行送り（約1.9倍）の余り。行送りをカンプの行ピッチ18pxに合わせ、
gap を殺して、上下パディングを字面基準（上12.5 / 下15）になるよう置き直す。 */
.monitor-points {
/* #105 カンプは枠の右端が本文の右端より約7px内側にある（実測 174.2px 幅）。 */
display: flex; flex-direction: column; gap: 0; margin-top: 6.5px; margin-right: 7px; padding: 8px 10px 8.5px;
border: 0.5px solid rgba(168, 137, 90, 0.5); border-radius: 5px;
}
.monitor-points__item { display: flex; align-items: center; gap: 6px; font-family: var(--font-mincho); font-size: 12px; line-height: 1.5; letter-spacing: 0.04em; color: var(--color-body); }
/* #105 カンプの星は実測 約6×6px。実装は12pxで倍近く大きかった。
本文がカンプ10px→実装12pxなので、同じ比率の 7px にする。 */
.monitor-points__mark { flex: 0 0 auto; width: 7px; height: 7px; color: var(--color-gold-mid); }
/* ===== 講師紹介（Figma: 27:5105） ===== */
.instructor {
/* #99「下の余白が足りていない」（2026-09-03 / 2026-09-04 再指摘）。
カンプ（27:5105）をFigmaのプロパティから実測した値は下記。
セクション 401 × 280.88
中身のまとまり 330 × 160.88 / 内部の間隔 30px（タイトル↔ボタン）
└ ラベル＋タイトル 330 × 74.11 / 内部の間隔 5px
└ ボタン 324 × 56.77 / パディング上下 20px
→ 上下の余白は (280.88 - 160.88) / 2 = 60px
なお カンプの Container は 高さ固定74.11px に対して中身が86pxあり、
オートレイアウトの箱と実際の見え方がずれている。そのため総高280.88に合わせるより、
ボタン下の余白をカンプの60px（字面基準の実測61.9px）に合わせる方を優先する。
背景は cover にしたので、セクションが写真より高くなっても地色は出ない。 */
padding: 61px 0;
/* カンプ（417:1925）の塗りは「#000000 50% + 写真」。黒を重ねないと文字が沈まない。
以前の書き出しは黒50%を焼き込んだ画像で、その上にこの50%が重なって二重に暗くなっていた。
いまは素の写真を置いてあるので、暗さはこの1枚ぶんだけ。
#76「よひとさんの目が見切れないように」（2026-09-03）。
切り抜き位置ではなく素材そのものが目の高さで切れていたため、元画像（1320×1980）から
切り直した。さらに「目がテキストに隠れる／テキストより上に」のご指摘（同日）を受け、
402px版面で目の高さが 62px（ラベルの上端80pxより上）に来る位置を選んでいる。
縦横比はカンプ（401×280.88 ≒ 1000:700）に合わせ、上端は据え置きで下を詰めた
（元画像 y335〜1259 → 1000×700。2026-09-03 ご指示）。 */
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
/* 画像を差し替えたので ?v= を付ける。付けないと既に見た端末では古い書き出しが出続ける。 */
/* #99 再指摘（2026-09-04）。背景の高さが足りない件。
画像は1000×700で、100% auto だと写真の高さ = 版面幅 × 0.7 にしかならない。
セクションの高さは中身で決まるため、版面が402pxより狭い端末では
写真が下で尽きて地色が出ていた（377px幅でタイトルが3行になると52px不足）。
cover にすると、402pxでは倍率が 100% auto と同じ0.402で見え方は変わらず、
セクションが写真より高いときだけ縦に合わせて左右をわずかに切る。 */
url(../../../index/img/instructor/instructor-bg.jpg?v=4) center top / cover no-repeat,
var(--color-ink);
}
.instructor__inner { padding: 0 35px; }
/* #77 +2pxずつ（2026-09-03）。 */
/* カンプ（27:5087）: Cormorant 12px / 行間15px / 字間25% / #A8895A。
サイズは #77「+2pxずつ」のご指示で13pxのまま。行間・字間・色をカンプに合わせる。 */
.instructor__label { margin: 0; font-family: var(--font-decor); font-size: 13px; line-height: 15px; letter-spacing: 0.25em; color: #a8895a; }
/* #96「font-weight: 500;に変更 / 文字サイズを1px小さく」（2026-09-03）。 */
/* カンプ（27:5088）: Shippori Mincho 22px / 行間150% / 字間5% / #F6F3EE。
サイズと太さは #96「1px小さく / font-weight 500」のご指示どおり 21px / 500。
行間165%は画素測定の誤りだったので150%に、字間と色もカンプに合わせる。
ラベルとの間隔はカンプの5px。 */
.instructor__title { margin: 5px 0 0; font-family: var(--font-mincho); font-weight: 500; font-size: 21px; line-height: 1.5; letter-spacing: 0.05em; color: #f6f3ee; }
/* カンプ（27:5132）: 幅324 / 高さ56.77 / パディング上下20px、タイトルとの間隔30px。
17pxに削っていたのは #100 をこのセクションと読み違えたため（実際はFVの指示）。カンプに戻す。
幅はカンプが本文列（331px）より少し狭い324pxなので、左右に3.5pxずつ余白を入れる。 */
.instructor__btn { margin: 30px 3.5px 0; padding: 20px 16px; }
/* ===== 女性風俗GROWコンセプト（Figma: 26:4262） ===== */
/* カンプの塗りは「写真50% + var(--color-ink) 20%」。暗い下地の上に写真を半分だけ透かした見え方を再現する。 */
.gconcept {
/* #103「続きを読むを押す前にパララックスがきてしまう」（2026-09-03）。
このセクションは .sticky-stack の1枚目なので、貼り付いた時点で下端が画面の下端に重なる。
「続きを読む」は下端から82pxの位置にあり、固定の追従ナビ（58px）と
ページ上部へ戻るボタン（下端から80〜124px）に重なったうえ、
82pxスクロールしただけで次のセクションに覆われていた。
下の余白を足して、ボタンに重ならず、覆われるまでの余裕も持たせる。 */
padding: 80px 24px 150px;
background:
linear-gradient(rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.5)),
/* 「続きを読む」で高さが変わるため cover は使わない。
cover だと高さの変化で拡大率と切り取り位置が動いてしまう。
幅基準(100% auto)＋上寄せなら、高さが変わっても背景は動かない。 */
url(../../../index/img/gconcept/concept-bg.jpg) center top / 100% auto no-repeat,
var(--color-ink);
}
/* カンプの内容幅は402pxに対して339px。左右の余白を等分して中央に置く。 */
.gconcept__inner { max-width: 339px; margin: 0 auto; }
.gconcept__label {
margin: 0;
font-family: var(--font-decor); font-weight: 400; font-size: 12px; line-height: 15px;
letter-spacing: 0.25em; color: var(--color-gold-light);
}
.gconcept__title {
margin: 8px 0 0;
font-family: var(--font-mincho); font-weight: 400; font-size: 26px; line-height: 32px;
/* カンプの字間は5%だが、その値だと内容幅339pxを4pxほど超えて2行に落ちる。1行に収まるまで詰める。 */
letter-spacing: 0.03em; color: var(--color-paper); white-space: nowrap;
}
/* 動画枠。URLが入るまではカンプの静止画を同じ比率で置いておく。 */
.gconcept__video { margin-top: 30px; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.gconcept__video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* 再生前の静止画。押すと idx-ui.js が iframe に差し替える。 */
.gconcept__play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.gconcept__play img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 中央の再生マーク。三角はボーダーで作るので画像を足さない。 */
.gconcept__play-icon {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 56px; height: 56px; border-radius: 50%;
background: rgba(10, 10, 10, 0.55); border: 1px solid rgba(255, 255, 255, 0.7);
transition: background-color 0.2s ease;
}
.gconcept__play-icon::before {
content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.gconcept__play:hover .gconcept__play-icon { background: rgba(10, 10, 10, 0.75); }
/* 差し替え時にどんな比率が来ても枠が崩れないよう cover で受ける。 */
.gconcept__lead {
margin: 30px 0 0;
font-family: var(--font-mincho); font-weight: 400; font-size: 20px; line-height: 28px;
letter-spacing: 0.042em; color: var(--color-paper);
}
.gconcept__quotes,
.gconcept__body {
margin: 0;
font-family: var(--font-mincho); font-weight: 500; font-size: 14px; line-height: 2.4;
letter-spacing: 0.05em; color: var(--color-gold-light);
}
.gconcept__quotes { margin-top: 16px; }
.gconcept__body { margin-top: 12px; }
/* 「続きを読む」で開く後半。grid の 0fr→1fr で滑らかに開く（コンセプトと同じ作り）。 */
.gconcept__more-inner { overflow: hidden; }
.gconcept__toggle {
display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--color-gold-light);
background: none; cursor: pointer;
/* Figma指定は Jost。日本語グリフを持たないため、カンプ同様に明朝へフォールバックさせる。 */
font-family: 'Jost', var(--font-mincho); font-weight: 400; font-size: 12px; line-height: 16.5px;
letter-spacing: 0.15em; color: var(--color-gold-light);
}
.gconcept__toggle-icon { display: block; transition: transform 0.3s ease; }
.gconcept__toggle[aria-expanded="true"] .gconcept__toggle-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.gconcept__more, .gconcept__toggle-icon { transition: none; }
}
/* ===== YOHITOさんコメント（Figma: 26:4301） ===== */
/* カンプの塗りは「白シルクの写真15% + #FFFFFF」。左上だけ60pxの角丸で、直前の黒いセクションを覗かせる。 */
.ymsg {
padding: 80px 0;
border-radius: 60px 0 0 0;
background:
linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
url(../../../index/img/ymsg/silk-bg.jpg) center center / cover no-repeat,
#fff;
}
.ymsg__head { padding: 0 30px; }
.ymsg__label {
margin: 0;
font-family: var(--font-decor); font-weight: 400; font-size: 12px; line-height: 15px;
letter-spacing: 0.25em; color: var(--color-gold-mid);
}
.ymsg__title {
margin: 8px 0 0;
font-family: var(--font-mincho); font-weight: 400; font-size: 26px; line-height: 32px;
letter-spacing: normal; color: var(--color-ink-warm);
}
/* 写真と引用パネルの重なり。カンプは402px幅ぴったりの版面なので、幅も位置も実測どおりに置く。 */
.ymsg__intro { position: relative; height: 360px; margin-top: 30px; }
.ymsg__photo {
position: absolute; left: -3px; top: 22px; width: 278px; height: 350px;
/* 上辺アーチ。半径336pxはブラウザ側で幅の半分まで丸められ、Figmaと同じ形になる。 */
border-radius: 336px 336px 0 0; overflow: hidden;
}
.ymsg__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ymsg__quote {
position: absolute; right: 0; top: 0; width: 215px; padding: 30px 21px;
border: 1px solid rgba(168, 137, 90, 0.15); background: rgba(255, 253, 249, 0.75);
}
.ymsg__quote-lead {
margin: 0;
font-family: var(--font-mincho); font-weight: 500; font-size: 16px; line-height: 1.8;
letter-spacing: 0.05em; color: var(--color-ink-warm);
}
.ymsg__quote-sub {
margin: 10px 0 0;
font-family: var(--font-mincho); font-weight: 500; font-size: 12px; line-height: 25.2px;
letter-spacing: normal; color: var(--color-brown);
}
.ymsg__body { padding: 0 24px; margin-top: 45px; }
.ymsg__body p {
margin: 0;
font-family: var(--font-mincho); font-weight: 500; font-size: 14px; line-height: 2;
letter-spacing: 0.05em; color: var(--color-body-warm);
}
.ymsg__body p + p { margin-top: 16px; }
.ymsg__sign { margin-top: 32px !important; text-align: right; }
.ymsg__sign-name {
display: inline-block; padding-bottom: 1px;
border-bottom: 1px solid var(--color-gold-mid);
font-family: var(--font-decor); font-style: italic; font-weight: 400;
font-size: 20px; line-height: 28px; letter-spacing: 2px; color: var(--color-ink-warm);
}
/* ===== 当日の流れ（Figma: 226:5966） ===== */
/* カンプの塗りは「放射状グラデ2枚 + 黒大理石の写真15%」。上部の淡い光だけ拾って近似する。 */
.flow {
padding: 80px 0;
background:
radial-gradient(140% 55% at 50% 0%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 70%),
linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.85)),
/* 「続きを見る」で高さが変わるため cover は使わない（gconcept と同じ理由）。
マーブルは模様なので、幅基準だと足りない下端は縦に繰り返して埋める。
地の暗さが85%あるので継ぎ目は出ない。 */
url(../../../index/img/flow/marble-bg.jpg) center top / 100% auto repeat-y,
var(--color-ink);
}
.flow__head { padding: 0 24px; text-align: center; }
.flow__label {
margin: 0;
font-family: var(--font-decor); font-weight: 400; font-size: 14px; line-height: 15px;
letter-spacing: 0.2em; color: var(--color-gold-light);
}
.flow__title {
margin: 15px 0 0;
/* #94「font-weight: 500;に変更」（2026-09-03）。 */
font-family: var(--font-mincho); font-weight: 500; font-size: 36px; line-height: 44px;
letter-spacing: 0.15em; color: #fff;
}
.flow__divider { display: block; width: 32px; height: 1px; margin: 27px auto 0; background: rgba(223, 192, 138, 0.4); }
/* 縦のゴールドライン。丸バッジの中心(左24+20)を通し、上下は最初と最後のバッジの中心で止める。 */
/* カンプ（226:5886）はカードが X=60・幅294.42。番号は左端寄り、右側は広めに空ける。 */
/* #80「ボックスの位置もう少し右（デザインを参照）」（2026-09-03）。
カンプ（226:5871）はセクション左右24pxで、マーカー40 + 間隔20 + カード294.4 = 354.4。
実装は左16px・マーカーとの間隔4pxで、カードが左に寄りすぎていた。 */
.flow__steps { position: relative; margin-top: 48px; padding: 0 24px; }
.flow__steps::before {
/* 縦線はマーカーの中心（24 + 40/2 = 44）に合わせる。 */
content: ''; position: absolute; left: 43.5px; top: 20px; bottom: 20px; width: 1px;
background: linear-gradient(180deg, rgba(223, 192, 138, 0.55), rgba(223, 192, 138, 0.15));
}
.flow__list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.flow__item { display: flex; align-items: flex-start; gap: 20px; }
.flow__marker {
position: relative; flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid rgba(223, 192, 138, 0.5); background: var(--color-gold-light);
/* #95「フォントサイズを小さく font-size: 22px;くらいに」（2026-09-03）。指示線は丸マーカーを指していた。 */
font-family: var(--font-decor); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1; color: #fff;
/* #79「数字の位置をご調整ください」→「キチンと丸の中心に」（2026-09-03 再指摘）。
Cormorant の既定はオールドスタイル数字で、3・4・5・7 はベースラインより下に出て
6 は上に伸びる。高さが数字ごとに違うため、どう寄せても揃わない。
ライニング数字にすると全桁がベースライン〜キャップ高で揃い、
line-height:1 の中央寄せで字面の中心が円の中心（20px）に対して約0.1pxまで合う。
padding-left は斜体で字面が左に寄るぶんの補正（送り幅基準の中央寄せなので半分効く）。 */
font-variant-numeric: lining-nums;
font-feature-settings: 'lnum' 1;
padding-left: 1.5px;
}
.flow__card {
flex: 1 1 auto; min-width: 0; padding: 20px 24px;
border: 1px solid rgba(223, 192, 138, 0.12); border-radius: 16px;
/* 半透明の地に背景のマーブルが透けるので、すりガラスにする。
ぼかしが無いと下の模様がそのまま出て濁って見える。 */
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.flow__no { display: flex; align-items: baseline; gap: 9px; margin: 0; }
/* マーカーと同じ理由でライニング数字にする（STEP 03 と 06 で字面の高さが変わってしまう）。 */
.flow__no-num { font-family: var(--font-decor); font-style: italic; font-size: 26px; line-height: 22.4px; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; color: var(--color-gold-light); }
/* Figma指定は Jost。日本語グリフを持たないため、カンプ同様に明朝へフォールバックさせる。 */
.flow__no-en { font-family: 'Jost', var(--font-mincho); font-size: 9px; line-height: 13.5px; letter-spacing: 0.35em; color: var(--color-gold-light); }
.flow__card-title {
margin: 4px 0 0;
font-family: var(--font-mincho); font-weight: 400; font-size: 18px; line-height: 28px;
letter-spacing: 0.05em; color: #fff;
}
.flow__card-text {
margin: 8px 0 0;
font-family: 'Jost', var(--font-mincho); font-weight: 400; font-size: 12px; line-height: 24px;
letter-spacing: 0.05em; color: #fff;
}
.flow__card-link {
display: inline-block; margin-top: 12px; padding-bottom: 1px;
border-bottom: 1px solid rgba(223, 192, 138, 0.6);
font-family: 'Jost', var(--font-mincho); font-weight: 400; font-size: 11px; line-height: 16.5px;
letter-spacing: 0.08em; color: var(--color-gold-light); text-decoration: none;
}
/* STEP04以降。grid の 0fr→1fr で滑らかに開く（他セクションのアコーディオンと同じ作り）。 */
.flow__more-inner { overflow: hidden; }
.flow__more-inner > :first-child { margin-top: 20px; }
.flow__actions { margin-top: 32px; padding: 0 24px; text-align: center; }
.flow__toggle {
display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px;
border: 1px solid rgba(223, 192, 138, 0.3); border-radius: 999px;
background: rgba(223, 192, 138, 0.3); cursor: pointer;
/* #82「フォントはJostで / +2pxアップ」（2026-09-03）。
'Jost' は指定していたが日本語グリフが無く、フォールバックが明朝（--font-mincho）だったため
「続きを見る」が明朝で出ていた。--font-gothic は 'Jost','Noto Sans JP' なので欧文はJost・
和文はゴシックになる。 */
font-family: var(--font-gothic); font-weight: 400; font-size: 16px; line-height: 18px;
letter-spacing: 0.15em; color: var(--color-gold-light);
}
.flow__toggle-icon { display: block; transition: transform 0.3s ease; }
.flow__toggle[aria-expanded="true"] .flow__toggle-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.flow__more, .flow__toggle-icon { transition: none; }
}
/* ===== ご予約はこちら（Figma: 26:4348） ===== */
/* カンプの塗りは「粒状グラデの写真20% + var(--color-ink)」。 */
.reserve {
padding: 80px 24px;
background:
linear-gradient(rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.8)),
url(../../../index/img/reserve/reserve-bg.jpg) center center / cover no-repeat,
var(--color-ink);
}
/* カンプの内容幅は402pxに対して340px。 */
.reserve__inner { max-width: 340px; margin: 0 auto; text-align: center; }
.reserve__label { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.reserve__ornament { display: block; color: var(--color-gold-mid); }
.reserve__label-text {
font-family: var(--font-decor); font-weight: 400; font-size: 12px; line-height: 15px;
letter-spacing: 0.3em; color: var(--color-gold-light);
}
.reserve__title {
margin: 15px 0 0;
font-family: var(--font-mincho); font-weight: 400; font-size: 32px; line-height: 38.4px;
letter-spacing: 0.05em; color: var(--color-paper);
}
.reserve__lead {
margin: 16px 0 0; opacity: 0.75;
/* Figma指定は Jost。日本語グリフを持たないため、カンプ同様に明朝へフォールバックさせる。 */
font-family: 'Jost', var(--font-mincho); font-weight: 400; font-size: 14px; line-height: 2;
letter-spacing: 0.05em; color: var(--color-gold-light);
}
.reserve__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }
/* TEL / LINE の丸ボタン。ご予約セクションとPC左パネルで同じ指定。
.pcframe は1200px未満では非表示なので、ここで一緒に定義してよい。 */
.reserve__btn,
.pcframe__btn {
display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 16px 12px;
border-radius: 999px; text-decoration: none;
font-family: 'Jost', var(--font-mincho); font-weight: 400; font-size: 14px; line-height: 16.5px;
letter-spacing: 0.15em; color: var(--color-paper);
}
.reserve__btn--tel,
.pcframe__btn--tel { border: 1px solid rgba(246, 243, 238, 0.3); }
.reserve__btn--line,
.pcframe__btn--line { background: var(--color-line-green); }
/* ===== PC（Figma: TOP_PC 292:3879 / コードレビュー 417:42） =====
中央カラムはカンプ実測 402px（キャンペーンバーの帯幅を画素で測って 403px）。
1440px の内訳は 519(左) + 402(中央) + 519(右)。
一度は「1920pxで占有率21%は窮屈」という判断で720pxに広げていたが、
2026-09-03 に「コンテンツ幅が広いのでデザインにあわせて（402pxくらい）」の指摘があり戻した。
広げるとPC専用の作り込み（2列化・YOHITOよりの重なり調整）が要るが、
402pxならSPの組みがそのまま成立するので、その手当ても不要になっている。 */
.pcframe { display: none; }
@media (min-width: 768px) {
/* 中央カラムの幅。追従ナビ・サイドメニュー・左右パネルがこの値から寸法を導くので、
数値を散らさずここ一箇所で持つ。 */
:root { --pc-col: 402px; }
body { background: var(--color-ink); }
/* 本体はSP幅のまま中央へ。transform は付けない（中の position:fixed が壊れるため）。 */
.growth-content { position: relative; z-index: 2; width: var(--pc-col); margin-inline: auto; }
/* ヘッダーは .growth-content の中の sticky なので自動で中央カラム幅になる。
position:fixed の追従ナビだけ中央カラムに合わせる。 */
.bottom-nav { left: 50%; right: auto; width: var(--pc-col); transform: translateX(-50%); }
.side-menu-panel { right: calc(50% - var(--pc-col) / 2); }
/* 左右に情報が出るので、カンプに無い「↑」ボタンはPCでは隠す。 */
.scroll-top { display: none; }
}
/* 左右のパネルを置けるだけの幅（402 + 300×2 = 1002）が確保できてから出す。
これ未満では中央402pxのみになり、ハンバーガーと追従ナビで操作する。
以前の1320pxは中央が720pxだった頃の値。402pxに戻したぶん閾値も下げ、
ノートPCやタブレット横向きでもカンプと同じ「左にTEL/LINE・右にMENU」の見た目にしている
（2026-09-03 ご指示）。 */
@media (min-width: 1002px) {
.pcframe { display: block; }
/* 左パネルにTEL/LINE、右パネルにメニューが常時出るので、
追従ナビとハンバーガー（スライドインするメニュー）は重複になる。 */
.bottom-nav { display: none; }
.hamburger { display: none; }
.side-menu-overlay { display: none; }
.pcframe__left,
.pcframe__right {
position: fixed; top: 0; bottom: 0; z-index: 1;
display: flex; flex-direction: column; justify-content: center; align-items: center;
width: calc((100vw - var(--pc-col)) / 2);
}
/* 左：カンプの塗りは「写真50% + #0A0A0A」。合成済みの状態で書き出してある。 */
.pcframe__left {
left: 0;
background: url(../../img/pc-left-bg.jpg) center center / cover no-repeat, var(--color-ink);
}
.pcframe__brand { display: block; width: 325px; max-width: calc(100% - 80px); }
.pcframe__brand img { display: block; width: 100%; height: auto; }
/* パネルは画面幅で伸縮する（1320pxでは300px）。狭いときは2つ並べると
文字が詰まるので、収まらなくなったら自動で縦積みにする。 */
.pcframe__actions {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px;
width: 340px; max-width: calc(100% - 80px); margin-top: 30px;
}
/* 右：#0A0A0A の面に、ハンバーガーと同じ項目を常時表示する。 */
.pcframe__right { right: 0; padding: 60px 30px; background: var(--color-ink); overflow-y: auto; }
.pcframe__inner { width: 205px; }
.pcframe__label {
margin: 0;
/* カンプ実測（417:2100）は Jost / 12px / 高さ20px / 字間3px。 */
font-family: var(--font-gothic); font-weight: 400; font-size: 12px; line-height: 20px;
letter-spacing: 0.25em; color: var(--color-gold-light);
}
/* カンプ実測（417:2098 右パネル）: MENUラベル下 15px、行の高さ 20.59px、行間 20px。 */
.pcmenu { margin: 15px 0 0; padding: 0; list-style: none; }
.pcmenu__row { border-bottom: 0.5px solid rgba(168, 137, 90, 0.1); }
.pcmenu__row + .pcmenu__row { margin-top: 20px; }
.pcmenu__link {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
font-family: var(--font-mincho); font-weight: 400; font-size: 14px; line-height: 20px;
letter-spacing: 0.05em; color: #fff; text-decoration: none;
}
/* カンプでゴールドなのは開いている親だけ（417:2105）。閉じている親は白（417:2145）。 */
.pcmenu__link:hover,
.pcmenu__link[aria-expanded="true"] { color: var(--color-gold-light); }
.pcmenu__icon {
flex: 0 0 auto; fill: none; stroke: var(--color-gold-mid); stroke-width: 1.3;
stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease;
}
.pcmenu__link[aria-expanded="true"] .pcmenu__icon--chevron { transform: rotate(180deg); }
.pcmenu__sub-inner { overflow: hidden; }
/* カンプ実測（417:2102 セラピスト群）: 親の下 5px、子の行送り 25px（行20px + 間5px）、
最後の子の下は 0（そのまま罫線）。開いた群の高さは 95.59px になる。
.pcmenu__sub-inner の中身は .pcmenu__sublink だけなので、上マージン1本で
「親の下」と「子どうしの間」の両方をまかなえる
（overflow: hidden で BFC になっているため、先頭の margin も外へ抜けない）。 */
.pcmenu__sublink {
position: relative; display: block; margin-top: 5px; padding: 0 0 0 25px;
font-family: var(--font-mincho); font-weight: 400; font-size: 12px; line-height: 20px;
letter-spacing: 0.05em; color: #fff; text-decoration: none;
}
/* カンプ（417:2110）の頭の印はダッシュの文字ではなく、x10〜20 に引いた10pxの罫。 */
.pcmenu__sublink::before {
content: ''; position: absolute; left: 10px; top: 50%; width: 10px; height: 1px;
background: var(--color-gold-mid);
}
.pcmenu__sublink:hover { color: var(--color-gold-light); }
}
@media (prefers-reduced-motion: reduce) {
.pcmenu__sub, .pcmenu__icon { transition: none; }
}
/* ===== Beige narrative sections (Concept / Foundation / Origin / Promise) ===== */
.home-narrow { max-width: 640px; margin: 0 auto; }
/* ===== Promise ===== */
.home-promise { background: linear-gradient(180deg, #f0ebe3 0%, var(--color-light-bg) 50%, #faf8f4 100%); padding: 32px 24px 40px; }
.home-promise .section-header__label { color: #5a4a28; }
.home-promise h2 { font-size: 1.15rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.8; margin-bottom: 10px; color: var(--color-light-text); }
.home-promise__list { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 600px; margin: 0 auto; }
@media (min-width: 768px) { .home-promise__list { grid-template-columns: repeat(2, 1fr); max-width: 760px; } }
.home-promise__card { background: rgba(255,255,255,0.65); border-radius: 14px; padding: 24px; border: 1px solid rgba(160,130,80,0.1); box-shadow: 0 2px 16px rgba(0,0,0,0.03); text-align: center; transition: transform 0.3s ease; }
.home-promise__card:hover { transform: translateY(-4px); }
.home-promise__icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(160,130,80,0.08); }
.home-promise__title { font-size: 0.88rem; font-weight: 500; margin-bottom: 8px; letter-spacing: 0.08em; color: var(--color-light-text); }
.home-promise__desc { font-size: 0.78rem; color: #3a3020; line-height: 1.9; font-weight: 300; }
.home-promise__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; padding-bottom: 16px; }
/* ===== PR Points ===== */
.home-pr { padding: 80px 0; background-image: url('/parts/index/img/marble-dark.jpg'); }
.home-pr .marble-section__overlay { background: rgba(12, 12, 12, 0.85); }
.home-pr__grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 900px; margin: 48px auto 0; }
@media (min-width: 768px) { .home-pr__grid { grid-template-columns: repeat(2, 1fr); } }
.home-pr__card { position: relative; overflow: hidden; background: var(--color-charcoal); border-radius: 20px; border: 1px solid var(--color-border-gold); text-align: left; transition: transform 0.3s ease; }
.home-pr__card:hover { transform: translateY(-4px); }
.home-pr__card--wide { grid-column: 1 / -1; }
.home-pr__media { position: relative; overflow: hidden; height: 220px; }
.home-pr__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.home-pr__card:hover .home-pr__media img { transform: scale(1.05); }
.home-pr__media-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, transparent 30%, rgba(26,26,26,0.95) 100%); }
.home-pr__media-caption { position: absolute; bottom: 16px; left: 24px; right: 24px; }
.home-pr__media-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; letter-spacing: 0.1em; color: var(--color-gold-light); }
.home-pr__media-title--compact { font-size: 1.3rem; }
.home-pr__body { padding: 24px 28px 28px; }
.home-pr__body h4 { font-size: 0.95rem; font-weight: 500; margin-bottom: 12px; letter-spacing: 0.05em; line-height: 1.6; }
.home-pr__body p { font-size: 0.78rem; color: var(--color-text-cream); line-height: 2; font-weight: 300; margin-bottom: 16px; }
/* ===== Flow ===== */
.home-flow { padding: 100px 0; background-image: url('/parts/index/img/marble-dark.jpg'); }
.home-flow .marble-section__overlay { background: rgba(12, 12, 12, 0.88); }
.home-flow__intro { font-size: 0.85rem; color: var(--color-text-cream); line-height: 2; font-weight: 300; max-width: 600px; margin: 0 auto 48px; }
.home-flow__timeline { position: relative; max-width: 700px; margin: 0 auto; }
.home-flow__spine { position: absolute; left: 24px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--color-gold), transparent); transform: translateX(-50%); }
@media (min-width: 640px) { .home-flow__spine { left: 50%; } }
.home-flow__step { position: relative; display: flex; align-items: flex-start; gap: 24px; margin-bottom: 48px; text-align: left; }
@media (min-width: 640px) { .home-flow__step--reverse { flex-direction: row-reverse; } }
.home-flow__icon { flex-shrink: 0; position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold)); box-shadow: 0 4px 20px rgba(201,169,110,0.3); }
.home-flow__step--reverse .home-flow__icon { margin-left: auto; }
.home-flow__card { flex: 1; background: var(--color-charcoal); border-radius: 16px; padding: 28px; border: 1px solid var(--color-border); max-width: 500px; }
.home-flow__card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.home-flow__card-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-gold); line-height: 1; }
.home-flow__card-title { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.08em; }
.home-flow__card-eng { font-family: var(--font-display); font-size: 0.6rem; color: var(--color-text-muted); letter-spacing: 0.15em; text-transform: uppercase; }
.home-flow__card-desc { font-size: 0.78rem; color: var(--color-text-cream); line-height: 2; font-weight: 300; }
/* 当日の流れ：続きを開閉（grid行アニメでスムーズに） */
.home-flow__more-inner { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 0.4s ease; }
.home-flow__more.is-open .home-flow__more-inner { opacity: 1; }
.home-flow__more-wrap { text-align: center; margin-top: 4px; }
.home-flow__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: rgba(201,169,110,0.08); border: 1px solid var(--color-border-gold); border-radius: var(--radius-pill); color: var(--color-gold); font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer; font-family: var(--font-serif); transition: background 0.3s ease, border-color 0.3s ease; }
.home-flow__toggle:hover { background: rgba(201,169,110,0.15); border-color: var(--color-gold); }
.home-flow__toggle-icon { transition: transform 0.3s ease; }
.home-flow__toggle.is-open .home-flow__toggle-icon { transform: rotate(180deg); }
/* ===== CTA ===== */
.home-cta { background-image: url('/parts/index/img/marble-dark.jpg'); }
.home-cta .final-cta__overlay { background: rgba(12, 12, 12, 0.82); }
.home-cta .section-header__label { color: var(--color-gold-light); }
.home-cta__lead { font-size: 0.85rem; margin-bottom: 40px; max-width: 500px; }
.home-cta__actions { align-items: stretch; margin-bottom: 32px; max-width: 300px; }
.home-cta__actions .btn { width: 100%; padding: 16px 36px; font-size: 0.85rem; }
/* ===== 年齢認証（エンター画面） ===== */
html.age-gate-locked, html.age-gate-locked body { overflow: hidden; }
.age-gate {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center; padding: 24px;
text-align: center;
background: radial-gradient(circle at 50% 25%, #1c1c1c 0%, var(--color-black) 70%);
transition: opacity 0.4s ease;
}
.age-gate.is-leaving { opacity: 0; pointer-events: none; }
.age-gate__inner {
max-width: 460px; width: 100%; padding: 48px 28px 40px;
border: 1px solid var(--color-border-gold); border-radius: var(--radius-lg);
background: rgba(255,255,255,0.02); box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.age-gate__brand { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.3em; color: var(--color-gold); font-weight: 600; margin-bottom: 18px; }
.age-gate__eyebrow { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 16px; }
.age-gate__divider { width: 40px; height: 1px; background: var(--color-gold-dark); margin: 0 auto 20px; }
.age-gate__title { font-size: 1.15rem; font-weight: 500; letter-spacing: 0.12em; color: var(--color-text-white); margin-bottom: 18px; }
.age-gate__text { font-size: 0.8rem; color: var(--color-text-cream); line-height: 2; font-weight: 300; margin-bottom: 28px; }
.age-gate__ask { color: var(--color-gold-light); margin-top: 10px; font-size: 0.85rem; }
.age-gate__actions { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }
.age-gate__btn { width: 100%; padding: 15px 24px; font-size: 0.8rem; }
.age-gate__note { font-size: 0.62rem; color: var(--color-text-muted); line-height: 1.7; margin-top: 24px; }
/* ===== Added home sections (即メン / 検索 / 本日の出勤 / 日記) ===== */
/* Shared section shells — light/dark/grey balance across the page */
.home-sec { padding: 72px 0; }
.home-sec--dark { background: var(--color-black); }
.home-sec--grey { background: var(--color-charcoal); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
/* コンセプトと同じベージュ背景（暗い流れの中の明るいブレイク） */
.home-sec--beige { background: linear-gradient(180deg, var(--color-light-bg) 0%, #ede6da 50%, #e8e0d2 100%); }
.home-sec--beige .section-header__title { color: var(--color-light-text); }
.home-sec--beige .section-header__label { color: #5a4a28; }
.home-sec--beige .btn--outline { color: var(--color-gold-dark); border-color: var(--color-gold-dark); }
/* ベージュ背景上での本日の出勤サブ見出しの可読性 */
/* ベージュ背景上での検索UI（共通コンポーネント）の可読性。共通CSSは変えずページ側で上書き */
.home-sec--beige .therapist-search__filter-title { color: var(--color-gold-dark); }
.home-sec--beige .therapist-search__filter-toggle { color: var(--color-light-text-muted); }
.home-sec--beige .therapist-search__group-title { color: var(--color-light-text); border-bottom-color: rgba(42, 35, 24, 0.15); }
.home-sec--beige .therapist-search__options label { color: var(--color-light-text); }
.home-sec--beige .therapist-search__sort-btn { color: var(--color-light-text); background: rgba(42, 35, 24, 0.05); border-color: rgba(42, 35, 24, 0.2); }
.home-sec--beige .therapist-search__sort-btn.is-selected { color: var(--color-black); background: var(--color-gold); border-color: transparent; }
.home-sec--beige .therapist-search__ranking { border-top-color: rgba(42, 35, 24, 0.15); }
.home-sec--beige .therapist-search__ranking-link { color: var(--color-gold-dark); }
.home-sec__intro { text-align: center; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.9; margin-bottom: 32px; }
.home-sec__more { margin-top: 36px; text-align: center; }
/* ===== 下部バナースペース（ダミー / 縦積みプレースホルダー） ===== */
.home-banners { padding: 56px 0; background: linear-gradient(180deg, var(--color-light-bg) 0%, #ede6da 50%, #e8e0d2 100%); }
.home-banners__list { display: flex; flex-direction: column; gap: 16px; }
.home-banner-slot { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 1; background: var(--color-card); border: 1px dashed var(--color-border-gold); border-radius: var(--radius-md); text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease; }
.home-banner-slot:hover { border-color: var(--color-gold); background: rgba(201, 169, 110, 0.05); }
.home-banner-slot__label { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.15em; color: var(--color-text-muted); }
.home-banner-slot--image { aspect-ratio: auto; background: transparent; border: none; padding: 0; }
.home-banner-slot--image img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
/* ===== トピックス（トップ最新5件） ===== */
.home-topics { padding: 48px 0 40px; }
.home-topics__inner { max-width: 720px; margin: 0 auto; }
.home-topics__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-topics__list > li {
background: rgba(255,255,255,0.65);
border: 1px solid rgba(160,130,80,0.12);
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.03);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.home-topics__list > li:hover { transform: translateY(-2px); border-color: rgba(160,130,80,0.35); }
/* topicsBox.php の中身に依存しないよう、リンク直下を汎用的に整える */
.home-topics__list > li a {
display: block; position: relative; overflow: hidden;
padding: 16px 36px 16px 18px;
text-decoration: none; color: var(--color-light-text);
}
/* 右端の矢印 */
.home-topics__list > li a::after {
content: ""; position: absolute; right: 16px; top: 50%;
width: 7px; height: 7px; margin-top: -4px;
border-top: 1px solid var(--color-gold-dark);
border-right: 1px solid var(--color-gold-dark);
transform: rotate(45deg);
}
/* 日付（1行目 / date・time クラスのどちらでも効くように） */
.home-topics__list > li a p:first-of-type,
.home-topics__list > li a .date,
.home-topics__list > li a time {
display: block;
font-family: var(--font-display);
font-size: 0.66rem; letter-spacing: 0.1em;
color: #7a6530; margin-bottom: 6px;
}
/* タイトル（2行目以降） */
.home-topics__list > li a p:not(:first-of-type),
.home-topics__list > li a .title,
.home-topics__list > li a h3 {
font-size: 0.84rem; font-weight: 500; line-height: 1.8;
color: var(--color-light-text);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* サムネイル画像が出力される場合 */
.home-topics__list > li a img {
float: left; width: 64px; height: 64px;
object-fit: cover; border-radius: 8px; margin-right: 14px;
}
@media (min-width: 768px) {
.home-topics__list > li a { padding: 18px 40px 18px 22px; }
.home-topics__list > li a p:not(:first-of-type) { font-size: 0.88rem; }
}
/* ============================================================
出現アニメーション。対象要素への data-reveal は idx-reveal.js が付ける。
JSが動いたときだけ .js-reveal が付くので、JS無効時は素の表示のまま。
モードは2系統ある。
image / box … ブラー解除（Figmaコメント: https://osmia.jp/#ritual 参照）。「5つの特徴」限定。
up … ブラー無しのフェードアップ（2026-09-03 ご指示「ふわっと上にフェードアップ」）。
up にブラーを入れていないのは、指示がフェードアップのみであることに加え、
filter を数十要素に同時に掛けるとモバイルSafariで目に見えて重くなるため。
============================================================ */
.js-reveal [data-reveal] {
opacity: 0;
transition-property: opacity, filter, transform;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
/* 合成レイヤーへの昇格はアニメーション中だけにする（読み込み時から張るとGPUメモリを占有する）。 */
.js-reveal [data-reveal].is-revealed { will-change: opacity, filter, transform; }
.js-reveal [data-reveal="image"] { filter: blur(12px); transform: scale(1.03); }
.js-reveal [data-reveal="box"] { filter: blur(10px); transform: translateY(20px); }
.js-reveal [data-reveal="up"] {
transform: translateY(24px);
transition-property: opacity, transform;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-reveal [data-reveal].is-revealed {
opacity: 1;
filter: blur(0);
transform: none;
}
/* blur(0) でも filter が残ると containing block を作ってしまうので、終わったら消す。 */
.js-reveal [data-reveal].is-reveal-done {
filter: none;
transform: none;
transition: none;
will-change: auto;
}