@charset "utf-8";
/* BigPuとあの頃の仲間たち — 公式サイト
   配色＝Y2Kの夕方（夕焼けオレンジ × コンクリート）
   ちいかわ公式から借りるのは構造だけ。配色・字形・世界観は自前。 */

:root{
  --ink:#2b2622;
  --ink-soft:#6b6058;
  --paper:#fbf7f1;         /* 生成り */
  --concrete:#e7e3dc;      /* コンクリート */
  --concrete-dark:#d3cec6;
  --sunset:#f4762c;        /* 夕焼け */
  --sunset-deep:#d9531a;
  --sunset-pale:#ffd7a8;
  --sky:#bfd9e8;
  --radius:14px;
  --shadow:0 2px 0 rgba(43,38,34,.08), 0 10px 24px rgba(43,38,34,.07);
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--paper); line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
ul{list-style:none; margin:0; padding:0}

.wrap{width:min(1120px,calc(100% - 40px)); margin-inline:auto}

/* ---------- ヘッダー ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(16px,4vw,32px);
  background:rgba(251,247,241,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s, padding .25s;
}
.site-header.is-stuck{border-bottom-color:var(--concrete-dark); box-shadow:0 4px 16px rgba(43,38,34,.06)}
.logo{text-decoration:none; display:flex; align-items:baseline; gap:2px; letter-spacing:.02em}
.logo-main{font-size:1.3rem; font-weight:800; color:var(--sunset-deep)}
.logo-sub{font-size:.78rem; font-weight:700; color:var(--ink-soft)}
.site-nav{display:flex; gap:clamp(10px,2.5vw,26px); font-size:.9rem; font-weight:700}
.site-nav a{text-decoration:none; padding:4px 2px; position:relative; white-space:nowrap}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--sunset); transform:scaleX(0); transform-origin:left; transition:transform .2s;
}
.site-nav a:hover::after{transform:scaleX(1)}

/* ---------- KV（舞台が切り替わる） ----------
   背景7枚は地面ラインを高さの70%に揃えてある（tools/build_kv_scenes.py）。
   キャラは足の裏を同じ70%に置くので、舞台が変わっても足が浮かない。 */
