/* System fonts only: no external font downloads or bundled commercial fonts. */
:root {
    --ink:#171816;
    --paper:#f1f0ea;
    --muted:#b8b9b0;
    --rule-dark:#484943;
    --rule-light:#c5c5bb;
    --gutter:clamp(22px,4vw,72px);
    --intro-time:2.8s;
    --msg-time:3.9s;
    color-scheme:light;
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}

*,*::before,*::after {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--ink);
    color:var(--ink);
    font-family:Arial,"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    -webkit-font-smoothing:antialiased;
}

::selection {
    background:#d3d4c5;
    color:var(--ink);
}

h1,h2,h3,p {
    margin:0;
}

a {
    color:inherit;
    text-decoration:none;
}

button {
    font:inherit;
}

a,button {
    -webkit-tap-highlight-color:transparent;
}

a:focus-visible,button:focus-visible {
    outline:2px solid currentColor;
    outline-offset:6px;
}

button {
    cursor:pointer;
}

.dark {
    background:var(--ink);
    color:var(--paper);
}

.paper {
    background:var(--paper);
}

.mono {
    font-family:"Courier New",monospace;
    font-size:11px;
    line-height:1.5;
    font-weight:400;
    letter-spacing:.025em;
}

.section-pad {
    padding:80px var(--gutter) 110px;
}

.section-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.section-label h2 {
    font:inherit;
}

.mobile-break {
    display:none;
}

.skip-link {
    position:fixed;
    top:12px;
    left:20px;
    z-index:100;
    background:var(--paper);
    color:var(--ink);
    padding:16px;
    transform:translateY(-180%);
}

.skip-link:focus {
    transform:none;
}

.intro-skip {
    display:none;
    position:fixed;
    right:var(--gutter);
    top:25px;
    z-index:120;
    color:var(--muted);
    background:none;
    border:0;
    padding:12px;
    font-size:11px;
}

.intro-active .intro-skip {
    display:block;
    animation:skip-out var(--intro-time) step-end both;
}

.brand-intro {
    display:none;
    position:fixed;
    inset:0;
    z-index:110;
    overflow:hidden;
    background:var(--ink);
    color:var(--paper);
    padding:24px var(--gutter);
}

.intro-active .brand-intro {
    display:flex;
    flex-direction:column;
    animation:intro-screen-exit var(--intro-time) cubic-bezier(.76,0,.24,1) both;
}

.intro-ready.intro-active body {
    overflow:hidden;
}

.brand-intro-meta,.brand-intro-foot {
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:9px;
}

.brand-intro-meta span:nth-child(2) {
    margin-left:auto;
    margin-right:auto;
}

.brand-intro-words {
    position:relative;
    flex:1;
    display:grid;
    place-items:center;
}

.intro-word {
    position:absolute;
    display:block;
    font-size:clamp(76px,18vw,300px);
    font-weight:900;
    line-height:.82;
    letter-spacing:-.09em;
    white-space:nowrap;
}

.intro-active .intro-draft {
    animation:intro-draft var(--intro-time) cubic-bezier(.22,.7,.15,1) both;
}

.intro-active .intro-debug {
    animation:intro-debug var(--intro-time) cubic-bezier(.22,.7,.15,1) both;
}

.intro-complete {
    width:100%;
    font-size:13.6vw;
}

.intro-active .intro-complete {
    animation:intro-complete var(--intro-time) cubic-bezier(.22,.7,.15,1) both;
}

.intro-complete>span {
    display:block;
}

@keyframes intro-draft {
    0% {opacity:0;clip-path:inset(100% 0 0);transform:translateY(25%);letter-spacing:-.02em}
    8%,24% {opacity:1;clip-path:inset(0);transform:translateY(0);letter-spacing:-.09em}
    30%,100% {opacity:0;clip-path:inset(0 0 100%);transform:translateY(-20%)}
}

@keyframes intro-debug {
    0%,27% {opacity:0;clip-path:inset(100% 0 0);transform:translateY(25%);letter-spacing:.02em}
    35%,50% {opacity:1;clip-path:inset(0);transform:translateY(0);letter-spacing:-.09em}
    56%,100% {opacity:0;clip-path:inset(0 0 100%);transform:translateY(-20%)}
}

@keyframes intro-complete {
    0%,54% {opacity:0;clip-path:inset(100% 0 0);transform:translateY(12%) scale(.98)}
    64%,86% {opacity:1;clip-path:inset(0);transform:translateY(0) scale(1)}
    100% {opacity:1;clip-path:inset(0);transform:translateY(-3%) scale(.96)}
}

@keyframes intro-screen-exit {
    0%,87% {clip-path:inset(0)}
    100% {clip-path:inset(0 0 100% 0);visibility:hidden}
}

.site-header {
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    height:100px;
    padding:0 var(--gutter);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    color:var(--paper);
}

.wordmark {
    display:flex;
    align-items:baseline;
    gap:6px;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.8px;
    white-space:nowrap;
}

.wordmark>span:first-of-type {
    font-weight:400;
}

/* Draft Debug mark (a "d" whose stem rises into an up arrow). Source: images/logo-mark.svg */
.wordmark-mark {
    flex:none;
    align-self:baseline;
    width:31.6px;
    height:28px;
    margin-right:2px;
}

.wordmark-mark .mk-line {
    stroke:currentColor;
}

