/*
Theme Name: 三味線 糸園堂
Theme URI: https://itoendo.jp/
Author: 株式会社みらい編集
Author URI: https://itoendo.jp/
Description: 三味線の道具と手入れを解説する情報サイトのためのクラシックテーマ。太さの違う三本の糸（一の糸・二の糸・三の糸）を罫の体系として使い、胴＝暗い地／皮＝明るい面という素材の構造をそのままレイアウトに写した。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itoendo
Tags: one-column, custom-menu, editor-style, translation-ready
*/

/* ==========================================================================
   糸園堂 — 設計メモ
   地  = 胴（漆黒に紅を含む黒）。このサイトの主役。
   面  = 皮（胴に張られた面）。記事はここに載る＝読むための明るい面。
   罫  = 糸。太さの違う三本（3px / 1.75px / 0.75px）。装飾ではなく構造。
        一の糸=太い=低い=土台 / 二の糸=中 / 三の糸=細い=高い=最初に切れる
        この三分割は棹（太棹・中棹・細棹）にもジャンルにも一致する。
   動  = サワリ（減衰する余韻）。張って、弾いて、減衰する。
   ========================================================================== */

:root{
  /* 胴 — 黒。ニュートラルな黒ではなく紅を含む黒 */
  --dou:      #17100f;
  --dou-2:    #211715;
  --dou-3:    #2e211d;
  /* 皮 — 張られた皮。温かいクリームではなく、やや冷たいアイボリー */
  --kawa:     #e8e4d6;
  --kawa-2:   #d8d2bf;
  --kawa-3:   #f2efe6;
  /* 墨 — 皮の上の文字 */
  --sumi:     #241d19;
  --muted:    #5f5648;
  --muted-d:  #a2937a;
  /* 紅木 — 棹の材。テラコッタではない、暗く沈んだ赤褐 */
  --koki:     #7c2e26;
  --koki-lt:  #a8574a;
  /* 金茶 — 糸の色。線にのみ使う。塗らない */
  --kincha:   #b98c4a;
  --kincha-p: #dcbe86;

  --focus:    var(--koki);

  --ito-1: 3px;      /* 一の糸 */
  --ito-2: 1.75px;   /* 二の糸 */
  --ito-3: 0.75px;   /* 三の糸 */

  --maxw: 1160px;
  --readw: 720px;    /* 本文幅 */

  /* motion.csv 由来の設計値（GSAPは使わずCSSに写す） */
  --e-out1: cubic-bezier(.33,1,.68,1);   /* ≒ power1.out */
  --e-out2: cubic-bezier(.22,1,.36,1);   /* ≒ power2.out */
  --t-hover: 160ms;                       /* #1 Hover Subtle 150-200ms */
  --t-rev: 380ms;                         /* #4 Scroll Reveal Subtle 300-400ms */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--dou);
  color:var(--kawa);
  font-family:"Murecho","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;
  font-weight:700;
  line-height:1.44;
  margin:0;
}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
ul,ol{margin:0}

