/* Kituune site v2 - ribbon nav / hero / section layout
   Design tokens are declared inline in index.html (:root):
   --bg:#0B1220 --panel:#111A2E --line:#1E2A44 --text:#D7E0EE --sub:#8FA0B8 --mint:#4FD1C5 --orange:#E8833A
   No gold. No external fonts / libraries. All images are self-hosted under ./assets/
   (v3: no more Riot DataDragon hotlinking).
*/

/* ---------- images (v3: official mascot assets) ---------- */
img{
  max-width:100%;
  height:auto;
}

/* ---------- base helpers ---------- */

html{
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

.wrap{
  max-width:960px;
  margin:0 auto;
  padding:0 20px;
}

.en{
  font-size:.85rem;
  color:var(--sub);
  margin-top:8px;
}

.en-inline{
  display:block;
  font-size:.7rem;
  color:var(--sub);
  font-weight:400;
  letter-spacing:.03em;
  margin-top:2px;
  border:none;
  padding:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--mint);
  color:#0B1220;
  padding:10px 16px;
  font-weight:700;
  z-index:100;
}
.skip-link:focus{
  left:0;
}

/* ---------- ribbon nav ---------- */

.ribbon{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,18,32,.94);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(79,209,197,.12);
}

.ribbon-inner{
  max-width:960px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:18px;
  min-height:56px;
}

.ribbon-brand{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
  flex:0 0 auto;
}
.ribbon-brand span{color:var(--mint);}

.ribbon-nav{
  list-style:none;
  margin:0;
  padding:0;
  /* offsetParent for the links, so nav.js can measure them against this list
     (the .ribbon above is position:sticky and would otherwise claim them) */
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.ribbon-nav::-webkit-scrollbar{display:none;}

.ribbon-nav li{margin:0;}

.ribbon-nav a{
  display:block;
  color:var(--sub);
  text-decoration:none;
  font-size:.9rem;
  padding:8px 12px;
  border-radius:999px;
  white-space:nowrap;
  border:1px solid transparent;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}

.ribbon-nav a:hover{
  color:var(--text);
  border-color:var(--line);
}

.ribbon-nav a:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
}

.ribbon-nav a[aria-current="true"]{
  color:var(--mint);
  border-color:rgba(79,209,197,.45);
  background:rgba(79,209,197,.10);
  font-weight:700;
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  background-color:#0B1220;
  border-bottom:1px solid var(--line);
}

.hero-inner{
  padding-top:64px;
  padding-bottom:56px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:40px;
  align-items:center;
}
/* ヒーロー右のスケッチカード（清書差し替えは assets/inabi.webp の上書きのみ） */
.hero-sketch{
  margin:0;
  transform:rotate(2deg);
}
.hero-sketch figcaption{padding-top:8px;}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:20px;}
  .hero-sketch{max-width:280px;margin:8px auto 0;transform:none;}
}

.hero h1{
  font-size:2.4rem;
  letter-spacing:.04em;
  line-height:1.3;
}
.hero h1 span{color:var(--mint);}

.tag{
  color:var(--orange);
  font-weight:600;
  margin-top:6px;
  font-size:1.05rem;
}

.lead{
  margin:22px 0 0;
  color:var(--text);
  max-width:44em;
}

.hero-actions{
  margin-top:26px;
}

.beta-chip{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--orange);
  border:1px solid rgba(232,131,58,.55);
  background:rgba(232,131,58,.10);
  border-radius:999px;
  padding:3px 12px;
  margin-bottom:14px;
}

/* ---------- sections ---------- */

.section{
  padding:64px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:64px;
}

#overview{
  border-top:none;
  padding:0 0 56px;
  scroll-margin-top:64px;
}

.section-head{
  margin-bottom:8px;
}

.section-head h2{
  font-size:1.5rem;
  letter-spacing:.03em;
}
.section-head h2 .num{
  color:var(--mint);
  font-size:.85rem;
  letter-spacing:.18em;
  display:block;
  margin-bottom:6px;
}
.section-head .section-sub{
  color:var(--sub);
  font-size:.9rem;
  margin-top:6px;
}