.wordmark-mark .mk-arrow {
    stroke:var(--accent,#b4532f);
}

.site-header nav {
    display:flex;
    gap:32px;
    font-size:11px;
}

.site-header nav a {
    display:inline-flex;
    min-height:44px;
    align-items:center;
    gap:18px;
    position:relative;
}

.site-header nav a::after {
    content:"";
    position:absolute;
    bottom:7px;
    left:0;
    width:100%;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s;
}

.site-header nav a:hover::after {
    transform:scaleX(1);
}

.hero {
    min-height:100svh;
    padding:135px var(--gutter) 22px;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.brand-stage {
    position:relative;
    margin:26px -6px 35px;
    transform-origin:50% 40%;
}

.brand {
    font-size:15.1vw;
    font-weight:900;
    letter-spacing:-.085em;
    line-height:.84;
}

.brand-line {
    display:flex;
    column-gap:.2em; /* 2026-09-27 表記を「Draft Debug Studio」（空白あり）にしたので、DRAFT と DEBUG の間を空ける */
    white-space:nowrap;
}

.brand-draft,.brand-debug {
    display:inline-block;
    transform-origin:center;
    will-change:auto;
}

.brand-studio {
    display:block;
    width:max-content;
    margin-top:8px;
}

.brand-period {
    font-weight:400;
}

.revision-line {
    position:absolute;
    top:24%;
    left:20%;
    width:60%;
    height:2px;
    background:var(--paper);
    transform:scaleX(0);
    transform-origin:left;
    pointer-events:none;
}

.hero-bottom {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-top:auto;
    padding-top:20px;
    padding-bottom:38px;
}

.hero-bottom>p {
    font-size:13px;
    line-height:1.9;
    letter-spacing:.015em;
}

/* Top page: one message after the intro. */
.top-message {
    margin:auto 0;
    padding:60px 0 40px;
    font-size:clamp(30px,8vw,132px);
    font-weight:900;
    line-height:1.3;
    letter-spacing:-.02em;
    font-feature-settings:"palt";
}

.top-message>span {
    display:block;
}

/* Web page: the message appears character by character, then the page follows. */
.top-message .ch {
    display:inline-block;
}

.msg-intro .top-message .ch {
    animation:char-in .7s cubic-bezier(.2,.7,.2,1) var(--d) both;
}

.msg-intro .top-message .ch-last {
    animation:char-pop .8s cubic-bezier(.3,1.4,.4,1) var(--d) both;
}

.msg-intro .top-hero .hero-support,.msg-intro .site-header {
    animation:content-reveal var(--msg-time) ease both;
}

@keyframes char-in {
    0% {opacity:0;transform:translateY(.45em) rotate(6deg);filter:blur(8px)}
    100% {opacity:1;transform:none;filter:none}
}

@keyframes char-pop {
    0% {opacity:0;transform:scale(2.4);filter:blur(6px)}
    60% {opacity:1;transform:scale(.9);filter:none}
    100% {opacity:1;transform:none}
}

.top-hero .hero-bottom {
    margin-top:0;
}

/* Top page: business-facing sections (heading left, body right). */
.biz-follow {
    padding-top:0;
}

.biz-follow>.section-label {
    border-top:1px solid var(--rule-light);
    padding-top:24px;
}

.biz-layout {
    display:grid;
    grid-template-columns:1fr 1.55fr;
    gap:7vw;
    margin-top:70px;
    align-items:start;
}

.biz-heading {
    position:sticky;
    top:40px;
    font-size:clamp(32px,3.9vw,64px);
    font-weight:600;
    line-height:1.4;
    letter-spacing:-.07em;
}

.biz-body {
    max-width:680px;
    font-size:14px;
    line-height:2;
}

.biz-body>*+* {
    margin-top:24px;
}

.biz-body h3 {
    margin-top:64px;
    font-size:clamp(20px,1.8vw,26px);
    font-weight:600;
    line-height:1.5;
    letter-spacing:-.04em;
}

.biz-body strong {
    font-weight:700;
}

.biz-inline-link {
    border-bottom:1px solid currentColor;
}

.biz-note {
    font-size:12px;
    line-height:1.9;
    color:#5d5f57;
}

.biz-table-wrap {
    overflow-x:auto;
}

.biz-table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    line-height:1.7;
}

.biz-table th,.biz-table td {
    text-align:left;
    padding:14px 12px 14px 0;
    border-bottom:1px solid var(--rule-light);
    vertical-align:top;
}

.biz-table th {
    font-family:"Courier New",monospace;
    font-size:10px;
    font-weight:400;
    border-bottom-color:var(--ink);
}

.biz-table td:last-child,.biz-table th:last-child {
    white-space:nowrap;
    text-align:right;
    padding-right:0;
}

.biz-table td:last-child {
    font-weight:700;
}

.biz-callout {
    border-left:3px solid var(--ink);
    padding:4px 0 4px 20px;
}

.biz-plan {
    border:1px solid var(--ink);
    padding:30px 32px 32px;
}

.biz-plan-name {
    font-weight:600;
}

.biz-plan-price {
    font-size:clamp(52px,6vw,92px);
    font-weight:900;
    line-height:1.1;
    letter-spacing:-.06em;
    margin-top:6px;
}

.biz-plan-ask {
    font-size:clamp(40px,4.6vw,72px);
    font-weight:900;
    line-height:1.1;
    letter-spacing:-.06em;
    margin-top:6px;
}

.biz-box-soon {
    font-size:26px;
    font-weight:900;
    line-height:1.3;
    letter-spacing:-.05em;
}

.biz-plan-ask>span,.biz-box-soon>span {
    color:#76786b;
    font-weight:400;
}

.biz-plan>.biz-box-sub {
    margin-top:4px;
}

.biz-plan-price>span {
    font-size:.32em;
    font-weight:600;
    letter-spacing:0;
    margin-left:6px;
}

.biz-list {
    list-style:none;
    margin:18px 0 0;
    padding:0;
}

.biz-list li {
    position:relative;
    padding-left:20px;
}

.biz-list li+li {
    margin-top:6px;
}

.biz-list li::before {
    content:"—";
    position:absolute;
    left:0;
    color:#76786b;
}

.biz-pair {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.biz-box {
    border:1px solid var(--rule-light);
    padding:26px 28px;
}

.biz-box>*+* {
    margin-top:14px;
}

.biz-box>.mono {
    font-size:10px;
    color:#5d5f57;
}

.biz-box>.mono+* {
    margin-top:6px;
}

.biz-box-strong {
    border-color:var(--ink);
}

.biz-box-price {
    font-size:30px;
    font-weight:900;
    letter-spacing:-.04em;
    line-height:1.3;
}

.biz-box-price>span {
    font-size:14px;
    font-weight:400;
}

.biz-box-sub {
    font-size:12px;
    color:#5d5f57;
}

.biz-box>.biz-box-sub {
    margin-top:0;
}

.biz-box-title {
    font-size:17px;
    font-weight:700;
    line-height:1.6;
}

.biz-box code {
    font-family:"Courier New",monospace;
    font-size:13px;
    background:#e4e3dc;
    padding:1px 5px;
    margin:0 3px;
}

.biz-figure {
    margin:20px 0 0;
}

.biz-figure img {
    display:block;
    width:100%;
    height:auto;
    border:1px solid var(--rule-light);
}

.biz-figure figcaption {
    margin-top:10px;
    font-size:12px;
    line-height:1.8;
    color:#5d5f57;
}

.biz-make {
    display:grid;
    grid-template-columns:230px 1fr;
    gap:40px;
    align-items:start;
}

.biz-make-points>div+div {
    margin-top:30px;
}

.biz-make-points h3 {
    margin:0 0 8px;
    font-size:17px;
}

.biz-phone {
    border:6px solid var(--ink);
    border-radius:26px;
    overflow:hidden;
    background:var(--paper);
    font-size:10px;
    line-height:1.5;
    text-align:center;
}

.biz-phone>div {
    padding:14px 10px;
    border-top:1px solid var(--rule-light);
    color:#5d5f57;
}

.biz-phone>div>strong {
    display:block;
    color:var(--ink);
}

.biz-phone>.biz-phone-bar {
    height:18px;
    padding:0;
    background:var(--ink);
    border:0;
}

.biz-phone>.biz-phone-hero {
    height:104px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#dcdbd2;
    border:0;
}

.biz-phone>.biz-phone-cta,.biz-phone>.biz-phone-foot {
    background:var(--ink);
    color:var(--paper);
    font-weight:700;
    padding:10px;
}

.biz-phone-photos i {
    display:inline-block;
    width:28%;
    height:34px;
    margin:0 2%;
    background:#dcdbd2;
}

.biz-phone-photos span {
    display:block;
    margin-top:6px;
}

.biz-options {
    margin:24px 0 0;
}

.biz-options>div {
    border-top:1px solid var(--rule-light);
    padding:22px 0;
}

.biz-options>div:last-child {
    border-bottom:1px solid var(--rule-light);
}

.biz-options dt {
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-weight:700;
}

.biz-options dt>span {
    font-family:"Courier New",monospace;
    font-size:12px;
    font-weight:400;
    white-space:nowrap;
}

.biz-options dd {
    margin:8px 0 0;
}

.biz-scenes>article {
    border-top:1px solid var(--rule-light);
    padding:28px 0 30px;
}

.biz-scenes>article:last-child {
    border-bottom:1px solid var(--rule-light);
}

.biz-scenes>article>*+* {
    margin-top:12px;
}

/* 悩み・期待の行は、読む人が「うちのことだ」と気づく入口。見出しより一段控えめに、本文並みに読める大きさにする（2026-10-08） */
.biz-scenes .mono {
    font-size:15px;
    color:var(--ink);
}

.biz-scenes .mono>span {
    font-weight:700;
    color:var(--accent-text);
}

.biz-scenes h3 {
    margin-top:8px;
    font-size:clamp(19px,1.7vw,24px);
}

/* 場面ごとのイラスト。スマホでは悩み・見出しの下、640px以上では左に置く（2026-10-07） */
.biz-scene-img {
    display:block;
}

.biz-scene-img img {
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
}

.biz-scenes>article>.biz-scene-img,
.biz-scenes>article>.biz-scene-text {
    margin-top:16px;
}

.biz-scene-text>*+* {
    margin-top:12px;
}

@media (min-width:640px) {
    .biz-scenes>article {
        display:grid;
        grid-template-columns:240px minmax(0,1fr);
        grid-template-rows:auto 1fr;
        column-gap:28px;
        row-gap:12px;
        align-items:start;
    }

    .biz-scenes>article>.biz-scene-head,
    .biz-scenes>article>.biz-scene-img,
    .biz-scenes>article>.biz-scene-text {
        margin-top:0;
    }

    .biz-scenes>article>.biz-scene-head {
        grid-column:2;
        grid-row:1;
    }

    .biz-scenes>article>.biz-scene-img {
        grid-column:1;
        grid-row:1 / span 2;
    }

    .biz-scenes>article>.biz-scene-text {
        grid-column:2;
        grid-row:2;
    }
}

.biz-flow .process-list {
    max-width:640px;
}

.biz-flow .process-step p {
    max-width:none;
}

.biz-cannot {
    list-style:none;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.biz-cannot li {
    border:1px solid var(--ink);
    padding:18px 12px;
    text-align:center;
    font-weight:700;
}

.intro-active .hero-support,.intro-active .site-header {
    animation:content-reveal var(--intro-time) ease both;
}

@keyframes content-reveal {
    0%,80% {
        opacity:0;
        visibility:hidden;
        transform:translateY(8px);
    }
    100% {
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
}

@keyframes skip-out {
    0% {
        visibility:visible;
    }
    100% {
        visibility:hidden;
    }
}

.statement {
    padding-top:75px;
}

.statement-layout {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:8vw;
    margin-top:90px;
}

.jp-display {
    font-size:clamp(32px,4.6vw,76px);
    font-weight:600;
    line-height:1.55;
    letter-spacing:-.07em;
}

.punctuation {
    display:inline-block;
    margin-left:-.15em;
}

.statement-copy {
    padding-top:8px;
}

.lead {
    font-size:clamp(21px,2.1vw,32px);
    line-height:1.65;
    letter-spacing:-.035em;
    font-weight:500;
}

.statement-copy>p+p {
    margin-top:28px;
    font-size:14px;
    line-height:2;
}

.services {
    padding-top:36px;
}

.section-intro {
    margin-top:32px;
    font-size:clamp(23px,2.8vw,40px);
    font-weight:400;
    letter-spacing:-.04em;
}

.service-list {
    margin-top:60px;
}

.service-row {
    position:relative;
    display:grid;
    grid-template-columns:5% 56% 1fr;
    gap:2%;
    border-top:1px solid var(--rule-light);
    padding:40px 0 44px;
}

.service-row:last-child {
    border-bottom:1px solid var(--rule-light);
}

.service-number {
    padding-top:9px;
}

.service-name h3 {
    font-size:clamp(35px,5.2vw,82px);
    line-height:1;
    letter-spacing:-.065em;
    font-weight:500;
}

.service-dot {
    color:#76786b;
}

.service-name>.mono {
    display:block;
    font-size:10px;
    margin-top:26px;
}

.service-copy {
    padding:5px 0 0 8px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.service-copy>p:nth-child(2) {
    font-size:13px;
    line-height:1.95;
    margin-top:15px;
    max-width:350px;
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:25px;
    padding:9px 0;
    border-bottom:1px solid currentColor;
    font-size:12px;
    line-height:1.5;
    transition:gap .25s;
}

.text-link:hover {
    gap:34px;
}

.service-copy .text-link {
    margin-top:24px;
}

.reveal.is-pending {
    opacity:0;
    transform:translateY(18px);
}

.reveal {
    transition:opacity .65s,transform .65s cubic-bezier(.2,.65,.2,1),clip-path .65s;
}

.approach {
    padding-top:65px;
    padding-bottom:30px;
}

.approach-layout {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:10vw;
    margin-top:80px;
    align-items:start;
}

.approach-sticky {
    position:sticky;
    top:65px;
}

.approach-type {
    font-size:clamp(64px,8vw,135px);
    line-height:.91;
    font-weight:600;
    letter-spacing:-.075em;
}

.repeat-word {
    position:relative;
    display:inline-block;
}

.repeat-word svg {
    position:absolute;
    left:-5%;
    top:-6%;
    width:111%;
    height:116%;
    overflow:visible;
    pointer-events:none;
}

.repeat-word path {
    stroke:var(--muted);
    stroke-width:1.5;
    fill:none;
}

.approach-jp {
    font-size:clamp(28px,3.2vw,48px);
    line-height:1.6;
    letter-spacing:-.05em;
    margin-top:45px;
}

.approach-description {
    color:var(--muted);
    font-size:13px;
    line-height:1.95;
    margin-top:24px;
}

.process-list {
    list-style:none;
    margin:0;
    padding:0;
}

.process-step {
    border-top:1px solid var(--rule-dark);
    padding:32px 0 65px;
    position:relative;
}

.process-step::before {
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:1px;
    background:var(--paper);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .8s;
}

.process-step.is-current::before {
    transform:scaleX(1);
}

.process-step>.mono {
    font-size:11px;
    color:var(--muted);
}

.process-step h3 {
    font-size:clamp(26px,2.8vw,42px);
    font-weight:500;
    letter-spacing:-.06em;
    margin:23px 0 18px;
}

.process-step p {
    max-width:360px;
    font-size:14px;
    line-height:2;
    color:var(--muted);
}

.about {
    padding-top:0;
}

.about-layout {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:10vw;
    margin-top:65px;
}

.about-layout h2 {
    font-size:clamp(40px,5.6vw,85px);
    font-weight:500;
    line-height:1;
    letter-spacing:-.06em;
}

.about-layout h2>span {
    color:#76786b;
}

.about-copy>p+p {
    font-size:14px;
    line-height:2;
    margin-top:26px;
}

.about-copy>.text-link {
    margin-top:27px;
}

.contact {
    padding-top:55px;
    padding-bottom:65px;
}

.contact-jp {
    margin-top:75px;
    font-size:clamp(19px,2.1vw,32px);
    letter-spacing:-.04em;
}

.contact-title {
    font-size:11.2vw;
    line-height:1;
    letter-spacing:-.075em;
    font-weight:500;
    margin:22px 0 45px;
    display:flex;
    white-space:nowrap;
}

.contact-title>span:first-child {
    color:var(--muted);
}

.contact-bottom {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:35px;
    border-top:1px solid var(--rule-dark);
    padding-top:30px;
}

.contact-bottom>p,.contact-bottom>.contact-note {
    font-size:14px;
    line-height:1.95;
    color:var(--muted);
}

/* /pages: the note beside the button is split into short paragraphs */
.contact-note>p+p {
    margin-top:.9em;
}

.contact-link {
    display:grid;
    flex-shrink:0;
    grid-template-columns:1fr auto;
    gap:12px 50px;
    font-size:20px;
    padding-bottom:14px;
    border-bottom:1px solid var(--muted);
}

.contact-link>span {
    transition:transform .25s;
}

.contact-link:hover>span {
    transform:translate(4px,-4px);
}

.contact-link small {
    grid-column:1/-1;
    font-size:10px;
    color:var(--muted);
}

.site-footer {
    padding:0 var(--gutter) 25px;
}

.footer-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--rule-dark);
    padding-top:40px;
    gap:25px;
}

.footer-brand {
    font-size:18px;
    letter-spacing:-.7px;
}

.footer-links {
    display:flex;
    gap:25px;
    font-size:10px;
}

.footer-links a {
    padding:12px 0;
}

.footer-links a:hover {
    text-decoration:underline;
    text-underline-offset:5px;
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:55px;
    font-size:9px;
    color:var(--muted);
}

.footer-bottom>a {
    padding:5px 0;
    margin-top:-5px;
}

@media(min-width:1600px) {
    .hero {
        padding-top:155px;
    }
    .hero-bottom>p {
        font-size:16px;
    }
}

@media(max-width:1000px) {
    .site-header nav {
        gap:23px;
    }
    .hero {
        min-height:800px;
        min-height:max(760px,100svh);
    }
    .hero-bottom {
        padding-top:55px;
    }
    .statement-layout {
        grid-template-columns:1.2fr 1fr;
        gap:5vw;
    }
    .service-row {
        grid-template-columns:4% 51% 1fr;
        gap:3%;
    }
    .service-name h3 {
        font-size:5.2vw;
    }
    .service-copy {
        padding-left:0;
    }
    .approach-layout {
        gap:7vw;
    }
    .approach-sticky {
        top:40px;
    }
    .approach-type {
        font-size:8.3vw;
    }
    .biz-layout {
        grid-template-columns:1fr 2fr;
        gap:5vw;
    }
    .biz-make {
        grid-template-columns:200px 1fr;
        gap:28px;
    }
    .footer-links {
        gap:17px;
    }
}

@media(max-width:640px) {
    :root {
        --gutter:22px;
        scroll-padding-top:25px;
    }
    .section-pad {
        padding:44px var(--gutter) 65px;
    }
    .section-label {
        font-size:10px;
        gap:10px;
    }
    .site-header {
        height:auto;
        min-height:104px;
        align-items:flex-start;
        flex-direction:column;
        padding-top:23px;
        gap:10px;
    }
    .wordmark {
        font-size:16px;
        gap:5px;
    }
    .wordmark-mark {
        width:27.1px;
        height:24px;
    }
    .site-header nav {
        width:100%;
        justify-content:space-between;
        gap:15px;
        font-size:9px;
    }
    .site-header nav a {
        min-height:34px;
    }
    .site-header nav a::after {
        bottom:1px;
    }
    .hero {
        padding-top:134px;
        min-height:max(710px,100svh);
    }
    .brand-stage {
        margin:39px -2px 25px;
    }
    .brand {
        font-size:14.45vw;
        letter-spacing:-.083em;
        line-height:.94;
    }
    .brand-studio {
        margin-top:2px;
        font-size:24vw;
    }
    .hero-bottom {
        align-items:flex-start;
        gap:12px;
        padding-top:20px;
        padding-bottom:28px;
    }
    .hero-bottom>p {
        font-size:11px;
        line-height:1.85;
    }
    .mobile-break {
        display:block;
    }
    .revision-line {
        top:15%;
        left:10%;
        width:80%;
    }
    .intro-skip {
        top:20px;
        right:12px;
        font-size:10px;
    }
    .statement-layout {
        grid-template-columns:1fr;
        gap:35px;
        margin-top:48px;
    }
    .jp-display {
        font-size:8.4vw;
        line-height:1.6;
        letter-spacing:-.07em;
    }
    .statement-copy {
        padding-top:0;
        padding-left:16%;
    }
    .lead {
        font-size:23px;
    }
    .statement-copy>p+p {
        font-size:12px;
        margin-top:24px;
        line-height:2.1;
    }
    .services {
        padding-top:15px;
    }
    .section-intro {
        font-size:22px;
        margin-top:26px;
    }
    .service-list {
        margin-top:37px;
    }
    .service-row {
        grid-template-columns:24px 1fr;
        gap:18px 10px;
        padding:29px 0 32px;
    }
    .service-number {
        font-size:10px;
        padding-top:2px;
    }
    .service-name h3 {
        font-size:10vw;
        letter-spacing:-.065em;
        line-height:1.02;
    }
    .service-name>.mono {
        margin-top:17px;
        font-size:8px;
    }
    .service-copy {
        grid-column:2;
        padding:0;
        margin-top:4px;
    }
    .service-copy>p:nth-child(2) {
        font-size:12px;
        margin-top:9px;
        line-height:1.95;
    }
    .service-copy .text-link {
        font-size:11px;
        margin-top:15px;
    }
    .approach-layout {
        grid-template-columns:1fr;
        gap:55px;
        margin-top:50px;
    }
    .approach-sticky {
        position:static;
    }
    .approach-type {
        font-size:18vw;
        line-height:.91;
    }
    .approach-jp {
        font-size:30px;
        line-height:1.6;
        margin-top:30px;
    }
    .approach-description {
        font-size:12px;
        line-height:2;
        margin-top:18px;
    }
    .process-list {
        margin-left:16%;
    }
    .process-step {
        padding:24px 0 38px;
    }
    .process-step>.mono {
        font-size:10px;
    }
    .process-step h3 {
        font-size:27px;
        margin-top:17px;
    }
    .process-step p {
        font-size:12px;
        line-height:2;
    }
    .about {
        padding-top:0;
    }
    .about-layout {
        grid-template-columns:1fr;
        gap:35px;
        margin-top:42px;
    }
    .about-layout h2 {
        font-size:14vw;
    }
    .about-copy {
        padding-left:16%;
    }
    .about-copy .lead {
        font-size:22px;
    }
    .about-copy>p+p {
        font-size:12px;
        line-height:2;
        margin-top:20px;
    }
    .about-copy>.text-link {
        font-size:11px;
        margin-top:20px;
    }
    .contact {
        padding-bottom:45px;
    }
    .contact-jp {
        margin-top:48px;
        font-size:19px;
    }
    .contact-title {
        font-size:10.6vw;
        margin-top:19px;
        margin-bottom:33px;
        letter-spacing:-.08em;
    }
    .contact-bottom {
        flex-direction:column;
        gap:28px;
        padding-top:24px;
    }
    .contact-bottom>p,.contact-bottom>.contact-note {
        font-size:12px;
    }
    .contact-link {
        font-size:18px;
        width:100%;
        gap:12px 15px;
    }
    .contact-link small {
        font-size:9px;
    }
    .footer-top {
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        padding-top:29px;
    }
    .footer-brand {
        font-size:17px;
    }
    .footer-links {
        width:100%;
        justify-content:space-between;
        gap:10px;
        font-size:8px;
    }
    .footer-bottom {
        margin-top:28px;
        flex-wrap:wrap;
        font-size:8px;
        gap:15px;
    }
    .footer-bottom>span:nth-child(2) {
        display:none;
    }
    .biz-layout {
        grid-template-columns:1fr;
        gap:32px;
        margin-top:40px;
    }
    .biz-heading {
        position:static;
        font-size:8.4vw;
    }
    .biz-body {
        font-size:13px;
    }
    .biz-body h3 {
        margin-top:48px;
    }
    .biz-plan {
        padding:24px 20px;
    }
    .biz-pair,.biz-make {
        grid-template-columns:1fr;
    }
    .biz-box {
        padding:22px 18px;
    }
    .biz-phone {
        width:220px;
        margin:0 auto;
    }
    .biz-options dt {
        flex-direction:column;
        gap:2px;
    }
    .biz-cannot {
        grid-template-columns:1fr;
    }
    .biz-flow .process-list {
        margin-left:0;
    }
    .brand-intro {padding:18px var(--gutter)}
    .brand-intro-meta,.brand-intro-foot {font-size:7px}
    .intro-word {font-size:24vw}
    .intro-complete {font-size:13.6vw;line-height:.9}
    .intro-complete>span:last-child {font-size:20.5vw}
}

/* Keep the naming sequence, remove displacement, masking and scroll motion. */
@media(prefers-reduced-motion:reduce) {
    :root {
        --intro-time:.9s;
        --msg-time:.9s;
        scroll-behavior:auto;
    }
    .msg-intro .top-message .ch,.msg-intro .top-message .ch-last {
        animation:char-fade .6s linear both;
    }
    .msg-intro .top-hero .hero-support,.msg-intro .site-header {
        animation:content-fade var(--msg-time) linear both;
    }
    @keyframes char-fade {
        0% {opacity:0}
        100% {opacity:1}
    }
    *,*::before,*::after {
        scroll-behavior:auto!important;
        transition:none!important;
    }
    .intro-active .brand-intro {animation:intro-screen-fade var(--intro-time) linear both}
    .intro-active .intro-draft {animation:intro-draft-fade var(--intro-time) linear both}
    .intro-active .intro-debug {animation:intro-debug-fade var(--intro-time) linear both}
    .intro-active .intro-complete {animation:intro-complete-fade var(--intro-time) linear both}
    .intro-active .hero-support,.intro-active .site-header {
        animation:content-fade var(--intro-time) linear both;
    }
    .reveal.is-pending {
        opacity:1;
        transform:none;
        clip-path:none;
    }
    .contact-link:hover>span {
        transform:none;
    }
    .text-link:hover {
        gap:25px;
    }
    @keyframes intro-draft-fade {
        0% {
            opacity:0;
        }
        12%,25% {
            opacity:1;
        }
        34%,100% {
            opacity:0;
        }
    }
    @keyframes intro-debug-fade {
        0%,30% {
            opacity:0;
        }
        39%,52% {
            opacity:1;
        }
        61%,100% {
            opacity:0;
        }
    }
    @keyframes intro-complete-fade {
        0%,59% {
            opacity:0;
        }
        70%,100% {
            opacity:1;
        }
    }
    @keyframes intro-screen-fade {
        0%,85% {opacity:1}
        100% {opacity:0;visibility:hidden}
    }
    @keyframes content-fade {
        0%,75% {
            opacity:0;
            visibility:hidden;
        }
        100% {
            opacity:1;
            visibility:visible;
        }
    }
}

/* Web page (pages.html): a light, approachable skin for business owners.
   Rules marked :is(.web-page,.studio-top) are shared with the top page (studio.html).
   Cream paper, warm ink and one terracotta accent; rounded buttons and boxes; Japanese labels;
   a fixed header; sample sites in the hero. Research: vault/wiki/sources/ホームページ制作者の集客ページ25件とデザインの根拠（2026-09-24）.md */
:root:is(.web-page,.studio-top) {
    --ink:#2b2824;
    --paper:#f8f4ed;
    --muted:#645d53;
    --rule-dark:#ddd3c3;
    --rule-light:#ddd3c3;
    --bg-alt:#f0e9dd;
    --card:#fffdf9;
    --accent:#b4532f;
    /* Small accent text (labels, step numbers, links). --accent is 4.13:1 on --bg-alt and 4.02:1 on --accent-soft;
       this darker shade of the same hue is 5.11:1 and 4.98:1 (5.63:1 on --paper). Buttons, rules and large glyphs keep --accent. */
    --accent-text:#9f4727;
    --accent-soft:#f5e4d8;
    scroll-padding-top:71px;
}

:is(.web-page,.studio-top) body {
    background:var(--paper);
}

:is(.web-page,.studio-top) .dark {
    background:var(--bg-alt);
    color:var(--ink);
}

:is(.web-page,.studio-top) ::selection {
    background:var(--accent-soft);
}

/* Header: stays on screen, light bar, filled button. */
:is(.web-page,.studio-top) .site-header {
    position:fixed;
    height:72px;
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rule-light);
    color:var(--ink);
}

/* /pages: a band saying the page is not in search results (remove it together with noindex).
   The band scrolls away; the header sticks to the top below it and, with the negative margin,
   still overlaps the hero the same way the fixed header did. */
.limited-note {
    margin:0;
    padding:6px var(--gutter);
    background:var(--ink);
    color:var(--paper);
    font-size:12px;
    line-height:1.6;
    text-align:center;
}

/* Break lines between sentences, not inside a word. */
.limited-note span {
    display:inline-block;
}

.web-page .site-header {
    position:sticky;
    margin-bottom:-72px;
}

.msg-intro .limited-note {
    animation:content-reveal var(--msg-time) ease both;
}

@media(prefers-reduced-motion:reduce) {
    .msg-intro .limited-note {
        animation:content-fade var(--msg-time) linear both;
    }
}

:is(.web-page,.studio-top) .site-header nav {
    gap:28px;
    font-size:14px;
}

:is(.web-page,.studio-top) .site-header nav a {
    gap:10px;
}

:is(.web-page,.studio-top) .site-header nav a::after {
    bottom:9px;
}

:is(.web-page,.studio-top) .site-header .nav-contact {
    align-self:center;
    min-height:40px;
    padding:0 18px;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
}

:is(.web-page,.studio-top) .site-header .nav-contact::after {
    display:none;
}

/* Hero: copy and two buttons on the left, sample sites on the right. */
.web-page .top-hero {
    min-height:auto;
    padding-top:110px;
    padding-bottom:72px;
}

.hero-main {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:5vw;
    align-items:center;
    margin-top:32px;
}

.web-page .top-message {
    margin:0;
    padding:0 0 28px;
    font-size:clamp(32px,4.4vw,64px);
    font-weight:700;
    line-height:1.4;
    letter-spacing:.01em;
}

.web-page .top-message .ch-last {
    color:var(--accent);
}

/* A tag above the message that says what the page is. It is not hidden during the message intro. */
.hero-kicker {
    display:inline-block;
    margin:0 0 18px;
    padding:6px 16px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent-text);
    font-size:16px;
    font-weight:700;
    letter-spacing:.06em;
}

.web-page .top-hero .hero-bottom {
    display:block;
    margin:0;
    padding:0;
}

.web-page .hero-bottom>p {
    font-size:clamp(17px,1.35vw,20px);
    font-weight:500;
    line-height:1.9;
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:32px;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:0 28px;
    border-radius:999px;
    font-size:16px;
    font-weight:700;
}

.btn-primary {
    background:var(--accent);
    color:#fff;
}

.btn-ghost {
    border:1.5px solid var(--ink);
}

.hero-visual {
    margin:0;
}

.hero-phones {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    align-items:start;
}

.hero-phones img {
    width:100%;
    height:auto;
    border:5px solid #fff;
    border-radius:18px;
    box-shadow:0 14px 34px rgba(40,30,20,.16);
}

.hero-phones img:nth-child(2) {
    margin-top:36px;
}

.hero-visual figcaption {
    margin-top:18px;
    font-size:13px;
    line-height:1.7;
    color:var(--muted);
}

.hero-visual figcaption a {
    border-bottom:1px solid currentColor;
    color:var(--accent-text);
    font-weight:700;
}

/* Sections: Japanese labels, softer headings, readable body, rounded boxes. */
:is(.web-page,.studio-top) .section-label {
    font-size:13px;
    color:var(--muted);
}

:is(.web-page,.studio-top) .section-label>span:first-child {
    color:var(--accent-text);
    font-weight:700;
}

/* The fixed header is 72px tall; sticky headings must stop below it. */
.web-page .biz-heading {
    top:104px;
    font-size:clamp(28px,3vw,44px);
    font-weight:700;
    letter-spacing:0;
}

.web-page .punctuation,.web-page .biz-plan-ask>span,.web-page .biz-box-soon>span,.web-page .biz-list li::before {
    color:var(--accent);
}

/* The -.15em pull assumes the top page's -.07em tracking; at 0 it overlaps the previous glyph. */
.web-page .punctuation {
    margin-left:0;
}

.web-page .biz-body {
    font-size:16px;
    line-height:1.95;
}

.web-page .biz-body h3 {
    font-weight:700;
    letter-spacing:0;
}

.web-page .biz-inline-link {
    color:var(--accent-text);
    font-weight:700;
}

.web-page .biz-table-wrap {
    padding:4px 18px;
    border:1px solid var(--rule-light);
    border-radius:14px;
    background:var(--card);
}

.web-page .biz-table tr:last-child td {
    border-bottom:0;
}

/* Comparison table (/pages price section): three text columns, the plan's row highlighted */
.web-page .biz-compare tbody th {
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    border-bottom-color:var(--rule-light);
}

.web-page .biz-compare td:last-child,.web-page .biz-compare th:last-child {
    white-space:normal;
    text-align:left;
}

.web-page .biz-compare td:last-child {
    font-weight:400;
}

.web-page .biz-compare tr:last-child th {
    border-bottom:0;
}

.web-page .biz-compare-plan th,.web-page .biz-compare-plan td {
    color:var(--accent-text);
    font-weight:700;
}

.web-page .biz-compare-plan td:last-child {
    font-weight:700;
}

/* The plan's row is framed in the accent color so it stands out from the three market rows (2026-10-01) */
.web-page .biz-compare tr.biz-compare-plan th,.web-page .biz-compare tr.biz-compare-plan td {
    background:var(--accent-soft);
    border-top:2px solid var(--accent);
    border-bottom:2px solid var(--accent);
}

/* separate (not collapse) so the frame can have rounded corners; the frame gets its own inner padding */
.web-page .biz-compare {
    border-collapse:separate;
    border-spacing:0;
}

.web-page .biz-compare-wrap {
    padding-bottom:16px;
}

/* The market's monthly amounts in bold, and the plan's 700 yen larger, so the gap reads at a glance (2026-10-01) */
.web-page .biz-compare .biz-compare-amount {
    font-weight:700;
    color:var(--ink);
}

.web-page .biz-compare .biz-compare-big {
    font-size:1.5em;
    line-height:1.3;
}

.web-page .biz-compare .biz-compare-nowrap {
    white-space:nowrap;
}

/* PC: every row gets the same inner padding as the framed row so the columns line up; the line just above the frame is hidden,
   and the framed row aligns on the first baseline because its 700 yen is larger (2026-10-01) */
@media(min-width:641px) {
    .web-page .biz-compare th:first-child {
        padding-left:14px;
    }
    .web-page .biz-compare td:last-child,.web-page .biz-compare th:last-child {
        padding-right:14px;
    }
    .web-page .biz-compare tr:has(+ .biz-compare-plan) > * {
        border-bottom-color:transparent;
    }
    .web-page .biz-compare tr.biz-compare-plan > * {
        vertical-align:baseline;
    }
    .web-page .biz-compare td:nth-child(2) {
        white-space:nowrap;
    }
}

.web-page .biz-compare tr.biz-compare-plan th {
    padding-left:14px;
    border-left:2px solid var(--accent);
    border-radius:12px 0 0 12px;
}

.web-page .biz-compare tr.biz-compare-plan td:last-child {
    padding-right:14px;
    border-right:2px solid var(--accent);
    border-radius:0 12px 12px 0;
}

@media(max-width:640px) {
    .web-page .biz-compare thead {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
    }
    .web-page .biz-compare tr {
        display:block;
        padding:14px 0;
        border-bottom:1px solid var(--rule-light);
    }
    .web-page .biz-compare tr:last-child {
        border-bottom:0;
    }
    .web-page .biz-compare th,.web-page .biz-compare td {
        display:block;
        padding:0;
        border-bottom:0;
    }
    .web-page .biz-compare td {
        margin-top:8px;
    }
    .web-page .biz-compare tr.biz-compare-plan {
        margin:6px -10px 4px;
        padding:14px 10px;
        border:2px solid var(--accent);
        border-radius:12px;
        background:var(--accent-soft);
    }
    .web-page .biz-compare tr.biz-compare-plan th,.web-page .biz-compare tr.biz-compare-plan td,.web-page .biz-compare tr.biz-compare-plan td:last-child {
        padding:0;
        border:0;
        border-radius:0;
        background:none;
    }
    .web-page .biz-compare td::before {
        content:attr(data-label);
        display:block;
        font-family:"Courier New",monospace;
        font-size:10px;
        font-weight:400;
        color:var(--muted);
    }
}

.web-page .biz-callout {
    padding:18px 22px;
    border-left:4px solid var(--accent);
    border-radius:0 14px 14px 0;
    background:var(--accent-soft);
}

.web-page .biz-plan {
    border:2px solid var(--accent);
    border-radius:18px;
    background:var(--card);
}

.web-page .biz-box {
    border-radius:16px;
    background:var(--card);
}

.web-page .biz-box-strong {
    border:2px solid var(--accent);
}

/* Keep the label inside the highlighted box so it cannot overlap the preceding text. */
.web-page .biz-box-strong {
    position:relative;
}

.web-page .biz-box-badge {
    position:static;
    width:fit-content;
    max-width:100%;
    margin:0;
    padding:2px 12px;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1.7;
}

.web-page .biz-box-badge+.mono {
    margin-top:14px;
}

.web-page .biz-plan-ask,.web-page .biz-box-soon,.web-page .biz-plan-price,.web-page .biz-box-price {
    font-weight:700;
    letter-spacing:-.02em;
}

.web-page .biz-phone {
    border-radius:28px;
    background:var(--card);
}

.web-page .biz-phone>.biz-phone-cta {
    background:var(--accent);
    color:#fff;
}

.web-page .biz-cannot li {
    border:1px solid var(--rule-light);
    border-radius:999px;
    background:var(--card);
    font-weight:600;
}

/* Flow: light panel with accent step labels. */
:is(.web-page,.studio-top) .process-step::before {
    background:var(--accent);
}

:is(.web-page,.studio-top) .process-step>.mono {
    font-size:13px;
    font-weight:700;
    color:var(--accent-text);
}

:is(.web-page,.studio-top) .process-step h3 {
    font-weight:700;
    letter-spacing:0;
}

:is(.web-page,.studio-top) .process-step p {
    font-size:16px;
}

/* Contact: soft panel with a real button. */
:is(.web-page,.studio-top) .contact {
    background:var(--accent-soft);
}

/* Between the section headings (max 44px) and the hero message (max 64px), so the last section invites rather than shouts. */
.web-page .contact-jp {
    margin-top:48px;
    font-size:clamp(17px,1.6vw,22px);
    letter-spacing:0;
}

.web-page .contact-title {
    margin:10px 0 36px;
    font-size:clamp(30px,3.6vw,52px);
    font-weight:700;
    letter-spacing:0;
}

/* Japanese headings: proportional punctuation so 「、」「。」 do not leave wide gaps. Tighten the monospace spaces in labels like "01 / 聞く". */
.web-page :is(h1,h2,h3) {
    font-feature-settings:"palt";
    letter-spacing:.02em;
}

.web-page .mono {
    word-spacing:-.35em;
}

:is(.web-page,.studio-top) .contact-title>span:first-child {
    color:var(--accent);
}

:is(.web-page,.studio-top) .contact-bottom {
    border-top-color:rgba(43,40,36,.18);
}

:is(.web-page,.studio-top) .contact-bottom>p,:is(.web-page,.studio-top) .contact-bottom>.contact-note {
    font-size:15px;
    line-height:1.9;
}

:is(.web-page,.studio-top) .contact-link {
    padding:22px 28px;
    border:0;
    border-radius:20px;
    background:var(--accent);
    color:#fff;
}

:is(.web-page,.studio-top) .contact-link small {
    color:#fff;
}

/* White-text filled buttons: the default ring (currentColor) was white on the light page, so draw it in ink. */
:is(.web-page,.studio-top) .site-header .nav-contact:focus-visible,:is(.web-page,.studio-top) .contact-link:focus-visible,.btn-primary:focus-visible {
    outline-color:var(--ink);
}

.web-page .footer-links {
    font-size:13px;
}

.web-page .footer-bottom {
    font-size:12px;
}

/* Samples (section 03): fictional shops. Six picks with the industry name, then every industry as a link. */
.web-page .biz-samples {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px 14px;
    max-width:560px;
    margin:0;
    padding:0;
    list-style:none;
}

.web-page .biz-samples a {
    display:block;
    font-size:14px;
    font-weight:700;
    line-height:1.5;
}

.web-page .biz-samples img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:9/14;
    object-fit:cover;
    object-position:top;
    margin-bottom:8px;
    border:4px solid #fff;
    border-radius:14px;
    box-shadow:0 10px 24px rgba(40,30,20,.14);
}

