/* =================================
   Reset / Base
================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  background: #fff;
}

body {
  font-family: "Zen Old Mincho", serif;
  color: #353951;
  overflow-x: hidden;
    text-shadow:
    0 0 10px rgba(255,255,255,0.5),
    0 0 25px rgba(255,255,255,0.25);
}

/* =================================
   Scale Layout
================================= */

.scale-wrapper {
/*  width: 1920px;実験的削除*/
  transform-origin: top center;
}

/* 1920px以下では等比縮小 */
@media screen and (max-width: 1920px) {
  .scale-wrapper {
    transform: scale(calc(100vw / 1920));
  }
}

/* =================================
   Header
================================= */

.header {
  width: 100vw;
  height: 80px;
  background: #000;
}

.header-inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* Logo */
.logo {
  width: 124px;
  height: 72px;
  margin-left: 40px;
}

.logo img {
  width: 95%;
  height: auto;
  display: block;
}

/* Navigation */
.global-nav {
  margin-left: 80px;
}

.global-nav ul {
  display: flex;
  gap: 80px;
  list-style: none;
}

.global-nav a {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.global-nav .is-current a {
  position: relative;
}

.global-nav .is-current a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background: #fff;
}

/* Contact Button */
.header-contact {
  margin-left: auto;
  margin-right: 40px;
}

.contact-btn {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
  background: url("img/contact_btn.png") no-repeat center / contain;
  text-shadow: none;
}




/* =========================
   Active Menu
========================= */
.global-nav ul {
  display: flex;
  gap: 80px;
  list-style: none;
}

.global-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: 0 32px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
}

.global-nav li.is-current a {
  background: url("img/active_btn.jpg") no-repeat center / cover;
}


/* 下線は不要なら消す */
.global-nav .is-current a::after {
  display: none;
}


/* =========================
   News Section
========================= */

.news {
  width: 100%;
  padding: 120px 0 160px;
}

.news-inner {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 72px;
}

/* News title */
.news-title {
  width: 122px;
  flex-shrink: 0;
}

.news-title img {
  width: 100%;
  height: auto;
  display: block;
}

/* News list */
.news-list {
  flex: 1;
  list-style: none;
}

.news-list li {
  border-bottom: 1px solid #353951;
}

.news-list a {
  display: flex;
  align-items: center;
  gap: 24px;

  padding: 24px 0;

  text-decoration: none;
  font-size: 16px;
  line-height: 24px;

  transition: opacity 0.3s ease;
}

.news-list a:hover {
  opacity: 0.7;
}

/* Date */
.news-date {
  width: 141px; /* XDの見た目基準 */
  flex-shrink: 0;
  white-space: nowrap;
}

/* Text */
.news-text {
  flex: 1;
}


  /* ===== base ===== */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }

    :root{
      /* 1920デザインを崩さず、画面幅に合わせて縮む（広い画面は上限1920で止める） */
      --container: 1920px;
      --side-pad: clamp(16px, 2.5vw, 40px);
      --row-gap: clamp(18px, 2.2vw, 32px);
      --col-gap: clamp(18px, 2.2vw, 36px);

      /* product block sizes (XD目安) */
      --product-logo: clamp(220px, 18vw, 336px);
      --platform-h: clamp(54px, 4.8vw, 80px);

      /* colors */
      --white: #cccccc;
      --line: rgba(255,255,255,.7);
      --line2: rgba(255,255,255,.55);
      --black: #000000;
    }

    /* ===== footer wrapper ===== */
    .site-footer{
      width: 100%;
      color: var(--white);
      background: #000;
    }

    .footer-inner{
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding-left: var(--side-pad);
      padding-right: var(--side-pad);
    }

    /* ===== 1) product section ===== */
    .footer-product{
      /* 背景：back01.jpg（全面） */
      background: url("img/back01.jpg") center / cover no-repeat;
    }

    .footer-product .footer-inner{
      padding-top: clamp(28px, 3.5vw, 56px);
      padding-bottom: clamp(28px, 3.5vw, 56px);
    }

    .product-wrap{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--col-gap);
      min-height: clamp(260px, 26vw, 360px);
    }

    .product-logo{
      width: var(--product-logo);
      aspect-ratio: 1 / 1;
      flex: 0 0 auto;
    }
    .product-logo img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .product-info{
      flex: 0 1 760px;
      min-width: min(520px, 100%);
    }

    /* タイトル/ジャンル… の“左ラベル枠”＋“右テキスト” */
    .spec{
      display: grid;
      grid-template-columns: clamp(140px, 14vw, 200px) 1fr;
      column-gap: clamp(14px, 1.6vw, 24px);
      row-gap: clamp(10px, 1.2vw, 16px);
      align-items: center;
      margin: 0;
    }

    .spec dt{
      border: 1px solid var(--line);
      text-align: center;
      padding: clamp(6px, .8vw, 10px) clamp(10px, 1vw, 14px);
      line-height: 1;
      letter-spacing: .06em;
      font-size: clamp(14px, 1.1vw, 16px);
      white-space: nowrap;
    }
    .spec dd{
      margin: 0;
      font-size: clamp(14px, 1.2vw, 16px);
      letter-spacing: .04em;
      line-height: 1.4;
      color: rgba(255,255,255,.95);
    }

    /* 下段：Switch / Steam */
    .platforms{
      display: flex;
      align-items: center;
      gap: clamp(12px, 1.6vw, 24px);
      margin-top: clamp(14px, 1.8vw, 22px);
    }
    .platforms a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: var(--platform-h);
    }
    .platforms img{
      height: 100%;
      width: auto;
      object-fit: contain;
    }

    /* ===== 2) links section (logos + social + small text) ===== */
    .footer-links{
      background: #000;
    }

    .footer-links .footer-inner{
      padding-top: clamp(16px, 2.2vw, 28px);
      padding-bottom: clamp(16px, 2.2vw, 28px);
    }

    .links-grid{
      display: grid;
      grid-template-columns: 1fr auto 1fr; /* 左 / 中央 / 右(空) で中央を真正面に固定 */
      align-items: center;
      gap: var(--col-gap);
    }

    .brand-logos{
      display: flex;
      align-items: center;
      gap: clamp(18px, 2vw, 32px);
      min-width: 0;
    }
    .brand-logos a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .brand-logos img{
      height: clamp(34px, 3.4vw, 54px);
      width: auto;
      object-fit: contain;
      opacity: .95;
    }

    .social{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(22px, 2.6vw, 44px);
    }
    .social a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height:40px
      border-radius: 999px;
    }
    .social img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: .95;
    }

    .copyright{
      text-align: center;
      margin-top: clamp(10px, 1.2vw, 16px);
      font-size: clamp(12px, 1vw, 14px);
      line-height: 1.6;
      color: rgba(255,255,255,.8);
    }

    /* ===== responsive: narrow ===== */
    @media (max-width: 860px){
      .product-wrap{
        flex-direction: column;
        text-align: left;
      }
      .product-info{
        width: 100%;
        min-width: 0;
      }
      .spec{
        grid-template-columns: 1fr;
      }
      .spec dt{
        text-align: left;
      }
      .links-grid{
        grid-template-columns: 1fr;
        justify-items: center;
      }
      .brand-logos{
        justify-content: center;
        flex-wrap: wrap;
      }
    }

    /* 商品セクション背景 */
