/* ============================================
   航路（こうろ） — shared stylesheet
   Palette: 炭(ink) / 緑青真鍮(brass-green) / 錆朱(rust) / 古紙(parchment)
   Motif: 羅針盤・海図（自分で航路を引く）
   ============================================ */
:root{
  --ink: #221D18;
  --ink-deep: #17130F;
  --parchment: #E8DFC8;
  --parchment-raised: #F4EEDE;
  --paper-white: #FBF8F1;
  --brass-green: #6B8F7C;
  --brass-green-light: #9CB8A9;
  --rust: #C1652E;
  --rust-light: #DD8853;
  --text-dark: #2A2420;
  --text-soft: #5A5044;
  --line: #D8CDB0;
  --line-on-dark: rgba(232,223,200,0.16);
  --shadow-card: 0 4px 18px rgba(34,29,24,0.07);
  --shadow-card-hover: 0 10px 26px rgba(34,29,24,0.13);

  --font-display: "Zen Old Mincho", serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --maxw: 1160px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background: var(--parchment-raised); color: var(--text-dark);
  font-family: var(--font-body); font-size: 17.5px; line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline: 2.5px solid var(--rust); outline-offset:3px; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding:0 32px; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; color: var(--ink); line-height:1.5; margin:0 0 .6em; }
p{ margin:0 0 1.3em; }

/* nav */
.nav{ background: var(--ink-deep); color: var(--parchment); border-bottom:1px solid var(--line-on-dark); position:sticky; top:0; z-index:50; }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.brand{ font-family: var(--font-display); font-size:19px; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--parchment); }
.brand .dot{ width:8px; height:8px; border-radius:50%; background: var(--rust); flex:none; }
.navlinks{ display:flex; gap:28px; font-size:14px; }
.navlinks a{ color: rgba(232,223,200,0.8); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; }
.navlinks a:hover{ color: var(--rust-light); border-color: var(--rust-light); }

/* hero */
.hero{
  background: radial-gradient(ellipse at 78% 45%, rgba(107,143,124,0.14) 0%, transparent 55%), linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--parchment); padding: 92px 0 104px; position:relative; overflow:hidden;
}
.hero .wrap{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:60px; align-items:center; position:relative; z-index:2; }
.eyebrow{ font-family: var(--font-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--brass-green-light); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:22px; height:1px; background: var(--brass-green-light); }
.hero h1{ font-size: clamp(30px,4vw,46px); color: var(--parchment); margin-bottom:.55em; }
.hero h1 .accent{ color: var(--rust-light); }
.hero p.lead{ font-size:17px; color: rgba(232,223,200,0.78); max-width:46ch; margin:0 0 34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 28px; font-weight:700; font-size:15px; text-decoration:none; border-radius:2px; border:1px solid transparent; cursor:pointer; transition: background .18s ease, border-color .18s ease; font-family: var(--font-body); }
.btn-primary{ background: var(--rust); color: var(--paper-white); }
.btn-primary:hover{ background: var(--rust-light); }
.btn-ghost{ background:transparent; color: var(--parchment); border-color: var(--line-on-dark); }
.btn-ghost:hover{ border-color: var(--brass-green-light); }
.btn-outline{ background:transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--parchment); }

/* compass */
.compass-frame{ position:relative; aspect-ratio:1/1; max-width:400px; margin:0 auto; }
.compass-frame svg{ width:100%; height:100%; }
.label-tag{ position:absolute; font-family: var(--font-mono); font-size:11.5px; letter-spacing:.08em; color: var(--parchment); background: rgba(34,29,24,0.65); border:1px solid var(--brass-green); padding:5px 11px; border-radius:100px; white-space:nowrap; text-decoration:none; }
.label-tag:hover{ border-color: var(--rust-light); color: var(--rust-light); }
.lt-independent{ top:-4px; left:50%; transform:translateX(-50%); }
.lt-fc{ right:-8px; top:46%; }
.lt-global{ bottom:-4px; left:50%; transform:translateX(-50%); }
.lt-shop{ left:-8px; top:46%; }

