@charset "UTF-8";
/* ============================================================
shop-lp.css
店舗ページ（BtoC）専用スタイル
------------------------------------------------------------
・common.css / index.css とは独立。採用サイト側とは併用しない
・対象：3beplus / 2weekscolor / 2weeksplus の3ページ
・JSは js/news.js（お知らせの読み込み）だけを使う
------------------------------------------------------------
店舗ごとに変えるのは :root の --brand 系4色だけでよい。
HTML側で のように付けて上書きする想定。
============================================================ */
/* ------------------------------------------------------------
トークン
・地は白、主色 #AF0D6A（白地6.80／白抜き6.80＝どちらもAA）
・本文は html の 19.2px 基準。40代以上の視認性を優先
------------------------------------------------------------ */
:root {
--brand: #AF0D6A; /* 主色：白地6.80／白抜き6.80 */
--brand-deep: #8C0A55; /* 見出し・リンク 9.17 */
--brand-tint: #FBEAF3; /* ごく淡い面 */
--brand-line: #F0CFE0; /* 罫線 */
--ink: #2B2B2B; /* 本文 14.7 */
--ink-soft: #4A4A4A; /* 補足 8.86（従来のグレーより濃く） */
--line: #E4E4E4;
--radius: 14px;
/* ロゴの緑をもとにしたサブ色。ピンク一色になるのを避けたいときに使う */
--green: #35691E; /* 文字・罫線（淡緑地で5.4：AA） */
--green-mid: #4E8F2E; /* アイコン */
--green-tint: #EEF6E8; /* 淡い面 */
--green-pale: #F6FBF2; /* さらに淡い面（黒文字を載せる用） */
--green-line: #C6E0B4; /* 罫線 */
}
/* 店舗ごとに配色を変える場合は、 のように付けて
この4色だけを上書きする。他の指定は触らなくてよい。
（--brand は白地・白抜きとも 4.5 以上を確保できる濃さにすること）
.shop-okyo {
--brand: #AF0D6A;
--brand-deep: #8C0A55;
--brand-tint: #FBEAF3;
--brand-line: #F0CFE0;
}
*/
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* rem の基準。ブラウザ既定16px の1.2倍＝19.2px にして本文をまとめて大きくする。
見出し・ボタンは各セレクタ側で rem を 1.2 で割り、従来の実寸を保っている。 */
font-size: 19.2px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: #fff;
color: var(--ink);
font-family: 'Noto Sans JP', sans-serif;
font-size: 1rem; /* ＝19.2px */
line-height: 1.9;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-deep); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; }
/* ------------------------------------------------------------
ヘッダー：左＝ロゴ／右＝アクセス
------------------------------------------------------------ */
.mini-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
max-width: 680px;
margin: 0 auto;
padding: 12px 20px;
}
.mini-header-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mini-header-logo img { flex: none; height: 50px; width: auto; }
/* ロゴ横の店名（併記するページだけで使う） */
.mini-header-name {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(0.64rem, 3vw, 0.82rem);
font-weight: 700;
line-height: 1.55;
letter-spacing: 0.02em;
color: var(--ink);
}
/* 1行に収まらないときは「2Weeks plus」の後ろで折る */
.hd-br { display: inline; }
@media (min-width: 560px) { .hd-br { display: none; } }
/* 店名を併記するページは、狭い画面でロゴとボタンを少し詰めて場所をつくる */
@media (max-width: 480px) {
.mini-header-logo:has(.mini-header-name) img { height: 40px; }
.mini-header:has(.mini-header-name) .header-access { padding: 7px 13px; font-size: 0.86rem; }
}
.header-access {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.94rem; /* 18.0px */
font-weight: 700;
color: var(--brand-deep);
text-decoration: none;
border: 2px solid var(--brand-line);
border-radius: 999px;
padding: 8px 18px;
white-space: nowrap;
}
.header-access:hover { border-color: var(--brand); }
/* ------------------------------------------------------------
ヒーロー
------------------------------------------------------------ */
.hero { position: relative; max-width: 680px; margin: 0 auto; }
.hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 700px) { .hero { border-radius: var(--radius); overflow: hidden; } }
.hero-catch {
position: absolute;
top: 16px;
right: 16px;
writing-mode: vertical-rl;
font-family: 'Noto Serif JP', serif;
/* 縦書き7文字＋余白が、ヒーローの高さ（画面幅の2/3）に必ず収まるようにする。
375pxのとき 字22.5px×7＋字間＋上下余白＝約230px（ヒーロー250px） */
font-size: clamp(0.88rem, 6vw, 1.12rem);
font-weight: 500;
letter-spacing: 0.28em;
color: #fff;
background: var(--brand);
padding: 16px 10px;
border-radius: 999px;
line-height: 1;
}
/* 縦書きに収まらない長いキャッチ用。写真の下端に横帯で載せる
（縦書きの .hero-catch は7〜8文字が上限。それを超える店舗はこちらを使う） */
.hero-catch-band {
position: absolute;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 14px 16px;
background: rgba(175, 13, 106, 0.88); /* --brand の88%。白抜きで5.9以上 */
color: #fff;
font-family: 'Noto Serif JP', serif;
font-size: clamp(0.86rem, 4.6vw, 1.2rem);
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.04em;
text-align: center;
}
/* 部門タグ（美容室／カラー専門店）。hero-title-en の代わりに使う */
.hero-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 0 10px;
padding: 0;
list-style: none;
}
.hero-tags li {
font-size: 0.8rem;
font-weight: 700;
color: #fff;
background: var(--brand);
padding: 3px 14px;
letter-spacing: 0.06em;
white-space: nowrap;
}
/* 部門の見出し（メニューや流れを部門ごとに分けるとき） */
.dept-heading {
margin: 0 0 14px;
padding: 8px 0;
border-top: 2px solid var(--brand);
border-bottom: 1px solid var(--brand-line);
font-family: 'Noto Serif JP', serif;
font-size: 1.08rem;
font-weight: 700;
color: var(--brand-deep);
text-align: center;
letter-spacing: 0.08em;
}
.dept-heading + .dept-heading-note {
margin: -6px 0 16px;
font-size: 0.9rem;
color: var(--ink-soft);
text-align: center;
}
.dept-block + .dept-block { margin-top: 44px; }
/* 所要時間の訴求バンド（.dept-heading の直後に置く）
.dept-heading-note より強く目立たせたいときに使う */
.quick45 {
margin: -4px 0 20px;
padding: 16px 12px;
border: 2px solid var(--brand);
border-radius: var(--radius);
background: var(--brand-tint);
font-family: 'Noto Serif JP', serif;
font-size: clamp(1rem, 4.6vw, 1.25rem);
font-weight: 700;
color: var(--brand-deep);
text-align: center;
line-height: 1.7;
letter-spacing: 0.04em;
}
.quick45-num {
display: inline-block;
margin: 0 8px 0 0;
padding: 3px 14px;
border-radius: 999px;
background: var(--brand);
color: #fff;
font-size: 1.05em;
letter-spacing: 0.02em;
white-space: nowrap;
vertical-align: 0.18em;
}
.quick45-price {
font-size: 1.7em;
letter-spacing: 0.01em;
white-space: nowrap;
}
.quick45-yen { font-size: 0.58em; margin-left: 2px; letter-spacing: 0.04em; }
.hero-title-block { text-align: center; padding: 26px 20px 0; }
.hero-title-en {
font-family: 'Noto Serif JP', serif;
font-size: 0.9rem;
letter-spacing: 0.3em;
color: var(--brand);
margin: 0 0 4px;
}
/* 英字ではなく日本語を入れる場合。字間を詰めて太字にする */
.hero-title-ja {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
}
h1 {
font-family: 'Noto Serif JP', serif;
font-size: 1.43rem; /* 27.5px */
font-weight: 700;
letter-spacing: 0.04em;
margin: 0 0 8px;
line-height: 1.5;
}
.hero-lead { font-size: 0.97rem; color: var(--ink-soft); margin: 0; }
.hero-hours {
margin: 10px 0 0;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.04em;
}
/* ------------------------------------------------------------
① 予約・クーポン
------------------------------------------------------------ */
/* .wrap の padding を上書きするので、左右は合計値（36px）を直接書く */
.reserve-block { padding: 24px 36px 8px; }
.btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
width: 100%;
min-height: 68px;
padding: 12px 24px; /* 文字が枠に触れないように */
border-radius: 999px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.03em;
line-height: 1.4;
}
.btn small { font-size: 0.83rem; font-weight: 500; }
.btn-reserve {
background: var(--brand);
color: #fff;
box-shadow: 0 4px 14px rgba(175, 13, 106, 0.24);
}
.btn-reserve small { color: #fff; }
/* 大きめのボタン（メニュー導線など、単独で見せたいとき） */
.btn-lg { min-height: 80px; font-size: 1.18rem; }
.btn-lg small { font-size: 0.86rem; }
.btn-tel {
margin-top: 12px;
background: #fff;
color: var(--brand-deep);
border: 2px solid var(--brand);
min-height: 62px;
}
.btn-tel .tel-num { font-size: 1.12rem; letter-spacing: 0.02em; white-space: nowrap; }
.reserve-note {
text-align: center;
font-size: 0.9rem;
color: var(--ink-soft);
margin: 12px 0 0;
}
/* ------------------------------------------------------------
部門の入口（2Weeks plus 西泉店のみ）
・2枚を並べて、まず行き先を選んでもらう画面にする
・カラー専門店は専用ページ（2weeksplus-color.html）へ送る
------------------------------------------------------------ */
.dept-nav-wrap { margin-top: 26px; }
.dept-nav-lead {
margin: 0 0 16px;
text-align: center;
font-family: 'Noto Serif JP', serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.9;
letter-spacing: 0.04em;
}
/* 2枚を必ず横1列に並べる。狭い画面でも縦積みにしない */
.dept-nav {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dept-nav-item a {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
height: 100%;
/* 半分の幅に収めるため、左右の余白は詰める */
padding: 18px 10px 16px;
border-radius: var(--radius);
border: 2px solid;
background: #fff;
text-align: center;
text-decoration: none;
color: var(--ink);
}
.dept-nav-en {
font-family: 'Noto Serif JP', serif;
font-size: clamp(0.52rem, 2.4vw, 0.7rem);
letter-spacing: 0.14em;
text-indent: 0.14em;
}
.dept-nav-name {
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(1.05rem, 5vw, 1.5rem);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.3;
white-space: nowrap;
}
.dept-nav-price {
font-family: 'Noto Serif JP', serif;
font-size: clamp(0.75rem, 3.4vw, 1.15rem);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--brand-deep);
white-space: nowrap;
}
.dept-nav-price b { font-size: 1.5em; letter-spacing: 0.01em; }
.dept-nav-desc {
font-size: clamp(0.76rem, 3.2vw, 0.95rem);
line-height: 1.7;
}
.dept-nav-point {
font-size: clamp(0.66rem, 2.9vw, 0.84rem);
font-weight: 700;
padding: 4px 8px;
border-radius: 6px;
line-height: 1.6;
}
/* ボタンは2枚で高さがそろうよう、下端に寄せる */
.dept-nav-go {
margin-top: auto;
padding: 9px 12px;
width: 100%;
border-radius: 6px;
color: #fff;
font-size: clamp(0.8rem, 3.4vw, 0.95rem);
font-weight: 700;
}
/* 2枚ともブランド色。地の濃さだけ変えて区別する */
.dept-nav-item a { border-color: var(--brand-line); }
.dept-nav-en,
.dept-nav-name { color: var(--brand-deep); }
/* ピンクが続くので、この一言だけロゴの緑を使う */
.dept-nav-point { background: var(--green-tint); color: var(--green); }
.dept-nav-go { background: var(--brand); }
/* ------------------------------------------------------------
もう一方の部門への案内カード
・店舗ページ／カラー専門店LPの双方で同じ体裁を使う
------------------------------------------------------------ */
.clp-salon-card {
border: 2px solid var(--brand-line);
border-radius: var(--radius);
padding: 28px 22px;
text-align: center;
}
.clp-salon-eyebrow {
margin: 0 0 8px;
font-family: 'Noto Serif JP', serif;
font-size: 0.72rem;
letter-spacing: 0.3em;
text-indent: 0.3em;
color: var(--brand);
}
.clp-salon-title {
margin: 0 0 14px;
font-family: 'Noto Serif JP', serif;
font-size: clamp(1.1rem, 4.8vw, 1.3rem);
color: var(--brand-deep);
letter-spacing: 0.04em;
line-height: 1.7;
}
.clp-salon-text {
margin: 0 0 18px;
font-size: 0.95rem;
line-height: 1.95;
text-align: left;
}
/* 見出しの下に置く小さめの写真 */
.clp-salon-photo {
width: 100%;
max-width: 320px;
margin: 0 auto 16px;
border-radius: 10px;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.clp-salon-small { display: block; font-size: 0.8rem; font-weight: 500; }
/* 店舗ページでは単独のセクションとして置く */
.cross-section { padding-top: 46px; }
/* ------------------------------------------------------------
セクション見出し
------------------------------------------------------------ */
section { padding: 54px 0 0; }
.sec-title {
font-family: 'Noto Serif JP', serif;
font-size: 1.2rem; /* 23.0px */
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
margin: 0 0 4px;
}
.sec-title-en {
display: block;
text-align: center;
font-family: 'Noto Serif JP', serif;
font-size: 0.82rem;
letter-spacing: 0.28em;
color: var(--brand);
margin: 0 0 24px;
}
.sec-title-en::after {
content: '';
display: block;
width: 30px;
height: 2px;
background: var(--brand);
margin: 12px auto 0;
border-radius: 2px;
}
/* ------------------------------------------------------------
② お知らせ（index.html と同じサムネ＋本文の2カラム）
------------------------------------------------------------ */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li + li { margin-top: 14px; }
.news-list a {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 16px;
border: 1px solid var(--brand-line); /* 角丸なしの四角で1件ずつ囲む */
border-radius: 0;
text-decoration: none;
color: var(--ink);
}
.news-thumb {
flex: none;
width: 140px;
border-radius: 0;
overflow: hidden;
background: var(--brand-tint);
}
.news-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* アイキャッチ未設定の記事は news.js が images/news/placeholder.png（会社ロゴ）を入れる。
16:9で切り抜くとロゴが欠けるので、その時だけ全体を収める */
.news-thumb img[src$="placeholder.png"] { object-fit: contain; padding: 12px; }
.news-body { min-width: 0; }
/* WordPressは店舗＋種類など複数のカテゴリーを返すことがあるので折り返す */
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; line-height: 1.6; }
.news-date { font-size: 0.88rem; font-weight: 700; color: var(--brand); }
.news-cat {
font-size: 0.8rem;
color: #fff;
background: #7A7A7A; /* 白抜きで4.8：AA */
border-radius: 999px;
padding: 2px 12px;
white-space: nowrap;
}
.news-title { margin: 4px 0 0; font-size: 1.02rem; line-height: 1.7; font-weight: 400; }
.news-more { display: block; text-align: right; margin-top: 18px; font-size: 0.97rem; font-weight: 400; }
/* 記事0件・取得失敗時に news.js が入れる文言 */
.news-empty {
margin: 0;
padding: 28px 4px;
text-align: center;
font-size: 0.97rem;
color: var(--ink-soft);
}
@media (max-width: 420px) {
.news-thumb { width: 108px; }
.news-list a { gap: 12px; }
}
/* ------------------------------------------------------------
③ コンセプト
------------------------------------------------------------ */
.concept-photo { border-radius: var(--radius); }
/* 2枚並べる場合。右を少し下げて段違いにし、1枚のときより目を引かせる */
.concept-photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
}
.concept-photos img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius);
display: block;
}
.concept-photos img:nth-child(2) { margin-top: 34px; }
.concept-copy {
font-family: 'Noto Serif JP', serif;
/* 15文字前後の行が入る想定。320px端末では19.8pxだと2文字はみ出すので
画面幅に応じて縮める（388px以上は従来どおり1.03rem＝19.8px） */
font-size: clamp(0.8rem, 5.1vw, 1.03rem);
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
color: var(--brand-deep);
margin: 26px 0 12px;
line-height: 1.9;
}
.concept-text { margin: 0; font-size: 1rem; }
/* オーガニックエキスの訴求（28Daysカードの上）
写真の上に白文字を載せる。下半分に黒のスクリムを敷いてコントラストを確保する
（画像下部の緑 rgb(110,140,90) に 65% の黒 → 白文字で13:1前後） */
.organic-block {
position: relative;
margin: 28px 0 0;
border-radius: var(--radius);
overflow: hidden;
}
.organic-photo {
width: 100%;
aspect-ratio: 8 / 5;
object-fit: cover;
}
.organic-block::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.30) 100%);
pointer-events: none;
}
.organic-copy {
position: absolute;
z-index: 1;
inset: 0;
display: grid;
place-items: center;
padding: 0 8px;
font-family: 'Noto Serif JP', serif;
/* 3行に収めたまま最大まで大きくする。最長行は3行目の14文字。
320px端末で使える幅は 280−16＝264px なので、1文字あたり18.8pxが上限。
5.3vw なら 320pxで約17px（実測243px）。489px以上で上限1.35rem＝25.9pxに達する */
font-size: clamp(0.85rem, 5.3vw, 1.35rem);
font-weight: 700;
line-height: 1.95;
letter-spacing: 0.02em;
text-align: center;
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
/* ------------------------------------------------------------
写真上コピーの強調版（.organic-block に .organic-card を併記）
・写真を敷き詰め、高さは文字量にあわせて伸びる
・スクリムを濃くし、内側の白罫と英字ラベルで見た目を整える
・従来の .organic-block だけの指定は変更していないので、
2weekscolor / 3beplus の表示には影響しない
------------------------------------------------------------ */
.organic-card {
display: grid;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}
/* 写真は背景として敷く。高さはコピー側が決める */
.organic-card .organic-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
/* 写真を見せたいので全面のスクリムはごく薄く。
文字のコントラストは .organic-plate（文字の下だけ敷く面）で確保する */
.organic-card::after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.28) 100%);
}
.organic-card .organic-copy {
position: relative;
inset: auto;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: min(72vw, 420px);
padding: 26px 12px;
font-size: inherit;
line-height: inherit;
}
/* 文字の下だけに敷く面。写真の明るい部分に文字が乗っても白文字で4.5:1以上を保つ。
背景を透かしてぼかすので、写真自体は面の外でしっかり見える */
.organic-plate {
display: flex;
flex-direction: column;
align-items: center;
max-width: 32em;
padding: 20px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(12, 4, 9, 0.76);
backdrop-filter: blur(7px) saturate(0.92);
-webkit-backdrop-filter: blur(7px) saturate(0.92);
}
/* 英字ラベル＋下の短いライン */
.organic-eyebrow {
position: relative;
margin: 0 0 14px;
padding-bottom: 11px;
font-family: 'Noto Serif JP', serif;
font-size: clamp(0.58rem, 2.8vw, 0.7rem);
font-weight: 500;
letter-spacing: 0.3em;
text-indent: 0.3em;
color: rgba(255, 255, 255, 0.92);
}
.organic-eyebrow::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 36px;
height: 2px;
background: var(--brand);
}
/* 主コピー。改行位置は HTML の
で決める（.cp-br は狭い画面だけ有効） */
.organic-main {
font-family: 'Noto Serif JP', serif;
font-size: clamp(0.82rem, 5.0vw, 1.5rem);
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.03em;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
/* 主コピーの下に置く補足文 */
.organic-sub {
display: block;
max-width: 30em;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.32);
font-size: clamp(0.7rem, 3.3vw, 0.88rem);
font-weight: 400;
line-height: 1.85;
letter-spacing: 0.02em;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
/* 狭い画面だけで効かせる改行 */
.cp-br { display: inline; }
@media (min-width: 520px) { .cp-br { display: none; } }
.cycle-card {
background: var(--brand-tint);
border-radius: var(--radius);
padding: 24px 22px;
margin-top: 28px;
}
.cycle-card-title {
display: flex;
align-items: center;
gap: 14px;
font-family: 'Noto Serif JP', serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--brand-deep);
margin: 0 0 10px;
}
.cycle-num {
flex: none;
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-family: 'Noto Serif JP', serif;
font-size: 1.18rem;
line-height: 1;
}
.cycle-num small { font-size: 0.47rem; letter-spacing: 0.1em; }
.cycle-card p { margin: 0; font-size: 0.97rem; }
.cycle-card strong { font-weight: 700; color: var(--brand-deep); }
/* ------------------------------------------------------------
⑤ メニュー・料金
------------------------------------------------------------ */
.menu-panel {
background: var(--brand-tint);
border-radius: var(--radius);
padding: 28px 22px;
text-align: center;
}
.menu-panel > p { margin: 0; font-size: 1rem; }
/* 対応メニューを写真付きで並べる（3be plus） */
.icon-list-title {
margin: 4px 0 12px;
font-family: 'Noto Serif JP', serif;
font-size: 1.08rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--brand-deep);
}
.icon-list {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 6px 0 14px;
padding: 0;
}
.icon-list li {
display: grid;
justify-items: center;
gap: 8px;
padding: 12px 12px 14px;
border: 1px solid var(--brand-line);
border-radius: 10px;
background: #fff;
}
.icon-name {
font-size: 1rem;
font-weight: 700;
color: var(--brand-deep);
letter-spacing: 0.04em;
}
.icon-desc {
font-size: 0.84rem;
line-height: 1.6;
color: var(--ink-soft);
}
/* 縦横比の違う写真でも並びがそろうよう、正方形に切り抜く */
.icon-photo {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
}
/* ------------------------------------------------------------
お悩み訴求ブロック（3be plus のコンセプト内）
・写真に文字を重ねず、見出し→写真→説明の順で読ませる
------------------------------------------------------------ */
.worry-block {
margin-top: 28px;
padding: 26px 20px 24px;
border: 2px solid var(--brand-line);
border-radius: var(--radius);
text-align: center;
}
.worry-title {
margin: 0 0 18px;
font-family: 'Noto Serif JP', serif;
font-size: clamp(1.15rem, 5vw, 1.45rem);
font-weight: 700;
line-height: 1.7;
letter-spacing: 0.04em;
color: var(--brand-deep);
}
.worry-photo { width: 100%; border-radius: 8px; }
.worry-sub {
margin: 18px 0 12px;
font-family: 'Noto Serif JP', serif;
font-size: clamp(0.95rem, 4vw, 1.12rem);
font-weight: 700;
line-height: 1.85;
letter-spacing: 0.03em;
color: var(--brand);
}
.worry-text { margin: 0; font-size: 0.95rem; line-height: 1.95; text-align: left; }
.menu-notes { list-style: none; margin: 16px 0 22px; padding: 0; display: inline-block; text-align: left; }
.menu-notes li {
position: relative;
padding-left: 1.3em;
font-size: 0.95rem;
line-height: 1.9;
}
.menu-notes li::before {
content: '';
position: absolute;
left: 0;
top: 0.75em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
}
/* ------------------------------------------------------------
メニュー表（カラー専門店など、価格をページ内に出す店舗用）
・.menu-panel（予約サイトへ送る型）とは併用しない
------------------------------------------------------------ */
.menu-group { margin-bottom: 20px; border: 1px solid var(--brand-line); }
.menu-group-title {
margin: 0;
padding: 10px 16px;
background: var(--brand);
color: #fff;
font-family: 'Noto Serif JP', serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.06em;
}
/* メニューグループの先頭に置く写真（トリートメントバーの棚など） */
.menu-group-photo {
width: 100%;
aspect-ratio: 2 / 1;
object-fit: cover;
object-position: center 60%; /* ボトルの下半分に寄せる */
display: block;
}
.menu-row { padding: 16px; }
.menu-row + .menu-row { border-top: 1px solid var(--brand-line); }
.menu-row-name {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-size: 1rem;
font-weight: 700;
}
.menu-badge {
font-size: 0.72rem;
font-weight: 700;
color: #fff;
background: var(--brand);
padding: 2px 10px;
white-space: nowrap;
}
.menu-prices { list-style: none; margin: 0 0 10px; padding: 0; }
.menu-prices li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 5px 0;
font-size: 0.95rem;
}
.menu-prices li + li { border-top: 1px dotted var(--brand-line); }
.menu-price {
font-weight: 700;
color: var(--brand-deep);
white-space: nowrap;
}
.menu-row-desc { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.85; }
/* 注記 */
.menu-caution { margin: 0 0 20px; padding: 0; list-style: none; }
.menu-caution li { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.85; }
/* 予約サイトへの案内 */
.menu-cta { background: var(--brand-tint); padding: 22px 18px; text-align: center; }
.menu-cta p { margin: 0 0 14px; font-size: 0.95rem; }
/* ------------------------------------------------------------
⑦ ご利用の流れ（各ステップに写真）
------------------------------------------------------------ */
.flow-list { list-style: none; margin: 0; padding: 0; }
.flow-item {
border: 1px solid var(--brand-line);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 16px;
}
.flow-item:last-child { margin-bottom: 0; }
.flow-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.flow-body { padding: 18px 20px 20px; }
.flow-title {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Noto Serif JP', serif;
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 6px;
}
.flow-num {
flex: none;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1;
}
.flow-text { margin: 0; font-size: 0.97rem; }
.flow-text a { font-weight: 700; }
.flow-text a[href^="tel:"] { white-space: nowrap; }
/* 写真がまだ用意できていないステップは ![]()
を外すだけでよい */
@media (min-width: 560px) {
/* 写真があるステップだけ2カラムにする。写真なしのステップは1カラムのまま */
.flow-item:has(.flow-photo) { display: grid; grid-template-columns: 220px 1fr; align-items: stretch; }
.flow-item:has(.flow-photo) .flow-photo { height: 100%; aspect-ratio: auto; }
.flow-body { padding: 22px 24px; }
}
/* ------------------------------------------------------------
⑧ アクセス
------------------------------------------------------------ */
.access-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.access-map iframe { display: block; width: 100%; height: 260px; border: 0; }
.access-body { padding: 24px 20px; }
.access-address { margin: 0 0 16px; font-size: 1rem; }
.access-tel {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 60px;
border: 2px solid var(--brand);
border-radius: 999px;
text-decoration: none;
color: var(--brand-deep);
font-weight: 700;
font-size: 1.12rem;
margin-bottom: 18px;
white-space: nowrap;
}
.access-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.access-table th, .access-table td {
text-align: left;
padding: 11px 4px;
border-top: 1px solid var(--line);
vertical-align: top;
line-height: 1.7;
}
.access-table th { width: 6em; font-weight: 700; color: var(--brand-deep); white-space: nowrap; }
.access-gmap { display: inline-block; margin-top: 16px; font-size: 0.95rem; font-weight: 700; }
/* ------------------------------------------------------------
フッター：3店舗＋Instagram
------------------------------------------------------------ */
.recruit-note { text-align: center; font-size: 0.95rem; color: var(--ink-soft); padding: 46px 0 0; }
.site-footer { margin-top: 46px; padding: 40px 0 calc(104px + env(safe-area-inset-bottom)); background: var(--brand-tint); }
.footer-title {
font-family: 'Noto Serif JP', serif;
font-size: 1.05rem;
font-weight: 700;
text-align: center;
letter-spacing: 0.08em;
margin: 0 0 20px;
}
.store-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.store-card {
display: flex;
gap: 14px;
align-items: center;
background: #fff;
border-radius: var(--radius);
padding: 12px;
text-decoration: none;
color: var(--ink);
}
.store-card img {
flex: none;
width: 112px;
border-radius: 10px;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.store-card-name {
display: block;
font-weight: 700;
font-size: 1rem;
line-height: 1.55;
margin-bottom: 6px;
}
.store-card[aria-current] .store-card-name { color: var(--brand-deep); }
.store-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.store-tag {
font-size: 0.8rem;
line-height: 1.6;
color: var(--brand-deep);
border: 1px solid var(--brand-line);
border-radius: 999px;
padding: 1px 10px;
white-space: nowrap;
}
/* 店舗カードの下に置く部門リンク。
西泉店は美容室部門とカラー専門店部門でページが分かれているため */
.store-sub {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
/* 下は次のカードと離す。西泉店の付属メニューだと分かるよう上は詰める */
margin: 8px 0 12px;
padding: 0;
}
.store-sub a {
display: block;
padding: 6px 14px;
border: 1px solid var(--brand-line);
border-radius: 6px;
background: #fff;
font-size: 0.86rem;
font-weight: 700;
color: var(--brand-deep);
text-decoration: none;
white-space: nowrap;
}
/* 表示中のページは塗りつぶしで示す */
.store-sub a[aria-current] {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.footer-bottom { text-align: center; margin-top: 28px; }
.footer-ig {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
}
.footer-ig img { width: 28px; height: 28px; }
.footer-company { margin: 16px 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.footer-company a { color: var(--ink-soft); }
/* ------------------------------------------------------------
固定：下部予約バー
------------------------------------------------------------ */
.fixed-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 100;
display: flex;
gap: 8px;
max-width: 680px;
margin: 0 auto;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(6px);
border-top: 1px solid var(--brand-line);
}
.fixed-bar a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 58px;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
font-size: 0.92rem;
line-height: 1.3;
}
.fixed-bar small { font-size: 0.8rem; font-weight: 500; }
.fixed-tel { background: #fff; color: var(--brand-deep); border: 2px solid var(--brand); }
.fixed-reserve { background: var(--brand); color: #fff; }
.fixed-reserve small { color: #fff; }