.footer-product{
  background: url("img/back01.jpg") center/cover no-repeat;
}

/* 横並びの基準行 */
.product-row{
  display: flex;
  align-items: flex-start; 
  gap: clamp(32px, 4vw, 80px);
}

/* ロゴ */
.product-logo{
  flex: 0 0 auto;
  width: clamp(220px, 18vw, 336px); /* 336px基準、可変 */
  aspect-ratio: 1 / 1;
}
.product-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 右側（spec + platforms） */
.product-right{
  flex: 1 1 auto;
  min-width: 0;
}

/* spec（あなたの今の指定を活かしたグリッド例） */
.spec{
  display: grid;
  grid-template-columns: clamp(140px, 14vw, 200px) 1fr;
  column-gap: clamp(14px, 1.6vw, 24px);
  row-gap: clamp(10px, 1.2vw, 16px);
  margin: 0;
}

/* platformロゴ */
.platforms{
  margin-top: clamp(16px, 2vw, 24px);
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
}
.platforms img{
  height: clamp(56px, 5vw, 80px);
  width: auto;
  display: block;
}

/* SP：縦積み */
@media (max-width: 860px){
  .product-row{
    flex-direction: column;
    align-items: center;
  }
  .product-right{
    width: 100%;
  }
}

/* Coming soon メニュー項目のスタイル */
.global-nav li.is-soon a {
  opacity: 0.5;
  pointer-events: none; /* クリック不可にしたい場合 */
}

/* 固定ヘッダー */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100vw;
  height: 80px;
  background: #000;
}
.mv {
  padding-top: 80px; /* header 高さ分 */
}



/* =========================
   STORY PAGE
========================= */
/* Story全体 */
.story {
  padding: 120px 0 160px;
}

/* 中央固定 */
.story-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* タイトル */
.story-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
}

.story-title-img {
  width: 140px; /* XD値に合わせて微調整OK */
}

.story-sub {
  font-size: 24px;
  letter-spacing: 0.2em;
  color: #4F5FA8;
}

/* 年代 */
.story-era {
  margin: 40px 0;
  font-size: 28px;
  color: #353951;
  font-weight: 600;
}

/* 本文 */
.story-text {
  max-width: 720px;
  margin: 0 auto;
  line-height: 2.4;
  font-size: 18px;
  font-weight: 600;
  
}

/* 強調 */
.story-text .emphasis {
  color: #2328a5;
  font-size: 18px;
    font-weight: 600;
}

.story-text .danger {
  color: #870047;
  font-weight: bold;
  font-size: 22px;
}


body {
  overflow-x: hidden;
}

/* =========================
   GUIDELINE PAGE
========================= */
.guideline {
  padding: 120px 0 160px;
}

.guideline-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.guideline-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
}

.guideline-title-img {
  width: 392px;
  height: 80px;
  object-fit: contain;
}

.guideline-sub {
  font-size: 24px;
  letter-spacing: 0.2em;
  margin-top: 20px;
}

/* 冒頭リード文 */
.guideline-lead {
  margin: 60px auto;
  font-size: 16px;
  line-height: 2.2;
  max-width: 720px;
  font-weight: 600;
}

/* スクロールボックス */
.guideline-box {
  width: 1200px;
  height: 682px;
  margin: 0 auto;
  background: #ffffff95;
  overflow-y: auto;
  padding: 40px;
/* スクロールバー */
  scrollbar-width: thin;              /* Firefox用 */

}

/* Webkit系ブラウザ用 */
.guideline-box::-webkit-scrollbar {
  width: 10px;
}

.guideline-box::-webkit-scrollbar-track {
  background: #ffffff; /* トラック背景（暗めグレー） */
}

.guideline-box::-webkit-scrollbar-thumb {
  background: #ffffff; /* スクロールバー本体（濃いグレー） */
  border-radius: 5px;
}

.guideline-box::-webkit-scrollbar-thumb:hover {
  background: #666; /* ホバー時に少し明るく */
}


.guideline-content {
  font-size: 16px;
  line-height: 2;
  color: #000000;
  text-align: left;
  max-width: 1120px;
  margin: 0 auto;
}

.guideline-lead {
  margin: 60px auto;
  font-size: 16px;
  line-height: 1.6; /* ← 行間を狭めた例 */
  max-width: 720px;
}

.guideline-content p{
  text-shadow: none;
}

.guideline-note {
  margin: 60px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 2;
  color:#4f5fa8;
  max-width: 720px;
  font-weight: 600;
}