/* sections */
section{ padding: 84px 0; }
.section-alt{ background: var(--paper-white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.kicker{ font-family: var(--font-mono); font-size:12.5px; letter-spacing:.14em; color: var(--rust); text-transform:uppercase; margin-bottom:16px; }
.section-head{ max-width: 66ch; margin-bottom: 46px; }
.section-head h2{ font-size: clamp(24px,3vw,32px); }
.section-head p{ color: var(--text-soft); margin:0; font-size:16.5px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.card{ background:#fff; border:1px solid var(--line); padding:32px 28px; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; }
.card.link-card{ text-decoration:none; display:block; color:inherit; }
.card.link-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--brass-green); }
.card .tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color: var(--brass-green); text-transform:uppercase; }
.card h3{ font-size:19px; margin: 10px 0 12px; }
.card p{ color: var(--text-soft); font-size:15px; margin:0; }

/* diagnosis widget (top page teaser + shindan page) */
.diag-panel{ background: linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%); color: var(--parchment); border-radius:2px; padding: 50px 46px; }
.diag-panel h2{ color: var(--parchment); }
.diag-q{ background: rgba(232,223,200,0.05); border:1px solid var(--line-on-dark); padding:26px 28px; margin-bottom:18px; }
.diag-q .qn{ font-family: var(--font-mono); font-size:12px; color: var(--brass-green-light); letter-spacing:.1em; margin-bottom:10px; }
.diag-q p.qtext{ font-size:16.5px; margin:0 0 16px; color: var(--parchment); }
.diag-opts{ display:flex; flex-direction:column; gap:10px; }
.diag-opt{ display:block; }
.diag-opt input{ display:none; }
.diag-opt span{ display:block; padding:13px 18px; border:1px solid var(--line-on-dark); font-size:14.5px; cursor:pointer; color: rgba(232,223,200,0.85); }
.diag-opt input:checked + span{ border-color: var(--rust); background: rgba(193,101,46,0.15); color: var(--parchment); }
.diag-result{ margin-top:30px; background: var(--paper-white); color: var(--text-dark); padding: 30px 30px; border-left:4px solid var(--rust); display:none; }
.diag-result.show{ display:block; }
.diag-result h3{ margin-top:0; }
.diag-result .route-name{ font-family: var(--font-mono); font-size:12px; letter-spacing:.12em; color: var(--rust); text-transform:uppercase; }

