/* ==================================================================
こすもす デザインカンプ v0.1
- カラー：コスモスピンク×スモーキーパープル
- タイポ：Noto Serif JP（見出し）× Noto Sans JP（本文）× Inter（英字）
- 曲線：大きめ border-radius + SVG blob + pill ボタン
- 余白：ゆったり、ホワイトスペース重視
================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap');
:root {
/* ---------- カラーパレット ---------- */
--rose: #D1457A; /* メインカラー：ローズピンク */
--rose-deep: #A6334D; /* アクセント：ディープローズ */
--rose-soft: #E68BA9; /* ソフトローズ */
--purple: #8E5A7B; /* スモーキーパープル */
--purple-soft: #B594A6; /* 淡い紫 */
--pink-pale: #F7E4EC; /* ペールピンク */
--pink-blush: #FBEFF3; /* ブラッシュピンク（最淡） */
--cream: #FDF7F4; /* クリーム（背景） */
--ivory: #FBF8F6; /* オフホワイト */
--text: #3A2B33; /* 本文（黒すぎない、紫みのあるダーク） */
--text-sub: #7C6B74; /* サブテキスト */
--text-light: #A59199; /* さらに淡い */
--shadow-rose: 0 20px 40px -16px rgba(209, 69, 122, 0.18);
--shadow-soft: 0 30px 60px -30px rgba(58, 43, 51, 0.18);
/* ---------- タイポグラフィ ---------- */
--font-serif: "Noto Serif JP", "Yu Mincho", serif;
--font-sans: "Noto Sans JP", -apple-system, "Yu Gothic", sans-serif;
--font-en: "Inter", -apple-system, sans-serif;
/* ---------- 余白・レイアウト ---------- */
--wrap-max: 1180px;
--wrap-px: clamp(24px, 6vw, 80px);
--section-py: clamp(96px, 12vw, 180px);
--block-gap: clamp(48px, 7vw, 88px);
/* ---------- 角丸（曲線感の源） ---------- */
--r-sm: 12px;
--r-md: 24px;
--r-lg: 36px;
--r-xl: 56px;
--r-2xl: 80px;
--r-pill: 999px;
/* ===== Fluid tokens (v0.4) ===== */
/* Viewport reference */
--fluid-min: 320;
--fluid-max: 1920;
/* Fluid font sizes */
--fs-3xs: clamp(10px, calc(10px + 2 * (100vw - 320px) / 1600), 12px);
--fs-2xs: clamp(11px, calc(11px + 2 * (100vw - 320px) / 1600), 13px);
--fs-xs: clamp(12px, calc(12px + 2 * (100vw - 320px) / 1600), 14px);
--fs-sm: clamp(13px, calc(13px + 3 * (100vw - 320px) / 1600), 16px);
--fs-base:clamp(14px, calc(14px + 4 * (100vw - 320px) / 1600), 18px);
--fs-md: clamp(16px, calc(16px + 4 * (100vw - 320px) / 1600), 20px);
--fs-lg: clamp(18px, calc(18px + 6 * (100vw - 320px) / 1600), 24px);
--fs-xl: clamp(20px, calc(20px + 8 * (100vw - 320px) / 1600), 28px);
--fs-2xl: clamp(22px, calc(22px + 10 * (100vw - 320px) / 1600), 32px);
--fs-3xl: clamp(26px, calc(26px + 14 * (100vw - 320px) / 1600), 40px);
--fs-4xl: clamp(30px, calc(30px + 22 * (100vw - 320px) / 1600), 52px);
--fs-5xl: clamp(36px, calc(36px + 28 * (100vw - 320px) / 1600), 64px);
/* Fluid spacing */
--sp-3xs: clamp(4px, calc(4px + 4 * (100vw - 320px) / 1600), 8px);
--sp-2xs: clamp(8px, calc(8px + 4 * (100vw - 320px) / 1600), 12px);
--sp-xs: clamp(12px, calc(12px + 4 * (100vw - 320px) / 1600), 16px);
--sp-sm: clamp(16px, calc(16px + 8 * (100vw - 320px) / 1600), 24px);
--sp-md: clamp(20px, calc(20px + 12 * (100vw - 320px) / 1600), 32px);
--sp-lg: clamp(28px, calc(28px + 20 * (100vw - 320px) / 1600), 48px);
--sp-xl: clamp(40px, calc(40px + 32 * (100vw - 320px) / 1600), 72px);
--sp-2xl: clamp(56px, calc(56px + 48 * (100vw - 320px) / 1600), 104px);
--sp-3xl: clamp(72px, calc(72px + 64 * (100vw - 320px) / 1600), 136px);
/* Container widths */
--container-max: min(1280px, 92vw);
--container-wide: min(1440px, 94vw);
/* Fluid border radius */
--r-sm-fluid: clamp(6px, calc(6px + 4 * (100vw - 320px) / 1600), 10px);
--r-md-fluid: clamp(10px, calc(10px + 6 * (100vw - 320px) / 1600), 16px);
--r-lg-fluid: clamp(14px, calc(14px + 10 * (100vw - 320px) / 1600), 24px);
}
/* ---------- リセット ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
color: var(--text);
background: var(--ivory);
line-height: 1.9;
font-size: var(--fs-base);
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
/* ---------- タイポグラフィ基本 ---------- */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.5;
margin: 0;
}
p { margin: 0; }
.kicker {
font-family: var(--font-en);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.3em;
color: var(--rose);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 10px;
}
.kicker::before {
content: "";
width: 24px;
height: 1px;
background: var(--rose);
display: inline-block;
}
/* ---------- レイアウトコンテナ ---------- */
.wrap {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: clamp(16px, 4vw, 32px);
padding-right: clamp(16px, 4vw, 32px);
}
.wrap.wrap-wide {
max-width: var(--container-wide);
}
.section {
padding-top: var(--sp-2xl);
padding-bottom: var(--sp-2xl);
position: relative;
overflow: hidden;
}
.section-head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--block-gap);
}
.section-head .kicker { margin-bottom: 18px; }
.section-head h2 {
font-size: clamp(24px, 3.8vw, 38px);
margin: 0 0 20px;
}
.section-head p {
color: var(--text-sub);
font-size: clamp(14px, 1.5vw, 16px);
line-height: 2;
}
/* ==================================================================
背景＆曲線装飾
================================================================== */
.bg-cream { background: var(--cream); }
.bg-blush { background: var(--pink-blush); }
.bg-pale { background: var(--pink-pale); }
.bg-dark { background: linear-gradient(135deg, #3A2B33 0%, #5a3d48 100%); color: #fff; }
/* 波形セクション区切り（上→下） */
.wave-divider {
display: block;
width: 100%;
height: clamp(60px, 10vw, 140px);
}
.wave-divider svg { width: 100%; height: 100%; display: block; }
/* ふんわり装飾ブロブ（絶対配置で散らす） */
.blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: .6;
pointer-events: none;
z-index: 0;
}
.blob-rose { background: var(--rose-soft); }
.blob-purple { background: var(--purple-soft); }
.blob-pink { background: var(--pink-pale); }
.section > .wrap { position: relative; z-index: 2; }
/* ==================================================================
ヘッダー
================================================================== */
.site-header {
container-type: inline-size;
container-name: header;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(180%) blur(20px);
background: rgba(251, 248, 246, .82);
border-bottom: 1px solid rgba(209, 69, 122, .08);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 16px;
padding: 8px 0;
}
.logo {
font-family: var(--font-serif);
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 500;
color: var(--text);
text-decoration: none;
letter-spacing: 0.1em;
display: inline-flex;
align-items: center;
gap: 12px;
}
.logo::before {
content: "";
width: 28px;
height: 28px;
background: radial-gradient(circle at 30% 30%, var(--rose) 0%, var(--rose-deep) 80%);
border-radius: 50%;
box-shadow: inset 0 0 0 4px rgba(255,255,255,.8), 0 4px 12px rgba(209,69,122,.35);
}
.logo small {
font-family: var(--font-en);
font-size: 10px;
color: var(--text-light);
font-weight: 400;
letter-spacing: 0.2em;
display: block;
line-height: 1.2;
margin-top: 2px;
}
.logo-text { display: flex; flex-direction: column; }
/* SVGロゴ①版 */
.logo.has-svg { flex-shrink: 0; }
.logo.has-svg::before { display: none; }
.logo-svg { width: clamp(80px, 16vw, 180px); height: auto; display: block; }
.gnav { display: none; flex-shrink: 1; min-width: 0; }
.gnav ul {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-wrap: nowrap;
gap: clamp(14px, 1.6vw, 22px);
}
.gnav a {
text-decoration: none;
color: var(--text);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
position: relative;
transition: color .2s;
}
.gnav a::after {
content: "";
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%) scaleX(0);
width: 16px; height: 2px;
background: var(--rose);
border-radius: 2px;
transition: transform .2s;
}
.gnav a:hover { color: var(--rose); }
.gnav a:hover::after { transform: translateX(-50%) scaleX(1); }
.header-cta {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.hamburger {
width: 44px; height: 44px;
border: 1px solid rgba(209, 69, 122, .2);
background: #fff;
border-radius: 50%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
cursor: pointer;
}
.hamburger span {
width: 18px; height: 2px;
background: var(--text);
border-radius: 2px;
}
/* ==================================================================
ボタン（pill shape）
================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
border-radius: var(--r-pill);
font-weight: 500;
font-size: 14px;
text-decoration: none;
border: none;
cursor: pointer;
transition: all .25s ease;
letter-spacing: 0.05em;
min-height: 52px;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
box-shadow: var(--shadow-rose);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 24px 44px -16px rgba(209, 69, 122, 0.35);
}
.btn-line {
background: #06C755;
color: #fff;
box-shadow: 0 20px 40px -16px rgba(6, 199, 85, 0.3);
}
.btn-line::before {
content: "";
width: 20px; height: 20px;
background: currentColor;
mask-image: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-position: center;
}
.btn-outline {
background: #fff;
color: var(--text);
border: 1px solid rgba(58, 43, 51, .15);
}
.btn-outline:hover {
border-color: var(--rose);
color: var(--rose);
}
.btn-ghost {
background: transparent;
color: var(--text-sub);
border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--rose); }
.btn-lg { padding: 20px 36px; font-size: 15px; min-height: 60px; }
.btn-xl { padding: 22px 44px; font-size: 16px; min-height: 68px; }
.btn-block { width: 100%; }
.btn-block-mob { width: 100%; }
/* フッター固定LINE */
.floating-cta {
position: fixed;
bottom: clamp(16px, 2vw, 28px);
right: clamp(16px, 2vw, 28px);
z-index: 40;
display: flex;
flex-direction: column;
gap: 10px;
}
.floating-cta .btn {
box-shadow: 0 16px 32px -10px rgba(209, 69, 122, .4);
}
/* ==================================================================
ヒーロー
================================================================== */
.hero {
position: relative;
padding: clamp(60px, 10vw, 140px) 0 clamp(40px, 8vw, 120px);
overflow: hidden;
background:
radial-gradient(ellipse at 15% 20%, var(--pink-pale) 0%, transparent 55%),
radial-gradient(ellipse at 85% 80%, rgba(142, 90, 123, .18) 0%, transparent 55%),
var(--ivory);
}
.hero-inner {
position: relative;
z-index: 2;
display: grid;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.hero-inner--center {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.hero-inner--center .hero-copy { max-width: none; }
.hero-inner--center .hero-cta,
.hero-inner--center .hero-meta {
justify-content: center;
}
.hero-copy h1 {
font-size: clamp(28px, 5.5vw, 54px);
line-height: 1.5;
letter-spacing: 0.03em;
margin-bottom: clamp(20px, 3vw, 32px);
font-weight: 500;
}
.hero-copy h1 em {
font-style: normal;
color: var(--rose);
font-weight: 700;
}
.hero-copy .lead {
color: var(--text-sub);
font-size: clamp(14px, 1.7vw, 17px);
line-height: 2.1;
margin-bottom: clamp(28px, 4vw, 40px);
}
.hero-cta {
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-meta {
margin-top: clamp(32px, 4vw, 48px);
display: flex;
gap: clamp(16px, 3vw, 32px);
flex-wrap: wrap;
font-size: 12px;
color: var(--text-sub);
font-family: var(--font-en);
letter-spacing: 0.1em;
}
.hero-meta span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hero-meta span::before {
content: "";
width: 6px; height: 6px;
background: var(--rose);
border-radius: 50%;
}
.hero-visual {
position: relative;
}
/* ヒーロー画像を楕円形ブロブでマスク */
.hero-visual .photo {
aspect-ratio: 4 / 5;
background:
linear-gradient(135deg, var(--pink-pale), var(--purple-soft));
border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
animation: blobMorph 18s ease-in-out infinite;
}
.hero-visual .photo::before {
content: "[ヒーロー画像が入ります]";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.8);
font-family: var(--font-en);
font-size: 12px;
letter-spacing: 0.2em;
}
@keyframes blobMorph {
0%, 100% { border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%; }
33% { border-radius: 42% 58% 45% 55% / 58% 50% 50% 42%; }
66% { border-radius: 50% 50% 42% 58% / 55% 45% 55% 45%; }
}
/* コスモスの花を装飾として散らす */
.hero-cosmos {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hero-cosmos-1 {
width: 40px; height: 40px;
top: 12%; right: 8%;
background: radial-gradient(circle, var(--rose) 0 40%, transparent 42%),
radial-gradient(circle at center, #fff 10%, transparent 12%);
opacity: .5;
}
.hero-cosmos-2 {
width: 24px; height: 24px;
bottom: 20%; left: 4%;
background: var(--purple-soft);
opacity: .4;
}
/* ==================================================================
共感セクション（concerns）
================================================================== */
.concerns {
display: grid;
gap: var(--sp-sm);
max-width: 840px;
margin: 0 auto;
}
.concern {
background: #fff;
border-radius: var(--r-lg);
padding: var(--sp-md) clamp(28px, 4vw, 48px);
font-family: var(--font-serif);
font-size: var(--fs-md);
line-height: 1.8;
font-weight: 500;
position: relative;
box-shadow: var(--shadow-soft);
padding-left: clamp(64px, 8vw, 88px);
}
.concern::before {
content: "＂";
position: absolute;
left: clamp(24px, 3vw, 36px);
top: clamp(16px, 2vw, 24px);
font-family: var(--font-serif);
font-size: 60px;
color: var(--rose);
opacity: .4;
line-height: 1;
}
/* ==================================================================
サービスカード
================================================================== */
.service-grid {
display: grid;
gap: var(--sp-md);
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.service-card {
background: #fff;
border-radius: var(--r-lg);
padding: var(--sp-md);
text-align: center;
box-shadow: var(--shadow-soft);
transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: 0 40px 80px -30px rgba(58, 43, 51, .2);
}
.service-card .circle {
width: clamp(80px, 10vw, 110px);
height: clamp(80px, 10vw, 110px);
margin: 0 auto clamp(20px, 2vw, 28px);
border-radius: 50%;
background: linear-gradient(135deg, var(--pink-pale) 0%, var(--purple-soft) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.2em;
}
.service-card h3 {
font-size: clamp(16px, 1.8vw, 19px);
margin-bottom: 12px;
font-weight: 500;
}
.service-card p {
color: var(--text-sub);
font-size: 13px;
line-height: 2;
}
/* ==================================================================
理由（why us）
================================================================== */
.why-grid {
display: grid;
gap: var(--sp-lg);
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.why-item {
text-align: center;
position: relative;
padding: clamp(24px, 3vw, 32px);
}
.why-num {
font-family: var(--font-en);
font-size: clamp(48px, 7vw, 80px);
font-weight: 300;
color: var(--rose);
line-height: 1;
margin-bottom: 16px;
opacity: .8;
}
.why-item h3 {
font-size: var(--fs-lg);
margin-bottom: 16px;
}
.why-item p {
color: var(--text-sub);
font-size: 14px;
line-height: 2;
}
/* ==================================================================
料金カード
================================================================== */
.price-grid {
display: grid;
gap: clamp(24px, 3vw, 40px);
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
align-items: stretch;
}
.price-card {
background: #fff;
border-radius: var(--r-xl);
padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px);
text-align: center;
box-shadow: var(--shadow-soft);
position: relative;
display: flex;
flex-direction: column;
}
.price-card.featured {
background: linear-gradient(165deg, #fff 0%, var(--pink-blush) 100%);
border: 2px solid var(--rose);
box-shadow: 0 40px 80px -20px rgba(209, 69, 122, .25);
transform: scale(1.02);
}
.price-card.featured::before {
content: "人気No.1";
position: absolute;
top: -16px; left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--rose), var(--rose-deep));
color: #fff;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.15em;
padding: 8px 22px;
border-radius: var(--r-pill);
box-shadow: 0 8px 20px rgba(209, 69, 122, .3);
}
.price-card h3 {
font-size: clamp(22px, 2.8vw, 28px);
margin-bottom: 8px;
}
.price-card .price-sub {
color: var(--text-sub);
font-size: 13px;
margin-bottom: 28px;
}
.price-card .price-value {
font-family: var(--font-serif);
font-size: clamp(34px, 5vw, 48px);
color: var(--rose-deep);
font-weight: 500;
line-height: 1;
margin: 12px 0 8px;
}
.price-card .price-value small {
display: block;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-sub);
font-weight: 400;
margin-top: 8px;
letter-spacing: 0.1em;
}
.price-card ul {
list-style: none;
padding: 0;
margin: 28px 0;
text-align: left;
flex: 1;
}
.price-card li {
padding: 14px 0;
border-bottom: 1px dashed rgba(209, 69, 122, .15);
font-size: 14px;
color: var(--text);
display: flex;
align-items: flex-start;
gap: 12px;
}
.price-card li::before {
content: "";
width: 18px; height: 18px;
margin-top: 3px;
flex-shrink: 0;
background:
radial-gradient(circle, var(--rose) 0 35%, transparent 36%),
radial-gradient(circle, rgba(209,69,122,.12) 0 65%, transparent 66%);
border-radius: 50%;
}
/* ==================================================================
フロー（ステップ）
================================================================== */
.flow-list {
display: grid;
gap: var(--sp-md);
max-width: 820px;
margin: 0 auto;
}
.flow-step {
background: #fff;
border-radius: var(--r-lg);
padding: var(--sp-md) clamp(28px, 3vw, 48px);
padding-left: clamp(100px, 12vw, 140px);
position: relative;
box-shadow: var(--shadow-soft);
}
.flow-step .step-num {
position: absolute;
left: clamp(24px, 3vw, 36px);
top: 50%;
transform: translateY(-50%);
width: clamp(56px, 7vw, 72px);
height: clamp(56px, 7vw, 72px);
border-radius: 50%;
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 500;
box-shadow: var(--shadow-rose);
}
.flow-step h3 {
font-size: var(--fs-md);
margin-bottom: 8px;
}
.flow-step p {
color: var(--text-sub);
font-size: 14px;
line-height: 1.9;
}
/* ==================================================================
お客様の声
================================================================== */
.voice-grid {
display: grid;
gap: var(--sp-md);
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.voice-card {
background: #fff;
border-radius: var(--r-lg);
padding: var(--sp-md);
box-shadow: var(--shadow-soft);
position: relative;
}
.voice-card::before {
content: "＂";
position: absolute;
top: 16px;
right: 28px;
font-family: var(--font-serif);
font-size: 80px;
line-height: 1;
color: var(--rose);
opacity: .2;
}
.voice-quote {
font-family: var(--font-serif);
font-size: var(--fs-base);
line-height: 2.1;
color: var(--text);
margin-bottom: 24px;
position: relative;
z-index: 2;
}
.voice-meta {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px dashed rgba(209, 69, 122, .15);
}
.voice-avatar {
width: 52px; height: 52px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
overflow: visible;
}
.voice-avatar::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose-soft), var(--rose-deep));
}
.voice-avatar::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 58%; height: 58%;
background: rgba(255,255,255,.92);
mask-image: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
/* 各アバターのグラデーションバリエーション */
.va-1::before { background: linear-gradient(135deg, #E68BA9, #A6334D); }
.va-2::before { background: linear-gradient(135deg, #B594A6, #8E5A7B); }
.va-3::before { background: linear-gradient(135deg, #D1457A, #8E5A7B); }
.voice-name {
font-size: 13px;
color: var(--text);
font-weight: 500;
}
.voice-name small {
color: var(--text-light);
font-size: 11px;
font-weight: 400;
display: block;
}
/* ==================================================================
FAQ
================================================================== */
.faq-list {
max-width: 820px;
margin: 0 auto;
display: grid;
gap: 16px;
}
.faq-item {
background: #fff;
border-radius: var(--r-md);
padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 36px);
box-shadow: var(--shadow-soft);
}
.faq-q {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(15px, 1.6vw, 17px);
padding-left: 36px;
position: relative;
line-height: 1.7;
}
.faq-q::before {
content: "Q";
position: absolute;
left: 0; top: -2px;
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose), var(--rose-deep));
color: #fff;
font-family: var(--font-en);
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
.faq-a {
margin-top: 16px;
padding-top: 16px;
padding-left: 36px;
color: var(--text-sub);
font-size: 14px;
line-height: 2;
border-top: 1px dashed rgba(209, 69, 122, .15);
position: relative;
}
.faq-a::before {
content: "A";
position: absolute;
left: 0; top: 14px;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--pink-pale);
color: var(--rose-deep);
font-family: var(--font-en);
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
/* ==================================================================
対応エリア
================================================================== */
.area-grid {
display: grid;
gap: clamp(32px, 4vw, 64px);
align-items: center;
}
.area-map {
aspect-ratio: 1/1;
background: linear-gradient(135deg, var(--pink-pale), var(--purple-soft));
border-radius: 58% 42% 55% 45% / 50% 58% 42% 50%;
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.9);
font-family: var(--font-en);
font-size: 12px;
letter-spacing: 0.2em;
}
.area-list {
display: grid;
gap: 20px;
}
.area-item h4 {
font-size: 17px;
margin-bottom: 6px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(209, 69, 122, .15);
}
.area-item p { color: var(--text-sub); font-size: 13px; line-height: 1.8; }
/* ==================================================================
テーブル（料金・オプション）
================================================================== */
.info-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-soft);
font-size: 14px;
}
.info-table th, .info-table td {
padding: clamp(14px, 2vw, 20px) clamp(16px, 3vw, 28px);
text-align: left;
border-bottom: 1px solid rgba(209, 69, 122, .1);
}
.info-table th {
color: var(--text-sub);
font-weight: 500;
background: var(--pink-blush);
}
.info-table tr:last-child td,
.info-table tr:last-child th { border-bottom: none; }
.info-table td.num { text-align: right; font-family: var(--font-en); color: var(--rose-deep); font-weight: 500; }
/* ==================================================================
フォーム
================================================================== */
.form-group {
display: grid;
gap: 10px;
margin-bottom: clamp(20px, 2.5vw, 28px);
}
.form-group label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.05em;
}
.form-group label .req {
margin-left: 8px;
font-family: var(--font-en);
font-size: 10px;
color: #fff;
background: var(--rose);
padding: 3px 8px;
border-radius: var(--r-pill);
letter-spacing: 0.1em;
vertical-align: 1px;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 16px 20px;
border: 1px solid rgba(58, 43, 51, .15);
background: #fff;
border-radius: var(--r-md);
font-size: 15px;
font-family: inherit;
transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--rose);
box-shadow: 0 0 0 4px rgba(209, 69, 122, .12);
}
.form-group textarea { min-height: 160px; resize: vertical; }
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13px;
color: var(--text-sub);
line-height: 1.7;
}
.checkbox-label input { width: 18px; height: 18px; margin-top: 4px; }
.checkbox-label a { color: var(--rose); text-decoration: underline; }
/* ==================================================================
相続相談（控えめCTA）
================================================================== */
.inheritance-card {
background: #fff;
border-radius: var(--r-xl);
padding: clamp(40px, 5vw, 64px);
text-align: center;
max-width: 720px;
margin: clamp(48px, 6vw, 80px) auto 0;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.inheritance-card::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 180px; height: 180px;
background: var(--pink-blush);
border-radius: 50%;
opacity: .5;
}
.inheritance-card > * { position: relative; z-index: 2; }
.inheritance-card h3 {
font-size: var(--fs-lg);
margin-bottom: 12px;
}
.inheritance-card p {
color: var(--text-sub);
font-size: 14px;
line-height: 2;
margin-bottom: 28px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* ==================================================================
フッター
================================================================== */
.site-footer {
background: linear-gradient(160deg, #3A2B33 0%, #5a3d48 100%);
color: #fff;
padding: clamp(72px, 10vw, 120px) 0 40px;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
top: -80px; left: -80px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(209, 69, 122, .2), transparent);
border-radius: 50%;
}
.site-footer::after {
content: "";
position: absolute;
bottom: -100px; right: -60px;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(142, 90, 123, .25), transparent);
border-radius: 50%;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: var(--sp-lg);
margin-bottom: var(--sp-xl);
position: relative;
z-index: 2;
}
.footer-grid h4 {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 500;
color: #fff;
margin-bottom: 18px;
letter-spacing: 0.05em;
}
.footer-grid ul {
list-style: none;
padding: 0; margin: 0;
}
.footer-grid li { margin-bottom: 10px; }
.footer-grid a {
color: rgba(255,255,255,.7);
text-decoration: none;
font-size: 13px;
transition: color .2s;
}
.footer-grid a:hover { color: var(--rose-soft); }
.footer-bottom {
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,.1);
display: flex;
justify-content: space-between;
font-size: 11px;
color: rgba(255,255,255,.5);
letter-spacing: 0.1em;
font-family: var(--font-en);
flex-wrap: wrap;
gap: 16px;
position: relative;
z-index: 2;
}
/* フッター用ロゴ */
.site-footer .logo { color: #fff; }
.site-footer .logo::before {
box-shadow: inset 0 0 0 4px rgba(255,255,255,.2), 0 4px 12px rgba(209,69,122,.5);
}
.site-footer .logo small { color: rgba(255,255,255,.5); }
/* ==================================================================
下層ページ：ページヘッダー（breadcrumb + title）
================================================================== */
.page-head {
padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 6vw, 80px);
text-align: center;
background:
radial-gradient(ellipse at 20% 50%, var(--pink-pale) 0%, transparent 45%),
radial-gradient(ellipse at 80% 50%, rgba(142, 90, 123, .15) 0%, transparent 45%),
var(--ivory);
position: relative;
overflow: hidden;
}
.breadcrumb {
font-size: 11px;
font-family: var(--font-en);
letter-spacing: 0.15em;
color: var(--text-light);
margin-bottom: 20px;
}
.breadcrumb a {
color: var(--text-light);
text-decoration: none;
transition: color .2s;
}
.breadcrumb a:hover { color: var(--rose); }
.breadcrumb span { margin: 0 10px; }
.page-head h1 {
font-size: clamp(28px, 4.5vw, 42px);
margin-bottom: 16px;
}
.page-head p {
color: var(--text-sub);
font-size: clamp(13px, 1.5vw, 15px);
line-height: 2;
max-width: 560px;
margin: 0 auto;
}
/* ==================================================================
Before / After
================================================================== */
.before-after {
container-type: inline-size;
container-name: ba;
display: grid;
gap: clamp(20px, 3vw, 40px);
max-width: 840px;
margin: 0 auto;
}
.ba-item { text-align: left; position: relative; }
.ba-photo {
aspect-ratio: 4/3;
border-radius: var(--r-lg);
box-shadow: var(--shadow-soft);
overflow: hidden;
position: relative;
background: var(--pink-pale);
margin-bottom: 0;
}
.ba-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ba-label {
position: absolute;
top: 14px;
left: 14px;
background: rgba(255, 255, 255, .95);
color: var(--rose-deep);
padding: 5px 14px;
border-radius: 999px;
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: .15em;
box-shadow: 0 2px 8px rgba(166, 51, 77, .12);
z-index: 2;
}
.ba-caption {
font-size: clamp(12px, 1.2vw, 13px);
color: var(--text-sub);
line-height: 1.75;
margin-top: 12px;
padding: 0 2px;
}
.ba-effects {
display: flex;
flex-wrap: wrap;
gap: 20px 32px;
justify-content: center;
margin: clamp(40px, 5vw, 64px) auto 0;
padding-top: clamp(32px, 4vw, 48px);
border-top: 1px solid rgba(209, 69, 122, .15);
max-width: 840px;
}
.ba-effect-item {
display: flex;
align-items: flex-start;
gap: 14px;
flex: 1;
min-width: 200px;
max-width: 260px;
}
.ba-effect-icon {
font-size: 22px;
color: var(--rose);
flex-shrink: 0;
margin-top: 1px;
line-height: 1;
}
.ba-effect-title {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 500;
color: var(--text);
display: block;
margin-bottom: 5px;
}
.ba-effect-item p {
font-size: 12px;
color: var(--text-sub);
line-height: 1.7;
}
/* ==================================================================
代表メッセージ
================================================================== */
.about-grid {
container-type: inline-size;
container-name: about;
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-xl);
align-items: center;
}
.about-photo {
aspect-ratio: 3/4;
background: linear-gradient(135deg, var(--pink-pale), var(--purple-soft));
border-radius: 55% 45% 48% 52% / 42% 55% 45% 58%;
box-shadow: var(--shadow-soft);
animation: blobMorph 22s ease-in-out infinite reverse;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.9);
font-family: var(--font-en);
font-size: 12px;
letter-spacing: 0.2em;
overflow: hidden;
}
.about-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.about-content h2 {
font-size: var(--fs-3xl);
margin: 16px 0 24px;
line-height: 1.6;
}
.about-content p {
color: var(--text-sub);
line-height: 2.2;
margin-bottom: 16px;
font-size: 14px;
}
.signature {
margin-top: 28px;
font-family: var(--font-serif);
font-size: 16px;
letter-spacing: 0.1em;
color: var(--text);
}
/* ========================= 代表メッセージ（ダークトーン） ========================= */
.rep-section {
container-type: inline-size;
container-name: rep;
background: linear-gradient(160deg, #2C1A22 0%, #4A1830 55%, #7A2848 100%);
position: relative;
overflow: hidden;
}
.rep-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 75% 20%, rgba(212,83,126,.22) 0%, transparent 55%),
radial-gradient(ellipse at 15% 85%, rgba(240,180,200,.08) 0%, transparent 50%);
pointer-events: none;
}
.rep-inner {
max-width: 840px;
margin: 0 auto;
padding: clamp(64px, 8vw, 96px) clamp(24px, 6vw, 80px);
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-lg);
align-items: start;
}
.rep-left { text-align: center; }
.rep-avatar {
width: 110px; height: 110px;
border-radius: 50%;
background: linear-gradient(135deg, #4A1830, #C0435F);
border: 3px solid rgba(244,184,200,.35);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
position: relative;
}
.rep-avatar::after {
content: "";
width: 52%; height: 52%;
background: rgba(255,255,255,.85);
mask-image: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.rep-company { font-size: 10px; color: rgba(255,255,255,.45); letter-spacing: 1px; margin-bottom: 4px; }
.rep-title { font-size: 10px; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.rep-name { font-family: var(--font-serif); font-size: 17px; color: #fff; font-weight: 700; }
.rep-eyebrow {
font-size: 10px; font-weight: 700;
letter-spacing: 2px; color: #F4B8C8;
text-transform: uppercase;
margin-bottom: 24px;
}
.rep-body {
font-family: var(--font-serif);
font-size: 14px;
font-weight: 700;
color: rgba(255,255,255,.95);
line-height: 2.2;
}
.rep-body p { margin-bottom: 16px; }
.rep-highlight { color: #F4B8C8; font-weight: 600; }
.rep-closing {
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.15);
font-size: 12px;
color: rgba(255,255,255,.5);
font-style: italic;
}
.rep-btn {
background: rgba(255,255,255,.12);
color: rgba(255,255,255,.9);
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(6px);
}
.rep-btn:hover {
background: rgba(255,255,255,.2);
color: #fff;
border-color: rgba(255,255,255,.5);
}
/* ==================================================================
最終CTA（ダーク背景）
================================================================== */
.cta-final {
padding: clamp(96px, 12vw, 160px) 0;
background: linear-gradient(135deg, #3A2B33 0%, #5a3d48 60%, #8E5A7B 100%);
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-final::before, .cta-final::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: .35;
z-index: 1;
}
.cta-final::before {
width: 360px; height: 360px;
top: -100px; left: -100px;
background: var(--rose);
}
.cta-final::after {
width: 320px; height: 320px;
bottom: -120px; right: -80px;
background: var(--purple);
}
.cta-final .wrap { position: relative; z-index: 2; }
.cta-final .kicker { color: var(--rose-soft); }
.cta-final .kicker::before { background: var(--rose-soft); }
.cta-final h2 {
color: #fff;
font-size: clamp(26px, 4.2vw, 40px);
margin: 16px 0 24px;
line-height: 1.6;
}
.cta-final p {
color: rgba(255, 255, 255, .75);
font-size: var(--fs-base);
max-width: 520px;
margin: 0 auto clamp(32px, 4vw, 48px);
line-height: 2;
}
.cta-final .btn-group {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 400px;
margin: 0 auto;
}
.cta-final .btn-outline {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .4);
}
.cta-final .btn-outline:hover {
background: rgba(255, 255, 255, .1);
border-color: #fff;
color: #fff;
}
/* 決済情報バッジ */
.cta-payment-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: clamp(32px, 4vw, 48px);
}
.cta-payment-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.22);
border-radius: var(--r-pill);
padding: 8px 16px;
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,.9);
backdrop-filter: blur(6px);
}
.cta-pay-icon {
width: 16px; height: 16px;
display: inline-block;
background: rgba(255,255,255,.85);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
flex-shrink: 0;
}
.cta-pay-icon-stripe {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.cta-pay-icon-card {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.cta-pay-icon-clock {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.cta-pay-icon-cal {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.cta-billing-note {
margin-top: 16px;
font-size: 11.5px;
color: rgba(255,255,255,.52);
text-align: center;
line-height: 1.8;
}
/* ==================================================================
ノート（差し替え用）
================================================================== */
.dummy-note {
font-size: 11px;
color: var(--text-light);
text-align: center;
font-family: var(--font-en);
letter-spacing: 0.2em;
padding: 8px 0;
background: rgba(209, 69, 122, .04);
border-bottom: 1px dashed rgba(209, 69, 122, .15);
}
/* ==================================================================
v0.2 追加：kitayo 構成ベース セクション
================================================================== */
/* ---------- Hero badge ---------- */
.hero-badge {
display: inline-block;
padding: 6px 18px;
border-radius: 999px;
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: .25em;
margin-bottom: 24px;
}
/* ---------- Hero（kt：価格フック＋ビジュアル） ---------- */
.hero-kt { container-type: inline-size; container-name: hero; padding-top: clamp(48px, 8vw, 100px); padding-bottom: clamp(48px, 8vw, 120px); }
.hero-kt-inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-xl);
align-items: start;
}
.hero-kt-copy h1 {
font-size: var(--fs-3xl);
line-height: 1.5;
margin-bottom: clamp(20px, 3vw, 32px);
font-weight: 500;
}
.hero-kt-copy h1 em {
font-style: normal;
color: var(--rose);
font-weight: 700;
}
.hero-kt-copy .lead {
color: var(--text-sub);
font-size: clamp(14px, 1.7vw, 17px);
line-height: 2.1;
margin-bottom: clamp(28px, 3.5vw, 36px);
}
/* 価格フック */
.hero-hook {
background: linear-gradient(135deg, #fff 0%, var(--pink-blush) 100%);
border: 1px solid rgba(209, 69, 122, .18);
border-radius: var(--r-xl);
padding: clamp(20px, 2.8vw, 28px) clamp(24px, 3vw, 32px);
box-shadow: var(--shadow-soft);
margin-bottom: clamp(24px, 3vw, 32px);
max-width: 520px;
position: relative;
overflow: hidden;
}
.hero-hook::before {
content: "";
position: absolute;
top: -24px; right: -24px;
width: 90px; height: 90px;
background: radial-gradient(circle, var(--rose-soft) 0 40%, transparent 42%);
border-radius: 50%;
opacity: .5;
}
.hook-label {
display: inline-block;
background: linear-gradient(135deg, var(--rose), var(--rose-deep));
color: #fff;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
padding: 6px 16px;
border-radius: var(--r-pill);
margin-bottom: 12px;
}
.hook-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 8px;
}
.hook-old {
font-family: var(--font-en);
font-size: clamp(15px, 1.6vw, 18px);
color: var(--text-light);
text-decoration: line-through;
}
.hook-arrow {
color: var(--rose);
font-family: var(--font-en);
font-size: 18px;
}
.hook-new {
font-family: var(--font-serif);
font-size: clamp(26px, 4vw, 36px);
color: var(--rose-deep);
font-weight: 500;
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.hook-new em {
font-style: normal;
font-size: clamp(30px, 4.6vw, 42px);
}
.hook-new small {
font-family: var(--font-sans);
font-size: 11px;
color: var(--text-sub);
font-weight: 400;
}
.hook-note {
font-size: 12px;
color: var(--text-sub);
letter-spacing: 0.05em;
}
/* Hero ビジュアル（家族写真） */
.hero-kt-visual {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
display: flex;
align-items: flex-start;
justify-content: flex-end;
overflow: hidden;
}
.hero-family-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center top;
transform-origin: top right;
filter: drop-shadow(0 20px 40px rgba(58,43,51,.12));
}
/* ---------- Quick nav (4 boxes) ---------- */
.quick-nav-section { padding: clamp(64px, 9vw, 120px) 0; }
.quick-nav {
display: grid;
gap: var(--sp-sm);
grid-template-columns: 1fr 1fr;
}
.quick-item {
background: #fff;
border-radius: var(--r-xl);
padding: var(--sp-md) clamp(20px, 2.5vw, 28px);
text-decoration: none;
text-align: center;
box-shadow: var(--shadow-soft);
transition: transform .3s ease, box-shadow .3s ease;
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
position: relative;
overflow: hidden;
}
.quick-item::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 100px; height: 100px;
background: radial-gradient(circle, var(--pink-pale) 0 55%, transparent 56%);
border-radius: 50%;
opacity: .5;
transition: transform .4s ease;
}
.quick-item:hover {
transform: translateY(-6px);
box-shadow: 0 36px 60px -20px rgba(209, 69, 122, .22);
}
.quick-item:hover::before { transform: scale(1.3); }
.quick-icon {
width: clamp(56px, 7vw, 72px);
height: clamp(56px, 7vw, 72px);
border-radius: 50%;
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-rose);
}
.quick-icon::before {
content: "";
width: 50%; height: 50%;
background: #fff;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.quick-icon-map::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.quick-icon-flow::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.quick-icon-about::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.quick-icon-star::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.quick-label {
font-family: var(--font-serif);
font-size: clamp(14px, 1.7vw, 17px);
font-weight: 500;
line-height: 1.5;
position: relative; z-index: 2;
}
.quick-sub {
font-family: var(--font-en);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--rose);
text-transform: uppercase;
position: relative; z-index: 2;
}
.quick-nav-cta {
text-align: center;
margin-top: clamp(32px, 4vw, 48px);
}
.quick-nav-cta .voice-ico {
color: var(--rose);
font-size: 16px;
}
/* ---------- Intro video section ---------- */
.intro-video {
max-width: 860px;
margin: 0 auto;
}
.intro-video-frame {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--purple) 0%, var(--rose-deep) 100%);
border-radius: var(--r-xl);
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.85);
font-family: var(--font-en);
font-size: 12px;
letter-spacing: 0.2em;
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.intro-video-frame::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,255,255,.12), transparent 40%);
}
.play-btn {
position: absolute;
width: clamp(64px, 8vw, 84px);
height: clamp(64px, 8vw, 84px);
border-radius: 50%;
background: #fff;
color: var(--rose);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 40px -12px rgba(0,0,0,.3);
padding-left: 6px;
}
.video-label { position: relative; z-index: 2; opacity: .6; }
.intro-video-caption {
text-align: center;
margin-top: 16px;
font-size: 12px;
color: var(--text-light);
font-family: var(--font-en);
letter-spacing: 0.15em;
}
/* ---------- News list ---------- */
.section-head--left {
text-align: left;
max-width: none;
margin-bottom: var(--sp-lg);
}
.section-head--left h2 {
font-size: var(--fs-2xl);
}
.news-list {
list-style: none;
padding: 0;
margin: 0;
max-width: 860px;
background: #fff;
border-radius: var(--r-lg);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.news-item {
display: grid;
grid-template-columns: auto auto 1fr;
gap: clamp(12px, 2vw, 20px);
align-items: center;
padding: clamp(16px, 2vw, 22px) clamp(20px, 3vw, 32px);
border-bottom: 1px dashed rgba(209, 69, 122, .12);
}
.news-item:last-child { border-bottom: none; }
.news-date {
font-family: var(--font-en);
font-size: 12px;
color: var(--text-sub);
letter-spacing: 0.1em;
white-space: nowrap;
}
.news-tag {
font-size: 11px;
letter-spacing: 0.1em;
padding: 4px 12px;
border-radius: var(--r-pill);
font-weight: 500;
white-space: nowrap;
}
.news-tag-media { background: var(--pink-pale); color: var(--rose-deep); }
.news-tag-info { background: rgba(142, 90, 123, .15); color: var(--purple); }
.news-title {
color: var(--text);
text-decoration: none;
font-size: clamp(13px, 1.5vw, 15px);
line-height: 1.7;
transition: color .2s;
}
.news-title:hover { color: var(--rose); }
/* ---------- Japan map ---------- */
.jpmap-wrap {
display: grid;
gap: var(--sp-lg);
align-items: center;
max-width: 900px;
margin: 0 auto;
}
.jpmap {
border-radius: var(--r-xl);
box-shadow: var(--shadow-soft);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.kanto-map-img {
width: 100%;
max-width: 520px;
height: auto;
display: block;
}
.area-tags {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: clamp(12px, 1.8vw, 18px);
}
.area-tags li {
font-family: var(--font-serif);
font-size: clamp(14px, 1.7vw, 17px);
font-weight: 500;
padding: clamp(14px, 2vw, 18px) clamp(18px, 2.5vw, 24px);
background: #fff;
border-radius: var(--r-md);
box-shadow: var(--shadow-soft);
display: flex;
align-items: center;
gap: 14px;
}
.tag-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose), var(--rose-deep));
flex-shrink: 0;
}
/* ---------- Flow icons (7 steps) ---------- */
.flow-icons {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: clamp(16px, 2.5vw, 24px);
grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
}
.flow-icon {
background: #fff;
border-radius: var(--r-lg);
padding: clamp(20px, 2.5vw, 28px) clamp(16px, 2vw, 20px);
text-align: center;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
}
.fi-num {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--rose), var(--rose-deep));
color: #fff;
font-family: var(--font-en);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
padding: 5px 14px;
border-radius: var(--r-pill);
box-shadow: var(--shadow-rose);
}
.fi-art {
width: clamp(48px, 6vw, 64px);
height: clamp(48px, 6vw, 64px);
border-radius: 50%;
background: linear-gradient(135deg, var(--pink-pale), var(--purple-soft));
margin-top: 10px;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.fi-art::after {
content: "";
width: 55%;
height: 55%;
background: #fff;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.fi-art-chat::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fi-art-list::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fi-art-calendar::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fi-art-clean::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fi-art-photo::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fi-art-pay::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fi-art-quote::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.flow-icon-tag {
display: inline-block;
font-size: 10px;
font-weight: 600;
color: var(--rose-deep);
background: var(--pink-blush);
border: 1px solid var(--rose);
padding: 3px 10px;
border-radius: var(--r-pill);
letter-spacing: 0.06em;
margin-top: 4px;
}
.flow-icon strong {
font-family: var(--font-serif);
font-size: var(--fs-base);
font-weight: 500;
display: block;
}
.flow-icon span:last-child {
font-size: 11.5px;
color: var(--text-sub);
line-height: 1.7;
}
/* ========================= FLOW（縦タイムライン） ========================= */
.flow-timeline {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 680px;
}
.flow-timeline li {
list-style: none;
}
/* 既存の.flow-stepスタイルを完全上書き（親セレクタで優先度アップ） */
.flow-timeline .flow-step {
display: flex;
gap: 0;
align-items: stretch;
background: transparent;
border-radius: 0;
padding: 0;
padding-left: 0;
box-shadow: none;
position: static;
}
.flow-step-left {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 60px;
}
.flow-step-circle {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose), var(--rose-deep));
color: #fff;
font-family: var(--font-en);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-rose);
flex-shrink: 0;
position: relative;
z-index: 1;
}
.flow-step-connector {
width: 2px;
flex: 1;
min-height: 48px;
background: linear-gradient(to bottom, var(--rose-soft), var(--pink-pale));
margin: 0;
}
.flow-step-body {
flex: 1;
min-width: 0;
padding: 0 0 44px 20px;
}
.flow-timeline .flow-step-last .flow-step-body {
padding-bottom: 0;
}
.flow-step-label {
display: block;
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--rose);
text-transform: uppercase;
margin-bottom: 6px;
margin-top: 12px;
}
.flow-step-title {
display: block;
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
line-height: 1.4;
}
.flow-step-desc {
font-size: 14px;
color: var(--text-sub);
line-height: 1.8;
margin: 0 0 10px;
}
/* ---------- Pain grid (4 boxes) ---------- */
/* ========================= TARGET CARDS（こんな方へ） ========================= */
.target-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: clamp(16px, 2.5vw, 24px);
margin-top: clamp(40px, 5vw, 56px);
}
.target-card {
background: #fff;
border-radius: var(--r-lg);
padding: clamp(32px, 4vw, 44px) clamp(24px, 3vw, 36px);
text-align: center;
box-shadow: var(--shadow-soft);
border: 1px solid rgba(209, 69, 122, .07);
transition: transform .25s ease, box-shadow .25s ease;
}
.target-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-rose);
}
.target-art {
width: clamp(60px, 7.5vw, 72px);
height: clamp(60px, 7.5vw, 72px);
margin: 0 auto 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pink-pale), var(--purple-soft));
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.target-art::after {
content: "";
width: 50%; height: 50%;
background: var(--rose-deep);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.target-art-work::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.target-art-map::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.target-art-care::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.target-card h3 {
font-size: clamp(16px, 1.7vw, 19px);
color: var(--text);
margin-bottom: 16px;
line-height: 1.6;
}
.target-card p {
font-size: 14px;
color: var(--text-sub);
line-height: 1.85;
}
.target-quotes {
list-style: none;
padding: 0; margin: clamp(40px, 5vw, 56px) auto 0;
max-width: 560px;
display: flex;
flex-direction: column;
gap: 12px;
}
.target-quotes li {
font-family: var(--font-serif);
font-size: clamp(13.5px, 1.5vw, 15px);
color: var(--text-sub);
background: #fff;
border-left: 3px solid var(--rose-soft);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
padding: 12px 20px;
line-height: 1.8;
}
.target-tagline {
text-align: center;
margin-top: clamp(36px, 4vw, 48px);
font-family: var(--font-serif);
font-size: clamp(18px, 2vw, 22px);
font-weight: 900;
color: var(--rose-deep);
line-height: 2.2;
}
.pain-grid {
display: grid;
gap: clamp(16px, 2.4vw, 24px);
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.pain-item {
background: #fff;
border-radius: var(--r-lg);
padding: var(--sp-md) clamp(20px, 2.5vw, 28px);
text-align: center;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.pain-item::before {
content: "";
position: absolute;
top: -30px; right: -30px;
width: 80px; height: 80px;
background: radial-gradient(circle, var(--pink-pale) 0 60%, transparent 62%);
border-radius: 50%;
opacity: .7;
}
.pain-art {
width: clamp(60px, 7.5vw, 80px);
height: clamp(60px, 7.5vw, 80px);
margin: 0 auto 18px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pink-pale), var(--purple-soft));
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
.pain-art::after {
content: "";
width: 52%; height: 52%;
background: var(--rose-deep);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.pain-art-far::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.pain-art-body::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.pain-art-busy::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.pain-art-heart::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.pain-item h3 {
font-size: clamp(15px, 1.7vw, 18px);
margin-bottom: 12px;
line-height: 1.6;
position: relative; z-index: 2;
}
.pain-item p {
color: var(--text-sub);
font-size: 12.5px;
line-height: 1.9;
position: relative; z-index: 2;
}
/* ---------- Feature blocks (3 with photos, zigzag) ---------- */
.feature-blocks {
display: grid;
gap: clamp(48px, 7vw, 96px);
}
.feature-block {
display: grid;
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.feature-photo {
display: flex;
align-items: center;
justify-content: center;
}
.feature-photo img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
filter: drop-shadow(0 16px 32px rgba(58,43,51,.2));
}
.feature-photo-1 { }
.feature-photo-2 { }
.feature-photo-3 { }
.feature-num {
font-family: var(--font-en);
font-size: clamp(44px, 6vw, 72px);
font-weight: 300;
color: var(--rose);
line-height: 1;
opacity: .7;
display: block;
margin-bottom: 16px;
}
.feature-text h3 {
font-size: var(--fs-xl);
margin-bottom: 20px;
line-height: 1.6;
}
.feature-text p {
color: var(--text-sub);
font-size: 14px;
line-height: 2.1;
margin-bottom: 14px;
}
/* ---------- About home (representative) photo placeholder text ---------- */
.about-photo span {
position: relative;
z-index: 2;
}
/* ---------- CTA sky (poetic final) ---------- */
.cta-sky {
background: linear-gradient(170deg, #3A2B33 0%, #5a3d48 40%, #8E5A7B 75%, #B594A6 100%);
}
.sky-cloud {
position: absolute;
background: rgba(255, 255, 255, .08);
border-radius: 50%;
filter: blur(30px);
z-index: 1;
}
.cloud-1 { width: 280px; height: 140px; top: 20%; left: 8%; }
.cloud-2 { width: 340px; height: 160px; top: 55%; right: 5%; opacity: .7; }
.cloud-3 { width: 220px; height: 110px; bottom: 15%; left: 30%; opacity: .5; }
/* ========================================================================
v0.2 — Cases (掃除事例)
======================================================================== */
/* フィルタータグ */
.case-tags {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.case-tag {
padding: 10px 22px;
border-radius: 999px;
border: 1px solid rgba(166, 51, 77, .15);
background: #fff;
color: var(--text-sub);
font-size: 13px;
font-weight: 500;
letter-spacing: .05em;
cursor: pointer;
transition: all .25s ease;
user-select: none;
}
.case-tag:hover {
color: var(--rose);
border-color: rgba(209, 69, 122, .35);
transform: translateY(-1px);
}
.case-tag-active {
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(166, 51, 77, .25);
}
.case-tag-active:hover {
color: #fff;
transform: translateY(-1px);
}
/* 事例ブロック */
.case-block {
padding-top: clamp(72px, 8vw, 112px);
padding-bottom: clamp(72px, 8vw, 112px);
}
.case-head {
text-align: center;
margin-bottom: clamp(40px, 5vw, 64px);
}
.case-no {
display: inline-block;
font-family: var(--font-en);
font-size: 13px;
letter-spacing: .25em;
color: var(--rose);
font-weight: 500;
padding: 6px 18px;
border: 1px solid rgba(209, 69, 122, .3);
border-radius: 999px;
margin-bottom: 20px;
}
.case-head h2 {
font-size: var(--fs-2xl);
line-height: 1.55;
margin-bottom: 24px;
}
.case-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
justify-content: center;
}
.meta-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
background: var(--pink-blush);
color: var(--rose-deep);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
letter-spacing: .04em;
}
/* Before / After */
.before-after {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
max-width: 960px;
margin: 0 auto clamp(40px, 5vw, 64px);
}
.ba-item {
position: relative;
}
.ba-photo {
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
background: var(--pink-pale);
overflow: hidden;
position: relative;
}
/* ストーリー本文 */
.case-story {
max-width: 760px;
margin: 0 auto;
}
.case-story h3 {
font-size: var(--fs-lg);
color: var(--rose-deep);
margin: clamp(32px, 4vw, 48px) 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(209, 69, 122, .18);
position: relative;
}
.case-story h3::before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 48px;
height: 2px;
background: linear-gradient(90deg, var(--rose) 0%, var(--purple) 100%);
}
.case-story h3:first-child { margin-top: 0; }
.case-story p {
color: var(--text-sub);
line-height: 2.1;
font-size: 14px;
}
.case-story ul {
list-style: none;
padding: 0;
margin: 0;
}
.case-story ul li {
position: relative;
padding: 10px 0 10px 28px;
color: var(--text-sub);
font-size: 14px;
line-height: 1.9;
border-bottom: 1px dashed rgba(209, 69, 122, .12);
}
.case-story ul li::before {
content: "";
position: absolute;
left: 0;
top: 17px;
width: 14px;
height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose) 0%, var(--purple) 100%);
opacity: .25;
}
.case-story ul li::after {
content: "";
position: absolute;
left: 4px;
top: 21px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rose);
}
.case-quote {
margin: 32px 0 0;
padding: 32px 28px;
background: linear-gradient(135deg, #fff 0%, var(--pink-blush) 100%);
border-radius: var(--r-lg);
border-left: 3px solid var(--rose);
font-family: var(--font-ja-serif);
font-size: var(--fs-md);
line-height: 2.0;
color: var(--text-main);
position: relative;
box-shadow: 0 4px 20px rgba(166, 51, 77, .06);
}
.case-quote::before {
content: "“";
position: absolute;
top: -8px;
left: 20px;
font-family: var(--font-en);
font-size: 72px;
line-height: 1;
color: var(--rose);
opacity: .25;
}
/* 他の事例（ミニリスト） */
.case-list-mini {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: 24px;
}
.case-mini {
display: block;
background: #fff;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(166, 51, 77, .08);
text-decoration: none;
color: inherit;
transition: all .3s ease;
}
.case-mini:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(166, 51, 77, .14);
}
.case-mini-photo {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--pink-blush) 0%, var(--pink-pale) 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(166, 51, 77, .35);
font-family: var(--font-en);
letter-spacing: .1em;
font-size: 12px;
position: relative;
overflow: hidden;
}
.case-mini-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.case-mini-photo::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .4) 0%, transparent 55%);
}
.case-mini-photo span { position: relative; z-index: 2; }
.case-mini-info {
padding: 24px 22px 28px;
}
.case-mini-info .meta-chip {
margin-bottom: 14px;
}
.case-mini-info h4 {
font-size: 16px;
line-height: 1.7;
margin-bottom: 10px;
color: var(--text-main);
}
.case-mini-info p {
color: var(--text-sub);
font-size: 13px;
line-height: 1.9;
}
/* ========================================================================
v0.2 — Column (お墓コラム)
======================================================================== */
/* 注目記事 */
.column-featured {
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: #fff;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 8px 36px rgba(166, 51, 77, .10);
text-decoration: none;
color: inherit;
transition: all .35s ease;
position: relative;
}
.column-featured:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(166, 51, 77, .16);
}
.column-featured-photo {
aspect-ratio: 4 / 3;
background:
linear-gradient(135deg, var(--pink-blush) 0%, var(--pink-pale) 50%, #E8D4E0 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(166, 51, 77, .35);
font-family: var(--font-en);
letter-spacing: .1em;
font-size: 13px;
position: relative;
overflow: hidden;
}
.column-featured-photo::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .45) 0%, transparent 50%),
radial-gradient(circle at 80% 75%, rgba(142, 90, 123, .2) 0%, transparent 55%);
}
.column-featured-photo span { position: relative; z-index: 2; }
.column-featured-body {
padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 44px);
display: flex;
flex-direction: column;
justify-content: center;
}
.column-featured-body h3 {
font-size: var(--fs-xl);
line-height: 1.65;
margin: 16px 0 20px;
color: var(--text-main);
}
.column-featured-body p {
color: var(--text-sub);
font-size: 14px;
line-height: 2.0;
margin-bottom: 24px;
}
/* メタ情報 */
.col-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
font-size: 12px;
letter-spacing: .04em;
}
.col-cat {
display: inline-block;
padding: 5px 14px;
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
border-radius: 999px;
font-weight: 500;
font-size: 11px;
letter-spacing: .08em;
}
.col-date {
color: var(--rose-deep);
font-family: var(--font-en);
font-weight: 500;
letter-spacing: .1em;
}
.col-read {
color: var(--text-sub);
position: relative;
padding-left: 14px;
}
.col-read::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-sub);
opacity: .35;
transform: translateY(-50%);
}
.col-read-more {
display: inline-flex;
align-items: center;
color: var(--rose);
font-weight: 500;
font-size: 14px;
letter-spacing: .04em;
transition: gap .25s ease;
gap: 6px;
}
.column-featured:hover .col-read-more {
gap: 12px;
}
/* カラムグリッド */
.column-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: 28px;
}
.col-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(166, 51, 77, .08);
text-decoration: none;
color: inherit;
transition: all .3s ease;
height: 100%;
}
.col-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 40px rgba(166, 51, 77, .15);
}
.col-card-photo {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--pink-blush) 0%, var(--pink-pale) 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(166, 51, 77, .35);
font-family: var(--font-en);
letter-spacing: .1em;
font-size: 12px;
position: relative;
overflow: hidden;
}
.col-card-photo::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 35%, rgba(255, 255, 255, .4) 0%, transparent 55%),
radial-gradient(circle at 75% 70%, rgba(209, 69, 122, .12) 0%, transparent 55%);
}
.col-card-photo span { position: relative; z-index: 2; }
.col-card:nth-child(2n) .col-card-photo {
background: linear-gradient(135deg, #F5E6EE 0%, #EFD9E5 100%);
}
.col-card:nth-child(3n) .col-card-photo {
background: linear-gradient(135deg, var(--pink-pale) 0%, #F0E2E9 100%);
}
.col-card-body {
padding: 22px 22px 28px;
flex: 1;
display: flex;
flex-direction: column;
}
.col-card-body .col-meta {
margin-bottom: 14px;
}
.col-card-body h4 {
font-size: 16px;
line-height: 1.7;
margin-bottom: 12px;
color: var(--text-main);
letter-spacing: .01em;
}
.col-card-body p {
color: var(--text-sub);
font-size: 13px;
line-height: 1.95;
flex: 1;
}
/* ========================================================================
v0.2 — Price page (料金について)
======================================================================== */
/* タブナビ（視覚演出） */
.price-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.price-tab {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border-radius: 999px;
border: 1px solid rgba(166, 51, 77, .15);
background: #fff;
color: var(--text-sub);
font-size: 13px;
font-weight: 500;
letter-spacing: .05em;
cursor: pointer;
transition: all .25s ease;
user-select: none;
}
.price-tab:hover {
color: var(--rose);
border-color: rgba(209, 69, 122, .35);
transform: translateY(-1px);
}
.price-tab-active {
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(166, 51, 77, .25);
}
.price-tab-active:hover { color: #fff; }
.tab-no {
font-family: var(--font-en);
font-size: 11px;
letter-spacing: .15em;
opacity: .7;
}
/* 価格プランの注釈 */
.price-note {
max-width: 720px;
margin: clamp(32px, 4vw, 48px) auto 0;
padding: 24px 28px;
background: var(--pink-blush);
border-radius: var(--r-md);
border-left: 3px solid var(--rose);
}
.price-note p {
color: var(--text-sub);
font-size: 13px;
line-height: 2.0;
margin: 0;
}
/* 追加メニューカード */
.menu-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: 20px;
}
.menu-card {
position: relative;
padding: 32px 28px 28px;
background: #fff;
border-radius: var(--r-lg);
box-shadow: 0 4px 20px rgba(166, 51, 77, .06);
transition: all .3s ease;
overflow: hidden;
}
.menu-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--rose) 0%, var(--purple) 100%);
opacity: .8;
}
.menu-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(166, 51, 77, .12);
}
.menu-card-tag {
display: inline-block;
padding: 4px 12px;
background: var(--pink-blush);
color: var(--rose-deep);
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
border-radius: 999px;
margin-bottom: 14px;
}
.menu-card h3 {
font-size: 18px;
line-height: 1.6;
margin-bottom: 12px;
color: var(--text-main);
}
.menu-card-price {
font-family: var(--font-en);
font-size: 28px;
font-weight: 600;
color: var(--rose);
letter-spacing: .02em;
margin: 0 0 14px;
line-height: 1;
}
.menu-card-price small {
font-size: 12px;
color: var(--text-sub);
font-family: var(--font-ja-sans);
font-weight: 400;
letter-spacing: .05em;
margin-left: 4px;
}
.menu-card p {
color: var(--text-sub);
font-size: 13px;
line-height: 1.95;
margin: 0;
}
/* その他の費用 */
.others-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 24px;
max-width: 1040px;
margin: 0 auto;
}
.others-card {
padding: 32px 28px 32px;
background: #fff;
border-radius: var(--r-lg);
box-shadow: 0 6px 24px rgba(166, 51, 77, .06);
position: relative;
}
.others-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pink-blush) 0%, var(--pink-pale) 100%);
border: 2px solid rgba(209, 69, 122, .15);
margin-bottom: 20px;
}
.others-icon span {
font-family: var(--font-en);
font-size: 10px;
font-weight: 600;
color: var(--rose-deep);
letter-spacing: .1em;
text-transform: uppercase;
}
.others-card h3 {
font-size: 17px;
margin-bottom: 18px;
color: var(--text-main);
padding-bottom: 12px;
border-bottom: 1px solid rgba(209, 69, 122, .12);
}
.others-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.others-card ul li {
position: relative;
padding: 8px 0 8px 20px;
color: var(--text-sub);
font-size: 13px;
line-height: 1.8;
}
.others-card ul li::before {
content: "";
position: absolute;
left: 0;
top: 15px;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose) 0%, var(--purple) 100%);
opacity: .4;
}
/* ========================================================================
v0.2 — Area page (対応エリア — 県別アコーディオン)
======================================================================== */
.pref-accordion {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 920px;
margin: 0 auto;
}
.pref-item {
background: #fff;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(166, 51, 77, .06);
transition: all .3s ease;
}
.pref-item:hover {
box-shadow: 0 10px 32px rgba(166, 51, 77, .1);
}
.pref-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 28px;
cursor: pointer;
user-select: none;
transition: background .25s ease;
}
.pref-head:hover {
background: var(--pink-blush);
}
.pref-label {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.pref-chip {
display: inline-block;
padding: 6px 14px;
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: .15em;
border-radius: 999px;
text-transform: uppercase;
}
.pref-label h3 {
font-size: var(--fs-lg);
margin: 0;
color: var(--text-main);
line-height: 1.4;
}
.pref-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--pink-blush);
color: var(--rose-deep);
font-family: var(--font-en);
font-size: 18px;
font-weight: 300;
flex-shrink: 0;
transition: transform .3s ease;
}
.pref-item:hover .pref-toggle {
transform: rotate(90deg);
}
.pref-body {
container-type: inline-size;
container-name: pref;
padding: 0 28px 32px;
display: grid;
grid-template-columns: 1fr;
gap: 28px;
border-top: 1px dashed rgba(209, 69, 122, .18);
padding-top: 28px;
margin-top: 4px;
}
.pref-cities h4,
.pref-spots h4 {
font-size: 13px;
color: var(--rose);
letter-spacing: .08em;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(209, 69, 122, .15);
font-weight: 600;
}
.pref-cities p {
color: var(--text-sub);
font-size: 13px;
line-height: 2.0;
margin: 0;
}
.pref-spots ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
}
.pref-spots ul li {
position: relative;
padding: 6px 0 6px 16px;
color: var(--text-sub);
font-size: 13px;
line-height: 1.7;
}
.pref-spots ul li::before {
content: "";
position: absolute;
left: 0;
top: 15px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rose);
opacity: .6;
}
/* ========================================================================
v0.2 — FAQ page (accordion)
======================================================================== */
/* カテゴリジャンプナビ */
.faq-nav {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
max-width: 860px;
margin: 0 auto;
}
.faq-nav li a {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
background: #fff;
border: 1px solid rgba(166, 51, 77, .12);
border-radius: var(--r-md);
color: var(--text-sub);
text-decoration: none;
font-size: 12px;
font-weight: 500;
transition: all .25s ease;
line-height: 1.4;
}
.faq-nav li a:hover {
color: var(--rose);
border-color: rgba(209, 69, 122, .35);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(166, 51, 77, .1);
}
.faq-nav-no {
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
color: var(--rose);
background: var(--pink-blush);
padding: 4px 8px;
border-radius: 999px;
flex-shrink: 0;
}
/* カテゴリヘッダー */
.faq-section-head {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: var(--sp-lg);
padding-bottom: 24px;
border-bottom: 1px solid rgba(209, 69, 122, .15);
position: relative;
}
.faq-section-head::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 64px;
height: 2px;
background: linear-gradient(90deg, var(--rose) 0%, var(--purple) 100%);
}
.faq-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
font-family: var(--font-en);
font-size: 18px;
font-weight: 600;
letter-spacing: .05em;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(166, 51, 77, .25);
}
.faq-section-head h2 {
margin: 0;
font-size: clamp(22px, 2.8vw, 28px);
line-height: 1.4;
}
/* アコーディオン本体 */
.faq-acc {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 900px;
margin: 0 auto;
}
.faq-acc-item {
background: #fff;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 4px 16px rgba(166, 51, 77, .06);
transition: all .3s ease;
border: 1px solid rgba(166, 51, 77, .06);
}
.faq-acc-item[open] {
box-shadow: 0 10px 30px rgba(166, 51, 77, .12);
border-color: rgba(209, 69, 122, .18);
}
.faq-acc-item summary {
display: flex;
align-items: center;
gap: 18px;
padding: 22px 28px;
cursor: pointer;
user-select: none;
list-style: none;
transition: background .25s ease;
}
.faq-acc-item summary::-webkit-details-marker { display: none; }
.faq-acc-item summary:hover {
background: var(--pink-blush);
}
.faq-qmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
color: #fff;
font-family: var(--font-en);
font-weight: 600;
font-size: 14px;
letter-spacing: .05em;
flex-shrink: 0;
}
.faq-qtxt {
flex: 1;
font-size: var(--fs-base);
font-weight: 600;
color: var(--text-main);
line-height: 1.6;
letter-spacing: .02em;
}
.faq-ic {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
transition: transform .3s ease;
}
.faq-ic::before,
.faq-ic::after {
content: "";
position: absolute;
background: var(--rose);
border-radius: 2px;
transition: all .3s ease;
}
.faq-ic::before {
top: 50%;
left: 0;
width: 100%;
height: 2px;
transform: translateY(-50%);
}
.faq-ic::after {
left: 50%;
top: 0;
height: 100%;
width: 2px;
transform: translateX(-50%);
}
.faq-acc-item[open] .faq-ic::after {
transform: translateX(-50%) scaleY(0);
}
.faq-acc-body {
display: flex;
gap: 18px;
padding: 0 28px 28px;
align-items: flex-start;
border-top: 1px dashed rgba(209, 69, 122, .18);
padding-top: 22px;
margin-top: 2px;
}
.faq-amark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: var(--pink-blush);
color: var(--rose-deep);
font-family: var(--font-en);
font-weight: 600;
font-size: 14px;
letter-spacing: .05em;
flex-shrink: 0;
border: 2px solid rgba(209, 69, 122, .25);
}
.faq-acc-body > div {
flex: 1;
padding-top: 4px;
}
.faq-acc-body p {
color: var(--text-sub);
font-size: 14px;
line-height: 2.1;
margin: 0;
}
.faq-acc-body p + p {
margin-top: 12px;
}
/* ================================================================
CSS 変数エイリアス（v0.1 コンポーネント互換）
================================================================ */
:root {
--text-main: var(--text);
--font-ja-serif: var(--font-serif);
--font-ja-sans: var(--font-sans);
}
/* ================================================================
モバイルナビ オーバーレイ
================================================================ */
.mobile-nav-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(58, 43, 51, 0.55);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
}
.mobile-nav-overlay.open {
opacity: 1;
pointer-events: auto;
}
.mobile-nav-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(88vw, 360px);
background: var(--ivory);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-nav-overlay.open .mobile-nav-panel {
transform: translateX(0);
}
.mobile-nav-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--pink-pale);
}
.mobile-nav-logo {
font-family: var(--font-serif);
font-size: 18px;
color: var(--rose);
letter-spacing: 0.08em;
}
.mobile-nav-close {
appearance: none;
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: var(--text-sub);
padding: 4px 8px;
line-height: 1;
border-radius: var(--r-sm);
transition: background 0.2s;
}
.mobile-nav-close:hover {
background: var(--pink-pale);
}
.mobile-nav-links {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px 0;
}
.mobile-nav-links a {
display: block;
padding: 14px 28px;
color: var(--text);
text-decoration: none;
font-size: 15px;
font-family: var(--font-sans);
border-bottom: 1px solid rgba(241, 220, 230, 0.6);
transition: background 0.15s, color 0.15s;
}
.mobile-nav-links a:hover {
background: var(--pink-blush);
color: var(--rose);
}
.mobile-nav-cta {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
border-top: 1px solid var(--pink-pale);
}
/* ================================================================
フォーム バリデーション / サンクス状態
================================================================ */
.form-error {
color: #c0392b;
font-size: 12px;
margin-top: 6px;
padding: 4px 10px;
background: #fdf0f0;
border-radius: 6px;
border-left: 3px solid #e74c3c;
}
.field-error {
border-color: #e74c3c !important;
background: #fff8f8 !important;
}
.form-thanks {
text-align: center;
padding: clamp(48px, 8vw, 88px) 24px;
}
.thanks-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose), var(--purple));
color: #fff;
font-size: 32px;
margin-bottom: 28px;
box-shadow: var(--shadow-rose);
}
.form-thanks h3 {
font-family: var(--font-serif);
font-size: clamp(20px, 2.5vw, 26px);
color: var(--text);
margin: 0 0 16px;
}
.form-thanks p {
color: var(--text-sub);
font-size: 15px;
line-height: 1.9;
margin: 0;
}
/* ==================================================================
① CTA強化 — ヒーロー信頼バッジ・数値実績
================================================================== */
.hero-trust-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(209, 69, 122, .07);
border: 1px solid rgba(209, 69, 122, .22);
color: var(--rose-deep);
font-size: 12px;
font-weight: 500;
padding: 5px 13px;
border-radius: var(--r-pill);
letter-spacing: 0.02em;
white-space: nowrap;
}
.trust-badge::before {
content: "✓";
font-size: 11px;
color: var(--rose);
font-weight: 700;
}
/* ==================================================================
① CTA強化 — 最終CTAセクション 緊急性バッジ・電話ボタン
================================================================== */
.cta-urgency {
display: inline-block;
background: #E74C3C;
color: #fff;
font-size: 13px;
font-weight: 700;
padding: 6px 20px;
border-radius: 6px;
margin-bottom: 20px;
letter-spacing: 0.05em;
animation: ctaPulse 2s ease-in-out infinite;
}
@keyframes ctaPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .88; transform: scale(1.02); }
}
/* ==================================================================
② 信頼感 — 口コミ星評価・総合評価
================================================================== */
.voice-stars {
color: #F0B429;
font-size: 15px;
letter-spacing: 2px;
margin-bottom: 12px;
}
.voice-rating-total {
text-align: center;
margin-top: clamp(36px, 5vw, 56px);
font-size: 14px;
color: var(--text-sub);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.voice-rating-total .rating-star { color: #F0B429; font-size: 18px; }
.voice-rating-total strong {
color: var(--rose-deep);
font-family: var(--font-serif);
font-size: 22px;
font-weight: 700;
}
/* ==================================================================
② 信頼感 — ホームFAQプレビュー
================================================================== */
.faq-home-list {
max-width: 820px;
margin: 0 auto;
display: grid;
gap: 14px;
}
.faq-home-item {
background: #fff;
border-radius: var(--r-md);
padding: clamp(18px, 2.2vw, 26px) clamp(22px, 3vw, 34px);
box-shadow: var(--shadow-soft);
}
.faq-home-q {
display: flex;
align-items: flex-start;
gap: 12px;
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--fs-base);
margin-bottom: 10px;
color: var(--text);
line-height: 1.6;
}
.faq-home-qmark {
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rose), var(--rose-deep));
color: #fff;
font-size: 13px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: var(--font-en);
margin-top: 1px;
}
.faq-home-a {
color: var(--text-sub);
font-size: 14px;
line-height: 1.9;
padding-left: 38px;
}
/* ==================================================================
③ 若者向け — 共感メッセージブロック
================================================================== */
.youth-empathy {
margin-top: clamp(48px, 6vw, 80px);
border-radius: var(--r-lg);
background: linear-gradient(135deg, var(--pink-blush) 0%, #fff 100%);
border: 1px solid rgba(209, 69, 122, .12);
padding: clamp(32px, 4vw, 52px);
box-shadow: var(--shadow-soft);
}
.youth-empathy-list {
list-style: none;
padding: 0;
margin: 0 0 clamp(20px, 2.5vw, 28px);
display: grid;
gap: 12px;
}
.youth-empathy-list li {
font-family: var(--font-serif);
font-size: var(--fs-base);
color: var(--text);
padding: 10px 0 10px 28px;
border-bottom: 1px dashed rgba(209, 69, 122, .12);
position: relative;
line-height: 1.7;
}
.youth-empathy-list li::before {
content: "…";
position: absolute;
left: 0;
color: var(--rose);
font-weight: 700;
}
.youth-empathy-tagline {
font-family: var(--font-serif);
font-size: clamp(20px, 3vw, 28px);
color: var(--rose-deep);
font-weight: 700;
text-align: center;
margin: clamp(24px, 3vw, 36px) 0 clamp(8px, 1vw, 12px);
letter-spacing: 0.04em;
line-height: 1.5;
}
.youth-empathy-punchline {
font-family: var(--font-serif);
font-size: clamp(16px, 2.2vw, 20px);
color: var(--rose-deep);
font-weight: 700;
text-align: center;
margin-top: clamp(16px, 2vw, 24px);
letter-spacing: 0.03em;
}
.cta-sub-copy {
font-family: var(--font-serif);
font-size: clamp(18px, 2.5vw, 24px);
color: rgba(255, 255, 255, .95);
font-weight: 500;
text-align: center;
margin: clamp(24px, 3vw, 36px) 0 clamp(20px, 2.5vw, 28px);
letter-spacing: 0.04em;
line-height: 1.6;
}
/* ==================================================================
features-bar（ヒーロー直下 5アイコン特徴バー）
================================================================== */
.features-bar-home {
background: #fff;
border-bottom: 1px solid rgba(209, 69, 122, .08);
}
.features-bar-inner {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: clamp(20px, 3vw, 32px) 0;
gap: 8px;
}
.fbar-item {
text-align: center;
padding: 8px 16px;
min-width: 80px;
}
.fbar-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pink-pale), var(--purple-soft));
margin: 0 auto 8px;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.fbar-icon::after {
content: "";
width: 52%; height: 52%;
background: var(--rose-deep);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.fbar-camera::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fbar-flower::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fbar-calendar::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fbar-chat::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fbar-globe::after {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.fbar-label {
font-size: 12px;
font-weight: 700;
color: var(--text);
}
.fbar-sub {
font-size: 10px;
color: var(--text-sub);
margin-top: 2px;
}
/* ==================================================================
billing-timing（料金プランの請求タイミング）
================================================================== */
.billing-timing {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #1E5C38;
background: #E8F3EC;
border-radius: 8px;
padding: 7px 12px;
margin-top: 12px;
line-height: 1.5;
}
.billing-timing::before {
content: '💳';
flex-shrink: 0;
}
/* ===== Container Queries (v0.4) ===== */
/* header: 980px超でgnav表示・hamburger非表示 */
@container header (min-width: 980px) {
.gnav { display: block; }
.hamburger { display: none; }
}
/* hero: 480px未満では縦長比率で写真を小さめに */
@container hero (width < 480px) {
.hero-kt-visual {
aspect-ratio: 4 / 3;
max-height: 260px;
}
.hero-kt-copy h1 {
font-size: var(--fs-2xl);
}
}
/* hero: 720px超で2カラム・h1を大きく・写真スケールアップ */
@container hero (min-width: 720px) {
.hero-kt-inner {
grid-template-columns: 1.1fr 0.9fr;
}
.hero-kt-copy h1 {
font-size: var(--fs-4xl);
}
.hero-family-photo {
object-fit: contain;
transform: scale(1.3);
transform-origin: top right;
height: auto;
}
.hero-kt-visual {
overflow: visible;
aspect-ratio: 4 / 3;
}
}
/* about: 640px超で2カラム */
@container about (min-width: 640px) {
.about-grid {
grid-template-columns: 0.85fr 1.15fr;
}
}
/* rep: 600px超で2カラム（代表メッセージ） */
@container rep (min-width: 600px) {
.rep-inner {
grid-template-columns: 160px 1fr;
gap: clamp(40px, 6vw, 64px);
}
.rep-left {
text-align: center;
}
}
/* pref-body: 560px超で2カラム */
@container pref (min-width: 560px) {
.pref-body {
grid-template-columns: 1fr 1fr;
}
}
/* before-after: 560px超で2カラム */
@container ba (min-width: 560px) {
.before-after {
grid-template-columns: 1fr 1fr;
}
}
/* ==================================================================
v0.5 リデザイン用 新スタイル
================================================================== */
/* ---- 配色トークン上書き（明るいピンク系に調整） ---- */
:root {
--pink-pale: #FFF0F4;
--pink-blush: #FFF7FA;
}
/* ---- ロゴ（画像版） ---- */
.logo.has-img { gap: 0; }
.logo.has-img::before { display: none; }
.logo-img {
width: clamp(120px, 18vw, 220px);
height: auto;
display: block;
}
/* ---- ヘッダーCTAボタン ---- */
.header-cta {
display: flex;
align-items: center;
gap: clamp(8px, 1.2vw, 12px);
}
.header-cta-consult {
border: 1.5px solid var(--rose);
color: var(--rose);
background: white;
font-size: clamp(11px, 1vw, 13px);
padding: 6px 14px;
}
.header-cta-consult:hover {
background: var(--pink-pale);
}
.header-cta-line {
font-size: clamp(11px, 1vw, 13px);
padding: 6px 14px;
}
/* ---- モバイルナビ ---- */
.mobile-nav {
display: none;
position: fixed;
top: 0;
right: 0;
width: min(320px, 85vw);
height: 100dvh;
background: white;
z-index: 200;
padding: 72px 24px 40px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
box-shadow: -8px 0 40px rgba(209,69,122,.12);
}
.mobile-nav.open {
display: block;
transform: translateX(0);
}
.mobile-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav ul li { border-bottom: 1px solid var(--pink-pale); }
.mobile-nav ul li a {
display: block;
padding: 14px 4px;
color: var(--text);
text-decoration: none;
font-size: 15px;
}
.mobile-nav-cta {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-nav-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 199;
}
.mobile-nav-overlay.open { display: block; }
/* ---- 01. HERO NEW ---- */
.hero-new {
/* v0.4 fluid 設計に合わせ、ヒーローをコンテナクエリの基準にする */
container-type: inline-size;
container-name: heronew;
background: linear-gradient(135deg, #FFF0F4 0%, #FFFBFC 60%, #FFF5F8 100%);
padding-top: clamp(40px, 7vw, 80px);
padding-bottom: clamp(40px, 7vw, 80px);
overflow: hidden;
}
/* モバイル既定：1カラム縦積み。余白は各要素の margin-bottom で制御するため gap:0。
minmax(0,1fr) で「グリッド・ブローアウト」（1fr の auto 最小が min-content になり
トラックが画面幅を超えて伸びる現象）を防ぐ */
.hero-new-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: start;
}
/* コピー塊を display:contents で分解し、order で並べ替え。
家族写真（.hero-new-visual）をサブバッジと統計カードの間に挿入する。 */
.hero-new-copy { display: contents; }
.hero-area-badge { order: 1; }
.hero-new-copy h1 { order: 2; }
.hero-sub-chips { order: 3; }
.hero-new-visual { order: 4; } /* 👉 ここに家族写真を配置 */
.stat-row-hero { order: 5; }
.hero-assurance-chips { order: 6; }
.hero-cta-block { order: 7; }
/* display:contents で各行が外側1frグリッドのアイテムになるため、
min-width:auto による右はみ出しを防ぎ、トラック幅(=画面幅)内で折り返させる */
.hero-sub-chips,
.hero-new .stat-row-hero,
.hero-assurance-chips { min-width: 0; }
/* モバイル：写真は全幅・中央寄せ・角丸長方形を維持し、下に余白を確保 */
.hero-new-visual {
width: 100%;
max-width: clamp(280px, 90vw, 480px);
margin: 0 auto clamp(20px, 3vw, 32px);
}
/* モバイル：統計カードを全幅に（左寄り解消）、CTA文字は中央寄せ */
.hero-new .stat-row-hero { max-width: none; }
.hero-main-cta { text-align: center; }
.hero-area-badge {
display: inline-block;
background: var(--rose);
color: white;
font-size: clamp(11px, 1.2vw, 13px);
font-weight: 500;
padding: 5px 14px;
border-radius: var(--r-pill);
margin-bottom: clamp(12px, 2vw, 20px);
}
.hero-new h1 {
font-size: clamp(22px, 3.5vw, 42px);
line-height: 1.5;
color: var(--text);
margin-bottom: clamp(16px, 2.5vw, 24px);
}
.hero-sub-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(20px, 3vw, 32px);
}
.hero-chip {
display: inline-flex; /* アイコンと文字を横並びに（svgのglobal display:block対策） */
align-items: center;
gap: 4px;
flex-shrink: 0; /* 縮んで文字が溢れるのを防ぎ、狭い画面では折り返す */
white-space: nowrap;
border: 1.5px solid var(--rose);
color: var(--rose);
font-size: clamp(11px, 1.1vw, 13px);
padding: 4px 12px;
border-radius: var(--r-pill);
background: white;
}
/* 統計グリッド */
/* 安心チップ */
.hero-assurance-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(20px, 3vw, 32px);
}
.assurance-chip {
display: inline-flex; /* check SVGと文字を横並びに（svgのglobal display:block対策） */
align-items: center;
gap: 4px;
flex-shrink: 0; /* 縮んで文字が溢れるのを防ぎ、狭い画面では折り返す */
white-space: nowrap; /* チップ内のテキストを折り返さない */
font-size: clamp(11px, 1vw, 13px);
color: var(--text-sub);
background: var(--pink-pale);
padding: 3px 10px;
border-radius: var(--r-pill);
}
/* ヒーローCTA（モバイル既定：ボタン全幅。デスクトップは @container で flex-start に戻す） */
.hero-cta-block { display: flex; flex-direction: column; align-items: stretch; }
.hero-main-cta { font-size: clamp(14px, 1.6vw, 18px); }
.hero-cta-sub {
font-size: clamp(11px, 1vw, 13px);
color: var(--text-sub);
margin-top: 8px;
}
/* 右カラム写真 */
.hero-new-visual { position: relative; }
.hero-photo-wrap {
position: relative;
border-radius: clamp(24px, 4vw, 48px);
overflow: hidden;
aspect-ratio: 4/3;
}
.hero-family-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* ---- 02. PAIN POINTS ---- */
.pain-section { background: white; }
.pain-section .section-head h2 {
font-size: clamp(20px, 3vw, 34px);
margin-bottom: 0;
}
.pain-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: clamp(16px, 2.5vw, 24px);
margin-top: clamp(32px, 4vw, 48px);
}
.pain-card {
background: var(--pink-blush);
border-radius: var(--r-lg);
padding: clamp(20px, 3vw, 32px) clamp(16px, 2vw, 20px);
text-align: center;
border: 1.5px solid var(--pink-pale);
transition: transform 0.2s, box-shadow 0.2s;
}
.pain-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-rose);
}
.pain-icon-wrap {
width: clamp(56px, 8vw, 80px);
height: clamp(56px, 8vw, 80px);
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(28px, 4vw, 40px);
margin: 0 auto clamp(12px, 2vw, 16px);
box-shadow: 0 4px 12px rgba(209,69,122,.12);
}
.pain-card p {
font-size: clamp(12px, 1.3vw, 14px);
color: var(--text);
line-height: 1.7;
font-weight: 500;
}
/* ---- 03. AREA NEW ---- */
.area-section-new { overflow: hidden; }
.area-new-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
}
.area-new-copy h2 {
font-size: clamp(22px, 3.2vw, 38px);
margin-bottom: clamp(20px, 3vw, 32px);
}
.area-tags-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: clamp(16px, 2.5vw, 24px);
}
.area-tag {
background: white;
border: 1.5px solid var(--rose);
color: var(--rose);
font-size: clamp(12px, 1.2vw, 14px);
font-weight: 500;
padding: 5px 14px;
border-radius: var(--r-pill);
}
.area-tag-partial {
border-style: dashed;
color: var(--purple);
border-color: var(--purple-soft);
}
.area-note {
font-size: clamp(13px, 1.2vw, 14px);
color: var(--text-sub);
margin-bottom: clamp(20px, 3vw, 32px);
line-height: 1.8;
}
.area-new-map img {
width: 100%;
border-radius: var(--r-lg);
box-shadow: var(--shadow-soft);
}
/* ---- 04. TRUST BAR ---- */
.trust-bar-section {
background: var(--pink-blush);
padding-top: clamp(40px, 5vw, 64px);
padding-bottom: clamp(40px, 5vw, 64px);
}
/* ---- 05. BEFORE/AFTER NEW ---- */
.ba-section {}
.ba-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(24px, 3vw, 40px);
margin-top: clamp(32px, 4vw, 48px);
}
.ba-pair {}
.ba-pair-inner {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.ba-side {
flex: 1;
position: relative;
}
.ba-side img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(--r-md);
}
.ba-label-tag {
position: absolute;
top: 8px;
left: 8px;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--r-pill);
z-index: 2;
}
.ba-before { background: #888; color: white; }
.ba-after { background: var(--rose); color: white; }
.ba-arrow {
font-size: clamp(18px, 2.5vw, 24px);
color: var(--rose);
flex-shrink: 0;
font-weight: 700;
}
.ba-pair-title {
text-align: center;
font-size: clamp(13px, 1.3vw, 15px);
font-weight: 500;
color: var(--text);
}
.ba-note-badge {
display: block;
max-width: 400px;
margin: clamp(32px, 4vw, 48px) auto 0;
background: white;
border: 2px solid var(--rose);
color: var(--rose);
text-align: center;
padding: 10px 24px;
border-radius: var(--r-pill);
font-size: clamp(13px, 1.3vw, 15px);
font-weight: 500;
}
/* ---- 06. PRICING ---- */
.pricing-section { background: white; }
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(20px, 2.5vw, 32px);
}
.pricing-card {
background: var(--pink-blush);
border: 1.5px solid var(--pink-pale);
border-radius: var(--r-lg);
padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 28px);
position: relative;
}
.pricing-featured {
background: white;
border-color: var(--rose);
box-shadow: var(--shadow-rose);
transform: translateY(-8px);
}
.pricing-popular-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--rose);
color: white;
font-size: 12px;
font-weight: 700;
padding: 4px 20px;
border-radius: var(--r-pill);
white-space: nowrap;
}
.pricing-card-head h3 {
font-size: clamp(16px, 1.8vw, 20px);
color: var(--text);
margin-bottom: clamp(12px, 2vw, 20px);
}
.pricing-price {
font-family: var(--font-en);
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--rose);
margin-bottom: clamp(16px, 2vw, 24px);
line-height: 1.2;
}
.pricing-unit {
font-size: 0.5em;
font-weight: 400;
color: var(--text-sub);
}
.pricing-list {
list-style: none;
margin: 0 0 clamp(16px, 2vw, 24px);
padding: 0;
}
.pricing-list li {
font-size: clamp(13px, 1.2vw, 14px);
padding: 6px 0;
border-bottom: 1px solid var(--pink-pale);
color: var(--text);
}
.pricing-list li::before {
content: "✓ ";
color: var(--rose);
font-weight: 700;
}
.pricing-assurance {
margin-top: 12px;
background: var(--pink-pale);
color: var(--rose);
font-size: 12px;
font-weight: 500;
text-align: center;
padding: 6px 12px;
border-radius: var(--r-pill);
}
/* ---- 07. VOICE NEW ---- */
.voice-section-new .section-head h2 {
margin-bottom: 12px;
}
.voice-google-badge {
display: inline-flex; /* 星SVGと文字を同じ行に（svgのglobal display:block対策） */
align-items: center;
gap: 5px;
background: white;
border: 1.5px solid var(--rose);
color: var(--rose);
font-size: clamp(13px, 1.3vw, 15px);
font-weight: 600;
padding: 5px 16px;
border-radius: var(--r-pill);
margin-top: 0;
}
.voice-grid-new {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(20px, 2.5vw, 32px);
margin-top: clamp(32px, 4vw, 48px);
}
.voice-card-new {
background: white;
border-radius: var(--r-lg);
padding: clamp(20px, 2.5vw, 28px);
box-shadow: 0 4px 20px rgba(209,69,122,.08);
border: 1px solid var(--pink-pale);
}
.voice-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.voice-avatar {
width: clamp(80px, 10vw, 120px);
height: clamp(80px, 10vw, 120px);
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.voice-name-area {
font-weight: 600;
font-size: clamp(14px, 1.3vw, 16px);
color: var(--text);
}
.voice-area-age {
font-size: clamp(11px, 1vw, 13px);
color: var(--text-sub);
margin-top: 2px;
}
.voice-stars-new {
display: flex; /* 星SVGを横並びに（svgのglobal display:block対策） */
align-items: center;
gap: 2px;
color: #F5A623;
font-size: clamp(12px, 1.2vw, 14px);
margin-top: 4px;
}
.voice-quote-new {
font-size: clamp(13px, 1.2vw, 15px);
color: var(--text);
line-height: 1.9;
}
/* ---- 08. FAQ GRID 8 ---- */
.faq-section-new { background: var(--ivory); }
.faq-grid-8 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(12px, 1.5vw, 16px);
margin-top: clamp(32px, 4vw, 48px);
}
.faq-item-new {
background: white;
border: 1.5px solid var(--pink-pale);
border-radius: var(--r-md);
overflow: hidden;
}
.faq-item-new summary {
display: flex;
align-items: center;
gap: 10px;
padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 20px);
cursor: pointer;
font-size: clamp(13px, 1.3vw, 15px);
font-weight: 500;
color: var(--text);
list-style: none;
user-select: none;
}
.faq-item-new summary::-webkit-details-marker { display: none; }
.faq-item-new summary::after {
content: "＋";
margin-left: auto;
color: var(--rose);
font-size: 18px;
font-weight: 300;
flex-shrink: 0;
}
.faq-item-new[open] summary::after { content: "－"; }
.faq-q-mark {
background: var(--rose);
color: white;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.faq-item-new p {
padding: 0 clamp(16px, 2vw, 20px) clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 20px);
font-size: clamp(13px, 1.2vw, 14px);
color: var(--text-sub);
line-height: 1.9;
}
/* ---- 09. FINAL CTA NEW ---- */
.cta-final-new {
position: relative;
background: linear-gradient(135deg, #FFF0F4 0%, white 50%, #FFF5F8 100%);
padding: clamp(64px, 8vw, 120px) 0;
overflow: hidden;
text-align: center;
}
/* コスモスの花 SVG 絶対配置 */
.cosmos-flower {
position: absolute;
pointer-events: none;
opacity: 0.6;
}
.cosmos-flower-tl {
width: clamp(80px, 12vw, 160px);
bottom: -20px;
left: 5%;
transform: rotate(-20deg);
}
.cosmos-flower-tr {
width: clamp(60px, 9vw, 120px);
top: 10%;
right: 8%;
transform: rotate(15deg);
}
.cosmos-flower-bl {
width: clamp(50px, 7vw, 90px);
top: 5%;
left: 15%;
transform: rotate(30deg);
}
.cta-final-inner {
position: relative;
z-index: 2;
max-width: 680px;
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 32px);
}
.cta-final-inner h2 {
font-size: clamp(22px, 3.5vw, 38px);
line-height: 1.6;
margin-bottom: clamp(16px, 2.5vw, 24px);
}
.cta-final-desc {
font-size: clamp(14px, 1.4vw, 16px);
color: var(--text-sub);
margin-bottom: clamp(32px, 4vw, 48px);
line-height: 2;
}
.cta-final-btns {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(16px, 2.5vw, 24px);
margin-bottom: clamp(32px, 4vw, 48px);
}
.cta-btn-wrap { text-align: center; }
.cta-btn-sub {
font-size: clamp(11px, 1vw, 13px);
color: var(--text-sub);
margin-top: 8px;
}
.cta-assurance-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(12px, 2vw, 24px);
}
.cta-assurance-item {
display: flex;
align-items: center;
gap: 6px;
font-size: clamp(12px, 1.2vw, 14px);
color: var(--text-sub);
}
/* ---- 10. TRUST FOOTER ---- */
.trust-footer-section {
background: var(--pink-pale);
padding: clamp(32px, 4vw, 48px) 0;
}
.trust-footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(16px, 2vw, 24px);
}
.trust-footer-item {
display: flex;
align-items: center;
gap: 12px;
background: white;
border-radius: var(--r-md);
padding: clamp(14px, 2vw, 20px) clamp(16px, 2vw, 20px);
font-size: clamp(13px, 1.2vw, 14px);
font-weight: 500;
color: var(--text);
box-shadow: 0 2px 8px rgba(209,69,122,.06);
}
.trust-footer-icon {
font-size: clamp(20px, 2.5vw, 26px);
display: flex;
align-items: center;
justify-content: center;
}
/* ---- FOOTER 新構造 ---- */
.footer-grid-new {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: clamp(24px, 3vw, 40px);
padding-top: clamp(40px, 5vw, 64px);
padding-bottom: clamp(32px, 4vw, 48px);
}
.footer-logo-img {
width: clamp(100px, 15vw, 180px);
height: auto;
margin-bottom: clamp(12px, 2vw, 20px);
}
.footer-catch {
font-size: 13px;
color: rgba(255,255,255,.6);
line-height: 1.9;
max-width: 240px;
}
.footer-nav-col h4 {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.85);
margin-bottom: 16px;
letter-spacing: 0.05em;
}
.footer-nav-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav-col ul li { margin-bottom: 8px; }
.footer-nav-col ul li a {
font-size: 13px;
color: rgba(255,255,255,.6);
text-decoration: none;
transition: color 0.2s;
}
.footer-nav-col ul li a:hover { color: white; }
/* ---- btn-primary（ピンク塗りつぶし） ---- */
.btn-primary {
background: var(--rose);
color: white;
border: 2px solid var(--rose);
}
.btn-primary:hover {
background: var(--rose-deep);
border-color: var(--rose-deep);
}
.btn-sm { padding: 6px 16px; font-size: clamp(11px, 1vw, 13px); }
.btn-block { display: block; width: 100%; text-align: center; }
/* ---- レスポンシブ：hero 2カラム→1カラム ---- */
/* デスクトップ（720px以上）：ヒーローを左右2カラムへ戻す。
※v0.4 fluid 設計に合わせ @media ではなく @container（.hero-new = container-name: heronew）で制御。
order をリセットし、grid-area で従来の copy(上)/cta(下) ＋ photo(右・2行ぶち抜き) に復帰。 */
@container heronew (min-width: 720px) {
.hero-new-inner {
grid-template-columns: 1.1fr 0.9fr;
grid-template-areas:
"copy photo"
"cta photo";
column-gap: clamp(32px, 5vw, 64px);
row-gap: 0;
}
.hero-new-copy { display: flex; flex-direction: column; grid-area: copy; }
.hero-new-visual { grid-area: photo; align-self: center; order: 0; max-width: none; margin: 0; }
.hero-cta-block { grid-area: cta; align-items: flex-start; }
.hero-main-cta { text-align: left; }
.hero-new .stat-row-hero { max-width: clamp(380px, 50vw, 620px); }
}
@media (max-width: 720px) {
.area-new-inner {
grid-template-columns: 1fr;
}
.area-new-map { order: -1; }
.footer-grid-new {
grid-template-columns: 1fr 1fr;
}
.footer-logo-col { grid-column: 1 / -1; }
.cta-final-btns { flex-direction: column; align-items: center; }
.pricing-featured { transform: none; }
.gnav { display: none; }
.header-cta-consult { display: none; }
}
@media (min-width: 721px) {
.hamburger { display: none; }
}
@media (max-width: 480px) {
.footer-grid-new {
grid-template-columns: 1fr;
}
}
/* ---- pref-chip partial（茨城・栃木用） ---- */
.pref-chip-partial {
background: var(--pink-pale);
color: var(--purple);
border: 1px dashed var(--purple-soft);
}
/* ---- pricing-desc ---- */
.pricing-desc {
font-size: clamp(12px, 1.1vw, 13px);
color: var(--text-sub);
line-height: 1.7;
margin: 4px 0 clamp(12px, 2vw, 20px);
}
/* ==================================================================
v0.5 バグ修正パッチ
================================================================== */
/* ①② img.voice-avatar — 旧 ::before/::after グラデーションを無効化 */
img.voice-avatar {
display: block;
overflow: hidden;
object-fit: cover;
}
img.voice-avatar::before,
img.voice-avatar::after {
display: none !important;
content: none !important;
}
/* ① .ba-side の img — overflow と height を明示して空ピンク矩形を解消 */
.ba-side {
overflow: hidden;
border-radius: var(--r-md);
}
.ba-side img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border-radius: 0; /* 親の overflow:hidden に委ねる */
}
/* ③ voice-grid-new — minmax を 300px に拡大（少し大きめ） */
.voice-grid-new {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* ① ba-side 確定パッチ — コンテナに aspect-ratio を移し height:100% を正しく解決 */
.ba-side {
flex: 1;
position: relative;
overflow: hidden;
border-radius: var(--r-md);
aspect-ratio: 4 / 3;
background: transparent; /* 旧 ba-photo の pink-pale を上書き */
}
.ba-side img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
/* ============================================================
Lucide Icons — サイズ・カラー共通定義
============================================================ */
/* Lucide が生成する SVG の基本リセット */
i[data-lucide] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.trust-footer-icon svg {
width: clamp(20px, 2.5vw, 26px);
height: clamp(20px, 2.5vw, 26px);
stroke: var(--rose);
fill: none;
stroke-width: 1.75;
}
.pain-icon-wrap svg {
width: clamp(28px, 4vw, 40px);
height: clamp(28px, 4vw, 40px);
stroke: var(--rose);
fill: none;
stroke-width: 1.75;
}
.hero-chip svg {
width: 1em;
height: 1em;
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.assurance-chip svg {
width: 1em;
height: 1em;
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
}
.cta-assurance-item svg {
width: 18px;
height: 18px;
stroke: var(--rose);
fill: none;
stroke-width: 2;
flex-shrink: 0;
}
.voice-stars-new svg {
width: clamp(12px, 1.2vw, 15px);
height: clamp(12px, 1.2vw, 15px);
fill: #F5A623;
stroke: #F5A623;
stroke-width: 1;
vertical-align: middle;
}
.voice-google-badge svg {
width: 14px;
height: 14px;
fill: #F5A623;
stroke: #F5A623;
stroke-width: 1;
vertical-align: -0.1em;
}
/* ============================================================
first-time.html: about-photo 角丸・小サイズ版
※ .about-grid 自身がコンテナのため自己 @container は効かない。
親 .wrap に .about-cq を付けてコンテナを外側に置く。
============================================================ */
.about-photo-rect {
border-radius: 16px !important;
animation: none !important; /* blobMorph を停止 */
aspect-ratio: 4/3;
max-width: clamp(160px, 50vw, 240px); /* スタック時も小さく保つ */
align-self: start;
}
/* about セクションのコンテナを親 wrap に設定 */
.about-cq {
container-type: inline-size;
container-name: aboutcq;
}
/* 横幅が取れたら 2 カラム（小さい画像 + テキスト） */
@container aboutcq (min-width: 640px) {
.about-grid-compact {
grid-template-columns: clamp(180px, 24vw, 260px) 1fr;
align-items: start;
}
.about-grid-compact .about-photo-rect {
max-width: 100%; /* グリッドトラック幅に追従 */
}
}
/* ============================================================
Stat Cards v0.6 — hero 3カラム + trust-bar 5カラム 共通
icon → value → label の縦並びで両セクションを統一
============================================================ */
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
gap: clamp(12px, 1.5vw, 20px);
width: 100%;
}
/* ヒーロー（3カラム想定だが狭い時は折返しOK） */
.stat-row-hero {
max-width: clamp(380px, 50vw, 620px);
margin-bottom: clamp(16px, 2.5vw, 24px);
}
/* trust-bar（5カラム想定） */
.stat-row-trust {
max-width: 1200px;
margin: 0 auto;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(8px, 1vw, 12px);
padding: clamp(20px, 2.5vw, 32px) clamp(12px, 2vw, 20px);
background: #fff;
border-radius: clamp(14px, 2vw, 20px);
box-shadow: 0 4px 20px rgba(166, 51, 77, .06);
min-height: clamp(140px, 18vw, 200px);
transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(166, 51, 77, .12);
}
/* アイコン枠 */
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: clamp(32px, 4vw, 44px);
height: clamp(32px, 4vw, 44px);
color: var(--rose);
flex-shrink: 0;
}
.stat-icon svg {
width: 100%;
height: 100%;
}
/* メイン数値 */
.stat-value {
font-family: var(--font-en, 'Inter', sans-serif);
font-size: clamp(22px, 3vw, 32px);
font-weight: 700;
color: var(--rose-deep);
line-height: 1.1;
letter-spacing: .01em;
display: flex;
align-items: baseline;
justify-content: center;
gap: 2px;
white-space: nowrap;
}
.stat-value small {
font-family: var(--font-ja-sans, 'Noto Sans JP', sans-serif);
font-size: clamp(11px, 1.2vw, 13px);
font-weight: 500;
color: var(--rose-deep);
margin-left: 2px;
}
/* 「最短3日」の「3」を強調する em 用（任意） */
.stat-value em {
font-style: normal;
font-size: 1.15em;
font-weight: 800;
}
/* ラベル */
.stat-label {
font-size: clamp(11px, 1.2vw, 13px);
font-weight: 500;
color: var(--text-sub, #6b5560);
line-height: 1.5;
letter-spacing: .02em;
}