@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap');




:root {
  --ink: #111;
  --paper: #fff;
  --pale: #ddd;
  --rail: #000;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--rail);
}

/* サイト全体にフォントを適用する場合 */
body {
  font-family: 'IM Fell English SC', serif;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  /* 
    Google Fontsの仕組みに合わせて、フォント名を設定しました。
    大文字小文字が混ざっていても、この通りに書けば100%確実に日本語に適用されます！ 
  */
  font-family: 'IM Fell English SC', 'New Tegomin', serif;
  font-size: clamp(20px, 1.8vw, 32px);
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: 100%;
}

li {
  list-style: none;
}

.page {
  min-height: 100vh;
  border-left: 88px solid var(--rail);
}

.layout-container {
  width: min(calc(100% - 168px), 1184px);
  margin-inline: auto;
}

.section {
  padding-block: 104px;
}

.section-title,
.page-heading h1,
.hero__title {
  margin: 0;
  font-weight: 400;
}

.section-title {
  font-size: clamp(64px, 5vw, 120px);
  line-height: 2;
  color: #000000;
}

.page-heading {
  height: 240px;
  padding-top: 47px;
}

.page-heading h1 {
  font-size: clamp(64px, 5vw, 120px);
  letter-spacing: .13em;
}

/* 【バトル画面専用】見出しを縮めて技ボタンまでの距離を詰める */
.page--battle .page-heading {
  height: 120px;
  padding-top: 24px;
}

.page--battle .page-heading h1 {
  font-size: clamp(40px, 4vw, 64px);
}

.hero {
  height: auto;
  /* 【修正】高さを固定せず、画像やはみ出た文字の量に自動で合わせます */
  background: none;
  /* 元の不要な背景指定をクリアします */
}

/* 1. 画像と文字をまとめる箱を「縮図の基準（コンテナ）」に指定します */
.hero__inner {
  position: relative;
  width: 100%;
  padding-top: 54px;

  /* 【重要】この箱の横幅を基準にして、中の文字を100%連動させる魔法です */
  container-type: inline-size;
}


.hero__title {
  font-size: clamp(64px, 5vw, 120px);
  letter-spacing: .27em;
}

.intro {
  display: flex;
  gap: 155px;
  padding-top: 88px;
  padding-bottom: 124px;
}

.intro__definition {
  width: 360px;
  flex: none;
}

.intro__definition p {
  margin: 26px 0 0;
  color: #fb0202;
  margin-top: -50px;
  /* 下げたい幅を指定します */
}

.intro__story {
  margin-top: 2px;
  font-size: clamp(20px, 1.8vw, 32px);
}

.intro__story p {
  margin: 0 0 29px;
  font-size: clamp(20px, 0.5vw, 32px);
  line-height: 1.8;
  margin-top: 170px;
  /* 下げたい幅を指定します */

}

.intro_list {

  font-size: clamp(20px, 0.8vw, 32px);
}

.message {
  min-height: 390px;
  display: grid;
  place-items: center;
  padding: 70px 0;
}

.message__text {
  margin: 0;
  font-size: clamp(35px, 1.1vw, 40px);
  line-height: 2.1;
  letter-spacing: .08em;
  text-align: center;
}

.enemy {
  display: flex;
  align-items: start;
  gap: 95px;
  padding-bottom: 124px;
}

.enemy__image {
  width: 488px;
  height: 324px;
  background: var(--pale);
  flex: none;
}

.enemy__image.boss {
  margin-top: 140px;
}

.enemy__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enemy__details {
  padding-top: 2px;
}

.info-list,
.ability__list,
.technique dl,
.record dl {
  margin: -40px 0 0;
  font-size: clamp(20px, 0.8vw, 32px);
}

.info-list div,
.ability__list div,
.technique dl div,
.record dl div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
}

dt,
dd {
  margin: 0;
}

.weapons-preview {
  padding-top: 70px;
  padding-bottom: 112px;
}

.weapon-grid {
  display: grid;
  gap: 22px;
}

.weapon-grid--preview {
  grid-template-columns: repeat(5, 1fr);
}

.weapon-card {
  min-width: 0;
  min-height: 164px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: var(--pale);
  color: var(--ink);
  transition: opacity .2s;
}

.weapon-card:hover {
  opacity: .68;
}

.weapon-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weapon-card span {
  display: block;
  padding: 9px;
  background: rgba(255, 255, 255, .85);
  font-size: clamp(12px, .9vw, 14px);
}