.web-page .biz-samples a:hover span {
    color:var(--accent-text);
}

.web-page .biz-samples-label {
    font-size:14px;
    font-weight:700;
    color:var(--muted);
}

.web-page .biz-body>.biz-samples-label+.biz-industries {
    margin-top:10px;
}

.web-page .biz-industries {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}

.web-page .biz-industries a {
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 14px;
    border:1px solid var(--rule-light);
    border-radius:999px;
    background:var(--card);
    font-size:14px;
    font-weight:600;
    line-height:1.4;
}

.web-page .biz-industries a:hover {
    border-color:var(--accent);
    color:var(--accent-text);
}

/* Contact: who answers. The same facts as "担当する人" on design.html. */
.web-page .contact-person {
    display:flex;
    align-items:center;
    gap:16px;
    width:fit-content;
    max-width:100%;
    margin:0 0 36px;
    padding:14px 24px 14px 14px;
    border-radius:18px;
    background:var(--card);
}

.web-page .contact-person img {
    flex:none;
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
}

.web-page .contact-person p {
    margin:0;
    line-height:1.6;
}

.web-page .contact-person-role {
    font-size:12px;
    font-weight:700;
    color:var(--accent-text);
}

.web-page .contact-person-name {
    font-size:18px;
    font-weight:700;
}

