@charset "UTF-8";
/* RPログまとめコーナー用CSS
   - 既存サイトCSS（例: style2.css）の .contents 幅/余白設計に合わせて、
     ここでは「部品の見た目」と「モーダル」「タブ」「一覧」を提供します。
*/

:root {
  --rp-bg: #2b2b2b;
  --rp-content: #222222;
  --rp-panel: #383838;
  --rp-text: #cccccc;
  --rp-accent: #e9ca1d;
  --rp-link: #ac9a4c;
  --rp-muted: #6d6d6d;

  --rp-radius: 0.75em;
  --rp-gap: 0.6em;
  --rp-pad: 0.9em;

  /* スマホ時の調整（必要なら上書きOK） */
  --rp-font-scale-mobile: 0.95;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}


.rp {
  color: var(--rp-text);
}

.rp a {
  color: var(--rp-link);
}

.rp a:hover {
  color: var(--rp-muted);
}

body {
  background-color: var(--rp-bg);
}

.contents {
  background-color: var(--rp-content);
  flex: 1;

}

/* ====== Header / Tabs ====== */
.rp-header {
  display: flex;
  flex-direction: column;
  gap: var(--rp-gap);
  margin: 0.5em 0 1em;
}

.rp-title {
  margin: 0.2em 0 0;
}

/* overview内の画像を整える */
#rp-overview img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

#rp-overview a {
  color: var(--rp-link);
}

#rp-overview a:hover {
  color: var(--rp-muted);
}

/* ====== Headings reset for RP area ====== */
.rp h2,
.rp h3,
.rp h4,
.rp h5,
.rp h6 {
  color: var(--rp-text);
  margin: 1.4em 0 0.8em;
  line-height: 1.25;
  font-weight: 900;
  border-bottom: solid 1px var(--rp-muted);
}

.rp h2 {
  font-size: 1.15em;
}

.rp h3 {
  font-size: 1.05em;
}

.rp h4 {
  font-size: 1.00em;
}

.rp h5,
.rp h6 {
  font-size: 0.95em;
}

.rp h2+p,
.rp h3+p,
.rp h4+p {
  margin-top: 0.35em;
}


.rp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
}

.rp-tab {
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--rp-panel);
  color: var(--rp-link);
  padding: 0.55em 0.9em;
  border-radius: var(--rp-radius);
  font-weight: 600;
  position: relative;
}

.rp-tab[aria-selected="true"]::before {
  content: "▶";
  position: absolute;
  left: -0.9em;
  /* ←重ね具合。0.6〜1.2emで調整 */
  top: 50%;
  transform: translateY(-50%);
  color: var(--rp-text);
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
  pointer-events: none;
}


.rp-tab[aria-selected="true"] {
  background: var(--rp-muted);
  color: var(--rp-text);
}

.rp-tab:focus {
  outline: 2px solid var(--rp-muted);
  outline-offset: 2px;
}

/* ====== Season summary & buttons ====== */
.rp-season {
  background: var(--rp-content);
  border-radius: var(--rp-radius);
  padding: var(--rp-pad);
  margin: 0.8em 0 1.2em;
}

/* あらすじ：半透明 */
.rp-season-summary,
#seasonSummary {
  position: relative;
  z-index: 30;
  padding: 0.8em 1em;
  border-radius: var(--rp-radius);
  background: linear-gradient(to bottom,
      var(--rp-content) 0%,
      rgba(34, 34, 34, 0.90) 55%,
      rgba(34, 34, 34, 0.40) 70%,
      rgba(34, 34, 34, 0.00) 90%);
  backdrop-filter: blur(3px);
}


.rp-season h3 {
  margin-top: 0;
}

/* ====== Story / Image 切り替えボタン強調 ====== */
.rp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  /* ボタン同士の余白を拡大 */
  margin: 1.2em 0 1.4em;
  /* 上下に余白を追加 */
}

.rp-action {
  appearance: none;
  border: none;
  cursor: pointer;

  background: var(--rp-panel);
  color: var(--rp-link);

  padding: 0.6em 1.0em;
  /* ←サイズ拡大 */
  font-size: 1.05em;
  /* ←少し大きく */
  font-weight: 800;

  border-radius: calc(var(--rp-radius) + 0.2em);
  letter-spacing: 0.03em;
  position: relative;
}

.rp-action[aria-selected="true"]::before {
  content: "▶";
  position: absolute;
  left: -0.9em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rp-text);
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
  pointer-events: none;
}

.rp-action[aria-selected="true"] {
  background: var(--rp-muted);
  color: var(--rp-text);
}