.text-link {
  display: block;
  width: max-content;
  margin: 24px 0 0 auto;
  border-bottom: 1px solid;
}

.site-footer {
  min-height: 187px;
  padding: 42px 84px;
  background: #333435;
  color: var(--paper);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 40px;
}

.site-footer__brand {
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: .11em;
  flex-shrink: 0;
  color: var(--paper);
}

.site-footer__nav {
  width: min(50%, 520px);
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.site-footer__group {
  min-width: 0;
}

.site-footer__title {
  margin: 0 0 10px;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 600;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.site-footer__link {
  font-size: clamp(14px, 1vw, 18px);
  display: inline-block;
}

.arms-list {
  padding-top: 0;
  padding-bottom: 190px;
}

.arms-list .section-title {
  margin-bottom: 38px;
}

.weapon-grid--list {
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 24px;
}

.weapon-grid--list .weapon-card {
  position: relative;
  min-height: 0;
  /* 【修正】共通ルールのmin-height:164pxを解除し、ウィンドウを狭めても画像の上に隙間ができないようにします */
}

/* imgをflexの伸縮対象から外し、常に正方形(1:1)を保たせます */
.weapon-grid--list .weapon-card img {
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ラベルはimgの高さに影響させず、画像の下端に重ねて表示します */
.weapon-grid--list .weapon-card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.weapon-detail {
  padding-bottom: 130px;
}

.weapon-detail__intro {
  min-height: 370px;
  display: flex;
  justify-content: space-between;
  gap: 90px;
}

.weapon-detail__intro h2 {
  margin: 0 0 20px;
  font-size: clamp(40px, 3vw, 72px);
  font-weight: 400;
}

.weapon-detail__type {
  margin: 0 0 22px;
}

/* 【試験】weapon1.htmlのみ：見出し・武器名の強弱を強める (body.weapon-hero-test) */
.weapon-hero-test .weapon-detail__eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #767676;
}

.weapon-hero-test .weapon-detail__intro h2 {
  font-size: clamp(56px, 4.23vw, 104px);
  /* MacBook Pro 14インチ(1512px)で64px */
  font-weight: 600;
}

.weapon-hero-test .weapon-detail__type {
  color: #767676;
}

.weapon-detail__intro p:last-child {
  margin: 0;
}

.weapon-detail__image {
  width: 502.5px;
  /* 【修正】335pxの1.5倍 */
  height: 502.5px;
  /* 【修正】335pxの1.5倍 */
  object-fit: cover;
  background: var(--pale);
}

/* 1. 全体の横幅を広げ、画像と文字の間の不要な隙間（gap）をギュッと狭くします */
.ability {
  width: 100%;
  margin: 58px 0 95px;
  min-height: 370px;
  display: flex;
  justify-content: flex-start;
  /* 左詰めに並べます */
  align-items: center;
  gap: 40px;
  /* 【変更】90pxから40pxに狭めて、その分スペースを作りました */
}

/* 2. 画像の枠の限界サイズを大きく広げます */
.ability__visual {
  flex: none;
  width: 100%;
  max-width: 600px;
  /* 【変更】320pxから420pxに大きく引き上げました */
  margin: 0;
}

/* 3. 文字エリアが残りのスペースを「1行で横に長く」使えるようにします */
.ability__content {
  flex: 1;
  width: 100%;
  min-width: 300px;
  /* 文字が潰れないように最低限の幅をキープ */
}

/* 4. 説明文も含めて、途中で変に改行されるのを防ぎます */
.ability__list div {
  display: flex;
  /* gridからflexに変更して、横に1行で流れるようにします */
  align-items: center;
  gap: 15px;
  white-space: nowrap;
  /* 【重要】文字全体が絶対に途中で改行されないようにします */
}

.ability__list dt {
  width: 100px;
  /* タイトル（スピード等）の幅 */
  flex-shrink: 0;
}


/* 【修正】画像を枠いっぱいに強制拡大する設定 */
.ability__image {
  width: 100%;
  /* 枠の横幅いっぱいに広げます */
  height: 100%;
  /* 枠の縦幅いっぱいに広げます */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* 【変更】containからcoverに変えることで、枠いっぱいに拡大されます */
}


.technique {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  min-height: 300px;
  padding: 36px 0;
  border-top: 1px solid #d2d2d2;
}

.technique__body {
  flex: 1;
}

.technique h3 {
  margin: 0;
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 400;
}

.technique p {
  margin: 12px 0 0;
}

.technique dl {
  margin-top: 22px;
}

.technique dl div {
  margin-top: 10px;
}

.technique__image {
  width: 292px;
  height: 292px;
  /* 【修正】204pxから292pxにして正方形にします */
  flex: none;
}

.technique__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weapon-detail__action {
  text-align: center;
  margin: 72px 0 104px;
}

.button {
  display: inline-block;
  min-width: 238px;
  padding: 17px 28px;
  border: 1px solid var(--ink);
  text-align: center;
  background: var(--paper);
  font-family: inherit;
  font-size: clamp(16px, 1.2vw, 20px);
}

.button:hover {
  background: var(--ink);
  color: var(--paper);
}

/* 【修正】weapon1〜10「この武器で戦う」ボタンだけ配色を反転（黒→押したらpale） */
#fightButton {
  background: var(--ink);
  color: var(--paper);
}

#fightButton:hover {
  background: var(--pale);
  color: var(--ink);
}

