/*
  site.css
  ------------------------------------------------------------------
  役職物語サイトの共通デザインです。
  旧 default.css / page.css / base.css の役割をここへ統合しています。
*/

/*
  デザイン変数
  色・最大幅・余白をまとめておくことで、後から全体調整しやすくしています。
*/
:root {
  --color-bg: #930004;             /* 背景の赤色 */
  --color-panel: #000;             /* メイン本文パネルの黒色 */
  --color-text: #fff;              /* 基本文字色 */
  --color-muted: #aaa;             /* 補助文字色 */
  --color-link: #ff373c;           /* 通常リンク色 */
  --color-link-hover: #fff;        /* hover時リンク色 */
  --color-border: #45373c;         /* 漫画画像の枠線色 */
  --content-width: 900px;          /* 通常コンテンツの最大幅 */
  --narrow-width: 560px;           /* aboutなど狭めページの最大幅 */
  --space-page: clamp(16px, 4vw, 48px);
  --space-panel-y: clamp(28px, 6vw, 56px);
  --space-panel-x: clamp(14px, 4vw, 24px);
}

/* rem計算をしやすくするため、1rem=10px相当に近づけています。 */
html {
  font-size: 62.5%;
}

/*
  ロゴやメイン画像のアニメーションが画面外にはみ出しても、
  ページ全体に横スクロールバーを出さないための保険です。
*/
html,
body {
  overflow-x: clip;
}

/* overflow: clip 非対応ブラウザ向けの代替指定です。 */
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* サイト全体の背景・文字・フォントを指定します。 */
body {
  color: var(--color-text);
  background: var(--color-bg) url("../../img/bg.jpg") center top repeat;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 1.6rem;
  text-align: center;
}

/* メニューが開いている間は背面スクロールを止めます。 */
body.is-menu-open {
  overflow: hidden;
}

/* キーボード操作時に現在位置が分かるよう、フォーカス枠を表示します。 */
:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 4px;
}

/* サイト共通リンク色です。 */
a {
  color: var(--color-link);
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

/* マウスオーバー時は旧サイト同様に白へ変化します。 */
a:hover {
  color: var(--color-link-hover);
}

/* ページ全体を包む外枠です。フッターまで含めた縦方向の余白を管理します。 */
.site-shell {
  min-height: 100vh;
  padding: 12px 0 var(--space-page);
}

/* main内の各セクション同士に一定の余白を作ります。 */
.site-main {
  display: grid;
  gap: 18px;
}

/* 黒背景の本文パネルです。トップ・本文・メッセージ枠で使います。 */
.panel {
  width: min(var(--content-width), calc(100% - 24px));
  margin-inline: auto;
  padding: var(--space-panel-y) var(--space-panel-x);
  background: var(--color-panel);
}

/* aboutなど文字中心のページ用に、横幅を少し狭めます。 */
.narrow-page {
  max-width: var(--narrow-width);
}

/* 画面には見せないが、スクリーンリーダーには読ませたいテキスト用です。 */
.visually-hidden {
  position: absolute !important;
  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;
  z-index: 200;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  color: #fff;
  background: #000;
  transform: translateY(-140%);
}

/* フォーカスされた時だけ表示します。 */
.skip-link:focus {
  transform: translateY(0);
}

/*
  グローバルメニュー
  jQuery drawerを使わず、軽量なCSS + site.jsで開閉します。
*/
.global-header {
  position: relative;
  z-index: 100;
}

/* 右上に固定するハンバーガーボタンです。 */
.menu-toggle {
  position: fixed;
  z-index: 130;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: rgba(125, 0, 0, .72);
}

/* ボタンhover時に少し濃くします。 */
.menu-toggle:hover {
  background: rgba(125, 0, 0, .88);
}

/* ハンバーガーアイコンの中央線・上下線です。 */
.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after {
  position: absolute;
  left: 15px;
  width: 24px;
  height: 2px;
  content: "";
  background: #fff;
  transition: transform .25s ease, opacity .25s ease;
}

.menu-toggle__bar {
  top: 26px;
}

.menu-toggle__bar::before {
  top: -7px;
  left: 0;
}

.menu-toggle__bar::after {
  top: 7px;
  left: 0;
}

/* メニューが開いた時、中央線を消して×印に変形させます。 */
body.is-menu-open .menu-toggle__bar {
  background: transparent;
}

body.is-menu-open .menu-toggle__bar::before {
  transform: translateY(7px) rotate(45deg);
}

body.is-menu-open .menu-toggle__bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* 画面上部から開くメニュー本体です。 */
.global-menu {
  position: fixed;
  z-index: 120;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  justify-items: center;
  gap: 20px;
  max-height: min(86vh, 520px);
  padding: 58px 20px 34px;
  overflow-y: auto;
  color: #fff;
  background: rgb(125, 0, 0);
  transform: translateY(-105%);
  transition: transform .28s ease;
}

/* bodyに is-menu-open が付いたらメニューを画面内へスライドさせます。 */
body.is-menu-open .global-menu {
  transform: translateY(0);
}

/* メニュー内ロゴの大きさを抑えます。 */
.menu-logo img {
  max-height: 72px;
  margin-inline: auto;
}

/* メニュー項目を縦に並べます。 */
.global-menu ul {
  display: grid;
  gap: 10px;
  list-style: none;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

/* メニュー内リンクのタップ範囲を広げます。 */
.global-menu a {
  display: inline-block;
  padding: 6px 12px;
  color: #fff;
}

.global-menu a:hover {
  opacity: .75;
}

/* メニュー表示中にページ背景へかぶせる半透明レイヤーです。 */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, .38);
}

