/* -------------------------
   ベース設計（変数・リセット）
-------------------------- */
:root{
  --font-body: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", "BIZ UDPGothic", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size: clamp(15px, 1.5vw, 16.5px);
  --radius: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.08);
  --max-content: 980px;
  --side-rail-max: 520px;

  --bg: #fbf7ed;
  --paper: #fffdf7;
  --ink: #2d2a25;
  --muted: #6d645c;
  --accent: #6c8651;
  --accent-weak: #dfe7d2;
  --chip-bg: #efe7d8;
  --chip-ink: #5a4f42;
  --badge-bg: #f3eadb;
  --badge-ink: #7a6d5c;
  --link: #2f61a4;

  --rail-img-left: url("/img/specials/showa-cassette.png");
  --rail-img-right: url("/img/specials/showa-idol.png");
  --rail-opacity: .25;
  --rail-scale: 90vh;
  --rail-blur: 0px;

  --header-h: 58px;
  --header-bg: color-mix(in srgb, var(--paper) 88%, white);
  --header-border: #e7e0d5;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* テーマ：昭和レトロ（例） */
.theme-showa{
  --bg: #fbf4e6;
  --paper: #fffaf0;
  --accent: #6b8a44;
  --accent-weak: #dfe8d1;
  --chip-bg: #efe2cc;
  --badge-bg: #efe2cc;
  --rail-img-left: url("/img/specials/showa-cassette.png");
  --rail-img-right: url("/img/specials/showa-idol.png");
}

/* テーマ：異世界（例） */
.theme-isekai{
  --bg: #f5f2ff;
  --paper: #fefcff;
  --accent: #6c5ce7;
  --accent-weak: #e5e0ff;
  --chip-bg: #ece6ff;
  --badge-bg: #ece6ff;
  --rail-img-left: url("/img/specials/isekai-magic-circle.svg");
  --rail-img-right: url("/img/specials/isekai-monster.png");
  --rail-opacity: .28;
}

/* モダンリセット（最小限） */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--font-size);
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  --content-w: min(100vw, var(--max-content));
  --gutter: calc((100vw - var(--content-w)) / 2);
}

/* PC時の左右“レール”背景 */
@media (min-width: 1024px){
  body::before,
  body::after{
    content:"";
    position:fixed;
    inset:0 auto 0 0;
    width: min(max(0px, var(--gutter)), var(--side-rail-max));
    pointer-events:none;
    opacity:var(--rail-opacity);
    background-repeat:no-repeat;
    background-position:right center;
    background-size:auto min(var(--rail-scale), 95vh);
    filter: blur(var(--rail-blur));
    z-index:0;
  }
  body::after{
    inset:0 0 0 auto;
    background-position:left center;
  }
  .theme-showa body::before, body.theme-showa::before{ background-image: var(--rail-img-left); }
  .theme-showa body::after,  body.theme-showa::after { background-image: var(--rail-img-right); }

  body::before{ background-image: var(--rail-img-left); }
  body::after{ background-image: var(--rail-img-right); }
}

/* アクセシビリティ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; left:10px; top:max(6px, var(--safe-top));
  background:var(--ink); color:#fff; padding:.5em .8em; border-radius:8px;
  translate: 0 -150%;
  z-index:1000;
}
.skip-link:focus{ translate:0 0 }

/* ヘッダー／ナビ */
.site-header{
  position:sticky; top:0; z-index:999;
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  backdrop-filter: saturate(120%) blur(6px);
}
.header-inner{
  max-width:var(--max-content); margin:0 auto; height:var(--header-h);
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:12px;
  padding:0 14px;
}
.brand{ display:flex; flex-direction:column; line-height:1.1; text-decoration:none; color:inherit; }
.brand .logo{ font-size: clamp(22px, 3.4vw, 32px); font-weight:700; letter-spacing:.06em }
.brand small{ color:var(--muted); font-size:.85em }

.nav-toggle{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:10px; border:1px solid #ddd;
  background:#fff; cursor:pointer;
}
.nav-toggle .bars{ position:relative; width:22px; height:14px }
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bar{
  content:""; position:absolute; left:0; right:0; height:2px; background:#333; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle .bar{ top:6px }
.nav-toggle .bars::before{ top:0 }
.nav-toggle .bars::after{ top:12px }

.nav-toggle[aria-expanded="true"] .bars::before{ top:6px; transform:rotate(45deg) }
.nav-toggle[aria-expanded="true"] .bars::after{ top:6px; transform:rotate(-45deg) }
.nav-toggle[aria-expanded="true"] .bar{ opacity:0 }

.global-nav{
  position:fixed; inset:calc(var(--header-h) + var(--safe-top)) 0 auto 0;
  background:var(--paper);
  border-bottom:1px solid var(--header-border);
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  padding:16px;
  display:none;
}
.global-nav.open{ display:block }
.global-nav ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 12px }
.global-nav a{
  display:block; text-decoration:none; color:inherit;
  padding:.55em .8em; border-radius:var(--radius-pill);
  background:var(--chip-bg); color:var(--chip-ink);
}
@media (min-width: 860px){
  .global-nav{ position:static; display:block; border:none; box-shadow:none; padding:0; background:transparent }
  .header-inner{ grid-template-columns: auto 1fr; }
  .nav-toggle{ display:none }
  .global-nav ul{ justify-content:flex-start; gap:10px }
}

