/* ===========================================================
   ASUKA BUNMEI 2026 — Common Design System
   全ページ共通の見た目とレスポンシブグリッド
   =========================================================== */

:root{
  --c-bg:#fffbe6;
  --c-pink:#ff1493;
  --c-yellow:#ffd700;
  --c-blue:#00bfff;
  --c-purple:#9c27b0;
  --c-dark:#222;
  --c-text:#222;
  --c-muted:#888;
  --c-line:#222;

  --grad-rainbow:linear-gradient(45deg,#ff1493 0%,#ffd700 25%,#00bfff 50%,#ff1493 75%,#ffd700 100%);

  --shadow-hard:6px 6px 0 var(--c-dark);
  --shadow-soft:0 4px 20px rgba(0,0,0,.1);

  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;

  --maxw:1100px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.asuka{
  font-family:"ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN","メイリオ","Meiryo",sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--c-pink);text-decoration:none;}
a:hover{text-decoration:underline;}

/* === 背景キャラ壁紙 === */
.asuka-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 10%,#ffd1dc 0%,transparent 50%),
    radial-gradient(ellipse at 80% 30%,#d1f5ff 0%,transparent 50%),
    radial-gradient(ellipse at 50% 90%,#fff461 0%,transparent 50%),
    var(--c-bg);
}
.asuka-bg .w{
  position:absolute;width:80px;height:80px;opacity:.15;
  filter:saturate(.4);
  animation:asuFloat 30s infinite ease-in-out;
}
@keyframes asuFloat{
  0%,100%{transform:translate(0,0) rotate(0);}
  50%{transform:translate(40px,-40px) rotate(180deg);}
}

/* === 上部ニュースティッカー === */
.asuka-ticker{
  position:relative;z-index:10;background:#000;color:var(--c-yellow);
  border-bottom:4px solid var(--c-pink);
  overflow:hidden;white-space:nowrap;height:36px;line-height:36px;
  font-size:13px;
}
.asuka-ticker .t{display:inline-block;padding-left:100%;
  animation:tickerScroll 24s linear infinite;}
.asuka-ticker .t span{margin:0 30px;}
.asuka-ticker .t b{color:var(--c-pink);}
@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* === グローバルヘッダー === */
.asuka-gheader{
  position:relative;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-bottom:3px solid var(--c-dark);
  padding:14px 20px;
}
.asuka-gheader .inner{
  position:relative;
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;
}
.asuka-gheader .brand{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  text-decoration:none;color:var(--c-dark);
  font-weight:900;font-size:13px;letter-spacing:.3em;
  white-space:nowrap;
}
.asuka-gheader .brand img{
  height:42px;width:auto;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.2));
  transition:transform .2s;
}
.asuka-gheader .brand:hover img{transform:rotate(-3deg) scale(1.05);}
.asuka-gheader .brand small{display:block;font-size:9px;letter-spacing:.3em;color:var(--c-pink);font-weight:bold;}
@keyframes hueShift{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}