/*
  トップページ：ヒーロー周辺
*/
.hero {
  display: grid;
  justify-items: center;
  gap: 16px;
}

/* ロゴのインクにじみ演出やメイン画像の拡大演出が、黒いパネル外へはみ出さないようにします。 */
.panel.hero {
  overflow: hidden;
}

.logo-link,
.main-visual-link {
  display: inline-block;
}

.site-logo {
  /* ロゴ画像の表示幅です。PCでは650px、スマホでは画面幅に合わせて縮小します。 */
  width: min(650px, 90vw);
  margin-inline: auto;
}

.main-visual {
  width: min(780px, 100%);
  margin-inline: auto;
}


/*
  トップページ：ロゴとメインビジュアルの初回表示アニメーション
  - logo.png はインクがにじむように中心から広がって表示します。
  - main.jpg はロゴ表示後、ぼけた状態からフェードインしながら少し縮小して表示します。
*/
.hero .logo-link {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.hero .logo-link::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 45%, rgba(255,255,255,.55), transparent 15%),
    radial-gradient(circle at 50% 52%, rgba(95,155,255,.38), transparent 28%),
    radial-gradient(circle at 66% 44%, rgba(255,255,255,.44), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 42%);
  filter: blur(18px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: topLogoInkBloom 2.1s ease both;
}

.hero .site-logo {
  position: relative;
  z-index: 1;
  animation: topLogoInkAppear 2.2s cubic-bezier(.16, 1, .3, 1) both;
}

.hero .main-visual-link {
  animation: topMainVisualAppear 1.9s 0.5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes topLogoInkAppear {
  0% {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
    filter: blur(16px) contrast(1.5) brightness(1.15);
    transform: scale(.96);
  }

  36% {
    opacity: 1;
  }

  68% {
    filter: blur(5px) contrast(1.22) brightness(1.08);
  }

  100% {
    opacity: 1;
    clip-path: circle(78% at 50% 50%);
    filter: blur(0) contrast(1) brightness(1);
    transform: scale(1);
  }
}

@keyframes topLogoInkBloom {
  0% {
    opacity: 0;
    transform: scale(.16) rotate(-6deg);
  }

  34% {
    opacity: .95;
  }

  72% {
    opacity: .38;
  }

  100% {
    opacity: 0;
    transform: scale(1.28) rotate(3deg);
  }
}

@keyframes topMainVisualAppear {
  0% {
    opacity: 0;
    filter: blur(18px) brightness(.88);
    transform: scale(1.08);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1);
  }
}

.home-menu {
  /* トップページ主要メニュー全体の最大幅です。 */
  width: min(600px, 100%);
  margin-top: 6px;
}

/* 主要メニュー画像を均等なカードグリッドにします。 */
.menu-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: clamp(10px, 2.6vw, 28px);
  align-items: center;
  list-style: none;
}

.menu-card-grid a,
.menu-card-grid li[aria-disabled="true"] {
  display: block;
}

