:root {
  --paper: #f7f3eb;
  --paper-deep: #eee8dc;
  --ink: #252522;
  --ink-soft: #55534c;
  --muted: #827d72;
  --line: #dcd4c7;
  --line-dark: #b9ad9d;
  --accent: #c45d3d;
  --accent-dark: #9f422b;
  --olive: #66745c;
  --olive-pale: #e2e6d9;
  --night: #24312b;
  --white: #fffdf8;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --container: 1160px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.9; letter-spacing: .035em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .13; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button { border: 0; }
img, svg { display: block; max-width: 100%; }
.container { width: min(100% - 64px, var(--container)); margin: 0 auto; }
.section-pad { padding: 132px 0; position: relative; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .16em; line-height: 1; }
.eyebrow-line { display: inline-block; width: 28px; height: 1px; background: currentColor; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .015em; }
h1 em, h2 em { color: var(--accent); font-style: normal; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 52px; padding: 14px 24px; border-radius: 2px; font-size: .85rem; font-weight: 700; letter-spacing: .08em; transition: transform .25s var(--ease), background .25s ease, color .25s ease, box-shadow .25s ease; cursor: pointer; }
.button span { font-size: 1.15em; line-height: 1; }
.button:hover { transform: translateY(-3px); }
.button-accent { background: var(--accent); box-shadow: 5px 5px 0 rgba(159,66,43,.15); color: var(--white); }
.button-accent:hover { background: var(--accent-dark); box-shadow: 7px 7px 0 rgba(159,66,43,.15); }
.button-dark { background: var(--night); color: var(--white); }
.button-dark:hover { background: #18251f; }
.button-paper { background: var(--white); color: var(--night); }
.button-paper:hover { background: var(--olive-pale); }
.text-link { display: inline-flex; align-items: center; gap: 14px; font-size: .82rem; font-weight: 700; border-bottom: 1px solid var(--line-dark); padding-bottom: 6px; transition: color .2s ease, border-color .2s ease; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(247,243,235,.9); border-bottom: 1px solid rgba(185,173,157,.55); backdrop-filter: blur(14px); }
.header-inner { display: flex; align-items: center; height: 82px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: 1.25rem; line-height: 1; transform: rotate(-7deg); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; }
.brand-caption { margin-top: 5px; color: var(--muted); font-size: .59rem; letter-spacing: .06em; }
.main-nav { display: flex; gap: clamp(18px, 2.3vw, 32px); align-items: center; margin-left: auto; margin-right: 34px; }
.main-nav a { position: relative; color: var(--ink-soft); font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.main-nav a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.main-nav a:hover { color: var(--accent); }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; color: var(--accent-dark); border: 1px solid var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.header-link:hover { background: var(--accent); color: var(--white); }
.menu-toggle { display: none; width: 42px; height: 42px; background: none; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 1px; margin: 5px auto; background: var(--ink); transition: transform .25s ease, opacity .25s ease; }
.mobile-nav { display: none; }
.mobile-fixed-cta { display: none; }
.line-cta-icon { display: inline-grid; flex: 0 0 auto; place-items: center; width: 36px; height: 25px; border-radius: 7px; background: #3f7354; color: var(--white); font-size: .52rem; font-weight: 700; letter-spacing: 0; line-height: 1; }

/* Hero */
.hero { min-height: 690px; overflow: hidden; padding-top: 124px; padding-bottom: 112px; }
.hero-wash { position: absolute; top: -190px; right: -120px; width: 63vw; height: 690px; border-radius: 50%; background: var(--olive-pale); opacity: .73; transform: rotate(-14deg); }
.hero-wash::after { content: ""; position: absolute; right: -6%; bottom: 3%; width: 57%; height: 35%; border-radius: 50%; background: var(--paper); opacity: .48; }
.hero-layout { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 72px; }
.hero-copy { padding-left: clamp(0px, 4vw, 56px); }
.hero-copy h1 { max-width: 670px; margin: 28px 0 30px; font-size: clamp(2.8rem, 5.1vw, 5.15rem); line-height: 1.28; }
.hero-lead { margin-bottom: 22px; font-family: var(--serif); font-size: clamp(1.1rem, 1.45vw, 1.35rem); font-weight: 600; line-height: 2; }
.hero-detail { max-width: 550px; color: var(--ink-soft); font-size: .87rem; line-height: 2.15; }
.hero-audience { max-width: 550px; margin-top: 24px; padding: 16px 20px 15px; border-left: 2px solid var(--accent); background: rgba(255,253,248,.58); }
.hero-audience-label { margin-bottom: 9px; color: var(--olive); font-size: .63rem; font-weight: 700; letter-spacing: .14em; }
.hero-audience-groups { display: grid; gap: 5px; }
.hero-audience-groups p { display: flex; align-items: baseline; gap: 14px; font-size: .76rem; line-height: 1.8; }
.hero-audience-groups strong { flex: 0 0 2.5em; color: var(--accent-dark); font-family: var(--serif); font-size: .88rem; }
.hero-audience-groups span { color: var(--ink-soft); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 37px; }
.hero-reassurance { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: .68rem; }
.reassurance-dot { width: 7px; height: 7px; border: 1px solid var(--olive); border-radius: 50%; }
.hero-art { position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center; }
.site-sketch { position: relative; z-index: 1; width: min(100%, 450px); padding: 12px; background: var(--white); border: 1px solid var(--line-dark); box-shadow: 18px 21px 0 rgba(36,49,43,.13); transform: rotate(3.5deg); }
.sketch-top { display: flex; align-items: center; gap: 5px; height: 29px; padding: 0 7px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .5rem; letter-spacing: .04em; }
.sketch-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-dark); }
.sketch-url { margin-left: 8px; }
.sketch-body { position: relative; min-height: 377px; overflow: hidden; padding: 43px 42px; background: #dce1d0; color: var(--night); }
.sketch-kicker { position: relative; z-index: 1; color: var(--olive); font-size: .53rem; font-weight: 700; letter-spacing: .12em; }
.sketch-heading { position: relative; z-index: 1; margin-top: 17px; font-family: var(--serif); font-size: 2.25rem; font-weight: 700; line-height: 1.4; }
.sketch-heading span { color: var(--accent); }
.sketch-rule { position: relative; z-index: 1; width: 48px; height: 2px; margin: 19px 0 14px; background: var(--accent); }
.sketch-small { position: relative; z-index: 1; font-size: .68rem; line-height: 1.8; }
.sketch-button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 157px; margin-top: 23px; padding: 9px 11px; background: var(--night); color: var(--white); font-size: .57rem; }
.sketch-button span { font-size: .9rem; }
.sketch-sun { position: absolute; right: -56px; top: 45px; width: 210px; height: 210px; border-radius: 50%; background: #e6ba6b; opacity: .9; }
.sketch-leaf { position: absolute; z-index: 0; width: 160px; height: 60px; border-radius: 100% 0 100% 0; background: rgba(102,116,92,.7); transform: rotate(-31deg); }
.leaf-one { right: -33px; bottom: 48px; }
.leaf-two { right: 38px; bottom: 1px; transform: rotate(10deg) scale(.75); opacity: .65; }
.sketch-footer { display: flex; gap: 16px; height: 33px; align-items: end; padding: 0 7px; color: var(--muted); font-size: .48rem; letter-spacing: .08em; }
.art-stamp { position: absolute; z-index: 2; top: 35px; right: 15px; display: grid; place-items: center; width: 83px; height: 83px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-family: var(--serif); font-size: .83rem; font-weight: 700; line-height: 1.45; text-align: center; transform: rotate(11deg); background: rgba(247,243,235,.82); }

/* Trust */
.trust-bar { background: var(--night); color: var(--white); }
.trust-items { display: flex; align-items: stretch; min-height: 116px; }
.trust-item { display: flex; align-items: center; gap: 14px; flex: 1; border-right: 1px solid rgba(255,253,248,.18); }
.trust-item:first-child { border-left: 1px solid rgba(255,253,248,.18); }
.trust-number { color: #ddb092; font-size: .63rem; font-weight: 700; letter-spacing: .08em; }
.trust-item strong, .trust-item small { display: block; }
.trust-item strong { font-family: var(--serif); font-size: 1rem; font-weight: 500; letter-spacing: .06em; }
.trust-item small { margin-top: 2px; color: rgba(255,253,248,.63); font-size: .64rem; }
.trust-note { align-self: center; margin-left: auto; padding-left: 36px; color: #dfcbbd; font-family: var(--serif); font-size: .8rem; line-height: 1.65; }

/* About */
.about { background: var(--white); }
.about-layout { display: grid; grid-template-columns: 1fr .78fr; gap: 13%; align-items: start; }
.section-intro h2, .section-heading-row h2, .faq-heading h2, .contact-copy h2 { margin: 28px 0 24px; font-size: clamp(2.1rem, 3.6vw, 3.7rem); line-height: 1.55; }
.section-summary { max-width: 500px; color: var(--ink-soft); font-size: .92rem; line-height: 2.2; }
.about-note { position: relative; margin-top: 59px; padding: 40px 42px 34px; border: 1px solid var(--line); background: var(--paper); transform: rotate(1.2deg); }
.hand-note { color: var(--accent); font-family: var(--serif); font-size: 1.23rem; font-weight: 600; line-height: 1.8; }
.about-note-line { width: 100%; height: 1px; margin: 24px 0 21px; background: var(--line); }
.about-note > p:not(.hand-note) { color: var(--ink-soft); font-size: .8rem; line-height: 2.1; }
.note-sign { display: block; margin-top: 24px; color: var(--olive); font-family: var(--serif); font-size: .78rem; text-align: right; }
.namecard-block { display: grid; grid-template-columns: 1.05fr .95fr; gap: 9%; align-items: center; margin-top: 100px; padding-top: 42px; border-top: 1px solid var(--line); }
.namecard-copy h3 { margin: 23px 0 19px; font-size: clamp(1.7rem, 2.8vw, 2.75rem); line-height: 1.65; }
.namecard-copy > p:not(.eyebrow):not(.namecard-emphasis) { max-width: 600px; color: var(--ink-soft); font-size: .82rem; line-height: 2.15; }
.namecard-emphasis { margin-top: 22px; padding-left: 18px; border-left: 2px solid var(--accent); color: var(--accent-dark); font-family: var(--serif); font-size: .98rem; line-height: 1.9; }
.namecard-side { display: flex; flex-direction: column; align-items: center; gap: 25px; }
.namecard-route { display: grid; grid-template-columns: 1fr auto 1.35fr; align-items: center; gap: 15px; width: 100%; padding: 24px 20px; background: var(--paper); border: 1px solid var(--line); text-align: center; }
.namecard-route-label { font-family: var(--serif); font-size: .83rem; line-height: 1.8; }
.namecard-route-label:last-child { color: var(--accent-dark); }
.namecard-route-arrow { color: var(--accent); font-size: 1.35rem; }
.namecard-cta { width: 100%; padding-right: 16px; padding-left: 16px; font-size: .76rem; }
.concern-layout { display: grid; grid-template-columns: .8fr 1fr; gap: 15%; margin-top: 130px; padding-top: 38px; border-top: 1px solid var(--line); }
.concern-heading { display: flex; gap: 26px; }
.vertical-label { color: var(--accent); font-size: .67rem; font-weight: 700; letter-spacing: .12em; writing-mode: vertical-rl; }
.concern-heading h3 { font-size: clamp(1.3rem, 2.2vw, 2.05rem); line-height: 1.8; }
.concern-list { border-top: 1px solid var(--line); }
.concern-item { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; min-height: 66px; border-bottom: 1px solid var(--line); }
.concern-item span { color: var(--accent); font-size: .66rem; font-weight: 700; }
.concern-item p { font-size: .82rem; }

/* Service */
.service { background: var(--paper); }
.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 70px; }
.section-heading-row h2 { margin-bottom: 0; }
.heading-aside { max-width: 250px; margin-bottom: 8px; color: var(--muted); font-size: .78rem; line-height: 2.1; }
.service-list { border-top: 1px solid var(--line-dark); }
.service-row { display: grid; grid-template-columns: 95px 1fr 180px; gap: 40px; min-height: 215px; padding: 42px 0; border-bottom: 1px solid var(--line-dark); align-items: center; }
.service-index { color: var(--accent); font-family: var(--serif); font-size: 1.9rem; }
.service-label { margin-bottom: 8px; color: var(--olive); font-size: .63rem; font-weight: 700; letter-spacing: .16em; }
.service-content h3 { margin-bottom: 13px; font-size: 1.55rem; }
.service-content > p:last-child { max-width: 650px; color: var(--ink-soft); font-size: .82rem; line-height: 2.15; }
.service-mark { justify-self: end; position: relative; width: 125px; height: 125px; }
.mark-speech { border: 1px solid var(--accent); border-radius: 50%; transform: rotate(-8deg); }
.mark-speech::before { content: ""; position: absolute; left: 30px; top: 35px; width: 65px; height: 45px; border: 1px solid var(--accent); border-radius: 48%; }
.mark-speech::after { content: ""; position: absolute; left: 38px; top: 72px; width: 14px; height: 14px; border-left: 1px solid var(--accent); transform: skewY(-33deg); }
.mark-speech span { position: absolute; top: 56px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.mark-speech span:nth-child(1) { left: 53px; }.mark-speech span:nth-child(2) { left: 63px; }.mark-speech span:nth-child(3) { left: 73px; }
.mark-frame { border: 1px solid var(--olive); transform: rotate(8deg); }
.mark-frame::before, .mark-frame::after, .mark-frame span::before, .mark-frame span::after { content: ""; position: absolute; width: 27px; height: 27px; border-color: var(--olive); border-style: solid; }
.mark-frame::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }.mark-frame::after { top: -1px; right: -1px; border-width: 1px 1px 0 0; }.mark-frame span::before { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }.mark-frame span::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.mark-sun { border: 1px solid #d39b5b; border-radius: 50%; }
.mark-sun::before { content: ""; position: absolute; inset: 25px; background: #e6ba6b; border-radius: 50%; }
.mark-sun::after { content: ""; position: absolute; inset: 13px; border: 1px dashed #d39b5b; border-radius: 50%; }
.section-footnote { margin-top: 22px; color: var(--muted); font-size: .68rem; }

/* Competitive advantage */
.advantage { background: var(--paper-deep); }
.advantage-heading { margin-bottom: 44px; }
.advantage-lead { max-width: 620px; margin-bottom: 35px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.1rem; line-height: 2; }
.advantage-lead strong { color: var(--accent-dark); font-weight: 700; }
.comparison-table-wrap { overflow-x: auto; border: 1px solid var(--line-dark); background: var(--white); }
.comparison-table { width: 100%; min-width: 740px; border-collapse: collapse; table-layout: fixed; }
.comparison-table th, .comparison-table td { padding: 17px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: .76rem; line-height: 1.7; }
.comparison-table thead th { background: var(--night); color: var(--white); font-size: .72rem; font-weight: 600; letter-spacing: .06em; }
.comparison-table thead th:first-child { width: 24%; background: #34443b; }
.comparison-table tbody th { width: 24%; background: var(--paper); color: var(--ink-soft); font-weight: 700; }
.comparison-table tr > *:last-child { border-right: 0; }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-table .your-service { background: #fff2e9; color: var(--accent-dark); }
.comparison-table thead .your-service { background: var(--accent); color: var(--white); }
.comparison-table tbody .your-service strong { font-size: .82rem; }
.comparison-note { margin-top: 13px; color: var(--muted); font-size: .65rem; line-height: 1.8; }
.comparison-scroll-note { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.advantage-difference { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: start; margin-top: 64px; padding: 38px 0 40px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.advantage-difference h3 { margin-top: 22px; color: var(--night); font-size: clamp(1.55rem, 2.7vw, 2.6rem); line-height: 1.7; }
.advantage-difference-copy { align-self: end; }
.advantage-difference-copy > p:first-child { color: var(--ink-soft); font-size: .83rem; line-height: 2.2; }
.advantage-difference-conclusion { margin-top: 22px; color: var(--accent-dark); font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.8; }
.advantage-reason { display: grid; grid-template-columns: .76fr 1.24fr; gap: 12%; margin-top: 73px; padding: 39px 0 42px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.advantage-reason h3 { margin-top: 22px; color: var(--night); font-size: clamp(1.6rem, 2.6vw, 2.55rem); line-height: 1.65; }
.advantage-reason > p { align-self: end; color: var(--ink-soft); font-size: .83rem; line-height: 2.2; }
.advantage-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 55px; }
.advantage-card { min-height: 305px; padding: 28px 28px 31px; background: var(--white); border-top: 3px solid var(--accent); box-shadow: 5px 6px 0 rgba(36,49,43,.07); }
.advantage-card:nth-child(2) { border-top-color: var(--olive); }
.advantage-card:nth-child(3) { border-top-color: #d39b5b; }
.advantage-card-number { color: var(--accent); font-family: var(--serif); font-size: 1.7rem; line-height: 1; }
.advantage-card:nth-child(2) .advantage-card-number { color: var(--olive); }
.advantage-card:nth-child(3) .advantage-card-number { color: #b47b3d; }
.advantage-card-label { margin-top: 18px; color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .14em; }
.advantage-card h3 { margin: 11px 0 15px; font-size: 1.35rem; line-height: 1.6; }
.advantage-card > p:last-child { color: var(--ink-soft); font-size: .75rem; line-height: 2.05; }
.advantage-conclusion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 56px; padding: 23px 28px; background: var(--night); color: rgba(255,253,248,.75); font-family: var(--serif); font-size: .95rem; line-height: 1.8; }
.advantage-conclusion span::after { content: ""; display: inline-block; width: 20px; height: 1px; margin: 0 0 4px 20px; background: rgba(255,253,248,.35); }
.advantage-conclusion strong { color: #e5b99d; font-weight: 600; }

/* Flow */
.flow { background: var(--olive-pale); }
.flow .section-heading-row { margin-bottom: 72px; }
.flow-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--olive); }
.flow-step { position: relative; padding: 30px 28px 14px 0; margin-right: 28px; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; top: -1px; right: 0; width: 1px; height: 30px; background: var(--olive); transform: rotate(29deg); transform-origin: top; }
.flow-day { display: block; color: var(--olive); font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.flow-number { display: grid; place-items: center; width: 37px; height: 37px; margin: 24px 0 17px; border: 1px solid var(--olive); border-radius: 50%; color: var(--olive); font-family: var(--serif); font-size: 1.1rem; }
.flow-step h3 { margin-bottom: 10px; font-size: 1.15rem; }
.flow-step p { color: var(--ink-soft); font-size: .75rem; line-height: 2; }
.flow-note { display: flex; align-items: center; gap: 14px; width: fit-content; margin: 57px auto 0; padding: 12px 20px; border-top: 1px solid rgba(102,116,92,.4); border-bottom: 1px solid rgba(102,116,92,.4); color: var(--olive); font-size: .76rem; }
.flow-note-mark { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--olive); border-radius: 50%; font-weight: 700; }

/* Price */
.price { background: var(--night); color: var(--white); }
.price-layout { display: grid; grid-template-columns: .77fr 1.23fr; gap: 11%; align-items: center; }
.eyebrow-light { color: #e1ad8c; }
.price-intro h2 { margin: 28px 0 25px; font-size: clamp(2.1rem, 3.5vw, 3.6rem); line-height: 1.6; }
.price-intro p:not(.eyebrow) { max-width: 350px; color: rgba(255,253,248,.7); font-size: .84rem; line-height: 2.2; }
.price-intro .button { margin-top: 36px; }
.price-paper { position: relative; padding: 48px 52px 40px; background: var(--white); color: var(--ink); box-shadow: 14px 14px 0 rgba(0,0,0,.14); transform: rotate(1.2deg); }
.price-paper::before { content: "おすすめ"; position: absolute; top: -13px; right: 28px; padding: 5px 13px; background: var(--accent); color: var(--white); font-size: .62rem; font-weight: 700; letter-spacing: .12em; transform: rotate(5deg); }
.price-label { color: var(--accent); font-size: .63rem; font-weight: 700; letter-spacing: .18em; }
.price-paper h3 { margin-top: 13px; font-size: 1.55rem; line-height: 1.75; }
.price-paper h3 strong { color: var(--accent-dark); font-weight: 700; }
.price-title-line { white-space: nowrap; }
.price-number { display: flex; align-items: baseline; gap: 5px; margin: 19px 0 0; color: var(--accent); font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.price-number span { font-size: 5rem; line-height: 1; letter-spacing: -.08em; }
.price-number small { margin-left: 6px; color: var(--muted); font-family: var(--sans); font-size: .62rem; font-weight: 400; }
.price-sub { margin-top: 5px; color: var(--muted); font-size: .7rem; }
.price-included-heading { margin-top: 31px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--accent-dark); font-family: var(--serif); font-size: .98rem; line-height: 1.6; }
.price-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 25px; margin: 20px 0 26px; list-style: none; }
.price-list li { position: relative; padding-left: 0; }
.price-list li::before { display: none; }
.price-list li strong, .price-list li span { display: block; }
.price-list li strong { color: var(--accent-dark); font-family: var(--serif); font-size: .82rem; line-height: 1.7; }
.price-list li span { margin-top: 4px; color: var(--ink-soft); font-size: .68rem; line-height: 1.9; }
.price-care { padding: 18px 20px; background: var(--paper); }
.price-care span, .price-care strong, .price-care small { display: block; }
.price-care span { color: var(--olive); font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.price-care strong { margin-top: 5px; font-family: var(--serif); font-size: .86rem; font-weight: 600; }
.price-care strong .price-care-fee { display: inline; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: normal; white-space: nowrap; }
.price-care small { margin-top: 3px; color: var(--muted); font-size: .59rem; }
.price-reason, .price-one-page { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.price-reason h4, .price-one-page h4 { color: var(--accent-dark); font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; }
.price-reason p, .price-one-page p { margin-top: 10px; color: var(--ink-soft); font-size: .71rem; line-height: 2.05; }
.price-reason strong, .price-one-page strong { color: var(--ink); font-weight: 700; }
.price-one-page { padding: 22px 20px 20px; border-top: 0; border-left: 2px solid var(--olive); background: var(--paper); }
.price-one-page h4 { color: var(--olive); }

/* Story */
.story { background: var(--white); }
.story-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 13%; align-items: center; }
.story-portrait { position: relative; min-height: 475px; padding: 40px 42px; overflow: hidden; background: var(--olive-pale); }
.portrait-sun { position: absolute; top: 60px; right: 48px; width: 200px; height: 200px; border-radius: 50%; background: #e6ba6b; }
.portrait-drawing { position: absolute; bottom: 70px; left: 50%; width: 180px; height: 290px; transform: translateX(-50%); }
.portrait-head { position: absolute; z-index: 2; top: 0; left: 45px; width: 90px; height: 108px; border-radius: 48% 48% 44% 44%; background: #d8a886; transform: rotate(-6deg); }
.portrait-head::before { content: ""; position: absolute; top: -15px; left: -6px; width: 105px; height: 68px; border-radius: 60% 45% 30% 30%; background: var(--night); transform: rotate(5deg); }
.portrait-head::after { content: ""; position: absolute; top: 54px; left: 23px; width: 44px; height: 10px; border-bottom: 1px solid var(--accent-dark); border-radius: 50%; }
.portrait-body { position: absolute; bottom: -3px; left: 9px; width: 165px; height: 190px; border-radius: 52% 52% 8% 8%; background: var(--night); }
.portrait-body::after { content: ""; position: absolute; top: 27px; left: 70px; width: 25px; height: 120px; background: #394a40; transform: rotate(5deg); }
.portrait-caption { position: absolute; top: 38px; left: 42px; color: var(--olive); font-family: var(--serif); font-size: .9rem; }
.portrait-name { position: absolute; bottom: 40px; left: 42px; font-family: var(--serif); font-size: 1.05rem; }
.portrait-role { position: absolute; bottom: 22px; left: 42px; color: var(--muted); font-size: .6rem; }
.story-copy h2 { margin: 27px 0; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.65; }
.story-copy > p:not(.eyebrow) { max-width: 550px; margin-top: 17px; color: var(--ink-soft); font-size: .83rem; line-height: 2.2; }
.signature { width: fit-content; margin-top: 31px; padding: 15px 25px; border-left: 2px solid var(--accent); color: var(--accent-dark); font-family: var(--serif); font-size: 1rem; line-height: 1.8; }
.signature span { display: block; color: var(--muted); font-family: var(--sans); font-size: .63rem; text-align: right; }

/* FAQ */
.faq { background: var(--paper); }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 12%; }
.faq-heading h2 { font-size: clamp(1.9rem, 3.1vw, 3.1rem); }
.faq-heading > p:last-child { color: var(--muted); font-size: .78rem; }
.faq-list { border-top: 1px solid var(--line-dark); }
.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 23px 0; background: none; cursor: pointer; text-align: left; }
.faq-question > span { display: flex; align-items: center; gap: 16px; font-size: .83rem; font-weight: 600; }
.faq-question b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: .72rem; }
.faq-question i { color: var(--accent); font-size: 1.35rem; font-style: normal; font-weight: 300; transition: transform .25s ease; }
.faq-item.is-open .faq-question i { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-answer p { min-height: 0; overflow: hidden; margin: 0; padding: 0 40px 0 41px; color: var(--ink-soft); font-size: .78rem; line-height: 2.1; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer p { padding-bottom: 24px; }

/* Contact */
.contact { background: var(--white); }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12%; align-items: start; }
.contact-copy h2 { margin-bottom: 27px; }
.contact-copy > p:not(.eyebrow) { color: var(--ink-soft); font-size: .85rem; line-height: 2.2; }
.contact-promise { display: flex; gap: 12px; margin-top: 28px; padding: 15px 16px; background: var(--paper); color: var(--olive); }
.contact-promise span { font-size: 1.2rem; line-height: 1.5; }
.contact-promise p { font-size: .7rem; line-height: 1.9; }
.line-contact-card { padding: 43px 48px 39px; background: var(--paper); border: 1px solid var(--line); }
.line-card-label { color: var(--accent); font-size: .65rem; font-weight: 700; letter-spacing: .15em; }
.line-contact-card h3 { margin-top: 13px; font-size: 1.55rem; line-height: 1.75; }
.line-card-description { margin-top: 15px; color: var(--ink-soft); font-size: .78rem; line-height: 2; }
.line-link { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: #3f7354; font-size: .76rem; font-weight: 700; }
.line-link:hover { color: #2b553d; }
.line-icon { display: grid; place-items: center; width: 36px; height: 25px; border-radius: 7px; background: #3f7354; color: var(--white); font-size: .52rem; letter-spacing: 0; }
.line-link b { margin-left: auto; color: var(--muted); font-size: 1rem; font-weight: 400; }
.line-card-note { display: block; margin-top: 19px; color: var(--muted); font-size: .63rem; }

/* Footer & modal */
.site-footer { background: var(--night); color: var(--white); }
.footer-top { display: flex; justify-content: space-between; gap: 40px; padding-top: 70px; padding-bottom: 65px; }
.footer-brand { display: inline-flex; flex-direction: column; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; }
.footer-brand span { margin-top: 8px; color: rgba(255,253,248,.55); font-family: var(--sans); font-size: .58rem; font-weight: 400; letter-spacing: .04em; }
.footer-top > div:first-child p { margin-top: 25px; color: rgba(255,253,248,.7); font-size: .72rem; line-height: 2; }
.footer-links { display: grid; grid-template-columns: repeat(3, auto); gap: 11px 32px; align-content: start; margin-top: 3px; }
.footer-links a { color: rgba(255,253,248,.72); font-size: .7rem; }
.footer-links a:hover { color: #e1ad8c; }
.footer-bottom { display: flex; justify-content: space-between; padding: 18px 0 22px; border-top: 1px solid rgba(255,253,248,.18); color: rgba(255,253,248,.48); font-size: .58rem; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(25,35,29,.58); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.modal-backdrop.is-active { opacity: 1; visibility: visible; }
.modal-content { width: min(100%, 430px); padding: 48px 42px; background: var(--white); text-align: center; transform: translateY(16px); transition: transform .3s var(--ease); }
.modal-backdrop.is-active .modal-content { transform: translateY(0); }
.modal-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 50%; background: var(--olive-pale); color: var(--olive); font-size: 1.5rem; }
.modal-content h3 { font-size: 1.35rem; }
.modal-content p { margin: 15px 0 27px; color: var(--ink-soft); font-size: .78rem; line-height: 2; }
.modal-content .button { width: 100%; }

/* Responsive */
@media (max-width: 980px) {
  .container { width: min(100% - 48px, var(--container)); }
  .main-nav { gap: 16px; margin-right: 18px; }.main-nav a { font-size: .68rem; }.header-link { padding: 8px 10px; font-size: .65rem; }
  .hero-layout { gap: 30px; }.hero-copy h1 { font-size: clamp(2.7rem, 6vw, 4.2rem); }.hero-art { min-height: 440px; }
  .about-layout, .story-layout { gap: 8%; }.concern-layout { gap: 8%; }.price-layout { gap: 6%; }.faq-layout, .contact-layout { gap: 8%; }
  .price-paper { padding: 40px 34px 32px; }.advantage-reason { gap: 8%; }.advantage-card { padding-right: 22px; padding-left: 22px; }
}

@media (max-width: 760px) {
  body { line-height: 1.8; }.container { width: min(100% - 40px, var(--container)); }.section-pad { padding: 86px 0; }
  .main-nav, .header-link { display: none; }.menu-toggle { display: block; margin-left: auto; }.site-header { position: sticky; }.header-inner { height: 70px; }
  .mobile-nav { position: fixed; z-index: 29; top: 70px; right: 0; left: 0; display: flex; flex-direction: column; gap: 0; padding: 15px 20px 22px; background: rgba(247,243,235,.98); border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px rgba(36,49,43,.08); transform: translateY(-120%); transition: transform .35s var(--ease); }
  .mobile-nav.is-open { transform: translateY(0); }.mobile-nav a:not(.button) { padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 600; }.mobile-nav .button { margin-top: 15px; }
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2) { opacity: 0; }.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .hero { padding-top: 72px; padding-bottom: 76px; }.hero-wash { top: 390px; right: -180px; width: 130vw; height: 480px; transform: rotate(-18deg); }.hero-layout { display: flex; flex-direction: column; align-items: stretch; gap: 57px; }.hero-copy { padding-left: 0; }.hero-copy h1 { margin: 23px 0 22px; font-size: clamp(2.45rem, 11vw, 4rem); }.hero-lead { font-size: 1rem; }.hero-detail { font-size: .78rem; }.hero-audience { margin-top: 21px; padding: 14px 16px 13px; }.hero-audience-groups p { align-items: flex-start; gap: 10px; font-size: .69rem; line-height: 1.75; }.hero-audience-groups strong { flex-basis: 2.7em; font-size: .82rem; }.desktop-only { display: none; }.hero-actions { flex-wrap: wrap; gap: 22px; margin-top: 30px; }.hero-art { min-height: 420px; }.site-sketch { width: min(100% - 25px, 390px); }.sketch-body { min-height: 310px; padding: 32px 31px; }.sketch-heading { font-size: 1.75rem; }.sketch-sun { width: 170px; height: 170px; }.art-stamp { top: 6px; right: 14px; }
  .trust-items { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }.trust-item { min-height: 92px; padding: 18px 0; border-right: 0; }.trust-item:first-child { border-left: 0; }.trust-item:nth-child(2) { border-left: 1px solid rgba(255,253,248,.18); padding-left: 20px; }.trust-item:nth-child(3) { grid-column: span 2; border-top: 1px solid rgba(255,253,248,.18); }.trust-note { grid-column: span 2; margin: 0; padding: 15px 0 20px; border-top: 1px solid rgba(255,253,248,.18); font-size: .72rem; }
  .about-layout, .concern-layout, .story-layout, .faq-layout, .contact-layout, .price-layout { display: flex; flex-direction: column; gap: 0; }.about-note { margin-top: 45px; padding: 30px 26px 25px; }.namecard-block { display: block; margin-top: 74px; padding-top: 31px; }.namecard-copy h3 { margin: 21px 0 17px; font-size: 1.75rem; }.namecard-copy > p:not(.eyebrow):not(.namecard-emphasis) { font-size: .76rem; }.namecard-emphasis { margin-top: 19px; font-size: .88rem; }.namecard-side { gap: 18px; margin-top: 31px; }.namecard-route { gap: 8px; padding: 17px 12px; }.namecard-route-label { font-size: .71rem; }.namecard-route-arrow { font-size: 1.1rem; }.namecard-cta { font-size: .7rem; }
  .concern-layout { margin-top: 75px; padding-top: 28px; }.concern-heading { margin-bottom: 36px; }.concern-heading h3 { font-size: 1.35rem; }.concern-item { min-height: 62px; }.section-intro h2, .section-heading-row h2, .faq-heading h2, .contact-copy h2, .price-intro h2, .story-copy h2 { margin-top: 22px; font-size: 2rem; line-height: 1.65; }
  .section-heading-row { display: block; margin-bottom: 48px; }.heading-aside { margin-top: 22px; }.service-row { grid-template-columns: 43px 1fr; gap: 15px; min-height: 0; padding: 31px 0; }.service-index { font-size: 1.4rem; }.service-content h3 { font-size: 1.25rem; line-height: 1.6; }.service-content > p:last-child { font-size: .76rem; }.service-mark { display: none; }
  .advantage-heading { margin-bottom: 35px; }.advantage-lead { margin-bottom: 27px; font-size: .95rem; }.comparison-table-wrap { overflow: visible; border: 0; background: none; }.comparison-table { display: block; width: 100%; min-width: 0; border-collapse: separate; }.comparison-table thead { display: none; }.comparison-table tbody { display: block; }.comparison-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; border: 1px solid var(--line-dark); background: var(--white); }.comparison-table tbody tr:last-child { margin-bottom: 0; }.comparison-table tbody th { grid-column: 1 / -1; width: auto; padding: 11px 12px; border-right: 0; background: var(--paper); font-size: .68rem; }.comparison-table tbody td { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 70px; padding: 9px 8px 10px; border-right: 1px solid var(--line); border-bottom: 0; font-size: .65rem; line-height: 1.55; }.comparison-table tbody td:last-child { border-right: 0; }.comparison-table tbody td::before { display: block; margin-bottom: 5px; color: var(--muted); font-size: .49rem; font-weight: 700; line-height: 1.35; }.comparison-table tbody td:nth-of-type(1)::before { content: "一般的な制作会社"; }.comparison-table tbody td:nth-of-type(2)::before { content: "格安制作サービス"; }.comparison-table tbody td:nth-of-type(3)::before { content: "つむぐWeb"; color: var(--accent-dark); }.comparison-table tbody .your-service { background: #fff2e9; }.comparison-table tbody .your-service strong { font-size: .68rem; }.comparison-note { font-size: .61rem; }.comparison-scroll-note { display: none; }.advantage-reason { display: block; margin-top: 54px; padding: 31px 0 34px; }.advantage-reason h3 { margin-bottom: 18px; font-size: 1.7rem; }.advantage-reason > p { font-size: .76rem; }.advantage-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 38px; }.advantage-card { min-height: 0; padding: 25px 22px 27px; }.advantage-card h3 { font-size: 1.25rem; }.advantage-card > p:last-child { font-size: .74rem; }.advantage-conclusion { align-items: flex-start; flex-direction: column; gap: 1px; margin-top: 38px; padding: 21px 22px; font-size: .82rem; }.advantage-conclusion span::after { display: none; }
  .flow .section-heading-row { margin-bottom: 52px; }.flow-line { display: block; border-top: 0; border-left: 1px solid var(--olive); margin-left: 10px; }.flow-step { margin: 0 0 0 25px; padding: 0 0 38px; }.flow-step:not(:last-child)::after { top: 8px; right: auto; left: -31px; width: 20px; height: 1px; transform: none; }.flow-number { position: absolute; top: -10px; left: -44px; width: 29px; height: 29px; margin: 0; background: var(--olive-pale); font-size: .85rem; }.flow-note { align-items: flex-start; margin-top: 22px; font-size: .7rem; }
  .price-intro { margin-bottom: 48px; }.price-intro p:not(.eyebrow) { font-size: .78rem; }.price-intro .button { margin-top: 26px; }.price-paper { width: 100%; padding: 36px 25px 27px; transform: rotate(.7deg); }.price-paper h3 { font-size: 1.25rem; }.price-paper h3 strong { font-size: 1.1rem; }.price-number span { font-size: 4.2rem; }.price-included-heading { margin-top: 27px; padding-top: 21px; }.price-list { grid-template-columns: 1fr; gap: 14px; margin-top: 17px; }.price-list li strong { font-size: .8rem; }.price-list li span { font-size: .67rem; line-height: 1.85; }.price-reason, .price-one-page { margin-top: 26px; padding-top: 22px; }.price-reason h4, .price-one-page h4 { font-size: .98rem; }.price-reason p, .price-one-page p { font-size: .68rem; line-height: 1.95; }.price-one-page { padding: 19px 16px 17px; }
  .story-portrait { width: 100%; min-height: 440px; margin-bottom: 54px; flex: 0 0 auto; }.story-portrait::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: 73px; width: 220px; min-width: 220px; max-width: 220px; height: 315px; border: 1px solid rgba(102,116,92,.48); background: rgba(255,253,248,.24); box-shadow: 8px 9px 0 rgba(36,49,43,.08); transform: translateX(-50%) rotate(-1deg); }.portrait-sun { z-index: 0; top: 45px; right: 30px; width: 150px; height: 150px; }.portrait-drawing { z-index: 1; left: calc(50% - 90px); bottom: 86px; width: 180px !important; min-width: 180px; max-width: 180px; height: 290px; flex: 0 0 180px; transform: none; }.portrait-head { width: 90px; min-width: 90px; max-width: 90px; }.portrait-body { width: 165px; min-width: 165px; max-width: 165px; }.portrait-caption, .portrait-name, .portrait-role { z-index: 2; }.portrait-caption { top: 27px; left: 26px; }.portrait-name { bottom: 29px; left: 26px; }.portrait-role { bottom: 12px; left: 26px; }.story-copy > p:not(.eyebrow) { font-size: .78rem; }
  .faq-heading { margin-bottom: 45px; }.faq-question { padding: 19px 0; }.faq-question > span { gap: 10px; font-size: .75rem; line-height: 1.7; }.faq-question b { flex: 0 0 23px; width: 23px; height: 23px; }.faq-answer p { padding-left: 33px; padding-right: 0; font-size: .72rem; }
  .contact-copy { margin-bottom: 50px; }.contact-promise { margin-top: 23px; }.line-contact-card { padding: 30px 20px 25px; }.line-contact-card h3 { font-size: 1.25rem; }.line-card-description { font-size: .74rem; }.line-card-note { font-size: .61rem; }
  .mobile-fixed-cta { position: fixed; z-index: 28; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; background: var(--accent); box-shadow: 5px 6px 0 rgba(159,66,43,.2); color: var(--white); font-size: .78rem; font-weight: 700; letter-spacing: .06em; opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; transition: opacity .25s ease, visibility .25s ease, transform .25s var(--ease); }.mobile-fixed-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }.mobile-fixed-cta-arrow { margin-left: auto; font-size: 1.05rem; }.footer-top { display: block; padding: 52px 0 40px; }.footer-links { margin-top: 42px; grid-template-columns: repeat(2, 1fr); gap: 12px; }.footer-bottom { display: block; padding: 17px 0 86px; line-height: 2; }.footer-bottom span:last-child { display: block; margin-top: 4px; font-size: .53rem; }.modal-content { padding: 38px 25px; }
}

@media (max-width: 760px) {
  .advantage-difference { display: block; margin-top: 50px; padding: 31px 0 34px; }
  .advantage-difference h3 { margin-top: 22px; margin-bottom: 18px; font-size: 1.7rem; }
  .advantage-difference-copy > p:first-child { font-size: .76rem; }
  .advantage-difference-conclusion { margin-top: 18px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}