/* 黒はお手本のまま、黄色だったところを緑に。緑の上の文字は白、黒の上の緑の文字は明るい緑（--pop-l）。 */
:root {
	--base: #F6F4EF; --surface: #FFFFFF; --ink: #1A1715; --muted: #5C544C; --rule: #DAD4C8;
	--star: #D0A04F; --pop: #00754A; --pop-l: #3DBE86; --soft: #BFE3D3; --tint: #E4F0EB;
	--line-d: rgba(246,244,239,.3);
	--gothic: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
	--latin: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	--pad: clamp(1.25rem, 4vw, 2.5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--gothic); font-size: 17px; font-weight: 500; line-height: 1.9; letter-spacing: .04em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: .08em; line-height: 1.6; }

/* 蛍光ペンの線（画面に入ると、左から引かれる） */
mark { color: inherit; background: linear-gradient(transparent 58%, var(--soft) 58%) no-repeat left / 100% 100%; padding: 0 .1em; }
.js .reveal mark { background-size: 0 100%; transition: background-size .9s .5s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in mark { background-size: 100% 100%; }
.is-dark mark { color: var(--pop-l); background-image: linear-gradient(transparent 92%, var(--pop-l) 92%); }

/* 黄色の星（看板の黄色）。飾りなので、文字は載せない。 */
:root { --star-shape: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star { display: inline-block; width: .3em; height: .3em; background: var(--star); clip-path: var(--star-shape); animation: twinkle 3.2s ease-in-out infinite; }
.en .star { margin-left: .08em; vertical-align: .62em; }
.hero__label .star { width: 16px; height: 16px; margin-right: -.3rem; }
.lead .star { width: .55em; height: .55em; margin-left: .2em; vertical-align: .5em; animation-delay: 1.1s; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.55) rotate(36deg); opacity: .55; } }
.js .reveal .en .star { opacity: 0; transition: opacity .6s 1s; animation-play-state: paused; }
.js .reveal.is-in .en .star { opacity: 1; animation-play-state: running; }

/* 大小の星が、左下から右上へこぼれるように散らばる飾り。 */
.stars { position: absolute; z-index: 2; pointer-events: none; right: 0; top: 4rem; width: 240px; aspect-ratio: 1 / 1; animation: floaty 9s ease-in-out infinite alternate; }
.stars i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1 / 1; background: var(--star); clip-path: var(--star-shape); animation: twinkle var(--d) ease-in-out var(--w) infinite; }
.reserve .stars { z-index: 0; top: 1rem; width: 170px; }
@media (min-width: 900px) { .stars { right: 3%; top: 9%; width: clamp(300px, 34vw, 460px); } .reserve .stars { right: 4%; top: 12%; width: clamp(280px, 30vw, 420px); } }
/* 漂う輪の中にも、同じ星を散らす。輪は画面の外へはみ出しているので、見えている側に寄せる。 */
.ring .stars.stars { inset: 34% 6% 6% 34%; width: auto; aspect-ratio: auto; z-index: 0; }
.ring.is-right .stars.stars { inset: 6% 34% 34% 6%; }
@keyframes floaty { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-16px) rotate(3deg); } }