.rule{
  height:2px;
  width:56px;
  background:linear-gradient(90deg,var(--mint),var(--orange));
  border-radius:2px;
  margin:14px 0 28px;
}

/* ---------- cards / grids ---------- */

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px;
  margin:20px 0;
}
.card h3{
  font-size:1.05rem;
  color:var(--mint);
  margin-bottom:12px;
  border-left:3px solid var(--mint);
  padding-left:10px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
  margin-top:24px;
}

.mini-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
}
.mini-card .icon{
  font-size:1.4rem;
  display:block;
  margin-bottom:8px;
}
.mini-card h3{
  font-size:1rem;
  color:var(--mint);
  margin-bottom:6px;
}
.mini-card p{
  font-size:.92rem;
  color:var(--text);
}

/* developer note */
.dev-note{
  background:linear-gradient(180deg, rgba(79,209,197,.06), rgba(17,26,46,.9));
  border:1px solid var(--line);
  border-left:3px solid var(--mint);
  border-radius:10px;
  padding:22px 24px;
  margin-top:32px;
}
.dev-note h3{
  font-size:.95rem;
  color:var(--mint);
  margin-bottom:10px;
  letter-spacing:.04em;
}
.dev-note p{
  color:var(--text);
}

/* official character cards (v3) */
.char-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:24px;
}
.char-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
  margin:0;
  text-align:center;
}
.char-card img{
  width:100%;
  max-width:280px;
  border-radius:10px;
  margin:0 auto 12px;
  display:block;
}
.char-card figcaption{
  font-size:1rem;
  font-weight:700;
  color:var(--mint);
}

/* feature illustration inside a tab panel (v3: teams.webp) / page section (v4: shots) */
.feature-img{
  margin:18px 0;
}
.feature-img img{
  width:100%;
  border-radius:10px;
  border:1px solid var(--line);
  display:block;
}
.feature-img figcaption{
  margin-top:10px;
}

/* ---------- promo cards (v4: index -> subpage links) ---------- */
.promo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:24px;
}
.promo-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  transition:border-color .15s ease;
}
.promo-card:hover,
.promo-card:focus-visible{
  border-color:var(--mint);
}
.promo-card:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
}
.promo-card .promo-thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-bottom:1px solid var(--line);
}
.promo-card .promo-body{
  padding:18px 20px 22px;
}
.promo-card h3{
  font-size:1.08rem;
  color:var(--mint);
  margin-bottom:8px;
}
.promo-card p{
  font-size:.9rem;
  color:var(--text);
}
.promo-card .promo-cta{
  margin-top:14px;
  font-size:.85rem;
  color:var(--orange);
  font-weight:700;
}

/* ---------- highlight box (positive / merit points, mint theme) ---------- */
.highlight-box{
  background:rgba(79,209,197,.07);
  border:1px solid rgba(79,209,197,.4);
  border-left:4px solid var(--mint);
  border-radius:10px;
  padding:20px 24px;
  margin:24px 0;
}
.highlight-box h3{
  font-size:.98rem;
  color:var(--mint);
  margin-bottom:10px;
}
.highlight-box ul{
  margin:0;
  padding-left:1.3em;
}
.highlight-box li{margin:6px 0;}

/* ---------- status badges (v4: modes.html) ---------- */
.status-badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:4px 12px;
  border-radius:999px;
  margin-bottom:10px;
}
.status-badge.is-live{
  color:#0B1220;
  background:var(--mint);
}
.status-badge.is-upcoming{
  color:#0B1220;
  background:var(--orange);
}
.status-badge.is-planned{
  color:var(--sub);
  background:transparent;
  border:1px solid var(--line);
}

/* support section illustration (v3: duo.webp) */
.support-img{
  margin:20px 0 4px;
}
.support-img img{
  width:100%;
  max-width:640px;
  border-radius:10px;
  border:1px solid var(--line);
  display:block;
  margin:0 auto;
}