/* =========================
   CONTACT PAGE
========================= */

.contact {
  padding: 120px 0 160px;
  font-family: "Zen Old Mincho", serif;
}

.contact__header {
  text-align: center;
  margin-bottom: 60px;
  padding-top: 60px;
}

.contact__title-image {
  width: 392px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto;
}

.contact__subtitle {
  font-size: 24px;
  margin-top: 20px;
  letter-spacing: 0.1em;
}

.contact__lead {
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
  margin: 40px auto 0;
  text-shadow: none;
  font-weight: 600;
}

.contact__form {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: "Zen Old Mincho", serif;
}

.contact__form-group {
  margin-bottom: 24px;
  text-align: left;
}

.contact__form-group label {
  font-size: 16px;
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.contact__form-group input,
.contact__form-group textarea,
.contact__form-group select {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  color:#353951;
  background-color: #ffffff90;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 4px;
    font-family: "Zen Old Mincho", serif;
}

.contact__form-group textarea {
  height: 160px;
  resize: vertical;
}

.contact__submit {
  display: block;
  margin: 40px auto;
  width: 200px;
  height: 40px;
  background: url("img/contact_btn.png") no-repeat center / contain;
  border: none;
  cursor: pointer;
}

.contact-message {
  font-size: 14px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.8);
  max-width: 720px;
  margin: 60px auto 0;
  text-align: center;
}

.required {
  color: #9b0606;
  margin-left: 2px;
  font-size: 12px;
}

.contact__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto;
  width: 200px;
  height: 40px;
  background: url("img/contact_btn.png") no-repeat center / cover;
  border: none; /* ← この1行が囲いをなくすポイント */
  border-radius: 9999px; /* 丸みは維持されます */
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  font-family: "Zen Old Mincho", serif;
}


.contact__submit span {
  z-index: 1;
}


/* =========================
   CHARACTER PAGE
========================= */

.character-page {
  background: #000;
  font-family: 'Zen Old Mincho', serif;
  color: #000000;
}

.character {
  padding: 120px 0 160px;
}

.story-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.story-title-img {
  width: auto;
  height: 80px;
}

.story-sub {
  font-size: 24px;
  letter-spacing: 0.2em;
}

.character-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.character-thumbnails img {
  width: 140px;
  cursor: pointer;
  transition: transform 0.3s;
}

.character-detail {
  display: flex;
  align-items: center; /* ← 縦方向中央揃え */
  justify-content: center;
  background-size: cover;
  gap: 80px;
  align-items: center!important;
}


.character-bg img {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
}

.character-info {
  width: 50%;
  z-index: 1;
}

.character-info .character-name {
    height: 110px;
    width: auto;
    margin-left: -10px;
}
.character-line {
  width: 100%;
  max-width: 560px;
}
.cv-label {
  width: 110px;
  margin-bottom: 8px;
  margin-left: 10px;
}
.cv-name {
  font-size: 16px;
  margin-bottom: 16px;
}
.character-description {
  font-size: 20px;
  line-height: 1.8;
  max-width: 553px;
  margin-bottom: 24px;
  margin-left: 10px;
  color: #000000;
}
.character-detail-attr {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 24px;
  margin-left: 10px;
}

.share-btn img {
  width: 120px;
}

.character-visual {
  width: 45%;
  text-align: center;
  z-index: 1;
}
.character-visual img {
  width: 100%;
  max-width: 500px;
}

/* SP対応 */
@media (max-width: 960px) {
  .character-detail {
    flex-direction: column;
    align-items: center;
  }
  .character-info, .character-visual {
    width: 100%;
    text-align: center;
  }
}



/* =========================
   固定背景（画像）
========================= */

.story-page {
  position: relative;
  z-index: 0;
}

.story-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
}


.story,
.guideline,
.contact,
.character{
  background: none;
}

.scale-wrapper {
  position: relative;
  z-index: 1;
}

/* =========================
   共通 固定背景
========================= */

body {
  position: relative;
  z-index: 0;
}
/* =========================
   全ページ共通 固定背景
========================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("img/haikei.png") center / cover no-repeat;
  z-index: -1;
}

/* 中身を前面に出す */
.scale-wrapper,
.site-footer {
  position: relative;
  z-index: 1;
}

.site-footer {
  position: relative;
  z-index: 1;
}


/* =========================
   テキストリンク
========================= */
.text-link {
  color: #2d52bb; 
  text-decoration: none;
}



/* ▼ select 専用のスタイル */
.select-wrapper {
  position: relative;
  width: 100%;
}

/* selectの矢印を消してカスタム表示にする */
.select-wrapper select {
  width: 100%;
  padding: 16px;
  padding-right: 48px;
  font-size: 16px;
  color:#00000099;
  background-color: #ffffff90;
  border-radius: 6px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* ↓これが効くやつ */
.select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #2243a4;
}



.text-accent {
  color: #f16b6b; /* お好みで #ddb26f や #a8c9ff などに変更OK */
  font-weight: bold; /* 必要なら */
}



/* =========================
   Page Title (Story / Character / etc)
========================= */

.page-title {
  font-family: "Zen Old Mincho", serif;
  font-size: 60px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #4F5FA8;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  background-clip: text;
}



/* サブタイトル（必要なら） */
.page-subtitle {
  margin-top: 16px;
  font-size: 24px;
  letter-spacing: 0.25em;
  color: #cccccc;
}

/* =========================
   News Title
========================= */

.news-title-text {
  font-family: "Zen Old Mincho", serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.125em;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 0 20px rgba(0,0,0,0.8);
  padding-top: .5em;

  /* Newsレイアウト用 */
  width: 122px;      /* もとの画像幅を踏襲 */
  flex-shrink: 0;
}



.page-title {
  /* ▼ 白いぼやけた囲い（ここが肝） */
  text-shadow:
    0 0 6px rgba(255,255,255,0.85),
    0 0 14px rgba(255,255,255,0.65),
    0 0 28px rgba(255,255,255,0.45),
    0 0 60px rgba(255,255,255,0.25);}
    
