/* =========================================================
   index.css — 株式会社ミドリノート トップページ
   Home composition atop tokens.css. Signature: ひとふでがき.
   ========================================================= */

.main{position:relative;z-index:1}
.title-lg{font-size:var(--step-3);line-height:1.04}
.band{position:relative;padding-block:var(--space-7)}
.band--hemp{background:var(--color-surface)}
.sec-head>.label,.concept__head>.label,.news-head>.label{display:block;margin-bottom:var(--space-2)}
.arrow{display:inline-block;margin-left:0.2em;transition:transform var(--dur-1) var(--ease-out-quart)}
.btn:hover .arrow{transform:translateX(0.25em)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--space-8) + var(--space-1)) var(--space-6);overflow:clip}
.hero__ghost{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;pointer-events:none;user-select:none}
.hero__ghost .ghost-word{display:block;font-size:clamp(3.4rem,15vw,15rem);line-height:0.9;white-space:nowrap;padding-left:var(--page-inline)}
.hero__inner{position:relative;z-index:2}
.hero__eyebrow{grid-column:1 / -1;display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.hero__eyebrow .est{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.1em;color:var(--color-muted)}
.hero__head{grid-column:1 / 12;position:relative}
.hero__title{position:relative;display:inline-block;font-family:var(--font-display);font-weight:900;font-size:clamp(2.7rem,9.4vw,8.6rem);line-height:1.0;letter-spacing:0.012em;font-feature-settings:'palt' 1}
.hero__title .line{display:block}
.hero__title .accent{color:var(--color-accent)}
.hero__underline{position:absolute;left:-0.01em;bottom:-0.14em;width:min(66%,620px);height:auto;z-index:1}
.hero__sprout{position:absolute;right:-0.2em;top:-0.72em;width:clamp(44px,7vw,90px);height:auto}
.hero__body{grid-column:7 / 13;margin-top:var(--space-5);font-size:var(--step-1);line-height:1.9;color:var(--color-fg)}
.hero__aside{position:absolute;right:0;top:30%;padding-right:calc(var(--page-inline) - 0.4rem);z-index:3}
.hero__scroll{grid-column:1 / -1;margin-top:var(--space-5);display:flex;align-items:center;gap:var(--space-2)}
.hero__scroll .rule{display:block;width:clamp(40px,6vw,90px);height:1px;background:var(--hairline-strong)}
@media (max-width:720px){
  .hero__head,.hero__body{grid-column:1 / -1}
  .hero__body{margin-top:var(--space-4)}
  .hero__aside{position:static;grid-column:1 / -1;margin-top:var(--space-3);padding:0}
  .hero__underline{width:82%}
}

/* ---------- CONCEPT ---------- */
.concept__inner{position:relative}
.concept__label{position:absolute;left:0;top:0}
.concept__head{grid-column:2 / 9}
.concept__body{grid-column:8 / 13;align-self:end}
.concept__body p{font-size:var(--step-1);line-height:1.95;max-width:40ch}
@media (max-width:720px){
  .concept__head,.concept__body{grid-column:1 / -1}
  .concept__label{position:static;display:block;margin-bottom:var(--space-2)}
}

/* ---------- SERVICES ---------- */
.svc{grid-column:1 / -1;margin-top:var(--space-5);border-top:1px solid var(--hairline)}
.svc__row{position:relative;display:grid;grid-template-columns:clamp(90px,13vw,160px) 1fr;gap:var(--gutter);align-items:center;padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--hairline);transition:background var(--dur-2) var(--ease-out-quart),padding-left var(--dur-2) var(--ease-out-quart)}
.svc__row:hover{background:var(--color-surface)}
@media (hover:hover){.svc__row:hover{padding-left:calc(var(--space-3) + 0.6rem)}}
.svc__numwrap{position:relative;width:clamp(66px,9vw,110px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.svc__num{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.6rem);color:var(--color-fg)}
.svc__ring{position:absolute;inset:-12%;width:124%;height:124%}
.svc__text h3{font-size:var(--step-1);margin-bottom:0.3em;transition:color var(--dur-1) var(--ease-out-quart)}
.svc__text p{color:var(--color-fg);max-width:58ch;line-height:1.85}
.svc__row:hover .svc__text h3{color:var(--color-accent)}
@media (max-width:720px){.svc__row{grid-template-columns:1fr;gap:var(--space-2);padding-inline:0}}

/* ---------- PRODUCTS PREVIEW ---------- */
.prod-grid{grid-column:1 / -1;margin-top:var(--space-5);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.product{position:relative}
.product__media{background:var(--color-surface);border-radius:var(--radius);aspect-ratio:4 / 5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product__media .prod-art{width:64%;height:auto}
.product__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--hairline)}
.product__meta h3{font-size:var(--step-1)}
.product__idx{display:block;font-family:var(--font-mono);font-size:var(--step--1);color:var(--color-muted);margin-bottom:0.4em}
.product__price{font-family:var(--font-mono);font-weight:700;font-size:var(--step-0);color:var(--color-accent);white-space:nowrap}
.prod-more{grid-column:1 / -1;margin-top:var(--space-4)}
@media (max-width:860px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.prod-grid{grid-template-columns:1fr}}

/* ---------- REASONS ---------- */
.reasons{grid-column:1 / -1;margin-top:var(--space-5);display:grid;gap:var(--space-6)}
.reason{display:grid;grid-template-columns:clamp(96px,15vw,190px) 1fr;gap:var(--gutter);align-items:start;position:relative}
.reason:nth-child(even){grid-template-columns:1fr clamp(96px,15vw,190px)}
.reason:nth-child(even) .reason__badge{order:2;align-items:flex-end;text-align:right}
.reason:nth-child(even) .reason__text{order:1}
.reason__badge{position:relative;display:flex;flex-direction:column;gap:var(--space-2)}
.reason__badge .index-num{line-height:0.8}
.reason__sprout{width:clamp(46px,6vw,78px);height:auto}
.reason__text h3{font-size:var(--step-2);margin-bottom:0.4em}
.reason__text p{max-width:52ch;line-height:1.9}
@media (max-width:720px){
  .reason,.reason:nth-child(even){grid-template-columns:1fr}
  .reason:nth-child(even) .reason__badge{order:0;align-items:flex-start;text-align:left}
  .reason:nth-child(even) .reason__text{order:1}
}

/* ---------- NEWS ---------- */
.news{grid-column:1 / -1;margin-top:var(--space-4);border-top:1px solid var(--hairline)}
.news__row{display:grid;grid-template-columns:clamp(120px,16vw,200px) 1fr;gap:var(--gutter);align-items:baseline;padding:var(--space-3) 0;border-bottom:1px solid var(--hairline);transition:color var(--dur-1) var(--ease-out-quart)}
.news__row time{font-family:var(--font-mono);color:var(--color-muted);font-size:var(--step-0);letter-spacing:0.02em}
.news__row p{max-width:none}
.news__row:hover p{color:var(--color-accent)}
.news-head{grid-column:1 / 6}
@media (max-width:540px){.news__row{grid-template-columns:1fr;gap:var(--space-1)}}

/* ---------- FOOTER (destination) ---------- */
.site-footer{position:relative;background:var(--color-fg);color:var(--paper);padding-top:var(--space-7);margin-top:var(--space-6);overflow:clip}
.site-footer ::selection{background:var(--color-accent);color:var(--color-fg)}
.fcta{max-width:var(--shell-max);margin-inline:auto;padding-inline:var(--page-inline)}
.fcta .label{color:var(--color-accent)}
.fcta__title{font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,11vw,10rem);line-height:1.0;letter-spacing:0.01em;margin-block:var(--space-2) var(--space-3);font-feature-settings:'palt' 1}
.fcta__lead{color:color-mix(in srgb,var(--paper) 78%,transparent);max-width:46ch;line-height:1.9}
.fcta .btn{margin-top:var(--space-4);background:var(--color-accent);color:var(--color-fg)}
.fcta .btn:hover{background:var(--paper);color:var(--color-fg)}
.foot-logo{position:relative;margin-top:var(--space-7);padding-inline:var(--page-inline);text-align:center}
.foot-swoosh{width:min(42%,360px);height:auto;margin:0 auto calc(var(--space-2) * -0.4)}
.foot-logo__type{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,14vw,14rem);line-height:0.9;letter-spacing:0.02em;color:var(--paper)}
.foot-marquee{margin-top:var(--space-5);border-block:1px solid color-mix(in srgb,var(--paper) 16%,transparent);padding-block:var(--space-2)}
.foot-marquee .marquee-track>span{font-family:var(--font-display);font-weight:900;font-size:clamp(1.3rem,4vw,2.8rem);color:color-mix(in srgb,var(--paper) 22%,transparent);letter-spacing:0.02em}
.foot-marquee .marquee-track>span.dot{color:var(--color-accent)}
.foot-grid{max-width:var(--shell-max);margin:var(--space-6) auto 0;padding-inline:var(--page-inline);display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:var(--space-4)}
.foot-col h4{color:var(--color-accent);margin-bottom:var(--space-2);font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.12em;text-transform:uppercase;font-weight:700}
.foot-about{color:color-mix(in srgb,var(--paper) 72%,transparent);font-size:var(--step-0);line-height:1.9;max-width:36ch}
.foot-nav a{display:block;padding:0.35em 0;font-family:var(--font-display);font-weight:500;transition:color var(--dur-1) var(--ease-out-quart)}
.foot-nav a:hover,.foot-nav a[aria-current=page]{color:var(--color-accent)}
.foot-contact p{color:color-mix(in srgb,var(--paper) 75%,transparent);font-size:var(--step-0);line-height:1.95}
.foot-base{max-width:var(--shell-max);margin:var(--space-6) auto 0;padding:var(--space-3) var(--page-inline);border-top:1px solid color-mix(in srgb,var(--paper) 16%,transparent);display:flex;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.06em;color:color-mix(in srgb,var(--paper) 60%,transparent)}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}

/* ---------- nav toggle bars ---------- */
.nav-toggle{flex-direction:column;gap:6px}
.nav-toggle .bar{display:block;width:24px;height:2px;background:currentColor;transition:transform var(--dur-1) var(--ease-out-quart),opacity var(--dur-1)}
.nav-toggle.is-open .bar:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle.is-open .bar:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- wide screens: intentional breathing ---------- */
@media (min-width:2100px){
  .reasons{gap:var(--space-7)}
}