:focus-visible{
  outline:2.5px solid var(--focus);
  outline-offset:3px;
  border-radius:1px;
}
::selection{background:var(--koki);color:#fff}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--kawa);color:var(--sumi);
  padding:12px 18px;font-weight:700;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --------------------------------------------------------------------------
   糸三本 — このサイトの罫。三本で一組。太さが降りていく。
   -------------------------------------------------------------------------- */
.ito3{display:block;padding:0;margin:0}
.ito3 i{
  display:block;
  background:var(--kincha);
  opacity:.5;
  transform-origin:left center;
}
.ito3 i:nth-child(1){height:var(--ito-1);opacity:.62}
.ito3 i:nth-child(2){height:var(--ito-2);margin-top:7px;opacity:.44}
.ito3 i:nth-child(3){height:var(--ito-3);margin-top:7px;opacity:.3}
.on-kawa .ito3 i{background:var(--koki)}
.on-kawa .ito3 i:nth-child(1){opacity:.85}
.on-kawa .ito3 i:nth-child(2){opacity:.5}
.on-kawa .ito3 i:nth-child(3){opacity:.3}

/* --------------------------------------------------------------------------
   ヘッダー — 胴
   -------------------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(23,16,15,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(185,140,74,.22);
}
.head-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:66px;flex-wrap:wrap;padding-block:10px;
}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;flex:none}
.brand-mark{
  font-family:"Zen Old Mincho",serif;font-weight:900;
  font-size:23px;letter-spacing:.16em;color:var(--kawa);
}
.brand-mark em{font-style:normal;color:var(--kincha)}
.brand-sub{font-size:10px;letter-spacing:.26em;color:var(--muted-d);font-weight:500}

.head-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.head-nav a{
  display:inline-block;text-decoration:none;
  font-size:13.5px;font-weight:500;color:var(--kawa);
  padding-bottom:3px;position:relative;
}
.head-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--ito-2);background:var(--kincha);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-hover) var(--e-out1);
}
.head-nav a:hover::after,
.head-nav .current-menu-item > a::after{transform:scaleX(1)}

/* --------------------------------------------------------------------------
   ヒーロー — 糸を張り、弾く。このページの主張。
   -------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, #2a1c19 0%, transparent 58%),
    linear-gradient(172deg,#1d1412 0%, var(--dou) 55%, #1a1211 100%);
  padding-block:clamp(56px,10vw,104px) clamp(48px,8vw,86px);
}
.hero-eyebrow{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:12.5px;letter-spacing:.3em;color:var(--kincha);
  margin-bottom:24px;
}
.hero h1{
  font-size:clamp(32px,7.4vw,86px);
  font-weight:900;
  line-height:1.16;
  letter-spacing:.02em;
  color:#fff;
}
.hero h1 em{font-style:normal;color:var(--kincha-p)}
.hero-lead{
  margin-top:26px;max-width:33em;
  font-size:15.5px;color:#ddd2be;
}
.hero-lead b{color:var(--kincha-p);font-weight:700}

/* 三本の糸 — 定義リスト。飾りではなく事実を並べている */
.sangen{
  margin:clamp(38px,6vw,62px) 0 0;
  padding:0;list-style:none;
  display:grid;
  gap:clamp(16px,2.4vw,22px);
}
.sangen-row{
  display:grid;
  grid-template-columns:5.2em minmax(90px,1fr) auto;
  align-items:center;
  gap:clamp(12px,2vw,24px);
  margin:0;
}
.sangen-name{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:clamp(15px,1.9vw,19px);
  letter-spacing:.1em;color:var(--kawa);
  white-space:nowrap;
}
.sangen-line{
  position:relative;height:14px;display:block;
  transform-origin:left center;
}
.sangen-line::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  translate:0 -50%;
  background:linear-gradient(90deg,var(--kincha-p),var(--kincha) 42%,#8a6631);
  box-shadow:0 0 7px rgba(185,140,74,.3);
}
.sangen-row:nth-child(1) .sangen-line::before{height:var(--ito-1)}
.sangen-row:nth-child(2) .sangen-line::before{height:var(--ito-2)}
.sangen-row:nth-child(3) .sangen-line::before{height:var(--ito-3)}
.sangen-role{
  margin:0;font-size:13px;color:var(--muted-d);
  letter-spacing:.05em;white-space:nowrap;
}
.sangen-role b{color:var(--kawa);font-weight:700}

/* --------------------------------------------------------------------------
   セクション（胴の上）
   -------------------------------------------------------------------------- */
.band{padding-block:clamp(56px,8vw,92px)}
/* 同じ地色が続くときに余白を二重に取らない（境目が無いのに間だけ空く） */
.band-dou + .band-dou{padding-top:0}
.band-kawa + .band-kawa{padding-top:0}
.band-kawa{
  background:var(--kawa);
  color:var(--sumi);
  --focus:var(--koki);
}
.band-dou{background:var(--dou);--focus:var(--kincha-p)}

.sec-head{max-width:40em;margin-bottom:clamp(30px,4vw,44px)}
.sec-head .ito3{margin-bottom:22px;max-width:132px}
.sec-eyebrow{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:12px;letter-spacing:.3em;margin-bottom:12px;
  color:var(--kincha);
}
.band-kawa .sec-eyebrow{color:var(--koki)}
.sec-head h2{font-size:clamp(24px,3.4vw,38px);letter-spacing:.02em}
.band-dou .sec-head h2{color:#fff}
.sec-head p{margin-top:14px;font-size:15px;color:var(--muted-d)}
.band-kawa .sec-head p{color:var(--muted)}

/* --------------------------------------------------------------------------
   棹の三分割 — 太棹＝一の糸、細棹＝三の糸。線の太さが事実と一致する。
   -------------------------------------------------------------------------- */
.sao-list{list-style:none;margin:0;padding:0}
.sao-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  align-items:start;
  padding-block:clamp(26px,3.6vw,36px);
  position:relative;
}
.sao-ito{
  position:absolute;left:0;right:0;top:0;
  background:var(--koki);
  transform-origin:left center;
}
.sao-item:nth-child(1) .sao-ito{height:var(--ito-1)}
.sao-item:nth-child(2) .sao-ito{height:var(--ito-2)}
.sao-item:nth-child(3) .sao-ito{height:var(--ito-3)}

.sao-kanji{
  font-family:"Zen Old Mincho",serif;font-weight:900;
  font-size:clamp(30px,5.2vw,58px);
  line-height:1.05;color:var(--koki);
  letter-spacing:.04em;
  white-space:nowrap; /* 太/棹 と割れると意味が壊れる */
}
.sao-yomi{
  display:block;margin-top:8px;
  font-family:"Murecho",sans-serif;font-weight:500;
  font-size:11.5px;letter-spacing:.22em;color:var(--muted);
}
.sao-body h3{font-size:clamp(17px,2.1vw,21px);color:var(--sumi)}
.sao-genre{
  display:inline-block;margin-bottom:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--koki);
}
.sao-body p{margin-top:10px;font-size:14.5px;color:#3f362d;max-width:36em}
.sao-links{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 18px;
}
.sao-links a{
  font-size:13.5px;font-weight:700;color:var(--sumi);
  text-decoration:none;padding-bottom:2px;
  border-bottom:var(--ito-2) solid var(--koki);
  transition:color var(--t-hover) var(--e-out1);
}
.sao-links a:hover{color:var(--koki)}
.sao-none{
  margin-top:14px;font-size:12.5px;color:var(--muted);
  letter-spacing:.04em;
}

/* --------------------------------------------------------------------------
   記事の列 — 2本でも30本でも崩れない「列」。格子にしない。
   -------------------------------------------------------------------------- */
.rows{list-style:none;margin:0;padding:0}
.row{position:relative}
.row-ito{
  position:absolute;left:0;right:0;top:0;height:var(--ito-2);
  background:var(--kawa-2);
  transform-origin:left center;
  pointer-events:none;
}
.band-dou .row-ito{background:rgba(185,140,74,.26)}
.row-a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:clamp(14px,3vw,40px);
  padding-block:clamp(22px,3vw,30px);
  text-decoration:none;
  transition:transform var(--t-hover) var(--e-out1);
}
.row-main{display:block;min-width:0}
.row-title{
  display:block;
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:clamp(18px,2.3vw,25px);
  line-height:1.5;
  color:var(--sumi);
  transition:color var(--t-hover) var(--e-out1);
}
.band-dou .row-title{color:var(--kawa)}
.row-ex{
  display:block;
  margin-top:9px;font-size:13.5px;line-height:1.85;
  color:var(--muted);max-width:44em;
}
.band-dou .row-ex{color:var(--muted-d)}
.row-date{
  font-family:"Murecho",sans-serif;font-weight:500;
  font-size:11.5px;letter-spacing:.16em;color:var(--muted);
  white-space:nowrap;flex:none;
}
.band-dou .row-date{color:var(--muted-d)}
.row-a:hover .row-title{color:var(--koki)}
.band-dou .row-a:hover .row-title{color:var(--kincha-p)}
.row-a:hover{transform:translateX(2px)}
.row:last-child::after{
  content:"";display:block;height:var(--ito-3);background:var(--kawa-2);
}
.band-dou .row:last-child::after{background:rgba(185,140,74,.26)}