.weapon-grid--small {
  width: 540px;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px auto 0;
}

.weapon-grid--small .weapon-card {
  min-height: 140px;
}

.battle {
  padding-bottom: 190px;
  text-align: center;
}

/* ボスをできるだけ中央に保ったまま、右側にログを配置するための3カラムグリッド */
.battle__top {
  display: grid;
  grid-template-columns: 1fr minmax(0, 640px) 1fr;
  align-items: stretch;
  gap: 32px;
  margin-bottom: 48px;
}

.battle__top .battle__stage {
  grid-column: 2;
}

.battle__top .battle__log {
  grid-column: 3;
}

.battle__stage {
  position: relative;
}

.battle__stage>img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* 【バトル画面専用】技ボタンまでを1画面に収めやすくするための詰め */
.page--battle .battle__stage>img {
  aspect-ratio: 4 / 3;
}

.battle-result {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.battle-result.is-active {
  opacity: 1;
  pointer-events: auto;
}

.battle-result__box {
  width: min(420px, 84%);
  padding: 48px 36px;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.battle-result__title {
  margin: 0 0 18px;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 400;
  letter-spacing: .1em;
}

.battle-result__desc {
  margin: 0 0 32px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.9;
}

.battle__status {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 48px 0;
}

.page--battle .battle__status {
  margin: 24px 0;
}

.battle-hp {
  flex: 1;
  text-align: left;
}

.battle-hp--hero {
  text-align: right;
}

.battle__vs {
  margin: 0;
  flex: none;
  font-size: clamp(20px, 1.6vw, 28px);
  letter-spacing: .2em;
}

.battle-hp__name {
  margin: 0 0 12px;
  font-size: clamp(16px, 1.2vw, 20px);
  letter-spacing: .08em;
}

.battle-hp__track {
  height: 3px;
  background: var(--pale);
}

.battle-hp--hero .battle-hp__track {
  margin-left: auto;
}

.battle-hp__fill {
  height: 100%;
  width: 100%;
  background: var(--ink);
  transition: width .35s ease;
}

.battle-hp--hero .battle-hp__fill {
  margin-left: auto;
}

.battle-hp__value {
  margin: 10px 0 0;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--rail);
}

.battle__weapon {
  margin: 0 0 56px;
}

.page--battle .battle__weapon {
  margin: 0 0 24px;
}

.battle__weapon-label {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--rail);
}

.battle__weapon-name {
  margin: 0;
  font-size: clamp(22px, 1.8vw, 30px);
}

.battle__skills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 64px;
}