/* ---------- ヘッダー ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 2rem; padding: .9rem var(--pad); color: #fff; transition: background .4s, color .4s, box-shadow .4s; }
.top.is-solid { background: var(--ink); }
.logo { font-family: var(--latin); font-weight: 300; font-size: 18px; letter-spacing: .14em; text-decoration: none; white-space: nowrap; }
.logo b { font-weight: 300; font-size: 1.35em; letter-spacing: .18em; }
.nav { display: none; margin-left: auto; gap: 1.8rem; font-size: 16px; }
.nav a { text-decoration: none; position: relative; padding: .3rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pop-l); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.nav a:hover::after { transform: scaleX(1); }
.top .btn { display: none; }
@media (min-width: 900px) { .nav { display: flex; } .top .btn { display: inline-flex; } }

/* ---------- ボタン（カーソルを載せると、白が左から走る） ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: .6rem 2.2rem; background: var(--pop); color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: .1em; border: 1px solid var(--pop); }
.btn:hover, .btn:focus-visible { color: var(--ink); }
.btn::before { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn span { position: relative; }
.btn.is-line { background: transparent; color: #fff; border-color: #fff; }
.btn.is-line:hover, .btn.is-line:focus-visible { color: var(--ink); }
.btn.is-small { min-height: 44px; padding: .3rem 1.3rem; }
.btns { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- いちばん上の写真 ---------- */
.hero { position: relative; height: 100svh; min-height: 600px; max-height: 900px; background: var(--ink); color: #fff; overflow: hidden; }
.panels, .panel { position: absolute; inset: 0; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0; animation: glam 18s infinite; }
.panel img:nth-child(2) { animation-delay: 6s; }
.panel img:nth-child(3) { animation-delay: 12s; }
@keyframes glam { 0% { opacity: 0; transform: scale(1.02); } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,23,21,.94) 0%, rgba(26,23,21,.82) 45%, rgba(26,23,21,.6) 75%, rgba(26,23,21,.5) 100%); }
.hero__text { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: clamp(5.5rem, 12vh, 7rem); max-width: 56rem; animation: up 1.2s .2s both; }
.hero__label { display: flex; align-items: center; gap: .9rem; font-family: var(--latin); font-weight: 400; font-size: 13px; letter-spacing: .28em; }
.hero__label span { width: 2.6rem; height: 3px; background: var(--pop-l); transform-origin: left; animation: grow 1s .9s both; }
.hero h1 { margin-top: 1rem; font-size: clamp(24px, 3.6vw, 42px); line-height: 1.6; letter-spacing: .06em; }
.hero__lead { margin-top: .9rem; }
.hero .btns { margin-top: 1.6rem; }
.hero__scroll { position: absolute; z-index: 2; right: var(--pad); bottom: 1.4rem; font-family: var(--latin); font-size: 12px; letter-spacing: .3em; writing-mode: vertical-rl; padding-bottom: 3.4rem; display: none; }
.hero__scroll::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 3rem; background: var(--pop-l); transform-origin: top; animation: drip 2.2s infinite; }
@media (min-width: 900px) { .hero__scroll { display: block; } }
@keyframes drip { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* くるくる回る予約の丸 */
.badge { position: absolute; z-index: 3; right: var(--pad); top: 5.2rem; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: var(--pop); color: #fff; text-decoration: none; transition: transform .4s; }
.badge:hover { transform: scale(1.08); }
.badge svg { position: absolute; inset: 0; animation: spin 16s linear infinite; }
.badge text { font-family: var(--latin); font-size: 10.5px; letter-spacing: .21em; fill: currentColor; }
.badge b { font-size: 17px; letter-spacing: .12em; }
@media (min-width: 900px) { .badge { top: auto; bottom: 5.5rem; right: 6rem; width: 148px; height: 148px; } .badge b { font-size: 20px; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* 横に流れ続ける英字の帯 */
.tape { display: flex; overflow: hidden; white-space: nowrap; font-family: var(--latin); font-weight: 200; font-size: clamp(30px, 5.4vw, 64px); line-height: 1; letter-spacing: .12em; padding: .42em 0; }
.tape > div { flex: none; display: flex; animation: flow 38s linear infinite; }
.tape span { display: inline-flex; align-items: center; padding-right: .6em; }
.tape i { display: inline-block; width: .5em; height: .5em; margin: 0 .5em; background: var(--star); clip-path: var(--star-shape); animation: spin 9s linear infinite; }
.tape.is-pop { background: var(--pop); color: #fff; }
.tape.is-line { background: var(--ink); color: transparent; -webkit-text-stroke: 1px var(--pop-l); border-bottom: 1px solid var(--line-d); }
.tape.is-line > div { animation-direction: reverse; }
.tape.is-line i { background: var(--star); }
/* 斜めにかかる金色のリボン（上の欄の色と下の欄の色を、半分ずつ敷いてまたぐ） */
.ribbon { position: relative; height: clamp(104px, 13vw, 150px); overflow: hidden; background: linear-gradient(var(--ink) 50%, var(--surface) 50%); }
.ribbon.is-line { background: linear-gradient(var(--base) 50%, var(--ink) 50%); }
.ribbon .tape { position: absolute; left: -4%; right: -4%; top: 50%; transform: translateY(-50%) rotate(-2.2deg); background: var(--star); color: var(--ink); font-weight: 600; font-size: clamp(16px, 2.4vw, 26px); letter-spacing: .28em; padding: .85em 0; }
.ribbon.is-line .tape { transform: translateY(-50%) rotate(2.2deg); }
.ribbon.is-line .tape > div { animation-direction: reverse; }
.ribbon .tape span { padding-right: 0; }
.ribbon .tape i { width: .9em; height: .9em; margin: 0 1.5em; background: var(--ink); }
@keyframes flow { to { transform: translateX(-100%); } }

/* ---------- 欄の共通 ---------- */
.sec { position: relative; padding: clamp(4rem, 9vw, 7rem) 0; overflow: hidden; }
.sec.is-cream { background: var(--base); }
.sec.is-white { background: var(--surface); }
.sec.is-tint { background: var(--tint); }
.sec.is-dark { background: var(--ink); color: var(--base); }
.inner { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 0 var(--pad); }
.inner.is-narrow { max-width: 820px; }
.head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.en { font-family: var(--latin); font-weight: 200; font-size: clamp(46px, 10.5vw, 112px); line-height: 1.05; letter-spacing: .1em; margin-left: -.04em; overflow: hidden; }
.en span { display: inline-block; }
.js .reveal .en span { transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 45ms); }
.js .reveal.is-in .en span { transform: none; }
.head__row { display: grid; gap: .8rem 3rem; margin-top: 1.1rem; }
.head h2 { display: flex; align-items: center; gap: .9rem; font-size: clamp(19px, 2.2vw, 22px); }
.head h2::before { content: ""; flex: none; width: 2.6rem; height: 3px; background: var(--pop); transform-origin: left; }
.js .reveal .head__row h2::before { transform: scaleX(0); transition: transform .8s .5s; }
.js .reveal.is-in .head__row h2::before { transform: scaleX(1); }
.head__lead { color: var(--muted); }
.is-dark .head__lead { color: inherit; opacity: .9; }
@media (min-width: 900px) { .head__row { grid-template-columns: 1fr minmax(0, 28rem); align-items: start; } }
.en-s { font-family: var(--latin); font-weight: 400; font-size: 13px; letter-spacing: .26em; }
.num { font-family: var(--latin); font-weight: 200; font-size: clamp(40px, 6vw, 60px); line-height: 1; letter-spacing: .06em; }
.is-dark .num { color: var(--pop-l); }
.is-dark .head h2::before { background: var(--pop-l); }
.lead { font-size: clamp(23px, 3.3vw, 36px); font-weight: 700; letter-spacing: .1em; line-height: 1.7; }
.closing { margin-top: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.more { margin-top: 2rem; text-align: right; }
.more.is-left { text-align: left; margin-top: 1rem; }
.more a { display: inline-flex; align-items: center; min-height: 44px; gap: .9rem; text-decoration: none; font-weight: 700; background: linear-gradient(var(--pop), var(--pop)) no-repeat left bottom / 100% 3px; transition: background-size .35s; }
.more a:hover { background-size: 100% 100%; color: #fff; }
.more a::after { content: "→"; transition: transform .3s; }
.more a:hover::after { transform: translateX(6px); }

/* ゆっくり漂う輪（濃い欄の飾り） */
.ring { position: absolute; left: -9rem; top: -7rem; width: 30rem; height: 30rem; border: 1px solid rgba(61,190,134,.45); border-radius: 50%; animation: drift 18s ease-in-out infinite alternate; }
.ring::after { content: ""; position: absolute; inset: 4.5rem; border: 1px solid rgba(61,190,134,.22); border-radius: 50%; }
.ring::before { content: ""; position: absolute; right: 12%; bottom: 9%; width: 22px; height: 22px; background: var(--star); clip-path: var(--star-shape); animation: twinkle 4s ease-in-out infinite; }
.ring.is-right::before { right: auto; left: 16%; bottom: auto; top: 8%; }
.ring.is-right { left: auto; right: -11rem; top: auto; bottom: -9rem; animation-duration: 22s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(5rem, 3.5rem) scale(1.12); } }

/* ---------- 動き（画面に入ったら出る） ---------- */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js :is(.pcards, .services, .steps, .reasons, .minis) > .reveal:nth-child(2) { transition-delay: .12s; }
.js :is(.pcards, .services, .steps, .minis) > .reveal:nth-child(3) { transition-delay: .24s; }
.js .steps > .reveal:nth-child(4) { transition-delay: .36s; }
.js .steps > .reveal:nth-child(5) { transition-delay: .48s; }
.reveal-photo { overflow: hidden; }
.js .reveal-photo img { transform: scale(1.16); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.js .reveal-photo.is-in img { transform: none; }

/* ---------- 想い（写真の後ろから黄色い板がずれて出る） ---------- */
.concept { display: grid; gap: 3rem; align-items: center; }
.framed { aspect-ratio: 4 / 3; margin-right: 18px; box-shadow: 0 0 0 var(--pop); transition: box-shadow 1s .4s cubic-bezier(.2,.7,.2,1); }
.framed.is-in, html:not(.js) .framed { box-shadow: 18px 18px 0 var(--pop); }
.framed img { width: 100%; height: 100%; object-fit: cover; }
.concept .head { margin-bottom: 1.6rem; }
.concept .en { font-size: clamp(44px, 7.4vw, 84px); }
.concept .head__row { grid-template-columns: 1fr; }
.concept .lead { margin-bottom: 1rem; }
.minis { margin-top: 1.6rem; border-top: 1px solid var(--rule); }
.minis li { display: flex; align-items: baseline; gap: 1.2rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); font-weight: 700; }
.minis b { font-family: var(--latin); font-weight: 300; font-size: 22px; letter-spacing: .08em; }
@media (min-width: 900px) { .concept { grid-template-columns: 1fr 1fr; gap: 5rem; } .framed { aspect-ratio: 4 / 5; } }

/* ---------- お悩みから選ぶ（写真つきカード） ---------- */
.pcards { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .pcards { grid-template-columns: repeat(3, 1fr); } }
.pcard { background: #262220; padding-bottom: 1.4rem; transition: transform .45s, background .45s; }
.pcard:hover { transform: translateY(-8px); background: #2E2926; }
.pcard figure { overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.pcard:hover img { transform: scale(1.07); }
.pcard > p, .pcard > h3 { padding: 0 1.3rem; }
.pcard__no { margin-top: 1.2rem; font-family: var(--latin); font-size: 13px; letter-spacing: .2em; color: var(--pop-l); }
.pcard h3 { font-size: 21px; }
.pcard > p.pcard__menu { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: 1.1rem 1.3rem 0; padding: 1rem 0 0; border-top: 1px solid var(--line-d); }
.pcard__menu span { background: var(--pop); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.5; padding: 0 .6rem; }
.pcard__menu b { margin-left: auto; font-family: var(--latin); font-weight: 300; font-size: 26px; letter-spacing: .04em; }

/* ---------- 理由 ---------- */
.reasons { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.reasons li { padding: 2rem 0; border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: 5rem 1fr; column-gap: 1rem; }
.reasons .num { grid-row: span 2; }
.reasons h3 { font-size: 22px; }
@media (min-width: 760px) { .reasons { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.conclusion { margin-top: 2.5rem; }

/* ---------- 横に流れる帯（施術事例・スタッフ） ---------- */
.marquee { display: flex; width: 100%; overflow: hidden; }
.track { display: flex; flex: none; gap: 1.5rem; padding-right: 1.5rem; animation: flow 60s linear infinite; }
.marquee.is-slow .track { animation-duration: 80s; }
.marquee:hover .track, .marquee:focus .track { animation-play-state: paused; }
.case { flex: none; width: clamp(230px, 24vw, 320px); }
.case figure { overflow: hidden; aspect-ratio: 3 / 4; }
.case img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.case:hover img { transform: scale(1.06); }
.case__no { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; font-family: var(--latin); font-size: 13px; letter-spacing: .2em; }
.case__no b { background: var(--pop); color: #fff; padding: 0 .6rem; font-weight: 600; }
.case h3 { font-size: 17px; margin-top: .3rem; line-height: 1.7; }
.member { flex: none; width: clamp(150px, 15vw, 200px); text-align: center; }
.member img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 18%; border-radius: 50%; outline: 3px solid transparent; outline-offset: 5px; transition: outline-color .4s; }
.member:hover img { outline-color: var(--pop); }
.member h3 { font-size: 18px; margin-top: 1rem; }
.member p { color: var(--muted); font-size: 16px; }

/* ---------- 料金 ---------- */
.picks { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-d); }
.pick { padding: 1.6rem 1rem 1.6rem 0; border-bottom: 1px solid var(--line-d); }
.pick__en { font-family: var(--latin); font-size: 13px; letter-spacing: .24em; color: var(--pop-l); }
.pick h3 { font-size: 17px; }
.pick__price { font-family: var(--latin); font-weight: 200; font-size: clamp(34px, 5vw, 54px); line-height: 1.2; letter-spacing: .04em; white-space: nowrap; }
.pick__price span { font-size: .6em; margin-right: .1em; }
.pick__price small { font-family: var(--gothic); font-weight: 500; font-size: 16px; margin-left: .4em; letter-spacing: .08em; }
@media (min-width: 900px) { .picks { grid-template-columns: repeat(4, 1fr); } .pick { padding-left: 1.6rem; border-left: 1px solid var(--line-d); } .pick:first-child { padding-left: 0; border-left: 0; } }
.menu-list { margin-top: 3rem; display: grid; gap: 2.5rem 4rem; }
@media (min-width: 900px) { .menu-list { grid-template-columns: 1fr 1fr; } }
.menu-group h3 { display: flex; align-items: baseline; gap: 1rem; font-size: 18px; padding-bottom: .7rem; border-bottom: 1px solid var(--pop-l); }
.menu-group .en-s { color: var(--pop-l); }
.menu-group li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; padding: .85rem 0; border-bottom: 1px solid rgba(246,244,239,.16); line-height: 1.7; }
.row__name { flex: 1 1 14rem; }
.row__price { margin-left: auto; font-size: 19px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.row__note { flex-basis: 100%; font-size: 16px; opacity: .85; }
.menu-note { margin-top: 2rem; }
/* スマホは件数が多いので、箱の中で送る（料金は 1 件も減らさない）。 */
@media (max-width: 899px) { .menu-list { max-height: 30rem; overflow-y: auto; overscroll-behavior-y: contain; padding: 1.2rem 1rem; border: 1px solid var(--line-d); scrollbar-width: thin; } }

/* ---------- こだわりの施術 ---------- */
.services { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .services { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.service { background: var(--surface); padding-bottom: 1.6rem; transition: transform .45s, box-shadow .45s; }
.service:hover { transform: translateY(-8px); box-shadow: 10px 10px 0 var(--pop); }
.service figure { aspect-ratio: 4 / 3; }
.service img { width: 100%; height: 100%; object-fit: cover; }
.service > p, .service > h3 { padding: 0 1.4rem; }
.service__en { margin-top: 1.3rem; font-family: var(--latin); font-weight: 200; font-size: 30px; letter-spacing: .14em; line-height: 1.3; }
.service h3 { font-size: 19px; margin: .5rem 0 .6rem; }

/* スマホでは、カードを縦に積まずに横へ送る（縦に積むと 2 画面を超えるため）。 */
@media (max-width: 759px) {
	.pcards, .services { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 1rem; scroll-padding-left: var(--pad); scrollbar-width: thin; }
	.pcard, .service { flex: none; width: 80%; scroll-snap-align: start; }
}

/* ---------- 流れ ---------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.steps li { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 5rem 1fr; column-gap: 1rem; }
.steps .num { grid-row: span 2; }
.steps h3 { font-size: 20px; }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(5, 1fr); border-top: 0; } .steps li { display: block; padding: 0 1.4rem; border-bottom: 0; border-left: 1px solid var(--rule); } .steps li:first-child { padding-left: 0; border-left: 0; } .steps h3 { margin-top: 1rem; } .steps .num { display: inline-block; background: linear-gradient(transparent 62%, var(--soft) 62%); padding-right: .1em; } }

/* ---------- 店内・アクセス ---------- */
.salon { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.salon figure { aspect-ratio: 4 / 3; }
.salon .is-big { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.salon img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .salon { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .salon .is-big { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; } }
.info { margin-top: 2.5rem; border-top: 1px solid var(--ink); }
.info > div { display: grid; gap: .2rem 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
.info dt { font-weight: 700; letter-spacing: .12em; }
.info span { color: var(--muted); }
.maplink { display: inline-block; margin-top: .5rem; font-weight: 700; }
@media (min-width: 760px) { .info > div { grid-template-columns: 9rem 1fr; } }

/* ---------- よくあるご質問 ---------- */
.qa { border-bottom: 1px solid var(--rule); }
.qa:first-child { border-top: 1px solid var(--ink); }
.qa summary { display: flex; gap: 1.1rem; align-items: baseline; padding: 1.3rem 2.6rem 1.3rem 0; cursor: pointer; list-style: none; position: relative; line-height: 1.7; font-weight: 700; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--latin); font-weight: 200; font-size: 30px; transition: transform .3s; }
.qa[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa__q { font-family: var(--latin); font-weight: 300; font-size: 24px; background: linear-gradient(transparent 60%, var(--soft) 60%); padding: 0 .15em; }
.qa p { padding: 0 0 1.5rem 2.4rem; color: var(--muted); }

/* ---------- コラム（固定ページの一覧） ---------- */
.col-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 2rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.col-head .head { margin-bottom: 0; }
.col-head .more { margin: 1rem 0 0; font-family: var(--latin); letter-spacing: .22em; }
.cols { border-top: 1px solid var(--ink); }
.cols li { border-bottom: 1px solid var(--rule); }
.cols a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem 1.2rem; padding: 1.4rem 2.6rem 1.4rem 0; text-decoration: none; position: relative; transition: background .35s, padding .35s; }
.cols a::after { content: "→"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); transition: transform .3s; }
.cols a:hover { background: var(--tint); padding-left: 1rem; }
.cols a:hover::after { transform: translate(6px, -50%); }
.cols time { font-family: var(--latin); font-size: 16px; letter-spacing: .14em; color: var(--muted); }
.col__tag { justify-self: start; border: 1px solid var(--ink); font-size: 16px; line-height: 1.4; letter-spacing: .14em; padding: .15em .9em; }
.col__title { grid-column: 1 / -1; font-weight: 700; line-height: 1.7; }
@media (min-width: 760px) { .cols a { grid-template-columns: 7.5rem auto 1fr; gap: 0 2rem; } .col__title { grid-column: auto; } }
.ribbon.is-from-white { background: linear-gradient(var(--surface) 50%, var(--ink) 50%); }

/* ---------- ご予約・フッター ---------- */
.reserve .lead { margin-bottom: 1rem; }
.reserve p:not(.en) { max-width: 40rem; }
.reserve .btns { margin-top: 2rem; }
.foot { background: var(--ink); color: var(--base); padding: 3rem var(--pad) 7rem; border-top: 1px solid var(--line-d); text-align: center; }
.foot__note { margin-top: 1.5rem; opacity: .8; font-size: 16px; }
.bar { position: fixed; z-index: 30; inset: auto 0 0 0; display: grid; grid-template-columns: 1.4fr 1fr; background: var(--ink); border-top: 1px solid var(--line-d); }
.bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: .1em; }
.bar a:first-child { background: var(--pop); color: #fff; }
@media (min-width: 900px) { .bar { display: none; } .foot { padding-bottom: 3rem; } }

/* ---------- トップに流す LOOKBOOK（写真のすぐ下・黒の続き） ---------- */
.lookstrip { background: var(--ink); color: var(--base); padding: clamp(2rem, 4vw, 3rem) 0 1.2rem; overflow: hidden; }
.lookstrip__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.6rem; margin-bottom: 1.4rem; }
.lookstrip__head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; line-height: 1.2; }
.lookstrip .lb-en { font-size: clamp(32px, 4.6vw, 52px); }
.lookstrip__head .more { margin: 0 0 0 auto; }
.lookstrip .more a { background-image: linear-gradient(var(--pop-l), var(--pop-l)); }
.lookstrip .more a:hover { color: var(--ink); }
.lookstrip .track { gap: 14px; padding-right: 14px; animation-duration: 55s; }
.look { flex: none; width: clamp(150px, 15.5vw, 210px); }
.look a { display: block; text-decoration: none; }
.look figure { overflow: hidden; aspect-ratio: 3 / 4; background: #262220; }
.look img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .8s; }
.look:hover img { transform: scale(1.06); }
.look p { margin-top: .6rem; line-height: 1.5; }
.look__en { font-family: var(--latin); font-size: 13px; letter-spacing: .2em; }
.look__ja { font-size: 16px; letter-spacing: .04em; }

/* ---------- LOOKBOOK のページ ---------- */
.top.is-fixed-solid { background: var(--ink); }
.phero { display: grid; background: var(--ink); color: var(--base); padding-top: 4.5rem; }
.phero__text { padding: clamp(2.5rem, 6vw, 5rem) var(--pad); align-self: center; }
.phero .head { margin-bottom: 1rem; }
.phero .head__row { grid-template-columns: 1fr; }
.phero .head h2 { white-space: nowrap; }
.phero__photo { min-height: 46vw; }
.phero__photo img { width: 100%; height: 100%; object-fit: cover; }
.crumb { font-family: var(--latin); font-size: 13px; letter-spacing: .22em; opacity: .85; }
.crumb a { text-decoration: none; border-bottom: 1px solid currentColor; }
@media (min-width: 900px) { .phero { grid-template-columns: 1.1fr 1fr; min-height: 430px; } .phero__photo { min-height: 0; } }
.lb-head { display: grid; gap: .6rem 3rem; align-items: end; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); padding-bottom: 1.2rem; border-bottom: 1px solid var(--ink); }
.lb-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; line-height: 1.2; }
.lb-en { font-family: var(--latin); font-weight: 200; font-size: clamp(38px, 6.4vw, 68px); letter-spacing: .1em; }
.lb-ja { font-size: 16px; letter-spacing: .1em; }
.lb-head p { color: var(--muted); }
@media (min-width: 900px) { .lb-head { grid-template-columns: auto minmax(0, 30rem); justify-content: space-between; } }
.grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem .9rem; }
@media (min-width: 900px) { .grid4 { grid-template-columns: repeat(4, 1fr); gap: 2.2rem 14px; } }
.tile figure { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--base); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.tile:hover img { transform: scale(1.06); }
.tile figure b { position: absolute; left: 0; top: 0; background: var(--pop); color: #fff; font-family: var(--latin); font-size: 13px; font-weight: 600; letter-spacing: .2em; line-height: 1; padding: .55em .8em; }
.tile__en { margin-top: .8rem; font-family: var(--latin); font-size: 13px; letter-spacing: .22em; }
.tile h3 { font-size: 16px; line-height: 1.7; margin-top: .1rem; }
.tile[hidden] { display: none; }
.tile.is-empty figure { display: grid; place-items: center; border: 1px dashed #9aa39e; background: repeating-linear-gradient(135deg, #f4f2ed 0 14px, #fff 14px 28px); color: var(--muted); text-align: center; font-size: 16px; line-height: 1.6; }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.8rem; }
.tab { min-height: 44px; padding: 0 1.3rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--latin); font-size: 14px; font-weight: 600; letter-spacing: .2em; cursor: pointer; transition: background .3s, color .3s; }
.tab:hover { background: var(--soft); }
.tab.is-on { background: var(--pop); border-color: var(--pop); color: #fff; }
.count { margin-left: auto; color: var(--muted); }
.count b { font-family: var(--latin); font-weight: 300; font-size: 26px; color: var(--ink); margin-right: .2em; }
.ribbon.is-white { background: linear-gradient(var(--surface) 50%, var(--base) 50%); }

/* 動きを減らす設定の人には、動かさない。 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.panel img, .track, .tape > div, .tape i, .star, .stars, .stars i, .ring::before, .badge svg, .ring, .hero__text, .hero__label span, .hero__scroll::after { animation: none; }
	.panel img:first-child { opacity: 1; }
	.marquee { overflow-x: auto; }
	.marquee .track[aria-hidden] { display: none; }
	.js .reveal, .js .reveal-photo img, .js .reveal .en span, .js .reveal .head__row h2::before { opacity: 1; transform: none; transition: none; }
	.js .reveal mark { background-size: 100% 100%; transition: none; }
}

/* ---------- WordPress に入れたときの調整 ---------- */
/* ログイン中は、管理バーの高さぶん下げる。 */
.admin-bar .top { top: 32px; }
@media (max-width: 782px) { .admin-bar .top { top: 46px; } }
/* カードをまるごとリンクにしたぶんの指定。 */
.tile a, .case a, .member a { display: block; color: inherit; text-decoration: none; }
.pcard__menu a { color: inherit; text-underline-offset: .25em; }
.is-flush .marquee a:focus-visible, .tile a:focus-visible { outline: 3px solid var(--pop-l); outline-offset: 3px; }

/* ---------- 下のページ（中身は Salon Core のブロックと、編集画面の文章） ---------- */
/* ブロックはテーマの色の名前で色を引くので、その名前に新しい色を当てる。 */
:root {
	--wp--preset--color--base: var(--base); --wp--preset--color--surface: var(--surface); --wp--preset--color--contrast: var(--ink);
	--wp--preset--color--muted: var(--muted); --wp--preset--color--accent: var(--pop); --wp--preset--color--accent-strong: var(--pop);
	--wp--preset--color--border: #8a938e; --wp--preset--color--rule: var(--rule); --sf-season: var(--star);
	--wp--preset--font-size--small: 16px; --wp--preset--font-size--medium: 17px; --wp--preset--font-size--large: 20px; --wp--preset--font-size--x-large: 26px;
	--wp--preset--spacing--20: .5rem; --wp--preset--spacing--30: 1rem; --wp--preset--spacing--40: 1.5rem; --wp--preset--spacing--50: 2.5rem; --wp--preset--spacing--60: 4rem;
	--wp--preset--font-family--gothic: var(--gothic); --wp--preset--font-family--mincho: var(--gothic);
}
.phero.is-plain { grid-template-columns: 1fr; min-height: 0; }
.phero.is-plain .phero__text { max-width: 1160px; width: 100%; margin: 0 auto; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.phero.is-plain .head h1 { white-space: normal; font-size: clamp(20px, 2.6vw, 26px); }
.prose > * + * { margin-top: 1.4rem; }
.prose h2 { margin-top: 3.2rem; padding-bottom: .7rem; border-bottom: 1px solid var(--ink); font-size: clamp(21px, 2.6vw, 26px); }
.prose h2::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .6em; background: var(--star); clip-path: var(--star-shape); vertical-align: .12em; }
.prose h3 { margin-top: 2.2rem; font-size: 20px; }
.prose a { color: var(--pop); text-underline-offset: .25em; }
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .8rem; }
.prose li::marker { color: var(--pop); font-weight: 700; }
.prose img { max-width: 100%; height: auto; }
.prose figure { margin: 2rem 0; }
/* ブロックの中の一覧には、文章用の点や字下げを付けない。 */
.prose [class*="sf-"] ul, .prose ul[class*="sf-"], .prose [class*="wp-block-salon-core"] ul { list-style: none; padding-left: 0; }
.prose [class*="sf-"] li + li { margin-top: 0; }
.prose [class*="sf-"] a { color: inherit; }
.prose .wp-element-button, .prose [class*="sf-cta"] a, .prose [class*="sf-button"] { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: .6rem 2.2rem; background: var(--pop); color: #fff; border: 1px solid var(--pop); border-radius: 0; text-decoration: none; font-weight: 700; letter-spacing: .1em; }

/* ---------- スタッフの一覧（上に大きく 3 人、残りは格子。すき間 3px） ---------- */
.team { background: var(--ink); padding-bottom: 3px; }
.team-lead, .team-grid { display: grid; gap: 3px; grid-template-columns: 1fr 1fr; }
.team-grid { margin-top: 3px; }
.team-lead .sl:first-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .team-lead { grid-template-columns: 1.25fr 1fr 1fr; align-items: end; } .team-lead .sl:first-child { grid-column: auto; } .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(5, 1fr); } }
.sl { position: relative; overflow: hidden; background: #262220; }
.sl a { display: block; position: relative; aspect-ratio: 3 / 4; color: #fff; text-decoration: none; }
.sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.sl a:hover img { transform: scale(1.06); }
/* 暗がりは、下から上へ「なだらかに」薄くする（2026-10-10 オーナー指摘：段がついて不自然だった）。
   2 点だけで結ぶと、濃い板が途中で急に切れて見える。8 点でゆるい曲線にしてある。
   **文字の上端（札の下から 29%）で .68 を保つこと。**真っ白な服の上でも白い文字が 6:1 になる濃さ。 */
.sl a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,23,21,.92) 0%, rgba(26,23,21,.88) 12%, rgba(26,23,21,.78) 24%, rgba(26,23,21,.58) 34%, rgba(26,23,21,.34) 44%, rgba(26,23,21,.15) 54%, rgba(26,23,21,.05) 62%, rgba(26,23,21,0) 70%); }
.sl__meta { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 1rem 1rem 1.1rem; }
/* 英字は白。金色の文字は写真の上で 2.04:1 しか出なかったので、金色は星だけに使う。 */
.sl__en { display: flex; align-items: center; gap: .6em; font-family: var(--latin); font-size: 12px; font-weight: 600; letter-spacing: .22em; color: #fff; }
.sl__en::before { content: ""; flex: none; width: 1em; height: 1em; background: var(--star); clip-path: var(--star-shape); }
.sl.is-cta .sl__en::before { background: #fff; }
.sl h2, .sl h3 { font-size: 18px; letter-spacing: .1em; line-height: 1.5; margin-top: .2rem; }
.sl__role { font-size: 16px; line-height: 1.6; opacity: .92; }
.sl.is-lead .sl__meta { padding: 1.4rem 1.5rem 1.6rem; }
.sl.is-lead h2, .sl.is-lead h3 { font-size: clamp(20px, 2.4vw, 28px); }
.sl.is-lead .sl__en { font-size: 13px; }
.sl.is-cta { grid-column-end: -1; background: var(--pop); }
.sl.is-cta a { aspect-ratio: auto; height: 100%; min-height: 11rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem 1.5rem; }
.sl.is-cta a::after { content: none; }
.sl.is-cta .sl__en { color: #fff; }
.sl__cta { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: .1em; }
.sl.is-cta .more { margin-top: .6rem; }
.sl.is-cta .more span { display: inline-flex; align-items: center; gap: .9rem; min-height: 44px; font-weight: 700; border-bottom: 2px solid #fff; }
.sl.is-cta .more span::after { content: "→"; transition: transform .3s; }
.sl.is-cta a:hover .more span::after { transform: translateX(6px); }
.ribbon.is-from-ink { background: var(--ink); }
/* スマホの小さい札（幅 186px）は、文字が札の下 6 割を超える。暗がりを高くし、英字の飾りは出さない。
   そのままだと、名前の上端が写真の明るいところに出て 1.39:1 でした（2026-10-09 実測）。 */
@media (max-width: 759px) {
	/* 上の 3 人のうち 2 人目・3 人目も、スマホでは小さい札と同じ大きさになる。同じ扱いにする。 */
	.sl:not(.is-cta):not(.is-lead) a::after, .team-lead .sl:not(:first-child) a::after { background: linear-gradient(to top, rgba(26,23,21,.95) 0%, rgba(26,23,21,.9) 48%, rgba(26,23,21,0) 82%); }
	.team-lead .sl:not(:first-child) .sl__spec { display: none; }
	.sl:not(.is-lead) .sl__meta, .team-lead .sl:not(:first-child) .sl__meta { padding: .7rem .7rem .8rem; }
	.sl:not(.is-lead) :is(h2, h3), .team-lead .sl:not(:first-child) :is(h2, h3) { font-size: 17px; letter-spacing: .06em; }
}

/* 料金の一覧ページでは、箱の中で送らせず、全件をそのまま見せる（全部を見わたす場所なので）。 */
.post-type-archive-sc_menu .sf-menu-list__scroll { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }

/* トップのスタッフ：上は大きく 3 人、下は横に流す（archange-ah.com と同じ組み方）。 */
#staff .team { margin-top: 0; }
#staff .more { margin-top: 2rem; }
.team-flow { margin-top: 3px; }
.team-flow .track { gap: 3px; padding-right: 3px; animation-duration: 70s; }
.team-flow .sl { flex: none; width: clamp(150px, 16vw, 205px); }
/* 流す札は小さいので、どの幅でも暗がりを高くし、英字の飾りは出さない。 */
.team-flow .sl a::after { background: linear-gradient(to top, rgba(26,23,21,.95) 0%, rgba(26,23,21,.9) 48%, rgba(26,23,21,0) 82%); }
.team-flow .sl__meta { padding: .7rem .7rem .8rem; }
.team-flow .sl h3 { font-size: 17px; letter-spacing: .06em; }

/* 幅が狭いとき、上の 3 人は縦長の長方形で横に 3 人並べる（2026-10-09 オーナー指定）。
   1 枚が約 123px 幅になるので、暗がりを高くし、英字の飾りと得意分野は出さない。 */
@media (max-width: 759px) {
	.team-lead { grid-template-columns: repeat(3, 1fr); }
	.team-lead .sl:first-child { grid-column: auto; }
	.team-lead .sl a { aspect-ratio: 9 / 16; }
	.team-lead .sl a::after { background: linear-gradient(to top, rgba(26,23,21,.95) 0%, rgba(26,23,21,.9) 48%, rgba(26,23,21,0) 82%); }
	.team-lead .sl .sl__spec { display: none; }
	.team-lead .sl.is-lead .sl__meta { padding: .6rem .5rem .7rem; }
	.team-lead .sl.is-lead :is(h2, h3) { font-size: 16px; letter-spacing: .04em; }
	.team-lead .sl .sl__role { line-height: 1.45; }
}

/* 小さい札は「星＋英字の役職」で見せる（2026-10-09 オーナー指定：英語表記にして、星を消さない）。
   日本語の役職は 16px だと 2 行に折れるので、画面からは外し、読み上げにだけ残します。
   英字は飾りなので 11px（日本語ではないので 16px の決まりの外）。年数は入りきらないので出しません。 */
.team-flow .sl__en { font-size: 11px; letter-spacing: .1em; gap: .45em; }
.team-flow .sl__years { display: none; }
.team-flow .sl__role { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 759px) {
	.team-lead .sl .sl__en, .team-grid .sl:not(.is-cta) .sl__en { font-size: 11px; letter-spacing: .1em; gap: .45em; }
	.team-lead .sl__years, .team-grid .sl__years { display: none; }
	.team-lead .sl__role, .team-grid .sl__role { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 小さい札は、写真に暗がりをかけない（2026-10-09 オーナー指定：「この影は消してほしい」）。
   かわりに、名前の後ろだけを黒い帯にする。写真はそのままの明るさで見える。
   **暗がりを戻さないこと。**小さい札では暗がりが写真の半分以上を覆っていました。 */
.team .team-flow .sl.sl a::after { content: none; }
.team .team-flow .sl .sl__meta { background: var(--ink); }
@media (max-width: 759px) {
	.team .team-lead .sl.sl a::after, .team .team-grid .sl.sl:not(.is-cta) a::after { content: none; }
	.team .team-lead .sl .sl__meta, .team .team-grid .sl:not(.is-cta) .sl__meta { background: var(--ink); }
}

/* 帯は、うすく透かす（2026-10-09 オーナー指定）。後ろの写真が透けて見える。
   **濃さ .62 を下回らせないこと。**真っ白な服の上でも白い文字が 4.5:1 を保てる下限が .60 です。
   高さも詰める（上下の余白と行間）。 */
.team .team-flow .sl .sl__meta { background: rgba(26,23,21,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: .4rem .65rem .45rem; }
.team .team-flow .sl :is(h2, h3) { line-height: 1.35; margin-top: .05rem; }
@media (max-width: 759px) {
	.team .team-lead .sl .sl__meta, .team .team-grid .sl:not(.is-cta) .sl__meta { background: rgba(26,23,21,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: .4rem .5rem .45rem; }
	.team .team-lead .sl :is(h2, h3), .team .team-grid .sl:not(.is-cta) :is(h2, h3) { line-height: 1.35; margin-top: .05rem; }
}

/* ---------- 個別ページ（施術事例・スタッフ・メニュー） ---------- */
/* 中身は Salon Core のブロックのまま。並べ方と色だけを当てる。 */
.prose .sf-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.prose .sf-tags__item a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 16px; transition: background .3s, color .3s, border-color .3s; }
.prose .sf-tags__item a:hover { background: var(--pop); border-color: var(--pop); color: #fff; }
.prose.is-case .sf-case__single, .prose.is-case .sf-case-detail > figure { max-width: 34rem; margin: 0 auto; }
.prose.is-case .sf-case-detail img { width: 100%; height: auto; }
.prose.is-case .sf-tags { justify-content: center; }
.prose.is-staff .sf-staff-detail { display: grid; gap: 1.2rem 2.5rem; align-items: start; }
.prose.is-staff .sf-staff__photo { margin: 0; box-shadow: 14px 14px 0 var(--pop); margin-right: 14px; }
.prose.is-staff .sf-staff__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 18%; }
.prose.is-staff .sf-staff__role { font-size: 20px; font-weight: 700; letter-spacing: .08em; padding-bottom: .9rem; border-bottom: 1px solid var(--ink); }
.prose.is-staff .sf-staff-detail > p { margin: 0; }
@media (min-width: 760px) { .prose.is-staff .sf-staff-detail { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } .prose.is-staff .sf-staff__photo { grid-row: 1 / span 6; } }
.prose.is-menu .sf-facts { border-top: 1px solid var(--ink); margin: 0; }
.prose.is-menu .sf-facts__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.prose.is-menu .sf-facts__label { font-weight: 700; letter-spacing: .12em; }
.prose.is-menu .sf-facts__value { margin: 0; font-family: var(--latin); font-weight: 300; font-size: clamp(30px, 5vw, 44px); line-height: 1.2; letter-spacing: .04em; }
.cols.is-menu a { grid-template-columns: 1fr auto; }
.cols.is-menu .col__title { grid-column: auto; }
.col__price { font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.lb-head h2 .lb-ja { font-weight: 700; }

/* ---------- 下のページの見出しの帯に、スタイルの写真を 1 枚（2026-10-10 オーナー指定） ---------- */
/* 写真は右に置き、左の境目は黒へ溶かす（mask で、写真そのものを透かしていく）。
   **文字の列（左 54%）には写真をかけない。**かけると、白い文字が明るい写真の上に乗ります。 */
.phero.has-look { position: relative; overflow: hidden; }
.phero.has-look .phero__text { position: relative; z-index: 1; }
.phero__look { position: absolute; inset: 0 0 0 auto; width: 52%; margin: 0;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 34%, #000 62%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 34%, #000 62%); }
.phero__look img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.phero__look::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(to top, var(--ink), rgba(26,23,21,0)); }
@media (min-width: 900px) { .phero.has-look .head, .phero.has-look .crumb { max-width: 54%; } }
/* 幅が狭いと文字と写真が重なるので、写真を全体にうすく敷いて、左をさらに黒へ溶かす。 */
@media (max-width: 899px) {
	/* **濃さ .38 を上回らせないこと。**真っ白な写真が来ても白い文字が 4.5:1 を保てる上限です
	   （.5 のときは、いまの写真で 4.82 とぎりぎりでした）。 */
	.phero__look { width: 78%; opacity: .38;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 45%, #000 92%);
		mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 45%, #000 92%); }
}

/* 英字の見出しは、単語の途中で折らない。 */
.en .w { display: inline-block; white-space: nowrap; }
.js .reveal .en .w, .js .reveal.is-in .en .w { transform: none; transition: none; }

/* ---------- LOOKBOOK の写真が入ったあとの指定（2026-10-10） ---------- */
.tile.is-look img { object-position: center 20%; }
.tile__ja { margin-top: .8rem; font-size: 16px; font-weight: 700; line-height: 1.6; }
.looks .tile.is-more { display: none; }
.looks.is-open .tile.is-more { display: block; }
.looks .tile[hidden], .looks.is-open .tile[hidden] { display: none; }
.looks-more { margin-top: 2.2rem; text-align: center; }
.btn.is-dark { background: var(--ink); border-color: var(--ink); color: #fff; cursor: pointer; font-family: inherit; }
.btn.is-dark::before { background: var(--pop); }
.btn.is-dark:hover, .btn.is-dark:focus-visible { color: #fff; }
/* 帯の写真の添え書き。写真のすぐ下、右はしに小さく置く。 */
.phero__note { position: absolute; z-index: 1; right: var(--pad); bottom: .5rem; font-size: 16px; line-height: 1.4; color: var(--base); opacity: .9; text-shadow: 0 0 6px var(--ink), 0 0 2px var(--ink); }

/* ---------- 予約ボタン：緑の地に、白い文字と金の星・フチなし（2026-10-10 オーナー決定） ---------- */
/* 文字は白（5.76:1）。いちど白っぽい金（#F1E2CA・4.52:1）にしたが、白に戻した。
   **星と同じ金を文字に使わないこと**（緑の上で 2.42:1。読めない）。金は星だけ。
   電話のボタン（線だけ）と、黒いボタンには星を付けない。 */
.btn:not(.is-line):not(.is-dark) span { display: inline-flex; align-items: center; gap: .6em; }
.btn:not(.is-line):not(.is-dark) span::before { content: ""; flex: none; width: 1em; height: 1em; background: var(--star); clip-path: var(--star-shape); }
.bar a:first-child { gap: .6em; }
.bar a:first-child::before { content: ""; flex: none; width: 1em; height: 1em; background: var(--star); clip-path: var(--star-shape); }

/* ---------- 回る予約の丸：印章のように詰める（2026-10-10 オーナー指定） ---------- */
/* 外と内に金の細い輪、輪の文字のあいだに金の星、真ん中は「予約」。
   輪の文字は 1 周にぴったり合わせてある（つなぎ目で重ならない）。 */
.badge { box-shadow: 0 0 0 1px rgba(26,23,21,.35), 0 6px 18px rgba(26,23,21,.35); }
.badge__line { fill: none; stroke: var(--star); stroke-width: .7; }
.badge text { font-size: 8.6px; font-weight: 600; letter-spacing: 0; fill: #fff; }
.badge__star { fill: var(--star); font-size: 7.4px; }
/* 真ん中は「予約」だけ。星は置かない（2026-10-10 オーナー指定）。 */
.badge b { line-height: 1.1; letter-spacing: .16em; text-indent: .16em; }
.badge:hover svg { animation-duration: 6s; }

/* ---------- トップの写真を LOOKBOOK に差し替え（2026-10-10 オーナー指定） ---------- */
/* いちばん上：縦長の写真なので、3 つの枠を横に並べる（スマホは 1 つ）。それぞれ 3 枚がゆっくり入れ替わる。
   始まりを少しずつずらして、3 枠が同時に切り替わらないようにする（マイナスの値＝最初から途中の状態で始まる）。 */
.hero .panels { display: grid; grid-template-columns: 1fr; gap: 2px; }
.hero .panel { position: relative; inset: auto; overflow: hidden; display: none; }
.hero .panel:first-child { display: block; }
@media (min-width: 760px) { .hero .panels { grid-template-columns: repeat(3, 1fr); } .hero .panel { display: block; } }
.hero .panel img { object-position: center 20%; }
.hero .panel:nth-child(1) img:nth-child(1) { animation-delay: -1s; }
.hero .panel:nth-child(1) img:nth-child(2) { animation-delay: 5s; }
.hero .panel:nth-child(1) img:nth-child(3) { animation-delay: 11s; }
.hero .panel:nth-child(2) img:nth-child(1) { animation-delay: -3s; }
.hero .panel:nth-child(2) img:nth-child(2) { animation-delay: 3s; }
.hero .panel:nth-child(2) img:nth-child(3) { animation-delay: 9s; }
.hero .panel:nth-child(3) img:nth-child(1) { animation-delay: -4.5s; }
.hero .panel:nth-child(3) img:nth-child(2) { animation-delay: 1.5s; }
.hero .panel:nth-child(3) img:nth-child(3) { animation-delay: 7.5s; }
.hero__note { position: absolute; z-index: 2; right: var(--pad); bottom: 4.6rem; font-size: 16px; line-height: 1.4; opacity: .9; text-shadow: 0 0 6px var(--ink); }
@media (min-width: 900px) { .hero__note { right: calc(var(--pad) + 2.6rem); bottom: 1.3rem; } }
/* 想い：縦長の写真をそのまま見せる。 */
.framed { position: relative; aspect-ratio: 4 / 5; }
.framed img { object-position: center 20%; }
.framed figcaption { position: absolute; right: 0; bottom: 0; padding: .1rem .7rem; background: rgba(26,23,21,.62); color: #fff; font-size: 16px; line-height: 1.6; }
/* お悩みのカード：縦長の写真なので、枠を正方形にして顔まわりを見せる。 */
.pcard figure { aspect-ratio: 1 / 1; }
.pcard img { object-position: center 18%; }
.pnote { margin-top: 1.2rem; text-align: right; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .hero .panel img:first-child { opacity: 1; } }

/* Hero photos are now faces (LOOKBOOK), so keep the badge and the scattered stars off the faces.
   PC: stars sit low on the right, just above the badge. Mobile: badge and stars move to the top-left corner. */
@media (min-width: 900px) { .hero .stars { top: auto; bottom: 9.5rem; right: 4%; width: 300px; } }
@media (max-width: 899px) {
	.hero .badge { left: var(--pad); right: auto; top: 4.6rem; width: 92px; height: 92px; }
	.hero .badge b { font-size: 16px; }
	.hero .stars { left: 0; right: auto; top: 3.4rem; width: 170px; scale: -1 1; }
}

/* ---------- LOOKBOOK の写真には、1 枚ごとに「イメージ」の札（2026-10-10 オーナー指定） ---------- */
/* 大きい写真：右下に「※イメージ」（黒を透かした板に白い文字・16px）。
   小さい札：右上に「IMAGE」（白い板に黒い文字）。左上は種類の札（SHORT など）が使っているため。
   **LOOKBOOK の写真を新しい場所に出すときは、必ずどちらかを付けること。** */
.imgtag { position: absolute; z-index: 2; right: 0; bottom: 0; margin: 0; padding: .1rem .75rem; background: rgba(26,23,21,.66); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; opacity: 1; text-shadow: none; }
/* いちばん上：3 つの枠それぞれの右下。文字やボタンのある左下・中央下とは重ならない高さに置く。 */
.hero__tags { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: 1fr; gap: 2px; pointer-events: none; }
.hero__tags .imgtag { position: relative; align-self: start; justify-self: end; right: auto; bottom: auto; margin-top: 76px; display: none; }
.hero__tags .imgtag:first-child { display: block; }
@media (min-width: 760px) { .hero__tags { grid-template-columns: repeat(3, 1fr); } .hero__tags .imgtag { display: block; justify-self: start; } }
/* お悩みのカード */
.pcard figure { position: relative; }
.pcard figure::after { content: "※イメージ"; position: absolute; right: 0; bottom: 0; padding: .1rem .75rem; background: rgba(26,23,21,.66); color: #fff; font-size: 16px; line-height: 1.6; letter-spacing: .06em; }
/* 下のページの見出しの帯 */
.phero__note.imgtag { right: 0; bottom: 0; }
/* 小さい札（LOOKBOOK の格子・トップで流れる写真） */
.look figure { position: relative; }
.tile.is-look figure::after, .look figure::after { content: "IMAGE"; position: absolute; top: 0; right: 0; padding: .5em .65em .5em .85em; background: #fff; color: var(--ink); font-family: var(--latin); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .2em; }

/* ---------- 「イメージ」の札を、目立ちにくくする（2026-10-10 オーナー指定） ---------- */
/* どの写真でも同じ、小さな英字の「IMAGE」にそろえる（大きい写真の「※イメージ」16px と、白い板をやめた）。
   **板の濃さ .6 を下回らせないこと。**真っ白な背景の上でも白い文字が 4.5:1 を保てる下限。
   これより薄くすると、明るい写真の上で札が読めなくなり、付けている意味がなくなる。 */
.imgtag, .pcard figure::after, .tile.is-look figure::after, .look figure::after {
	content: "IMAGE"; padding: .5em .6em .5em .78em; background: rgba(26,23,21,.6); color: #fff;
	font-family: var(--latin); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .18em; text-shadow: none; opacity: 1;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.framed figcaption.imgtag, .phero__note.imgtag { padding: .5em .6em .5em .78em; background: rgba(26,23,21,.6); color: #fff; font-family: var(--latin); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .18em; text-shadow: none; opacity: 1; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- トップページの写真には「IMAGE」の札を付けない（2026-10-10 オーナー指定） ---------- */
/* 1.0.2 で、いちばん上・想いの写真には札を戻した（オーナー指定。公開前に「イメージの表示を入れる」と決定）。
   お悩みのカードと流れる写真は、すぐそばに文章の添え書きがあるので、札はここで外したまま。
   **外したのはトップページだけ。**LOOKBOOK のページと、下のページの見出しの帯には付けたまま。
   文章の添え書き（「※イメージ写真です。」「※写真はイメージです。」）は、トップにも残してある。 */
.home .pcard figure::after, .home .look figure::after { content: none; }

/* ---------- Footer: 4 columns (shop / site map / menu / reserve) + thin bottom bar ---------- */
.foot { padding: clamp(3rem, 7vw, 5.5rem) 0 0; text-align: left; }
.foot__grid { max-width: 1160px; margin: 0 auto; padding: 0 var(--pad) clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 2.6rem 3rem; }
@media (min-width: 700px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .foot__grid { grid-template-columns: 1.25fr 1.35fr 1fr 1.05fr; } }
.foot .logo { font-size: 20px; margin-bottom: 1.2rem; }
.foot .logo a { text-decoration: none; }
.foot__shop p + p { margin-top: .5rem; }
.foot__areas { opacity: .85; }
.foot__head { font-family: var(--latin); font-size: 14px; font-weight: 600; letter-spacing: .28em; color: var(--star); margin-bottom: .9rem; display: flex; align-items: center; gap: .7em; }
.foot__head::before { content: ""; flex: none; width: .9em; height: .9em; background: var(--star); clip-path: var(--star-shape); }
.foot__links a { display: flex; align-items: center; min-height: 44px; text-decoration: none; letter-spacing: .08em; background: linear-gradient(var(--pop-l), var(--pop-l)) no-repeat left calc(100% - 8px) / 0 1px; transition: background-size .35s, color .3s; }
.foot__links a:hover, .foot__links a:focus-visible { background-size: 100% 1px; color: var(--pop-l); }
.foot__links.is-two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.foot__links .is-all a { color: var(--pop-l); }
.foot__links .is-all a::after { content: "→"; margin-left: .7em; transition: transform .3s; }
.foot__links .is-all a:hover::after { transform: translateX(5px); }
.foot__reserve .btn { display: flex; width: 100%; margin-top: .8rem; padding-inline: 1rem; }
.foot__reserve .foot__head + .btn { margin-top: .3rem; }
.foot__bottom { max-width: 1160px; margin: 0 auto; padding: 1.4rem var(--pad) 6.2rem; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; font-family: var(--latin); font-size: 14px; letter-spacing: .16em; }
.foot__bottom a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot__bottom p { display: flex; align-items: center; gap: .6em; min-height: 44px; }
@media (min-width: 900px) { .foot__bottom { padding-bottom: 1.4rem; } }
/* Footer fixes after measuring: logo tap height 27px -> 44px, phone number wrapped inside its button,
   long column-page titles wrapped to 3 lines in a half-width cell. */
.foot .logo a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1040px) { .foot__grid { grid-template-columns: 1.15fr 1.3fr 1fr 1.3fr; gap: 2.6rem 2.4rem; } }
.foot__reserve .btn { padding-inline: .6rem; letter-spacing: .06em; }
.foot__reserve .btn span { white-space: nowrap; }
.foot__links.is-two li.is-wide { grid-column: 1 / -1; }

/* ---------- Footer: fold SITE MAP / MENU on phones (2026-10-10 owner request) ---------- */
.foot__fold > summary { list-style: none; }
.foot__fold > summary::-webkit-details-marker { display: none; }
.foot__fold > summary .foot__head { margin-bottom: .9rem; }
/* Wide screens: always open, the heading is not a button. */
@media (min-width: 700px) { .foot__fold > summary { pointer-events: none; cursor: default; } }
/* Phones: the heading becomes a 52px-high row with a + mark; a thin line separates the rows. */
@media (max-width: 699px) {
	.foot__grid { gap: 0; }
	.foot__shop { padding-bottom: 1.8rem; }
	.foot__fold { border-top: 1px solid var(--line-d); }
	.foot__fold > summary { position: relative; display: flex; align-items: center; min-height: 52px; padding-right: 2.6rem; cursor: pointer; }
	.foot__fold > summary .foot__head { margin: 0; }
	.foot__fold > summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--latin); font-weight: 200; font-size: 28px; color: var(--base); transition: transform .3s; }
	.foot__fold[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
	.foot__fold[open] > .foot__links { padding-bottom: 1rem; }
	.foot__reserve { border-top: 1px solid var(--line-d); padding-top: 1.4rem; }
}

/* ---------- Top photos: show them clearly (2026-10-10 owner request) ---------- */
/* Before: one dark veil over the whole hero (50% at the top, 94% at the bottom) - faces looked dim.
   Now: no veil over the upper part. Darkness only where the text sits (lower part), fading out smoothly above it.
   The header gets its own solid bar, because white menu text cannot sit on a bright photo.
   DO NOT lower the .62 stop: it is what keeps white text at 4.5:1 even on a pure white photo. */
.home .top { background: var(--ink); }
.hero::after { background: linear-gradient(to top, rgba(26,23,21,.9) 0%, rgba(26,23,21,.8) 40%, rgba(26,23,21,.62) 66%, rgba(26,23,21,.4) 72%, rgba(26,23,21,.18) 78%, rgba(26,23,21,0) 84%); }
@media (min-width: 760px) { .hero::after { background: linear-gradient(to top, rgba(26,23,21,.9) 0%, rgba(26,23,21,.8) 30%, rgba(26,23,21,.62) 54%, rgba(26,23,21,.4) 60%, rgba(26,23,21,.18) 66%, rgba(26,23,21,0) 72%); } }

/* ---------- Fixed pages (aujua / first-visit / access / faq): layout of the existing content ---------- */
/* The text itself is NOT changed - it is whatever is written in the editor. Only the look is set here.
   .sf-compare / .sf-plan used to be styled by the theme; the theme CSS is not loaded on these pages, so style them here. */
.prose > p:first-child, .prose > figure:first-child + p { font-size: 18px; }
.prose > figure.wp-block-image { margin: 0 0 2rem; }
.prose > figure.wp-block-image img { display: block; width: 100%; }
/* compare cards (aujua: light / standard / premium) */
.prose .sf-compare { display: grid; gap: 1rem; margin-top: 1.8rem; }
@media (min-width: 700px) { .prose .sf-compare { grid-template-columns: repeat(3, 1fr); } }
.prose .sf-plan { position: relative; margin: 0; padding: 1.6rem 1.3rem 1.5rem; border: 1px solid var(--rule); background: var(--surface); }
.prose .sf-plan > * + * { margin-top: .6rem; }
.prose .sf-plan h3 { margin: 0; font-size: 19px; }
.prose .sf-plan__figure { font-family: var(--latin); font-weight: 300; font-size: 30px; line-height: 1.2; letter-spacing: .04em; color: var(--pop); }
.prose .sf-plan.is-featured { border: 2px solid var(--pop); box-shadow: 8px 8px 0 var(--soft); }
.prose .sf-plan.is-featured::before { content: ""; position: absolute; top: .9rem; right: .9rem; width: 18px; height: 18px; background: var(--star); clip-path: var(--star-shape); }
/* numbered steps (first-visit: ol with a bold first line) */
.prose > ol.wp-block-list { list-style: none; padding: 0; counter-reset: step; border-top: 1px solid var(--ink); }
.prose > ol.wp-block-list > li { counter-increment: step; position: relative; margin: 0; padding: 1.3rem 0 1.3rem 4.4rem; border-bottom: 1px solid var(--rule); }
.prose > ol.wp-block-list > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1.1rem; font-family: var(--latin); font-weight: 200; font-size: 40px; line-height: 1; letter-spacing: .04em; color: var(--pop); }
.prose > ol.wp-block-list > li > strong:first-child { font-size: 19px; letter-spacing: .08em; }
/* plain bullet lists (aujua line-up): rows with a star instead of a dot */
.prose > ul.wp-block-list { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.prose > ul.wp-block-list > li { position: relative; margin: 0; padding: 1.1rem 0 1.1rem 2rem; border-bottom: 1px solid var(--rule); }
.prose > ul.wp-block-list > li::before { content: ""; position: absolute; left: .2rem; top: 1.55rem; width: 14px; height: 14px; background: var(--star); clip-path: var(--star-shape); }
/* booking button written in the page (Salon Core cta block): same look as the other booking buttons */
.prose .sf-cta { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.prose .sf-cta .wp-block-button { margin: 0; }
.prose .sf-cta .wp-element-button { gap: .6em; min-width: min(100%, 18rem); transition: background .3s, color .3s; }
.prose .sf-cta .wp-block-button:first-child .wp-element-button::before { content: ""; flex: none; width: 1em; height: 1em; background: var(--star); clip-path: var(--star-shape); }
.prose .sf-cta .wp-element-button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
/* store info table (access) */
.prose .sf-store__list { margin: 0; border-top: 1px solid var(--ink); }
.prose .sf-store__row { display: grid; gap: .2rem 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 700px) { .prose .sf-store__row { grid-template-columns: 9rem 1fr; } }
.prose .sf-store__label { font-weight: 700; letter-spacing: .12em; }
.prose .sf-store__value { margin: 0; }
.prose .sf-store__value a, .prose .sf-store__map a { color: var(--pop); }
.prose .sf-store__map { margin-top: 1.6rem; }
.prose .sf-store__map a { display: inline-flex; align-items: center; gap: .8rem; min-height: 56px; padding: .6rem 2rem; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: .1em; transition: background .3s, color .3s; }
.prose .sf-store__map a::after { content: "→"; }
.prose .sf-store__map a:hover { background: var(--ink); color: #fff; }
/* faq list (faq page) - same look as the top page */
.prose .sf-faq__item { border-bottom: 1px solid var(--rule); }
.prose .sf-faq__item:first-child { border-top: 1px solid var(--ink); }
.prose .sf-faq__question { position: relative; display: flex; align-items: baseline; gap: 1.1rem; padding: 1.3rem 2.6rem 1.3rem 0; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.7; }
.prose .sf-faq__question::-webkit-details-marker { display: none; }
.prose .sf-faq__question::before { content: "Q"; flex: none; font-family: var(--latin); font-weight: 300; font-size: 24px; background: linear-gradient(transparent 60%, var(--soft) 60%); padding: 0 .15em; }
.prose .sf-faq__question::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--latin); font-weight: 200; font-size: 30px; transition: transform .3s; }
.prose .sf-faq__item[open] .sf-faq__question::after { transform: translateY(-50%) rotate(45deg); }
.prose .sf-faq__answer { padding: 0 0 1.5rem 2.6rem; color: var(--muted); }
.prose .sf-faq__answer > * + * { margin-top: 1rem; }

/* ---------- Column pages: quote, page-specific Q&A (details block), list of child pages ---------- */
.prose blockquote.wp-block-quote { margin: 2rem 0; padding: 1.5rem 1.6rem 1.4rem 3.4rem; position: relative; background: var(--tint); border: 0; }
.prose blockquote.wp-block-quote::before { content: ""; position: absolute; left: 1.2rem; top: 1.7rem; width: 20px; height: 20px; background: var(--star); clip-path: var(--star-shape); }
.prose blockquote.wp-block-quote p { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.8; }
.prose blockquote.wp-block-quote cite { display: block; margin-top: .7rem; font-style: normal; color: var(--muted); }
.prose details.wp-block-details { margin: 0; border-bottom: 1px solid var(--rule); }
.prose h2 + details.wp-block-details { border-top: 1px solid var(--ink); margin-top: 1.4rem; }
.prose details.wp-block-details > summary { position: relative; display: flex; align-items: baseline; gap: 1.1rem; padding: 1.3rem 2.6rem 1.3rem 0; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.7; }
.prose details.wp-block-details > summary::-webkit-details-marker { display: none; }
.prose details.wp-block-details > summary::before { content: "Q"; flex: none; font-family: var(--latin); font-weight: 300; font-size: 24px; background: linear-gradient(transparent 60%, var(--soft) 60%); padding: 0 .15em; }
.prose details.wp-block-details > summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--latin); font-weight: 200; font-size: 30px; transition: transform .3s; }
.prose details.wp-block-details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.prose details.wp-block-details > p { margin: 0; padding: 0 0 1.5rem 2.6rem; color: var(--muted); }
.prose ul.wp-block-page-list { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.prose ul.wp-block-page-list li { margin: 0; border-bottom: 1px solid var(--rule); }
.prose ul.wp-block-page-list a { position: relative; display: flex; align-items: center; min-height: 64px; padding: .9rem 2.6rem .9rem 0; color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.7; transition: background .35s, padding .35s; }
.prose ul.wp-block-page-list a::after { content: "→"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); transition: transform .3s; }
.prose ul.wp-block-page-list a:hover { background: var(--tint); padding-left: 1rem; }
.prose ul.wp-block-page-list a:hover::after { transform: translate(6px, -50%); }
.prose > ul.wp-block-list a { display: inline-flex; align-items: center; min-height: 44px; }

/* Long single words in the big English heading (e.g. STRAIGHTENING = 13 letters) were cut off at the edge.
   One letter is about 0.74em wide (glyph + letter-spacing), so cap the font size by the space available.
   --n = number of letters in the longest word, set by head() in parts.php. */
.en { font-size: min(clamp(46px, 10.5vw, 112px), calc((100vw - 2 * var(--pad) - 1.2rem) / (var(--n, 6) * .74))); }
.concept .en { font-size: min(clamp(44px, 7.4vw, 84px), calc((100vw - 2 * var(--pad) - 1.2rem) / (var(--n, 6) * .74))); }
@media (min-width: 900px) {
	.phero.has-look .en { font-size: min(clamp(46px, 10.5vw, 112px), calc((min(100vw, 1160px) * .54 - var(--pad) - 1.6rem) / (var(--n, 6) * .74))); }
	.concept .en { font-size: min(clamp(44px, 7.4vw, 84px), calc((min(100vw, 1160px) * .5 - 6rem) / (var(--n, 6) * .74))); }
}
.prose blockquote.wp-block-quote cite { font-size: 16px; }

/* 2026-10-23 集客・求人の導線を追加 */
.pcard__cta { margin-top: 1rem; }
.menu-coupon { margin-top: 1.25rem; text-align: center; }
.group-note { margin-top: 1.5rem; font-size: 14px; color: var(--muted); }
.group-note a { color: var(--pop); }
.recruit-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; }
.recruit-points li { border: 1px solid var(--line-d); padding: 1.25rem .75rem; text-align: center; font-size: 14px; line-height: 1.6; }
.recruit-points b { display: block; margin-bottom: .25rem; color: var(--star); font-family: var(--latin); font-size: clamp(1.3rem, 3vw, 1.75rem); letter-spacing: .04em; }
.recruit-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
@media (max-width: 700px) { .recruit-points { grid-template-columns: repeat(2, 1fr); } .recruit-cta .btn { width: 100%; } }

/* 2026-10-23 採用ページ（.rc） */
.rc { --rc-gap: clamp(4rem, 9vw, 7rem); }
.rc img { width: 100%; height: 100%; object-fit: cover; }
.rc h2, .rc h3 { border: 0; padding: 0; margin: 0; }
.rc h2::before, .rc h3::before { content: none !important; }
.rc ul, .rc ol { padding: 0 !important; margin: 0; list-style: none; }
.rc li { border: 0 !important; padding: 0; margin: 0; }
.rc li::before { content: none !important; }
.rc-wide { width: 100vw; margin-left: calc(50% - 50vw); }
.rc-in { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad); }
.rc-en { font-family: var(--latin); font-size: 13px; font-weight: 700; letter-spacing: .3em; color: var(--pop); margin: 0 0 .75rem; }
.rc-h { font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: .08em; line-height: 1.5; margin-bottom: 2.5rem !important; }
.rc-sec { margin-top: var(--rc-gap); }
.rc-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.rc-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.rc-intro__photo { aspect-ratio: 4/5; overflow: hidden; box-shadow: 18px 18px 0 var(--pop); margin-right: 18px; }
.rc-catch { font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.55; letter-spacing: .08em; margin-bottom: 1.5rem !important; }
.rc-catch span { background: linear-gradient(transparent 62%, var(--soft) 62%); }
.rc-numbers { margin-top: var(--rc-gap); background: var(--ink); color: var(--base); padding: clamp(3rem, 7vw, 5rem) 0; }
.rc-numbers .rc-en { color: var(--pop-l); text-align: center; }
.rc-numbers ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); margin-top: 1.5rem; }
.rc-numbers li { background: var(--ink); padding: 2rem 1rem; text-align: center; }
.rc-numbers b { display: block; font-family: var(--latin); font-size: clamp(1.9rem, 4.5vw, 3rem); color: var(--star); line-height: 1.2; letter-spacing: .02em; }
.rc-numbers small { font-size: .45em; margin-left: .15em; color: var(--base); }
.rc-numbers span { display: block; margin-top: .5rem; font-size: 14px; }
.rc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.rc-cards figure { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 1rem; }
.rc-cards img { transition: transform .8s ease; }
.rc-cards article:hover img { transform: scale(1.06); }
.rc-no { font-family: var(--latin); color: var(--star); font-size: 1.6rem; line-height: 1; }
.rc-cards h3 { font-size: 1.1rem; margin: .5rem 0 .5rem !important; line-height: 1.6; }
.rc-cards p:last-child { font-size: 15px; color: var(--muted); }
.rc-team { margin-top: var(--rc-gap); background: var(--tint); padding: clamp(3rem, 7vw, 5rem) 0; overflow: hidden; }
.rc-team .rc-h { margin-bottom: 2rem !important; }
.rc-strip__track { display: flex; gap: 12px; width: max-content; animation: rc-slide 60s linear infinite; }
.rc-strip img { width: 180px; height: 240px; flex: none; }
@keyframes rc-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rc-strip__track { animation: none; } }
.rc-steps { display: grid; grid-template-columns: repeat(5, 1fr); }
.rc-steps li { padding: 1.5rem 1rem !important; border-top: 3px solid var(--pop) !important; }
.rc-steps li:nth-child(5) { border-top-color: var(--star) !important; }
.rc-steps span { font-family: var(--latin); font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.rc-steps h3 { font-size: 15px; margin: .4rem 0 !important; line-height: 1.5; }
.rc-steps b { font-family: var(--latin); font-size: 1.35rem; color: var(--pop); }
.rc-note { margin-top: 1.5rem; font-size: 14px; color: var(--muted); line-height: 1.9; }
.rc-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.rc-flow li { background: var(--base); padding: 1.25rem .75rem !important; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.5; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.rc-flow b { display: block; font-family: var(--latin); color: var(--pop); font-size: 1.1rem; }
.rc-entry { position: relative; margin-top: var(--rc-gap); min-height: 520px; display: grid; place-items: center; overflow: hidden; }
.rc-entry figure { position: absolute; inset: 0; margin: 0; }
.rc-entry figure::after { content: ""; position: absolute; inset: 0; background: rgba(26,23,21,.72); }
.rc-entry__box { position: relative; color: #fff; text-align: center; padding: 4rem var(--pad); max-width: 720px; }
.rc-entry .rc-en { color: var(--pop-l); }
.rc-entry h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 1rem !important; color: #fff; }
.rc-entry .rc-btns { justify-content: center; }
@media (max-width: 760px) {
  .rc-intro, .rc-cards { grid-template-columns: 1fr; }
  .rc-numbers ul { grid-template-columns: repeat(2, 1fr); }
  .rc-steps { grid-template-columns: 1fr; }
  .rc-steps li { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: .5rem; padding: 1rem .25rem !important; }
  .rc-flow { grid-template-columns: repeat(2, 1fr); }
  .rc-flow li { clip-path: none; }
  .rc-strip img { width: 130px; height: 175px; }
  .rc-btns .btn { width: 100%; }
}

.rc li, .rc li + li { margin: 0 !important; }
.rc .btn, .rc .btn span { color: #fff !important; text-decoration: none !important; }
.rc .btn:hover span, .rc .btn:focus-visible span { color: var(--ink) !important; }
.rc-intro__text .btn.is-line { border-color: var(--ink); }