.rows-empty{
  border-top:var(--ito-2) solid var(--kawa-2);
  padding-top:26px;font-size:14.5px;color:var(--muted);
}

.more{margin-top:36px}
.more a{
  display:inline-block;text-decoration:none;
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:14.5px;letter-spacing:.14em;color:var(--sumi);
  padding-bottom:5px;
  border-bottom:var(--ito-1) solid var(--koki);
  transition:color var(--t-hover) var(--e-out1),letter-spacing var(--t-hover) var(--e-out1);
}
.more a:hover{color:var(--koki);letter-spacing:.2em}
.band-dou .more a{color:var(--kawa);border-bottom-color:var(--kincha)}
.band-dou .more a:hover{color:var(--kincha-p)}

/* --------------------------------------------------------------------------
   立場 — この編集部が何であり、何でないか
   -------------------------------------------------------------------------- */
.stance{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,64px);
  align-items:start;
}
.stance h2{font-size:clamp(22px,3vw,32px);color:#fff;line-height:1.5}
.stance .ito3{margin-bottom:22px;max-width:132px}
.stance p{margin-top:16px;font-size:15px;color:#ddd2be;max-width:34em}
.stance-note{
  border-left:var(--ito-1) solid var(--koki-lt);
  padding:4px 0 4px 20px;
}
.stance-note p{margin-top:0;font-size:14.5px;color:var(--muted-d)}
.stance-note p + p{margin-top:12px}
.stance-note b{color:var(--kawa);font-weight:700}

/* --------------------------------------------------------------------------
   記事本文 — 皮の上。読むための面。
   -------------------------------------------------------------------------- */
.article-wrap{background:var(--kawa);color:var(--sumi);--focus:var(--koki)}
.article-head{
  max-width:var(--readw);margin-inline:auto;
  padding:clamp(44px,7vw,76px) 22px clamp(26px,3.5vw,34px);
}
.article-head .ito3{margin-bottom:26px;max-width:112px}
.article-meta{
  font-family:"Murecho",sans-serif;font-weight:500;
  font-size:11.5px;letter-spacing:.18em;color:var(--muted);
  margin-bottom:14px;
}
.article-head h1{
  font-size:clamp(26px,4.2vw,42px);
  font-weight:900;line-height:1.42;letter-spacing:.01em;
}

.article-thumb{
  max-width:var(--maxw);margin:0 auto clamp(30px,4vw,44px);
  padding-inline:22px;
}
.article-thumb img{width:100%}

.entry-content{
  max-width:var(--readw);margin-inline:auto;
  padding:0 22px clamp(50px,7vw,80px);
  font-size:16px;line-height:1.92;
}
.entry-content > * + *{margin-top:1.5em}
.entry-content p{color:#332b24}
.entry-content strong{font-weight:700;color:var(--koki)}
.entry-content em{font-style:normal;background:linear-gradient(transparent 62%, rgba(185,140,74,.4) 62%)}

/* 見出し — 前に糸三本を渡す。1.9行間の本文を確実に切る。 */
.entry-content h2{
  font-size:clamp(20px,2.6vw,27px);
  font-weight:900;letter-spacing:.02em;
  margin-top:2.9em;padding-top:28px;
  position:relative;
}
.entry-content h2::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:var(--ito-1);
  background:var(--koki);opacity:.85;
}
.entry-content h2::after{
  content:"";position:absolute;left:0;top:calc(var(--ito-1) + 6px);width:52%;height:var(--ito-3);
  background:var(--koki);opacity:.32;
}
.entry-content h3{
  font-size:clamp(16.5px,2vw,20px);
  margin-top:2.2em;padding-left:14px;
  border-left:var(--ito-1) solid var(--kincha);
}
.entry-content h4{font-size:16px;margin-top:1.9em;color:var(--koki)}

/* 全記事が「結論：」で始まる。最初のH2直後の段落は判決文として扱う。 */
.entry-content > h2:first-of-type{margin-top:.6em}
.entry-content > h2:first-of-type + p{
  font-size:17.5px;line-height:1.86;font-weight:500;
  color:#2b241e;
  background:var(--kawa-3);
  border-left:var(--ito-1) solid var(--koki);
  padding:22px 24px;
  margin-top:1.2em;
}

.entry-content a{
  color:var(--koki);font-weight:700;
  text-decoration:none;
  border-bottom:var(--ito-2) solid rgba(124,46,38,.35);
  transition:border-color var(--t-hover) var(--e-out1);
}
.entry-content a:hover{border-bottom-color:var(--koki)}

.entry-content ul,
.entry-content ol{padding-left:0;list-style:none}
.entry-content li + li{margin-top:.7em}
.entry-content ul > li{position:relative;padding-left:1.5em}
.entry-content ul > li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:12px;height:var(--ito-2);background:var(--kincha);
}
/* 番号付きは実際に手順（調弦・糸の張り替え・張り替え依頼）のときだけ出る */
.entry-content ol{counter-reset:step}
.entry-content ol > li{position:relative;padding-left:2.5em;counter-increment:step}
.entry-content ol > li::before{
  content:counter(step);
  position:absolute;left:0;top:.1em;
  font-family:"Zen Old Mincho",serif;font-weight:900;font-size:15px;
  width:1.7em;height:1.7em;
  display:flex;align-items:center;justify-content:center;
  color:var(--kawa-3);background:var(--koki);
}

.entry-content blockquote{
  margin-inline:0;padding:6px 0 6px 22px;
  border-left:var(--ito-1) solid var(--kincha);
  color:var(--muted);
}

/* 表 — 30本中24本にある。このサイトの実質的な主役。 */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content table{
  border-collapse:collapse;width:100%;
  font-size:14px;line-height:1.7;
  background:var(--kawa-3);
}
/* 包まれている時だけ最低幅を持たせる（糸の太さ早見表は6列ある） */
.tbl-scroll > table{min-width:520px}
/* JSが動かなかった場合の逃げ道。表がページごと横に伸びるのを止める。
   app.js が .tbl-scroll で包んだ時点で親が変わり、この指定は自動的に外れる。 */
.entry-content > table{display:block;overflow-x:auto;max-width:100%}
.entry-content th,
.entry-content td{
  padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--kawa-2);
}
.entry-content thead th{
  background:var(--dou);color:var(--kincha-p);
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:13px;letter-spacing:.08em;
  border-bottom:none;white-space:nowrap;
}
.entry-content tbody th{font-weight:700;color:var(--koki);white-space:nowrap}
.entry-content tbody tr:last-child th,
.entry-content tbody tr:last-child td{border-bottom:var(--ito-2) solid var(--koki)}

.entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;background:var(--kawa-3);padding:2px 6px;
}
.entry-content hr{
  border:none;height:var(--ito-3);background:var(--kawa-2);margin-block:2.4em;
}
.entry-content img,
.entry-content figure{margin-inline:0}
.entry-content figcaption{
  margin-top:8px;font-size:12.5px;color:var(--muted);
}
.entry-content .wp-caption-text{font-size:12.5px;color:var(--muted)}
.entry-content .alignleft{float:left;margin:0 1.5em .6em 0}
.entry-content .alignright{float:right;margin:0 0 .6em 1.5em}
.entry-content .aligncenter{margin-inline:auto}

.article-foot{
  max-width:var(--readw);margin-inline:auto;
  padding:0 22px clamp(50px,7vw,80px);
}
.article-foot .ito3{margin-bottom:24px}
.article-foot p{font-size:13.5px;color:var(--muted)}

/* 前後の記事 */
.pn{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--kawa-2);
  margin-top:34px;
}
.pn a{
  background:var(--kawa);padding:22px 20px;text-decoration:none;
  transition:background var(--t-hover) var(--e-out1);
}
.pn a:hover{background:var(--kawa-3)}
.pn span{
  display:block;font-size:11px;letter-spacing:.2em;
  color:var(--koki);font-weight:700;margin-bottom:8px;
}
.pn b{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:14.5px;line-height:1.6;color:var(--sumi);
}
.pn .pn-next{text-align:right}
/* 片方しか無いときに空セルを出さない */
.pn:has(a:only-child){grid-template-columns:1fr}
.tbl-scroll:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}