/* ====== Character cards (simple) ====== */
/* プロフィールカード本体 */
.rp-hero {
  position: relative;
  z-index: 10;
  border-radius: var(--rp-radius);
  border: 1px solid rgba(0, 0, 0, 0.08);
  min-height: 320px;
  /* 下寄せするので少し高さ確保 */
  margin: 0.8em 0 1em;
  background: var(--rp-content);
  margin-bottom: 1.4em;
  /* 次のキャラとの間 */

  /* 上だけ“開ける” */
  overflow: visible;
}

/* 背景：上にだけ突き破る（上へ持ち上げる） */
.rp-hero__bg {
  position: absolute;
  z-index: 0;
  left: -1px;
  right: -1px;
  top: -200px;
  /* ←ここが“突き破り量” */
  bottom: 0;

  background-size: cover;
  background-position: right bottom;
  border-radius: var(--rp-radius);

  /* 上だけ見せて左右/下はカード形状に沿わせる */
  clip-path: inset(0 round var(--rp-radius));
}

/* clip-pathが使えない環境向け（最低限） */
@supports not (clip-path: inset(0 round 10px)) {
  .rp-hero__bg {
    top: 0;
    /* 破綻を避けるため突き破りは諦める */
  }
}


/* 中身のカード（左下に寄せる） */
.rp-hero__card {
  position: absolute;
  left: 1em;
  bottom: 1em;
  z-index: 20;

  margin: 1em;
  width: min(560px, 92%);
  padding: 0.9em 1em;
  border-radius: calc(var(--rp-radius) - 0.1em);
  background: rgba(66, 66, 66, 0.7);
  backdrop-filter: blur(3px);
}


/* 「アイコン + プロフ」配置を整える（任意） */
.rp-hero__card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.1em;
  align-items: start;
}

.rp-hero__profile p {
  margin: 0.25em 0;
}

.rp-hero__icon img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 0.7em;
  background: var(--rp-panel);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* プロフィール本文 */
.rp-hero__profile p {
  margin: 0.35em 0;
}

/* 追加プロフィール群：ヒーローと“同じ基準”で揃える */
.rp-extras {
  display: grid;
  gap: 1em;
  margin: 1.2em 0 1.4em;
}

/* 追加プロフィール：位置決めは“ヒーロー内カード”と同じ寸法に揃える */
.rp-hero__card--extra {
  position: relative;
  left: 2em;
  /* ←メインと同じ */
  width: min(560px, 92%);
  /* ←メインと同じ */
  margin: 0;
  /* 余計なズレを消す */
}


/* 120pxアイコン運用＆間隔詰め（あなたの希望に合わせ） */
.rp-hero__card--extra {
  grid-template-columns: 72px 1fr;
  gap: 0.1em;
}


/* ====== Story area ====== */
.rp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  background: var(--rp-panel);
  border-radius: var(--rp-radius);
  padding: 0.55em 0.7em;
  margin: 0.6em 0 0.9em;
  align-items: center;
}

.rp-filters legend {
  font-weight: 800;
  margin-right: 0.3em;
}

.rp-check {
  display: inline-flex;
  gap: 0.35em;
  align-items: center;
  font-size: 0.95em;
}

.rp-timeline {
  display: grid;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  justify-items: start;
  /* 子カードを横いっぱいに伸ばさない */
  container-type: inline-size;
  position: relative;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;

}

.rp-ep {
  width: fit-content;
  position: relative;
  max-width: 100%;
  /* 長文でも画面からはみ出さない */
  list-style: none;
  border: 1px solid var(--rp-panel);
  border-radius: calc(var(--rp-radius) - 0.15em);
  padding: 0.48em 0.65em;
  /* 0.65/0.8 から縮小 */
  display: grid;
  gap: 0.15em;
  font-size: 0.92em;
  background: var(--rp-panel);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.06);
}

.rp-ep:hover {
  transform: none;
  /* 浮かせない */
  border-color: rgba(233, 202, 29, 0.55);
  /* アクセント寄り */
  /* 薄い色 */

}

.rp-ep:focus {
  outline: 2px solid var(--rp-muted);
  outline-offset: 2px;
}

.rp-ep-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  justify-content: flex-start;
}