.kv{position:relative; padding-top:56px; background:var(--paper)}
.kv-stage{
  position:relative; width:100%; aspect-ratio:1600/893; overflow:hidden;
  min-height:260px; background:var(--paper);
}
.kv-scenes{position:absolute; inset:0}
.kv-scene{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.kv-scene.is-active{opacity:1}
/* 背景をわずかに淡くしてキャラを立たせる（漫画の貼り込みと同じ考え方）。
   強くかけると舞台が判別できなくなるので 0.15 まで。 */
.kv-veil{position:absolute; inset:0; background:rgba(255,253,248,.15); pointer-events:none}

/* 商店街の舞台は看板が画面の 23〜35% に並ぶ。文字はその上に収める */
.kv-copy{
  position:absolute; left:50%; top:clamp(4px,1.6vw,22px); translate:-50% 0;
  width:min(90%,40em); text-align:center; z-index:2;
}
.kv-title{
  margin:0 0 .25em; font-size:clamp(1.15rem,3.9vw,2.6rem); font-weight:900;
  letter-spacing:.02em; color:#fff; line-height:1.3;
  /* 背景は舞台ごとに明るさが変わるので、輪郭を全方向に置いて読めるようにする */
  text-shadow:
    0 2px 0 var(--sunset-deep), 2px 0 0 var(--sunset-deep),
    -2px 0 0 var(--sunset-deep), 0 -2px 0 var(--sunset-deep),
    0 5px 16px rgba(90,40,10,.5);
}
.kv-title-and{font-size:.72em; margin-inline:.06em}
.kv-lead{
  margin:0; font-size:clamp(.7rem,1.9vw,1rem); font-weight:700; line-height:1.7;
  color:var(--ink); text-shadow:0 1px 0 #fff, 0 0 10px rgba(255,255,255,.9);
}

/* 足の裏は背景の地面ライン（70%）より少し下＝手前の地面に立たせる。
   ここを 30%（＝地面ラインちょうど）にすると、風景の奥に立って見える。 */
.kv-cast{
  position:absolute; left:50%; bottom:17%; translate:-50% 0;
  width:min(86%,1180px); height:auto; z-index:3; pointer-events:none;
}

/* 左右の矢印 */
.kv-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:4;
  width:clamp(34px,4vw,48px); aspect-ratio:1; border-radius:50%; cursor:pointer;
  border:none; background:rgba(255,255,255,.72); backdrop-filter:blur(3px);
  box-shadow:0 2px 10px rgba(43,38,34,.18);
  transition:background .2s, transform .2s;
}
.kv-arrow::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:.6em; height:.6em; font-size:clamp(14px,1.6vw,20px);
  border-top:2.5px solid var(--ink); border-right:2.5px solid var(--ink);
}
.kv-arrow-prev{left:clamp(6px,1.5vw,18px)}
.kv-arrow-prev::before{rotate:-135deg; translate:2px 0}
.kv-arrow-next{right:clamp(6px,1.5vw,18px)}
.kv-arrow-next::before{rotate:45deg; translate:-2px 0}
.kv-arrow:hover{background:#fff; transform:scale(1.06)}
.kv-arrow:focus-visible{outline:3px solid var(--sunset); outline-offset:2px}

/* 舞台の名前とドット */
.kv-place{
  position:absolute; left:0; right:0; bottom:clamp(24px,3.4vw,40px); z-index:4;
  margin:0; text-align:center; font-size:clamp(.66rem,1.5vw,.8rem); font-weight:800;
  letter-spacing:.14em; color:var(--ink);
  text-shadow:0 1px 0 #fff, 0 0 10px #fff, 0 0 18px rgba(255,255,255,.95);
}
.kv-dots{
  position:absolute; left:0; right:0; bottom:clamp(10px,1.6vw,18px); z-index:4;
  display:flex; justify-content:center; gap:7px;
}
.kv-dot{
  width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(43,38,34,.35); background:rgba(255,255,255,.7);
  transition:background .2s, transform .2s;
}
.kv-dot.is-on{background:var(--sunset-deep); border-color:var(--sunset-deep); transform:scale(1.2)}
.kv-dot:focus-visible{outline:2px solid var(--sunset); outline-offset:2px}

/* ---------- セクション共通 ---------- */
.section{padding:clamp(48px,8vw,88px) 0}
.section-chars{background:var(--paper)}
/* まんがとアニメは同じ帯に入れる（どちらも作品なので、波型で割らない） */
.section-comics{background:var(--concrete); padding-bottom:clamp(24px,4vw,44px)}
.section-anime{background:var(--concrete); padding-top:clamp(24px,4vw,44px)}
.section-links{background:var(--paper)}

.sec-title{margin:0 0 8px; display:flex; flex-direction:column; align-items:center; gap:2px}
.sec-title .ja{font-size:clamp(1.35rem,4vw,2rem); font-weight:900; letter-spacing:.08em}
.sec-title .en{
  font-size:.72rem; font-weight:800; letter-spacing:.28em; color:var(--sunset-deep);
}
.sec-lead{margin:0 0 30px; text-align:center; font-size:.92rem; color:var(--ink-soft)}
.sec-title + .char-grid, .sec-title + .link-grid{margin-top:34px}

/* 波型の区切り */
.wave{line-height:0}
.wave svg{width:100%; height:clamp(28px,4vw,56px); display:block}
.wave-down svg path{fill:var(--concrete)}
.wave-up{background:var(--concrete)}
.wave-up svg path{fill:var(--paper)}

/* ---------- キャラクター ---------- */
.char-grid{display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:repeat(4,1fr)}
.char-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
  border-top:5px solid var(--accent);
  transition:transform .22s ease, box-shadow .22s ease;
}
.char-card:hover{transform:translateY(-4px); box-shadow:0 4px 0 rgba(43,38,34,.08),0 16px 32px rgba(43,38,34,.12)}
.char-thumb{
  padding:14px 10px 4px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,#fff) 0%,#fff 100%);
}
.char-thumb img{height:clamp(120px,15vw,168px); width:auto; margin-inline:auto; object-fit:contain}
.char-body{padding:10px 14px 18px}
.char-name{
  margin:0 0 2px; font-size:1.05rem; font-weight:900; letter-spacing:.02em;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
}
.char-role{
  font-size:.66rem; font-weight:800; letter-spacing:.04em;
  color:#fff; background:var(--accent); border-radius:999px; padding:2px 8px; line-height:1.6;
}
.char-meta{margin:0 0 8px; font-size:.72rem; color:var(--ink-soft); letter-spacing:.02em}
.char-text{margin:0; font-size:.82rem; line-height:1.85}

