/* 那覇セルフ脱毛 箱庭 — 静的HP土台 */
/* Google Fonts は各HTMLの で preconnect 付きで読み込み（@import より表示が速い） */
:root {
--bg: #f7f5f2;
--surface: #ffffff;
--text: #1a1917;
--muted: #5a5652;
--accent: #2f5d62;
--accent-dark: #1e4549;
--cta: #e85d04;
--cta-hover: #c2410c;
--gold: #b8860b;
--gold-soft: #c9a227;
--line: #e8e3dc;
--warn: #b45309;
--lavender: #f3effa;
--card-blue: #e8f0f7;
--radius: 14px;
--radius-lg: 22px;
--shadow: 0 10px 32px rgba(28, 27, 25, 0.09);
--shadow-soft: 0 4px 20px rgba(47, 93, 98, 0.08);
--max: 1120px;
/* セクション上下の余白（画面幅に応じて少し変化） */
--section-pad-y: clamp(3rem, 5.5vw, 4.5rem);
--font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
"Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
--font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 5.5rem;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-sans);
color: var(--text);
background: var(--bg);
line-height: 1.75;
font-size: 16px;
overflow-x: clip;
}
body.has-lp-float {
padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}
a {
color: var(--accent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a:hover {
color: var(--accent-dark);
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
.skip-link {
position: absolute;
left: -9999px;
top: 8px;
z-index: 100;
padding: 0.75rem 1rem;
background: var(--accent);
color: #fff;
border-radius: 6px;
}
.skip-link:focus {
left: 8px;
}
.wrap {
width: min(100% - 2rem, var(--max));
margin-inline: auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(47, 93, 98, 0.04);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0;
}
.brand {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.06em;
font-size: 1.12rem;
color: var(--text);
text-decoration: none;
}
.brand:hover {
color: var(--accent-dark);
}
.nav-toggle {
display: none;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 8px;
padding: 0.5rem 0.75rem;
cursor: pointer;
font-size: 0.9rem;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
touch-action: manipulation;
}
.nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
align-items: center;
justify-content: flex-end;
}
.nav a {
color: var(--text);
text-decoration: none;
font-size: 0.92rem;
padding: 0.35rem 0;
border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] {
border-bottom-color: var(--accent);
color: var(--accent-dark);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.65rem 1.1rem;
border-radius: 999px;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.12s ease;
touch-action: manipulation;
min-height: 44px;
}
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn-primary {
background: linear-gradient(165deg, var(--cta) 0%, #ea580c 100%);
color: #fff;
box-shadow: var(--shadow);
}
.btn-primary:hover {
background: linear-gradient(165deg, var(--cta-hover) 0%, #9a3412 100%);
transform: translateY(-1px);
}
.btn-ghost {
background: var(--surface);
color: var(--accent-dark);
border: 1px solid var(--line);
}
.btn-lg {
padding: 0.85rem 1.5rem;
font-size: 1.05rem;
}
.btn-secondary {
background: #fff;
color: var(--accent-dark);
border: 2px solid var(--accent);
box-shadow: 0 2px 8px rgba(47, 93, 98, 0.08);
}
.btn-secondary:hover {
background: #f0f7f6;
transform: translateY(-1px);
}
.btn-line {
background: linear-gradient(180deg, #f8fffb 0%, #e8f5f0 100%);
color: var(--accent-dark);
border: 2px solid #b8d4cf;
}
.btn-line:hover {
background: #e0f0ec;
}
/* LPヘッダー：右に予約ボタン（参考LP風） */
.header-reserve {
flex-shrink: 0;
padding: 0.55rem 1.15rem;
font-size: 0.92rem;
letter-spacing: 0.06em;
}
.site-header--lp .header-inner {
gap: 0.65rem;
}
@media (max-width: 860px) {
.header-reserve {
margin-left: auto;
}
}
@media (min-width: 861px) {
.nav-reserve-extra {
display: none;
}
}
.hero {
padding: clamp(2rem, 4vw, 3rem) 0 0;
position: relative;
overflow: hidden;
background: linear-gradient(160deg, #fffefb 0%, #f0f7f6 45%, #e8f2f1 100%);
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(232, 93, 4, 0.06), transparent 55%);
pointer-events: none;
}
.hero-visual {
padding-bottom: 0;
}
.hero-grid {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
grid-template-columns: 1fr;
position: relative;
z-index: 1;
}
@media (min-width: 900px) {
.hero-grid {
grid-template-columns: 1fr 1.05fr;
gap: 2rem 3rem;
}
}
.hero-media {
order: -1;
}
@media (min-width: 900px) {
.hero-media {
order: 0;
}
}
.hero-media img {
width: 100%;
max-height: min(520px, 70vh);
object-fit: cover;
border-radius: 50% 42% 48% 52% / 45% 48% 52% 55%;
box-shadow: var(--shadow), 0 0 0 6px rgba(255, 255, 255, 0.85);
}
.hero-card {
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(232, 227, 220, 0.9);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 4vw, 2.35rem);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(6px);
}
.campaign-strip {
background: linear-gradient(90deg, #2a5559 0%, var(--accent) 50%, #234a4e 100%);
color: #f8faf9;
text-align: center;
padding: 0.85rem 1rem;
font-weight: 600;
font-size: clamp(0.88rem, 2vw, 1rem);
letter-spacing: 0.04em;
margin-top: clamp(1.5rem, 3vw, 2rem);
box-shadow: 0 4px 16px rgba(47, 93, 98, 0.25);
}
.campaign-strip a {
color: #fff;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.campaign-hint {
display: block;
margin-top: 0.35rem;
font-size: 0.8rem;
font-weight: 600;
opacity: 0.92;
letter-spacing: 0.12em;
}
.text-gold {
color: var(--gold-soft);
}
.text-accent {
color: var(--cta);
}
h1,
h2,
.page-title {
font-family: var(--font-display);
}
h1 .text-accent,
h2 .text-accent {
font-family: inherit;
}
.hero-badge {
display: inline-block;
font-size: 0.82rem;
font-weight: 700;
color: var(--warn);
background: #fff7ed;
border: 1px solid #fed7aa;
padding: 0.25rem 0.65rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
h1 {
font-size: clamp(1.45rem, 3.5vw, 2rem);
line-height: 1.35;
margin: 0 0 0.75rem;
letter-spacing: 0.02em;
}
.lead {
margin: 0;
color: var(--muted);
font-size: 1.02rem;
}
.section {
padding: var(--section-pad-y) 0;
}
.section.alt {
background: #fff;
border-block: 1px solid var(--line);
}
.section.tint-lavender {
background: linear-gradient(180deg, var(--lavender) 0%, #fff 72%);
border-block: 1px solid var(--line);
}
.section.tint-warm {
background: linear-gradient(180deg, #fff9f5 0%, #fff 70%);
border-block: 1px solid var(--line);
}
.section-head {
margin-bottom: 1.65rem;
}
h2 {
font-size: clamp(1.2rem, 2.4vw, 1.55rem);
margin: 0 0 0.5rem;
letter-spacing: 0.04em;
}
.section-head--center {
text-align: center;
max-width: 40rem;
margin-inline: auto;
}
.section-title-gold {
font-size: clamp(1.35rem, 2.8vw, 1.85rem);
color: var(--gold);
font-weight: 600;
line-height: 1.45;
}
.sub {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
}
.grid-3 {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.25rem;
height: 100%;
}
.card h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.card p {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
}
.card--visual {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card--visual:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.card--visual .card-img {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
}
.card--visual .card-img--round {
border-radius: 0;
aspect-ratio: 16 / 11;
object-fit: cover;
}
.card--visual .card-body {
padding: 1.15rem 1.25rem 1.35rem;
}
.card--pricing {
background: linear-gradient(180deg, var(--card-blue) 0%, #f2f7fb 100%);
border: 1px solid #c5d8e8;
text-align: center;
}
.card--pricing h3 {
color: var(--accent-dark);
font-size: 1.08rem;
}
.feature-split {
display: grid;
gap: 1.5rem;
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.feature-split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.feature-split.reverse {
direction: rtl;
}
.feature-split.reverse > * {
direction: ltr;
}
}
.feature-split img {
width: 100%;
border-radius: 48% 52% 50% 50% / 42% 45% 55% 58%;
box-shadow: var(--shadow-soft);
}
.faq-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.faq-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.faq-card img {
width: 100%;
display: block;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: center center;
}
/* サムネ：縦横比がバラついても枠内でトリミング（HTMLのwidth/heightに引っ張られないよう上記を優先） */
.faq-card__thumb {
object-fit: cover;
object-position: center center;
}
/* 同じ切り取り位置を統一したいカード用 */
.faq-card__thumb--match {
object-fit: cover;
object-position: center center;
}
.faq-card .faq-body {
padding: 1rem 1.1rem 1.2rem;
}
.faq-card h3 {
margin: 0 0 0.4rem;
font-size: 0.98rem;
line-height: 1.45;
}
.faq-card p {
margin: 0;
font-size: 0.88rem;
color: var(--muted);
line-height: 1.65;
}
.visual-mosaic {
display: grid;
gap: 0.65rem;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
.visual-mosaic {
grid-template-columns: repeat(4, 1fr);
}
}
.visual-mosaic img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.visual-mosaic--three {
grid-template-columns: repeat(3, 1fr);
max-width: 56rem;
margin-inline: auto;
}
@media (max-width: 640px) {
.visual-mosaic--three {
grid-template-columns: 1fr;
}
}
/* ご利用の流れ：1枚に集約した写真 */
.flow-single {
margin: 0 auto;
max-width: 56rem;
}
.flow-single img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.flow-single__caption {
margin: 0.85rem 0 0;
font-size: 0.92rem;
color: var(--muted);
line-height: 1.65;
text-align: center;
}
.flow-single--pair .flow-single__pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(0.65rem, 2vw, 1.1rem);
align-items: start;
}
@media (max-width: 640px) {
.flow-single--pair .flow-single__pair {
grid-template-columns: 1fr;
}
}
/* トップ：ご利用の流れ（METHOD 3カラム） */
.flow-method {
background: linear-gradient(180deg, #faf6f0 0%, #f3ebe3 55%, #efe8df 100%);
border-block: 1px solid rgba(220, 208, 196, 0.85);
}
.flow-method__inner {
max-width: min(100% - 2rem, 72rem);
margin-inline: auto;
}
.flow-method__eyebrow {
margin: 0 0 0.35rem;
text-align: center;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.28em;
color: var(--muted);
text-transform: uppercase;
}
.flow-method__title {
margin: 0 0 0.65rem;
text-align: center;
font-family: var(--font-display);
font-size: clamp(1.35rem, 3.5vw, 1.85rem);
font-weight: 700;
color: var(--text);
letter-spacing: 0.06em;
}
.flow-method__lead {
margin: 0 auto 2rem;
max-width: 40rem;
text-align: center;
font-size: clamp(0.88rem, 2vw, 0.98rem);
color: var(--muted);
line-height: 1.75;
}
.flow-method__lead a {
font-weight: 600;
color: var(--accent-dark);
}
.flow-method__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.25rem, 3vw, 2rem);
align-items: start;
}
.flow-method__step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.flow-method__img-wrap {
width: 100%;
max-width: 280px;
aspect-ratio: 1;
margin: 0 auto 1rem;
border-radius: var(--radius);
overflow: hidden;
background: rgba(255, 255, 255, 0.65);
box-shadow: 0 8px 28px rgba(42, 38, 34, 0.1);
}
.flow-method__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.flow-method__step-head {
margin: 0 0 0.65rem;
font-size: clamp(0.98rem, 2.2vw, 1.12rem);
font-weight: 700;
color: var(--text);
line-height: 1.45;
}
.flow-method__num {
display: block;
margin-bottom: 0.2rem;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--accent-dark);
}
.flow-method__text {
margin: 0 0 0.5rem;
font-size: clamp(0.84rem, 1.9vw, 0.92rem);
color: var(--muted);
line-height: 1.75;
text-align: left;
width: 100%;
max-width: 22rem;
}
.flow-method__text strong {
color: var(--text);
font-weight: 600;
}
.flow-method__note {
margin: 0 0 0.85rem;
font-size: 0.78rem;
color: var(--muted);
line-height: 1.65;
text-align: left;
width: 100%;
max-width: 22rem;
}
.flow-method__note a {
font-weight: 600;
color: var(--accent-dark);
}
.flow-method__linkbtn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: auto;
padding: 0.55rem 1.25rem;
min-height: 44px;
font-size: 0.88rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
border: 1px solid var(--text);
border-radius: 10px;
background: rgba(255, 255, 255, 0.85);
transition:
background 0.15s ease,
border-color 0.15s ease,
transform 0.12s ease;
}
.flow-method__linkbtn:hover {
background: #fff;
border-color: var(--accent-dark);
color: var(--accent-dark);
transform: translateY(-1px);
}
.flow-method__more {
margin: 2.25rem 0 0;
text-align: center;
font-size: 0.92rem;
}
.flow-method__more a {
font-weight: 600;
color: var(--accent-dark);
}
@media (max-width: 900px) {
.flow-method__steps {
grid-template-columns: 1fr;
max-width: 24rem;
margin-inline: auto;
}
.flow-method__text,
.flow-method__note {
max-width: none;
}
.flow-method__img-wrap {
max-width: min(100%, 320px);
}
}
/* 料金表まわり：円形特徴アイコン（セクション背景に馴染む暖色トーン） */
.price-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: clamp(1rem, 4vw, 2rem);
margin: 0 auto 1.75rem;
max-width: 52rem;
padding: 1.35rem 1rem;
background: linear-gradient(180deg, rgba(255, 253, 250, 0.95) 0%, rgba(255, 249, 245, 0.98) 100%);
border-radius: var(--radius-lg);
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
}
.price-badge {
flex: 0 0 auto;
width: clamp(7.25rem, 24vw, 9.75rem);
height: clamp(7.25rem, 24vw, 9.75rem);
border-radius: 50%;
border: 2.5px solid #1e4d6b;
background: rgba(255, 255, 255, 0.72);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.45rem;
box-sizing: border-box;
box-shadow: 0 2px 12px rgba(30, 77, 107, 0.08);
}
.price-badge__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.12rem;
line-height: 1.28;
}
.price-badge__line {
display: block;
font-size: clamp(0.7rem, 2.1vw, 0.88rem);
font-weight: 700;
color: #153448;
letter-spacing: 0.03em;
}
/* 料金ページ：全身脱毛 料金シミュレーション表 */
.price-sim {
margin: 0 0 2rem;
padding: 2rem 1rem 2.25rem;
border-radius: var(--radius-lg);
background: linear-gradient(165deg, #e8f4fc 0%, #ffffff 42%, #dceef8 100%);
box-shadow: 0 6px 28px rgba(30, 70, 110, 0.09);
position: relative;
overflow: hidden;
}
.price-sim::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0%, transparent 42%),
radial-gradient(circle at 88% 72%, rgba(255, 255, 255, 0.75) 0%, transparent 45%);
pointer-events: none;
}
.price-sim > * {
position: relative;
z-index: 1;
}
.price-sim__eyebrow {
margin: 0 0 0.75rem;
text-align: center;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text);
}
.price-sim__title {
margin: 0 0 0.85rem;
text-align: center;
}
.price-sim__title-line {
display: block;
font-size: clamp(1.05rem, 2.8vw, 1.35rem);
font-weight: 700;
color: #1a3550;
letter-spacing: 0.05em;
}
.price-sim__title-accent {
display: inline-block;
margin-top: 0.45rem;
font-size: clamp(1.45rem, 4vw, 2rem);
font-weight: 700;
color: #c2410c;
letter-spacing: 0.06em;
border-bottom: 4px solid #f59e0b;
padding-bottom: 0.15rem;
line-height: 1.2;
}
.price-sim__disclaimer {
margin: 0 auto 1.25rem;
max-width: 40rem;
font-size: 0.78rem;
color: var(--muted);
line-height: 1.65;
text-align: center;
}
.price-sim__table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 auto;
padding-bottom: 0.25rem;
max-width: 56rem;
}
.price-sim__table {
width: 100%;
min-width: min(100%, 40rem);
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
font-size: clamp(0.78rem, 1.8vw, 0.9rem);
line-height: 1.55;
}
/* 列幅：左ラベル 18%・他3列を同じ幅で均等 */
.price-sim__table thead th:nth-child(1),
.price-sim__table tbody th:first-child {
width: 18%;
}
.price-sim__table thead th:nth-child(2),
.price-sim__table thead th:nth-child(3),
.price-sim__table thead th:nth-child(4) {
width: 27.333%;
}
.price-sim__th {
padding: 0.75rem 0.5rem;
font-weight: 700;
text-align: center;
vertical-align: middle;
}
.price-sim__th--corner {
background: transparent;
border: none;
}
.price-sim__th--muted {
background: #999;
color: #fff;
border: 1px solid #888;
}
.price-sim__th--featured {
background: #ffd700;
color: #1a1917;
border: 1px solid #c9a000;
border-bottom: none;
border-radius: 12px 12px 0 0;
font-size: clamp(0.92rem, 2vw, 1.1rem);
font-weight: 700;
box-shadow: none;
}
.price-sim__rowhead {
background: #f3f4f6;
border: 1px solid #d1d5db;
font-weight: 700;
text-align: center;
vertical-align: middle;
padding: 0.7rem 0.45rem;
word-break: keep-all;
overflow-wrap: break-word;
}
.price-sim__table td {
padding: 0.75rem 0.5rem;
background: #fff;
border: 1px solid #d1d5db;
vertical-align: middle;
text-align: center;
word-break: keep-all;
overflow-wrap: break-word;
}
.price-sim__td--featured {
background: #fffef6;
border: 1px solid #e8a317 !important;
border-left: 2px solid #f59e0b;
font-weight: 700;
font-size: clamp(0.84rem, 1.85vw, 0.96rem);
box-shadow: none;
color: var(--text);
}
.price-sim__table tbody tr:last-child .price-sim__td--featured {
border-radius: 0 0 10px 10px;
}
@media (max-width: 640px) {
.price-sim {
padding: 1.5rem 0.65rem 1.75rem;
}
.price-sim__table-scroll {
margin: 0 -0.35rem;
}
.price-sim__table {
min-width: 34rem;
}
.price-sim__rowhead {
font-size: 0.72rem;
padding: 0.55rem 0.35rem;
}
}
/* 料金表（縦長グラフィック） */
.price-menu-figure {
max-width: min(100% - 2rem, 26rem);
margin: 0 auto 1.75rem;
}
.price-menu-figure img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.access-map-img {
border-radius: 48% 52% 50% 50% / 42% 45% 55% 58%;
box-shadow: var(--shadow-soft);
}
/* 浮遊予約ボタン（FAB） */
.fab-reserve {
position: fixed;
right: max(1rem, env(safe-area-inset-right));
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 80;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 4.25rem;
min-height: 3.25rem;
padding: 0.75rem 1.35rem;
border-radius: 999px;
background: linear-gradient(165deg, #ff8c38 0%, var(--cta) 45%, #c2410c 100%);
color: #fff !important;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.12em;
text-decoration: none !important;
box-shadow: 0 10px 28px rgba(232, 93, 4, 0.45);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fab-reserve:hover {
transform: scale(1.04);
box-shadow: 0 12px 32px rgba(232, 93, 4, 0.5);
color: #fff !important;
}
.fab-reserve:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
}
.split-2 {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.note {
font-size: 0.9rem;
color: var(--muted);
margin-top: 0.75rem;
}
.site-footer {
background: #1a1918;
color: #e8e4df;
padding: 2.5rem 0 2rem;
margin-top: 2rem;
}
.site-footer a {
color: #dbeafe;
}
.footer-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.footer-title {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.85;
margin: 0 0 0.75rem;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.35rem;
}
.footer-links a {
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
.footer-bottom {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.85rem;
color: #b9b3ac;
}
.page-hero {
padding: 2rem 0 clamp(1.35rem, 3vw, 2rem);
}
.page-title {
margin: 0 0 0.5rem;
font-size: clamp(1.35rem, 3vw, 1.75rem);
}
.prose {
max-width: 720px;
}
.prose h2 {
margin-top: 2rem;
}
.prose p {
margin: 0 0 1rem;
}
/* 地図・アクセス：道順・埋め込み用 */
.prose--access {
max-width: min(100% - 2rem, 56rem);
}
/* Q&Aページ：動画埋め込み */
.qa-video-block {
margin: clamp(1.5rem, 4vw, 2.25rem) 0;
}
.qa-video-block .section-title-gold {
text-align: center;
margin-bottom: 0;
}
.qa-video-block__intro {
margin-top: 0.5rem;
margin-bottom: 1.25rem;
text-align: center;
max-width: 40rem;
margin-inline: auto;
}
/* Q&Aページ（カテゴリ・全30問） */
.qa-toc {
margin: 1.5rem 0 2rem;
padding: 1.1rem 1.25rem 1.2rem;
}
.qa-toc__title {
margin: 0 0 0.65rem;
font-size: 0.95rem;
}
.qa-toc__list {
margin: 0;
padding-left: 1.35rem;
line-height: 1.85;
font-size: 0.92rem;
}
.qa-toc__list a {
font-weight: 600;
color: var(--accent-dark);
}
.qa-section {
margin: 2.25rem 0 2rem;
scroll-margin-top: 5rem;
}
.qa-section h2 {
margin: 0 0 1rem;
padding-bottom: 0.35rem;
border-bottom: 2px solid rgba(47, 93, 98, 0.2);
font-size: clamp(1.12rem, 2.5vw, 1.35rem);
}
.qa-item {
margin: 0 0 1.35rem;
}
.qa-item h3 {
margin: 0 0 0.5rem;
font-size: clamp(0.98rem, 2.1vw, 1.08rem);
font-weight: 700;
color: var(--text);
line-height: 1.5;
}
.qa-item p {
margin: 0;
}
/* トップ：SEO向け長文ガイド */
.seo-deep-dive {
max-width: min(100% - 2rem, 56rem);
margin: 0 auto;
padding: 1.25rem 1.35rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.seo-deep-dive h3 {
margin: 1.75rem 0 0.65rem;
font-size: clamp(1.02rem, 2.2vw, 1.15rem);
color: var(--gold);
font-weight: 600;
line-height: 1.45;
}
.seo-deep-dive h3:first-of-type {
margin-top: 0;
}
.seo-deep-dive p {
margin: 0 0 0.9rem;
color: var(--muted);
font-size: 0.96rem;
line-height: 1.85;
}
.seo-deep-dive p:last-child {
margin-bottom: 0;
}
/* ご利用者の声（横スライド） */
.voice-slider {
position: relative;
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.25rem;
max-width: min(100%, 72rem);
margin-inline: auto;
padding-inline: 0.15rem;
/* 子の幅計算を安定させる */
min-width: 0;
}
.voice-slider__viewport {
flex: 1 1 0%;
min-width: 0;
width: 0;
max-width: 100%;
/* 横スクロールで中身を動かす（ブラウザ標準・矢印は scrollLeft を動かす） */
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-x pinch-zoom;
scroll-behavior: auto;
scrollbar-width: none;
outline: none;
}
.voice-slider__viewport::-webkit-scrollbar {
display: none;
}
.voice-slider__viewport:focus-visible {
box-shadow: 0 0 0 3px rgba(47, 93, 98, 0.25);
border-radius: var(--radius);
}
.voice-slider__track {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 1.25rem;
padding: 0.4rem 0.2rem 1rem;
width: max-content;
min-width: max-content;
flex-shrink: 0;
max-width: none;
box-sizing: border-box;
}
.voice-slider__card {
flex: 0 0 auto;
flex-shrink: 0;
/* ビューポートより必ず横に長くなるよう、幅を固定気味に */
width: min(22rem, calc(100vw - 5rem));
display: flex;
flex-direction: column;
align-self: stretch;
min-height: 12rem;
padding: 1.5rem 1.4rem 1.35rem;
background: var(--surface);
border: 1px solid rgba(220, 214, 206, 0.95);
border-radius: 14px;
box-shadow: 0 6px 28px rgba(42, 38, 34, 0.07);
box-sizing: border-box;
}
@media (min-width: 600px) {
.voice-slider__card {
width: min(26rem, calc(100vw - 5rem));
padding: 1.65rem 1.5rem 1.45rem;
}
}
@media (min-width: 900px) {
.voice-slider__card {
width: clamp(300px, 31vw, 380px);
}
}
.voice-slider__stars {
margin: 0 0 0.85rem;
text-align: center;
font-size: 1.05rem;
letter-spacing: 0.15em;
color: var(--gold-soft);
line-height: 1;
}
.voice-slider__quote {
margin: 0;
padding: 0;
border: none;
flex: 1 1 auto;
text-align: left;
}
.voice-slider__quote p {
margin: 0;
font-size: clamp(0.9rem, 1.9vw, 0.98rem);
color: var(--text);
line-height: 1.8;
}
.voice-slider__quote p + p {
margin-top: 0.55rem;
}
.voice-slider__meta {
margin: 1rem 0 0;
padding-top: 0.85rem;
border-top: 1px solid var(--line);
text-align: center;
font-size: 0.82rem;
color: var(--muted);
line-height: 1.5;
}
.voice-slider__meta strong {
color: var(--text);
font-weight: 700;
}
.voice-slider__arrow {
position: relative;
z-index: 2;
flex: 0 0 auto;
align-self: center;
width: 2.65rem;
height: 2.65rem;
margin: 0;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--accent-dark);
font-size: 1.65rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition:
background 0.15s ease,
border-color 0.15s ease,
transform 0.12s ease;
}
.voice-slider__arrow:hover {
background: #fff;
border-color: var(--accent);
transform: scale(1.05);
}
.voice-slider__arrow:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.voice-slider__arrow:disabled,
.voice-slider__arrow[aria-disabled="true"] {
opacity: 0.35;
cursor: default;
transform: none;
/* 端でもクリックでスクロール試行できるように必ず受け付ける */
pointer-events: auto;
}
.voice-slider__arrow[aria-disabled="true"]:hover {
transform: none;
border-color: var(--line);
background: rgba(255, 255, 255, 0.95);
}
@media (max-width: 599px) {
.voice-slider__arrow {
width: 2.35rem;
height: 2.35rem;
font-size: 1.45rem;
}
}
/* 旧クラス互換（他ページで未使用だが残置） */
.voice-meta {
margin: 0 0 0.5rem;
font-size: 0.92rem;
}
.voices-map-access-link {
margin: 0 auto 1rem;
text-align: center;
font-size: clamp(0.95rem, 2.2vw, 1.05rem);
}
.voices-map-access-link a {
color: var(--accent-dark);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.voices-map-access-link a:hover {
color: var(--accent);
}
.voices-map-heading {
margin: 2rem auto 0.75rem;
text-align: center;
font-size: clamp(1.05rem, 2.5vw, 1.2rem);
font-weight: 700;
color: var(--accent-dark);
letter-spacing: 0.02em;
}
.voice-placeholder {
margin: 0;
font-size: 0.88rem;
color: var(--muted);
line-height: 1.75;
}
.voice-intro {
max-width: 52rem;
margin-inline: auto;
}
.access-address {
margin: 0 0 1.5rem;
font-size: 1rem;
line-height: 1.7;
}
.access-steps {
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.access-step {
margin: 0;
}
.access-step img {
width: 100%;
max-width: 42rem;
height: auto;
display: block;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.access-step figcaption {
margin-top: 0.65rem;
font-size: 0.95rem;
color: var(--muted);
line-height: 1.65;
}
.access-parking {
margin: 0;
}
.access-parking img {
width: 100%;
max-width: 42rem;
height: auto;
display: block;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.access-parking figcaption {
margin-top: 0.65rem;
font-size: 0.95rem;
color: var(--muted);
line-height: 1.65;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.compare-table-wrap {
padding: 0.75rem !important;
overflow-x: auto;
}
.compare-table {
width: 100%;
min-width: 17rem;
border-collapse: collapse;
font-size: clamp(0.82rem, 2.2vw, 0.95rem);
line-height: 1.65;
}
.compare-table caption {
padding: 0;
}
.compare-table th,
.compare-table td {
border: 1px solid var(--line);
padding: 0.65rem 0.75rem;
vertical-align: top;
text-align: left;
}
.compare-table thead th {
background: rgba(15, 118, 110, 0.08);
font-weight: 700;
color: var(--ink);
}
.compare-table tbody th[scope="row"] {
background: rgba(15, 23, 22, 0.04);
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 640px) {
.compare-table {
font-size: 0.82rem;
}
.compare-table th,
.compare-table td {
padding: 0.5rem 0.55rem;
}
}
.map-embed-wrap {
position: relative;
width: 100%;
max-width: 56rem;
margin: 1rem auto 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-soft);
background: #e8eef0;
min-height: 360px;
}
.map-embed-wrap iframe {
display: block;
width: 100%;
min-height: 360px;
border: 0;
vertical-align: bottom;
}
.map-embed-note {
margin-top: 0.75rem;
font-size: 0.9rem;
}
@media (max-width: 860px) {
.nav-toggle {
display: inline-flex;
}
.nav {
display: none;
width: 100%;
flex-direction: column;
align-items: flex-start;
padding: 0.75rem 0 0;
}
.nav.is-open {
display: flex;
}
.header-inner {
flex-wrap: wrap;
}
}
/* パンくず */
.breadcrumb {
padding: 0.65rem 0;
border-bottom: 1px solid var(--line);
background: #fff;
}
.breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.35rem;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.875rem;
color: var(--muted);
}
.breadcrumb-list li {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.breadcrumb-list li:not(:last-child)::after {
content: "›";
opacity: 0.45;
font-weight: 400;
}
.breadcrumb-list a {
color: var(--accent-dark);
text-decoration: none;
}
.breadcrumb-list a:hover {
text-decoration: underline;
}
.breadcrumb-list [aria-current="page"] {
color: var(--text);
font-weight: 600;
}
.internal-hub {
padding: 2.5rem 0;
}
.internal-hub h2 {
margin-bottom: 1rem;
}
.hub-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.hub-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem 1.15rem;
}
.hub-card h3 {
margin: 0 0 0.5rem;
font-size: 1rem;
}
.hub-card ul {
margin: 0;
padding-left: 1.1rem;
color: var(--muted);
font-size: 0.92rem;
}
.hub-card a {
font-weight: 600;
}
/* ========== トップLP（参考：ランディングページ構成） ========== */
.lp-fv {
position: relative;
background: #0f1716;
}
.lp-fv__main {
position: relative;
overflow: hidden;
/* 画像内の帯テキストが「半分だけ見える」見切れを減らすため、やや高め＆上寄せトリミング */
min-height: min(82vh, 680px);
max-height: 880px;
}
.lp-fv__img {
width: 100%;
height: min(82vh, 680px);
max-height: 880px;
object-fit: cover;
/* 下の宣伝文が半分だけ見えるより、上寄せで一貫したトリミングに */
object-position: center 22%;
display: block;
}
.lp-fv__overlay {
position: absolute;
inset: 0;
/* 下ほど濃く：画像内の文字を目立たせず、手前の見出しを読みやすく */
background: linear-gradient(
180deg,
rgba(15, 23, 22, 0.06) 0%,
rgba(15, 23, 22, 0.18) 32%,
rgba(15, 23, 22, 0.72) 62%,
rgba(15, 23, 22, 0.93) 100%
);
display: flex;
align-items: flex-end;
padding: clamp(1.25rem, 4vw, 2.5rem) 0;
}
.lp-fv__overlay-inner {
width: min(100% - 2rem, var(--max));
margin-inline: auto;
padding: clamp(1rem, 3vw, 1.4rem) clamp(1rem, 3vw, 1.5rem);
background: rgba(10, 16, 15, 0.82);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.38);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.lp-fv__overlay .hero-badge {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(251, 146, 60, 0.5);
}
.lp-fv__overlay h1 {
color: #fff;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.55),
0 2px 20px rgba(0, 0, 0, 0.45);
}
.lp-fv__overlay .text-gold {
color: #fde68a;
}
.lp-fv__overlay .text-accent {
color: #fdba74;
}
.lp-fv__lead {
color: rgba(255, 255, 255, 0.92);
}
.lp-fv__overlay .btn-ghost {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.35);
color: #fff;
backdrop-filter: blur(4px);
}
.lp-fv__overlay .btn-ghost:hover {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.lp-trust {
background: linear-gradient(90deg, #fff8f0 0%, #fffef8 50%, #f0faf8 100%);
border-block: 1px solid var(--line);
padding: 0.75rem 1rem;
text-align: center;
font-size: clamp(0.82rem, 2vw, 0.95rem);
font-weight: 600;
color: var(--accent-dark);
letter-spacing: 0.04em;
}
.lp-trust__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.35rem 0.5rem;
}
.lp-trust__dot {
opacity: 0.45;
}
.lp-cta-band {
background: linear-gradient(180deg, #ffffff 0%, #f3f8f7 100%);
padding: clamp(1.5rem, 3.5vw, 2.25rem) 0;
border-bottom: 1px solid var(--line);
box-shadow: 0 8px 24px rgba(47, 93, 98, 0.06);
}
.lp-cta-band__wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
.lp-cta-band__price {
margin: 0;
font-size: clamp(1.05rem, 2.5vw, 1.25rem);
font-weight: 700;
color: var(--text);
}
.lp-cta-band__price strong {
font-size: 1.15em;
}
/* トップ：初回お試し（STORESへ）— 枠・大きめ文字で強調 */
.lp-cta-band__trial {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
max-width: 100%;
width: min(100%, 22rem);
padding: 1rem 1.35rem 1.1rem;
border: 3px solid var(--cta);
border-radius: 16px;
background: linear-gradient(165deg, #fffef9 0%, #fff4e6 45%, #ffe8d5 100%);
box-shadow:
0 4px 0 rgba(232, 93, 4, 0.2),
0 12px 32px rgba(232, 93, 4, 0.16);
text-decoration: none;
color: var(--text);
transition:
transform 0.16s ease,
box-shadow 0.16s ease;
}
.lp-cta-band__trial:hover {
transform: translateY(-2px);
box-shadow:
0 6px 0 rgba(232, 93, 4, 0.22),
0 16px 36px rgba(232, 93, 4, 0.22);
}
.lp-cta-band__trial:focus-visible {
outline: 3px solid var(--cta-hover);
outline-offset: 3px;
}
.lp-cta-band__trial-label {
font-size: clamp(1.2rem, 4vw, 1.55rem);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.25;
color: var(--cta-hover);
}
.lp-cta-band__trial-price {
line-height: 1.2;
}
.lp-cta-band__trial-price strong {
font-size: clamp(1.45rem, 5vw, 1.95rem);
font-weight: 700;
}
.lp-cta-band__trial .lp-cta-band__sub {
margin-top: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--cta-hover);
}
.lp-cta-band__intro {
width: 100%;
max-width: 40rem;
margin: 0.35rem auto 0;
padding: 0 0.5rem;
text-align: center;
}
.lp-cta-band__intro-title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.05rem, 3vw, 1.35rem);
font-weight: 700;
color: var(--gold);
letter-spacing: 0.02em;
line-height: 1.35;
}
.lp-cta-band__intro-text {
margin: 0.5rem 0 0;
font-size: clamp(0.88rem, 2.2vw, 0.95rem);
color: var(--muted);
line-height: 1.7;
}
.lp-cta-band__intro-text a {
font-weight: 600;
color: var(--accent-dark);
}
.lp-cta-band__sub {
display: block;
margin-top: 0.25rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--muted);
}
.lp-cta-band__btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.65rem 0.75rem;
width: 100%;
max-width: 36rem;
}
.lp-cta-band__btns .btn {
flex: 1 1 auto;
min-width: 7.5rem;
}
.lp-cta-band__main {
flex: 1.1 1 200px;
}
.lp-cta-band--repeat {
margin-top: 0;
background: linear-gradient(180deg, #faf6f1 0%, #fff 100%);
}
.lp-anchor {
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.lp-anchor__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.35rem 0.2rem;
padding: clamp(0.65rem, 2vw, 1rem) 0;
}
.lp-anchor a {
display: inline-block;
padding: 0.45rem 0.75rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--accent-dark);
text-decoration: none;
border-radius: 999px;
border: 1px solid transparent;
}
.lp-anchor a:hover {
background: #f0f7f6;
border-color: #c5ddd8;
}
.lp-reason-list {
display: grid;
gap: 2rem;
margin-top: 0.5rem;
}
.lp-reason {
display: grid;
gap: 1.25rem;
align-items: center;
grid-template-columns: 1fr;
padding: 1rem 0;
border-bottom: 1px solid var(--line);
}
.lp-reason:last-child {
border-bottom: none;
}
@media (min-width: 768px) {
.lp-reason {
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 1.5rem 0;
}
.lp-reason--reverse .lp-reason__img {
order: 2;
}
.lp-reason--reverse .lp-reason__body {
order: 1;
}
}
.lp-reason__img img {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
aspect-ratio: 4 / 3;
object-fit: cover;
}
.lp-reason__body h3 {
font-family: var(--font-display);
font-size: clamp(1.15rem, 2.2vw, 1.4rem);
margin: 0 0 0.65rem;
line-height: 1.45;
}
.lp-reason__body h3 em {
font-style: normal;
font-weight: 700;
}
.lp-reason__body p {
margin: 0 0 0.5rem;
color: var(--muted);
font-size: 0.96rem;
}
/* 下部固定バー（参考LPのフロートCTA） */
.lp-float-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 85;
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
padding: 0.5rem max(0.5rem, env(safe-area-inset-left)) calc(0.5rem + env(safe-area-inset-bottom))
max(0.5rem, env(safe-area-inset-right));
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #fff 40%);
border-top: 1px solid var(--line);
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.08);
}
.lp-float-bar[hidden] {
display: none !important;
}
.lp-float-bar__main {
flex: 1.2;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0.25rem;
padding: 0.75rem 1rem;
border-radius: 999px;
background: linear-gradient(165deg, #ff8c38 0%, var(--cta) 45%, #c2410c 100%);
color: #fff !important;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.14em;
text-decoration: none !important;
box-shadow: 0 6px 20px rgba(232, 93, 4, 0.35);
}
.lp-float-bar__link {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0.15rem;
padding: 0.65rem 0.5rem;
border-radius: 12px;
background: #f3f6f5;
color: var(--accent-dark) !important;
font-weight: 700;
font-size: 0.88rem;
text-decoration: none !important;
border: 1px solid #d5e3e0;
}
.lp-float-bar__link:hover {
background: #e8f2f0;
}
/* ========== 入室方法ページ（動画・写真付きステップ） ========== */
.enter-guide__video {
position: relative;
width: 100%;
padding-top: 56.25%;
margin-bottom: 2.5rem;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.enter-guide__video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.enter-guide__room-short-label {
text-align: center;
margin: 0.5rem auto 0.75rem;
max-width: 40rem;
}
.enter-guide__short-embed {
margin-bottom: 2.5rem;
}
.enter-guide__heading {
text-align: center;
margin-bottom: 1.5rem;
}
.enter-guide__steps-heading {
text-align: center;
margin-bottom: 2.5rem;
}
.enter-guide__card {
margin-bottom: 2.5rem;
border-left: 4px solid var(--gold-soft);
}
.enter-guide__card h3,
.enter-guide__split-text h3 {
margin-top: 0;
color: var(--gold);
font-size: 1.25rem;
font-weight: 700;
}
.enter-guide__split {
margin-bottom: 2.5rem;
align-items: center;
}
.enter-guide__figure {
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.enter-guide__figure img {
width: 100%;
height: auto;
display: block;
}
.enter-guide__map-note {
text-align: center;
padding-top: 2rem;
border-top: 1px solid var(--line);
}
/* ========== メンズ／レディース脱毛ページ（ヒーロー分割・画像付きカード） ========== */
.page-mens-hero.split-2,
.page-ladies-hero.split-2 {
max-width: 64rem;
margin-inline: auto;
align-items: center;
}
/* ヒーロー：枠の比率固定＋中央トリミング（元画像の縦横が違っても同じサイズ感） */
.page-mens-hero__figure,
.page-ladies-hero__figure {
margin: 0;
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
background: var(--bg);
}
.page-mens-hero__img,
.page-ladies-hero__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.page-mens-hero__intro,
.page-ladies-hero__intro {
margin: 0;
box-shadow: none;
background: transparent;
border: none;
}
.page-mens-card__thumb,
.page-ladies-card__thumb {
display: block;
width: 100%;
border-radius: var(--radius);
margin-bottom: 1.25rem;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
}
.page-mens-area__thumb,
.page-ladies-area__thumb {
display: block;
width: 100%;
border-radius: var(--radius);
margin-bottom: 1.25rem;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
.page-mens-h3,
.page-ladies-h3 {
margin-top: 0;
font-size: 1.1rem;
}
.page-mens-area-h3,
.page-ladies-area-h3 {
margin-top: 0;
font-size: 1.05rem;
}
.page-mens-faq-q,
.page-ladies-faq-q {
margin-top: 0;
font-size: 1.05rem;
}
/* ========== マシン紹介ページ（DAISY ビジュアル） ========== */
.machine-visual-split {
display: grid;
gap: clamp(1.25rem, 4vw, 2rem);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
align-items: stretch;
max-width: 72rem;
margin-inline: auto;
}
.machine-visual-spotlight {
position: relative;
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
var(--shadow),
0 0 0 1px rgba(184, 134, 11, 0.2);
background: linear-gradient(160deg, #2c2a28 0%, #141312 55%, #1a1918 100%);
aspect-ratio: 3 / 4;
max-height: min(88vh, 680px);
}
.machine-visual-spotlight__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.machine-visual-spotlight__badge {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 1rem 1rem 0.85rem;
font-size: clamp(0.75rem, 2.5vw, 0.82rem);
font-weight: 600;
letter-spacing: 0.12em;
text-align: center;
color: #faf8f5;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
background: linear-gradient(transparent, rgba(12, 10, 9, 0.88));
}
.machine-visual-spotlight__badge span {
display: inline-block;
padding: 0.35rem 0.85rem;
border-radius: 999px;
border: 1px solid rgba(201, 162, 39, 0.45);
background: rgba(26, 25, 24, 0.55);
}
.machine-visual-lead {
align-self: center;
}
.machine-visual-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.75rem, 2.5vw, 1.25rem);
margin-top: clamp(1.75rem, 4vw, 2.5rem);
max-width: 72rem;
margin-inline: auto;
}
.machine-visual-strip__cell {
margin: 0;
}
.machine-visual-strip__frame {
margin: 0;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 3 / 4;
box-shadow: var(--shadow-soft);
background: var(--bg);
}
.machine-visual-strip__frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.machine-visual-strip__cap {
margin: 0.5rem 0 0;
font-size: 0.82rem;
color: var(--muted);
line-height: 1.45;
text-align: center;
}
@media (max-width: 720px) {
.machine-visual-strip {
grid-template-columns: 1fr;
max-width: 22rem;
}
}
/* YouTube 埋め込み（16:9・幅に追従） */
.embed-youtube {
max-width: 56rem;
margin-inline: auto;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
background: #0c0c0c;
}
.embed-youtube iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* YouTube ショート（縦 9:16・中央・スマホ向け比率） */
.embed-youtube--short {
aspect-ratio: 9 / 16;
max-width: min(100%, 22rem);
}
.machine-video-label {
text-align: center;
max-width: 40rem;
margin-inline: auto;
margin-bottom: 0.75rem;
}
.machine-video-label + .embed-youtube + .machine-video-label {
margin-top: 1.75rem;
}
/* ========== スマホ・タブレット向け最適化 ========== */
@media (max-width: 640px) {
html {
scroll-padding-top: 4rem;
}
body {
font-size: clamp(0.9375rem, 3.1vw, 1rem);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.wrap {
width: min(100% - 1rem, var(--max));
}
.section {
--section-pad-y: clamp(2.35rem, 7vw, 3rem);
padding: var(--section-pad-y) 0;
}
.section-head--center {
max-width: none;
}
.page-hero {
padding: 1.25rem 0 clamp(1rem, 4vw, 1.5rem);
}
.hub-grid {
grid-template-columns: 1fr;
}
.grid-3 {
grid-template-columns: 1fr;
}
.split-2 {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-links a {
display: inline-block;
padding: 0.35rem 0;
min-height: 2.75rem;
line-height: 1.45;
}
.breadcrumb {
padding: 0.5rem 0;
}
.brand {
flex: 1 1 auto;
min-width: 0;
font-size: clamp(0.95rem, 3.8vw, 1.08rem);
line-height: 1.3;
}
.header-reserve {
padding: 0.5rem 0.85rem;
font-size: 0.85rem;
}
/* LP：ファーストビュー — スマホはヒーロー写真なし（帯だけ） */
.page-home .lp-fv__main {
min-height: min(68vh, 520px);
max-height: none;
}
.page-home .lp-fv__img {
display: none;
}
.page-home .lp-fv__overlay {
position: absolute;
inset: 0;
padding: 0.85rem 0 1rem;
align-items: flex-end;
background: linear-gradient(
180deg,
rgba(15, 23, 22, 0.18) 0%,
rgba(15, 23, 22, 0.5) 38%,
rgba(15, 23, 22, 0.9) 100%
);
}
.page-home .lp-fv__overlay-inner {
width: min(100% - 1rem, var(--max));
padding: 0.95rem 1rem 1.1rem;
border-radius: 12px;
}
.page-home .lp-fv__overlay h1 {
font-size: clamp(1.15rem, 4.8vw, 1.45rem);
line-height: 1.38;
}
.page-home .lp-fv__lead {
font-size: 0.92rem;
line-height: 1.65;
}
.lp-trust__inner {
flex-direction: column;
gap: 0.2rem;
}
.lp-trust__dot {
display: none;
}
.lp-cta-band__btns {
flex-direction: column;
max-width: 100%;
}
.lp-cta-band__btns .btn {
width: 100%;
min-height: 48px;
flex: none;
}
/* ページ内ナビ：横スクロールで親指で操作しやすく */
.lp-anchor {
border-bottom-width: 1px;
}
.lp-anchor .wrap {
width: 100%;
max-width: none;
padding-inline: 0;
}
.lp-anchor__inner {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0.35rem;
padding: 0.7rem 0.75rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.lp-anchor a {
flex: 0 0 auto;
white-space: nowrap;
scroll-snap-align: start;
padding: 0.55rem 0.95rem;
font-size: 0.8rem;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.faq-grid {
grid-template-columns: 1fr;
}
.visual-mosaic {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.lp-float-bar__main {
min-height: 48px;
padding: 0.7rem 0.85rem;
font-size: 0.98rem;
}
.lp-float-bar__link {
min-height: 48px;
padding: 0.55rem 0.35rem;
font-size: 0.82rem;
}
}
@media (max-width: 860px) {
.nav a {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0.5rem 0;
width: 100%;
}
.nav .btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 380px) {
.header-reserve {
padding: 0.45rem 0.65rem;
font-size: 0.8rem;
}
.page-home .lp-fv__overlay h1 {
font-size: 1.05rem;
}
}