.page-subtitle {
  font-size: 24px;
  letter-spacing: 0.2em;
  text-shadow:
    0 0 6px rgba(255,255,255,0.85),
    0 0 14px rgba(255,255,255,0.65),
    0 0 28px rgba(255,255,255,0.45),
    0 0 60px rgba(255,255,255,0.25);
}

.news-title-text{
  text-shadow:
    0 0 6px rgba(255,255,255,0.85),
    0 0 14px rgba(255,255,255,0.65),
    0 0 28px rgba(255,255,255,0.45),
    0 0 60px rgba(255,255,255,0.25);
}

.news-list a{
color: #18181d;
font-weight: 600;
}

.contact__lead{
color:#353951;
}
.page-title, .page-subtitle, .news-title-text{
  color:#0a2e94;
  font-weight: 700;
}

p.page-subtitle{
margin-top: 0px;
}


.global-nav, .footer-inner{
text-shadow: none;
}




/* =========================
   Character Grid 6×2
========================= */

.character-grid {
  display: grid;
  grid-template-columns: repeat(6, 160px);
  grid-auto-rows: 400px;
  gap: 40px 40px;
  justify-content: center;
  margin: 60px auto 0;
}

/* 共通カード */
.character-card {
  position: relative;
  width: 160px;
  height: 400px;
}

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

/* メインキャラ */
.character-card.is-main {
  transition: transform .4s ease, box-shadow .4s ease;
}
.character-card.is-main:hover {
  box-shadow:
    0 0 20px rgba(255,255,255,.35),
    0 0 40px rgba(255,255,255,.15);
}

/* =========================
   近日公開カード
========================= */

.character-card.is-soon {
  opacity: 1;
}

/* ▼ テキストが入らない問題の解決 */
.soon-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 縦書き＋サイズ調整 */
  writing-mode: vertical-rl;
  font-size: 14px;
  letter-spacing: .25em;
  line-height: 1;

  /* はみ出し防止 */
  max-height: 100%;
  overflow: hidden;

  color: #ffffff;
}


/* =========================
   Character Image Hover Swap
========================= */

.character-card.is-main {
  position: relative;
  overflow: hidden;
}

/* 共通 */
.character-card .char-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

}

/* 通常表示（b付き） */
.character-card .char-img.is-default {
  opacity: 1;
  z-index: 1;
}

/* ホバー用（bなし） */
.character-card .char-img.is-hover {
  opacity: 0;
  z-index: 2;
}

/* hover時 */
.character-card.is-main:hover .char-img.is-default {
  opacity: 0;
}

.character-card.is-main:hover .char-img.is-hover {
  opacity: 1;
}


/* =========================
   Snow Overlay (lightweight)
========================= */

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;

  /* 背景より上・本文より下 */
  z-index: 0;

  opacity: .7;

  /* レイヤー数を2枚に削減 */
  background-image:
    radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.35) 0 2px, transparent 4px);

  background-size:
    160px 160px,
    320px 320px;

  background-position:
    0 0,
    120px -200px;

  /* ▼ blur / blend-mode を削除（超重要） */
  /* filter: blur(); */
  /* mix-blend-mode: screen; */

  animation: snow-bg 10s linear infinite;
}

/* transform を使わない */
@keyframes snow-bg{
  from{
    background-position:
      0 -200px,
      120px -400px;
  }
  to{
    background-position:
      0 200px,
      120px 400px;
  }
}


/* ===== セクション全体 ===== */
.character-section {
  position: relative;
}

