:root {
    --paper: #F6F4F0;
    --paper-2: #EFEBE4;
    --ink: #1C1B19;
    --ink-soft: #6A6862;
    --shu: #BE3A24;
    --shu-soft: #BE3A2418;
    --line: #DFDBD2;
    --card: #FCFBF9;
    --shadow: 0 1px 2px rgba(33,29,24,.04), 0 8px 28px rgba(33,29,24,.07);
  }
  ::selection { background: var(--shu-soft); }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #171512;
      --paper-2: #1D1A16;
      --ink: #ECE7DC;
      --ink-soft: #9C968A;
      --shu: #E25B41;
      --shu-soft: #E25B4122;
      --line: #2C2822;
      --card: #201D18;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"] {
    --paper: #171512; --paper-2: #1D1A16; --ink: #ECE7DC; --ink-soft: #9C968A;
    --shu: #E25B41; --shu-soft: #E25B4122; --line: #2C2822; --card: #201D18;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
  }
  :root[data-theme="light"] {
    --paper: #F6F4F0; --paper-2: #EFEBE4; --ink: #1C1B19; --ink-soft: #6A6862;
    --shu: #BE3A24; --shu-soft: #BE3A2418; --line: #DFDBD2; --card: #FCFBF9;
    --shadow: 0 1px 2px rgba(33,29,24,.04), 0 8px 28px rgba(33,29,24,.07);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
    font-optical-sizing: auto; font-size: 1.075rem; line-height: 1.8;
  }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .018;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)"/></svg>');
  }
  a { color: var(--shu); text-decoration: none; }
  a:focus-visible, .cta:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

  .sans, .eyebrow, .navlinks a, .badge span, .cta, .cta2, .alt, .alt2, .fine, .meta, .chiplbl, .st-en, .scroll-cue, .foot-base, .foot-col h4, .foot-col a, .demo-caption, .ms-label, .who, .go, .kicker, .per, .stat span, .topbar { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
  .eyebrow {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--shu); display: flex; align-items: center; gap: .7rem; margin-bottom: 2.4rem;
  }
  .eyebrow::before { content: ""; width: 2rem; border-top: 1.5px solid var(--shu); }
  .eyebrow .jp { color: var(--ink-soft); font-weight: 400; letter-spacing: .28em; margin-left: .1rem; }

  h1, h2, h3 { line-height: 1.12; text-wrap: balance; margin: 0; font-weight: 400;
    font-family: "Instrument Serif", "Newsreader", Georgia, serif; letter-spacing: -.005em; }
  h1 em, h2 em, h3 em { font-style: italic; }
  h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); letter-spacing: -.012em; margin-bottom: 2.6rem; }
  h3 { font-size: 1.32rem; letter-spacing: -.005em; }
  p { margin: 0 0 1.55rem; }
  .soft { color: var(--ink-soft); }

  .wrap { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
  .prose { max-width: 44rem; }

  /* ── reveal ── */
  .rv { opacity: 1; transform: none; }
  .js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
  .js .rv.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rv, .js .rv { opacity: 1; transform: none; transition: none; }
  }

  /* ── nav ── */
  header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 72rem; margin: 0 auto; padding: .9rem clamp(1.25rem, 4vw, 2.5rem); }
  .brand { display: flex; align-items: baseline; gap: .65rem; color: var(--ink); }
  .brand .mark {
    font-weight: 700; font-size: 1.15rem; letter-spacing: .01em;
    border-bottom: 3px solid var(--shu); padding-bottom: 1px;
  }
  .brand .desc { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .74rem; letter-spacing: .04em; color: var(--ink-soft); }
  .navlinks { display: flex; gap: 1.4rem; align-items: center; }
  .navlinks a { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .78rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
  .navlinks a:hover { color: var(--shu); }
  .navlinks .navcta {
    color: var(--paper); background: var(--ink); padding: .5rem .95rem; border-radius: 3px;
  }
  .navlinks .navcta:hover { background: var(--shu); color: var(--paper); }
  @media (max-width: 720px) { .navlinks a:not(.navcta) { display: none; } .brand .desc { display: none; } }

  /* ── hero ── */
  .hero { padding: clamp(6.5rem, 15vh, 10.5rem) 0 clamp(5.5rem, 12vh, 8.5rem); position: relative; overflow: hidden; }
  .hero h1 {
    font-size: clamp(3.2rem, 8.2vw, 7rem); letter-spacing: -.02em; line-height: .98;
    max-width: 11em;
  }
  .hero h1 .strike { position: relative; white-space: nowrap; }
  .hero h1 .strike s { text-decoration: none; position: relative; }
  .hero h1 .strike s::after {
    content: ""; position: absolute; left: -2%; right: -2%; top: 54%;
    border-top: 3px solid var(--shu); transform: rotate(-1.2deg);
  }
  .hero h1 .fix {
    font-style: italic; color: var(--shu); white-space: nowrap;
  }
  .hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 38em; margin: 2.8rem 0 0; line-height: 1.95; color: var(--ink-soft); }
  .hero .row { display: flex; gap: 1.6rem; align-items: center; margin-top: 3.6rem; flex-wrap: wrap; }
  .cta {
    display: inline-block; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .95rem; font-weight: 600; letter-spacing: .02em;
    color: #FFFFFF; background: var(--shu); padding: .95rem 1.5rem; border-radius: 3px;
    box-shadow: var(--shadow);
  }
  .cta:hover { filter: brightness(1.08); }
  .hero .alt { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .88rem; color: var(--ink-soft); }
  .hero .alt b { color: var(--ink); }
  .hero-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 2.2rem; margin-top: clamp(3rem, 7vh, 5rem);
    border-top: 1px solid var(--line); padding-top: 1.3rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .8rem; letter-spacing: .05em; color: var(--ink-soft);
  }
  .hero-meta span::before { content: "— "; color: var(--shu); }

  /* ── band sections ── */
  section { padding: clamp(6rem, 12vh, 9rem) 0; }
  section.tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  /* ── problem: pull-quote treatment ── */
  .pull {
    font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.45; max-width: 30em;
    text-indent: 0; margin-bottom: 2.2rem;
  }
  .pull em { font-style: italic; color: var(--shu); }

  /* ── method: 3 columns ── */
  .cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-top: 3.6rem; }
  @media (max-width: 860px) { .cols3 { grid-template-columns: 1fr; } }
  .step {
    background: var(--card); border: 1px solid var(--line); border-radius: 4px;
    padding: 2.5rem 2.2rem 2.2rem; box-shadow: var(--shadow); position: relative;
  }
  .step .n {
    font-size: 2.6rem; line-height: 1; color: var(--shu); font-style: italic;
    display: block; margin-bottom: 1.3rem;
  }
  .step h3 { margin-bottom: .8rem; }
  .step p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
  .method-note { margin-top: 3.4rem; max-width: 44rem; }
  .method-note p { margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--shu); }

  /* ── demonstration ── */
  .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; margin-top: 3.6rem; align-items: stretch; }
  @media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }
  .ms {
    background: var(--card); border: 1px solid var(--line); border-radius: 4px;
    padding: 2.6rem 2.4rem; box-shadow: var(--shadow);
  }
  .ms .ms-label {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); display: block; margin-bottom: 1.4rem;
  }
  .ms.edited .ms-label { color: var(--shu); }
  .ms.edited { border-top: 4px solid var(--shu); }
  .ms p { font-size: 1.08rem; line-height: 1.95; margin: 0; }
  .ms .flag { border-bottom: 2px solid var(--shu); }
  .ms sup { color: var(--shu); font-family: system-ui, sans-serif; font-size: .7em; font-weight: 700; }
  .demo-notes { margin-top: 3rem; max-width: 44rem; display: flex; flex-direction: column; gap: 1.15rem; }
  .demo-notes p { margin: 0; font-size: .95rem; color: var(--ink-soft); padding-left: 1.7rem; position: relative; }
  .demo-notes p b { color: var(--shu); position: absolute; left: 0; font-family: system-ui, sans-serif; font-size: .8rem; top: .2rem; }
  .demo-caption {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .78rem; color: var(--ink-soft); margin-top: 1.6rem; letter-spacing: .03em;
  }

  /* ── layer chips ── */
  .chips { display: flex; gap: .6rem; align-items: center; margin: 1rem 0 1.6rem; }
  .chips .chiplbl { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-right: .5rem; }
  .chips i {
    font-style: normal; font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 700;
    width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--shu); color: var(--shu);
  }
  .chips i.dim { border-color: var(--line); color: var(--ink-soft); }

  /* ── services ── */
  .svc-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.2rem; margin-top: 3.4rem; align-items: start; }
  @media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr; } }
  .svc-side { display: flex; flex-direction: column; gap: 2.2rem; }
  .card {
    background: var(--card); border: 1px solid var(--line); border-radius: 4px;
    padding: 2.9rem 2.6rem; box-shadow: var(--shadow);
  }
  .card h3 { margin-bottom: .9rem; }
  .card.lead { border-top: 4px solid var(--shu); }
  .tag {
    display: inline-block; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--shu); background: var(--shu-soft); border-radius: 2px; padding: .35rem .65rem; margin-bottom: 1.5rem;
  }
  .price-row { display: flex; align-items: baseline; gap: .9rem; margin: .8rem 0 1.5rem; flex-wrap: wrap; }
  .price { font-size: 2.1rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .per { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .85rem; color: var(--ink-soft); }
  .card ul { margin: 1.2rem 0 0; padding: 0; list-style: none; }
  .card ul li { padding-left: 1.5rem; position: relative; margin-bottom: .8rem; }
  .card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--shu); font-family: system-ui, sans-serif; font-size: .85rem; }
  .fine { font-size: .86rem; color: var(--ink-soft); border-top: 1px dashed var(--line); margin-top: 1.8rem; padding-top: 1.3rem; line-height: 1.8; }
  .card .meta { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.2rem; }
  .card p:last-child { margin-bottom: 0; }

  /* ── process ── */
  .steps-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 3.4rem; counter-reset: st; }
  @media (max-width: 860px) { .steps-h { grid-template-columns: 1fr; } }
  .steps-h div { counter-increment: st; border-top: 2px solid var(--ink); padding-top: 1rem; position: relative; }
  .steps-h div::before {
    content: "0" counter(st); font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--shu); display: block; margin-bottom: .4rem;
  }
  .steps-h p { margin: 0; font-size: .98rem; }

  /* ── about ── */
  .about-grid { display: grid; grid-template-columns: 1fr 15rem; gap: 4.5rem; align-items: start; }
  @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
  .about-side { display: flex; flex-direction: column; gap: 1.3rem; }
  .portrait {
    aspect-ratio: 4 / 5; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-2);
    box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .78rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-soft);
  }
  .kanji-block {
    border: 1px solid var(--line); border-radius: 4px; background: var(--card); box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center; padding: 2.2rem 1rem; gap: 1.4rem;
  }
  .kanji-block .k { writing-mode: vertical-rl; font-size: 3.6rem; line-height: 1.15; letter-spacing: .1em;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 500; }
  .kanji-block .r { writing-mode: vertical-rl; font-family: system-ui, sans-serif; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--shu); }

  /* ── thinking ── */
  .think-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.8rem; }
  @media (max-width: 860px) { .think-grid { grid-template-columns: 1fr; } }
  .think-grid a {
    display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem;
    color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 4px;
    padding: 2rem 1.9rem; box-shadow: var(--shadow); transition: border-color .25s ease, transform .25s ease;
  }
  .think-grid a:hover { border-color: var(--shu); transform: translateY(-2px); }
  @media (prefers-reduced-motion: reduce) { .think-grid a:hover { transform: none; } }
  .think-grid .q { font-style: italic; font-size: 1.05rem; line-height: 1.55; }
  .think-grid .q::before { content: "“"; color: var(--shu); }
  .think-grid .q::after { content: "”"; color: var(--shu); }
  .think-grid .go { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--shu); }

  /* ── faq ── */
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 3.5rem; margin-top: 2rem; }
  @media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
  .faq-grid dl { margin: 0; }
  .faq-grid dt { font-weight: 600; margin-top: 2rem; }
  .faq-grid dt::before { content: "Q. "; color: var(--shu); font-style: italic; }
  .faq-grid dd { margin: .5rem 0 0; line-height: 1.8; color: var(--ink-soft); font-size: .98rem; }

  /* ── contact ── */
  .contact { text-align: center; }
  .contact h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
  .contact .prose { margin: 0 auto; }
  .contact .mail { display: inline-block; font-size: clamp(1.2rem, 2.6vw, 1.7rem); margin-top: 1.6rem; border-bottom: 2px solid var(--shu); padding-bottom: .15rem; }
  .contact .alt2 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .85rem; color: var(--ink-soft); margin-top: 1.2rem; }

  footer { border-top: 1px solid var(--line); }
  .foot {
    max-width: 72rem; margin: 0 auto; padding: 1.6rem clamp(1.25rem, 4vw, 2.5rem) 2.6rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .78rem; color: var(--ink-soft);
  }


  /* ── stat tiles ── */
  .stat-row { display: flex; gap: 2.6rem; margin: 2.8rem 0 1rem; flex-wrap: wrap; }
  .stat { border-top: 2px solid var(--shu); padding-top: .9rem; min-width: 11rem; }
  .stat b { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
  .stat span { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); display: block; max-width: 15rem; line-height: 1.6; }

  /* ── proof ── */
  .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-top: 3.6rem; }
  @media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }
  .proof-grid a {
    display: flex; flex-direction: column; gap: 1.1rem; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-radius: 4px;
    padding: 2.4rem 2.2rem; box-shadow: var(--shadow); transition: border-color .25s ease, transform .25s ease;
  }
  .proof-grid a:hover { border-color: var(--shu); transform: translateY(-2px); }
  @media (prefers-reduced-motion: reduce) { .proof-grid a:hover { transform: none; } }
  .proof-grid .who { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
  .proof-grid .what { font-size: .98rem; line-height: 1.75; }
  .proof-grid .what em { color: var(--shu); font-style: normal; font-weight: 600; }
  .proof-grid .go { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--shu); margin-top: auto; }
  .proof-close { margin-top: 3.2rem; max-width: 44rem; }
  .proof-close p { margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--shu); }


  /* ── statement band ── */
  .statement { padding: clamp(9rem, 20vh, 14rem) 0; text-align: center; }
  .st-jp {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(2.2rem, 6.5vw, 4.6rem); font-weight: 500; letter-spacing: .16em;
    line-height: 1.4; margin: 0 0 1.4rem; text-wrap: balance;
  }
  .st-jp .maru { color: var(--shu); }
  .st-en {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .84rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ink-soft); margin: 0;
  }

  /* ── motion ── */
  @keyframes drawline { from { transform: scaleX(0) rotate(-1.2deg); } to { transform: scaleX(1) rotate(-1.2deg); } }
  .hero h1 .strike s::after { transform-origin: left center; animation: drawline .55s cubic-bezier(.7,0,.3,1) .55s both; }
  @keyframes inkin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .hero h1 .fix { display: inline-block; animation: inkin .6s ease 1.05s both; }
  .eyebrow::before { transition: width .7s cubic-bezier(.2,.7,.2,1) .15s; }
  .js .eyebrow.rv:not(.in)::before { width: 0; }
  .navlinks a:not(.navcta) { background: linear-gradient(var(--shu), var(--shu)) left bottom / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size .3s ease, color .2s ease; }
  .navlinks a:not(.navcta):hover { background-size: 100% 1.5px; }
  .cta .ar { display: inline-block; transition: transform .25s ease; margin-left: .35rem; }
  .cta:hover .ar { transform: translateX(4px); }
  .card, .step, .ms { transition: box-shadow .3s ease, border-color .3s ease, opacity .7s ease, transform .7s ease; }
  .card:hover, .step:hover { box-shadow: 0 2px 4px rgba(33,29,24,.05), 0 14px 40px rgba(33,29,24,.10); }
  @media (prefers-reduced-motion: reduce) {
    .hero h1 .strike s::after, .hero h1 .fix { animation: none; }
    .js .eyebrow.rv:not(.in)::before { width: 2rem; }
    .cta .ar, .navlinks a:not(.navcta) { transition: none; }
  }

  /* Services 内：報告書1件分の型（2026-09-13 競合調査の反映） */
  .finding { margin-top: 3.2rem; background: var(--card); box-shadow: var(--shadow); padding: 2.3rem 2.4rem; border-left: 2px solid var(--shu); }
  .finding-head { display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 1.2rem; }
  .finding .fx { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--shu); }
  .finding .fl { font-size: .84rem; color: var(--ink-soft); }
  .finding dl { margin: 0; display: grid; grid-template-columns: 10.5rem 1fr; gap: .6rem 1.5rem; }
  .finding dt { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); padding-top: .25rem; }
  .finding dd { margin: 0; line-height: 1.8; }
  @media (max-width: 700px) { .finding dl { grid-template-columns: 1fr; gap: .2rem; } .finding dt { margin-top: .9rem; } }

  /* ══ v9（2026-09-16）視覚要素の追加 ══ */

  /* ヒーロー：本文＋朱入れの原稿 */
  .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }
  .hero-grid .hero-meta { margin-top: clamp(2.4rem, 5vh, 3.4rem); }
  .manuscript {
    margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 4px;
    box-shadow: 0 2px 6px rgba(28,27,25,.05), 0 24px 60px rgba(28,27,25,.10);
    padding: 2.6rem 2.4rem 2.4rem; position: relative; transform: rotate(-.5deg);
  }
  .manuscript::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--shu); border-radius: 4px 0 0 4px;
  }
  .manuscript figcaption {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.5rem;
  }
  .manuscript .mline { position: relative; padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px dashed var(--line); }
  .manuscript .mline.out { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .manuscript .en { font-size: 1.02rem; line-height: 1.8; margin: 0; }
  .manuscript .mline:not(.out) .en { color: var(--ink-soft); }
  .manuscript s { text-decoration: none; background: linear-gradient(var(--shu), var(--shu)) left 58% / 100% 2px no-repeat; }
  .manuscript s b { font-weight: 600; }
  .manuscript .note {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .78rem; line-height: 1.6;
    color: var(--shu); margin: .8rem 0 0; padding-left: 1.1rem; position: relative;
  }
  .manuscript .note::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; border-top: 1.5px solid var(--shu); }
  .manuscript .out .en { color: var(--ink); }
  .manuscript .ja {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 1rem; line-height: 1.95; margin: .9rem 0 0;
  }
  @media (prefers-reduced-motion: reduce) { .manuscript { transform: none; } }

  /* Method：順序の図 */
  .layers { margin: 2.6rem 0 0; }
  .layers svg { width: 100%; height: auto; display: block; }
  .layers .band rect { fill: var(--card); stroke: var(--line); stroke-width: 1; }
  .layers .num text { fill: var(--shu); font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .1em; }
  .layers .lab text { fill: var(--ink); font-family: "Instrument Serif", Georgia, serif; font-size: 22px; font-weight: 400; }
  .layers .sub text { fill: var(--ink-soft); font-family: "Inter", system-ui, sans-serif; font-size: 12.5px; }
  .layers .rail path { fill: none; stroke: var(--shu); stroke-width: 1.5; }
  .layers .entry path { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 4; }
  .layers .entry text { fill: var(--ink-soft); font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-anchor: start; }
  .layers figcaption { margin-top: 1.6rem; max-width: 44rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.8; }
  @media (max-width: 700px) { .layers .sub text { font-size: 11px; } .layers .lab text { font-size: 17px; } }

  /* Proof：報告書の紙面サムネイル */
  .proof-grid .thumb {
    display: block; height: 7.5rem; border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
    padding: .9rem .85rem; overflow: hidden; position: relative;
  }
  .proof-grid .thumb::before { content: ""; display: block; width: 38%; height: 5px; background: var(--shu); margin-bottom: .7rem; }
  .proof-grid .thumb i {
    display: block; height: 4px; background: var(--line); border-radius: 2px; margin-bottom: .48rem;
  }
  .proof-grid .thumb i:nth-child(1) { width: 92%; }
  .proof-grid .thumb i:nth-child(2) { width: 78%; }
  .proof-grid .thumb i:nth-child(3) { width: 86%; }
  .proof-grid .thumb i:nth-child(4) { width: 46%; background: var(--shu-soft); }
  .proof-grid .thumb::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .8rem; height: 1.7rem;
    background:
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 33%);
    opacity: .9;
  }
  .proof-grid a:hover .thumb { border-color: var(--shu); }

  /* 折りたたみ（FAQ・About）：読む量を抑える */
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 3rem; align-content: start; }
  details.qa, details.more { border-bottom: 1px solid var(--line); }
  details.qa summary, details.more summary {
    cursor: pointer; list-style: none; padding: 1.05rem 1.8rem 1.05rem 0; position: relative;
    font-weight: 600; font-size: 1.02rem;
  }
  details.qa summary::-webkit-details-marker, details.more summary::-webkit-details-marker { display: none; }
  details.qa summary::before { content: "Q. "; color: var(--shu); font-style: italic; }
  details.qa summary::after, details.more summary::after {
    content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
    color: var(--shu); font-family: system-ui, sans-serif; font-weight: 400; font-size: 1.2rem;
  }
  details[open].qa summary::after, details[open].more summary::after { content: "–"; }
  details.qa p, details.more p { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.8; max-width: 42em; }
  details.more { border-bottom: 0; margin-top: .6rem; }
  details.more summary { font-size: .95rem; font-weight: 600; color: var(--shu); padding-left: 0; }
  details.more summary::before { content: ""; }
  summary:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

  /* ══ v10（2026-09-16）競合の実画面調査を受けた視覚強化 ══ */

  /* ヒーロー：バッジ */
  .badge { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2.4rem; }
  .badge span {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .68rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 100px; padding: .38rem .8rem; background: var(--card);
  }
  .badge span:first-child { color: var(--shu); border-color: color-mix(in srgb, var(--shu) 35%, var(--line)); }

  /* 第二のCTA */
  .cta2 {
    display: inline-block; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .95rem; font-weight: 600; color: var(--ink); background: transparent;
    border: 1px solid var(--line); border-radius: 3px; padding: .9rem 1.35rem;
  }
  .cta2:hover { border-color: var(--shu); color: var(--shu); }
  .cta2 .ar { display: inline-block; margin-left: .4rem; transition: transform .25s ease; }
  .cta2:hover .ar { transform: translateX(4px); }
  .hero .row { gap: .9rem 1.2rem; }
  .hero .alt { flex-basis: 100%; }
  .hero-meta { gap: 1.1rem 2.2rem; }

  /* Problem：症状カード3枚 */
  .sym-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-top: 3.6rem; }
  @media (max-width: 900px) { .sym-grid { grid-template-columns: 1fr; } }
  .sym {
    background: var(--card); border: 1px solid var(--line); border-radius: 4px;
    padding: 2.4rem 2.2rem; box-shadow: var(--shadow); border-top: 3px solid var(--shu);
  }
  .sym .sn {
    font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    color: var(--shu); display: block; margin-bottom: 1rem;
  }
  .sym h3 { font-size: 1.1rem; line-height: 1.4; margin-bottom: .8rem; }
  .sym p { margin: 0; font-size: .95rem; line-height: 1.75; color: var(--ink-soft); }

  /* Services：相場のコールアウト */
  .ctx {
    background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--shu);
    border-radius: 3px; padding: 1.9rem 2.1rem; margin: 0 0 3.4rem; max-width: 52rem;
  }
  .ctx p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--ink-soft); }
  .ctx b { color: var(--ink); font-weight: 600; }

  /* ステートメント帯：墨ベタ（ページの濃淡） */
  section.statement.dark { background: var(--ink); border: 0; }
  section.statement.dark .st-jp { color: #F7F5F0; }
  section.statement.dark .st-jp .maru { color: #E25B41; }
  section.statement.dark .st-en { color: #9C968A; }

  /* ══ v11（2026-09-16）類似スタジオ10社の調査を受けた変更 ══ */

  /* ③ 地の色を白に振り切る（薄いグレー帯をやめ、罫だけで区切る。濃色は墨帯1枚に集約） */
  section.tint { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  /* ① 作品＝報告書の紙面。Proof を画像主役に */
  .proof-grid a { padding: 0; overflow: hidden; gap: 0; }
  .proof-grid .work {
    display: block; width: 100%; height: auto; aspect-ratio: 900 / 780; object-fit: cover; object-position: top center;
    border-bottom: 1px solid var(--line); background: var(--paper);
  }
  .proof-grid .who { padding: 1.6rem 1.7rem 0; }
  .proof-grid .what { padding: .9rem 1.7rem 0; }
  .proof-grid .go { padding: 1.2rem 1.7rem 1.7rem; }
  .proof-grid a:hover .work { opacity: .92; }

  /* ② 第一画面：1行に削ったぶん、見出しと余白を主役にする */
  .hero .lede { font-size: clamp(1.15rem, 1.9vw, 1.45rem); color: var(--ink); max-width: 24em; }
  .scroll-cue {
    display: block; margin-top: 3.2rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .68rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
  }
  .scroll-cue::after { content: " ↓"; color: var(--shu); }

  /* ④ 署名になる細部：セクションの日本語ラベルを左の柱に縦組みで立てる */
  @media (min-width: 1180px) {
    section .wrap { position: relative; }
    .eyebrow .jp {
      position: absolute; left: -3.2rem; top: .1rem;
      writing-mode: vertical-rl; letter-spacing: .3em; margin: 0;
      font-size: .82rem; color: var(--ink-soft);
    }
  }
  /* ナビの件数表示（monopo の work⁹⁷ の型） */
  .navlinks a sup { font-size: .6em; color: var(--shu); margin-left: .1em; vertical-align: super; }

  /* 無料の入口（2026-09-16 taichi 決定：通話なし・書面で1件だけ） */
  .free-box { display: grid; grid-template-columns: 1.45fr 1fr; gap: 3rem; align-items: start;
    background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--shu);
    border-radius: 4px; box-shadow: var(--shadow); padding: 2.8rem 2.6rem; }
  @media (max-width: 900px) { .free-box { grid-template-columns: 1fr; gap: 2.2rem; padding: 2.2rem 1.9rem; } }
  .free-main h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1.4rem; }
  .free-main p { max-width: 34em; }
  .free-main .row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 2rem; }
  .free-main .alt { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .85rem; color: var(--ink-soft); }
  .free-terms { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); padding-left: 2rem; }
  @media (max-width: 900px) { .free-terms { border-left: 0; border-top: 1px solid var(--line); padding: 1.6rem 0 0; } }
  .free-terms li { font-size: .93rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: 1.2rem; }
  .free-terms li:last-child { margin-bottom: 0; }
  .free-terms b { color: var(--ink); font-weight: 600; display: block; }

  /* ══ v13（2026-09-16）デザインの密度を上げる ══ */

  /* 上部のメタ行（Tokyo Design Studio の型：極小の情報を4列で置く） */
  .topbar { border-bottom: 1px solid var(--line); background: var(--paper); }
  .topbar-in { max-width: 72rem; margin: 0 auto; padding: .55rem clamp(1.25rem, 4vw, 2.5rem);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; }
  .topbar-in span { overflow: hidden; text-overflow: ellipsis; }
  .topbar-in i { font-style: normal; font-family: "Noto Serif JP", serif; letter-spacing: .2em; text-transform: none; }
  @media (max-width: 860px) { .topbar-in { grid-template-columns: 1fr 1fr; } .topbar-in span:nth-child(n+3) { display: none; } }

  /* 見出しの出方（下から拭うように出す） */
  .js h1.rv, .js h2.rv { clip-path: inset(0 0 105% 0); transform: none; opacity: 1;
    transition: clip-path .85s cubic-bezier(.16,.84,.34,1); }
  .js h1.rv.in, .js h2.rv.in { clip-path: inset(-20% -20% -20% -20%); }
  @media (prefers-reduced-motion: reduce) { .js h1.rv, .js h2.rv { clip-path: none; transition: none; } }

  /* 作品一覧を非対称に組む */
  @media (min-width: 900px) {
    .work-index { grid-template-columns: repeat(12, 1fr); gap: 5rem 3rem; }
    .work-index a:nth-child(1) { grid-column: 1 / span 7; }
    .work-index a:nth-child(2) { grid-column: 9 / span 4; margin-top: 7rem; }
    .work-index a:nth-child(3) { grid-column: 3 / span 6; }
  }
  .work-index a { overflow: hidden; }
  .work-index img { transition: transform .6s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
  .work-index a:hover img { transform: scale(1.015); }

  /* Home の作品3枚：中央を少し下げて段差をつける */
  @media (min-width: 900px) {
    .proof-grid a:nth-child(2) { margin-top: 2.4rem; }
    .proof-grid a:nth-child(3) { margin-top: 4.8rem; }
  }

  /* ヒーロー：原稿を少し重ねて奥行きを出す */
  @media (min-width: 1100px) {
    .hero-grid .manuscript { margin-left: -2.5rem; transform: rotate(-.6deg) translateY(1.5rem); }
  }
  .hero .lede { font-family: "Newsreader", Georgia, serif; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.55; }

  /* 数字・ラベルの字面を締める */
  .price { font-family: "Instrument Serif", Georgia, serif; font-size: 2.6rem; font-weight: 400; }
  .step .n, .sym .sn { font-family: "Instrument Serif", Georgia, serif; }
  .stat b { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 2rem; }

  /* ══ v14（2026-09-16）デザイン調査の反映 ══
     参照：Reed Words（英・コピーライティング）＝朱を面で使う・右下に常駐CTA
           高田紙器印刷工業所＝左端の縦レール・長い下線＋矢印のテキストリンク  */

  /* 朱を面で使う：主CTAを錠剤型に、副CTAは丸みのある枠 */
  .cta { border-radius: 100px; padding: 1rem 1.7rem; }
  .cta2 { border-radius: 100px; padding: .95rem 1.5rem; border-color: var(--ink); }
  .navlinks .navcta { border-radius: 100px; padding: .55rem 1.1rem; }
  .badge span { border-radius: 100px; }

  /* 左端の縦レール（社名）。画面の端に常駐する */
  .railbrand {
    position: fixed; left: .9rem; top: 50%; transform: translateY(-50%); z-index: 40;
    writing-mode: vertical-rl; letter-spacing: .34em; font-size: .7rem; text-transform: uppercase;
    color: var(--ink-soft); font-family: "Inter", system-ui, sans-serif; pointer-events: none;
  }
  .railbrand i { font-style: normal; font-family: "Noto Serif JP", serif; letter-spacing: .3em; text-transform: none; }
  @media (max-width: 1240px) { .railbrand { display: none; } }

  /* 右下に常駐する書面のCTA（Reed Words の "SAY HELLO" の位置） */
  .sticky-cta {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 45;
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--shu); color: #FFF; border-radius: 100px; padding: .85rem 1.35rem;
    font-family: "Inter", system-ui, sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
    box-shadow: 0 6px 24px rgba(190,58,36,.28);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .sticky-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(190,58,36,.34); }
  .sticky-cta .dot { width: .45rem; height: .45rem; border-radius: 50%; background: #FFF; opacity: .9; }
  @media (max-width: 700px) { .sticky-cta { right: .9rem; bottom: .9rem; padding: .7rem 1.1rem; font-size: .76rem; } }

  /* 長い下線＋矢印のテキストリンク（高田紙器の型） */
  .ruled-link {
    display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
    max-width: 22rem; border-bottom: 1px solid var(--ink); padding-bottom: .7rem;
    font-family: "Inter", system-ui, sans-serif; font-size: .88rem; color: var(--ink);
    transition: border-color .25s ease, color .25s ease;
  }
  .ruled-link:hover { color: var(--shu); border-color: var(--shu); }
  .ruled-link .ar { transition: transform .25s ease; }
  .ruled-link:hover .ar { transform: translateX(5px); }

  /* ══ v15（2026-09-17）スタジオ水準へ：記号・モーション・遷移 ══ */

  /* ページ遷移（対応ブラウザではクロスフェード。非対応では何も起きない） */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .28s ease both; }
  ::view-transition-new(root) { animation: vt-in .34s ease both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

  /* スクロール進捗（上端の朱の細線） */
  .progress { position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%; z-index: 60;
    transform-origin: 0 50%; transform: scaleX(0); background: var(--shu); }

  /* ロゴタイプ：トンボ（印刷の見当記号）＋ワードマーク */
  .brand { gap: .75rem; align-items: center; }
  .brand .logomark { width: 1.45rem; height: 1.45rem; flex: none; display: block; }
  .brand .mark { border-bottom: 0; font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
    font-size: 1.45rem; letter-spacing: .01em; }
  .brand:hover .logomark { transform: rotate(-90deg); }
  .brand .logomark { transition: transform .5s cubic-bezier(.2,.7,.2,1); }

  /* ヒーローを段階的に立ち上げる */
  .js .hero .badge, .js .hero h1, .js .hero .lede, .js .hero .row,
  .js .hero .hero-meta, .js .hero .scroll-cue, .js .hero .manuscript {
    animation: rise .9s cubic-bezier(.16,.84,.34,1) both;
  }
  .js .hero .badge { animation-delay: .05s; }
  .js .hero h1 { animation-delay: .12s; }
  .js .hero .lede { animation-delay: .34s; }
  .js .hero .row { animation-delay: .44s; }
  .js .hero .hero-meta { animation-delay: .54s; }
  .js .hero .scroll-cue { animation-delay: .64s; }
  .js .hero .manuscript { animation-delay: .5s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .js .hero .badge, .js .hero h1, .js .hero .lede, .js .hero .row,
    .js .hero .hero-meta, .js .hero .scroll-cue, .js .hero .manuscript { animation: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  }

  /* 朱入れの図版（Method） */
  .akaire { margin: 0 0 3.4rem; }
  .akaire img { display: block; width: 100%; height: auto; border: 1px solid var(--line); box-shadow: var(--shadow); }

  /* 一覧と本文に置く小さな目安（件数・読了・時期） */
  .work-index .workmeta, .docmeta {
    display: block; font-family: "Inter", system-ui, sans-serif; font-size: .78rem; letter-spacing: .04em;
    color: var(--ink-soft); margin: -.35rem 0 .9rem;
  }
  .docmeta { margin: -.9rem 0 2rem; }

/* ページ構造（2026-09-16 v12：1枚ものから多層のサイトへ） */
.pagehead { padding: clamp(5rem, 11vh, 8rem) 0 clamp(3.5rem, 7vh, 5rem); border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -.015em; line-height: 1.12; max-width: 18em; }
.pagehead .lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--ink-soft); max-width: 40em; margin: 2rem 0 0; line-height: 1.9; }
.pagehead .hero-meta { margin-top: 2.8rem; }