/* 固定ページ */
.page-content{max-width:var(--readw);margin-inline:auto}

/* 検索フォーム */
.searchform{display:flex;gap:0;max-width:420px;margin-top:22px}
.searchform input[type="search"]{
  flex:1;min-width:0;font:inherit;font-size:14.5px;
  padding:12px 14px;color:var(--sumi);background:var(--kawa-3);
  border:1px solid var(--kawa-2);border-right:none;border-radius:0;
}
.searchform button{
  border:none;border-radius:0;cursor:pointer;
  background:var(--koki);color:#fff;
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:14px;letter-spacing:.1em;padding:12px 20px;
  transition:background var(--t-hover) var(--e-out1);
}
.searchform button:hover{background:var(--koki-lt)}

/* ページ送り */
.pager{margin-top:44px;display:flex;gap:8px;flex-wrap:wrap}
.pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;
  text-decoration:none;font-weight:700;font-size:14px;
  color:var(--sumi);border:1px solid var(--kawa-2);
  transition:background var(--t-hover) var(--e-out1),color var(--t-hover) var(--e-out1);
}
.pager .page-numbers:hover{background:var(--kawa-3)}
.pager .page-numbers.current{background:var(--koki);color:#fff;border-color:var(--koki)}

/* 404 */
.nf{max-width:var(--readw);margin-inline:auto;text-align:left}
.nf h1{font-size:clamp(26px,4vw,40px);color:#fff}
.nf p{margin-top:18px;color:var(--muted-d);font-size:15px}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.site-foot{background:var(--dou-2);padding-block:clamp(44px,6vw,64px) 26px;--focus:var(--kincha-p)}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(24px,4vw,48px);
  padding-bottom:30px;
}
.foot-top .ito3{margin-bottom:22px;max-width:96px}
.foot-desc{margin-top:14px;font-size:13px;color:var(--muted-d);max-width:32em}
.foot-nav h2{
  font-family:"Zen Old Mincho",serif;font-size:12px;
  letter-spacing:.24em;color:var(--kincha);margin-bottom:14px;font-weight:700;
}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li + li{margin-top:6px}
.foot-nav a{
  font-size:13.5px;color:var(--kawa);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--t-hover) var(--e-out1);
}
.foot-nav a:hover{border-bottom-color:var(--kincha)}
.foot-legal{
  border-top:1px solid rgba(185,140,74,.2);
  padding-top:20px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11.5px;color:var(--muted-d);letter-spacing:.06em;
}