/* ===== 白背景帯（XD通り） ===== */
.character-bg {
  position: absolute;
  top: 150px;               /* ← XDの帯位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 535px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  z-index: 1;
}

/* ===== 中身 ===== */
.character-inner {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* ===== 立ち絵 ===== */
.character-visual {
  width: 563px;
  margin-left: 40px;
}
.character-visual img {
  width: 100%;
  display: block;
}

/* ===== 情報（透明） ===== */
.character-info {
  max-width: 530px;
}

/* 名前画像 */
.character-name {
  width: 530px;
  display: block;
}

/* 横線 */
.character-line {
  width: 100%;
  display: block;
}

/* テキスト */
.character-text {
  font-family: "Zen Old Mincho", serif;
  font-size: 18px;
  line-height: 1.8;
  color: #58577a;
}

/* 年齢など */
.character-meta {
  font-size: 16px;
  color: #58577a;
  margin-top: 8px;
}

/*タイトル周り*/
.character-detail .story-head {
  margin-bottom: -20px;
}

/*名前発光*/
.character-text,.character-meta{
  filter:
    drop-shadow(0 0 .25px rgba(255,255,255,1))
    drop-shadow(0 0 .25px rgba(255,255,255,1))
    drop-shadow(0 0 .25px rgba(255,255,255,1))
}





/* =========================
   全体調整1/23
========================= */

.coming-soon{
opacity: .5;
}

.news-title-text{
color: #3854a4;
}

/* =========================
キャラ別
========================= */
/* sho kazuki 専用 */
body.sho-kazuki .character-visual {
  margin-left: 20;  }

/* kaname  mihoto専用 */
body.mihoto-yukihito .character-info,
body.raiden-kaname .character-info {
    max-width: 530px;
    margin-top: 80px;
}



/* =========================
ヘッダ周りの改良
========================= */

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100vw;
  height: clamp(56px, 4.166vw, 80px); /* 80px */
  background: #000;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

/* logo */
.logo {
  width: clamp(88px, 6.458vw, 124px);
  margin-left: clamp(16px, 2.083vw, 40px);
}

/* nav */
.global-nav {
  margin-left: clamp(32px, 4.166vw, 80px);
}

.global-nav ul {
  display: flex;
  gap: clamp(32px, 4.166vw, 80px);
}

.global-nav a {
  font-size: clamp(12px, 0.833vw, 16px);
  padding: 0 clamp
}

/* 削除 or 無効化 */
.scale-wrapper {
  transform: none;
}

.mv {
  padding-top: clamp(56px, 4.166vw, 80px);
}

.logo {
  width: clamp(88px, 6.458vw, 124px);   /* 124 / 1920 */
  height: clamp(48px, 3.75vw, 72px);    /* 72 / 1920 */
  margin-left: clamp(16px, 2.083vw, 40px);
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.global-nav li.is-current a {
  height: 100%;
  background-image: url("img/active_btn.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.global-nav a {
  height: clamp(56px, 4.166vw, 80px);
  padding: 0 clamp(12px, 1.666vw, 32px);
  font-size: clamp(12px, 0.833vw, 16px);
}

.contact-btn {
  width: clamp(140px, 10.416vw, 200px); /* 200 / 1920 */
  height: clamp(32px, 2.083vw, 40px);   /* 40 / 1920 */

  display: flex;
  align-items: center;
  justify-content: center;

  background: url("img/contact_btn.png") no-repeat center / contain;

  font-size: clamp(12px, 0.833vw, 16px);
}

.header {
  height: clamp(56px, 4.166vw, 80px);
}

.global-nav {
  height: 100%;
}

.global-nav ul {
  height: 100%;
  display: flex;
  align-items: stretch; /* ← center じゃない */
}

.global-nav li {
  height: 100%;
}

.global-nav a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 clamp(16px, 2vw, 32px);
  font-size: clamp(12px, 0.833vw, 16px);
}

.global-nav li.is-current a {
  background-image: url("img/active_btn.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* ← contain じゃない */
}






/* =================================================================================================
   SP Layout
================================================================================================= */
/* =========================
   Footer links (黒帯) 再定義
   ========================= */

.footer-links {
  background: #000;
  padding: 26px 0 18px;
}

.footer-links .footer-inner {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-links .links-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}

.footer-links .brand-logos {
  display: flex;
  gap: 56px;
  align-items: center;
  justify-content: flex-start;
}

.footer-links .brand-logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-links .brand-logos img {
  height: 60px;
  width: auto;
  display: block;
}

.footer-links .social {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
}

.footer-links .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-links .social img {
  width: 32px;
  height: 32px;
  display: block;
}


/* =========================
   SP (375px想定)
   ========================= */
@media (max-width: 480px) {

  /* 黒帯を “上：SNS / 線 / 下：ロゴ / いちばん下：©” の並びに */
  .footer-links {
    padding: 22px 0 18px;
  }

  .footer-links .footer-inner {
    padding: 0 16px;
  }

  .footer-links .links-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  /* 並び順：SNS → divider → brand-logos */
  .footer-links .social { order: 1; }
  .footer-links .brand-logos { order: 3; }

  /* divider（スクショの横線） */
  .footer-links .links-grid::after {
    content: "";
    order: 2;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.18);
  }

  /* ロゴは中央寄せ */
  .footer-links .brand-logos {
    justify-content: center;
    gap: 60px;
  }

  /* ©ProjectHN を下寄せ気味に */
  .footer-links .copyright {
    margin-top: 10px;
    font-size: 10px;
    opacity: 0.9;
  }
}


@media (max-width: 767px) {

  /* ---------- 基本 ---------- */
  html, body {
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
  }

  .scale-wrapper {
    transform: none !important;
    width: 100%;
  }

  /* ---------- Header ---------- */
  .header {
    height: 56px;
    padding: 0 16px;
  }

  .logo img {
    width: 120px;
    height: auto;
  }

  .global-nav {
    display: none;
  }

  /* ---------- 共通コンテナ ---------- */
  .sp-container {
    width: 343px;
    margin: 0 auto;
  }

  /* ---------- メイン情報ブロック ---------- */
  .game-info {
    padding-top: 80px;
  }

  .game-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }

  .game-info-label {
    width: 88px;
    height: 32px;
    border: 1px solid #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }

  .game-info-text {
    font-size: 14px;
    line-height: 1.6;
  }

  /* ---------- Platform ---------- */
  .platform {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 32px 0 40px;
  }

  .platform img {
    height: 32px;
    width: auto;
  }

  /* ---------- フッター ---------- */
  .footer {
    background: #000;
    padding: 32px 0 24px;
    text-align: center;
  }

  .footer-sns {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
  }

  .footer-sns img {
    width: 32px;
    height: 32px;
  }

  .footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-bottom: 16px;
  }

  .footer-logos img {
    height: 60px;
    width: auto;
  }

  .footer-copy {
    font-size: 10px;
    color: #fff;
  }

  /* ---------- SPメニュー ---------- */
  .sp-menu {
    padding: 80px 0 60px;
    text-align: center;
  }

  .sp-menu a {
    display: block;
    margin-bottom: 24px;
    color: #fff;
    text-decoration: none;
  }

  .sp-menu a .en {
    font-size: 32px;
    line-height: 1.2;
  }

  .sp-menu a .jp {
    font-size: 14px;
    opacity: 0.85;
  }

  .sp-menu .coming-soon {
    opacity: 0.4;
    pointer-events: none;
  }

    .header .contact-btn {
    display: none;
  }
    .hamburger {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 20px;
    z-index: 1001;
  }

  .hamburger span {
    display: block;
    height: 2px;
    background: #fff;
    margin-bottom: 6px;
  }

  .hamburger span:last-child {
    margin-bottom: 0;
  }
  
}

@media (max-width: 767px) {

  /* === News 全体 === */
  .news {
    padding: 56px 0 64px;
  }

  .news-inner {
    width: 343px;
    margin: 0 auto;
  }

  /* PC用 absolute を完全無効化 */
  .news-inner * {
    position: static !important;
  }

  /* === 見出し === */
  .news-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 32px;
  }

  /* === 各ニュースブロック === */
  .news-item {
    margin-bottom: 32px;
  }

  /* 日付 */
  .news-date {
    font-size: 14px;
    margin-bottom: 12px;
  }

  /* 本文 */
  .news-text {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
  }

  /* 罫線（XDの線） */
  .news-divider {
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.4);
  }

    .news-inner {
    width: 343px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;   /* ← これが「レーン」 */
    row-gap: 32px;                /* ← 記事ブロック間の空気 */
  }

  /* PC absolute の完全無効化 */
  .news-inner * {
    position: static !important;
  }

  /* Newsの紙面レーン */
  .news-inner {
    width: 343px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0px;
  }

  /* タイトル自体は触らなくていい */
  .news-title-text {
    text-align: center;
    margin-bottom: 0px;
  }

  /* news-list は左揃えに戻す */
  .news-list {
    width: 100%;
    justify-self: stretch;
  }

    .news-list a{
        padding: 8px 0;
        margin-top: 16px;
  }

      .news-text {
        margin-bottom: 15px;
    }


/*フッター プロダクト紹介*/
.footer-inner{
margin-top: 24px;
}
.footer-product .footer-inner {
    padding-top: 60px;
    padding-bottom: 60px;
}

.spec dt{
padding: 4px 8px;
}

.spec{
grid-template-columns: clamp(110px, 14vw, 200px) 1fr;
}
.platforms{
  justify-content: center; 
margin-top: 32px;
}

/*フッターロゴ周り*/

.footer-links .brand-logos{
  gap: 32px;  
}


}