.rp-ep-title {
  font-size: 0.98em;
  /* タイトルだけほんの少し強く */
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.rp-pill {
  background: var(--rp-bg);
  color: var(--rp-link);
  border-radius: 0.5em;
  padding: 0.10em 0.45em;
  font-size: 0.92em;
  font-weight: 700;
}

/* ====== Timeline laneation by type (trunk & branches) ====== */

/* 段差の基本単位：画面に応じて伸びる */
:root {
  /* タイムラインコンテナ幅の 1/4 */
  --rp-lane: 25cqw;

  /* 幹は main レーン中央（= 1/8） */
  --rp-trunk-x: 12.5cqw;
}


/* mainだけアウトラインを付ける */
.rp-ep--main {
  margin-left: 0;
  border-color: var(--rp-muted);
}

/* タイムライン全体を貫く“幹” */


.rp-timeline::before {
  content: "";
  position: absolute;
  left: var(--rp-trunk-x);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rp-muted);
  border-radius: 999px;
  opacity: 0.9;
  pointer-events: none;
}


/* ====== 段差（lane方式：--laneで制御） ====== */

/* main含め、すべてのカードは --lane で段差を決める（未指定は0） */
.rp-ep {
  margin-left: calc(var(--rp-lane) * var(--lane, 0));
}

/* mainだけアウトライン（既存を維持したいなら） */
.rp-ep--main {
  border-color: var(--rp-muted);
}

/* ====== 枝：lane>=1 のカードだけ幹から実線 ====== */
/* lane=0（main）には枝を出さない */
.rp-ep:not(.rp-ep--main)::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* 幹（rp-trunk-x）からカード左端まで：laneぶん */
  left: calc(-1 * (var(--rp-lane) * var(--lane, 0)) + var(--rp-trunk-x));
  width: calc((var(--rp-lane) * var(--lane, 0)) - var(--rp-trunk-x));
  height: 2px;

  background: var(--rp-muted);
  border-radius: 999px;
  pointer-events: none;
}

/* 分岐点（小丸） */
.rp-ep:not(.rp-ep--main)::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  left: calc(-1 * (var(--rp-lane) * var(--lane, 0)) + var(--rp-trunk-x) - 4px);
  width: 8px;
  height: 8px;

  border-radius: 999px;
  background: var(--rp-muted);
  pointer-events: none;
}






/* ====== Gallery (portrait-aware) ====== */

.rp-gallery {
  display: grid;
  gap: 0.8em;
}

/* 画像カテゴリ／武器ボタン群 */
.rp-imgbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin: 0.8em 0 1.6em;
  /* ←下を大きめに */
}


/* 画像カテゴリ／武器ボタン群：タブに揃える */
.rp-imgbtns button {
  appearance: none;
  border: none;
  cursor: pointer;

  background: var(--rp-panel);
  /* タブと同系統 */
  color: var(--rp-link);
  /* タブと同じ色系 */
  padding: 0.55em 0.9em;
  /* タブと同じ */
  border-radius: 999px;
  /* 形だけ丸のまま */
  font-weight: 600;
  /* タブと同じ重さ */
  position: relative;
}


.rp-imgbtns button[aria-pressed="true"]::before {
  content: "▶";
  position: absolute;
  left: -0.9em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rp-text);
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
  pointer-events: none;
}

.rp-imgbtns button[aria-pressed="true"] {
  background: var(--rp-muted);
  /* タブ選択中と同じ */
  color: var(--rp-text);
}


/* 画像表示パネル */
.rp-imgpanel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 基本3カラム */
  gap: 0.75em;
  margin-top: 0.4em;
  align-items: start;
}

/* 画像共通 */
.rp-imgpanel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: var(--rp-content);
}

/* 横長・正方形画像は横いっぱい使う */
.rp-imgpanel img:not(.is-portrait) {
  grid-column: span 3;
}




/* 武器ボタン群だけ“別枠”に見せる */
.rp-imgbtns--weapons {
  margin-top: 0.75em;
  padding-top: 0.75em;
  border-top: 1px dashed rgba(0, 0, 0, 0.18);
}


/* 画像パネル内のテキストブロック */
.rp-imgblock {
  grid-column: 1 / -1;
  /* 3カラムでも横いっぱい */
  padding: 0.8em 1em;
  border-radius: 10px;
  color: var(--rp-text);
}

.rp-imgblock a {
  color: var(--rp-link);
}

.rp-imgblock a:hover {
  color: var(--rp-accent);
}


.rp-imgpanel {
  display: grid;
  gap: 0.75em;
  justify-items: center;
  /* ←基本は中央寄せ */
}

.rp-imgpanel img {
  display: block;
  height: auto;

  /* 小さい画像は原寸を超えて拡大しない */
  width: auto;
  max-width: 100%;
  border-radius: 10px;

  background:
    radial-gradient(ellipse at center,
      rgba(255, 255, 255, 0.247) 0%,
      rgba(255, 255, 255, 0.116) 40%,
      rgba(255, 255, 255, 0.00) 75%);
}