/* メイン */
.container{ max-width:var(--max-content); margin:0 auto; padding:16px; position:relative; z-index:1 }
.hero{ text-align:center; padding:26px 10px 10px; }
.hero h1{ font-size: clamp(28px, 5vw, 50px); margin:.2em 0 .2em }
.hero p{ margin:0; color:var(--muted) }

/* 検索 */
.search{
  margin:18px auto 8px; display:flex; gap:8px; align-items:center; justify-content:center;
  flex-wrap:wrap;
}
.search input[type="search"]{
  flex:1 1 320px; max-width:680px;
  appearance:none; border:1px solid #dfd6c9; background:#fff;
  border-radius: var(--radius-pill);
  padding:.9em 1.1em; outline:none;
}
.search button{
  border:none; border-radius:var(--radius-pill);
  padding:.85em 1.2em; background:var(--accent); color:#fff; cursor:pointer;
}

/* SNS丸ボタン */
.sns-row{ display:flex; justify-content:center; gap:18px; margin:20px 0 6px }
.sns{
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background:#3b3b3b; color:#fff; text-decoration:none;
}
.sns.ig{ background:#b06a6a }
.sns.fb{ background:#5b788f }
.sns.tw{ background:#443a36 }

/* セクション見出し */
.section{ margin:26px 0 }
.section h2{
  background:var(--accent); color:#fff; padding:.6em .9em; border-radius:12px;
  font-size:1.02rem; letter-spacing:.04em; display:inline-flex; gap:.5em; align-items:center;
}
.section h2 .emoji{ font-size:1.2rem }

/* カードリスト */
.app-list{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:12px }
.app-card{
  background:var(--paper);
  border:1px solid #eadfce;
  border-radius:12px;
  box-shadow: var(--shadow-card);
}
.app-card a{
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  gap: 12px;
  align-items: center;
  text-decoration:none; color:inherit; padding:14px 14px 12px
}
.app-card .meta{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap }
.badge{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.3em .7em; border-radius:10px; background:var(--badge-bg); color:var(--badge-ink);
  font-weight:600; font-size:.88em;
}
.app-card h3{ margin:.1em 0; font-size:1.05rem; line-height:1.35 }
.app-card .count{ color:var(--muted); font-size:.9em; margin-left:.15em }
.app-card p{ margin:.3em 0 0; color:var(--muted) }

/* タグチップ */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0 }
.chip{
  display:inline-block; padding:.45em .8em; border-radius:var(--radius-pill);
  background:var(--chip-bg); color:var(--chip-ink); text-decoration:none; font-weight:600; font-size:.92em
}

/* 新着の帯 */
.ribbon{ background:var(--accent-weak); color:#2f3128; padding:.6em .9em; border-radius:12px; display:inline-block }

/* リンク色 */
a{ color:var(--link) }
a:hover{ opacity:.92 }

/* フッター */
.site-footer{ color:var(--muted); text-align:center; padding:40px 16px var(--safe-bottom) }

/* メディア調整 */
@media (min-width: 768px){
  .search input[type="search"]{ flex:1 1 480px }
  .sns{ width:66px; height:66px }
}
@media (min-width: 1200px){
  .container{ padding:18px 24px }
}

/* ユーザー設定 */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}

/* ============ いろつく風アイコン ============ */
:root{ --icon-size: 48px; }
@media (min-width: 768px){ :root{ --icon-size: 54px; } }

.app-icon{
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  font-weight: 900;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 10px rgba(0,0,0,.12);
}
.app-icon::before,
.app-icon::after{
  content:"";
  position:absolute; inset:0;
}
.app-icon::before{
  background: linear-gradient(145deg, var(--c1), var(--c2));
}
.app-icon::after{
  background:
    radial-gradient(120% 85% at 50% -20%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.55) 24%,
      rgba(255,255,255,.14) 48%,
      rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  pointer-events:none;
}
.app-icon__text{
  position: relative; z-index: 1;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;
  word-break: normal;
  text-align: center;
  line-height: 1.05;
  font-weight: 900;
  font-feature-settings: "palt" 1;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
  padding-inline: 2px;
  font-size: var(--icon-font, calc(var(--icon-size) * .46));
}
.app-icon__text[data-len="1"]{ --icon-font: calc(var(--icon-size) * .64); white-space: nowrap; }
.app-icon__text[data-len="2"]{ --icon-font: calc(var(--icon-size) * .54); white-space: nowrap; }
.app-icon__text[data-len="3"]{ --icon-font: calc(var(--icon-size) * .46); }
.app-icon__text[data-len="4"]{ --icon-font: calc(var(--icon-size) * .44); letter-spacing: .01em; }

.app-icon__sub{
  position:absolute; right:4px; bottom:3px;
  z-index:1;
  font-size: clamp(12px, calc(var(--icon-size)*0.28), 18px);
  line-height:1;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* カラーバリエーション */
.icon--pink   { --c1:#ff89b5; --c2:#d53a76; }
.icon--red    { --c1:#ff7d7d; --c2:#cf3c53; }
.icon--blue   { --c1:#6aa8ff; --c2:#245bd0; }
.icon--purple { --c1:#b69aff; --c2:#6a4ae3; }
.icon--orange { --c1:#ffc36a; --c2:#d98917; }
.icon--green  { --c1:#79d39b; --c2:#2e9b55; }
.icon--teal   { --c1:#7ee5d5; --c2:#1e9a8a; }
.icon--navy   { --c1:#88a4ff; --c2:#3c43b9; }

/* ===== 特集一覧カード ===== */
.special-index{ display:grid; gap:24px; margin:14px 0 24px; }
.special-card{
  background:var(--paper);
  border:1px solid #eadfce;
  border-radius:12px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.special-card .head{
  display:grid; grid-template-columns: 240px 1fr; gap:16px; align-items:center;
  padding:14px;
}
@media (max-width: 720px){
  .special-card .head{ grid-template-columns: 1fr; }
}
.special-card .thumb{ display:block; width:100%; }
.special-card .thumb img,
.special-card .thumb-ph{
  width:100%; height:100%;
  display:block; border-radius:10px; overflow:hidden;
  aspect-ratio: 16 / 9;             /* サムネ比率固定 */
  object-fit: cover;                 /* 画像は中央トリミング */
  background:
    radial-gradient(120% 120% at 10% 10%, #efe8dc, #f7efe1 60%, #e8dfd0);
}
.special-card .meta .ttl{ margin:.2em 0 .2em; font-size:1.22rem; }
.special-card .meta .ttl a{ text-decoration:none; color:inherit; }
.special-card .meta .desc{ margin:.2em 0 .4em; color:var(--muted); }

.special-card .app-list{ padding: 0 14px 14px; }
.special-card .more{ margin:.2em 0 0; }
.special-card .btn{
  display:inline-block; padding:.55em 1em; border-radius: var(--radius-pill);
  background: var(--accent); color:#fff; text-decoration:none; font-weight:700;
}


/* ===== 特集バナー一覧（改良） ===== */
/* グリッドはそのままでOK（以前の定義があれば流用）。ここでは比率固定の“媒体枠”を追加 */

.special-banner{ position:relative; display:block; border-radius:12px; overflow:hidden;
  border:1px solid #eadfce; background:var(--paper); box-shadow:var(--shadow-card);
  transition: transform .15s ease, box-shadow .2s ease; }
.special-banner:hover{ transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.12); }

/* 比率固定のメディア枠（OGP 1200:630 ≒ 1.904:1） */
.special-banner__media{ position:relative; width:100%; overflow:hidden; }
.special-banner__media::before{ content:""; display:block; padding-top:52.5%; } /* 630/1200*100 */

.special-banner__img,
.special-banner__ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.special-banner__ph{ display:grid; place-items:center;
  background: radial-gradient(120% 120% at 10% 10%, #efe8dc, #f7efe1 60%, #e8dfd0);
  color:var(--muted); font-weight:700; }

.special-banner__label{
  position:absolute; left:10px; bottom:10px; padding:.35em .65em; border-radius:10px;
  background: rgba(0,0,0,.50); color:#fff; font-weight:700; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* 画面が広すぎる時に“高さがデカくなりすぎない”上限（お好みで調整） */
:root{ --banner-max-h: 360px; } /* 例：最大高さ360px */
.special-banner__media{ max-height: var(--banner-max-h); }

/* もっと見るボタン */
.btn--more{ display:inline-block; padding:.55em 1.1em; border-radius:999px; background:var(--accent); color:#fff; text-decoration:none; }