/* =========================
   SP ストーリー
========================= */
@media (max-width: 767px) {

  .story-era {
    font-size: 18px;   
    margin-bottom: 24px;
    margin-top: 0px;
  } 

  .story-text {
    font-size: 14px;  
    line-height: 1.7;
  }

.story-text .emphasis {
    font-size: 15px;  
  }


.story-text .danger {    
  font-size: 20px;  
  } 
}

/* =========================
   SP ガイドライン
========================= */
@media (max-width: 767px) {
.guideline-lead{
    font-size: 14px;  
    line-height: 1.7;
    text-align: left;
}
.guideline-box {
  background: #ffffff;
  opacity: 0.7;
  border-radius: 16px;
}
.guideline-inner {
  width: 100%;
  max-width: 343px; /* Storyと同じ */
  margin: 0 auto;
  padding: 0 16px;
}

  .guideline-box {
    position: relative;   /* ← absoluteを殺す */
    top: auto;
    left: auto;
    z-index: auto;
  }

    .guideline-inner {
    width: 100%;
    padding-left: 5vw;
    padding-right: 5vw;
    box-sizing: border-box;
  }

  .guideline-content,
  .guideline-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .guideline-note{
    text-align: left;
  }

  .guideline-lead{
    margin-bottom: 24px;
    margin-top: 0px;
  }

  .guideline-note{
    margin-top: 24px;
  }

.guideline-box{
  padding: 24px;
}
}



/* =========================
   SP コンタクト
========================= */
@media (max-width: 767px) {


.contact .contact-inner {
  width: 100%;
  max-width: 343px; /* Storyと同じ */
  margin: 0 auto;
}

.contact .page-subtitle {
  margin-top: 0;
}

.contact__lead{
  margin-top: 16px;
}

.contact__header{
    margin-bottom: 16px;}

.contact__lead{
    font-size: 14px;  
    line-height: 1.7;
    text-align: left;
    margin-bottom: 24px;}

  .contact__form {
    max-width: 343px;       /* Story / Guideline と揃える */
    margin: 32px auto 0;
    padding: 0;
  }

  .contact__form-group {
    margin-bottom: 20px;
  }

  .contact__form-group label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .contact__form-group input,
  .contact__form-group textarea,
  .contact__form-group select {
    padding: 14px 14px;
    font-size: 14px;
    border-radius: 6px;
  }

  .contact__form-group textarea {
    min-height: 140px;
  }

  /* selectの矢印位置をSPで微調整 */
  .select-wrapper::after {
    right: 14px;
  }

  /* 送信ボタン：少しだけ下に余白 */
  .contact__submit {
    margin-top: 32px;
  }
}