/* ---------- まんが ---------- */
.comic-grid{display:grid; gap:clamp(16px,2.4vw,26px); grid-template-columns:repeat(3,1fr)}
.comic-open{
  display:block; width:100%; padding:12px 12px 16px; cursor:pointer;
  background:#fff; border:none; border-radius:var(--radius); box-shadow:var(--shadow);
  font:inherit; color:inherit; text-align:center; position:relative;
  transition:transform .22s ease, box-shadow .22s ease;
}
.comic-open:hover{transform:translateY(-4px); box-shadow:0 4px 0 rgba(43,38,34,.08),0 16px 32px rgba(43,38,34,.14)}
.comic-open:focus-visible{outline:3px solid var(--sunset); outline-offset:3px}
.comic-badge{
  position:absolute; top:0; left:12px; translate:0 -40%;
  background:var(--sunset-deep); color:#fff; font-size:.74rem; font-weight:800;
  letter-spacing:.06em; padding:3px 12px; border-radius:999px;
  box-shadow:0 2px 6px rgba(43,38,34,.2);
}
.comic-open img{border-radius:8px; border:1px solid var(--concrete-dark)}
.comic-title{display:block; margin-top:10px; font-size:.98rem; font-weight:800}

/* ---------- アニメ ---------- */
/* 本数が少ないうちは中央に寄せる（2列固定だと1本のとき左に寄って寂しい） */
.anime-grid{
  display:grid; gap:clamp(16px,2.4vw,26px); justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,480px));
}
.anime-play{
  display:block; width:100%; padding:12px 12px 16px; cursor:pointer;
  background:#fff; border:none; border-radius:var(--radius); box-shadow:var(--shadow);
  font:inherit; color:inherit; text-align:center; position:relative;
  transition:transform .22s ease, box-shadow .22s ease;
}
.anime-play:hover{transform:translateY(-4px); box-shadow:0 4px 0 rgba(43,38,34,.08),0 16px 32px rgba(43,38,34,.14)}
.anime-play:focus-visible{outline:3px solid var(--sunset); outline-offset:3px}
.anime-play img{border-radius:8px; border:1px solid var(--concrete-dark)}
.anime-title{display:block; margin-top:10px; font-size:.98rem; font-weight:800}
/* 再生の印。クリックするまでYouTubeへは一切つながない */
.anime-play::after{
  content:""; position:absolute; left:50%; top:calc(50% - 14px); translate:-50% -50%;
  width:clamp(46px,5.4vw,64px); aspect-ratio:1; border-radius:50%;
  background:rgba(43,38,34,.62);
  box-shadow:0 4px 14px rgba(0,0,0,.25); transition:background .2s;
}
.anime-play::before{
  content:""; position:absolute; left:calc(50% + 3px); top:calc(50% - 14px); translate:-50% -50%;
  z-index:2; border-style:solid; border-width:.55em 0 .55em .95em;
  border-color:transparent transparent transparent #fff;
  font-size:clamp(14px,1.7vw,20px);
}
.anime-play:hover::after{background:var(--sunset-deep)}
.anime-link{
  display:block; margin-top:8px; text-align:center; text-decoration:none;
  font-size:.76rem; font-weight:700; color:var(--ink-soft); letter-spacing:.04em;
}
.anime-link:hover{color:var(--sunset-deep); text-decoration:underline}
.anime-frame{position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000}
.anime-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- リンク ---------- */
.link-grid{display:grid; gap:clamp(12px,2vw,18px); grid-template-columns:repeat(4,1fr)}
.link-card{
  display:flex; flex-direction:column; gap:2px; height:100%;
  padding:18px 16px; text-decoration:none; background:#fff;
  border:1px solid var(--concrete-dark); border-radius:var(--radius);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.link-card:hover{transform:translateY(-3px); border-color:var(--sunset); box-shadow:var(--shadow)}
.link-name{font-size:1rem; font-weight:900; letter-spacing:.04em}
.link-id{font-size:.78rem; font-weight:700; color:var(--sunset-deep)}
.link-note{font-size:.74rem; color:var(--ink-soft)}

/* ---------- フッター ---------- */
.site-footer{
  padding:34px 20px 40px; text-align:center;
  background:var(--concrete); border-top:1px solid var(--concrete-dark);
}
.footer-logo{margin:0 0 6px; font-size:.92rem; font-weight:900; letter-spacing:.04em}
.footer-copy{margin:0; font-size:.72rem; color:var(--ink-soft); letter-spacing:.06em}

/* ---------- TOPへ戻る ---------- */
.to-top{
  position:fixed; left:16px; bottom:16px; z-index:40;
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--sunset-deep); color:#fff; text-decoration:none;
  font-size:.7rem; font-weight:800; letter-spacing:.08em;
  box-shadow:0 6px 18px rgba(43,38,34,.24);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s, transform .25s, visibility .25s;
}
.to-top.is-visible{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--sunset)}