.web-page .contact-person-meta {
    font-size:13px;
    color:var(--muted);
}

.web-page .contact-person-meta span {
    display:inline-block;
}

.web-page .contact-person .biz-inline-link {
    font-size:14px;
}

@media(max-width:1000px) {
    :is(.web-page,.studio-top) .site-header nav {
        gap:18px;
        font-size:13px;
    }
}

@media(max-width:900px) {
    .hero-main {
        grid-template-columns:1fr;
        gap:36px;
    }
    .hero-phones {
        max-width:460px;
    }
}

@media(max-width:640px) {
    :root:is(.web-page,.studio-top) {
        scroll-padding-top:88px;
    }
    :is(.web-page,.studio-top) .site-header {
        height:auto;
        min-height:0;
        padding-top:12px;
        padding-bottom:4px;
        gap:2px;
    }
    :is(.web-page,.studio-top) .site-header nav {
        gap:8px;
        font-size:12px;
    }
    :is(.web-page,.studio-top) .site-header nav a {
        gap:4px;
        min-height:38px;
    }
    :is(.web-page,.studio-top) .site-header .nav-contact {
        min-height:32px;
        padding:0 10px;
    }
    /* The header is 90px tall here (measured at 320-640px wide). */
    .web-page .site-header {
        margin-bottom:-90px;
    }
    .web-page .top-hero {
        padding-top:100px;
        padding-bottom:52px;
    }
    .hero-main {
        margin-top:18px;
    }
    .hero-kicker {
        margin-bottom:14px;
        padding:5px 14px;
        font-size:14px;
    }
    .web-page .top-message {
        font-size:clamp(28px,8.2vw,34px);
        padding-bottom:20px;
    }
    .web-page .hero-bottom>p {
        font-size:clamp(15px,4.3vw,17px);
        line-height:1.75;
    }
    .hero-actions {
        margin-top:24px;
    }
    .btn {
        flex:1 1 100%;
    }
    .hero-phones {
        gap:10px;
    }
    .hero-phones img {
        border-width:3px;
        border-radius:12px;
    }
    .hero-phones img:nth-child(2) {
        margin-top:20px;
    }
    :is(.web-page,.studio-top) .section-label {
        font-size:12px;
    }
    .web-page .footer-links {
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:0 20px;
        font-size:12px;
    }
    .web-page .footer-bottom {
        font-size:11px;
    }
    .web-page .biz-samples {
        gap:16px 10px;
    }
    .web-page .biz-samples a {
        font-size:13px;
    }
    .web-page .biz-samples img {
        border-width:3px;
        border-radius:12px;
    }
    .web-page .biz-industries a {
        font-size:13px;
        padding:0 12px;
    }
    .web-page .contact-person {
        align-items:flex-start;
        gap:14px;
        padding:14px 16px 14px 14px;
    }
    .web-page .contact-person img {
        width:56px;
        height:56px;
    }
}