.skill-button {
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 26px 24px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.skill-button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

.skill-button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.skill-button__name {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(17px, 1.3vw, 22px);
}

.skill-button__meta {
  display: block;
  font-size: 13px;
  letter-spacing: .05em;
  opacity: .7;
}

.battle__log {
  max-width: 640px;
  min-height: 96px;
  margin: 0 auto;
  padding-top: 24px;
  text-align: left;
  border-top: 1px solid #d2d2d2;
}

/* サイドパネル化：中央寄せ・上罫線をやめて、左に罫線を引いた縦パネルにする */
.battle__top .battle__log {
  max-width: none;
  min-height: 0;
  margin: 0;
  padding-top: 0;
  padding-left: 24px;
  border-top: none;
  border-left: 1px solid #d2d2d2;
  overflow-y: auto;
}

.battle__log p {
  margin: 0 0 12px;
  font-size: clamp(14px, 1vw, 16px);
}

.battle__log p:last-child {
  margin-bottom: 0;
}

.ending {
  padding-top: 0;
  padding-bottom: 130px;
  text-align: center;
}

.ending p {
  margin: 100px 0 34px;
}

.record {
  width: min(calc(100% - 168px), 640px);
  margin-bottom: 120px;
  padding: 44px 70px;
  background: var(--pale);
}

.record h2 {
  margin: 0;
  font-size: clamp(40px, 3vw, 72px);
  font-weight: 400;
}

.record dl div {
  margin-top: 11px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  body {
    font-size: clamp(14px, 1.1vw, 16px);
  }

  .page {
    border-left-width: 28px;
  }

  .layout-container {
    width: min(calc(100% - 48px), 1184px);
  }

  .hero {
    height: 560px;
  }

  .page-heading {
    height: 158px;
    padding-top: 30px;
  }

  .page-heading h1 {
    font-size: clamp(40px, 4vw, 72px);
  }

  .section {
    padding-block: 62px;
  }

  .intro,
  .enemy,
  .weapon-detail__intro,
  .technique {
    display: block;
  }

  .intro {
    padding-top: 56px;
  }

  .intro__definition {
    width: auto;
    margin-bottom: 56px;
  }

  .message {
    min-height: 260px;
  }

  .message__text {
    font-size: clamp(15px, 1.2vw, 18px);
  }

  .enemy__image,
  .weapon-detail__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1.5 / 1;
  }

  .technique__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* 【修正】モバイル表示でも正方形を保ちます */
  }

  .enemy__details {
    margin-top: 38px;
  }

  .weapon-grid--preview,
  .weapon-grid--list {
    grid-template-columns: repeat(2, 1fr);
  }

  .weapon-card {
    min-height: 120px;
  }

  .site-footer {
    min-height: 150px;
    padding: 35px 24px;
    flex-direction: column;
    gap: 20px;
  }

  .site-footer__brand {
    font-size: clamp(18px, 2.2vw, 22px);
  }

  .site-footer__nav {
    width: 100%;
    margin-left: 0;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .site-footer__title {
    margin-bottom: 6px;
  }

  .site-footer__list {
    gap: 6px;
  }

  .weapon-detail {
    padding-bottom: 80px;
  }

  .weapon-detail__intro h2 {
    font-size: clamp(32px, 3.5vw, 40px);
  }

  .weapon-detail__image {
    margin-top: 34px;
  }

  .ability {
    width: 100%;
    margin: 55px 0 70px;
  }

  .technique {
    padding: 30px 0;
  }

  .technique__image {
    margin-top: 28px;
  }

  .weapon-grid--small {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .battle {
    padding-bottom: 100px;
  }

  .battle__stage>img {
    aspect-ratio: 4 / 3;
  }

  /* 幅が狭い画面ではボスとログの横並びをやめて縦積みに戻す */
  .battle__top {
    display: block;
  }

  .battle__top .battle__log {
    max-width: 640px;
    margin: 24px auto 0;
    padding-top: 24px;
    padding-left: 0;
    border-top: 1px solid #d2d2d2;
    border-left: none;
  }

  .battle__status {
    flex-direction: column;
    gap: 24px;
    margin: 32px 0;
  }

  .battle-hp,
  .battle-hp--hero {
    width: 100%;
    text-align: center;
  }

  .battle-hp--hero .battle-hp__track,
  .battle-hp--hero .battle-hp__fill {
    margin-left: 0;
  }

  .battle__weapon {
    margin-bottom: 36px;
  }

  .battle__skills {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 44px;
  }

  .battle-result__box {
    padding: 36px 24px;
  }

  .record {
    width: min(calc(100% - 48px), 640px);
    padding: 34px;
  }
}

/* =========================================================
   固定サイドレール（TOPへ戻る / ハンバーガー / 武器一覧へ）
   ========================================================= */

html {
  scroll-behavior: smooth;
}

/* =========================================================
   1画面スナップスクロール（CSS Scroll Snap）
   スクロールコンテナは html。対象セクションには .snap-section を付与する。
   ========================================================= */

html {
  scroll-snap-type: y proximity;
  /* もっと強く吸着させたい場合はこちらに切り替え： */
  /* scroll-snap-type: y mandatory; */
}

.snap-section {
  min-height: 100vh;
  /* 100dvh非対応ブラウザ向けフォールバック */
  min-height: 100dvh;
  scroll-snap-align: start;
}

/* 横スクロールの武器スライダーが縦スナップの影響を受けないようにする */
.slider-container {
  overscroll-behavior-x: contain;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

.side-rail {
  position: fixed;
  top: 0;
  left: 0;
  width: 88px;
  height: 100vh;
  background: var(--rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 36px 0;
  z-index: 1200;
}

.side-rail__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  font-size: 30px;
  letter-spacing: .25em;
  writing-mode: vertical-rl;
  text-orientation: upright;

}

/* 【追加】「A」テキストをロゴ画像に差し替え。88px幅のサイドレール枠ギリギリまで大きく見せる */
.side-rail__logo {
  width: 124px;
  height: auto;
  display: block;
}

.side-rail__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  font-size: 14px;
  letter-spacing: .25em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.side-rail__arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  flex: none;
}

.side-rail__top .side-rail__arrow {
  border-bottom: 9px solid var(--paper);
}

.side-rail__bottom .side-rail__arrow {
  border-top: 9px solid var(--paper);
}

.side-rail__hamburger {
  position: relative;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.side-rail__hamburger .bar {
  position: absolute;
  left: 2px;
  width: 28px;
  height: 1px;
  background: var(--paper);
  transition: transform .35s ease, opacity .25s ease, top .35s ease;
}

.side-rail__hamburger .bar:nth-child(1) {
  top: 10px;
}

.side-rail__hamburger .bar:nth-child(2) {
  top: 16px;
}

.side-rail__hamburger .bar:nth-child(3) {
  top: 22px;
}

.side-rail__hamburger.is-open .bar:nth-child(1) {
  top: 16px;
  transform: rotate(45deg);
}

.side-rail__hamburger.is-open .bar:nth-child(2) {
  opacity: 0;
}

.side-rail__hamburger.is-open .bar:nth-child(3) {
  top: 16px;
  transform: rotate(-45deg);
}

/* ---- スライドナビ本体 ---- */

.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 82vw);
  height: 100%;
  background: var(--paper);
  box-shadow: -8px 0 32px rgba(0, 0, 0, .1);
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  z-index: 1150;
  padding: 120px 48px 48px;
}