.navlinks a.on { color: var(--shu); }

.tail { padding: clamp(6rem, 13vh, 9rem) 0; border-top: 1px solid var(--line); text-align: center; }
.tail h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 1.2rem; }
.tail p { color: var(--ink-soft); max-width: 36em; margin: 0 auto 2.6rem; }
.tail .row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* 一覧ページの作品グリッド（2列・大きく） */
section.tight { padding-top: clamp(3rem, 6vh, 4.5rem); }
.work-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.5rem 2.6rem; margin-top: 0; }
@media (max-width: 860px) { .work-index { grid-template-columns: 1fr; } }
.work-index a { display: block; color: var(--ink); }
.work-index img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); transition: border-color .25s ease; }
.work-index a:hover img { border-color: var(--shu); }
.work-index .who { display: block; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 1.6rem 0 .8rem; }
.work-index .what { display: block; line-height: 1.8; }
.work-index .what em { color: var(--shu); font-style: normal; font-weight: 600; }
.work-index .go { display: block; font-family: system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--shu); margin-top: 1.1rem; }

/* フッター（サイトマップ） */
footer { border-top: 1px solid var(--line); background: var(--paper); }
.foot-grid { max-width: 72rem; margin: 0 auto; padding: clamp(3.5rem, 8vh, 5rem) clamp(1.25rem, 4vw, 2.5rem) 2.8rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem 2.5rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand .mark { font-weight: 700; font-size: 1.1rem; border-bottom: 3px solid var(--shu); padding-bottom: 1px; }
.foot-brand p { font-size: .9rem; color: var(--ink-soft); line-height: 1.8; margin: 1.2rem 0 1rem; max-width: 24em; }
.foot-mail { font-size: .92rem; border-bottom: 1px solid var(--shu); }
.foot-col h4 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 1.2rem; }
.foot-col h4 .jp { color: var(--ink-soft); font-weight: 400; letter-spacing: .24em; margin-left: .4rem; }
.foot-col a { display: block; font-size: .9rem; color: var(--ink-soft); margin-bottom: .8rem; line-height: 1.6; }
.foot-col a:hover { color: var(--shu); }
.foot-base { max-width: 72rem; margin: 0 auto; padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 2.8rem;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .76rem; color: var(--ink-soft); }
.foot { display: none; }