/* Top page (studio.html): labels are in Japanese, so the 9-11px English sizes are raised to stay readable. */
.studio-top .site-header nav {
    font-size:13px;
}

.studio-top .footer-bottom {
    font-size:12px;
}

.studio-top .section-label {
    font-size:13px;
}

.studio-top .process-step>.mono {
    font-size:13px;
}

.studio-top .footer-links {
    font-size:13px;
}

.studio-top .service-name h3,.studio-top .about-layout h2 {
    letter-spacing:0;
    line-height:1.2;
}

.studio-top .contact-title {
    font-size:9vw;
    letter-spacing:0;
}

@media(max-width:1000px) {
    .studio-top .site-header nav {
        font-size:12px;
    }
    .studio-top .section-label {
        font-size:12px;
    }
    .studio-top .footer-bottom {
        font-size:11px;
    }
    .studio-top .footer-links {
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:0 20px;
        font-size:12px;
    }
}

/* Top page (studio.html): the same light skin as pages.html (shared rules above), plus its own parts. */
.studio-top .brand-intro,.studio-top .hero {
    background:var(--paper);
    color:var(--ink);
}

.studio-top .revision-line {
    background:var(--accent);
}

.studio-top .brand-period,.studio-top .punctuation,.studio-top .service-dot,.studio-top .about-layout h2>span {
    color:var(--accent);
}