.menu-card-grid a:hover {
  transform: translateY(-2px);
  opacity: .82;
}

.section-rule {
  width: min(700px, 100%);
  height: 1px;
  border: 0;
  background: rgba(255,255,255,.4);
}

.update-banner img {
  margin-inline: auto;
}

/*
  トップページ：エピソード一覧
*/
.episode-panel {
  display: grid;
  gap: clamp(28px, 5vw, 54px);
  /* 黒い下地の左右端と、章ごとのエピソード一覧との余白です。 */
  padding-inline: 60px;
}

.chapter {
  display: grid;
  gap: 14px;
  text-align: left;
}

.chapter-title {
  padding: 0;
}

.chapter-title img {
  margin-inline: 0 auto;
}

/* PCでは8列、スマホではメディアクエリで列数を減らします。 */
.episode-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.episode-grid a {
  display: block;
}

.episode-grid a:hover {
  transform: translateY(-2px);
  opacity: .84;
}

.episode-grid img {
  width: 100%;
  height: auto;
}

.bottom-logo img {
  max-width: min(360px, 70vw);
  margin-inline: auto;
}

/*
  下層ページ
*/
.page-header {
  width: min(var(--content-width), calc(100% - 24px));
  margin: 0 auto 18px;
  padding: 24px 12px 0;
}

.back-link,
.footer-back a,
.footer-social a {
  display: inline-block;
}

.back-link img,
.footer-back img,
.footer-social img {
  margin-inline: auto;
}

.content-page h1 {
  margin-bottom: 28px;
  padding: .25em 0;
  border-bottom: 2px solid #888;
  color: #aaa;
  background: #000;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.25;
  text-align: left;
}

.text-block {
  display: grid;
  gap: 20px;
  max-width: 360px;
  margin-inline: auto;
  text-align: left;
}

.history-list {
  display: grid;
  gap: 6px;
}

.history-list div {
  display: grid;
  grid-template-columns: 11ch 1fr;
  gap: 1em;
}

.history-list dt {
  color: #ddd;
}

.history-list dd {
  color: #fff;
}

/* =========================================================
   漫画画像の表示枠
   ---------------------------------------------------------
   .comic-frame
   → 通常は枠ありで表示する

   .comic-frame--no-border
   → 枠なしで表示したい漫画画像に追加する
   ========================================================= */

/* 漫画画像を囲む基本フレーム */
.comic-frame {
  margin: 48px auto;
  max-width: 100%;
}

/* 漫画画像そのものの基本表示 */
.comic-frame img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;

  /* 通常は枠あり */
  border: 10px solid #45373c;
  box-sizing: border-box;
}

/* 枠なし表示に切り替える指定 */
.comic-frame--no-border img {
  border: none;
}

.message-panel {
  color: #ddd;
}

/*
  フッター
  ユーザー要望により、ここには黒い背景を敷きません。
*/
.site-footer {
  width: min(var(--content-width), calc(100% - 24px));
  margin: 18px auto 0;
  padding: 28px var(--space-panel-x);
  color: var(--color-muted);
  background: transparent;
  font-size: 1.2rem;
}

.site-footer > * + * {
  margin-top: 14px;
}

.copyright {
  line-height: 1.7;
}


/* 動きを減らす設定の端末では、アニメーションをほぼ無効化します。 */
@media (prefers-reduced-motion: reduce) {
  .hero .logo-link::before,
  .hero .site-logo,
  .hero .main-visual-link {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/*
  スマホ・タブレット向け調整
*/
@media (max-width: 760px) {
  /* 文字サイズを少しだけ小さくして、スマホの圧迫感を抑えます。 */
  html {
    font-size: 56.25%;
  }

  .site-shell {
    padding-top: 8px;
  }

  .panel {
    width: min(100% - 16px, var(--content-width));
  }

  .menu-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .episode-panel {
    /* スマホでは左右60pxだと狭くなるため、余白を自動で縮めます。 */
    padding-inline: 30px;
  }

  .episode-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .chapter {
    gap: 10px;
  }

  .content-page h1 {
    text-align: center;
  }
}

/* かなり狭い端末向けに、エピソードを3列へ切り替えます。(4列のままでOK) */
@media (max-width: 420px) {
  .menu-card-grid {
    gap: 8px;
  }

  .episode-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .history-list div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}