/* === レスポンシブメニュー === */
.asuka-menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.asuka-menu a{
  color:var(--c-dark);font-size:12px;font-weight:bold;
  padding:7px 10px;border-radius:18px;text-decoration:none;
  border:2px solid transparent;transition:all .15s;
  white-space:nowrap;
}
.asuka-menu a:hover{background:var(--c-yellow);border-color:var(--c-dark);text-decoration:none;}
.asuka-menu a.active{background:var(--c-pink);color:#fff;border-color:var(--c-dark);}
.asuka-gheader .toggle{display:none;background:var(--c-pink);color:#fff;border:3px solid var(--c-dark);
  border-radius:30px;padding:8px 16px;font-weight:bold;cursor:pointer;font-size:13px;
  box-shadow:3px 3px 0 var(--c-dark);font-family:inherit;}

/* === 各ページのメイン領域 === */
.asuka-page{position:relative;z-index:5;max-width:var(--maxw);margin:0 auto;padding:24px 20px 40px;}

/* === ページタイトル === */
.asuka-title{
  text-align:center;margin:20px 0 30px;
}
.asuka-title h1{
  font-size:clamp(32px,6vw,64px);font-weight:900;margin:0;line-height:1;
  background:var(--grad-rainbow);background-size:300% 300%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 #fff) drop-shadow(6px 6px 0 var(--c-dark));
  animation:hueShift 6s linear infinite,asuWob 1.5s infinite;
  letter-spacing:-.01em;
}
@keyframes asuWob{0%,100%{transform:rotate(-1deg);}50%{transform:rotate(1deg);}}
.asuka-title .sub{font-size:13px;letter-spacing:.6em;color:var(--c-muted);margin-top:8px;}
.asuka-title .jp{font-size:14px;letter-spacing:.5em;color:var(--c-pink);margin-top:6px;font-weight:bold;}

/* === パンくず === */
.asuka-breadcrumb{
  font-size:12px;color:var(--c-muted);margin:0 0 16px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.asuka-breadcrumb a{color:var(--c-pink);}
.asuka-breadcrumb .sep{color:var(--c-muted);}

/* === パネル(汎用カード) === */
.asuka-panel{
  background:#fff;border:4px solid var(--c-dark);border-radius:var(--r-lg);padding:24px;
  box-shadow:var(--shadow-hard);margin:18px 0;
}
.asuka-panel h2{
  font-size:20px;margin:0 0 14px;
  background:var(--c-dark);color:#fff;display:inline-block;padding:6px 18px;
  border-radius:20px;letter-spacing:2px;
}
.asuka-panel h2.pink{background:var(--c-pink);}
.asuka-panel h2.blue{background:var(--c-blue);}
.asuka-panel h2.yellow{background:var(--c-yellow);color:var(--c-dark);}

/* === グリッド === */
.asuka-grid{display:grid;gap:18px;}
.asuka-grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.asuka-grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.asuka-grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.asuka-grid.cols-6{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));}