.studio-top .repeat-word path {
    stroke:var(--accent);
}

.studio-top .text-link {
    color:var(--accent-text);
    font-weight:700;
}

.studio-top .hero-bottom>p {
    font-size:clamp(16px,1.3vw,19px);
    font-weight:500;
    line-height:1.9;
}

@media(max-width:640px) {
    .studio-top .hero-bottom {
        flex-direction:column;
        align-items:stretch;
    }
    .studio-top .hero-bottom>p {
        font-size:15px;
        line-height:1.8;
    }
    /* The small Japanese note sat on top of the last line; put it under the sentence instead. */
}

/* /pages: size the heading column to its longest line (7 chars + 。) so no dead band sits between heading and body. */
.web-page .biz-heading {
    font-size:var(--biz-heading-size);
}

.web-page .biz-layout {
    --biz-heading-size:clamp(28px,3vw,44px);
    grid-template-columns:calc(var(--biz-heading-size) * 8) minmax(0,1fr);
    gap:clamp(40px,5vw,88px);
}

.web-page .biz-body {
    max-width:40em;
    font-size:clamp(17px,calc(13px + .3vw),19px);
}

/* Readable floor for notes, tables and labels (was 10-13px). The phone mockups stay small on purpose. */
.web-page .biz-note,.web-page .biz-box-sub,.web-page .limited-note,.web-page .hero-visual figcaption,.web-page .contact-person-meta,.web-page .biz-samples a,.web-page .biz-industries a {
    font-size:14px;
}

.web-page .biz-table,.web-page .biz-compare tbody th {
    font-size:15px;
}

.web-page .biz-table th,.web-page .biz-compare td::before,.web-page .biz-box>.mono,.web-page .contact-link small {
    font-size:12px;
}

.web-page article>p.mono,.web-page .contact-person-role,.web-page .footer-bottom {
    font-size:13px;
}

.web-page .section-label,.web-page .process-step>.mono,.web-page .footer-links {
    font-size:14px;
}

.web-page .contact-bottom>p,.web-page .contact-bottom>.contact-note {
    font-size:16px;
}

@media(max-width:640px) {
    .web-page .biz-layout {
        grid-template-columns:1fr;
        gap:32px;
    }
    .web-page .biz-body {
        max-width:none;
        font-size:16px;
    }
}

/* /studio top: readable floor for text people actually read (was 10-13px).
   The intro's English meta lines and the 01/02/03 service numbers stay small as decoration. */
.studio-top .service-copy p,.studio-top .approach-description {
    font-size:15px;
}

/* 2026-10-08: the 01 and 04 body copy was 12px on phones and 14px on desktop. Raise it to 16px
   and drop the 16% left indent on phones so the lines are not squeezed. */
.studio-top .statement-copy>p,.studio-top .about-copy>p+p {
    font-size:16px;
    line-height:1.95;
}

.studio-top .service-copy>p {
    max-width:24em;
    line-height:1.95;
}

/* 02 illustrations (ChatGPT, same flat style as /pages). Above the sentence in the copy column. */
.studio-top .service-img {
    display:block;
    width:100%;
    max-width:360px;
    margin-bottom:20px;
}

.studio-top .service-img img {
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
}

/* 2026-10-08 spacing: the page felt sparse. The hero filled the whole screen with a ~240px blank
   between the tagline and the description, sections opened with 80-135px before the heading,
   and 01 and 02 (same paper background) stacked 110px + 36px of padding with no visible edge.
   Tighten the vertical rhythm and give the 02 illustration column more width. */