.nav-panel.is-open {
  transform: translateX(0);
}

.nav-panel ul {
  margin: 0;
  padding: 0;
}

.nav-panel li {
  margin-bottom: 28px;
}

.nav-panel a {
  font-size: 18px;
  letter-spacing: .1em;
  position: relative;
}

.nav-panel a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width .3s ease;
}

.nav-panel a:hover::after {
  width: 100%;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  z-index: 1100;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---- モバイル用（サイドレールを隠し、代替ボタンを表示） ---- */

.mobile-hamburger,
.mobile-top-btn {
  display: none;
}

@media (max-width: 760px) {
  .side-rail {
    display: none;
  }

  .mobile-hamburger {
    display: block;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1200;
  }

  .mobile-hamburger .bar {
    position: absolute;
    left: 6px;
    width: 28px;
    height: 2px;
    background: var(--ink);
    transition: transform .35s ease, opacity .25s ease, top .35s ease;
  }

  .mobile-hamburger .bar:nth-child(1) {
    top: 13px;
  }

  .mobile-hamburger .bar:nth-child(2) {
    top: 20px;
  }

  .mobile-hamburger .bar:nth-child(3) {
    top: 27px;
  }

  .mobile-hamburger.is-open .bar:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
  }

  .mobile-hamburger.is-open .bar:nth-child(2) {
    opacity: 0;
  }

  .mobile-hamburger.is-open .bar:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
  }

  .mobile-top-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rail);
    z-index: 1150;
  }

  .mobile-top-btn .side-rail__arrow {
    border-bottom: 8px solid var(--paper);
  }
}





/* スライダー全体の枠組み */
.slider-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  margin-top: -30px;
  /* 💡これを追加（上に30px引っ張り上げます） */
}

/* 画像を横一列に並べるコンテナ（元のグリッドの見た目を維持しつつ横並びに） */
.slider-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
}

/* 各武器カード（リンク）のスタイル */
.weapon-grid--preview .weapon-card {
  display: inline-block;
  flex-shrink: 0;
  min-height: 0;
  /* 【修正】共通ルールのmin-height:164pxを解除し、画像(150px)と枠のサイズを一致させます */
  margin-right: 15px;
  /* 画像（カード）同士の間隔 */
}