/* ==========================================================================
   モーション — サワリ（減衰する余韻）
   一箇所に賭ける：ヒーローで糸を張り、順に弾く。あとは静かにする。
   数値は motion.csv から流用（GSAPは読み込まない）
   ========================================================================== */

/* 張る — #5 Scroll Reveal Standard の 400-600ms / power2.out を転用 */
@keyframes ito-haru{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
/* 弾く — サワリ。振幅が減衰しながら消える。ぼけも一緒に減る。 */
@keyframes ito-hajiku{
  0%   {transform:translateY(0);      filter:blur(0)}
  6%   {transform:translateY(-3.4px); filter:blur(.9px)}
  17%  {transform:translateY(2.7px);  filter:blur(.7px)}
  29%  {transform:translateY(-2px);   filter:blur(.5px)}
  42%  {transform:translateY(1.4px);  filter:blur(.35px)}
  55%  {transform:translateY(-.9px);  filter:blur(.2px)}
  68%  {transform:translateY(.55px);  filter:blur(.1px)}
  81%  {transform:translateY(-.3px);  filter:blur(0)}
  92%  {transform:translateY(.12px)}
  100% {transform:translateY(0);      filter:blur(0)}
}
/* ロード時のテキスト — #7 Stagger List Subtle 250-350ms / power1.out / y8 */
@keyframes rise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.js .hero-eyebrow,
.js .hero h1,
.js .hero-lead{opacity:0}
.js .sangen-name,
.js .sangen-role{opacity:0}
/* JSがある時だけ「まだ張られていない」状態から始める。無ければ最初から張ってある。 */
.js .sangen-line{transform:scaleX(0)}

.loaded .hero-eyebrow{animation:rise 320ms var(--e-out1) .04s both}
.loaded .hero h1     {animation:rise 320ms var(--e-out1) .10s both}
.loaded .hero-lead   {animation:rise 320ms var(--e-out1) .16s both}

/* 糸：張る → 弾く。一の糸から順に。stagger 110ms（#8 Stagger List Standard 相当） */
.loaded .sangen-row:nth-child(1) .sangen-line{animation:ito-haru 460ms var(--e-out2) .30s both, ito-hajiku 1300ms var(--e-out1) .76s both}
.loaded .sangen-row:nth-child(2) .sangen-line{animation:ito-haru 460ms var(--e-out2) .41s both, ito-hajiku 1300ms var(--e-out1) .87s both}
.loaded .sangen-row:nth-child(3) .sangen-line{animation:ito-haru 460ms var(--e-out2) .52s both, ito-hajiku 1300ms var(--e-out1) .98s both}
.loaded .sangen-row:nth-child(1) .sangen-name,
.loaded .sangen-row:nth-child(1) .sangen-role{animation:rise 300ms var(--e-out1) .40s both}
.loaded .sangen-row:nth-child(2) .sangen-name,
.loaded .sangen-row:nth-child(2) .sangen-role{animation:rise 300ms var(--e-out1) .51s both}
.loaded .sangen-row:nth-child(3) .sangen-name,
.loaded .sangen-row:nth-child(3) .sangen-role{animation:rise 300ms var(--e-out1) .62s both}

/* スクロールリベール — #4 Scroll Reveal Subtle 300-400ms / power1.out / y12 */
.js .reveal{opacity:0;transform:translateY(12px)}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity var(--t-rev) var(--e-out1), transform var(--t-rev) var(--e-out1);
}
.js .reveal-stagger > *{opacity:0;transform:translateY(12px)}
.reveal-stagger.in > *{
  opacity:1;transform:none;
  transition:opacity var(--t-rev) var(--e-out1), transform var(--t-rev) var(--e-out1);
}
/* stagger 60ms・8個まで（motion.csv: 8個を超えると最後がもたつく） */
.reveal-stagger.in > *:nth-child(2){transition-delay:.06s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.18s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.30s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.36s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.42s}