.studio-top .hero {
    min-height:0;
    padding-bottom:0;
}

.studio-top .hero-bottom {
    margin-top:0;
    padding-bottom:56px;
}

.studio-top .section-pad,.studio-top .about {
    padding-top:64px;
    padding-bottom:72px;
}

.studio-top .services {
    padding-top:0;
}

.studio-top .statement-layout,.studio-top .approach-layout,.studio-top .about-layout {
    margin-top:40px;
}

.studio-top .section-intro {
    margin-top:24px;
}

.studio-top .service-list {
    margin-top:32px;
}

.studio-top .service-row {
    grid-template-columns:5% 38% 1fr;
    padding:32px 0;
}

.studio-top .service-img {
    max-width:440px;
}

.studio-top .service-copy>p {
    max-width:440px;
}

@media(max-width:640px) {
    .studio-top .statement-copy,.studio-top .about-copy {
        padding-left:0;
    }
    .studio-top .hero-bottom {
        padding-bottom:40px;
    }
    .studio-top .section-pad,.studio-top .about {
        padding-top:40px;
        padding-bottom:48px;
    }
    .studio-top .services {
        padding-top:0;
    }
    .studio-top .statement-layout,.studio-top .approach-layout,.studio-top .about-layout {
        margin-top:28px;
    }
    .studio-top .service-list {
        margin-top:20px;
    }
    .studio-top .service-row {
        grid-template-columns:24px 1fr;
        padding:24px 0 28px;
    }
}

/* 2026-10-08: on wider screens the 02 rows left the area under each big heading empty.
   Stack each item (number, heading, illustration, sentence) and put the three items side by side. */
@media(min-width:641px) {
    .studio-top .service-row {
        display:flex;
        flex-direction:column;
        gap:0;
        padding:24px 0 0;
    }
    .studio-top .service-row:last-child {
        border-bottom:0;
    }
    .studio-top .service-number {
        padding-top:0;
        margin-bottom:10px;
    }
    .studio-top .service-name h3 {
        font-size:clamp(30px,2.8vw,42px);
        line-height:1.2;
        letter-spacing:-.04em;
    }
    .studio-top .service-copy {
        padding:0;
        margin-top:20px;
    }
    .studio-top .service-img,.studio-top .service-copy>p {
        max-width:none;
    }
}

@media(min-width:641px) {
    .studio-top .service-list {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:24px;
    }
}

@media(min-width:901px) {
    .studio-top .service-list {
        gap:40px;
    }
}

/* 2026-10-08: 03 was a tall two-column block (sticky title on the left, four steps with 65px gaps
   on the right). Put the title and its lines side by side on top, and the four steps in a row below
   (2 x 2 on tablets). On phones, drop the 16% indent and the large gaps between steps. */
@media(min-width:641px) {
    .studio-top .approach-layout {
        grid-template-columns:1fr;
        gap:40px;
    }
    .studio-top .approach-sticky {
        position:static;
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        column-gap:6vw;
        align-items:end;
    }
    .studio-top .approach-type {
        grid-row:span 2;
        font-size:clamp(56px,6.5vw,104px);
    }
    .studio-top .approach-jp {
        margin-top:0;
        font-size:clamp(24px,2.4vw,36px);
    }
    .studio-top .approach-description {
        margin-top:12px;
    }
    .studio-top .process-list {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0 24px;
    }
    .studio-top .process-step {
        padding:20px 0 28px;
    }
    .studio-top .process-step h3 {
        font-size:clamp(22px,2vw,28px);
        margin:12px 0 8px;
    }
    .studio-top .process-step p {
        max-width:none;
    }
}

@media(min-width:901px) {
    .studio-top .process-list {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:0 32px;
    }
    .studio-top .process-step {
        padding-bottom:0;
    }
}

@media(max-width:640px) {
    .studio-top .approach-layout {
        gap:28px;
    }
    .studio-top .approach-jp {
        font-size:24px;
        margin-top:20px;
    }
    .studio-top .process-list {
        margin-left:0;
    }
    .studio-top .process-step {
        padding:18px 0 22px;
    }
    .studio-top .process-step h3 {
        margin:10px 0 6px;
    }
}

/* 2026-10-08: 04 had an 85px name heading in a wide left column and a narrow text column.
   Make the heading smaller, give the text more width, and tighten the gaps between paragraphs. */
.studio-top .about-layout h2 {
    font-size:clamp(32px,3.6vw,52px);
}

.studio-top .about-copy .lead {
    font-size:clamp(20px,1.8vw,26px);
}

.studio-top .about-copy>p+p {
    margin-top:16px;
}

@media(min-width:641px) {
    .studio-top .about-layout {
        grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
        gap:6vw;
        align-items:start;
    }
}

@media(max-width:640px) {
    .studio-top .about-layout {
        gap:20px;
    }
    .studio-top .about-layout h2 {
        font-size:9vw;
    }
    .studio-top .about-copy .lead {
        font-size:20px;
    }
    .studio-top .about-copy>p+p {
        margin-top:14px;
    }
}

/* 2026-10-08: the 05 heading was 9vw (about 115px at 1280px) with a 75px gap above it.
   Bring it to the size of the other section headings, like /pages. */
.studio-top .contact-jp {
    margin-top:32px;
}

.studio-top .contact-title {
    font-size:clamp(32px,4.2vw,56px);
    margin:8px 0 28px;
}

@media(max-width:640px) {
    .studio-top .contact-jp {
        margin-top:24px;
    }
}

/* 2026-10-08: 01's heading was up to 76px with 1.55 line height, next to a short paragraph.
   Match the other section headings (max 52px) and tighten the line height and gaps. */
.studio-top .jp-display {
    font-size:clamp(30px,3.6vw,52px);
    line-height:1.45;
}

@media(min-width:641px) {
    .studio-top .statement-layout {
        grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
        gap:6vw;
        align-items:start;
    }
    .studio-top .statement-copy {
        padding-top:.4em;
    }
}

@media(max-width:640px) {
    .studio-top .statement-layout {
        gap:20px;
    }
    .studio-top .jp-display {
        font-size:8.4vw;
        line-height:1.5;
    }
}

.studio-top .site-header nav,.studio-top .section-label,.studio-top .process-step>.mono,.studio-top .footer-links,.studio-top .text-link {
    font-size:14px;
}

.studio-top .footer-bottom,.studio-top .intro-skip {
    font-size:13px;
}

.studio-top .contact-link small {
    font-size:12px;
}

/* /pages: cap the content at 1120px and center it; the side padding grows on wide screens.
   The % resolves per use site, and every --gutter use is horizontal padding of a full-width block. */
.web-page {
    --gutter:max(clamp(22px,4vw,72px),calc((100% - 1120px) / 2));
}

@media(max-width:640px) {
    .web-page {
        --gutter:22px;
    }
}

/* With the 1120px cap the hero copy column stops at ~590px, so the vw-based sizes must stop too:
   52px keeps 「そう思って止まっている」 on one line and 18px keeps the lead lines from leaving one or two characters. */
.web-page .top-message {
    font-size:clamp(32px,4.4vw,52px);
}

.web-page .hero-bottom>p {
    font-size:clamp(17px,1.35vw,18px);
}

/* The step titles in 進め方 sit in the narrower body column now; 34px keeps the longest (17 chars) on one line. */
.web-page .process-step h3 {
    font-size:clamp(26px,2.8vw,34px);
}

/* /pages: one centered column, as wide as the hero (1120px). The two-column layout left the heading column
   empty for most of each long section, so the body looked pushed to the right. */
.web-page .section-pad>.section-label,.web-page .biz-layout,.web-page .contact-person,.web-page .contact-bottom,.web-page .contact-jp,.web-page .contact-title {
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
}

.web-page .biz-layout {
    grid-template-columns:minmax(0,1fr);
    gap:36px;
}

.web-page .biz-heading {
    position:static;
}

.web-page .biz-body {
    max-width:none;
}

.web-page .biz-flow .process-list,.web-page .contact-bottom>p,.web-page .contact-bottom>.contact-note {
    max-width:none;
}

/* The card is fit-content, so auto margins would float it to the middle; keep it on the column's left edge. */
.web-page .contact-person {
    margin-left:max(0px,calc((100% - 1120px) / 2));
    margin-right:0;
}

.web-page .contact-bottom>p,.web-page .contact-bottom>.contact-note {
    flex:1 1 0;
}

/* /pages: each section gets its own tint so the reader can tell where one topic ends,
   and its label (01 / 料金 …) sticks under the header while that section is on screen. */
.web-page #price,.web-page #cannot {
    --sec-bg:var(--paper);
}

.web-page #change {
    --sec-bg:#e5ebdc;
}

.web-page #make {
    --sec-bg:#e1e9ee;
}

.web-page #flow {
    --sec-bg:var(--bg-alt);
}

.web-page #contact {
    --sec-bg:var(--accent-soft);
}

/* Pages without per-section tints (profile) fall back to paper, so the stuck label is not see-through. */
.web-page main>.section-pad {
    --sec-bg:var(--paper);
    background:var(--sec-bg);
}

.web-page .biz-follow {
    padding-top:80px;
}

.web-page .biz-follow>.section-label {
    border-top:0;
}

