@charset "UTF-8";
/* =========================================================
THERAPISH 最終デザインカンプ（Hybrid 正式ベース）
2026-08-27
---------------------------------------------------------
見た目のルール : A案 Gallery Editorial
Gallery の機能 : C案（検索・フィルタ・Design→予約）
言葉・相談導線 : B案（初回来店の安心感）
---------------------------------------------------------
写真は 4:3 横のみ。3:4縦・1:1クロップは使用しない。
影なし／グラデーションなし／角丸は2pxまで／写真は角丸なし／
アクセントは1色（テラコッタ）だけ。
外部依存なし（唯一の外部URLは Hot Pepper Beauty と Instagram）。
========================================================= */
/* ---------------------------------------------------------
0. デザイントークン
--------------------------------------------------------- */
:root {
/* 色 ---------------------------------------------------- */
--bg: #FAF9F7; /* 基本背景。純白は使わない（写真の白背景と同化するため） */
--bg-alt: #F2F0EC; /* セクション区切り用 */
--fg: #1F1D1B; /* 主文。純黒は使わない（写真より強く出るため） */
--fg-sub: #6B6660; /* 副文 */
/* 注記・キャプション。カンプ v1.1 は #8C867E だったが、コントラスト比が
bg #FAF9F7 で 3.43 / bg-alt #F2F0EC で 3.21 と WCAG AA（4.5）に届かず、
Lighthouse のアクセシビリティで減点されていた。
明度だけ 81% に落として 4.89 / 4.52 にした。色相・彩度は変えていない。
※濃い方の背景 bg-alt でも 4.5 を超える値にすること。 */
--fg-mute: #716D66;
--line: #E3DFD8; /* 罫線 */
--line-strong: #CBC4B9; /* 見出し直下の区切りなど */
--accent: #B0705C; /* くすんだテラコッタ。予約CTAと現在地表示のみ */
--on-accent: #FFFFFF;
/* 書体 --------------------------------------------------
Phase 1 は OSフォントのみ。**外部Webフォントは読み込まない**（表示速度を優先）。
Noto Serif JP / Noto Sans JP はフォールバック末尾に置いてあるだけで、
@font-face も も一切ありません。公開後に実機表示を確認し、
必要と判断した場合にだけ見出し用の明朝をサブセットで追加する候補とします。 */
--font-body: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
--font-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "MS PMincho", serif;
--font-en: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
/* 形 ---------------------------------------------------- */
--r-ui: 2px; /* ボタン・チップ */
--r-img: 0; /* 写真は角丸にしない */
/* 余白 -------------------------------------------------- */
--pad: 20px; /* 画面左右 */
--sec-y: 56px; /* セクション上下 */
--maxw: 1200px;
--maxw-narrow: 760px;
--bar-h: 54px; /* スマホ固定CTAの高さ */
}
@media (min-width: 900px) {
:root { --pad: 40px; --sec-y: 96px; }
}
/* ---------------------------------------------------------
1. リセット
--------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.9;
letter-spacing: .02em;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
padding-bottom: var(--bar-h); /* スマホ固定CTAぶん */
overflow-wrap: break-word;
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------------------------------------------------------
2. レイアウト土台
--------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow{ max-width: var(--maxw-narrow); }
.sec { padding-block: var(--sec-y); }
.sec--alt { background: var(--bg-alt); }
/* セクション見出し（日本語が主役・英字は小さいラベル） */
.sechd { margin-bottom: 26px; }
.sechd__ja { font-family: var(--font-mincho); font-size: 24px; font-weight: 400;
line-height: 1.5; letter-spacing: .06em; }
.sechd__en { font-family: var(--font-en); font-size: 10px; letter-spacing: .22em;
color: var(--fg-mute); margin-top: 8px; }
.sechd__note { font-size: 13.5px; line-height: 1.95; color: var(--fg-sub);
margin-top: 14px; max-width: 40em; }
/* 強調は色ではなく「本文色に戻す」ことで作る（副文はグレーのため） */
.sechd__note b { font-weight: 400; color: var(--fg); }
/* スマホだけ改行位置を指定する（H1が1文字だけ折り返すのを防ぐ） */
.br-sp { display: inline; }
@media (min-width: 900px) { .br-sp { display: none; } }
.sec__foot { margin-top: 28px; }
@media (min-width: 900px) {
.sechd { margin-bottom: 40px; }
.sechd__ja { font-size: 32px; }
.sechd__note { font-size: 14px; margin-top: 16px; }
.sec__foot { margin-top: 36px; }
}
/* 注記（カンプ用サンプル表示であることの明示） */
.note {
font-size: 11.5px; line-height: 1.8; color: var(--fg-mute);
border-left: 2px solid var(--line); padding: 2px 0 2px 12px; margin-top: 18px;
}
/* ---------------------------------------------------------
3. 写真枠（4:3 固定）
--------------------------------------------------------- */
.plate {
display: block;
position: relative;
aspect-ratio: var(--plate-ratio, 4 / 3);
background: #EDEAE4;
overflow: hidden;
border-radius: var(--r-img);
}
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate--sq { --plate-ratio: 1 / 1; } /* スタッフ本人写真のみ（作品写真には使わない） */
.plate--wide { --plate-ratio: 16 / 9; } /* 地図枠のみ */
/* カンプにあった .plate--todo / .plate__note / .plate__tag（未撮影のプレースホルダと
「プロ撮影予定」ラベル）は本番テーマには持ち込みません。
写真が未登録のときは .plate の背景色だけが出ます。 */
/* ---------------------------------------------------------
4. ボタン（塗り1種＋線1種のみ。3種類目を作らない）
--------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; text-align: center;
min-height: 48px; padding-inline: 26px;
font-size: 13.5px; letter-spacing: .04em; line-height: 1.4;
border-radius: var(--r-ui);
transition: opacity .15s, background-color .15s, color .15s;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { opacity: .86; }
.btn--line { border: 1px solid var(--fg); color: var(--fg); }
.btn--line:hover { background: var(--fg); color: var(--bg); }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 56px; padding-inline: 40px; font-size: 15px; }
/* テキストリンク（アクセントの下線1本だけ） */
.link { display: inline-block; font-size: 13.5px; letter-spacing: .02em;
border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.link:hover { color: var(--accent); }
.link--sm { font-size: 12.5px; }
/* ---------------------------------------------------------
5. ヘッダー
--------------------------------------------------------- */
.hd { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.hd__in { display: flex; align-items: center; height: 54px; gap: 24px;
max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
/* ワードマーク：現行の Therapish 表記をテキストで暫定再現。
本実装ではベクター（SVG）ロゴの支給が必要です。ロゴの再デザインは行っていません。 */
.mark { display: flex; align-items: baseline; gap: 9px; }
.mark__en { font-family: var(--font-mincho); font-size: 21px; line-height: 1; letter-spacing: .06em; }
.mark__ja { font-size: 9.5px; letter-spacing: .12em; color: var(--fg-mute); white-space: nowrap; }
/* SVGロゴが支給されたら .mark__en を
に差し替えるだけで済みます。
高さだけを固定し、幅は成り行きにしているため、周囲のレイアウトは動きません。 */
.mark__img { display: block; height: 21px; width: auto; }
.hd__nav { display: none; }
.hd__cta { display: none; }
@media (min-width: 900px) {
.hd__in { height: 76px; }
.mark__en { font-size: 25px; }
.mark__img { height: 25px; }
.mark__ja { font-size: 10.5px; }
.hd__nav { display: flex; gap: 26px; margin-left: auto; font-size: 13px; letter-spacing: .04em; }
.hd__nav a { color: var(--fg-sub); padding-block: 4px; border-bottom: 1px solid transparent; }
.hd__nav a:hover { color: var(--fg); border-bottom-color: var(--accent); }
.hd__cta { display: inline-flex; min-height: 40px; padding-inline: 18px; font-size: 12.5px; }
}
/* ---------------------------------------------------------
5-2. スマホ グローバルメニュー（v1.1で追加）
---------------------------------------------------------
ヘッダー直下から開くドロップダウン。全画面を覆う演出はしない。
影なし・グラデーションなし・角丸カードにしない。
階層は罫線と余白だけで作る。
--------------------------------------------------------- */
/* ハンバーガー（開くと × になる） */
.burger {
display: grid; place-items: center;
width: 44px; height: 44px; margin-left: auto; margin-right: -10px;
}
.burger__box { position: relative; display: block; width: 20px; height: 14px; }
.burger__box i {
position: absolute; left: 0; width: 100%; height: 1px; background: var(--fg);
transition: transform .18s ease, opacity .12s ease;
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { top: 50%; margin-top: -.5px; }
.burger__box i:nth-child(3) { bottom: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 900px) { .burger { display: none; } }
/* メニュー本体 */
.spnav {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--bg); border-bottom: 1px solid var(--line);
padding: 4px var(--pad) 22px;
max-height: calc(100vh - 54px); /* dvh 非対応ブラウザ向けのフォールバック */
max-height: calc(100dvh - 54px);
overflow-y: auto;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.spnav.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 900px) { .spnav, .spnav-scrim { display: none; } }
.spnav__list li + li { border-top: 1px solid var(--line); }
.spnav__list a {
display: block; padding: 15px 2px; font-size: 15px; letter-spacing: .02em; line-height: 1.5;
}
/* 2段目（採用情報・外部リンク）は、余白を空けたうえで濃い罫線を1本引き、
「別のまとまり」であることを線の太さではなく余白で伝える */
.spnav__list--sub { border-top: 1px solid var(--line-strong); margin-top: 14px; }
.spnav__list--sub li + li { border-top: 1px solid var(--line); }
.spnav__list--sub a { padding: 13px 2px; font-size: 13.5px; color: var(--fg-sub); }
.spnav__cta { margin-top: 20px; }
/* 背景ページを薄く沈める（覆い隠す演出はしない）。タップで閉じる */
.spnav-scrim {
position: fixed; inset: 0; z-index: 40; background: rgba(31,29,27,.28);
opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s;
}
.spnav-scrim.is-open { opacity: 1; visibility: visible; }
/* メニュー表示中は下部固定CTAを隠す（予約ボタンを同時に2つ出さない） */
body.is-navopen .fixedbar { display: none; }
/* ---------------------------------------------------------
6. 01 HERO
---------------------------------------------------------
PC : 写真（4:3のまま）＋テキストの左右分割。16:9フルブリードは使わない
（チップが切れる／寄りが強すぎる／サロン情報が入らないため）
SP : ロゴ → 4:3実写 → H1 → 短い説明 → 予約CTA を1画面に収める
--------------------------------------------------------- */
.hero { padding-bottom: 8px; }
.hero__media { position: relative; }
.hero__copy { padding: 20px var(--pad) 0; }
.hero__eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--accent); margin-bottom: 10px; }
.hero__h1 { font-family: var(--font-mincho); font-size: 25px; font-weight: 400;
line-height: 1.5; letter-spacing: .04em; }
.hero__lead { font-size: 13.5px; line-height: 1.9; color: var(--fg-sub); margin-top: 12px; }
.hero__cta { margin-top: 18px; }
.hero__sub { margin-top: 14px; }
@media (min-width: 900px) {
.hero {
display: grid; grid-template-columns: 53% 1fr; align-items: center;
max-width: var(--maxw); margin-inline: auto; padding: 56px var(--pad) 72px; gap: 0;
}
.hero__copy { padding: 0 0 0 clamp(36px, 4.6vw, 68px); }
.hero__h1 { font-size: clamp(26px, 2.3vw, 36px); }
.hero__lead { font-size: 14.5px; margin-top: 18px; }
.hero__cta { margin-top: 26px; }
}
/* ---------------------------------------------------------
7. Gallery グリッド（TOP：PC3列 / SP2列・4:3固定）
--------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: var(--gap, 12px); }
.grid--gal { --cols: 2; --gap: 12px; }
@media (min-width: 700px) { .grid--gal { --cols: 3; --gap: 20px; } }
@media (min-width: 1000px) { .grid--gal { --gap: 26px; } }
.card { display: block; width: 100%; text-align: left; }
.card__fig { position: relative; display: block; }
/* .plate は 。inline のままだと aspect-ratio が効かず高さ0になる（実測 2026-09-03：カード写真枠が 0x0）。 */
.card__fig .plate { display: block; }
.card__meta { display: block; padding-top: 9px; }
.card__name { display: block; font-size: 13px; line-height: 1.5; letter-spacing: .02em; }
.card__sub { display: block; font-size: 11px; line-height: 1.6; color: var(--fg-mute); margin-top: 3px; }
.card:hover .plate img { opacity: .88; transition: opacity .15s; }
.card__badge {
position: absolute; left: 0; top: 0; z-index: 3;
font-family: var(--font-en); font-size: 9px; letter-spacing: .14em;
padding: 4px 7px; background: rgba(31,29,27,.86); color: #fff;
}
@media (min-width: 900px) {
.card__name { font-size: 13.5px; }
.card__sub { font-size: 11.5px; }
}
.count { font-family: var(--font-en); font-size: 12px; letter-spacing: .08em; color: var(--fg-mute); }
.empty { padding: 40px 0; text-align: center; color: var(--fg-sub); font-size: 13px; }
/* ---------------------------------------------------------
8. カテゴリチップ
--------------------------------------------------------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.chip {
flex: 0 0 auto; font-family: var(--font-en); font-size: 12px; letter-spacing: .1em;
padding: 9px 14px; white-space: nowrap; color: var(--fg-sub); background: transparent;
border: 1px solid var(--line); border-radius: var(--r-ui);
transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--line-strong); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip__ja { font-family: var(--font-body); font-size: 11px; letter-spacing: .04em; opacity: .78; margin-left: 6px; }
.chip--sm { padding: 7px 12px; font-family: var(--font-body); font-size: 11.5px; letter-spacing: .04em; }
/* フィルタ行 */
.filter { margin-bottom: 22px; }
.filter__row { display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-top: 14px; }
@media (min-width: 900px) { .filter { margin-bottom: 30px; } }
/* さらに絞り込めることを示す行（TOPでは操作させず /design/ へ寄せる） */
.moreaxis {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border-top: 1px solid var(--line); margin-top: 26px; padding-top: 18px;
}
.moreaxis__dots { display: flex; gap: 5px; }
.moreaxis__dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.moreaxis__t { font-size: 12.5px; color: var(--fg-sub); }
.moreaxis .link { margin-left: auto; }
@media (max-width: 599px) { .moreaxis .link { margin-left: 0; } }
/* ---------------------------------------------------------
9. 04 WHY THERAPISH
---------------------------------------------------------
同じ角丸カードを5枚並べない。
「写真＋文」「数字の帯」「2段組のテキスト」の3ブロックで構成する。
--------------------------------------------------------- */
.why__lead { display: grid; gap: 20px; }
.why__t { font-family: var(--font-mincho); font-size: 21px; font-weight: 400;
line-height: 1.6; letter-spacing: .04em; }
.why__b { font-size: 13.5px; line-height: 2; color: var(--fg-sub); margin-top: 14px; }
.why__b em { font-style: normal; color: var(--fg); }
@media (min-width: 800px) {
.why__lead { grid-template-columns: 48% 1fr; gap: 0; align-items: center; }
.why__body { padding-left: clamp(32px, 4vw, 56px); }
.why__t { font-size: 26px; }
.why__b { font-size: 14px; margin-top: 18px; }
}
/* 数字の帯（カードではなく罫線で区切る） */
.figs {
display: grid; grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--line-strong);
margin-top: 40px;
}
.figs li { padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.figs li:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line); }
.figs li:nth-child(even) { padding-left: 16px; }
.fig__n { font-family: var(--font-mincho); font-size: 27px; line-height: 1.1;
letter-spacing: .02em; color: var(--accent); }
.fig__n span { font-size: 13px; letter-spacing: .04em; margin-left: 2px; }
.fig__l { font-size: 12px; line-height: 1.75; color: var(--fg-sub); margin-top: 8px; }
@media (min-width: 800px) {
.figs { grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
.figs li { padding: 24px 0 22px; border-bottom: 1px solid var(--line-strong); }
.figs li:nth-child(odd), .figs li:nth-child(even) { padding-inline: 26px; border-right: 1px solid var(--line); }
.figs li:first-child { padding-left: 0; }
.figs li:last-child { padding-right: 0; border-right: 0; }
.fig__n { font-size: 32px; }
.fig__l { font-size: 12.5px; }
}
/* 2段組のテキスト */
.whytxt { display: grid; gap: 26px; margin-top: 34px; }
.whytxt__t { font-family: var(--font-mincho); font-size: 17px; font-weight: 400; letter-spacing: .04em; }
.whytxt__b { font-size: 13px; line-height: 2; color: var(--fg-sub); margin-top: 8px; }
@media (min-width: 800px) {
.whytxt { grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); margin-top: 46px; }
.whytxt__t { font-size: 18px; }
.whytxt__b { font-size: 13.5px; }
}
/* ---------------------------------------------------------
10. 05 STAFF
--------------------------------------------------------- */
/* minmax(0,1fr)：中のチップの最小幅で列が押し広げられるのを防ぐ */
.staffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
@media (min-width: 760px) { .staffs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; } }
.staffcard__name { font-family: var(--font-en); font-size: 15px; letter-spacing: .06em; margin-top: 14px; }
.staffcard__kana { font-family: var(--font-body); font-size: 10px; letter-spacing: .04em;
color: var(--fg-mute); margin-left: 7px; }
.staffcard__years { font-size: 11.5px; letter-spacing: .04em; color: var(--accent); margin-top: 4px; }
.staffcard__good { font-size: 11.5px; line-height: 1.75; color: var(--fg-sub); margin: 8px 0 12px; }
/* 得意分野の行数が違ってもボタンの高さを揃える */
.staffcard { display: flex; flex-direction: column; }
.staffcard .chip { margin-top: auto; align-self: flex-start;
white-space: normal; line-height: 1.5; text-align: left; }
/* ---------------------------------------------------------
11. 06 MENU（料金を出さない＝改定でTOPを触らずに済む構造）
--------------------------------------------------------- */
.menus { border-top: 1px solid var(--line-strong); }
.menurow { padding: 18px 0; border-bottom: 1px solid var(--line); }
.menurow__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.menurow__name { font-family: var(--font-mincho); font-size: 17px; letter-spacing: .04em; }
.menurow__min { font-family: var(--font-en); font-size: 12px; letter-spacing: .06em;
color: var(--fg-mute); white-space: nowrap; }
.menurow__desc { font-size: 12.5px; line-height: 1.9; color: var(--fg-sub); margin-top: 6px; }
.opts { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.opts__t { font-size: 11px; letter-spacing: .1em; color: var(--fg-mute); margin-bottom: 6px; }
.opts__b { font-size: 13px; line-height: 1.95; }
/* ---------------------------------------------------------
12. 07 FIRST VISIT
--------------------------------------------------------- */
.qas { border-top: 1px solid var(--line-strong); }
.qa { padding: 20px 0; border-bottom: 1px solid var(--line); }
.qa__q { font-family: var(--font-mincho); font-size: 16px; line-height: 1.7; letter-spacing: .03em; }
.qa__a { font-size: 13px; line-height: 2; color: var(--fg-sub); margin-top: 8px; }
@media (min-width: 900px) { .qa__q { font-size: 17px; } .qa__a { font-size: 13.5px; } }
/* 将来の写真スロット（v1.1で確保・現時点では未使用）
---------------------------------------------------------
プロ撮影後に「スタッフがお客様とDesignを相談している写真」を1枚、
見出しとQ&Aの間に入れます。index.html の 07 FIRST VISIT にある
コメントアウト済みのブロックを外すだけで有効になります。
4:3・角丸なし・キャプションなし。レイアウトの作り直しは発生しません。 */
.first__media { margin-bottom: 30px; }
.first__cap { font-size: 11.5px; line-height: 1.8; color: var(--fg-mute); margin-top: 10px; }
@media (min-width: 900px) { .first__media { margin-bottom: 40px; } }
/* ---------------------------------------------------------
13. 08 REVIEWS（巨大数字・★★★★★は使わない）
--------------------------------------------------------- */
.revsum { font-size: 14.5px; line-height: 2.1; }
.revsum b { font-weight: 400; color: var(--accent); }
.reviews { display: grid; gap: 0; border-top: 1px solid var(--line-strong); margin-top: 26px; }
.review { padding: 20px 0; border-bottom: 1px solid var(--line); }
.review__meta { font-size: 11px; letter-spacing: .08em; color: var(--fg-mute); margin-bottom: 6px; }
.review__body { font-size: 13px; line-height: 2; }
@media (min-width: 800px) {
.revsum { font-size: 15px; }
.reviews { grid-template-columns: repeat(3, 1fr); gap: 0 36px; margin-top: 34px; }
.review { padding: 24px 0 26px; }
}
/* ---------------------------------------------------------
14. 09 SALON / ACCESS（将来2店舗目を並べられる構造）
--------------------------------------------------------- */
.salons { display: grid; gap: 56px; }
.salon { display: grid; gap: 26px; }
@media (min-width: 900px) { .salon { grid-template-columns: 46% 1fr; gap: 48px; align-items: start; } }
.salon__name { font-family: var(--font-mincho); font-size: 20px; letter-spacing: .05em; }
.salon__walk { font-size: 14.5px; letter-spacing: .02em; margin-top: 10px; }
.salon__walk b { font-family: var(--font-mincho); font-weight: 400; font-size: 22px;
color: var(--accent); padding-inline: 3px; }
.salon__dl { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px 16px;
font-size: 13px; line-height: 1.85;
border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.salon__dl dt { color: var(--fg-mute); }
.salon__sub { display: block; font-size: 11.5px; color: var(--fg-mute); }
.salon__map { margin-top: 22px; }
.salon__actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
/* ---------------------------------------------------------
15. 10 INSTAGRAM（主役にしない。細い帯だけ）
--------------------------------------------------------- */
.insta { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 28px; }
.insta__in { display: flex; flex-direction: column; gap: 12px; }
.insta__en { font-family: var(--font-en); font-size: 10px; letter-spacing: .22em; color: var(--fg-mute); }
.insta__t { font-size: 13.5px; line-height: 1.9; color: var(--fg-sub); }
@media (min-width: 800px) {
.insta__in { flex-direction: row; align-items: center; gap: 26px; }
.insta__in .link { margin-left: auto; }
}
/* ---------------------------------------------------------
16. 11 RECRUIT（TOPでは小さく扱う）
--------------------------------------------------------- */
.recruit__in { display: grid; gap: 24px; }
@media (min-width: 800px) { .recruit__in { grid-template-columns: 38% 1fr; gap: 48px; align-items: center; } }
.recruit__en { font-family: var(--font-en); font-size: 10px; letter-spacing: .22em; color: var(--fg-mute); margin-bottom: 10px; }
.recruit__t { font-family: var(--font-mincho); font-size: 22px; font-weight: 400; letter-spacing: .05em; line-height: 1.55; }
.recruit__b { font-size: 13.5px; line-height: 2; color: var(--fg-sub); margin: 14px 0 22px; }
@media (min-width: 900px) { .recruit__t { font-size: 26px; } }
/* ---------------------------------------------------------
17. 12 RESERVE
--------------------------------------------------------- */
.reserve { text-align: center; }
.reserve__en { font-family: var(--font-en); font-size: 10px; letter-spacing: .22em; color: var(--fg-mute); }
.reserve__t { font-family: var(--font-mincho); font-size: 26px; font-weight: 400; letter-spacing: .08em; margin: 12px 0 16px; }
.reserve__b { font-size: 13.5px; line-height: 2.1; color: var(--fg-sub); margin-bottom: 28px; }
.reserve__tel { font-size: 12.5px; letter-spacing: .04em; color: var(--fg-sub); margin-top: 20px; }
.reserve__tel a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
@media (min-width: 900px) { .reserve__t { font-size: 30px; } }
/* ---------------------------------------------------------
18. フッター（サイトマップにしない）
--------------------------------------------------------- */
.ft { background: var(--bg-alt); padding: 44px 0 40px; }
.ft__in { display: grid; gap: 28px; }
.ft__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; font-size: 13px; }
.ft__nav a { color: var(--fg-sub); }
.ft__nav a:hover { color: var(--fg); }
.ft__ext { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; font-size: 12.5px; }
.ft__ext a { color: var(--fg-sub); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.ft__ext a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ft__addr, .ft__hours { font-size: 12px; line-height: 1.9; color: var(--fg-sub); }
.ft__addr { margin-top: 16px; }
.ft__c { font-family: var(--font-en); font-size: 10px; letter-spacing: .1em; color: var(--fg-mute);
border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; }
@media (min-width: 800px) {
.ft { padding: 60px 0 44px; }
.ft__in { grid-template-columns: 1fr auto; gap: 60px; align-items: start; }
.ft__nav { grid-template-columns: repeat(4, auto); gap: 14px 34px; }
.ft__brand { max-width: 30em; }
}
/* ---------------------------------------------------------
19. Design 詳細シート
SP = 下から開くボトムシート ／ PC = 中央ダイアログ
--------------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 90; display: none; }
.sheet.is-open { display: block; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(20,18,16,.5); animation: tpFade .18s ease; }
.sheet__panel {
position: absolute; left: 0; right: 0; bottom: 0;
max-height: 92vh; overflow-y: auto; background: var(--bg);
border-radius: var(--r-ui) var(--r-ui) 0 0;
padding-bottom: max(18px, env(safe-area-inset-bottom));
animation: tpRise .22s cubic-bezier(.2,.7,.3,1);
}
.sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 6px; }
.sheet__close {
position: absolute; right: 10px; top: 10px; z-index: 5;
width: 34px; height: 34px; border-radius: 50%; font-size: 17px; line-height: 1;
display: grid; place-items: center; background: rgba(250,249,247,.94); color: var(--fg);
}
.sheet__media .plate { --plate-ratio: 4 / 3; }
.sheet__body { padding: 16px 18px 0; }
.sheet__cat { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: var(--fg-mute); }
.sheet__title { font-family: var(--font-mincho); font-size: 20px; font-weight: 400;
letter-spacing: .04em; line-height: 1.5; margin-top: 4px; }
.sheet__dl { display: grid; grid-template-columns: 6em 1fr; gap: 9px 14px;
font-size: 13px; line-height: 1.7;
border-top: 1px solid var(--line); margin: 16px 0 18px; padding-top: 16px; }
.sheet__dl dt { color: var(--fg-mute); }
.sheet__foot { padding: 0 18px; }
.sheet__hint { font-size: 11.5px; line-height: 1.85; color: var(--fg-sub); margin-top: 12px; }
.sheet__hint .is-sample { color: var(--fg-mute); }
@keyframes tpRise { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
@keyframes tpFade { from { opacity: 0 } to { opacity: 1 } }
@media (min-width: 900px) {
.sheet__panel {
left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
width: min(1040px, 92vw); max-height: 88vh;
display: grid; grid-template-columns: 58% 1fr; align-content: start;
border-radius: var(--r-img); padding-bottom: 0; animation: tpFade .18s ease;
}
.sheet__grab { display: none; }
/* 写真は4:3のまま。ダイアログに合わせて引き伸ばさない（端のチップが切れるため） */
.sheet__media { grid-row: 1 / span 2; align-self: start; }
.sheet__body { padding: 30px 30px 0; }
.sheet__foot { padding: 0 30px 30px; }
}
/* ---------------------------------------------------------
20. スマホ固定CTA（スクロール方向連動）
下方向スクロール＝隠す／上方向スクロール＝出す
Gallery の写真を固定バーで隠さないため
--------------------------------------------------------- */
.fixedbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: grid; grid-template-columns: 1fr 1fr 2.4fr;
background: var(--bg); border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom);
transition: transform .22s ease;
}
.fixedbar.is-hidden { transform: translateY(105%); }
.fixedbar a { display: flex; align-items: center; justify-content: center;
min-height: var(--bar-h); font-size: 12px; letter-spacing: .02em; }
.fixedbar a + a { border-left: 1px solid var(--line); }
.fixedbar .is-primary { background: var(--accent); color: var(--on-accent);
font-size: 11.5px; letter-spacing: 0; border-left: 0; }
@media (min-width: 900px) { .fixedbar { display: none; } }
/* カンプの識別帯（.compnote）は本番テーマには含めません。 */
/* ---------------------------------------------------------
22. /design/ 一覧ページ用
PC 4列（3列へ切替可）／SP 2列（3列へ切替可・既定は2列）
--------------------------------------------------------- */
.page-hd { border-bottom: 1px solid var(--line); padding-block: 34px 30px; }
.page-hd__ja { font-family: var(--font-mincho); font-size: 26px; font-weight: 400; letter-spacing: .06em; }
.page-hd__en { font-family: var(--font-en); font-size: 10px; letter-spacing: .22em; color: var(--fg-mute); margin-top: 8px; }
.page-hd__note { font-size: 13.5px; line-height: 1.95; color: var(--fg-sub); margin-top: 12px; max-width: 40em; }
@media (min-width: 900px) { .page-hd { padding-block: 52px 44px; } .page-hd__ja { font-size: 34px; } }
.page-hd + .sec { padding-top: 30px; }
@media (min-width: 900px) { .page-hd + .sec { padding-top: 40px; } }
/* スマホでは高度な絞り込みを畳んでおき、写真を早く見せる */
.advtoggle { display: block; font-size: 12.5px; color: var(--fg);
border-bottom: 1px solid var(--accent); padding-bottom: 3px; margin-top: 20px; }
.advtoggle[aria-expanded="true"] { color: var(--accent); }
.adv { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 20px; display: grid; gap: 22px; }
.adv.is-collapsed { display: none; }
.adv__t { font-size: 11px; letter-spacing: .1em; color: var(--fg-mute); margin-bottom: 10px; }
@media (min-width: 900px) {
.advtoggle { display: none; }
.adv, .adv.is-collapsed { display: grid; grid-template-columns: auto auto 1fr; gap: 44px; }
}
.swatches { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.swatch { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 62px; }
.swatch__dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); transition: box-shadow .15s; }
.swatch__label { font-size: 10px; line-height: 1.3; text-align: center; color: var(--fg-sub); }
.swatch[aria-pressed="true"] .swatch__dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); }
.swatch[aria-pressed="true"] .swatch__label { color: var(--fg); }
.viewbar { display: flex; align-items: center; gap: 16px;
border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.viewsw { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.viewsw__l { font-size: 11px; letter-spacing: .06em; color: var(--fg-mute); }
.viewsw button { font-family: var(--font-en); font-size: 11px; letter-spacing: .08em;
padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--r-ui); color: var(--fg-sub); }
.viewsw button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* 標準 = SP 2列 / PC 4列（既定）
多く表示 = SP 3列 / PC 5列（ユーザーが明示的に選んだときだけ） */
.grid--list { --cols: 2; --gap: 12px; }
.grid--list[data-dense="on"] { --cols: 3; --gap: 8px; }
@media (min-width: 700px) {
.grid--list { --cols: 4; --gap: 18px; }
.grid--list[data-dense="on"] { --cols: 5; --gap: 10px; }
}
.grid--list[data-dense="on"] .card__name { font-size: 11px; line-height: 1.45; }
.grid--list[data-dense="on"] .card__sub { display: none; }
.reset { font-size: 11.5px; color: var(--fg-mute); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
/* =========================================================
23. 本番テーマだけで使うもの
---------------------------------------------------------
カンプには無かった、WordPress実装で必要になる要素。
トークン（色・書体・余白・角丸・影なし）は上のルールをそのまま使う。
========================================================= */
/* スキップリンク（キーボード操作） */
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--fg); color: var(--bg); padding: 10px 16px; font-size: 13px;
}
.skip:focus { left: 0; }
/* フォーカスリング。アクセント色は使わず、輪郭だけで示す */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--fg); outline-offset: 2px;
}
/* パンくず。行を増やさないよう1行・小さめ */
.crumbs { border-bottom: 1px solid var(--line); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding-block: 12px; font-size: 11.5px; color: var(--fg-mute); }
.crumbs li + li::before { content: "／"; margin-right: 6px; color: var(--line-strong); }
.crumbs a:hover { color: var(--fg); }
.crumbs [aria-current="page"] { color: var(--fg-sub); }
/* ページ送り。「もっと見る」を兼ねる */
.pager { margin-top: 34px; }
.pager ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pager a, .pager span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; padding-inline: 14px;
font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--r-ui);
color: var(--fg-sub);
}
.pager a:hover { border-color: var(--line-strong); color: var(--fg); }
.pager .current { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pager .dots { border-color: transparent; }
/* 読み物（固定ページの本文） */
.prose { font-size: 15px; line-height: 2; }
.prose > * + * { margin-top: 1.6em; }
.prose h2 { font-family: var(--font-mincho); font-size: 21px; font-weight: 400; letter-spacing: .04em;
border-top: 1px solid var(--line-strong); padding-top: 24px; }
.prose h3 { font-family: var(--font-mincho); font-size: 17px; font-weight: 400; letter-spacing: .04em; }
.prose a { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ul li + li { margin-top: .5em; }
.prose img { margin-inline: auto; }
/* Design 個別ページ（/design/{slug}/）
詳細シートと同じ情報構成を、独立ページとして成立させる。
写真は 4:3 のまま。引き伸ばさない。 */
.designsingle__in { display: grid; gap: 26px; }
@media (min-width: 900px) {
.designsingle__in { grid-template-columns: 58% 1fr; gap: 48px; align-items: start; }
}
.designsingle__title { font-family: var(--font-mincho); font-size: 24px; font-weight: 400;
letter-spacing: .04em; line-height: 1.5; margin-top: 4px; }
@media (min-width: 900px) { .designsingle__title { font-size: 28px; } }
.designsingle__text { font-size: 13.5px; line-height: 2; color: var(--fg-sub); margin-bottom: 20px; }
.designsingle .sheet__dl { margin-bottom: 22px; }
/* 未完成ページへのリンク（ステージングでのみ印を出す。§26）
404 にはせず、準備中であることが分かるようにする。 */
.is-wip { opacity: .55; }
body.tp-staging .is-wip::after {
content: "（準備中）"; font-size: .78em; letter-spacing: 0; color: var(--fg-mute);
}
/* WordPress 標準クラスの最低限の面倒 */
.alignwide, .alignfull { max-width: 100%; }
.wp-caption-text, figcaption { font-size: 11.5px; color: var(--fg-mute); line-height: 1.8; margin-top: 8px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* =========================================================
第二段階：下層ページ
---------------------------------------------------------
TOPで確立したトークンだけを使う。
角丸・影・グラデーションは足さない。カードの連打もしない。
========================================================= */
/* ---- ステージング限定の「要確認」印 ---- */
.todo { display: inline-block; margin-top: 6px; padding: 3px 8px;
font-size: 11.5px; line-height: 1.6; color: #7A3E2C;
background: #F4E7E1; border: 1px solid #E0C8BE; border-radius: var(--r-ui); }
/* ---- ページ内ジャンプ（/menu/） ---- */
.jump { padding-block: 20px 4px; }
.jump ul { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---- 料金（1行1メニュー。表組みにしないのでSPで折り返せる） ---- */
.price { border-top: 1px solid var(--line); }
.price__row { border-bottom: 1px solid var(--line); padding-block: 16px; }
.price__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.price__name { font-size: 14.5px; line-height: 1.7; }
.price__yen { flex: none; font-family: var(--font-en); font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.price__todo { color: var(--accent); font-size: 12.5px; }
.price__desc { margin-top: 7px; font-size: 12.5px; line-height: 1.9; color: var(--fg-sub); }
@media (min-width: 900px) {
.price__name { font-size: 15.5px; }
.price__yen { font-size: 16px; }
.price__desc { font-size: 13px; }
}
.notes { margin-top: 22px; }
.notes li { position: relative; padding-left: 15px; margin-top: 8px;
font-size: 12.5px; line-height: 1.95; color: var(--fg-sub); }
.notes li::before { content: ""; position: absolute; left: 0; top: .85em;
width: 7px; height: 1px; background: var(--line-strong); }
/* ---- 来店の流れ（/first/） ---- */
.first__lead { font-size: 14px; line-height: 2.05; color: var(--fg-sub); margin-top: 14px; }
@media (min-width: 900px) { .first__lead { font-size: 15px; } }
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps__i { border-bottom: 1px solid var(--line); padding-block: 22px; }
.steps__n { font-family: var(--font-en); font-size: 12px; letter-spacing: .16em; color: var(--fg-mute); }
.steps__en { margin-left: 10px; letter-spacing: .2em; }
.steps__t { font-family: var(--font-mincho); font-size: 18px; font-weight: 400; margin-top: 8px; }
.steps__b { font-size: 13.5px; line-height: 2; color: var(--fg-sub); margin-top: 8px; }
@media (min-width: 900px) {
.steps { grid-template-columns: 1fr 1fr; column-gap: 48px; }
.steps__i { padding-block: 26px; }
.steps__t { font-size: 20px; }
.steps__b { font-size: 14px; }
}
/* ---- 採用の特徴 ---- */
.points { display: grid; gap: 0; border-top: 1px solid var(--line); }
.point { border-bottom: 1px solid var(--line); padding-block: 22px; }
.point__t { font-family: var(--font-mincho); font-size: 18px; font-weight: 400; }
.point__b { font-size: 13.5px; line-height: 2; color: var(--fg-sub); margin-top: 8px; }
@media (min-width: 900px) {
.points { grid-template-columns: 1fr 1fr; column-gap: 48px; }
.point__t { font-size: 20px; }
.point__b { font-size: 14px; }
}
/* ---- 募集一覧・募集要項 ---- */
.joblist { border-top: 1px solid var(--line); }
.joblist__i { border-bottom: 1px solid var(--line); padding-block: 22px; }
.joblist__t { font-family: var(--font-mincho); font-size: 19px; font-weight: 400; }
.joblist__b { font-size: 13.5px; line-height: 1.95; color: var(--fg-sub); margin-top: 8px; }
.joblist__meta { font-size: 12.5px; color: var(--fg-mute); margin-top: 6px; }
.jobdl { border-top: 1px solid var(--line); }
.jobdl dt { padding-top: 16px; font-size: 12.5px; letter-spacing: .04em; color: var(--fg-mute); }
.jobdl dd { padding-bottom: 16px; margin-top: 5px; font-size: 14px; line-height: 1.95;
border-bottom: 1px solid var(--line); }
.jobdl__ul li { position: relative; padding-left: 15px; margin-top: 5px; }
.jobdl__ul li::before { content: ""; position: absolute; left: 0; top: .9em;
width: 7px; height: 1px; background: var(--line-strong); }
@media (min-width: 900px) {
.jobdl { display: grid; grid-template-columns: 12em 1fr; }
.jobdl dt { padding-block: 18px; border-bottom: 1px solid var(--line); }
.jobdl dd { margin-top: 0; padding-block: 18px; }
}
/* ---- 店舗ページ ---- */
.hours li { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }
.hours__d { min-width: 4.5em; color: var(--fg-sub); }
.hours__l { font-size: 12.5px; color: var(--fg-mute); }
.access li { position: relative; padding-left: 15px; margin-top: 8px; font-size: 14px; line-height: 1.9; }
.access li::before { content: ""; position: absolute; left: 0; top: .95em;
width: 7px; height: 1px; background: var(--line-strong); }
.access__h { font-family: var(--font-mincho); font-size: 17px; font-weight: 400; margin-top: 26px; }
.linkcards { display: grid; gap: 0; border-top: 1px solid var(--line); }
.linkcard { border-bottom: 1px solid var(--line); padding-block: 20px; }
.linkcard__t { font-family: var(--font-mincho); font-size: 18px; font-weight: 400; }
.linkcard__b { font-size: 13.5px; line-height: 1.95; color: var(--fg-sub); margin-block: 8px 10px; }
@media (min-width: 900px) {
.linkcards { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
}
/* ---- スタッフ ---- */
.staffcard__link { display: block; }
.staffcard__word { font-size: 12.5px; line-height: 1.9; color: var(--fg-sub); margin-top: 6px; }
.staffcard__more { margin-top: 10px; }
.staffhd { display: grid; gap: 24px; }
.staffhd__word { font-family: var(--font-mincho); font-size: 18px; line-height: 1.9; }
.staffhd__cta { margin-top: 20px; }
@media (min-width: 900px) {
.staffhd { grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.staffhd__word { font-size: 20px; }
}
/* ---- 404 ---- */
.notfound { border-top: 1px solid var(--line); }
.notfound__i { border-bottom: 1px solid var(--line); padding-block: 20px; }
.notfound__t { font-family: var(--font-mincho); font-size: 18px; font-weight: 400; }
.notfound__b { font-size: 13.5px; line-height: 1.95; color: var(--fg-sub); margin-top: 7px; }
/* ---- ボタンを並べたときの間隔（下層で複数並ぶため） ---- */
.btn + .btn { margin-left: 10px; }
@media (max-width: 599px) {
.btn + .btn { margin-left: 0; margin-top: 10px; }
.btn--line { display: block; text-align: center; }
}
/* ---- 採用：職種見出しと準備中タグ（第二段階 追補） ---- */
.joboccu { font-family: var(--font-mincho); font-size: 20px; font-weight: 400;
margin-top: 26px; padding-bottom: 8px; }
.joboccu:first-of-type { margin-top: 0; }
.joblist__tag { display: inline-block; margin-left: 10px; padding: 2px 8px; vertical-align: 2px;
font-family: var(--font-body); font-size: 11.5px; letter-spacing: .04em;
color: var(--fg-sub); border: 1px solid var(--line-strong); border-radius: var(--r-ui); }
.jobref { margin-top: 28px; padding: 16px 18px; background: var(--bg); border: 1px dashed var(--line-strong); }
.jobref__t { font-size: 13px; letter-spacing: .04em; }
.jobref__b { font-size: 12px; line-height: 1.9; color: var(--fg-sub); margin-block: 6px 12px; }
/* ---- 求人：給与まわり（第三段階 追補） ---- */
.salaryhd { font-family: var(--font-mincho); font-size: 22px; line-height: 1.6; letter-spacing: .04em; }
@media (min-width: 900px) { .salaryhd { font-size: 26px; } }
.jobh3 { font-family: var(--font-mincho); font-size: 18px; font-weight: 400; margin-top: 30px; }
/* 実質時給は「目安」だと分かる形でだけ出す（固定時給と誤認させない） */
.wagebox { margin-top: 20px; padding: 16px 18px; background: var(--bg-alt); border-left: 2px solid var(--accent); }
.wagebox__t { font-size: 12.5px; letter-spacing: .04em; color: var(--fg-sub); }
.wagebox__t b { font-weight: 400; color: var(--fg); border-bottom: 1px solid var(--accent); }
.wagebox__v { font-family: var(--font-mincho); font-size: 20px; margin-top: 4px; }
.wagebox__n { font-size: 12px; line-height: 1.9; color: var(--fg-sub); margin-top: 8px; }
/* 給与例。表組みにせず1件1行で積む（SPで切れないため） */
.salex { margin-top: 14px; border-top: 1px solid var(--line); }
.salex__i { display: grid; gap: 3px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.salex__s { font-size: 13.5px; }
.salex__d { font-size: 12.5px; color: var(--fg-sub); }
.salex__t { font-size: 14px; }
.salex__t b { font-weight: 400; }
@media (min-width: 900px) {
.salex__i { grid-template-columns: 12em 1fr auto; align-items: baseline; gap: 16px; }
.salex__t { text-align: right; }
}
.jobdl__ul--plain { margin-top: 10px; }
.joblist__pay { font-size: 14px; margin-top: 6px; }
/* ---- 規約・方針の読み物（/privacy/） ----
カードUIを並べない。本文幅は wrap--narrow（760px）に収め、
1行が長くなりすぎないようにする。 */
.legal__lead { font-size: 14px; line-height: 2.05; color: var(--fg-sub); }
.legal__sec { margin-top: 34px; }
.legal__h { font-family: var(--font-mincho); font-size: 18px; font-weight: 400;
line-height: 1.6; letter-spacing: .04em;
padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.legal__n { font-family: var(--font-en); font-size: 14px; color: var(--fg-mute); margin-right: 6px; }
.legal__p { font-size: 14px; line-height: 2.05; margin-top: 14px; }
.legal__ul { margin-top: 12px; }
.legal__ul li { position: relative; padding-left: 15px; margin-top: 7px; font-size: 14px; line-height: 1.95; }
.legal__ul li::before { content: ""; position: absolute; left: 0; top: .95em;
width: 7px; height: 1px; background: var(--line-strong); }
.legal__dl { margin-top: 14px; }
.legal__dl dt { font-size: 12.5px; color: var(--fg-mute); margin-top: 12px; }
.legal__dl dd { font-size: 14px; line-height: 1.95; margin-top: 3px; }
.legal__date { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
font-size: 12.5px; line-height: 1.9; color: var(--fg-sub); }
.legal__date:empty { display: none; }
@media (min-width: 900px) {
.legal__lead { font-size: 15px; }
.legal__h { font-size: 20px; }
.legal__sec { margin-top: 44px; }
}
/* ---------------------------------------------------------
採用応募フォーム（/recruit/apply/）
---------------------------------------------------------
WordPress標準フォームの見た目は使わない。
既存トークン（色・書体・余白・角丸2px・影なし）だけで組む。
SP390px を最優先。指で押す部分は 48px 以上を確保する。
入力欄の文字は16px（iOSで拡大ズームが起きるのを防ぐ）。
--------------------------------------------------------- */
/* 進行状況（入力 → 確認 → 送信完了） */
.formstep { font-family: var(--font-en); font-size: 11px; letter-spacing: .16em;
color: var(--fg-mute); }
.formstep b { font-weight: 400; color: var(--fg); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
/* 画面全体への案内（nonce切れ・二重送信・送信失敗など） */
.formnotice { margin-bottom: 22px; padding: 14px 16px; background: var(--bg-alt);
border-left: 2px solid var(--accent); font-size: 13.5px; line-height: 1.9; }
/* 入力エラーのまとめ */
.formalert { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--accent); }
.formalert__t { font-size: 14px; letter-spacing: .04em; }
.formalert__l { margin-top: 8px; }
.formalert__l li { position: relative; padding-left: 14px; margin-top: 5px;
font-size: 13px; line-height: 1.85; color: var(--fg-sub); }
.formalert__l li::before { content: ""; position: absolute; left: 0; top: .9em;
width: 6px; height: 1px; background: var(--accent); }
/* 1項目 */
.form { margin-top: 30px; }
/* 項目の区切り線は「下」に引く。
fieldset の上ボーダーは legend の位置で途切れる仕様のため、
上に引くと選択式の項目（応募職種など）だけラベルが線の中に埋まって見える。
実測（2026-09-01 ステージング）で確認して下ボーダーに変更した。 */
.fld { margin: 0; padding: 26px 0; border: 0; border-bottom: 1px solid var(--line); }
.fld__label { display: block; padding: 0; font-size: 14px; letter-spacing: .04em; }
.fld__note { font-size: 12px; line-height: 1.85; color: var(--fg-mute); margin-top: 6px; }
.fld__note--center { text-align: center; margin-top: 14px; }
/* 必須・任意。色だけに頼らず文字で示す */
.req, .opt { display: inline-block; margin-left: 8px; padding: 1px 7px; vertical-align: 2px;
font-size: 11px; letter-spacing: .06em; border-radius: var(--r-ui); }
.req { color: var(--on-accent); background: var(--accent); }
.opt { color: var(--fg-mute); border: 1px solid var(--line-strong); }
/* 項目ごとのエラー。入力欄のすぐ上に置く */
.fld__err { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--accent); }
.fld__err span { font-family: var(--font-en); margin-right: 5px; }
/* 入力欄 */
.input {
display: block; width: 100%; margin-top: 10px; padding: 12px 14px; min-height: 48px;
font-family: inherit; font-size: 16px; line-height: 1.6; color: var(--fg);
background: #FFFFFF; border: 1px solid var(--line-strong); border-radius: var(--r-ui);
-webkit-appearance: none; appearance: none;
}
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.input--area { min-height: 128px; line-height: 1.9; resize: vertical; }
.input::placeholder { color: #A9A39A; }
[aria-invalid="true"].input { border-color: var(--accent); }
/* 選択肢。行そのものを押せるようにする（タップ領域 48px） */
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.choices--col { display: grid; grid-template-columns: 1fr; gap: 0; }
.choice {
display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px 8px 12px;
font-size: 14px; line-height: 1.6; background: #FFFFFF;
border: 1px solid var(--line-strong); border-radius: var(--r-ui); cursor: pointer;
}
.choices--col .choice { border-radius: 0; margin-top: -1px; }
.choices--col .choice:first-child { border-radius: var(--r-ui) var(--r-ui) 0 0; margin-top: 0; }
.choices--col .choice:last-child { border-radius: 0 0 var(--r-ui) var(--r-ui); }
.choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.choice:hover { border-color: var(--fg-sub); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--bg-alt); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 「その他」用の短い自由記入欄 */
.fld__sub { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.fld__sublabel { font-size: 12.5px; color: var(--fg-sub); }
/* 同意 */
.fld--consent { border-bottom: 0; }
.choice--consent { align-items: flex-start; padding-block: 14px; }
.choice--consent input { margin-top: 2px; }
.choice--consent a { border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
/* ボタン */
.formbtns { margin-top: 30px; display: grid; gap: 12px; }
.applycta { margin-top: 20px; }
/* 確認画面 */
.formconf { margin-top: 24px; }
.formconf__none { color: var(--fg-mute); font-size: 13px; }
/* 完了ページの導線 */
.formend { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
/* honeypot。人の目にもスクリーンリーダーにも触れさせない */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ステージング限定のメール文面プレビュー */
.mailpv { margin-top: 40px; padding: 16px 18px; background: var(--bg-alt); border: 1px dashed var(--line-strong); }
.mailpv__t { font-size: 12.5px; letter-spacing: .04em; }
.mailpv__h { font-size: 12.5px; color: var(--fg-sub); margin-top: 16px; }
.mailpv__b { margin-top: 6px; padding: 12px; background: #FFFFFF; border: 1px solid var(--line);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-x: auto; }
@media (min-width: 900px) {
.form { margin-top: 36px; }
.fld__label { font-size: 15px; }
.input { font-size: 15px; }
.formbtns { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}
/* 送信中は押し直せないようにする（二重送信の抑制はサーバー側が本体） */
.form.is-sending .btn { opacity: .6; pointer-events: none; }
/* 既存の「.btn + .btn { margin-left:10px }」（下層でボタンを横に並べる用）が
grid / flex の gap と二重に効いてしまうので、フォーム内だけ打ち消す。
実測（2026-09-01 PC1280）：確認画面の「修正する」が10pxずれていた。 */
.formbtns .btn + .btn,
.formend .btn + .btn { margin-left: 0; margin-top: 0; }
/* ---------------------------------------------------------
スタッフ専用 デザイン投稿画面（/staff-post/）
---------------------------------------------------------
スタッフが毎日スマホで使う道具。管理画面らしさを出さない。
フォーム部品は採用応募フォームと同じ .fld / .input / .choice を使う。
--------------------------------------------------------- */
.page-hd--tool { padding-block: 26px 22px; }
.sec--tool { padding-block: 26px 40px; }
/* ログイン（WordPress標準の wp_login_form を自前の見た目にする） */
.splogin { margin-top: 22px; }
.splogin .login-username,
.splogin .login-password { margin-bottom: 16px; }
.splogin label { display: block; font-size: 14px; letter-spacing: .04em; margin-bottom: 8px; }
.splogin input[type="text"],
.splogin input[type="password"] {
display: block; width: 100%; min-height: 48px; padding: 12px 14px;
font-family: inherit; font-size: 16px; line-height: 1.6; color: var(--fg);
background: #FFFFFF; border: 1px solid var(--line-strong); border-radius: var(--r-ui);
-webkit-appearance: none; appearance: none;
}
.splogin input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.splogin .login-remember { font-size: 13.5px; color: var(--fg-sub); margin-bottom: 18px; }
.splogin .login-remember input { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; accent-color: var(--accent); }
.splogin .login-submit input[type="submit"] {
display: flex; align-items: center; justify-content: center; width: 100%;
min-height: 56px; padding-inline: 40px; font-family: inherit; font-size: 15px;
letter-spacing: .04em; color: var(--on-accent); background: var(--accent);
border: 0; border-radius: var(--r-ui); cursor: pointer;
}
.splogin .login-submit input[type="submit"]:hover { opacity: .86; }
/* 写真の選択とプレビュー */
.spphoto { margin-top: 12px; }
.spphoto__input {
display: block; width: 100%; padding: 14px; min-height: 56px;
font-family: inherit; font-size: 14px; color: var(--fg-sub);
background: #FFFFFF; border: 1px dashed var(--line-strong); border-radius: var(--r-ui);
}
.spphoto__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.spphoto__preview { margin-top: 14px; }
/* .plate は 。inline のままだと aspect-ratio が効かず高さ0になる。
（実測 2026-09-01：プレビューの高さが 0 で写真が見えなかった） */
.spphoto__preview .plate,
.spdone__thumb .plate { display: block; }
.spphoto__preview .plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 選択肢を横に流す（カテゴリ・カラー・部位） */
.choices--wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.choices--wrap .choice { border-radius: var(--r-ui); margin-top: 0; }
/* 送信前の確認パネル */
.spconfirm { margin-top: 26px; padding: 16px 18px; background: var(--bg-alt); border-left: 2px solid var(--accent); }
.spconfirm__t { font-size: 14px; letter-spacing: .04em; }
.spconfirm .jobdl { border-top: 0; margin-top: 6px; }
.spconfirm .jobdl dt { padding-top: 10px; }
.spconfirm .jobdl dd { padding-bottom: 10px; }
/* 完了 */
.spdone { margin-top: 24px; text-align: center; }
.spdone__t { font-family: var(--font-mincho); font-size: 20px; letter-spacing: .04em; }
.spdone__thumb { max-width: 320px; margin: 18px auto 0; }
.spdone__name { font-size: 14px; color: var(--fg-sub); margin-top: 12px; }
/* 画面末尾のログイン状態 */
.spfoot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line);
font-size: 12.5px; color: var(--fg-mute); }
.spfoot .link { margin-left: 12px; }
@media (min-width: 900px) {
.spdone__t { font-size: 24px; }
}
/* ---- スタッフ画面：自分の投稿一覧と修正（追加） ---- */
/* 画面間の導線。メニューらしくせず、1行に収める。
【注意】.spnav はヘッダーのスマホメニューが使っているので流用しないこと。 */
.sptools { margin-top: 18px; font-size: 12.5px; color: var(--fg-mute); }
.sptools__here { color: var(--fg); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.sptools .link { margin-left: 16px; }
/* 一覧。表組みにせず、写真＋名前の縦一列 */
.splist { margin-top: 24px; border-top: 1px solid var(--line); }
.splist__i { display: grid; grid-template-columns: 96px 1fr; gap: 14px;
padding-block: 16px; border-bottom: 1px solid var(--line); align-items: start; }
.splist__fig { display: block; }
.splist__fig .plate { display: block; }
.splist__name { font-size: 14.5px; line-height: 1.6; }
.splist__meta { font-size: 12px; color: var(--fg-mute); margin-top: 5px; }
.splist__act { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.splist__act .btn { min-height: 40px; padding-inline: 18px; font-size: 13px; }
.splist__act .btn + .btn { margin-left: 0; }
/* 修正画面：いまの写真 */
.spcurrent { margin-top: 12px; max-width: 260px; }
.spcurrent .plate { display: block; }
.spcurrent__t { font-size: 12px; color: var(--fg-mute); margin-top: 6px; }
.spcurrent__t--new { color: var(--accent); }
.spphoto .fld__sublabel { display: block; margin-top: 18px; margin-bottom: 8px; }
@media (min-width: 600px) {
.splist__i { grid-template-columns: 140px 1fr; gap: 18px; }
}