:root {
--bg: #f1ebe0;
--paper: #fbf6ec;
--paper-soft: #f5ecde;
--ink: #14110e;
--ink-soft: #433a30;
--ink-mute: #7a6e5f;
--line: #1a140f;
--line-soft: #d0bfa6;
--accent: #c6331e;
--accent-deep: #8a1e0e;
--accent-wash: #f4d9b2;
--highlight: #ffd766;
--green: #06c755;
--green-deep: #038a3d;
--max: 1080px;
}
/* ===== Softer variant (via [data-mode="soft"] on ) ===== */
body[data-mode="soft"] {
--bg: #f6f1e8;
--paper: #ffffff;
--paper-soft: #faf4ea;
--ink: #251d15;
--ink-soft: #5a4f42;
--ink-mute: #8f8273;
--line: #c9b79d;
--line-soft: #e2d4bc;
--accent: #b35a2a;
--accent-deep: #834018;
--accent-wash: #f3e0c3;
--highlight: #ffe49a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.85;
letter-spacing: 0.02em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
word-break: auto-phrase;
overflow-wrap: break-word;
font-feature-settings: "palt" 1, "kern" 1;
}
body[data-mode="hard"] {
background:
repeating-linear-gradient(
0deg,
rgba(20, 17, 14, 0.022) 0 1px,
transparent 1px 4px
),
var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
.wrap {
width: min(calc(100% - 2rem), var(--max));
margin: 0 auto;
}
h1, h2, h3, h4, .serif {
font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-feature-settings: "palt" 1, "kern" 1;
letter-spacing: 0.005em;
}
body[data-mode="hard"] h1,
body[data-mode="hard"] h2,
body[data-mode="hard"] .display-hard {
font-weight: 900;
}
/* ============ TOP BAR ============ */
.topbar {
position: sticky;
top: 0;
z-index: 20;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 0;
font-size: 0.78rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: "Shippori Mincho", serif;
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.08em;
}
.brand-mark {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
background: var(--ink);
color: var(--bg);
font-family: "Shippori Mincho", serif;
font-weight: 900;
font-size: 0.9rem;
}
body[data-mode="hard"] .brand-mark { background: var(--accent); color: #fff; }
.topbar-limit {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.22rem 0.6rem;
border: 1px solid var(--line);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
background: var(--paper);
}
.topbar-limit .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(198, 51, 30, 0.5);
animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(198, 51, 30, 0.45); }
70% { box-shadow: 0 0 0 10px rgba(198, 51, 30, 0); }
100% { box-shadow: 0 0 0 0 rgba(198, 51, 30, 0); }
}
/* ============ HERO ============ */
.hero {
position: relative;
padding: 2.4rem 0 3.2rem;
border-bottom: 1px solid var(--line);
overflow: hidden;
}
body[data-mode="hard"] .hero::before {
content: "叩";
position: absolute;
right: -4vw;
top: -4vw;
font-family: "Shippori Mincho", serif;
font-weight: 900;
font-size: clamp(20rem, 42vw, 42rem);
color: var(--accent);
opacity: 0.06;
line-height: 0.8;
pointer-events: none;
letter-spacing: -0.05em;
}
body[data-mode="soft"] .hero::before {
content: "";
position: absolute;
right: -20vw;
top: -30vw;
width: 70vw; height: 70vw;
border-radius: 50%;
background: radial-gradient(circle, var(--accent-wash), transparent 60%);
opacity: 0.7;
pointer-events: none;
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 1.6rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.22em;
color: var(--accent);
}
.hero-kicker::before {
content: "";
width: 2.4rem; height: 2px;
background: var(--accent);
}
.hero h1 {
font-size: clamp(2.9rem, 11vw, 6.4rem);
line-height: 0.98;
margin-bottom: 1.6rem;
font-weight: 900;
}
body[data-mode="hard"] .hero h1 {
text-shadow: 3px 3px 0 var(--accent-wash);
}
.hero h1 .line { display: block; }
.hero h1 .stamp {
display: inline-block;
padding: 0 0.2em;
background: var(--ink);
color: var(--bg);
transform: rotate(-1deg);
}
body[data-mode="hard"] .hero h1 .stamp { background: var(--accent); color: #fff; }
.hero h1 .mark {
background: linear-gradient(transparent 55%, var(--highlight) 55%, var(--highlight) 92%, transparent 92%);
padding: 0 0.08em;
}
.hero-lead {
font-family: "Shippori Mincho", serif;
font-size: clamp(1.15rem, 3.4vw, 1.55rem);
font-weight: 700;
line-height: 1.75;
margin-bottom: 1.8rem;
max-width: 34rem;
}
.hero-lead .br { display: block; }
.hero-sub {
max-width: 34rem;
color: var(--ink-soft);
font-size: 0.98rem;
line-height: 1.95;
margin-bottom: 2rem;
}
/* Proof stamps row */
.proof-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-bottom: 2rem;
border: 1px solid var(--line);
background: var(--paper);
}
.proof-strip > div {
padding: 1.1rem 0.9rem;
border-right: 1px solid var(--line-soft);
text-align: center;
}
.proof-strip > div:last-child { border-right: none; }
.proof-num {
display: block;
font-family: "Shippori Mincho", serif;
font-size: clamp(1.9rem, 6.5vw, 2.6rem);
font-weight: 900;
line-height: 1;
color: var(--accent);
margin-bottom: 0.35rem;
}
.proof-num .unit {
font-size: 0.55em;
margin-left: 0.1em;
color: var(--ink);
}
.proof-label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.55;
color: var(--ink-soft);
}
/* Hero price card */
.hero-offer {
padding: 1.35rem 1.3rem;
border: 2px solid var(--ink);
background: var(--paper);
position: relative;
}
body[data-mode="hard"] .hero-offer {
box-shadow: 6px 6px 0 var(--ink);
}
body[data-mode="soft"] .hero-offer {
border-width: 1px;
border-radius: 16px;
box-shadow: 0 14px 34px rgba(32, 24, 18, 0.08);
}
.hero-offer-top {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.4rem;
}
.hero-offer-label {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.18em;
color: var(--accent);
}
.hero-offer-remain {
font-size: 0.74rem;
font-weight: 800;
color: var(--ink-soft);
}
.hero-offer-remain strong {
color: var(--accent);
font-family: "Shippori Mincho", serif;
font-size: 1.05rem;
margin: 0 0.1em;
}
.hero-offer-price {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: 0.3rem 0 0.6rem;
}
.hero-offer-price .yen {
font-family: "Shippori Mincho", serif;
font-size: clamp(2.6rem, 10vw, 3.6rem);
font-weight: 900;
line-height: 1;
}
.hero-offer-price .meta {
font-size: 0.82rem;
color: var(--ink-soft);
line-height: 1.55;
}
.hero-offer-includes {
font-size: 0.82rem;
color: var(--ink-soft);
padding-top: 0.75rem;
border-top: 1px dashed var(--line-soft);
line-height: 1.75;
}
/* CTA button */
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
min-height: 62px;
padding: 1rem 1.4rem;
background: var(--green);
color: #fff;
font-size: 1.02rem;
font-weight: 900;
letter-spacing: 0.04em;
border: 2px solid var(--ink);
transition: transform 0.12s ease, box-shadow 0.12s ease;
margin-top: 1rem;
}
body[data-mode="hard"] .cta {
box-shadow: 5px 5px 0 var(--ink);
border-radius: 0;
}
body[data-mode="soft"] .cta {
border: none;
border-radius: 999px;
box-shadow: 0 14px 30px rgba(6, 199, 85, 0.3);
}
.cta:hover { transform: translateY(-2px); }
body[data-mode="hard"] .cta:hover { box-shadow: 7px 7px 0 var(--ink); }
.cta::before {
content: "";
width: 20px; height: 20px;
background: #fff;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.cta-note {
margin-top: 0.7rem;
font-size: 0.76rem;
color: var(--ink-mute);
text-align: center;
line-height: 1.7;
}
/* ============ SECTION SHELL ============ */
section.block {
padding: 4.8rem 0;
border-bottom: 1px solid var(--line);
}
.block-dark {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.block-dark .ink-soft, .block-dark p, .block-dark li { color: rgba(251, 246, 236, 0.78); }
.block-paper { background: var(--paper); }
.block-soft { background: var(--paper-soft); }
.section-tag {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 1rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.22em;
color: var(--accent);
}
.section-tag::before {
content: "";
width: 1.8rem; height: 1px;
background: currentColor;
}
.block-dark .section-tag { color: var(--highlight); }
.section-title {
font-size: clamp(1.85rem, 5.2vw, 2.9rem);
line-height: 1.38;
margin-bottom: 1rem;
font-weight: 900;
}
.section-lead {
max-width: 42rem;
color: var(--ink-soft);
font-size: 0.98rem;
line-height: 2;
margin-bottom: 2.4rem;
}
.block-dark .section-lead { color: rgba(251, 246, 236, 0.72); }
/* ============ MANIFESTO ============ */
.manifesto-body p {
font-family: "Shippori Mincho", serif;
font-size: clamp(1.08rem, 2.6vw, 1.22rem);
line-height: 2.05;
margin-bottom: 1.25rem;
max-width: 38rem;
}
.manifesto-punch {
margin-top: 2rem;
padding: 1.6rem 1.4rem;
border-left: 5px solid var(--accent);
background: var(--paper);
font-family: "Shippori Mincho", serif;
font-size: clamp(1.2rem, 3.2vw, 1.55rem);
font-weight: 800;
line-height: 1.85;
max-width: 36rem;
}
body[data-mode="hard"] .manifesto-punch {
border-left-width: 0;
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--accent);
background: var(--paper);
}
/* ============ RESULTS GRID ============ */
.grid-2 { display: grid; gap: 1rem; }
.grid-3 { display: grid; gap: 1rem; }
.grid-2 > *, .grid-3 > * { min-width: 0; }
@media (min-width: 760px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
}
.result-card {
padding: 1.5rem 1.3rem;
background: var(--paper);
border: 1px solid var(--line);
position: relative;
}
@media (min-width: 760px) {
.result-card-wide { grid-column: 1 / -1; }
}
body[data-mode="soft"] .result-card {
border-radius: 18px;
box-shadow: 0 10px 26px rgba(20, 17, 14, 0.05);
}
.block-dark .result-card {
color: var(--ink);
}
.block-dark .result-card p,
.block-dark .result-card li { color: var(--ink-soft); }
.result-chip {
display: inline-block;
padding: 0.22rem 0.65rem;
margin-bottom: 0.8rem;
background: var(--ink);
color: var(--bg);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
}
body[data-mode="hard"] .result-chip { background: var(--accent); color: #fff; }
.result-card h3 {
font-size: 1.12rem;
line-height: 1.55;
margin-bottom: 0.9rem;
font-weight: 800;
}
.result-list {
list-style: none;
display: grid;
gap: 0.55rem;
}
.result-list li {
position: relative;
padding-left: 1.1rem;
font-size: 0.92rem;
line-height: 1.8;
color: var(--ink-soft);
}
.result-list li::before {
content: "";
position: absolute;
left: 0; top: 0.75em;
width: 0.6rem; height: 2px;
background: var(--accent);
}
/* ============ FIT / NOT-FIT ============ */
.fit-card {
padding: 1.6rem 1.4rem;
background: var(--paper);
border: 1px solid var(--line);
}
body[data-mode="soft"] .fit-card { border-radius: 18px; }
.fit-card h3 {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 1.1rem;
margin-bottom: 1rem;
font-weight: 800;
}
.fit-card h3 .glyph {
display: inline-grid;
place-items: center;
width: 1.8rem; height: 1.8rem;
font-family: "Shippori Mincho", serif;
font-weight: 900;
}
.fit-card.good h3 .glyph {
background: var(--ink);
color: var(--bg);
}
body[data-mode="hard"] .fit-card.good h3 .glyph { background: var(--accent); color: #fff; }
.fit-card.bad h3 .glyph {
background: transparent;
color: var(--ink-mute);
border: 1.5px solid var(--line);
}
.fit-list { list-style: none; display: grid; gap: 0.7rem; }
.fit-list li {
position: relative;
padding-left: 1.3rem;
font-size: 0.95rem;
line-height: 1.8;
}
.fit-card.good .fit-list li::before {
content: "○";
position: absolute;
left: 0; top: 0;
color: var(--accent);
font-weight: 800;
}
.fit-card.bad .fit-list li {
color: var(--ink-mute);
text-decoration: line-through;
text-decoration-color: rgba(122, 110, 95, 0.4);
}
.fit-card.bad .fit-list li::before {
content: "×";
position: absolute;
left: 0; top: 0;
color: var(--ink-mute);
font-weight: 800;
text-decoration: none;
}
/* ============ SERVICE ============ */
.service-card {
padding: 1.6rem 1.4rem;
background: var(--paper);
border: 1px solid var(--line);
position: relative;
}
body[data-mode="soft"] .service-card { border-radius: 18px; }
.service-head {
display: flex;
align-items: baseline;
gap: 0.9rem;
margin-bottom: 1rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--line-soft);
}
.service-no {
font-family: "Shippori Mincho", serif;
font-size: 2.1rem;
font-weight: 900;
line-height: 1;
color: var(--accent);
letter-spacing: -0.02em;
}
.service-meta {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--ink-mute);
}
.service-card h3 {
font-size: 1.1rem;
line-height: 1.55;
margin-bottom: 0.55rem;
font-weight: 800;
}
.service-card p {
color: var(--ink-soft);
font-size: 0.94rem;
line-height: 1.9;
}
/* ============ FLOW ============ */
.flow {
display: grid;
gap: 0;
}
.flow-step {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding: 1.25rem 0;
border-bottom: 1px dashed var(--line-soft);
}
.flow-step:last-child { border-bottom: none; }
.flow-day {
min-width: 96px;
font-family: "Shippori Mincho", serif;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--accent);
padding-top: 0.18rem;
}
.flow-day .num {
display: block;
font-size: 2rem;
font-weight: 900;
line-height: 1;
color: var(--ink);
margin-bottom: 0.15rem;
}
.flow-body h4 {
font-size: 1.05rem;
line-height: 1.55;
margin-bottom: 0.35rem;
font-weight: 800;
}
.flow-body p {
color: var(--ink-soft);
font-size: 0.94rem;
line-height: 1.9;
}
/* ============ QUOTE + PROFILE ============ */
.quote {
padding: 1.8rem 1.5rem;
background: var(--paper);
border: 1px solid var(--line);
position: relative;
}
body[data-mode="soft"] .quote { border-radius: 18px; }
.quote::before {
content: "“";
position: absolute;
top: -0.2em;
left: 0.4rem;
font-family: "Shippori Mincho", serif;
font-size: 6rem;
line-height: 1;
color: var(--accent-wash);
pointer-events: none;
}
.quote p {
font-family: "Shippori Mincho", serif;
font-size: 1rem;
line-height: 2.05;
position: relative;
z-index: 1;
}
.quote-meta {
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px solid var(--line-soft);
font-size: 0.85rem;
font-weight: 700;
color: var(--ink-soft);
}
.quote-chip {
display: inline-block;
margin-bottom: 0.8rem;
padding: 0.22rem 0.65rem;
background: var(--accent);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.profile {
padding: 1.8rem 1.5rem;
background: var(--paper);
border: 1px solid var(--line);
}
body[data-mode="soft"] .profile { border-radius: 18px; }
.profile-label {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.2em;
color: var(--accent);
margin-bottom: 0.9rem;
}
.profile-name {
font-family: "Shippori Mincho", serif;
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 0.3rem;
}
.profile-sub {
color: var(--ink-mute);
font-size: 0.85rem;
margin-bottom: 1.1rem;
}
.profile p {
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.95;
}
.profile p + p { margin-top: 0.8rem; }
/* ============ PRICE ============ */
.price-hero {
padding: 2rem 1.6rem;
background: var(--paper);
border: 2px solid var(--ink);
position: relative;
}
body[data-mode="hard"] .price-hero {
box-shadow: 8px 8px 0 var(--accent);
}
body[data-mode="soft"] .price-hero {
border-width: 1px;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(20, 17, 14, 0.08);
}
.price-grid { display: grid; gap: 1.6rem; }
.price-grid > * { min-width: 0; }
@media (min-width: 820px) {
.price-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.4rem; align-items: start; }
}
.price-label {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.22em;
color: var(--accent);
margin-bottom: 0.8rem;
}
.price-big {
font-family: "Shippori Mincho", serif;
font-size: clamp(3rem, 10vw, 4.4rem);
font-weight: 900;
line-height: 1;
margin-bottom: 0.3rem;
}
.price-sub {
color: var(--ink-soft);
font-size: 0.95rem;
margin-bottom: 1.4rem;
}
.price-includes {
list-style: none;
display: grid;
gap: 0.55rem;
padding: 1rem 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
margin-bottom: 1.2rem;
}
.price-includes li {
padding-left: 1.6rem;
position: relative;
font-size: 0.92rem;
line-height: 1.7;
}
.price-includes li::before {
content: "✓";
position: absolute;
left: 0.3rem; top: 0;
color: var(--accent);
font-weight: 900;
}
.price-copy p {
font-size: 0.98rem;
line-height: 2.05;
margin-bottom: 0.95rem;
}
.price-copy p:last-child { margin-bottom: 0; }
.price-copy strong { font-weight: 800; }
.price-copy .emph {
display: block;
padding: 1rem 1.1rem;
margin-top: 1rem;
background: var(--ink);
color: var(--paper);
font-family: "Shippori Mincho", serif;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.75;
}
body[data-mode="hard"] .price-copy .emph { background: var(--accent); color: #fff; }
/* ============ FAQ ============ */
.faq-item {
padding: 1.3rem 0;
border-bottom: 1px solid var(--line-soft);
}
.faq-item:first-child { border-top: 1px solid var(--line-soft); }
.faq-q {
display: flex;
gap: 0.8rem;
align-items: baseline;
font-size: 1rem;
font-weight: 800;
line-height: 1.65;
margin-bottom: 0.6rem;
}
.faq-q .mark {
font-family: "Shippori Mincho", serif;
color: var(--accent);
font-size: 1.2rem;
font-weight: 900;
}
.faq-a {
display: flex;
gap: 0.8rem;
align-items: baseline;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.95;
padding-left: 0;
}
.faq-a .mark {
font-family: "Shippori Mincho", serif;
color: var(--ink-mute);
font-size: 1.2rem;
font-weight: 900;
}
/* ============ FINAL CTA ============ */
.final {
padding: 3rem 1.6rem;
background: var(--ink);
color: var(--paper);
text-align: center;
position: relative;
overflow: hidden;
}
body[data-mode="hard"] .final::before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(-45deg,
transparent 0 12px,
rgba(198, 51, 30, 0.05) 12px 14px);
pointer-events: none;
}
.final h2 {
font-size: clamp(1.7rem, 5vw, 2.5rem);
line-height: 1.5;
margin-bottom: 1.2rem;
}
.final p {
max-width: 36rem;
margin: 0 auto 1.8rem;
color: rgba(251, 246, 236, 0.8);
font-size: 0.96rem;
line-height: 2;
}
.final .cta { max-width: 420px; margin-left: auto; margin-right: auto; }
.final .cta-note { color: rgba(251, 246, 236, 0.55); }
.final-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.55rem;
margin-bottom: 1.6rem;
}
.final-tag {
padding: 0.35rem 0.8rem;
border: 1px solid rgba(251, 246, 236, 0.25);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
color: var(--highlight);
}
/* ============ FOOTER ============ */
footer {
padding: 2rem 0 7.5rem;
text-align: center;
color: var(--ink-mute);
font-size: 0.8rem;
background: var(--bg);
}
footer .brand { justify-content: center; margin-bottom: 0.7rem; }
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.2rem;
margin: 0.8rem 0;
}
.footer-links a { color: var(--accent); font-weight: 700; font-size: 0.85rem; }
/* ============ STICKY CTA (mobile) ============ */
.sticky-cta {
position: fixed;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
width: min(calc(100% - 1rem), 640px);
padding: 0.55rem 0.6rem 0.55rem 1rem;
background: var(--ink);
color: #fff;
z-index: 30;
display: flex;
align-items: center;
gap: 0.7rem;
border: 1.5px solid var(--ink);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
body[data-mode="soft"] .sticky-cta {
border-radius: 18px;
}
.sticky-copy {
flex: 1;
min-width: 0;
}
.sticky-copy strong {
display: block;
font-size: 0.88rem;
font-weight: 800;
line-height: 1.35;
color: #fff;
}
.sticky-copy span {
display: block;
font-size: 0.7rem;
color: rgba(251, 246, 236, 0.6);
line-height: 1.4;
margin-top: 0.15rem;
}
.sticky-cta .sticky-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 1rem;
min-height: 44px;
background: var(--green);
color: #fff;
font-size: 0.85rem;
font-weight: 900;
white-space: nowrap;
letter-spacing: 0.04em;
}
body[data-mode="soft"] .sticky-cta .sticky-btn { border-radius: 999px; }
@media (max-width: 480px) {
.sticky-copy span { display: none; }
.sticky-cta { padding: 0.5rem 0.5rem 0.5rem 0.9rem; }
.sticky-cta .sticky-btn { padding: 0.65rem 0.85rem; font-size: 0.8rem; min-width: 120px; }
}
/* ============ TWEAKS PANEL ============ */
.tweaks-panel {
position: fixed;
right: 14px;
bottom: 86px;
z-index: 40;
display: none;
flex-direction: column;
gap: 0.7rem;
padding: 1rem;
background: #fff;
color: #14110e;
border: 1px solid #14110e;
border-radius: 14px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
font-family: "Noto Sans JP", sans-serif;
font-size: 0.85rem;
width: 240px;
}
.tweaks-panel.is-open { display: flex; }
.tweaks-panel h4 {
font-family: "Noto Sans JP", sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
color: #7a6e5f;
margin-bottom: 0.15rem;
}
.tweak-row { display: flex; gap: 0.35rem; }
.tweak-row button {
flex: 1;
padding: 0.5rem 0.4rem;
border: 1px solid #d0bfa6;
background: #fbf6ec;
font-size: 0.78rem;
font-weight: 700;
border-radius: 8px;
transition: all 0.12s;
}
.tweak-row button.is-active {
background: #14110e;
color: #fff;
border-color: #14110e;
}
/* ============ RESPONSIVE TWEAKS ============ */
@media (max-width: 760px) {
section.block { padding: 3.6rem 0; }
.hero { padding: 1.8rem 0 2.6rem; }
.hero-sub { font-size: 0.94rem; }
.proof-strip > div { padding: 0.9rem 0.45rem; }
.proof-label { font-size: 0.64rem; }
.hero-offer { padding: 1.1rem; }
.flow-step { grid-template-columns: 1fr; gap: 0.2rem; }
.flow-day { display: flex; align-items: baseline; gap: 0.6rem; }
.flow-day .num { font-size: 1.4rem; margin-bottom: 0; }
.manifesto-body p { font-size: 1.02rem; line-height: 1.95; }
.quote { padding: 1.5rem 1.2rem; }
.profile { padding: 1.5rem 1.2rem; }
.price-hero { padding: 1.5rem 1.2rem; }
.final { padding: 2.4rem 1.2rem; }
}
/* hide hero-offer on wide layouts in right column sense — actually we inline-stack it */
/* Hero layout: stack on mobile, two-col on desktop */
.hero-grid {
display: grid;
gap: 2rem;
align-items: start;
}
.hero-grid > * { min-width: 0; }
@media (min-width: 1040px) {
.hero-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 3rem;
}
}
.skip-link {
position: absolute;
left: 1rem;
top: -3.2rem;
z-index: 60;
padding: 0.7rem 0.9rem;
background: var(--ink);
color: var(--paper);
font-size: 0.85rem;
font-weight: 800;
}
.skip-link:focus { top: 1rem; }
.theme-grid {
display: grid;
gap: 1rem;
}
@media (min-width: 760px) {
.theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1020px) and (min-width: 760px) {
.theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.theme-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
min-height: 100%;
padding: 1.45rem 1.2rem;
background: var(--paper);
border: 1px solid var(--line);
}
body[data-mode="hard"] .theme-card { box-shadow: 4px 4px 0 var(--ink); }
.theme-card .result-chip { width: fit-content; margin-bottom: 0; }
.theme-card h3 {
font-size: 1.05rem;
line-height: 1.55;
font-weight: 900;
}
.theme-card p {
color: var(--ink-soft);
font-size: 0.9rem;
line-height: 1.82;
margin-bottom: auto;
}
.theme-label {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 34px;
padding: 0.36rem 0.68rem;
border: 1px solid var(--line-soft);
background: var(--paper-soft);
color: var(--accent);
font-size: 0.8rem;
font-weight: 900;
}
.theme-note {
display: grid;
gap: 0.85rem;
margin-top: 1.1rem;
padding: 1.25rem 1.2rem;
border: 1px solid var(--line);
background: var(--paper);
}
@media (min-width: 760px) {
.theme-note {
grid-template-columns: 1fr auto;
align-items: center;
}
}
.theme-note p {
color: var(--ink-soft);
font-size: 0.94rem;
line-height: 1.9;
}
.theme-link,
.subtle-link {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 42px;
padding: 0.58rem 0.85rem;
border: 1px solid var(--line);
background: var(--paper);
color: var(--accent);
font-size: 0.84rem;
font-weight: 900;
}
.theme-link::after,
.subtle-link::after { content: "→"; margin-left: 0.45rem; }
.proof-note {
margin-top: 1.2rem;
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.9;
}
.block-dark .proof-note { color: rgba(251, 246, 236, 0.72); }
.case-study {
display: grid;
gap: 1.25rem;
}
.case-copy,
.case-close {
max-width: 48rem;
color: var(--ink-soft);
font-size: 0.96rem;
line-height: 1.95;
}
.case-copy p + p,
.case-close p + p { margin-top: 0.8rem; }
.case-shots {
display: grid;
gap: 1rem;
align-items: start;
max-width: 50rem;
margin: 0 auto;
}
@media (min-width: 860px) {
.case-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.case-shot {
margin: 0;
padding: 0.65rem;
width: min(100%, 22rem);
justify-self: center;
border: 1px solid var(--line);
background: var(--paper);
}
body[data-mode="hard"] .case-shot { box-shadow: 4px 4px 0 var(--ink); }
.case-shot img {
width: 100%;
height: auto;
border: 1px solid var(--line);
background: #1a1a1a;
}
.case-shot figcaption {
margin-top: 0.55rem;
color: var(--ink-soft);
font-size: 0.82rem;
font-weight: 800;
line-height: 1.6;
}
.case-close {
padding: 1.2rem;
border-left: 4px solid var(--accent);
background: var(--paper);
}
.case-push {
display: inline-block;
margin-top: 0.9rem;
padding: 0.22rem 0.35rem;
background: linear-gradient(transparent 55%, var(--highlight) 55%, var(--highlight) 92%, transparent 92%);
color: var(--ink);
font-family: "Shippori Mincho", "Yu Mincho", serif;
font-size: clamp(1.8rem, 8vw, 3.3rem);
font-weight: 900;
line-height: 1.1;
}
.example-list {
list-style: none;
display: grid;
gap: 0.7rem;
}
.example-list li {
position: relative;
padding-left: 1.15rem;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.85;
}
.example-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.75em;
width: 0.65rem;
height: 2px;
background: var(--accent);
}
.other-themes {
padding: 3rem 0 2rem;
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.other-panel {
max-width: 50rem;
padding: 1.35rem 1.2rem;
border: 1px solid var(--line-soft);
background: rgba(251, 246, 236, 0.72);
}
.other-panel h2 {
font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0.4rem;
font-weight: 900;
}
.other-panel p {
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.85;
margin-bottom: 0.8rem;
}
.legal-box {
padding: 1.35rem 1.2rem;
background: var(--paper);
border: 1px solid var(--line);
}
.legal-box p {
max-width: 46rem;
color: var(--ink-soft);
font-size: 0.9rem;
line-height: 1.85;
}
.legal-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1rem;
}
.legal-actions a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0.55rem 0.8rem;
border: 1px solid var(--line);
background: var(--paper);
color: var(--accent);
font-size: 0.82rem;
font-weight: 800;
}
.hero h1 { overflow-wrap: anywhere; }
html,
body { overflow-x: hidden; }
.cta, .sticky-btn { text-align: center; }
@media (max-width: 760px) {
.topbar-limit { display: none; }
.topbar-inner { justify-content: flex-start; }
.hero-kicker {
display: block;
width: 100%;
font-size: 0.72rem;
line-height: 1.65;
letter-spacing: 0.14em;
word-break: break-all;
overflow-wrap: anywhere;
}
.hero-kicker::before { display: none; }
.hero-lead,
.hero-sub,
.section-lead,
.manifesto-body p {
max-width: 100%;
word-break: break-all;
overflow-wrap: anywhere;
}
.hero-lead { font-size: 1.08rem; }
.hero h1 { font-size: clamp(2rem, 8.2vw, 2.5rem); line-height: 1.14; }
.proof-strip { grid-template-columns: 1fr; }
.proof-strip > div {
border-right: none;
border-bottom: 1px solid var(--line-soft);
padding: 0.8rem 0.65rem;
}
.proof-strip > div:last-child { border-bottom: none; }
.hero-offer-price .yen { font-size: clamp(2.25rem, 13vw, 3.2rem); }
.sticky-cta { display: grid; grid-template-columns: 1fr; padding: 0.5rem; }
.sticky-copy { display: none; }
.sticky-cta .sticky-btn { width: 100%; min-width: 0; }
}
@media (max-width: 420px) {
.topbar-inner { gap: 0.8rem; }
.topbar-limit { font-size: 0.66rem; }
.brand { font-size: 0.9rem; }
.hero h1 { font-size: clamp(2.25rem, 11.6vw, 3rem); }
.sticky-cta { display: grid; grid-template-columns: 1fr; padding: 0.5rem; }
.sticky-copy { display: none; }
.sticky-cta .sticky-btn { width: 100%; min-width: 0; }
}
@media (max-width: 520px) {
.wrap {
width: min(calc(100% - 2rem), 358px);
margin-left: 1rem;
margin-right: auto;
}
.sticky-cta {
left: 1rem;
right: 1rem;
width: auto;
transform: none;
}
}