/* tables */
.doc-table{ width:100%; border-collapse:collapse; margin:0 0 30px; background:#fff; font-size:15.5px; }
.doc-table th,.doc-table td{ border:1px solid var(--line); padding:14px 18px; text-align:left; vertical-align:top; }
.doc-table th{ background: var(--ink); color: var(--parchment); font-family: var(--font-display); font-weight:700; }
.doc-table tbody tr:nth-child(even){ background: var(--parchment-raised); }
.table-scroll{ overflow-x:auto; margin-bottom:30px; }
.table-scroll .doc-table{ min-width:640px; margin-bottom:0; }

/* callouts */
.callout{ background: var(--parchment-raised); border-left:4px solid var(--brass-green); padding:20px 24px; margin:0 0 30px; font-size:15.5px; line-height:1.85; }
.callout.warn{ background:#F7ECE4; border-left-color: var(--rust); }
.callout a{ color: var(--rust); font-weight:700; }

/* steps */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps li{ position:relative; padding:0 0 32px 66px; counter-increment:step; border-left:1px solid var(--line); margin-left:22px; }
.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps li::before{ content: counter(step,decimal-leading-zero); position:absolute; left:-22px; top:-2px; width:44px; height:44px; background: var(--ink); color: var(--brass-green-light); font-family: var(--font-mono); font-size:12.5px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.steps h3{ margin:6px 0 8px; font-size:18.5px; }
.steps p{ color: var(--text-soft); font-size:15.5px; margin:0; }

/* article */
.article-hero{ background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%); color: var(--parchment); padding:56px 0 60px; }
.article-hero h1{ color: var(--parchment); font-size: clamp(25px,3.2vw,34px); }
.breadcrumb{ font-family: var(--font-mono); font-size:12.5px; color: rgba(232,223,200,0.55); margin-bottom:22px; letter-spacing:.03em; }
.breadcrumb a{ color: var(--brass-green-light); text-decoration:none; }
.topic-banner{ display:flex; align-items:center; gap:22px; }
.topic-icon{ width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; background: rgba(232,223,200,0.08); border:1px solid var(--brass-green); font-size:24px; }

.article-body{ max-width:760px; margin:0 auto; padding:64px 32px 84px; }
.article-body h2{ font-size:24px; margin-top:2em; padding-bottom:12px; border-bottom:1px solid var(--line); }
.article-body h2:first-child{ margin-top:0; }
.article-body h3{ font-size:18.5px; margin-top:1.8em; }
.article-body ul,.article-body ol{ padding-left:1.5em; margin:0 0 1.5em; }
.article-body li{ margin-bottom:.55em; }
.article-body a{ color: var(--rust); }
.updated{ font-family: var(--font-mono); font-size:12px; color: var(--text-soft); letter-spacing:.06em; margin-bottom:36px; }

.article-cta{ background: var(--ink); color: var(--parchment); padding:36px 34px; border-radius:2px; margin-top:58px; border-left:4px solid var(--rust); }
.article-cta h3{ color: var(--parchment); margin-top:0; }
.article-cta p{ color: rgba(232,223,200,0.75); font-size:15.5px; }

.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.art-card{ display:flex; flex-direction:column; gap:9px; background:#fff; border:1px solid var(--line); padding:28px 26px; text-decoration:none; color:inherit; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.art-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--brass-green); }
.art-card .tag{ align-self:flex-start; font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; background: var(--parchment-raised); color: var(--brass-green); border:1px solid var(--brass-green-light); padding:3px 11px; border-radius:100px; }
.art-card h3{ margin:5px 0 0; font-size:17.5px; }
.art-card p{ color: var(--text-soft); font-size:14.5px; margin:0; }

.route-head{ display:flex; align-items:baseline; gap:14px; margin: 64px 0 26px; }
.route-head:first-child{ margin-top:0; }
.route-head h2{ margin:0; font-size:22px; }
.route-head .rule{ flex:1; height:1px; background: var(--line); }

/* ad slot */
.ad-slot{ max-width:760px; margin:44px auto; padding:0 32px; }
.ad-slot .inner{ border:1px dashed var(--line); border-radius:2px; min-height:100px; display:flex; align-items:center; justify-content:center; color:#b7ac93; font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; background: var(--paper-white); }

/* footer */
.site-footer{ background: var(--ink-deep); color: var(--parchment); padding:64px 0 0; }
.site-footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:42px; padding-bottom:46px; }
.site-footer h4{ color: var(--brass-green-light); font-size:15px; font-family: var(--font-display); }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:10px; }
.site-footer a{ color: rgba(232,223,200,0.72); text-decoration:none; font-size:14px; }
.site-footer a:hover{ color: var(--rust-light); }
.footer-note{ border-top:1px solid var(--line-on-dark); padding:22px 32px 42px !important; color: rgba(232,223,200,0.5); font-size:12.5px; display:block !important; max-width: var(--maxw); }

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; gap:44px; }
  .grid-3,.grid-2,.grid-4,.art-grid{ grid-template-columns:1fr; }
  .site-footer .wrap{ grid-template-columns:1fr; gap:32px; }
  .diag-panel{ padding:36px 26px; }
}
@media (max-width:720px){
  body{ font-size:17px; }
  .nav .wrap{ height:auto; flex-direction:column; gap:12px; padding:16px 22px; }
  .navlinks{ gap:16px; flex-wrap:wrap; justify-content:center; font-size:13.5px; }
  section{ padding:60px 0; }
  .wrap{ padding:0 22px; }
  .article-body{ padding:44px 22px 64px; }
  .hero{ padding:56px 0 64px; }
  .nav{ position:static; }
}