@charset "utf-8";
/* 015 栞森印刷所 — 制作見本(架空)
   design-system/015-shiorimori-press/MASTER.md に従う。
   ただし配色は Accent を #EC4899(桃)から朱 #C8442E へ差し替えている(README 2章に理由)。
   フォントは端末標準のみ。外部フォント・外部CSSは読み込まない。 */

:root{
  /* 色 */
  --paper:      #FAFAF8;   /* 紙 = Background(MASTER #FAFAFA を紙寄りに) */
  --paper-2:    #F1EEE7;   /* 敷き紙 */
  --muted:      #E8E4DA;   /* Muted */
  --ink:        #16151A;   /* 墨 = Foreground */
  --ink-2:      #4A4750;   /* Secondary */
  --ink-3:      #77727E;
  --rule:       #DED9CE;   /* Border */
  --ai:         #24417C;   /* 藍 */
  --shu:        #C8442E;   /* 朱 = Accent/CTA */
  --haku:       #A9843C;   /* 箔 */
  --ring:       #16151A;

  /* 余白(MASTER の値をそのまま使う) */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;

  /* 影 */
  --shadow-sm: 0 1px 2px rgba(22,21,26,.05);
  --shadow-md: 0 4px 6px rgba(22,21,26,.10);
  --shadow-lg: 0 10px 15px rgba(22,21,26,.10);
  --shadow-xl: 0 20px 25px rgba(22,21,26,.15);

  --mincho: "Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","MS PMincho",serif;
  --gothic: "Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo","MS PGothic",system-ui,sans-serif;
  --mono: "SFMono-Regular","Consolas","MS Gothic",monospace;

  --wrap: 1120px;
  --head-h: 62px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:1.9;
  letter-spacing:.02em; overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--shu); outline-offset:2px; }

/* 紙の地合い(画像を使わずCSSだけで作る) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(circle at 18% 12%, rgba(201,196,182,.30) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 44%, rgba(201,196,182,.24) 0 1px, transparent 1.4px),
    radial-gradient(circle at 84% 78%, rgba(201,196,182,.28) 0 1px, transparent 1.4px);
  background-size:23px 23px, 31px 29px, 41px 37px;
}
#top, header, footer, main{ position:relative; z-index:1; }

/* ------- 見出し ------- */
h1,h2,h3,h4{ font-family:var(--mincho); font-weight:700; line-height:1.28; letter-spacing:.01em; margin:0; }
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--shu); margin:0 0 var(--space-sm);
}
.sec-title{ font-size:clamp(1.6rem,4.2vw,2.6rem); margin-bottom:var(--space-md); }
.lead{ font-size:clamp(1rem,2.2vw,1.12rem); color:var(--ink-2); max-width:64ch; }

/* ------- 骨組み ------- */
.wrap{ width:min(var(--wrap),calc(100% - 2*var(--space-lg))); margin-inline:auto; }
section{ padding:var(--space-3xl) 0; }
.rule{ border:0; border-top:1px solid var(--rule); margin:0; }

/* ------- ヘッダ ------- */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(250,250,248,.92);
  border-bottom:1px solid var(--rule); backdrop-filter:saturate(140%) blur(6px);
}
.head-in{ display:flex; align-items:center; gap:var(--space-md); height:var(--head-h); }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brand .name{ font-family:var(--mincho); font-size:19px; font-weight:700; letter-spacing:.08em; }
.brand .roman{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-3); display:block; }
.nav{ display:flex; gap:var(--space-lg); align-items:center; }
.nav a{ text-decoration:none; font-size:14px; color:var(--ink-2); padding:6px 2px; border-bottom:2px solid transparent; transition:color 200ms ease, border-color 200ms ease; cursor:pointer; }
.nav a:hover{ color:var(--ink); border-bottom-color:var(--shu); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }
.nav-toggle{
  display:none; width:44px; height:38px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--rule); border-radius:8px; cursor:pointer;
  transition:background 200ms ease;
}
.nav-toggle:hover{ background:var(--muted); }

/* ------- ボタン ------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:8px;
  font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:background 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.btn-primary{ background:var(--shu); color:#fff; }
.btn-primary:hover{ background:#a9351f; box-shadow:var(--shadow-md); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:var(--paper); }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--space-md); margin-top:var(--space-xl); }

/* ------- 表紙 ------- */
.hero{ padding:clamp(48px,9vw,110px) 0 var(--space-2xl); }
.hero h1{ font-size:clamp(2.4rem,9.4vw,6.4rem); letter-spacing:-.01em; line-height:1.06; }
.hero h1 .l2{ display:block; color:var(--ai); }
.hero h1 .l3{ display:block; color:var(--shu); }
.hero .lead{ margin-top:var(--space-xl); }
.hero-meta{ display:flex; flex-wrap:wrap; gap:var(--space-lg); margin-top:var(--space-xl); font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink-3); }