/* The shadows paint the label's background edge to edge (clipped to its own height plus a 1px rule).
   The clip also reaches 40px up: on phones the label sticks at 90px under an 85px header, and text scrolling
   through that 5px gap showed as a sliced line (2026-10-15). The header (z-index 10) covers the rest of the reach,
   and every section has at least 44px of its own padding above the label. */
.web-page .section-pad>.section-label {
    position:sticky;
    z-index:5;
    top:72px;
    padding:14px 0;
    background:var(--sec-bg);
    box-shadow:0 0 0 100vmax var(--sec-bg),0 1px 0 100vmax var(--rule-light);
    clip-path:inset(-40px -100vmax -1px);
}

@media(max-width:640px) {
    .web-page .biz-follow {
        padding-top:44px;
    }
    .web-page .section-pad>.section-label {
        top:90px;
        padding:8px 0;
    }
}

/* /pages: a one-line description under each option name, and folded supplements (「くわしく」). */
.web-page .biz-table-desc {
    display:block;
    margin-top:4px;
    font-size:14px;
    font-weight:400;
    color:var(--muted);
}

.web-page .biz-more {
    margin:24px 0;
    border:1px solid var(--rule-light);
    border-radius:14px;
    background:var(--card);
}

.web-page .biz-more>summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:48px;
    padding:12px 20px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    list-style:none;
}

.web-page .biz-more>summary::-webkit-details-marker {
    display:none;
}

.web-page .biz-more>summary::after {
    content:"＋";
    flex:none;
    color:var(--accent);
    font-weight:700;
}

.web-page .biz-more[open]>summary::after {
    content:"－";
}

.web-page .biz-more>:not(summary) {
    margin-left:20px;
    margin-right:20px;
}

.web-page .biz-more>:last-child {
    margin-bottom:20px;
}

/* The column is 1120px now; lay the six sample thumbnails in one row (three on tablets, as before on phones). */
.web-page .biz-samples {
    grid-template-columns:repeat(6,1fr);
    max-width:none;
}

@media(max-width:900px) {
    .web-page .biz-samples {
        grid-template-columns:repeat(3,1fr);
        max-width:560px;
    }
}

/* /pages: the estimate under the real works, kept to the same width as the thumbnails. */
.web-page .biz-works-estimate {
    max-width:560px;
    margin-top:20px;
}

.web-page .biz-more>.biz-samples-label {
    margin-top:24px;
}

/* /pages: three worked examples that add up the first year's total. */
.web-page .biz-examples {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:24px;
}

.web-page .biz-example {
    display:flex;
    flex-direction:column;
}

.web-page .biz-example-items {
    margin:14px 0 0;
    padding:0;
    list-style:none;
    font-size:15px;
}

.web-page .biz-example-items li {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid var(--rule-light);
}

.web-page .biz-example-items li>span:last-child {
    flex:none;
    font-weight:700;
}

.web-page .biz-example-total {
    margin:auto 0 0;
    padding-top:18px;
}

.web-page .biz-example-total>div+div {
    margin-top:12px;
}

.web-page .biz-example-total dt {
    font-size:13px;
    color:var(--muted);
}

.web-page .biz-example-total dd {
    margin:2px 0 0;
    font-size:15px;
}

.web-page .biz-example-total dd>strong {
    font-size:28px;
    color:var(--ink);
}

.web-page .biz-example-total dd>span {
    display:block;
    font-size:13px;
    color:var(--muted);
}

@media(max-width:900px) {
    .web-page .biz-examples {
        grid-template-columns:1fr;
    }
}

/* Keep each amount whole when the breakdown wraps. */
.web-page .biz-example-total dd>span>span {
    display:inline-block;
}

/* Right under the base price: what the price does not include, so the domain never reads as included. */
.web-page .biz-plan-extra {
    margin-top:6px;
    font-size:15px;
    font-weight:700;
    color:var(--accent-text);
}

/* Two plans side by side: a smaller price so 30,000円 fits a half column, and the shared note sits under both. */
.web-page .biz-plans .biz-plan-price {
    font-size:clamp(40px,4.2vw,56px);
}

.web-page .biz-plans .biz-plan>p+p {
    margin-top:10px;
}

.web-page .biz-plans+.biz-plan-extra {
    margin-top:12px;
}


/* /pages の02以降の動き（2026-10-02、Shohei Hemmiの依頼）。見えてきたときに1度だけ動く。
   隠すのは studio.js が .reveal に is-pending を付けたときだけ（JSが動かない・動きを減らす設定なら最初から見える） */
.biz-scenes>article.reveal.is-pending,
.reveal-seq.is-pending {
    opacity:1;
    transform:none;
}

/* 02：絵が少し傾いて入り、文が追いかける */
.biz-scenes>article.reveal .biz-scene-head,
.biz-scenes>article.reveal .biz-scene-img,
.biz-scenes>article.reveal .biz-scene-text {
    transition:opacity .7s,transform .8s cubic-bezier(.2,.65,.2,1);
}

.biz-scenes>article.reveal .biz-scene-head,
.biz-scenes>article.reveal .biz-scene-text {
    transition-delay:.15s;
}

.biz-scenes>article.reveal.is-pending .biz-scene-img {
    opacity:0;
    transform:translateX(-24px) rotate(-2deg);
}

.biz-scenes>article.reveal.is-pending .biz-scene-head,
.biz-scenes>article.reveal.is-pending .biz-scene-text {
    opacity:0;
    transform:translateY(14px);
}

/* 03の図・見本、05の一覧：中身を上から順に出す（図は「上から順に読む」を見せる） */
.reveal-seq>* {
    transition:opacity .5s,transform .6s cubic-bezier(.2,.65,.2,1);
    transition-delay:calc(var(--seq,0) * 90ms);
}

.reveal-seq.is-pending>* {
    opacity:0;
    transform:translateY(14px);
}

.reveal-seq>:nth-child(2) {--seq:1}
.reveal-seq>:nth-child(3) {--seq:2}
.reveal-seq>:nth-child(4) {--seq:3}
.reveal-seq>:nth-child(5) {--seq:4}
.reveal-seq>:nth-child(6) {--seq:5}
.reveal-seq>:nth-child(7) {--seq:6}
.reveal-seq>:nth-child(8) {--seq:7}
.reveal-seq>:nth-child(9) {--seq:8}

/* 03の図：積み上がったあと、問い合わせボタンを1度だけ軽く弾ませる */
.web-page .biz-phone.reveal:not(.is-pending)>.biz-phone-cta {
    animation:cta-nudge .9s 1.1s ease-out 1;
}

@keyframes cta-nudge {
    0%,100% {transform:none;box-shadow:0 0 0 0 rgba(180,83,47,0)}
    35% {transform:scale(1.04);box-shadow:0 0 0 6px rgba(180,83,47,.18)}
}

/* 03の見本：指を置いた見本が少し浮く */
.web-page .biz-samples img {
    transition:transform .3s cubic-bezier(.2,.65,.2,1),box-shadow .3s;
}

.web-page .biz-samples a:hover img,
.web-page .biz-samples a:focus-visible img {
    transform:translateY(-6px);
    box-shadow:0 16px 30px rgba(40,30,20,.18);
}

@media(prefers-reduced-motion:reduce) {
    .web-page .biz-phone.reveal>.biz-phone-cta {
        animation:none;
    }
    .web-page .biz-samples a:hover img,
    .web-page .biz-samples a:focus-visible img {
        transform:none;
    }
}

/* /pages 04：手順ごとのイラスト。スマホでは番号の下、640px以上では右に置く。
   黒い節なので、絵は角を丸めたカードにして、手順が現れたあと少し遅れて入れる */
.process-img img {
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
}

.biz-flow .process-step>.process-img {
    display:block;
    margin-top:18px;
    max-width:320px;
}

.biz-flow .process-step.reveal>.process-img {
    transition:opacity .7s .2s,transform .8s .2s cubic-bezier(.2,.65,.2,1);
}

.biz-flow .process-step.reveal.is-pending>.process-img {
    opacity:0;
    transform:translateY(16px) rotate(1.5deg);
}

@media (min-width:640px) {
    .biz-flow .process-step {
        display:grid;
        grid-template-columns:minmax(0,1fr) 220px;
        column-gap:32px;
        align-content:start;
    }
    .biz-flow .process-step>* {
        grid-column:1;
    }
    .biz-flow .process-step>.process-img {
        grid-column:2;
        grid-row:1 / span 3;
        margin-top:4px;
        max-width:none;
    }
}

/* 2026-10-11: 01's "。" overlapped "い". The -.15em pull plus the -.07em tracking was too much;
   drop the pull as /pages does. */
.studio-top .punctuation {
    margin-left:0;
}

/* 2026-10-11: on wide screens 01's paragraph sat at 60% of the width, far from its short heading.
   Use 04's columns (1fr / 1.4fr) so both paragraphs start at the same x; the first column never
   gets narrower than the heading. Keep the line to 30 characters. */
@media(min-width:641px) {
    .studio-top .statement-layout {
        grid-template-columns:minmax(max-content,1fr) minmax(0,1.4fr);
    }
    .studio-top .statement-copy>p {
        max-width:30em;
    }
}

/* 2026-10-11: 02's heading was 400 right after 01's 600 and looked weak. Match 04 and 05 (500). */
.studio-top .section-intro {
    font-weight:500;
}