/* カードの中の画像サイズを統一する設定 */
.weapon-grid--preview .weapon-card img {
  width: 200px;
  /* お好みの横幅に調整してください */
  height: 200px;
  /* 【修正】150pxから200pxにして正方形にします */
  object-fit: cover;
  display: block;
}

/* 3. 文字を【画像の中の左上】に浮かせて固定する */
.hero__title {
  position: absolute;
  top: 30px;
  left: 110px;
  margin: 0;
  color: #030303;
  z-index: 10;
  font-size: clamp(28px, 6vw, 120px) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* 新しいテキストを「右下」に配置する設定 */
.hero__extra-text {
  position: absolute;
  bottom: -200px;
  right: 30px;
  margin: 0;
  color: #000000;
  z-index: 10;
  font-size: clamp(14px, 2vw, 26px) !important;
  letter-spacing: .08em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}



/* ==========================================================================
   ヒーローセクション：完全な「縮図」にする設定（一番下に追記）
   ========================================================================== */

/* 1. 【修正】ビューポートにぴったり収まる1画面ぶんの高さに固定します */
.hero {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: none !important;
}

/* 2. 画像の幅に文字を100%連動させる設定 */
.hero__inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important; /* 【修正】画面ぴったり表示のため、はみ出た文字用の余白は解除 */
  padding-bottom: 0 !important; /* 【修正】同上 */
  container-type: inline-size !important;
}

.top.image,
.end.image {
  height: 100%;
}

/* 3. 【修正】画像が画面の縦横にぴったり収まるようcoverでトリミングします（index.html / end.html 共通） */
.top.image img,
.end.image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4. 左上のメインタイトル（色と位置をキープしたまま縮図化） */
.hero__title {
  position: absolute !important;
  margin: 0 !important;
  color: #030303 !important;
  /* 黒文字を固定 */
  z-index: 10 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6) !important;
  top: 2.7cqi !important;
  left: 9.2cqi !important;
  /* 左の余白110pxの比率をずっとキープ */
  font-size: 8.5cqi !important;
  /* 画像と一緒に縮むサイズ */
}

/* 5. 新しく追加したテキスト（位置ズレを完全にブロックする絶対位置指定） */
.hero__extra-text {
  position: absolute !important;
  margin: 0 !important;
  color: #000000 !important;
  /* 黒文字を固定 */
  z-index: 10 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap !important;

  /* 【完全縮図化の修正】
     画像の下枠からはみ出させる位置を、画像の横幅(cqi)を基準にした高さで直接指定します。
     これでMacをどれだけ縮めても、画像の右下の同じ位置に1ミリも狂わず固定されます。 */
  top: 73cqi !important;
  /* パソコンの大画面時の画像の下枠からはみ出た位置に固定 */
  right: 2.5cqi !important;
  /* 右のフチ（30px相当）の比率をずっとキープ */

  font-size: 2.1cqi !important;
  /* 画像と一緒に縮むサイズ */
}

/* 名前の箇条書きリスト全体の調整（文字サイズ・位置・強制左移動） */
.site-footer__member-list {
  display: flex !important;
  flex-direction: column !important;
  padding-left: 0 !important;
  list-style: none !important;

  font-size: 1.0rem;
  /* 文字の大きさ */
  margin-top: 60px !important;
  /* 上の空白（Arsenalとの隙間） */

  /* 【強力な左移動設定】 */
  width: max-content !important;
  /* 横幅を文字の長さに合わせる */
  align-self: flex-start !important;
  /* 親要素がflexでも強制的に左端へ配置する */
  text-align: left !important;
  /* 中の文字もすべて左揃えにする */
  margin-left: 0 !important;
  /* 左端にくっつけます（隙間が欲しい場合は 20px 等に） */
  margin-right: auto !important;

}

/* 1番目の項目（creaters）の下側にだけ、空白を作ります */
.site-footer__member-list li:first-child {
  margin-bottom: 30px !important;
  /* creatersと名前の間の隙間 */
}

/* リスト全体のデザイン調整（他のナビゲーションと同じ扱いにする） */
.site-footer__member-list {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  list-style: none;
  font-size: 1.0rem;
  text-align: left;
  margin: 0px 0 0;
}

/* クリエイタータイトルの下の空白 */
.site-footer__member-title {
  font-weight: bold;
  /* タイトルを少し太字に（不要なら消してください） */
  margin-bottom: 30px;
  /* creatersと名前の間の隙間 */

}

.big-letter {
  font-size: 2.0em;
  /* 好みの大きさに調整してください */
  color: #ff0000;
}