/* === キャラカード === */
.asuka-charaCard{
  display:block;text-decoration:none;color:var(--c-dark);text-align:center;
  background:#fffbe6;padding:12px 8px;border:3px solid var(--c-dark);border-radius:var(--r-md);
  transition:all .15s;
}
.asuka-charaCard:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:5px 5px 0 var(--c-dark);text-decoration:none;}
.asuka-charaCard img{width:100%;max-width:100px;height:auto;aspect-ratio:1;
  margin:0 auto;border-radius:8px;background:#fff;object-fit:cover;}
.asuka-charaCard .nm{display:block;font-size:13px;font-weight:bold;margin-top:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asuka-charaCard .meta{display:block;font-size:10px;color:var(--c-muted);margin-top:2px;}
.asuka-charaCard .stars{color:#ffa500;font-size:11px;letter-spacing:1px;margin-top:2px;}

/* === ボタン === */
.asuka-btn{
  display:inline-block;background:var(--c-pink);color:#fff;
  padding:12px 28px;border-radius:30px;text-decoration:none;
  font-weight:bold;font-size:14px;border:3px solid var(--c-dark);
  box-shadow:4px 4px 0 var(--c-dark);
  cursor:pointer;font-family:inherit;
  transition:all .15s;
}
.asuka-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--c-dark);text-decoration:none;}
.asuka-btn.yellow{background:var(--c-yellow);color:var(--c-dark);}
.asuka-btn.blue{background:var(--c-blue);color:#fff;}
.asuka-btn.dark{background:var(--c-dark);color:#fff;}
.asuka-btn.sm{padding:6px 14px;font-size:12px;border-width:2px;box-shadow:2px 2px 0 var(--c-dark);}

/* === 入力欄 === */
.asuka-input,.asuka-textarea,.asuka-select{
  font-family:inherit;font-size:15px;
  padding:12px 16px;border:3px solid var(--c-dark);border-radius:var(--r-md);
  background:#fff;width:100%;
  box-shadow:3px 3px 0 var(--c-dark);
}
.asuka-input:focus,.asuka-textarea:focus,.asuka-select:focus{
  outline:none;border-color:var(--c-pink);
  box-shadow:3px 3px 0 var(--c-pink);
}
.asuka-label{display:block;font-weight:bold;margin:14px 0 6px;font-size:14px;}
.asuka-label .req{color:var(--c-pink);font-size:11px;margin-left:6px;}

/* === ページネーション === */
.asuka-pager{
  display:flex;justify-content:center;align-items:center;gap:6px;margin:24px 0;
  flex-wrap:wrap;
}
.asuka-pager a,.asuka-pager span{
  display:inline-block;min-width:36px;padding:8px 12px;
  background:#fff;border:2px solid var(--c-dark);border-radius:8px;
  text-align:center;font-size:13px;font-weight:bold;text-decoration:none;color:var(--c-dark);
}
.asuka-pager a:hover{background:var(--c-yellow);}
.asuka-pager .cur{background:var(--c-pink);color:#fff;}

/* === ワープゾーン (新コーナーへの誘導) === */
.asuka-warpzone{
  margin:24px 0;padding:6px;
  background:linear-gradient(135deg,#ff1493,#ffd700,#00bfff,#9c27b0,#ff1493);
  background-size:400% 400%;animation:warpBG 5s linear infinite;
  border-radius:24px;box-shadow:0 8px 30px rgba(255,20,147,.4);
}
@keyframes warpBG{0%{background-position:0% 50%;}100%{background-position:400% 50%;}}
.asuka-warpzone .inner{
  background:#fff;border-radius:18px;padding:24px;text-align:center;
}
.asuka-warpzone h2{
  font-size:clamp(22px,4vw,32px);margin:0 0 6px;
  background:linear-gradient(45deg,#ff1493,#9c27b0,#00bfff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:asuWob 1.2s infinite;
}
.asuka-warpzone .sub{color:#666;margin:0 0 16px;font-size:13px;}

/* === footer === */
.asuka-footer{
  position:relative;z-index:5;text-align:center;padding:40px 20px 80px;
  font-size:11px;color:var(--c-muted);letter-spacing:1px;
}
.asuka-footer .copy{margin-top:10px;}
.asuka-footer .crew{margin-top:6px;font-size:10px;}
.asuka-footer .crew b{color:var(--c-pink);}

/* === 戻るボタン (ページ左上固定) === */
.asuka-back{
  position:fixed;top:14px;left:14px;z-index:100;
  background:#fff;padding:8px 16px;border-radius:30px;
  text-decoration:none;color:var(--c-dark);border:3px solid var(--c-dark);
  box-shadow:3px 3px 0 var(--c-dark);font-weight:bold;font-size:13px;
}
.asuka-back:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--c-dark);text-decoration:none;}

/* === レスポンシブ === */
@media (max-width:900px){
  .asuka-menu{display:none;position:absolute;top:calc(100% + 14px);left:-20px;right:-20px;
    flex-direction:column;background:#fff;border-top:3px solid var(--c-dark);border-bottom:3px solid var(--c-dark);
    padding:16px;gap:8px;align-items:stretch;
    box-shadow:0 6px 20px rgba(0,0,0,.15);z-index:60;}
  .asuka-menu.open{display:flex;}
  .asuka-menu a{text-align:center;}
  .asuka-gheader .toggle{display:inline-block;}
}
@media (max-width:600px){
  .asuka-page{padding:16px 14px 30px;}
  .asuka-panel{padding:18px;border-width:3px;}
  .asuka-title h1{filter:drop-shadow(2px 2px 0 #fff) drop-shadow(4px 4px 0 var(--c-dark));}
}
@media (max-width:400px){
  .asuka-title h1{font-size:36px;}
  .asuka-gheader .brand{font-size:18px;}
}

/* === ユーティリティ === */
.asuka-mt{margin-top:20px;}
.asuka-mb{margin-bottom:20px;}
.asuka-center{text-align:center;}
.asuka-muted{color:var(--c-muted);}
.asuka-small{font-size:12px;}
.asuka-rotate-1{transform:rotate(-1deg);}
.asuka-rotate1{transform:rotate(1deg);}