/* notice box (beta availability) */
.notice{
  background:rgba(232,131,58,.07);
  border:1px solid rgba(232,131,58,.45);
  border-left:4px solid var(--orange);
  border-radius:10px;
  padding:20px 24px;
  margin:24px 0;
}
.notice h3{
  font-size:.98rem;
  color:var(--orange);
  margin-bottom:10px;
}
.notice ul{
  margin:0;
  padding-left:1.3em;
}
.notice li{margin:6px 0;}

/* ---------- install steps ---------- */

.steps{
  list-style:none;
  padding:0;
  margin:24px 0 0;
  display:grid;
  gap:16px;
}
.steps li{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px 22px 20px 66px;
  position:relative;
  margin:0;
}
.steps li .step-no{
  position:absolute;
  left:20px;
  top:20px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--mint);
  color:#0B1220;
  font-weight:700;
  font-size:.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps li h3{
  font-size:1rem;
  color:var(--mint);
  margin-bottom:6px;
}
.steps li p{font-size:.94rem;}

/* ---------- roadmap ---------- */

.roadmap{
  list-style:none;
  padding:0;
  margin:24px 0 0;
}
.roadmap li{
  position:relative;
  padding:0 0 22px 26px;
  margin:0;
  border-left:1px solid var(--line);
}
.roadmap li:last-child{
  border-left-color:transparent;
  padding-bottom:0;
}
.roadmap li::before{
  content:"";
  position:absolute;
  left:-6px;
  top:8px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--orange);
}
.roadmap li h3{
  font-size:1rem;
  color:var(--text);
  margin-bottom:4px;
}
.roadmap li p{
  font-size:.92rem;
  color:var(--sub);
}

.vision{
  margin-top:26px;
  font-size:1.05rem;
  color:var(--mint);
  border-left:3px solid var(--orange);
  padding-left:14px;
}

/* ---------- support ---------- */

.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:20px;
}

.disclaimer{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:.85rem;
  color:var(--sub);
}

footer{
  border-top:1px solid var(--line);
  padding:28px 0 48px;
  font-size:.85rem;
  color:var(--sub);
}
footer a{color:var(--mint);}
footer p{margin-top:8px;}
footer p:first-child{margin-top:0;}

/* ---------- responsive ---------- */

@media (max-width:640px){
  .hero-inner{padding-top:48px;padding-bottom:48px;}
  .hero h1{font-size:1.85rem;}
  .tag{font-size:.98rem;}
  .section{padding:48px 0;}
  .section-head h2{font-size:1.3rem;}
  .ribbon-inner{gap:12px;padding:0 14px;}
  .ribbon-brand{font-size:.9rem;}
  .ribbon-nav a{font-size:.84rem;padding:7px 10px;}
  .wrap{padding:0 14px;}
  .card,.mini-card,.dev-note,.notice,.highlight-box{padding:18px;}
  .steps li{padding:18px 16px 18px 58px;}
  .steps li .step-no{left:16px;top:18px;}
  .promo-card .promo-body{padding:16px 16px 18px;}

}

/* v6: 白地サムネ（ラフ画のプロモカード用） */
.promo-thumb-paper{
  object-fit:contain;
  background:#F6F4ED;
}
/* v6: モードページ冒頭のミニ対面カード */
.sketch-grid-mini{
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:8px;
}
.sketch-grid-mini .sketch-card{
  max-width:260px;
  flex:0 1 260px;
}

@media (max-width:400px){
  .hero h1{font-size:1.6rem;}
  .btn{padding:11px 18px;font-size:.9rem;}
}

/* ================================================================
   v5 — 和 × 近未来レイヤー
   ----------------------------------------------------------------
   ベースは v4 の無機質ラボ（濃紺 #0B1220 × ミント #4FD1C5 ×
   オレンジ #E8833A）のまま。その上に和のレイヤーだけを重ねる。
   - （雷文罫線はオーナー却下により撤去済み 2026-08-13）
   - 明朝体は見出し・キャッチ・章ラベルのみ。本文はゴシックのまま
   - 金色は使わない
   ================================================================ */