/* 糸三本の罫がスクロールで張られる */
.js .ito3.reveal i{transform:scaleX(0)}
.ito3.reveal.in i{transition:transform 460ms var(--e-out2)}
.ito3.reveal.in i{transform:scaleX(1)}
.ito3.reveal.in i:nth-child(2){transition-delay:.08s}
.ito3.reveal.in i:nth-child(3){transition-delay:.16s}

/* ホバー — #1 Hover Micro-interaction Subtle。糸に触れたら鳴る。 */
.row:hover .row-ito,
.row:focus-within .row-ito{
  background:var(--kincha);
  animation:ito-hajiku 900ms var(--e-out1);
}
.sao-item:hover .sao-ito,
.sao-item:focus-within .sao-ito{animation:ito-hajiku 900ms var(--e-out1)}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .stance{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .row-a{grid-template-columns:1fr;gap:10px}
  .row-date{order:-1}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .head-in{min-height:58px}
  .sangen-row{grid-template-columns:4.6em minmax(40px,1fr);row-gap:6px}
  .sangen-role{grid-column:1 / -1;white-space:normal;font-size:12.5px}
  .sao-item{grid-template-columns:1fr;gap:14px}
  .pn{grid-template-columns:1fr}
  .pn .pn-next{text-align:left}
  .entry-content{font-size:15.5px;line-height:1.9}
  .entry-content > h2:first-of-type + p{padding:18px 18px;font-size:16px}
}
@media (max-width:380px){
  .wrap{padding-inline:16px}
  .brand-sub{display:none}
  .head-nav ul{gap:14px}
  .entry-content{padding-inline:16px}
  .article-head{padding-inline:16px}
  .article-foot{padding-inline:16px}
}

/* --------------------------------------------------------------------------
   動きを減らす設定を尊重する
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  /* 動きは全部止める。duration を詰めるのではなく、そもそも走らせない。
     アニメーションが生きていると、その fill 状態が下の指定より強く出るため。 */
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  /* 止めた分、最初から完成形で見せる。
     セレクタの詳細度は打ち消す相手（.js …）と必ず同じか上に合わせること。
     .sangen-line だけ .js .sangen-line に負けて糸が消えていた。 */
  .js .hero-eyebrow,
  .js .hero h1,
  .js .hero-lead,
  .js .sangen-name,
  .js .sangen-role,
  .js .reveal,
  .js .reveal-stagger > *{opacity:1;transform:none}
  .js .sangen-line,
  .js .ito3 i,
  .js .ito3.reveal i,
  .ito3.reveal.in i{transform:scaleX(1)}
  .row-a:hover{transform:none}
}