/* ------- 刷り台(演出C の中心) ------- */
.scene{ position:relative; }
.scene-track{ position:relative; }
.scene-sticky{
  position:sticky; top:var(--head-h); height:calc(100vh - var(--head-h));
  min-height:520px; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl);
  align-items:center;
}
.stage{ position:relative; display:flex; align-items:center; justify-content:center; }
.sheet{ width:min(100%,440px); aspect-ratio:1/1.32; }
.plate{ transition:opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.25,1); transform-origin:50% 50%; }
.js .plate{ opacity:0; }
.js .plate.is-on{ opacity:1; transform:none !important; }
.registration{ opacity:.55; }

.scene-copy{ position:relative; min-height:230px; }
.step{ position:absolute; inset:0; transition:opacity 380ms ease, transform 380ms ease; }
.js .step{ opacity:0; transform:translateY(14px); pointer-events:none; }
.js .step.is-on{ opacity:1; transform:none; pointer-events:auto; }
.step .no{ font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--ink-3); }
.step h3{ font-size:clamp(1.3rem,3.4vw,2rem); margin:var(--space-sm) 0 var(--space-md); }
.step p{ margin:0; color:var(--ink-2); max-width:44ch; }
.step .ink{ display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-md); font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-3); }
.step .chip{ width:13px; height:13px; border-radius:50%; display:inline-block; }

.gauge{ display:flex; gap:6px; margin-top:var(--space-xl); }
.gauge span{ height:3px; flex:1; background:var(--rule); transition:background 300ms ease; }
.gauge span.is-on{ background:var(--ink); }
.scene-hint{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-3); margin-top:var(--space-lg); }

/* JSが動かないときは4版とも見えている状態にする(白紙にしない) */
.nojs-note{ display:none; }
html:not(.js) .nojs-note{ display:block; }
html:not(.js) .scene-sticky{ position:static; height:auto; min-height:0; padding:var(--space-2xl) 0; }
html:not(.js) .scene-copy{ position:static; min-height:0; display:grid; gap:var(--space-xl); }
html:not(.js) .step{ position:static; }

/* ------- 組み版が変わる帯(小さいC) ------- */
.swap{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:start; }
.swap-fig{ position:sticky; top:calc(var(--head-h) + var(--space-lg)); }
.swap-items > li{ list-style:none; padding:var(--space-xl) 0; border-top:1px solid var(--rule); transition:opacity 300ms ease; }
.swap-items{ margin:0; padding:0; }
.js .swap-items > li{ opacity:.34; }
.js .swap-items > li.is-on{ opacity:1; }
.fig-box{ position:relative; border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:#fff; }
.fig-box .swap-layer{ transition:opacity 380ms ease, transform 380ms ease; }
.js .fig-box{ aspect-ratio:4/3; }
.js .fig-box .swap-layer{ position:absolute; inset:0; opacity:0; transform:translateY(12px); }
.js .fig-box .swap-layer.is-on{ opacity:1; transform:none; }
.fig-box svg{ display:block; width:100%; height:100%; }
.swap-items h3{ font-size:1.15rem; margin-bottom:var(--space-sm); }
.swap-items p{ margin:0; color:var(--ink-2); }

/* ------- 札・格子 ------- */
.grid{ display:grid; gap:var(--space-xl); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.card{
  background:#fff; border:1px solid var(--rule); border-radius:12px; padding:var(--space-lg);
  box-shadow:var(--shadow-sm); transition:box-shadow 200ms ease, border-color 200ms ease;
  display:flex; flex-direction:column; gap:var(--space-sm);
}
a.card{ text-decoration:none; cursor:pointer; }
a.card:hover{ box-shadow:var(--shadow-lg); border-color:var(--ink); }
.card h3{ font-size:1.15rem; }
.card p{ margin:0; color:var(--ink-2); font-size:15px; }
.card .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--shu); }
.card .go{ margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink-3); }
.card figure{ margin:0 0 var(--space-sm); }

.panel{ background:var(--paper-2); border-radius:12px; padding:var(--space-xl); border:1px solid var(--rule); }