/* =========================
   SP キャラクターTOP（修正版）
========================= */
@media (max-width: 767px) {

  /* hover用画像はSPでは使わない */
  .char-img.is-hover {
    display: none;
  }

  .char-img.is-default {
    display: block;
  }

  /* インナー */
  .character-inner {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* グリッド：3列だけ決める */
  .character-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
  }

  
  /* ❌ 高さ・比率を決めない */
  .character-card {
    width: 100%;
    position: relative;
  }

  /* 画像が自然比率で伸びる */
  .character-card img {
    width: 100%;
    height: auto;   /* ← これが重要 */
    display: block;
  }

   .character-card {
    aspect-ratio: auto !important;
    height: auto !important;
  }

  .character-card img {
    aspect-ratio: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


@media (max-width: 767px) {
  .character-card {
    aspect-ratio: 92 / 230; /* すでに使ってた比率 */
    height: auto;
  }

  .character-grid {
    grid-auto-rows: auto; /* ← min-content は外す */
    row-gap: 8px;
    column-gap: 12px;
  }

  
}

/* =========================
   SP：キャラ画像が消える対策（absolute解除）
========================= */
@media (max-width: 767px) {

  /* aタグもブロック化して高さを持たせる */
  .character-card.is-main{
    display: block;
  }

  /* SPは hover画像を使わない（既にOKだけど念押し） */
  .character-card.is-main .char-img.is-hover{
    display: none !important;
  }

  /* ★ここが本命：absolute をやめる */
  .character-card.is-main .char-img{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* トリムしない */
    opacity: 1 !important;
  }

  /* 念のため：カード側も高さ固定しない */
  .character-card{
    height: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 767px) {

  /* SPは「b無し（hover用）」を表示 */
  .character-card.is-main .char-img.is-default {
    display: none !important;
  }

  .character-card.is-main .char-img.is-hover {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
  }
}

/* Characterページ：タイトルと画像の隙間を詰める */
.character-page .story-head{
  margin-bottom: 16px; /* ←40px→16pxに */
}

.character-page .character-grid{
  margin-top: 24px; /* ←60px→24pxに */
}



/* =========================
   SP：　キャラ個別ページ
========================= */

/* PCでは非表示（SPのみ表示） */
.sp-back-link {
  display: none;
}

@media (max-width: 767px) {

  /* ---------- キャラ詳細ブロック（XDの白帯＋配置） ---------- */
  .character-section {
    position: relative;
    margin: 0 auto;
    padding: 24px 0 0; /* 白帯の開始位置はセクション先頭でOK */
  }

  /* 白背景帯（opacity 40% / radius 16px） */
  .character-section .character-bg {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 24px;              /* 余白感を合わせる */
    height: 727px;          /* XDの目安 */
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    z-index: 0;
    pointer-events: none;
  }

  /* 中身（幅343相当で中央寄せ） */
  .character-section .character-inner {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 343px;
    margin: 0 auto;
    padding: 48px 0 24px;   /* 白帯内の上余白（立ち絵のtop感） */
    box-sizing: border-box;
    min-height: 727px;      /* 白帯と揃える */
  }


  .character-section .character-visual img {
    height: auto;
    display: block;
    margin: 0 auto;
  }



  /* 情報ブロック（320px幅） */
  .character-section .character-info {
    width: 100%;
    max-width: 320px;
    margin: 14px auto 0; /* 立ち絵→名前の間（XDの14px感） */
  }

  .character-section .character-name {
    width: 320px;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .character-section .character-line {
    width: 100%;
    height: auto;
    display: block;
    margin: 8px 0; /* 名前↔テキストの呼吸 */
  }


  /* 文字カラーはPC継承（ここでは色指定しない） */
  .character-section .character-text {
    font-size: 14px;        /* XD */
    line-height: 1.6;       /* 読みやすさ */
    margin: 0;
    text-align: left;
    font-weight: 600;
  }

  .character-meta{
  font-weight: 600;
  text-align: left; 
  }

  .character-section .character-meta {
    font-size: 14px;        /* XD */
    line-height: 1.6;
    margin: 0;
  }

  /* ---------- SPのみ：一覧へ戻る ---------- */
  .sp-back-link {
    display: block;
    width: calc(100% - 32px);
    max-width: 343px;
    margin: 16px auto 24px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    padding: 10px 0;
    /* 色はPC継承：指定しない */
  }

  /* ---------- 下部の縦長画像グリッド（TOPページ仕様引用） ---------- */

  /* hover用画像はSPでは使わない */
  .char-img.is-hover {
    display: none;
  }
  .char-img.is-default {
    display: block;
  }

  /* グリッド：343幅で3列 */
  .character-grid {
    width: calc(100% - 32px);
    max-width: 343px;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    box-sizing: border-box;
  }

  /* 高さ固定はしない（見切れ防止） */
  .character-card {
    display: block;
    position: relative;
  }

  .character-card img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 767px) {
  .character-section .character-inner {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* 追加推奨 */
    justify-content: flex-start; /* 上から積む */
    gap: 0;                      /* PCのgapが効いてたら殺す */
    width: calc(100% - 32px);
    max-width: 343px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 立ち絵→名前の間隔をXDに寄せる */
  .character-section .character-visual {
    margin: 0 0 14px;
  }

  /* 情報は320幅で */
  .character-section .character-info {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 767px) {

  .character-section{
    position: relative;
    padding-bottom: 24px; /* 白帯の下余白ぶん */
  }

  .character-section .character-bg{
    top: 24px;
    left: 16px;
    right: 16px;

    bottom: 24px;   /* ← これが肝：下まで伸びる */
    height: auto;   /* ← 固定値を無効化 */
  }
}

@media (max-width: 767px) {

  /* 背景（白帯）を343pxに固定して中央へ */
  .character-section .character-bg {
    left: 50%;
    right: auto;
    width: calc(100% - 32px);    
    transform: translateX(-50%);
  }

  /* 中身は320px */
  .character-section .character-inner {
    width: calc(100% - 32px);
    max-width: 343px; /* 背景と同じ外枠に合わせる */
  }

  .character-section .character-info {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 名前画像/線画像があるなら、確実に320枠へ */
  .character-section .character-name,
  .character-section .character-line {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  /* 本文やメタが別クラスなら一緒に320枠へ（必要なら） */
  .character-section .character-text,
  .character-section .character-meta {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================
   SP 修正
========================= */
@media (max-width: 767px) {
/*立ち絵サイズ感*/

    .character-section .tachie.is-sp {
    width: 80vw;
    height: auto;
    display: block;
    margin: 0 auto;
  }

body.raiden-kaname .character-section .tachie.is-sp {
    width: 100vw;
    max-width: 343px;
  }
body.mihoto-yukihito .character-info, body.raiden-kaname .character-info{
  margin-top: 0;
}}

/*文字サイズ*/


/* =========================
フォーム修正
========================= */

.contact-message{
color: rgb(19 41 136);
line-height: 1.5;
}
@media (max-width: 767px) {
  .contact-message{
  text-align: left;}
}









/* =========================
   SP 共通タイトル周り
========================= */
@media (max-width: 767px) {
.page-title{
  font-size: 32px;
}


.page-subtitle{
  font-size: 16px;
}
.story-head,.guideline-head{
  margin-bottom: 24px;
}

.story,.guideline,.character,.contact{ 
  padding: 40px 0 80px;
}
}


/* =========================
   SP 共通インナー
========================= */
@media (max-width: 767px) {.guideline-inner,
.story-inner,.character-inner {
  width: 100%;
  max-width: clamp(320px, 100vw, 420px);
  margin: 0 auto;
  padding: 0 16px;
}}
/* =========================
   SP：scale-wrapper 無効化
========================= */
@media (max-width: 767px) {
  .scale-wrapper {
    transform: none !important;
    width: 100%;
  }
}


/* =========================
   SP のみ改行
========================= */
.sp-br {
  display: none;
}

/* SPだけ改行を有効に */
@media (max-width: 767px) {
  .sp-br {
    display: inline;
  }
}


/* =========================
   PC のみ改行
========================= */
/* デフォルト：改行しない（SP） */
.pc-only {
  display: none;
}

/* PCだけ改行 */
@media (min-width: 769px) {
  .pc-only {
    display: inline;
  }
}



/* PCではSPメニューを非表示 */
@media (min-width: 768px) {
  .sp-menu,
  .hamburger {
    display: none !important;
  }
}

/* デフォはPC表示 */
.character-visual .tachie.is-sp { display: none; }

@media (max-width: 767px) {
  .character-visual .tachie.is-pc { display: none; }
  .character-visual .tachie.is-sp { display: block; }
}


/* =========================
   SP：News 日付幅を狭める
========================= */
@media (max-width: 767px) {

  .news-list a {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* 日付と本文の距離 */
  }

  /* 日付を最小限に */
  .news-date {
    width: auto;
    min-width: 5.5em;   /* ← ここが肝（好みで調整） */
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.7;       /* 主張を弱める（任意） */
  }

  /* 本文を最大幅に */
  .news-text {
    flex: 1;
    width: auto;
    font-size: 14px;
    line-height: 1.7;
    margin-top: -3px;
  }

}

























/*SP ハンバーガー*/
/* ===== hamburger ===== */
.hamburger {
  display: none;
}

@media (max-width: 767px) {
  .hamburger {
    display: block;
    position: absolute;
    top: 18px;
    right: 16px;
    width: 32px;
    height: 24px;
    background: none;
    border: none;
    z-index: 1001;
    cursor: pointer;
  }

  .hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: 0.3s ease;
    
  }

  .hamburger span:nth-child(1) { top: 0; }
  .hamburger span:nth-child(2) { top: 11px; }
  .hamburger span:nth-child(3) { top: 22px; }

  /* × 状態 */
  .hamburger.is-open span:nth-child(1) {
    transform: rotate(45deg);
    top: 11px;
  }
  .hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.is-open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 11px;
  }
}

/* ===== sp menu ===== */
@media (max-width: 767px) {
  .sp-menu {
    position: fixed;
    inset: 0;
    background: url("/img/sp_menu_bg.jpg") center / cover no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1000;
    text-shadow:none;
  }

  .sp-menu.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .sp-menu-list {
    margin: 120px auto 0;
    width: 90%;
    text-align: center;
  }

  .sp-menu-list li {
    margin-bottom: 8px;
    font-family: "Zen Old Mincho", serif;
    font-size: 32px;
    color: #fff;
  }

  .sp-menu-list span {
    display: block;
    font-size: 14px;
    margin-top: 6px;
    opacity: 0.8;
  }

  .sp-menu-list a {
    color: #fff;
    text-decoration: none;
  }

  .sp-menu-list .is-disabled {
    opacity: 0.5;
  }

  /* SNS */
  .sp-menu-sns {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 24px;
    font-size: 24px;
    color: #fff;
  }
}
@media (max-width: 767px) {
  .sp-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sp-menu-list li {
    list-style: none;
  }
}
@media (max-width: 767px) {
  .sp-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh; /* ← 明示 */
    background-image: url("img/sp_menu_bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1000;
  }

  .sp-menu.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 767px) {
  .sp-menu {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 縦センター */
    align-items: center;
  }

  .sp-menu-list {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .sp-menu-list a {
    font-size: clamp(18px, 4vh, 32px);
    line-height: 1.4;

  }

  .sp-menu-list .jp {
    font-size: clamp(12px, 2vh, 14px);
    margin-top: 4px;
    opacity: 0.85;
  }
}





/* メニュー表示中は背景スクロールを止める */
body.menu-open{
  overflow: hidden;
  height: 100vh;
  touch-action: none; /* スマホの指スクロールも抑止 */
}

/* sp-menu 自体もスクロールさせない */
@media (max-width: 767px){
  .sp-menu{
    overflow: hidden;
  }
}


/* =========================
 コンタクト プライバシー同意
========================= */  


/* プライバシー同意ブロック（全体を中央） */
.contact-privacy {
  display: flex;
  justify-content: center;
  margin: 32px 0 24px;
}

/* チェック＋テキストを“塊として中央”に */
.privacy-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 14px;
  color: #222;
  text-align: center;
  cursor: pointer;
}

/* チェックボックス */
.privacy-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

/* テキスト */
.privacy-check span {
  display: inline-block;
  line-height: 1.4;
  text-align: center;
}

/* リンク */
.privacy-check a {
  text-decoration: underline;
}




/* =========================
メインビジュアル
========================= */

/* 初期状態では両方非表示 */
.mv-inner img.pc,
.mv-inner img.sp {
  display: none;
  width: 100%;
  height: auto;
}

/* PC表示（画面幅769px以上） */
@media screen and (min-width: 769px) {
  .mv-inner img.pc {
    display: block;
  }
  .mv {
    padding-top: 0px;
}
}

/* SP表示（画面幅768px以下） */
@media screen and (max-width: 768px) {
  .mv-inner img.sp {
    display: block;
  }
}

/* =========================
   プラットフォームロゴ
========================= */
.platform-logo {
  height: 60px;           /* 全体の見た目を揃える */
  min-height: 50px;       /* すべてのロゴに最小保証 */
  width: auto;            /* 横幅は自動調整で比率維持 */
  object-fit: contain;    /* 縦横比維持で収まるように */
}


/* =========================
   フッター
========================= */
.footer-links .copyright {
  margin-top: 16px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 11px;
  color: #4b4b4b;
  opacity: 0.9;
  font-weight: 100;
  line-height: 1.25;
}

@media screen and (max-width: 768px) {
  .footer-links .copyright {
  }}