/* ---------- ライトボックス ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:clamp(12px,3vw,40px); background:rgba(30,22,16,.82);
  overflow:auto; opacity:0; transition:opacity .2s;
}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox-figure{margin:0; text-align:center}
.lightbox-figure img{
  max-width:min(760px,100%); max-height:82vh; width:auto; margin-inline:auto;
  border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.4); background:#fff;
}
.lightbox-figure figcaption{margin-top:12px; color:#fff; font-size:.86rem; font-weight:700; letter-spacing:.04em}
.lightbox-close{
  position:fixed; top:14px; right:16px; width:44px; height:44px; border-radius:50%;
  border:none; cursor:pointer; background:rgba(255,255,255,.9); color:var(--ink);
  font-size:1.6rem; line-height:1; display:grid; place-items:center;
}
.lightbox-close:hover{background:#fff}

/* ---------- スクロールで現れる ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1; transform:none}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .char-grid{grid-template-columns:repeat(2,1fr)}
  .link-grid{grid-template-columns:repeat(2,1fr)}
  .anime-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto}
}
@media (max-width:640px){
  .logo-sub{display:none}
  .comic-grid{grid-template-columns:1fr; max-width:340px; margin-inline:auto}
  .char-text{font-size:.78rem}
  .to-top{width:46px; height:46px; left:12px; bottom:12px}
  /* 16:9 のままだとスマホ縦でキャラが極小になる。枠を縦長にして
     背景は左右を切る（地面ラインは高さ比なので 70% のまま保たれる）。 */
  .kv-stage{aspect-ratio:4/3}
  .kv-cast{width:98%; bottom:15%}
  .kv-copy{top:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .char-card:hover,.comic-open:hover,.link-card:hover{transform:none}
}