/* ------- 表 ------- */
.table-scroll{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:15px; }
th,td{ border-bottom:1px solid var(--rule); padding:12px var(--space-md); text-align:left; vertical-align:top; }
th{ font-family:var(--mincho); white-space:nowrap; background:var(--paper-2); }
caption{ text-align:left; font-size:13px; color:var(--ink-3); padding-bottom:var(--space-sm); }

/* ------- 沿革 ------- */
.years{ margin:0; padding:0; list-style:none; }
.years li{ display:grid; grid-template-columns:110px 1fr; gap:var(--space-lg); padding:var(--space-md) 0; border-top:1px solid var(--rule); }
.years b{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--shu); }

/* ------- よくある質問 ------- */
details{ border-bottom:1px solid var(--rule); padding:var(--space-md) 0; }
summary{ cursor:pointer; font-family:var(--mincho); font-size:1.02rem; font-weight:700; list-style:none; display:flex; gap:var(--space-md); align-items:flex-start; transition:color 200ms ease; }
summary::-webkit-details-marker{ display:none; }
summary::before{ content:"＋"; color:var(--shu); font-family:var(--mono); }
details[open] summary::before{ content:"−"; }
summary:hover{ color:var(--shu); }
details p{ margin:var(--space-md) 0 0 28px; color:var(--ink-2); }

/* ------- 相談の紙 ------- */
form{ display:grid; gap:var(--space-lg); max-width:640px; }
label{ display:grid; gap:6px; font-size:14px; }
.req{ color:var(--shu); font-size:11px; font-family:var(--mono); letter-spacing:.14em; }
.input{ padding:12px 16px; border:1px solid var(--rule); border-radius:8px; font-size:16px; font-family:inherit; background:#fff; color:var(--ink); transition:border-color 200ms ease, box-shadow 200ms ease; }
.input:focus{ border-color:var(--ink); outline:none; box-shadow:0 0 0 3px rgba(200,68,46,.18); }
textarea.input{ min-height:150px; resize:vertical; }
.form-note{ font-size:13px; color:var(--ink-3); }

/* ------- 脚 ------- */
.site-foot{ border-top:1px solid var(--rule); background:var(--paper-2); padding:var(--space-3xl) 0 var(--space-xl); margin-top:var(--space-3xl); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-2xl); }
.foot-grid h4{ font-size:14px; margin-bottom:var(--space-md); }
.foot-nav{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot-nav a{ text-decoration:none; font-size:14px; color:var(--ink-2); transition:color 200ms ease; cursor:pointer; }
.foot-nav a:hover{ color:var(--shu); }
.disclaimer{ margin-top:var(--space-2xl); padding-top:var(--space-lg); border-top:1px solid var(--rule); font-size:12.5px; color:var(--ink-3); line-height:1.85; }
.disclaimer b{ color:var(--ink-2); }

/* ------- パンくず ------- */
.crumbs{ font-size:13px; color:var(--ink-3); padding-top:var(--space-lg); }
.crumbs a{ text-decoration:none; transition:color 200ms ease; }
.crumbs a:hover{ color:var(--shu); }

/* ------- 画面幅 ------- */
@media (max-width:1024px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .g3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav{
    position:absolute; left:0; right:0; top:var(--head-h); flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); border-bottom:1px solid var(--rule); padding:var(--space-sm) var(--space-lg) var(--space-lg);
    box-shadow:var(--shadow-lg);
  }
  .nav[hidden]{ display:none; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--rule); font-size:15px; }
  .nav-toggle{ display:inline-flex; }
  .scene-sticky{ grid-template-columns:1fr; gap:var(--space-lg); align-items:start; padding-top:var(--space-lg); }
  .sheet{ width:min(62%,300px); }
  .scene-copy{ min-height:290px; }
  .scene-hint{ margin-top:var(--space-md); }
  .swap{ grid-template-columns:1fr; }
  .swap-fig{ position:static; }
  .g2,.g3{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .years li{ grid-template-columns:1fr; gap:2px; }
}
@media (max-width:420px){
  body{ font-size:15.5px; }
  section{ padding:var(--space-2xl) 0; }
  .wrap{ width:calc(100% - 2*var(--space-md)); }
  .sheet{ width:min(46%,190px); }
  .scene-copy{ min-height:272px; }
  .step p{ font-size:14.5px; line-height:1.75; }
  .step h3{ font-size:1.2rem; }
  .scene-sticky{ min-height:0; height:calc(100vh - var(--head-h)); align-content:center; }
  .btn{ width:100%; justify-content:center; }
}

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

@media print{
  .site-head,.nav-toggle{ position:static; }
  .js .plate,.js .step{ opacity:1 !important; transform:none !important; }
}