/* ツギノテ — 共通デザインシステム（AXiS流レイアウト × ツギノテ配色） */
:root{
  --paper:#f4f1e8;
  --ink:#101010;
  --green:#0ac25a;
  --green-d:#0a8a44;
  --gray:rgba(128,128,128,.28);
  --sub:rgba(16,16,16,.55);
  --sub-l:rgba(244,241,232,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover{color:var(--green)}
::selection{background:var(--green);color:var(--ink)}
.mono{font-family:'JetBrains Mono',monospace}
.arcv{font-family:'Archivo',sans-serif}
.serif{font-family:'Shippori Mincho B1',serif}

/* ---- 垂直グリッド線（全ページ貫通） ---- */
.gridlines{position:fixed;inset:0;pointer-events:none;z-index:1;display:flex}
.gridlines span{flex:1;border-right:1px solid var(--gray)}
.gridlines span:first-child{border-left:1px solid var(--gray)}
main,.l-footer{position:relative;z-index:2}

/* ---- イントロ（円形回転テキスト → ロールアップ） ---- */
.intro{position:fixed;inset:0;background:var(--ink);z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .9s cubic-bezier(.8,0,.2,1)}
.intro.done{transform:translateY(-101%)}
.intro svg{width:120px;height:120px;animation:introSpin 6s linear infinite}
.intro svg text{fill:var(--paper);font-family:'Archivo',sans-serif;font-size:13.5px;letter-spacing:.35em}
@keyframes introSpin{to{transform:rotate(360deg)}}

/* ---- ヘッダー ---- */
.l-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;mix-blend-mode:normal}
.l-header .brand{font-weight:900;font-size:22px;letter-spacing:.02em}
.l-header .brand .dot{color:var(--green)}
.l-header .brandlogo{height:38px;display:block;transition:filter .2s}
.l-header.on-dark .brandlogo{filter:brightness(0) invert(.96)}
.l-header nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);font-size:13px;font-weight:500}
.l-header nav a{white-space:nowrap}
.l-header .pill{border:1px solid currentColor;padding:8px 18px;border-radius:999px;transition:background .2s,color .2s}
.l-header .pill:hover{background:var(--ink);color:var(--green);border-color:var(--ink)}
.l-header.on-dark{color:var(--paper)}
.l-header.on-dark nav a{color:var(--paper)}
.l-header.on-dark nav a:hover{color:var(--green)}
.l-header.on-dark .pill{border-color:var(--paper)}
.l-header.on-dark .pill:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---- セクション見出し（+ Label） ---- */
.sec-label{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:500;letter-spacing:.02em;margin:0}
.sec-label::before{content:"+";color:var(--green-d);font-weight:400;font-size:19px}
.sec-note{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--sub)}

/* ---- ピルボタン（View more） ---- */
.vbtn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--ink);border-radius:999px;padding:11px 10px 11px 26px;font-size:13.5px;font-weight:500;transition:background .3s,color .3s}
.vbtn .arr{width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:transform .3s}
.vbtn:hover{background:var(--ink);color:var(--paper)}
.vbtn:hover .arr{transform:translateX(4px)}

/* ---- 出現アニメーション（inview） ---- */
.rv{opacity:0;transform:translateY(44px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.08);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.rv-img.on img{transform:scale(1)}

/* ---- マーキー ---- */
@keyframes sigMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blinkSoft{0%,100%{opacity:1}50%{opacity:.2}}

/* ---- アーカイブ行（巨大連番） ---- */
.arow{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:52px 28px 46px;border-bottom:1px solid var(--gray);align-items:start;transition:background .25s,color .25s}
.arow:first-of-type{border-top:1px solid var(--gray)}
.arow .num{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(40px,4.4vw,58px);line-height:1;letter-spacing:.02em}
.arow .date{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--sub);margin-top:14px}
.arow .meta-top{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--sub);margin-bottom:26px}
.arow .ttl{font-weight:900;font-size:clamp(18px,2vw,25px);line-height:1.7}
.arow .tags{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--sub);margin-top:12px;display:flex;gap:14px;flex-wrap:wrap}
.arow:hover{background:var(--ink);color:var(--paper)}
.arow:hover .date,.arow:hover .meta-top,.arow:hover .tags{color:var(--sub-l)}
.arow:hover .ttl{color:var(--green)}

/* ---- 定義リスト行（Company風） ---- */
.defrow{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:26px 8px;border-bottom:1px solid var(--gray);font-size:14.5px;line-height:2}
.defrow dt{color:var(--sub);font-weight:500}
.defrow dd{margin:0}

/* ---- フッター ---- */
.l-footer{background:var(--ink);color:var(--paper);padding:96px 28px 28px;margin-top:0}
.l-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;align-items:start}
.l-footer .biglogo{font-weight:900;font-size:clamp(40px,5vw,64px);letter-spacing:.02em}
.l-footer .biglogo .dot{color:var(--green)}
.l-footer .flogo{height:clamp(56px,7vw,84px);display:block}
.l-footer .col-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--sub-l);margin-bottom:18px}
.l-footer .col a{display:block;font-size:14px;margin-bottom:12px}
.l-footer .base{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:88px;padding-top:22px;border-top:1px solid rgba(244,241,232,.25);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--sub-l)}

/* ---- モバイルナビ（ハンバーガー。要素はsite.jsが自動生成） ---- */
.menu-btn{display:none;background:none;border:none;padding:10px;cursor:pointer;color:inherit;z-index:101}
.menu-btn span{display:block;width:24px;height:2px;background:currentColor;transition:transform .3s,opacity .3s}
.menu-btn span+span{margin-top:5px}
.m-nav{position:fixed;inset:0;background:var(--ink);color:var(--paper);z-index:95;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:48px 40px;font-size:22px;font-weight:900;opacity:0;pointer-events:none;transition:opacity .3s}
.m-nav a{border:none !important;padding:0 !important}
.m-nav a:hover{color:var(--green)}
body.nav-open .m-nav{opacity:1;pointer-events:auto}
body.nav-open .menu-btn{color:var(--paper)}
body.nav-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .menu-btn span:nth-child(2){opacity:0}
body.nav-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open .l-header .brandlogo{filter:brightness(0) invert(.96)}

/* ---- レスポンシブ ---- */
@media(max-width:860px){
  .gridlines span:nth-child(3),.gridlines span:nth-child(4){display:none}
  .l-header nav{gap:12px;flex-wrap:wrap;justify-content:flex-end;font-size:12px}
  .arow{grid-template-columns:1fr;gap:6px;padding:38px 20px 34px}
  .arow .meta-top{margin-bottom:10px}
  .defrow{grid-template-columns:1fr;gap:4px}
  .l-footer .cols{grid-template-columns:1fr;gap:36px}
}
@media(max-width:760px){
  .l-header{padding:14px 18px}
  .l-header nav{display:none}
  .l-header .brandlogo{height:32px}
  .menu-btn{display:block}
  .l-footer{padding:64px 20px 20px}
  .l-footer .flogo{height:46px}
  .l-footer .col a{margin-bottom:10px;font-size:13.5px}
  .l-footer .base{margin-top:44px;flex-direction:column;align-items:flex-start;gap:10px}
}