:root{
  /* 明朝アクセント（Web フォントは読み込まない・端末内蔵のみ） */
  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  /* 画帖／ポラロイド風スケッチカードの生成り紙 */
  --paper:#F6F4ED;
  --paper-line:#DAD5C6;
  --paper-ink:#1A2233;
  --paper-sub:#5B6577;
  /* 白地の上で使う濃いミント／オレンジ（可読性確保のための暗色版。金色ではない） */
  --mint-ink:#1B6A62;
  --orange-ink:#9E5417;
}

/* （組子背景レイヤーはv6で撤去。bodyの背景はv3どおり各ページ既定のまま） */

/* ---------- 和のサブラベル（壱・弐・参…） ---------- */
.section-head h2 .num .kanji{
  font-family:var(--mincho);
  font-style:normal;
  font-size:1.15rem;
  line-height:1;
  color:var(--orange);
  margin-right:9px;
  letter-spacing:0;
  vertical-align:-2px;
}

/* ---------- 縦書きアクセント（サイト内 2 箇所だけ） ---------- */
.section-head{
  position:relative;
}
.tate{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:var(--mincho);
  font-size:.82rem;
  letter-spacing:.18em;
  color:var(--sub);
  border-right:1px solid rgba(79,209,197,.35);
  padding:2px 10px 2px 0;
  margin:0;
  position:absolute;
  top:0;
  right:0;
  /* 見出しの高さに収める。文言は全角 5 文字まで
     （それより長いと折り返して 2 列になり、見出しに被る） */
  max-height:8em;
}

/* ---------- 明朝アクセント ---------- */
.tag{
  font-family:var(--mincho);
  letter-spacing:.06em;
}
.vision{
  font-family:var(--mincho);
  letter-spacing:.04em;
}

/* ---------- 朱印風の丸（サイト内 1 箇所・フッターのみ） ---------- */
.seal-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
}
.seal{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  font-family:var(--mincho);
  font-size:1.5rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(-5deg);
  box-shadow:0 0 0 2px rgba(232,131,58,.25);
}
.seal-note{
  font-family:var(--mincho);
  font-size:.9rem;
  letter-spacing:.08em;
  color:var(--sub);
}

/* ---------- スケッチカード（画帖／ポラロイド風） ---------- */
.sketch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
  margin-top:30px;
}
.sketch-card{
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:4px;
  padding:14px 14px 18px;
  margin:0;
  color:var(--paper-ink);
  box-shadow:0 10px 26px rgba(0,0,0,.42);
}
.sketch-card.tilt-l{transform:rotate(-2deg);}
.sketch-card.tilt-r{transform:rotate(2deg);}
.sketch-card img{
  display:block;
  width:100%;
  height:auto;
  background:#fff;
  border-radius:2px;
}
.sketch-card figcaption{
  margin-top:12px;
}
.sketch-tag{
  font-size:.74rem;
  letter-spacing:.04em;
  color:var(--paper-sub);
  border-top:1px dashed var(--paper-line);
  padding-top:8px;
  margin-bottom:8px;
}
.char-name{
  font-family:var(--mincho);
  font-size:1.35rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.1em;
  color:var(--paper-ink);
}
.char-name span{
  font-family:"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--paper-sub);
  margin-left:10px;
}
.char-role{
  font-family:var(--mincho);
  font-size:.92rem;
  letter-spacing:.04em;
  margin-top:2px;
}
.sketch-card.is-inabi .char-role{color:var(--mint-ink);}
.sketch-card.is-okibi .char-role{color:var(--orange-ink);}
.char-line{
  font-size:.88rem;
  line-height:1.7;
  margin-top:8px;
  color:var(--paper-ink);
}
.char-origin{
  font-size:.78rem;
  line-height:1.7;
  margin-top:8px;
  color:var(--paper-sub);
}

/* 下層ページに小さく添えるミニ版。右に流して本文を回り込ませる
   （フロートは .wrap のクリアフィックスで各セクション内に閉じ込める） */