.rp-imgpanel img.is-portrait {
  justify-self: start;
}


/* ====== Modal ====== */
.rp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  z-index: 9999;
}

.rp-modal-backdrop[data-open="true"] {
  display: block;
}

.rp-modal {
  position: absolute;
  inset: 4vh 4vw;
  background: var(--rp-bg);
  border-radius: var(--rp-radius);
  border: 2px solid var(--rp-panel);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.rp-modal-head {
  padding: 0.7em 0.9em;
  border-bottom: 1px solid var(--rp-panel);
  display: flex;
  gap: 0.6em;
  align-items: start;
  justify-content: space-between;
}

.rp-modal-title {
  margin: 0;
  font-weight: 900;
  line-height: 1.2;
  color: #cccccc;
  border-bottom: 1px var(--rp-muted);
}

.rp-modal-close {
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--rp-panel);
  color: var(--rp-link);
  padding: 0.5em 0.8em;
  border-radius: var(--rp-radius);
  font-weight: 800;
  white-space: nowrap;
}

.rp-modal-body {
  overflow: auto;
  padding: 0.8em 0.9em;
}

.rp-modal-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 0.6em;
  border: 1px solid var(--rp-panel);
  background: var(--rp-content);
}

.rp-modal-foot {
  padding: 0.7em 0.9em;
  border-top: 1px solid var(--rp-panel);
  display: grid;
  gap: 0.6em;
}

.rp-navrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  align-items: center;
  justify-content: space-between;
}

.rp-navgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.rp-navbtn {
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--rp-panel);
  color: var(--rp-link);
  padding: 0.5em 0.85em;
  border-radius: var(--rp-radius);
  font-weight: 800;
}

.rp-navbtn:disabled {
  background: var(--rp-muted);
  color: var(--rp-content);
  cursor: not-allowed;
  opacity: 0.85;
}

.rp-hint {
  font-size: 0.85em;
  color: var(--rp-muted);
  margin: 0;
}

/* ====== Responsive ====== */
@media screen and (max-width: 750px) {
  .rp {
    font-size: calc(1em * var(--rp-font-scale-mobile));
  }

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

  .rp-thumb img {
    height: 140px;
  }

  .rp-modal {
    inset: 2vh 2vw;
  }

  .rp-hero__bg {
    background-position: 60% center;
    /* right より少し内側 */
  }

  .rp-hero__card {
    left: 0.8em;
    right: 0.8em;
    width: auto;
    /* ← これで“コンテンツ幅”に追従 */
    margin: 0;
    /* 念のため */
  }

  .rp-hero__card--extra {
    left: 0.8em;
    right: 0.8em;
    width: auto;
  }

  .rp-modal-body {
    overflow: auto;
    /* 既にあるはずだが念のため */
  }

  .rp-modal-body img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  /* 拡大モード：原寸優先＋横スクロール */
  .rp-modal-body.is-zoom {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rp-modal-body.is-zoom img {
    width: auto;
    /* ←横幅100%を解除 */
    max-width: none;
    /* ←原寸へ */
    height: auto;
  }
}


/* Home overview */
#rp-home-area {
  background: var(--rp-content);
  border-radius: var(--rp-radius);
  padding: var(--rp-pad);
  margin: 0 0 1em 0;
}

#rp-overview p {
  margin: 0.4em 0;
}

/* 画像パネル：切替時のちらつき軽減 */
.rp-imgpanel {
  transition: opacity 120ms ease;
}

.rp-imgpanel.is-loading {
  opacity: 0;
}

/* ====== Footer ====== */
.rp-footer {
  margin: 3em 0 1.5em;
  padding-top: 1.5em;
  background: var(--rp-panel);
  color: var(--rp-muted);

  text-align: center;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

.rp-footer a {
  color: var(--rp-link);
  text-decoration: none;
}

.rp-footer a:hover {
  color: var(--rp-muted);
  text-decoration: underline;
}

.rp-tab,
.rp-action,
.rp-imgbtns button {
  padding-left: 2em;
  padding-right: 1.8em;
  /* ▶の分だけ最初から余白を確保 */
}

.rp-tab[aria-selected="true"]::before,
.rp-action[aria-selected="true"]::before,
.rp-imgbtns button[aria-pressed="true"]::before {
  left: 0.6em;
  /* ボタン内に置く版（“重なり”弱め） */
}