.sketch-card.is-mini{
  float:right;
  max-width:190px;
  padding:10px 10px 12px;
  margin:6px 0 18px 26px;
  box-shadow:0 8px 18px rgba(0,0,0,.36);
}
.wrap::after{
  content:"";
  display:block;
  clear:both;
}
.sketch-card.is-mini .sketch-tag{
  font-size:.68rem;
  padding-top:6px;
  margin-bottom:5px;
}
.sketch-card.is-mini .char-name{font-size:1.02rem;}
.sketch-card.is-mini .char-name span{display:block;margin-left:0;}
.sketch-card.is-mini .char-role{font-size:.76rem;line-height:1.6;margin-top:4px;}

@media (max-width:640px){
  /* 回転はデスクトップの装飾。狭い画面では外接矩形が広がって
     横溢れの原因になるので寝かせる。 */
  .sketch-card.tilt-l,
  .sketch-card.tilt-r{transform:none;}
  .sketch-grid{gap:22px;}
  .sketch-card.is-mini{float:none;margin:22px auto;}
}

/* 縦書きラベルは見出しに重なりうるので狭い画面では出さない */
@media (max-width:860px){
  .tate{display:none;}
}


/* ================================================================
   v7 — 宵の社（神社配色 × 無機質ラボ）オーバーライド
   墨 #14161A × 胡粉 #F2EFE9 × 朱 #D0442E × 浅葱 #33A6B8
   角丸は全面禁止（直線構成）。装飾は回路文様のみ。
   ================================================================ */

/* 角丸ゼロ（例外なし） */
*, *::before, *::after{ border-radius:0 !important; }

/* 見出しの明朝アクセントを撤回（ゴシックに統一） */
.tag, .vision, .char-name{ font-family:inherit; }
.tag{ font-weight:700; }

/* ナビ: ピル廃止 → ｜概要｜ 式（区切り線＋選択中は朱の面） */
.ribbon-nav li{ position:relative; }
.ribbon-nav li + li::before{
  content:"";
  position:absolute; left:0; top:50%;
  height:14px; width:1px;
  transform:translateY(-50%);
  background:var(--line);
}
.ribbon-nav a{
  border:none !important;
  background:transparent;
  padding:8px 16px;
  color:var(--sub);
}
.ribbon-nav a:hover{ color:var(--text); background:var(--panel); }
.ribbon-nav a[aria-current="true"]{
  background:var(--orange);
  color:#FFF6EC;
  font-weight:700;
}

/* ヒーローのイラスト（そのまま置く・カードなし） */
.hero-art{
  width:100%; max-width:360px;
  justify-self:end;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
@media (max-width:860px){
  .hero-art{ max-width:260px; margin:8px auto 0; justify-self:center; }
}

/* 回路文様（電子回路トレース・大きく1箇所ずつ上品に） */
.circuit{
  display:block;
  width:min(420px, 60%);
  height:auto;
  opacity:.5;
}
.circuit-hero{ position:absolute; left:20px; bottom:14px; pointer-events:none; }
.hero{ position:relative; overflow:hidden; }
.circuit-footer{ margin:0 auto 6px; display:block; }

/* あとがき */
.atogaki{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.atogaki h3{ font-size:.95rem; color:var(--sub); letter-spacing:.2em; }
.atogaki p{ font-size:.9rem; color:var(--sub); margin-top:10px; max-width:640px; }
.atogaki-foxes img{
  width:96px; height:auto; vertical-align:bottom; margin-right:18px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
}

/* v7fix: ラフ透過画のプロモサムネは切り抜かず生成り面に収める */
.promo-thumb-paper{
  object-fit:contain !important;
  background:#F6F4ED !important;
  padding:10px;
}

/* v7fix2: あとがき（名前つきミニ姿＋デザイン意図） */
.atogaki h3{display:none;}
.atogaki-row{display:flex;gap:36px;align-items:flex-end;}
.atogaki-fox{margin:0;text-align:center;}
.atogaki-fox img{width:110px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.atogaki-fox figcaption{font-size:.85rem;color:var(--text);margin-top:6px;letter-spacing:.15em;}
.atogaki-note{font-size:.82rem;color:var(--sub);margin-top:14px;max-width:640px;}