/* ========================================
   Variables (変数定義)
   ======================================== */
:root {
    --color-primary: #80e6ff;    
    --color-secondary: #0096ff;  
    --color-accent: #ff7bb2;   
    --color-yellow: #ffec80;   
    --color-text: #333333;     
    --color-white: #ffffff;
    --color-bg-light: #e6f7ff;  

    /* Layout */
    --content-width: 1150px;     
}

/* ========================================
   Reset & Base
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
}
body {
    font-family: "fot-udmarugo-large-pr6n", "FOT-UD丸ゴ_ラージ Pr6N", "M PLUS Rounded 1c", sans-serif;
    color: var(--color-text);
    background-color: transparent;
    line-height: 1.6;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100; /* 全てのセクションの一番奥に敷き詰める */
    
    /* NEWSとSTORYで共通して見せたい背景画像（sec02_bg）を指定 */
    background-image: url(../images/sec02_bg.webp); 
    background-image: image-set(url(../images/sec02_bg.webp) 1x, url(../images/2x/sec02_bg@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/sec02_bg.webp) 1x, url(../images/2x/sec02_bg@2x.webp) 2x);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    color: inherit;
    text-decoration: none;
}
a, button {
    cursor: pointer;
}

ul, ol {
    list-style: none;
}


img, video {
    -webkit-touch-callout: none;
    
    user-select: none; 
    -webkit-user-select: none;
}


/* =========================================
   PC/SP 表示切り替えクラス
========================================= */
@media (min-width: 769px) {
  .invisible-pc { display: none !important; }
}
@media (max-width: 768px) {
  .invisible-sp { display: none !important; }
}


/* ========================================
   改行タグのPC/SP出し分け
   ======================================== */
/* スマホ（768px以下）の時は、PC用の改行を消す */
@media (max-width: 768px) {
    .br-pc { display: none; }
}

/* PC（769px以上）の時は、スマホ用の改行を消す */
@media (min-width: 769px) {
    .br-sp { display: none; }
}


/* =========================================
   ヘッダー / フッター
========================================= */
#dmm_ntgnavi {
    position: relative;
    top: 0;          
    left: 0;         
    width: 100%;     
    z-index: 999;
    background: url(../images/bg_navimain.gif) center center repeat-x;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    font-size: 12px;
    font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
    display: flex;
    justify-content: space-between;
}
#dmm_ntgnavi ul {
    list-style: none;
    margin: 2px 0;
    padding: 0;
    display: flex;
    width: 50%;
}
#dmm_ntgnavi ul li {
    margin: 0 6px 0 0;
    line-height: 15px;
}
#dmm_ntgnavi .navi_left li > a {
    display: block;
    padding: 0 3px 0 8px;
    text-decoration: none;
    border: 1px solid #eee;
    border-radius: 3px;
}
#dmm_ntgnavi .navi_left li > a:hover {
    background: #eee;
    border: 1px solid #666;
    border-radius: 3px;
}
#dmm_ntgnavi .navi_left li > a span {
    display: block;
    padding: 9px 10px 7px 28px;
    color: #333;
    font-weight: bold;
}
#dmm_ntgnavi .navi_left li.dmm_top img { margin: 8px 5px 8px 0 }
#dmm_ntgnavi .navi_left li.ntg_top { margin-left: 10px; }
#dmm_ntgnavi .navi_left li.ntg_top span {
    background: url(../images/bg_bt_olgtop.gif) 0 center no-repeat;
    font-size: min(2.9vw,12px);
}
#dmm_ntgnavi .navi_right {
    justify-content: flex-end;
    font-size: 10px;
}
#dmm_ntgnavi .navi_right li { margin: 0 10px 0 0; padding: 8px 5px; }
#dmm_ntgnavi .arrow { padding-left: 14px; background: url(../images/arrow_common.gif) no-repeat left center; }
#dmm_ntgnavi .tx-point { font-size: 16px; font-weight: bold; color: #ff4b4b !important; }
#dmm_ntgnavi a { color: inherit; text-decoration: none; }
#dmm_ntgnavi p { margin: 0; line-height: 2.6em; }
#dmm_ntgnavi .clear { clear: both; }

footer {
    position: relative; 
    bottom: 0;       
    left: 0;         
    width: 100%;     
    z-index: 899;    
    background: #fff;
    text-align: center;
    padding: 0.32% 1.2%;
    font-size: min(3.1vw,16px);
    line-height: 2.3em;
    color: #777;
}
footer .copy {
    display: block;
    margin: 0px auto;
    font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    -webkit-text-size-adjust: 100%;
}



/* 共通コンテナ */
.inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* 共通見出し */
.sec-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    color: var(--color-accent); 
}




/* ========================================
   Sections 
   ======================================== */

/* Header */
.header {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* 背景色やグラデーションが必要なら追加 */
}


/* ========================================
   ハンバーガーボタン
   ======================================== */
.menu-open-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffffff 0%, #ccfff7 100%);
    border: 2px solid #0096ff;
    border-radius: 50%;
    z-index: 900;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0, 150, 255, 0.2);
    transition: transform 0.2s;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, scale 0.2s ease;
}
.menu-open-btn.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-open-btn:hover {
    scale: 1.05;
}
/* 三本線 */
.menu-open-btn span {
    display: block;
    width: 26px;
    height: 3px;
    background-color: #0096ff;
    border-radius: 2px;
}

/* ========================================
   半透明オーバーレイ（背景の暗幕）
   ======================================== */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 150, 255, 0.4); 
    z-index: 998;
    
    /* 初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* ========================================
   メニューパネル本体（右からスライド）
   ======================================== */
.menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: clamp(300px, 25vw, 450px); 
    height: 100vh;
    z-index: 999;
    
    background-image: url(../images/menu_bg.webp);
    background-image: image-set(url(../images/menu_bg.webp) 1x, url(../images/2x/menu_bg@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/menu_bg.webp) 1x, url(../images/2x/menu_bg@2x.webp) 2x);
    background-size: cover; 
    /* 上と左を基準に配置 */
    background-position: left top;

    border-top-left-radius: 40px;
    
    /* 初期状態は右画面外に隠しておく */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    box-shadow: -10px 0 30px rgba(0, 100, 255, 0.15);
}

/* 中身の余白調整 */
.menu-panel__inner {
    padding: 120px 40px 40px; /* 上は閉じるボタンを避けるために広め */
    height: 100%;
    overflow-y: auto; /* 画面が縦に狭い場合はスクロールさせる */
}

/* ========================================
   「開いた」状態のクラス（JSで付与）
   ======================================== */
body.is-menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
}
body.is-menu-open .menu-panel {
    /* 右側から定位置（0）へスライドイン */
    transform: translateX(0);
}

/* ========================================
   閉じるボタン（丸枠＋バツ印）
   ======================================== */
.menu-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffffff 0%, #ccfff7 100%);
    border: 2px solid #0096ff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}
.menu-close-btn:hover {
    transform: scale(1.1) rotate(90deg); 
}
/* バツ印をCSSで描画 */
.menu-close-btn::before,
.menu-close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 3px;
    background-color: #0096ff;
    border-radius: 2px;
}
.menu-close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.menu-close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ========================================
   メニュー中身のデザイン
   ======================================== */
.menu-logo {
    text-align: left;
    margin-bottom: 50px;
    padding-left: 5%; 
}
.menu-logo img {
    width: 100%;
    max-width: 350px;
}

.menu-list {
    font-family: "fot-udmarugo-large-pr6n", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
}
.menu-list li {
    /* 左端を揃える */
    padding-left: 10%; 
}
.menu-list a {
    display: inline-block;
    color: #0096ff;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 800;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.2s;
}

/* ホバー時のピンク色とアンダーライン */
.menu-list a:hover {
    color: #ff7bb2;
}
.menu-list a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff7bb2;
    transform: scaleX(0); /* 最初は線を隠す */
    transform-origin: left;
    transition: transform 0.3s ease;
}
.menu-list a:hover::after {
    transform: scaleX(1); /* ホバーで線を伸ばす */
}

/* ========================================
   SNSボタン
   ======================================== */
.menu-sns {
    display: flex;
    gap: 20px;
    padding-left: 10%;
}
.sns-icon {
    width: 45px;
    transition: transform 0.2s;
}
.sns-icon:hover {
    transform: translateY(-4px);
}
.sns-icon img {
    width: 100%;
}

/* ========================================
   メニューパネル：画面の「縦幅（高さ）」が低い時の自動縮小設定
   ======================================== */
@media (max-height: 768px) {
    /* 1. パネル内側の上下の余白を縮める（閉じるボタンに被らない最低限を確保） */
    .menu-panel__inner {
        padding-top: max(85px, 12vh); 
        padding-bottom: 30px;
    }
    
    /* 2. ロゴのサイズを小さくし、下の隙間も詰める */
    .menu-logo {
        margin-bottom: 5vh; /* 固定の50pxから可変に */
    }
    .menu-logo img {
        max-width: 240px; /* 固定の350pxから縮小 */
    }
    
    /* 3. メニューリストの行間と下の隙間を詰める */
    .menu-list {
        gap: 2.5vh; /* 固定の30pxから可変に */
        margin-bottom: 5vh; /* 固定の60pxから可変に */
    }
    
    /* 4. 文字サイズ自体も、画面の高さに合わせて「キュッ」と自動縮小させる */
    .menu-list a {
        font-size: clamp(14px, 3.6vh, 18px);
    }
}

/* 【安全対策】スマホの横持ちなど、極端に縦幅が狭くなった時（480px以下）の最終形態 */
@media (max-height: 480px) {
    .menu-panel__inner {
        padding-top: 75px;
        padding-bottom: 15px;
    }
    .menu-logo {
        margin-bottom: 15px;
    }
    .menu-logo img {
        max-width: 160px;
    }
    .menu-list {
        gap: 10px;
        margin-bottom: 20px;
    }
    .menu-list a {
        font-size: 13px;
    }
    .sns-icon {
        width: 35px;
    }
}






/* ========================================
   Hero Section (FV)
   ======================================== */
.sec-hero {
    position: relative;
    background: var(--color-primary) center top/cover no-repeat; 
    background-image: url(../images/2x/fv_bg001@2x.webp);
    background-image: image-set(url(../images/2x/fv_bg001@2x.webp) 1x, url(../images/2x/fv_bg001@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/2x/fv_bg001@2x.webp) 1x, url(../images/2x/fv_bg001@2x.webp) 2x);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1920 / 1250; 
    overflow: hidden;
}

.hero__inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; 
  padding-top: max(40px, 5.1vw); 
    z-index: 10;
}

/* ロゴ */
.hero__logo {
  width: clamp(280px, 42vw, 771px);
  margin-bottom: 0; 
  animation: openLogo 3s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

@keyframes openLogo {
  0% {
      /* 左右から50%ずつ隠す（＝中央の線だけ見えている状態） */
      clip-path: inset(0 50% 0 50%);
      opacity: 0; 
      transform: scale(0.95); 
  }
  100% {
      /* 隠している部分を0にする（＝全開） */
      clip-path: inset(0 0% 0 0%);
      opacity: 1;
      transform: scale(1);
  }
}

.hero__catch-wrapper {
  position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: max(40px, 16vw); 
    width: 100%;
}
/* キャッチコピー */
.hero__catch {
  width: clamp(260px, 36vw, 688px);
  animation: openCatch 2.5s cubic-bezier(0.25, 1, 0.5, 1) 2.5s both;
}
@keyframes openCatch {
  0% {
      /* 右側を100%切り抜いて完全に隠した状態 */
      clip-path: inset(0 100% 0 0);
      opacity: 0;
      /* 開始位置を少しだけ左にずらしておく */
      transform: translateX(-15px);
  }
  100% {
      /* 切り抜きを0にして全開 */
      clip-path: inset(0 0 0 0);
      opacity: 1;
      /* 定位置に戻る */
      transform: translateX(0);
  }
}


/* ガチャバッジ (右下に絶対配置) */
.hero__badge-gacha {
    position: absolute;
    right: calc(50% - clamp(260px, 40vw, 728px) / 2 - clamp(80px, 8vw, 150px));
    width: clamp(100px, 10.5vw, 202px);
    border: none;
    background: none;
    
    animation: popBadge 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 4.3s both;
}

.hero__badge-gacha img {
    display: block;
    width: 100%;
    height: auto;
    transition: scale 0.3s ease; /* ホバー時の拡大を滑らかに */
}

/* ホバー時に2枚の画像を同時に少し拡大 */
.hero__badge-gacha:hover img {
    scale: 1.05; 
}

/* 上の層：ボタン本体 */
.hero__badge-gacha .badge-base {
    position: relative;
    z-index: 2; /* ドットより手前に */
}

/* 下の層：回るドット画像 */
.hero__badge-gacha .badge-dots {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform-origin: center; /* 念のため中心点を指定 */
    /* 10秒かけて等速（linear）で無限（infinite）に回り続ける */
    animation: spinDots 20s linear infinite;
}

/* ドットの回転アニメーションキーフレーム */
@keyframes spinDots {
    0% { rotate: 0deg; }
    100% { rotate: 360deg; }
}

@keyframes popBadge {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 事前登録エリア全体 */
.hero__reg-area {
    position: relative;
    width: clamp(320px, 47vw, 900px); 
    margin-top: max(20px, 1.5vw);
}

/* ガチャ確率アップリボン */
.hero__ribbon {
    position: absolute;
    top: -2.2vw;   /* 1920pxの時に約 -35px */
    left: -2.2vw;  /* 1920pxの時に約 -45px */
    width: 18.5vw; /* 1920pxの時に約 240px */
    z-index: 6;

    animation: openRibbon 1.2s cubic-bezier(0.25, 1, 0.5, 1) 3.8s both;
}
@keyframes openRibbon {
    0% {
        /* 右側を100%切り抜いて完全に隠した状態 */
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        /* ※ transform: translateX を削除し、位置を固定しました */
    }
    100% {
        /* 切り抜きを0にして全開 */
        clip-path: inset(0 0 0 0);
        opacity: 1;
        /* ※ transform を削除 */
    }
}


/* 事前登録ボックス */
.hero__reg-box {
    /* 枠線背景画像 */
    background-image: url(../images/cta_bg.webp);
    background-image: image-set(url(../images/cta_bg.webp) 1x, url(../images/2x/cta_bg@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/cta_bg.webp) 1x, url(../images/2x/cta_bg@2x.webp) 2x);
    background-repeat: no-repeat;
    background-size: 100% 100%; /* 背景画像をボックス全体に引き伸ばす */
    
    width: 100%;
    aspect-ratio: 897 / 157; /* ユーザー様が設定した正しい比率！ */
    
    padding: 2.0vw 1.5vw 1.0vw 1.5vw; 
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2%;
    
    min-height: 0;
}

/* DMMボタン */
.hero__reg-left,
.hero__reg-right {
    flex: 0 0 26%; 
    height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero__reg-left {
    flex: 0 0 28%;
}
.btn-dmm img,
.qr-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%; 
    object-fit: contain; 
}

.btn-dmm {
    display: block;
    transition: opacity 0.3s;
    border: none;
    background: none;
}

.btn-dmm:hover {
    opacity: 0.8;
}

/* 中央テキスト・チェックボックス */
.hero__reg-center {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", sans-serif;
  font-weight: 400;
    flex: 1; /* 残りの余白を埋める */
    display: flex;
    flex-direction: column;
    padding-top: 0.3vw;
    padding-left: 0.5vw; 
    gap: 0.2vw;
    font-size: min(0.85vw, 16px);
    color: #666;
}

/* （チェックボックス周りはそのまま） */
.check-label {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    cursor: pointer;
}

.check-label input[type="checkbox"] {
    accent-color: #5bc8ff;
    width: 1vw;
    height: 1vw;
    min-width: 12px; /* さすがにチェックできなくなると困るので、これだけ最小値を設置 */
    min-height: 12px;
}

.provider {
    margin-top: 0.1vw;
    font-size: min(0.7vw, 16px);
}

/* 右QRコード */
.hero__reg-right {
    flex: 0 0 26%; /* Flexboxの比率で幅を管理 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.3vw;
}

.qr-img {
    width: 100%;
    max-width: 228px;
    height: auto;
}






/* ========================================
   Concept Section
   ======================================== */
.sec-concept {
    position: relative;
    padding: clamp(0px, 1vw, 0px) 0 clamp(30px, 10vw, 100px);
    overflow: hidden;
    z-index: 2;
}

.sec-concept::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 波線の高さ（clamp）を引いた高さにし、一番下を透明で空けておきます */
    height: calc(100% - clamp(30px, 4vw, 80px)); 
    background-color: var(--color-primary);
    z-index: 0;
}

.concept__inner {
    position: relative;
    z-index: 10;
}

/* --- タイトルエリア --- */
.concept__header {
    position: relative; /* ★追加：絶対配置の基準（枠）にする */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: clamp(20px, 1vw, 70px);
    padding: 2vw 0; /* ★追加：背面の装飾が上下にはみ出しても切れないように少し余白を持たせる */
}

/* タイトル画像（前面） */
.concept__title-img {
    position: relative;
    z-index: 2; /* ★追加：装飾より手前に出す */
    width: clamp(280px, 65vw, 860px); 
    margin-bottom: 0; /* ★修正：下の装飾線との余白を消す */
}

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

/* ディバイダー（区切り線） */
.concept__divider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: clamp(300px, 150vw, 1400px);
    
    z-index: 1; /* ★追加：タイトルの後ろに敷く */
    margin-top: 0;
    pointer-events: none; 
}

.concept__divider img {
    width: 100%;
    height: auto;
}

/* --- メインコンテンツ（重なりエリア） --- */
.concept__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1100px; 
    margin: 0 auto;
    position: relative;
}

/* 左側：キャラ＆フキダシ */
.concept__left {
    position: relative;
    flex: 0 0 33%; /* 全体の約3分の1の幅を確保 */
    z-index: 5;
}

/* ノート風フレームとキャラクターの重なり */
.concept__chara-frame {
    position: relative;
    width: 100%;
}
.frame-img {
    width: 100%;
    height: auto;
}
.chara-img {
    position: absolute;
    bottom: 4%;
    left: -2%;
    width: 90%;
    height: auto;
    
    /* ★追加：最初は透明で、少し右にずらしておく */
    opacity: 0;
    transform: translateX(3vw); 
}
.concept__content.is-active .chara-img {
    /* 0.8秒かけて定位置へスライド */
    animation: slideInChara 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideInChara {
    0% {
        opacity: 0;
        transform: translateX(3vw); /* 右からスタート */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* 定位置（left: -2%）にピタッと止まる */
    }
}

/* チャットフキダシの絶対配置エリア */
.concept__chats {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* クリックイベントを透過 */
}

/* --- チャットフキダシ（共通ベース） --- */
.chat-bubble {
    position: absolute;
    padding: clamp(10px, 0.6vw, 18px) clamp(12px, 1.5vw, 14px) clamp(10px, 0.6vw, 18px) clamp(15px, 1.5vw, 18px);
    
    border-radius: clamp(14px, 2vw, 24px); 
    
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 700;
    line-height: 1.5;
    max-width: clamp(180px, 20vw, 260px);
    width: max-content; 
    z-index: 10;
}

/* --- 左からのフキダシ（白背景＋青枠） --- */
.chat-left {
    background-color: #ffffff;
    color: #666666; 
    border: 3px solid #3ca9ff; 
    border-bottom-left-radius: 4px; 
    box-shadow: 0 4px 10px rgba(60, 169, 255, 0.15);
    
    /* ★追加：左下を起点にしてアニメーションさせる */
    transform-origin: left bottom;
}

.chat-right {
    background: linear-gradient(135deg, #3ca9ff, #50d9ff);
    color: #ffffff; 
    border: 3px solid #ffffff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 10px rgba(60, 169, 255, 0.3);
    
    /* ★追加：右下を起点にしてアニメーションさせる */
    transform-origin: right bottom;
}

.concept__content.is-active .chat01 { animation: popChat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both; }
.concept__content.is-active .chat02 { animation: popChat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s both; }
.concept__content.is-active .chat03 { animation: popChat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.0s both; }
.concept__content.is-active .chat04 { animation: popChat 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.8s both; }

@keyframes popChat {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-bubble {
    /* (…既存の記述はそのまま…) */
    opacity: 0; 
}


/* --- 各フキダシの配置 --- */
.chat01 {
    top: 8%;
    left: 54%; 
}
.chat02 {
    top: 30%;
    left: 54%; /* 少し左にずらして段差をつける */
}
.chat03 {
    top: 52%;
    left: 65%; /* 主人公のセリフは大きく右へ */
}
.chat04 {
    top: 74%;
    left: 54%;
}

/* 右側：動画エリア */
.concept__right {
    flex: 0 0 65%; /* 動画を大きめに配置 */
    z-index: 2; /* キャラ側より下に敷く */
}

.concept__video-box {
    position: relative;
    width: 100%;
    aspect-ratio: 694 / 438; 
    border: 3px solid var(--color-white);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: relative;
}

.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease; 
}
.concept__video-box:has(.btn-play:hover) .video-thumb {
    filter: brightness(1.11); 
}

/* 再生ボタン（中央配置＆ホバー効果） */
.btn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(60px, 12vw, 135px); /* 画面に合わせて可変 */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-play img {
    display: block;
    width: 100%;
    height: auto;
}

/* 上の層：ボタン本体（枠のサイズを保つ役割も兼ねる） */
.btn-play .play-base {
    position: relative;
    z-index: 2;
}

/* 下の層：ホバーで回るドット */
.btn-play .play-dots {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform-origin: center;
    transition: rotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 親（.btn-play）にホバーした時の動き */
.btn-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

/* ホバー時にドットだけを回転させる */
.btn-play:hover .play-dots {
    rotate: 180deg; 
}




/* --- 下部の波線パーツ --- */
.concept__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    height: clamp(50px, 6vw, 120px); 
    
    background-image: url(../images/sec01_bgend.webp);
    background-repeat: no-repeat;
    
    background-size: 100% 100%; 
    background-position: bottom center;
    
    z-index: 1;
    pointer-events: none;
    
}



/* ========================================
   News Section
   ======================================== */
.news-section {
    position: relative;
    z-index: 1; /* ★CONCEPTセクション(z-index:2)の下に潜り込ませる */
    
    /* ★コンセプトセクションの波線の高さ分だけ、上に引っ張り上げる（透過部分の背面に敷く） */
    margin-top: calc(-1 * clamp(50px, 6vw, 120px));
    
    /* ★上に引っ張り上げた分、中の文字が波線に被らないように上の余白を増やす */
    padding: calc(80px + clamp(50px, 6vw, 120px)) 0 80px;
    
    background-color: transparent;
}

/* タイトル画像（前面） */
.news__title-img {
    position: relative;
    z-index: 2; /* ★追加：装飾より手前に出す */
    /*
    width: clamp(320px, 75vw, 991px); 
    */
    width: 90%;
    max-width: 1008px;
    margin: 0 auto 60px; /* ★修正：下の装飾線との余白を消す */
}


.news-inner {
    width: 90%;
    max-width: 1008px;
    height: 242px;
    margin: 0 auto;
    padding: 15px 30px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    background-color: #ffffff;
    
    background-image: 
        linear-gradient(90deg, rgba(0, 160, 233, 0.09) 1px, transparent 1px),
        linear-gradient(rgba(0, 160, 233, 0.09) 1px, transparent 1px);
    
    background-size: 24px 24px;
    
    border-radius: 20px;
    
    border: 2px solid #00a0e9; /* 外枠が必要な場合 */
    
    background-position: top left;

}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.more {
    display: flex;
    justify-content: center;
    margin: 40px auto 20px auto;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.news-item {
  border-bottom: 1px solid #0096ff;
}

.news-item:last-child {
  border-bottom: 1px solid #0096ff;
}

.news-item a {
  display: grid;
  grid-template-columns: 140px 120px 1fr;
  gap: 16px;
  padding: 15px 0;
  text-decoration: none;
  align-items: center;
}

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

.news-category {
  display: inline-block;
  color: #fff;
  font-size: 1.0rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--color-secondary);
  padding: 3px 10px;
  justify-self: start;
}

.news-date {
  display: inline-flex; 
  align-items: center;  
  gap: 10px;
  color: #0096ff;
  font-size: 1rem;
  font-weight: bold;
  padding: 3px 10px;
}
.news-date::before {
    content: "";
    display: block;
    flex-shrink: 0; /* アイコンが潰れるのを防ぐ */
    
    width: 16px; 
    height: 14px; 
    
    /* アイコン画像の読み込み */
    background-image: url(../images/sec02_iconribbon.webp);
    background-image: image-set(url(../images/sec02_iconribbon.webp) 1x, url(../images/2x/sec02_iconribbon@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/sec02_iconribbon.webp) 1x, url(../images/2x/sec02_iconribbon@2x.webp) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

.news-title {
  color: #3c4346;
  font-weight: 600;
  padding: 3px 10px 3px 20px;
}

.news-detail {
  max-width: 760px;
}

.news-detail h1 {
  margin-top: 12px;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.35;
}

.news-body {
  margin-top: 40px;
}

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



/* ========================================
   Special Section
   ======================================== */
.sec-special {
    position: relative;
    z-index: 30;
    padding: clamp(60px, 8vw, 120px) 0 calc(clamp(60px, 8vw, 120px) + 7vw);
    
    /* 背景色と背景画像（黄色チェック＋ハートなど） */
    background-color: var(--color-yellow);
    background-image: url(../images/2x/sec03_bg@2x.webp);
    background-image: image-set(url(../images/2x/sec03_bg@2x.webp) 1x, url(../images/2x/sec03_bg@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/2x/sec03_bg@2x.webp) 1x, url(../images/2x/sec03_bg@2x.webp) 2x);
    background-repeat: repeat; 
    
    background-size: min(100%, 1200px) auto; 

    background-position: center center;
    overflow: hidden;
}

.special__inner {
    position: relative;
    z-index: 10;
}

/* --- ヘッダー周り --- */
.special__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 70px;
}

.special__title img {
    width: clamp(200px, 52vw, 800px);
}


/* --- メインコンテンツ（パネルとキャラの配置） --- */
.special__content {
    position: relative;
    width: 100%;
    max-width: 1150px; /* キャラクターを含めた最大幅 */
    margin: 0 auto;
}

/* 報酬パネルをまとめる中央の箱 */
.special__panels {
    position: relative;
    z-index: 3; /* キャラより後ろ（下）に敷く */
    /*
    width: 100%;
    */
    width: clamp(280px, 92vw, 880px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
}

/* パネル画像共通 */
.special__panel img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}
.special__panel--full {
    width: 100%;
    /* ★追加：上のパネルは広げた親枠より少し狭くする（カンプの比率） */
    max-width: 700px; 
    margin: 0 auto;
}
/* 下2つの横並びコンテナ */
.special__panel-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(15px, 2.5vw, 30px);
}
.special__panel--half {
    width: 48.5%;
}



.special__panel--half {
    width: 48.5%;
}

/* --- キャラクター（左右に絶対配置） --- */
.special__chara {
    position: absolute;
    z-index: 2; /* パネルより手前（上）に被せる */
    pointer-events: none; /* キャラがパネル上の操作を邪魔しないようにする */
}

/* 左のキャラ */
.special__chara--left {
    bottom: clamp(40px, 16vw, 220px); 
    
    left: -11%; 
    width: clamp(220px, 26vw, 300px);
    opacity: 0;
    transform: translateX(100px);
}

/* 右のキャラ */
.special__chara--right {
    bottom: clamp(40px, 20vw, 250px);
    
    right: -10%;
    width: clamp(280px, 33vw, 380px);
    opacity: 0;
    transform: translateX(-100px);
}



/* 報酬パネル共通：最初は少し小さく、下に下がっていて透明 */
.special__panels .special__panel {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
}

/* --- 注釈テキスト --- */
.special__note {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", sans-serif;
    text-align: center;
    font-size: clamp(12px, 1.4vw, 18px);
    font-weight: bold;
    color: #666;
    margin-top: 30px;
}




.special__content.is-active .special__chara--left { 
    animation: slideToLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
 }
.special__content.is-active .special__chara--right { 
    animation: slideToRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
 }
@keyframes slideToLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes slideToRight { to { opacity: 1; transform: translateX(0); } }

.special__content.is-active .special__panels > .special__panel--full:nth-child(1) { 
    animation: popBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
 }
.special__content.is-active .special__panels > .special__panel--full:nth-child(2) { 
    animation: popBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards;
 }
.special__content.is-active .special__panel-row .special__panel--half:nth-child(1) { 
    animation: popBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s forwards;
 }
.special__content.is-active .special__panel-row .special__panel--half:nth-child(2) { 
    animation: popBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s forwards;
 }
@keyframes popBounce {
     0% { 
        opacity: 0; transform: scale(0.8) translateY(30px);
     } 
     100% { 
        opacity: 1; transform: scale(1) translateY(0);
     } 
}




/* ========================================
   System Section
   ======================================== */
   /* ========================================
   System Section (完全シームレス背景版)
   ======================================== */
.sec-system {
    position: relative;
    z-index: 40;

    /* 1. 波線の高さ分だけ前後に食い込ませる（ネガティブマージン復活） */
    margin-top: -6vw; 
    margin-bottom: -6vw;
    
    /* 2. 食い込ませた分、中身を押し返す */
    padding-top: calc(clamp(80px, 10vw, 150px) + 6vw);
    padding-bottom: calc(clamp(80px, 10vw, 150px) + 6vw);
    
    /* 3. 背景は「メインのリピート画像」1枚だけを全面に敷く！ */
    background-color: #8ce4ff;
    background-image: url(../images/2x/sec04_bg@2x.webp);
    background-image: image-set(url(../images/2x/sec04_bg@2x.webp) 1x, url(../images/2x/sec04_bg@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/2x/sec04_bg@2x.webp) 1x, url(../images/2x/sec04_bg@2x.webp) 2x);
    
    /* ストライプ幅を完璧に合わせ、縦に無限リピート */
    background-size: 100% auto; 
    background-repeat: repeat;
    background-position: top center;
    
    /* 4. ★魔法のコード：波線画像を「型抜き（マスク）」として使う！ */
    -webkit-mask-image: 
        url(../images/2x/sec04_wave_top@2x.webp), 
        url(../images/2x/sec04_wave_bottom@2x.webp), 
        linear-gradient(#000, #000);
    mask-image: 
        url(../images/2x/sec04_wave_top@2x.webp), 
        url(../images/2x/sec04_wave_bottom@2x.webp), 
        linear-gradient(#000, #000);
        
    -webkit-mask-position: top center, bottom center, center;
    mask-position: top center, bottom center, center;
    
    -webkit-mask-size: 100% 6vw, 100% 6vw, 100% calc(100% - 11.5vw);
    mask-size: 100% 6vw, 100% 6vw, 100% calc(100% - 11.5vw);
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.system__inner {
    position: relative;
    z-index: 10;
}

/* --- 上下の波線 --- */
.system__wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(40px, 5vw, 90px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 15;
    pointer-events: none;
}


/* --- ヘッダー周り --- */
.system__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(40px, 6vw, 80px);
}

.special__title img,
.system__title img {
    width: clamp(200px, 65vw, 860px);
}


/* --- メインコンテンツ（ポイントのリスト） --- */
.system__content {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 80px);
}

/* ========================================
   軌跡線（ハートの点線装飾）
   ======================================== */
.system__path-line {
    position: absolute;
    top: 23%; 
    left: 50%;
    transform: translateX(-50%);
    
    width: 100%; 
    max-width: 1240px; 
    height: 94%; 
    
    z-index: 1; /* 親の .sec-system の背景より上で、 .system__inner(z-index:10) より下！ */
    pointer-events: none; 
}

.system__path-line img {
    width: 100%;
    height: auto;
    opacity: 1;
    
    clip-path: inset(0 0 calc(100% - var(--line-progress, 0%)) 0);
    
    transition: clip-path 0.1s ease-out;
}








/* --- 各アイテム（POINT 1〜3） --- */
.system__item {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ========================================
   POINT 2 (偶数番目) の反転と微調整
   ======================================== */
/* 1. フレックスボックスの並び順を逆（右から左）にする */
.system__item:nth-child(even) {
    flex-direction: row-reverse;
}

/* 2. POINTバッジが「左上」にくるため、テキストエリアの余白も左右反転させる */
.system__item:nth-child(even) .right-content {
    /* 元は padding: 13% 10% 5% 5%; なので、左右を入れ替える */
    padding: 13% 5% 5% 5%; 
}

/* 3. 青背景の傾きも、左右対称になるように逆（+5度）にする */
.system__content.is-active .system__item:nth-child(even) .left-movie-bg {
    animation: bgFadeAndRotateEven 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes bgFadeAndRotateEven {
    0% { opacity: 0; transform: rotate(0deg); }
    50% { opacity: 1; transform: rotate(0deg); }
    100% { opacity: 1; transform: rotate(5deg); }
}


.system__left {
    flex: 0 0 33%;
    position: relative;
    z-index: 5;
}

/* ノート画像（背景） */
.left-bg-img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 10%;
}
.left-movie-wrapper {
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 50%; /* ノートに対する動画のサイズ */
    z-index: 10;
}
.left-movie-bg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1px;
    
    /* アニメーションの初期状態 */
    opacity: 0;
    transform: rotate(0deg);
    transform-origin: center center; /* 真ん中を軸に回転させる */
}
.left-front-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親（青背景）にピッタリ合わせる */
    border: 2px solid rgba(0, 0, 0, 0.4);
    border-radius: 2px;

    object-fit: cover;
    
    /* アニメーションの初期状態 */
    opacity: 0;
}



.right-title,
.right-text {
    opacity: 0;
    transform: translateY(15px); /* 少し下に待機させておく */
}


.system__right {
    flex: 0 0 55%; /* 右側の幅割合 */
    position: relative;
    z-index: 2; /* ★左側より奥（下）に敷く */
    
    /* ★左側のノートの下に少し潜り込ませる（マイナスマージン） */
    margin-left: 0%; 
}

/* 白枠画像（背景） */
.right-bg-img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 150, 255, 0.15));
}

/* テキストを絶対配置で枠内に収める */
.right-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* ★右上のPOINTバッジや点線を避けるための余白（上 右 下 左） */
    padding: 13% 10% 5% 5%; 
    text-align: center;
}

/* タイトル画像 */
.right-title {
    width: 100%;
}

/* 直打ちテキスト */
.right-text {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: clamp(12px, 1.8vw, 21px);
    font-weight: 700;
    color: #007bc2; /* カンプに合わせた濃い水色 */
    line-height: 1.8;
    text-align: left;
}

.system__item:nth-child(1) .right-title {
    margin-top: 2%;
    margin-bottom: 6%;
    margin-left: 10%;
    width: clamp(290px, 35vw, 430px); 
    max-width: 430px;
}
.system__item:nth-child(2) .right-title {
    margin-top: 7%;
    margin-bottom: 7%;
    margin-left: 7%;
    width: clamp(320px, 40vw, 460px); 
    max-width: 460px;
}
.system__item:nth-child(3) .right-title {
    text-align: left;
    margin-top: 1%;
    margin-bottom: 7%;
    margin-left: 7%;
    width: clamp(230px, 28vw, 350px); 
    max-width: 350px;
}


.system__item:nth-child(1) .right-text {
    padding: 0 12%; 
}
.system__item:nth-child(2) .right-text {
    padding: 0 8%; 
}
.system__item:nth-child(3) .right-text {
    padding: 0 8%;
}

.system__item:nth-child(1) .right-content { padding: 17% 10% 7% 5%; }
.system__item:nth-child(2) .right-content { padding: 14% 5% 5% 5%; } /* 反転用 */
.system__item:nth-child(3) .right-content { padding: 10% 10% 5% 5%; }




/* ========================================
   テキストの光彩（ぼかしライン）装飾
   ======================================== */
.glow-line {
    position: relative;
    display: inline; /* 念のためブロックレベルにして枠を安定させる */
    z-index: 1; /* テキストを一番手前にする */
}

/* 擬似要素を使って、テキストの背面に光るラインを作る */
.glow-line::after {
    content: "";
    position: absolute;
    bottom: 4px; /* 文字の底辺からの位置（カンプに合わせて微調整） */
    left: 0;
    width: 100%; /* 囲んだ文字の幅にぴったり合わせる */
    
    height: 7px; /* ライン（光）の太さ */
    background-color: #ffd700; /* 光の色（強めの黄色） */
    
    /* ★ここが魔法のコード：ラインだけを強烈にぼかす！ */
    filter: blur(8px); 
    
    z-index: -1; /* テキストの背面に潜り込ませる */
    
    /* ※親の right-text と一緒にフェードインさせるので、ここでの個別アニメは不要 */
}
/* ========================================
   ルビ（ふりがな）の装飾
   ======================================== */
.right-text ruby {
    /* ルビが漢字の中央にピタッと揃うようにする */
    ruby-align: center; 
}

.right-text rt {
    /* 文字サイズ（親要素の半分くらいが綺麗です） */
    font-size: 0.5em; 
    /* ルビの色（ベースの水色と同じか、少し濃くしてもOK） */
    color: #007bc2; 
    /* 少し太字にして視認性を上げる */
    font-weight: 700;
    /* 漢字との隙間の微調整（近すぎる場合は少しマイナスにして離す） */
    line-height: 1; 
    
    transform: translateY(3px);
}



/* ========================================
   SYSTEMセクション アニメーション（初期状態：クラスがつく前）
   ======================================== */
.system__item .system__left,
.system__item .system__right {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 青背景（動画の土台）の初期回転角度だけ個別に待機 */
.system__item .left-movie-bg {
    opacity: 0;
    transform: rotate(0deg);
    transition: opacity 0.5s ease 0.2s, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
}
/* 動画スマホ画面の初期状態 */
.system__item .left-front-img {
    opacity: 0;
    transition: opacity 0.4s ease 0.5s;
}

/* ★大修正：右側の中身（文字やタイトル）の初期状態を「透明 ＋ 少し下」に戻す！ */
.right-title,
.right-text {
    opacity: 0 !important;
    transform: translateY(15px) !important;
    /* 白枠が定位置に到着した後に動き出せるよう、transition を仕込んでおきます */
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ========================================
   SYSTEMセクション アニメーション（発火状態：.is-active がついた時）
   ======================================== */

/* 1. 左右のコンテナ：JSでクラスがついた瞬間、ノートも白枠も下からフワッと定位置へ！ */
.system__item.is-active .system__left,
.system__item.is-active .system__right {
    opacity: 1;
    transform: translateY(0);
}

/* 2. 左側の青背景：コンテナが上がってきた直後（0.3秒後）に、時間差でキュッと傾く！ */
.system__item.is-active .left-movie-bg {
    opacity: 1;
    transform: rotate(-5deg);
}
.system__item.is-active:nth-child(even) .left-movie-bg {
    opacity: 1;
    transform: rotate(5deg);
}

/* 3. 中の動画画面：青背景が傾ききった最後（0.5秒後）に、一番手前に鮮やかにフェードイン！ */
.system__item.is-active .left-front-img {
    opacity: 1;
}

/* ★大修正：白枠が上がってきた後、さらに時間差をつけて文字たちを浮き上がらせる！ */
/* 4. 右側タイトル：白枠の登場（0.8s）がほぼ落ち着く「0.4秒後」からフワッと登場 */
.system__item.is-active .right-title {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 0.4s !important;
}

/* 5. 右側テキスト：タイトルのすぐ後（0.55秒後）に追いかけるように登場 */
.system__item.is-active .right-text {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 0.55s !important;
}

/* ========================================
   SYSTEMセクション：右下注釈テキスト
   ======================================== */
.right-note {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: clamp(10px, 1.1vw, 14px); /* メインテキストより一回り小さく */
    font-weight: 700;
    color: #007bc2; 
    text-align: right; /* 右寄せ */
    margin-top: clamp(8px, 1.5vw, 20px); /* 上のテキストとの隙間 */
    
    /* アニメーション初期状態 */
    opacity: 0 !important;
    transform: translateY(15px) !important;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* PC版：各アイテムごとにメインテキストと右端を揃える */
.system__item:nth-child(1) .right-note { padding-right: 12%; }
.system__item:nth-child(2) .right-note { padding-right: 8%; }
.system__item:nth-child(3) .right-note { padding-right: 8%; }

/* アニメーション発火（メインテキストの少し後にフワッと出す） */
.system__item.is-active .right-note {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 0.7s !important; 
}





/* ========================================
   CHARACTER Section
   ======================================== */
   .sec-character {
    position: relative;
    z-index: 10;
    
    padding: clamp(100px, 12vw, 150px) 0 clamp(120px, 16vw, 200px);
    
    background-color: var(--color-bg-light); 
    background-image: 
        linear-gradient(to bottom, var(--color-bg-light) 0%, var(--color-bg-light) 100px, rgba(230,247,255,0) 300px),
        
        linear-gradient(to top, var(--color-bg-light) 0%, var(--color-bg-light) 12vw, rgba(230,247,255,0) 25vw),
        
        url(../images/sec05_bg.webp);
    
    /* レイヤーが3つになったので、それぞれのリピート・位置・サイズを指定 */
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: top center, bottom center, top center;
    background-size: 100% 100%, 100% 100%, 1500px auto; 
    
    /* マスク（切り抜き）の設定 */
    -webkit-mask-image: 
        linear-gradient(#000, #000), 
        url(../images/2x/sec05_bgwave@2x.webp);
    mask-image: 
        linear-gradient(#000, #000), 
        url(../images/2x/sec05_bgwave@2x.webp);
        
    -webkit-mask-position: top center, bottom center;
    mask-position: top center, bottom center;
    
    -webkit-mask-size: 100% calc(100% - 7vw), 100% 8vw;
    mask-size: 100% calc(100% - 7vw), 100% 8vw;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.char__inner {
    margin: 150px auto;
}


.char__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(40px, 8vw, 100px);
}
.char__title img {
    width: clamp(280px, 65vw, 860px); 
}

/* --- 切り替えパネルの大枠 --- */
.char__display-area {
    position: relative;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}

.char__panel {
    /* JSで切り替えるための初期状態 */
    display: none;
}
.char__panel.is-active {
    display: block;
    /* タブを切り替えた際にフワッと出るアニメーション */
    animation: charFadeIn 0.4s ease-out forwards;
}
@keyframes charFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- パネル内のレイアウト（Flexbox） --- */
.char__content {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    position: relative;
}

/* ========================================
   左右のベースコンテナ（横幅のバランス調整）
   ======================================== */
.char__left {
    position: relative;
    /* 左側を少し広めに取る（全体の54%） */
    width: 70%; 
    
    aspect-ratio: 691 / 503; 
    z-index: 2;
}

.char__right {
    position: relative;
    right: -2%;
    /* 左が広がった分、右側は少し狭くする（全体の42%） */
    width: 38%; 
    
    aspect-ratio: 379 / 389; 
    z-index: 1;
}

/* 枠となる背景画像 */
.bg-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 0;
}

/* 背景画像の内側の余白 */
.char__left-inner {
    position: relative;
    z-index: 12;
    width: 100%;
    height: 100%;
    padding: 7.5% 5% 5% 4.8%; 
    
    display: flex;
    flex-direction: column;
    justify-content: center;

    font-family: "fot-udmarugo-large-pr6n", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.char__right-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    
    padding: 12% 15% 15% 5%; 
    
    /* 中身（セリフ短冊とスチル）を横並びに配置 */
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    gap: 4%; /* 短冊とスチルの間の隙間 */
}

/* ========================================
   左側：プロフィールエリア
   ======================================== */
   .char__prof-head {
    position: absolute;
    top: 0;
    transform: translateY(-50%); 
    left: 5%;
    width: 90%; 
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px; 
    
    z-index: 10;
}

.char__tag {
    background-image: url(../images/sec05_bgrelationship.webp);
    background-image: image-set(url(../images/sec05_bgrelationship.webp) 1x, url(../images/2x/sec05_bgrelationship@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/sec05_bgrelationship.webp) 1x, url(../images/2x/sec05_bgrelationship@2x.webp) 2x);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    color: var(--color-white);
    font-size: clamp(12px, 1.3rem, 24px);
    font-weight: bold;
    
    padding: 6px 5px; 
    width: clamp(140px, 11vw, 160px); /* 「クラスメイト」が綺麗に収まるサイズ */
    
    display: inline-block;
    text-align: center;
    flex-shrink: 0; /* 画面が狭くなっても幅が潰れないようにロック */
}

.char__voices {
    display: flex;
    margin-left: 10px;
    gap: 12px;
}
.btn-voice {
    background: transparent;
    border: none;
    width: clamp(30px, 3.1vw, 36px);
    transition: transform 0.2s ease-out;
}
.btn-voice:hover {
    transform: scale(1.1);
    animation: shakeVoice 0.15s linear 0.2s infinite;
}
@keyframes shakeVoice {
    /* 常に1.1倍（拡大済み）の状態をキープしつつ、左右に小刻みに回転させる */
    0%   { transform: scale(1.1) rotate(0deg); }
    25%  { transform: scale(1.1) rotate(-8deg); }
    50%  { transform: scale(1.1) rotate(0deg); }
    75%  { transform: scale(1.1) rotate(8deg); }
    100% { transform: scale(1.1) rotate(0deg); }
}

.char__name-box {
    margin-top: 0px;
}
.char__furigana {
    color: var(--name-color, #5b4b74);
    font-size: clamp(12px, 1.3rem, 15px);
    font-weight: bold;
    margin-left: 0px;
    margin-bottom: -6px;
    letter-spacing: 2px;
}
.char__name {
    color: var(--name-color, #5b4b74);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 900;
    letter-spacing: 0.05em;
}
.char__catch {
    display: flex;
    align-items: center; /* アイコンとテキストの縦の中央をピタッと揃える */
    gap: 0px; /* アイコンとテキストの隙間 */
    margin-top: 0px;
    margin-left: 0px;
}

/* 左側のリボンアイコン */
.icon-ribbon {
    width: clamp(14px, 1.2vw, 54px); 
    height: auto;
    flex-shrink: 0;
}

/* 右側のキャッチフレーズテキスト */
.catch-text {
    color: var(--name-color, #5b4b74);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: bold;
    line-height: 1.4;
    padding-left: 10px;
}



/* プロフィール表エリア（点線枠） */
.char__detail-box {
    position: relative;
    margin-top: 5px;
    width: 64%;
}
.prof-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
}
.char__detail-text {
    position: relative;
    z-index: 1;
    padding: 5% 5%; 
}

/* Gridレイアウトで表を2列に綺麗に組む */
.char__detail-text dl {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 8px 12px;
    align-items: center;
}
.char__detail-text dt {
    background-color: var(--char-color, #5b4b74); 
    border: 1px solid var(--char-color, #5b4b74); 
    
    color: #ffffff;
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: bold;
    padding: 3px 11px 2px 11px;
    text-align: center;
    border-radius: 15px;
    white-space: nowrap;
}
.char__detail-text dd {
    font-size: clamp(12px, 1vw, 14px);
    font-weight: bold;
    color: #333333;
}

.char__desc {
    margin-top: 2px;
    font-size: clamp(14px, 1.4rem, 16px);
    padding: 5px;
    line-height: 1.5;
    color: #333333;
    width: 66%;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 3px rgba(255, 255, 255, 0.9), 0 0 2px #ffffff;
}
.char__desc span {
    color: var(--char-color, #a78cd1);
}


.char__stand {
    position: absolute;
    bottom: 1.2%; 
    
    right: 0.5%; 
    
    width: 60%; 
    
    z-index: 10;
    pointer-events: none; /* キャラの下にあるテキスト等を選択可能にする */
}
.stand-img {
    width: 100%;
    opacity: 0;
    transform: translateX(20px);
}
.char__panel.is-active .stand-img {
    /* パネル自体の登場(0.4s)に合わせて、0.1秒遅れでスライド＆フェードイン */
    animation: slideInStandImg 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}
@keyframes slideInStandImg {
    0% {
        opacity: 0;
        transform: translateX(20px); /* 右側からスタート */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* 定位置（x=0）にピタッと止まる */
    }
}


.bg-corner {
    position: absolute;
    bottom: -1px;
    right: 0px;
    
    width: 89px; 
    height: auto;
    
    z-index: 18; 
    
    pointer-events: none; 
}



.serif-img {
    position: absolute;
    top: -8%; 
    right: -20%; 
    
    /* 短冊のサイズ（立ち絵に対する割合） */
    width: 57%; 
    z-index: 25; /* キャラより手前に出す */
    
    animation: floatSerif 3s ease-in-out infinite;
}

/* 短冊フワフワ用キーフレーム */
@keyframes floatSerif {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ========================================
   右側：スチル＆セリフエリア
   ======================================== */
.char__right-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8%;
    /* 右側は左側と少し内側の余白を変えるかも */
    padding: 10% 8%;
}


.char__illust-box {
    position: relative;
    width: 75%; 
    cursor: pointer;
    border-radius: 4px;
    
}

/* ポップアップ全体の大枠 */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 画面の最前面に出す */
    
    /* 初期状態は非表示（透明） */
    display: none; 
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* JSで is-show クラスが付いたら表示 */
.lightbox.is-show {
    display: flex;
    opacity: 1;
}

/* 黒い半透明の背景 */
.lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer; /* 背景クリックで閉じられることを示唆 */
}

/* 画像が入るコンテナ */
.lightbox__content {
    position: relative;
    z-index: 1;
    max-width: 90%;
    max-height: 90vh; /* 画面からはみ出さないように制限 */
}

.lightbox__content img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px; /* お好みで角丸に */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* 閉じる（×）ボタン */
.lightbox__close {
    position: absolute;
    top: -55px; /* スマホでは動画/画像の少し上に配置 */
    right: 0;
    width: 44px;  /* メニュー(60px)より一回り小さく */
    height: 44px;
    background: linear-gradient(135deg, #ffffff 0%, #ccfff7 100%);
    border: 2px solid #0096ff;
    border-radius: 50%;
    cursor: pointer;
    
    /* 元々HTMLに入っている「×」の文字を透明にして隠す */
    font-size: 0;
    color: transparent;
    
    transition: transform 0.2s;
}

/* ホバー時の回転アクションもメニューと統一！ */
.lightbox__close:hover {
    transform: scale(1.1) rotate(90deg);
}

/* バツ印をCSSで描画（サイズもボタンに合わせて縮小） */
.lightbox__close::before,
.lightbox__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px; /* メニュー(24px)より短く */
    height: 3px;
    background-color: #0096ff;
    border-radius: 2px;
}
.lightbox__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.lightbox__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}





/* PC等の画面が広い時はボタンを画像の右上に配置 */
@media (min-width: 769px) {
    .lightbox__close {
        top: -20px;
        right: -60px; 
    }
}


.illust-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* スチルより奥に敷く */
    object-fit: cover; /* スチルと縦横比が違っても枠に合わせて綺麗に埋める */
    
    /* 後で回転アニメーションをさせるための準備 */
    transform: rotate(0deg);
    transform-origin: center center;
}
.char__panel.is-active .illust-bg {
    animation: rotateIllustBg 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
}

@keyframes rotateIllustBg {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(5deg); 
    }
}

.illust-img {
    position: relative;
    display: block;
    width: 100%;
    z-index: 1; /* 背景より手前に出す */
    transition: transform 0.3s ease-out; 
}
.char__illust-box:hover .illust-img {
    transform: scale(1.03);
}

.icon-click {
    position: absolute;
    top: -8%;
    right: -22%;
    width: 25%;
    /* クリックアイコンのフワフワアニメーション */
    animation: floatClick 2s ease-in-out infinite;
}
@keyframes floatClick {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.btn-zoom {
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 15%;
    background: none;
    border: none;
    transition: transform 0.2s;
}
.btn-zoom:hover {
    transform: scale(1.1);
}


/* ========================================
   サムネイル（ナビゲーション）
   ======================================== */
   .char__nav {
    margin: 60px auto 0;
    width: 95%;
    max-width: 1080px; 
    
    aspect-ratio: 1080 / 90; 
    
    background-image: url(../images/sec05_bgthum.webp);
    background-image: image-set(url(../images/sec05_bgthum.webp) 1x, url(../images/2x/sec05_bgthum@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/sec05_bgthum.webp) 1x, url(../images/2x/sec05_bgthum@2x.webp) 2x);
    background-size: 100% auto; /* 横幅100%で、高さは自動（アスペクト比通り） */
    background-repeat: no-repeat;
    background-position: center;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 0 2vw; 
}
.char__thumb-list {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 隙間も画面に合わせてスムーズに縮むように少し調整 */
    gap: clamp(4px, 1.4vw, 20px);
    
    /* ★大修正：絶対に折り返さず1列に強制する！ */
    flex-wrap: nowrap; 
    
    width: 100%;
}
.char__thumb-item {
    width: clamp(40px, 11vw, 110px);
    flex-shrink: 1; 
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    
    /* ★追加：中の見えない余白（行間）を完全に殺す魔法 */
    display: block;
    line-height: 0;
    font-size: 0;
}
.char__thumb-item:hover {
    transform: translateY(-4px);
}
/* --- 画像の切り替え制御 --- */
/* 初期状態：通常（OFF）だけを表示し、ON画像は隠す */
.char__thumb-item .thumb-off { display: block; }
.char__thumb-item .thumb-on  { display: none; }

/* ホバー時 または アクティブ（is-active）時：ONを表示し、OFFを隠す */
.char__thumb-item:hover .thumb-off,
.char__thumb-item.is-active .thumb-off {
    display: none;
}
.char__thumb-item:hover .thumb-on,
.char__thumb-item.is-active .thumb-on {
    display: block;
}

.char__thumb-item img {
    display: block; 
    width: 100%;
    height: auto;
}





/* ========================================
   Story & Gallery Section
   ======================================== */
.sec-story {
    position: relative;
    z-index: 1; 
    
    margin-top: calc(-1 * clamp(50px, 6vw, 150px)); 
    
    padding: calc(clamp(60px, 8vw, 100px) + clamp(50px, 6vw, 120px)) 0 clamp(80px, 12vw, 150px);
    
    background-color: transparent;
}

.story__inner {
    position: relative;
    z-index: 10;
}

/* タイトル */
.story__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(30px, 5vw, 60px);
}
.story__title img {
    width: clamp(280px, 65vw, 860px); 
}

/* メインレイアウト */
.story__content {
    display: flex;
    justify-content: center;
    align-items: center; /* 左右の縦の中央を揃える */
    gap: 4%; /* 左右の隙間 */
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* 左側：ギャラリー画像 */
.story__left {
    flex: 0 0 45%; /* 幅の割合（カンプに合わせて微調整してください） */
}
.gallery-img {
    width: 100%;
    height: auto;
    /* 軽くドロップシャドウをつけて浮かせる */
    filter: drop-shadow(0 15px 25px rgba(0, 50, 150, 0.2));
}

/* 右側：テキスト＆サムネ枠 */
.story__right {
    flex: 0 0 51%; /* 幅の割合 */
    position: relative;
    /* 背景画像（sec06_tbg.webp）の比率で箱の形をロック */
    aspect-ratio: 569 / 588; /* ※実際の画像のpx数に書き換えてください */
}
.story__right-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: drop-shadow(0 15px 25px rgba(0, 50, 150, 0.15));
}

.story__right-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    
    padding: 8% 2% 16% 3%; 
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* テキストを上、サムネを下に押しやる */
}

/* テキストエリア */
.story__text-area {
    margin-bottom: 10px;
    padding: 2% 7% 0% 8%; 
}
.story__text {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: clamp(12px, 1.7vw, 20px);
    font-weight: 700;
    line-height: 1.6;
    color: #0096ff; /* 濃いブルーグレー（カンプの文字色） */
    letter-spacing: 0.00em;
}

/* ピンク色のマーカー風装飾 */
.marker-yellow {
    position: relative; /* 基準にするため追加 */
    color: #ff31b0; 
    padding: 0 2px;
    z-index: 1; /* 文字を上に */
}
.marker-yellow::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* 下半分（60%）だけ背景を敷く */
    background-color: #fff6b8;
    z-index: -1; /* 文字の裏側に潜り込ませる */
    
    opacity: 0; /* 最初は透明にしておく */
    transition: opacity 1.2s ease-in-out; /* 1.2秒かけて「ぼやっと」表示 */
}
.marker-yellow.is-show-marker::before {
    opacity: 1;
}

/* サムネイルエリア（仮） */
.story__nav {
    width: 100%;
    margin-top: 20px; /* 下にピタッと寄せる */
    padding: 0 2%;
}




/* 左側のギャラリー画像 */
.gallery-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 15px 25px rgba(0, 50, 150, 0.2));
    
    /* ★追加：JSで切り替わった時にフワッとさせる */
    transition: opacity 0.4s ease-in-out;
}

/* サムネイルリスト */
.story__thumb-list {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 8px;
}
.story__thumb-item {
    width: calc((94% - 30px) / 4);
    cursor: pointer;
    
    /* 謎の余白を消すお守り */
    display: block;
    line-height: 0;
    font-size: 0;
    transition: transform 0.2s;
}
.story__thumb-item:hover {
    transform: translateY(-3px);
}

/* --- サムネイル画像のON/OFF切り替え --- */
.story__thumb-item .thumb-off { display: block; }
.story__thumb-item .thumb-on  { display: none; }

.story__thumb-item:hover .thumb-off,
.story__thumb-item.is-active .thumb-off {
    display: none;
}
.story__thumb-item:hover .thumb-on,
.story__thumb-item.is-active .thumb-on {
    display: block;
}

.story__thumb-item img {
    display: block;
    width: 100%;
    height: auto;
}


/* ========================================
   Information Section (sec07)
   ======================================== */
.sec-info {
    position: relative;
    padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 50px);
    
    /* 背景（水色＋ハート・リボン柄） */
    background-color: #bbf0ff;
    background-image: url(../images/sec07_bg.webp);
    background-image: image-set(url(../images/sec07_bg.webp) 1x, url(../images/2x/sec07_bg@2x.webp) 2x);
    background-image: -webkit-image-set(url(../images/sec07_bg.webp) 1x, url(../images/2x/sec07_bg@2x.webp) 2x);
    background-size: 800px auto; /* パターンサイズ調整 */
    background-repeat: repeat;

    
    font-family: "fot-udmarugo-large-pr6n", sans-serif;
}

/* --- 上段：ロゴ ＆ ゲーム情報 --- */
.info__top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    margin-bottom: clamp(40px, 6vw, 60px);
}
.info__logo {
    width: clamp(240px, 30vw, 400px);
}
.info__details {
    font-family: "fot-udmarugo-large-pr6n", sans-serif;
    font-size: clamp(12px, 1vw, 18px);
    font-weight: 700;
    color: #333;
}
/* --- ゲーム情報のリスト --- */
.info__details dl {
    display: block; 
}

.info__details dt {
    /* ★修正：左詰めでそのまま横に並べる */
    display: inline; 
    color: #ff3399; 
    border-right: none; /* 縦長になるボーダー線を消す */
    padding-right: 0;
    margin-right: 0;
}

/* ★追加：borderの代わりに、テキストの「|」を文字として差し込む */
.info__details dt::after {
    content: "|"; 
    color: #ff3399; /* 水色 */
    margin: 0 12px; /* 「|」の左右の隙間 */
    font-weight: bold; /* 線が太くなりすぎないように調整 */
}

.info__details dd {
    /* ★修正：dtのすぐ右にピタッと続ける */
    display: inline; 
    font-weight: 600;
    margin: 0;
}

.info__details dd::after {
    content: "";
    display: block;
    margin-bottom: 12px;
}



/* --- 中段：動作環境パネル --- */
.info__spec {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto clamp(40px, 6vw, 60px);
    background-color: rgba(230, 248, 255, 0.85); /* 白っぽい半透明 */
    border-radius: 16px;
    padding: clamp(30px, 4vw, 50px) clamp(20px, 4vw, 40px);
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
}
.info__spec-title {
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 900;
    color: #333;
    white-space: nowrap;
    
    padding-right: 3%;
    border-right: 1px solid #333; /* 縦の区切り線 */
}
.info__spec-content {
    display: flex;
    gap: 3%;
    flex: 1;
}
.spec-col {
    flex: 1;
    color: #333;
}
/* 左側（PCブラウザ）の幅を少し狭くする */
.info__spec-content .spec-col:nth-child(1) {
    flex: 2; /* 左の比率 */
}

/* 右側（DMM GAMES STORE）の幅を少し広くする */
.info__spec-content .spec-col:nth-child(2) {
    flex: 3; /* 右の比率 */
}
.spec-col h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0099ff; /* 青色 */
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 900;
    margin-bottom: 15px;
}
.spec-col h4 .dot {
    display: block;
    width: 10px;
    height: 10px;
    background-color: #0099ff;
    border-radius: 50%;
}
.spec-col ul li {
    display: flex;
    font-size: clamp(12px, 1vw, 18px);
    font-weight: 700;
    line-height: 1.6;
}

/* --- 下段：SNS ＆ リンクボタン --- */
.info__sns {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
}
.sns-link {
    width: clamp(50px, 5vw, 70px);
    transition: transform 0.2s;
}
.sns-link:hover {
    transform: translateY(-4px);
}
.sns-link img {
    width: 100%;
}

.info__links {
    display: flex;
    justify-content: center;
    gap: 40px;
}
.btn-info {
    width: clamp(200px, 20vw, 258px);
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: clamp(12px, 1.5vw, 16px);
    padding-bottom: clamp(12px, 1.5vw, 16px);
    padding-left: 24px;
    padding-right: 0;
    
    background-color: #00b3fb; 
    color: #ffffff;
    font-family: "fot-udmarugo-large-pr6n", "FOT-UD丸ゴ_ラージ Pr6N", "M PLUS Rounded 1c", sans-serif;
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 600;
    letter-spacing: 0.05em;
    
    border-radius: 100px; /* 綺麗な角丸（ピル形状） */
    text-decoration: none;
    
    transition: filter 0.2s, transform 0.3s ease;
}

.btn-info:hover {
    filter: brightness(1.1);
    transform: translateX(6px);
    background-color: #ffffff;
    color: #00a0e9;
}
.btn-info::after {
    content: "";
    display: block;
    width: 20px;
    height: 16px;
    margin-left: 12px; /* テキストとの隙間 */
    
    /* 白い右矢印のベクターデータ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4 11h12.172l-5.364-5.364 1.414-1.414L21.414 12l-9.192 9.192-1.414-1.414L16.172 13H4v-2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    transform: translateY(1px); /* 縦位置の微調整 */
}

.btn-info:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300a0e9'%3E%3Cpath d='M4 11h12.172l-5.364-5.364 1.414-1.414L21.414 12l-9.192 9.192-1.414-1.414L16.172 13H4v-2z'/%3E%3C/svg%3E");
}





/* ========================================
   Footer
   ======================================== */
.footer {
    background-color: #4d5156; /* 濃いグレー */
    color: #ffffff;
    text-align: center;
    padding: 40px 0 130px; /* 下の余白はコピーライト側で取る */
}
.footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: bold;
}
.footer__links li {
    display: flex;
    align-items: center;
}
.footer__links li:not(:last-child)::after {
    content: "|";
    margin-left: 15px;
    color: #888; /* 区切り線の色 */
}
.footer__links a:hover {
    text-decoration: underline;
}

.footer__copyright {
    display: none;
    background-color: #3b3e42; /* さらに少し濃いグレーで締める */
    color: #aaa;
    padding: 15px 0;
    font-size: 12px;
}



/* ========================================
   PC用 下部追従CTA
   ======================================== */
.cta-fixed-pc {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 990; /* ハンバーガーメニュー等の裏に回るように設定 */
    
    /* 背景の方眼紙模様（NEWSと類似のCSS描画） */
    background-color: #ffffff;
    background-image: 
        linear-gradient(90deg, rgba(0, 160, 233, 0.09) 1px, transparent 1px),
        linear-gradient(rgba(0, 160, 233, 0.09) 1px, transparent 1px);
    background-size: 24px 24px;
    
    /* カンプ上部の水色ライン */
    border-top: 12px solid #8ce4ff; 
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    
    /* 初期状態：下画面外に隠しておく */
    opacity: 0;
    visibility: hidden;
    transform: translateY(170%);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s, visibility 0.3s;
}

/* ★JSでクラスが付いたらスッと上がってくる */
.cta-fixed-pc.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 上部リボン */
.cta-pc__ribbon {
    position: absolute;
    top: -30px; /* カンプの飛び出し具合に合わせて調整 */
    left: 50%;
    transform: translateX(-50%);
    width: clamp(260px, 20vw, 320px);
    z-index: 2;
    pointer-events: none;
}

/* 中身の配置コンテナ */
.cta-pc__inner {
    position: relative;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 15px 20px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(15px, 2vw, 30px);
}

/* 各パーツの幅調整 */
.cta-pc__left { width: clamp(180px, 18vw, 210px); }
.cta-pc__center { width: auto; margin-top: 5px; }
.cta-pc__right { 
    display: flex; 
    align-items: center; 
    margin-top: 5px;
    gap: 15px; 
}
.qr-box {
    width: 180px;
    padding-bottom: 0px;
}
.btn-android { width: 120px; }

/* チェックボックス等の中身（FVから流用したスタイルの微調整） */
.cta-pc__center .ntg-rule-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", sans-serif;
    font-size: 13px;
    color: #666;
    font-weight: 400;
}
.cta-pc__center .check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.cta-pc__center .check-label input { margin: 0; }
.cta-pc__center .provider { font-size: 11px; margin-top: 2px; }

/* ガチャボタン（右端に浮いている巨大ボタン） */
.cta-pc__gacha {
    position: absolute;
    right: 8%;
    bottom: 20px; /* 下から少し浮かせる */
    width: clamp(130px, 12vw, 180px);
}

.badge-gacha-pc {
    position: relative;
    display: block;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    transition: scale 0.3s ease;
}
.badge-gacha-pc:hover {
    scale: 1.05;
}
.badge-gacha-pc .badge-base {
    position: relative;
    z-index: 2;
    width: 100%;
}
.badge-gacha-pc .badge-dots {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    transform-origin: center;
    animation: spinDots 20s linear infinite;
}


/* ========================================
   YouTube専用ポップアップ（16:9比率維持）
   ======================================== */
.youtube-modal__content {
    width: 100%;
    /* PCで大きくなりすぎないように最大幅を設定（お好みで調整OK） */
    max-width: 900px; 
}

.youtube-container {
    position: relative;
    width: 100%;
    /* 16:9の比率を保つ魔法（9 ÷ 16 = 56.25%） */
    padding-top: 56.25%; 
    background-color: #000;
    border-radius: 8px; /* カンプに合わせて角丸に */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}





/* ========================================
   タブレット（iPad等）専用のレイアウト修正
======================================== */
@media (min-width: 769px) and (max-width: 1024px) {

    .char__inner {
        width: 100%; /* 1000px固定をやめる！ */
        max-width: 1150px;
        margin: 0 auto;
        
        transform: none; 
        transform-origin: initial;
      }

    /* 縮小された時のフォントサイズ上書き（既存のまま） */
    .char__furigana { font-size: 11px !important; }
    .char__name { font-size: 21px !important; }
    .catch-text { font-size: 12px !important; padding-left: 5px; }
    .char__detail-text dt { font-size: 10px !important; padding: 2px 11px 2px 11px; }
    .char__detail-text dd { font-size: 10px !important; }
    .char__desc { font-size: 12px !important; }
    .char__detail-box { aspect-ratio: 361 / 114 !important; }

    .special__panel-row {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .cta-pc__inner {
        justify-content: flex-start;
        gap: 15px;
        padding-right: 160px;
    }
    .cta-pc__left { width: 190px; }
    .cta-pc__center { margin-left: 20px; }
    .cta-pc__center .ntg-rule-box { font-size: 11px; }
    .cta-pc__center .provider { font-size: 10px; }
    .cta-pc__right { margin-left: 20px; gap: 10px; }
    .qr-box { width: 170px; }
    .btn-android { width: 100px; }
    .cta-pc__gacha {
        bottom: 5px;
        right: 10px;
        width: 150px;
    }

    .footer {
        padding-bottom: 160px; 
    }


}





/* ▼ 768px 以下 (SP版) ▼ */
@media (max-width: 768px) {

    /* ========================================
       ハンバーガーメニューパネル - SP用サイズ調整
    ======================================== */

    
    .menu-open-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #ffffff 0%, #ccfff7 100%);
        border: 2px solid #0096ff;
        border-radius: 50%;
        z-index: 900;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 10px rgba(0, 150, 255, 0.2);
        transition: transform 0.2s;
    
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, scale 0.2s ease;
    }



       .menu-panel {
        width: clamp(280px, 80vw, 360px);
        
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        
        overflow: hidden;
        
        height: 100svh !important;
        background-size: 100% 100% !important;
    }

    .menu-panel__inner {
        padding: clamp(80px, 13vh, 110px) 25px clamp(40px, 6vh, 60px);
    }

    .menu-logo {
        /* 下のメニューリストとの隙間を縮める */
        margin-bottom: clamp(20px, 5vh, 40px);
    }
    .menu-logo img {
        max-width: clamp(160px, 55vw, 220px);
    }

    .menu-list {
        gap: clamp(15px, 3.5vh, 24px);
        margin-bottom: clamp(30px, 6vh, 50px);
    }
    .menu-list li {
        padding-left: 5%; 
    }
    .menu-list a {
        font-size: clamp(15px, 4.2vw, 18px);
    }

    .menu-sns {
        padding-left: 5%;
        gap: 15px;
    }
    .sns-icon {
        width: clamp(35px, 9vw, 42px);
    }


    
    .menu-overlay { z-index: 900; }
    .menu-panel { z-index: 901; }




    .inner {
        padding: 10px;
    }

    /* ========================================
       FV (First View) - SP用
       ======================================== */
    .sec-hero {
        position: relative;
        /* アドレスバーを除いた正確な全画面高さ */
        height: 100svh; 
        min-height: auto;
        /* 下部固定エリア（CTA）にコンテンツが隠れないように余白を設ける */
        padding-bottom: 160px; 
        background-image: url(../images/sp/2x/fv_bg@2x.webp);
        background-image: image-set(url(../images/sp/2x/fv_bg@2x.webp) 1x, url(../images/sp/2x/fv_bg@2x.webp) 2x);
        background-image: -webkit-image-set(url(../images/sp/2x/fv_bg@2x.webp) 1x, url(../images/sp/2x/fv_bg@2x.webp) 2x);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        aspect-ratio: 1920 / 1250; 
        overflow: hidden;
    }

    /* --- ロゴ・キャッチ・バッジ --- */
    .hero__logo {
        width: clamp(200px, 60vw, 280px);
        margin: 1% auto 0 1%;
        text-align: center;
    }

    .hero__catch-wrapper {
        width: 90%;
        position: absolute;
        
        bottom: clamp(180px, 35vw, 280px); 
        
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        margin: 0;
        text-align: center;
        z-index: 10;
    }

    .hero__catch {
        width: 100%;
    }

    /* ガチャバッジのサイズ調整 */
    .hero__badge-gacha {
        display: none;
        width: clamp(100px, 30vw, 140px);
    }

    /* ========================================
       SP専用：下部追従CTA
       ======================================== */
    .cta-fixed-sp {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 899; /* 最前面に固定 */
        display: flex;
        flex-direction: column;
        align-items: center;
        pointer-events: none; /* 親の透明領域のクリック判定を消す */

        
    }

    .cta-fixed-sp__box {
        width: 100%;
        background: 0;
        /*background-color: rgba(255, 255, 255, 0.95);*/
        backdrop-filter: blur(5px);
        /* iPhoneのホームバー（Safe Area）を考慮した下部余白 */
        padding: 5px 2vw calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
        
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        pointer-events: auto; /* クリック可能に戻す */
        background-image: url(../images/sp/2x/cta_bg@2x.webp);
        background-image: image-set(url(../images/sp/2x/cta_bg@2x.webp) 1x, url(../images/sp/2x/cta_bg@2x.webp) 2x);
        background-image: -webkit-image-set(url(../images/sp/2x/cta_bg@2x.webp) 1x, url(../images/sp/2x/cta_bg@2x.webp) 2x);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .cta-fixed-sp__top-row {
        display: flex;
        justify-content: center; /* 中央に寄せて配置 */
        align-items: center;     /* 一旦箱としては中央で揃える */
        gap: clamp(5px, 1vw, 20px); /* 2つの間の隙間 */
        width: 95%;
        margin-bottom: 0%;
    }

    .cta_spandroid {
        width: 42%;
        transform: translate(-4px, 0px);
    }

    .cta_sptxt {
        width: 55%; 
        
        transform: translate(-8px, 8px);
    }

    /* 中の画像を親の高さに100%合わせる */
    .cta_sptxt img,
    .cta_spandroid img {
        display: block;
        width: 100%;
        height: auto;
    }

    .cta-fixed-sp__btn {
        width: 92%;
        margin: 0 auto; /* ★親枠自身を中央に配置 */
        text-align: center; /* ★念のため中身も中央揃え */
    }
    .cta-fixed-sp__btn .btn-dmm {
        display: block;
        width: 100%;
        margin: 0 auto; /* ★ボタン自身も中央に配置 */
        padding: 0;
        background: transparent;
        border: none;
    }
    .cta-fixed-sp__btn .btn-dmm img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto; /* ★画像自身も中央に配置 */
    }

    /* 改変不可エリアのSP調整 */
    .cta-fixed-sp__box .ntg-rule-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px 15px;
        font-size: 11px;
        color: #666;
    }

    
    /* ========================================
    CONCEPT - タブレット用微調整（768px以下）
    ======================================== */

    
    /* --- タイトルエリア --- */
    .concept__header {
        margin-bottom: 20px;
    }
    
    .concept__title-img {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }
    
    .concept__content {
        flex-direction: column;
        align-items: center;
        gap: 50px; /* キャラと動画の隙間 */
    }

    /* --- 上段（キャラ＆フキダシ） --- */
    .concept__left {
        width: 90%; 
        max-width: 450px;
        margin: 0 auto;
    }

    .concept__content {
        flex-direction: column;
        align-items: center;
        gap: 50px; /* キャラと動画の隙間 */
    }

    /* --- 上段（キャラ＆フキダシ） --- */
    .concept__left {
        width: 100%;       /* 画面幅をフルに使う */
        max-width: 600px;  /* タブレットでも広がりすぎないように制限 */
        margin: 0 auto;    /* 中央寄せ */
        position: relative; /* フキダシの基準位置 */
    }
    .concept__chara-frame {
        width: 65%;        /* カンプの比率に合わせて調整 */
        margin-left: 5%;   /* 少し左に寄せる */
    }
    .chara-img {
        width: 85%;
        left: -5%;
        bottom: 0%;
    }
    .concept__chats {
        /* 幅は100%（親と同じ）にして、中のフキダシを right 基準で配置する */
        width: 100%;
        left: 0;
    }
    .chat-bubble {
        /* スマホ(375px)で約12px、タブレットで最大16px程度に可変 */
        font-size: clamp(12px, 3.5vw, 20px);
        padding: clamp(8px, 2vw, 14px) clamp(12px, 3vw, 18px) clamp(8px, 2vw, 14px) clamp(12px, 3vw, 18px);
        
        max-width: 60%;
        width: max-content; 
        border-width: 2px;
    }

    /* 各フキダシの配置（右から〇〇%という指定に変更し、右寄りに） */
    .chat01 { top: 5%; right: 5%; left: auto; }
    .chat02 { top: 28%; right: 5%; left: auto; }
    /* 主人公のセリフはさらに右に飛び出させる */
    .chat03 { top: 52%; right: 0%; left: auto; } 
    .chat04 { top: 75%; right: 5%; left: auto; }




    /* --- 下段（動画エリア） --- */
    .concept__right {
        /* 横いっぱいに広げる */
        width: 95%;
        margin: 0 auto;
    }
    .concept__video-box {
        border: none;
        box-shadow: none;
        aspect-ratio: 708 / 433;
    }

    /* 再生ボタンをスマホサイズに縮小 */
    .btn-play {
        width: clamp(50px, 18vw, 150px);
    }
    .btn-play img {
        display: block;
        width: 100%;
        height: auto;
    }
    
    /* 上の層：ボタン本体（枠のサイズを保つ役割も兼ねる） */
    .btn-play .play-base {
        position: relative;
        z-index: 2;
    }
    
    /* 下の層：ホバーで回るドット */
    .btn-play .play-dots {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        transform-origin: center;
        transition: rotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .btn-play:hover {
        transform: translate(-50%, -50%) scale(1.08);
    }
    
    /* ホバー時にドットだけを回転させる */
    .btn-play:hover .play-dots {
        rotate: 180deg; 
    }
    
    .concept__wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        
        height: clamp(50px, 6vw, 120px); 
        
        background-image: url(../images/sp/sec01_bgend.webp);
        background-repeat: no-repeat;
        
        /* 横幅いっぱいに引き伸ばす（歪みが気になる場合は cover や contain に変更） */
        background-size: 100% 100%; 
        background-position: bottom center;
        
        z-index: 1;
        pointer-events: none;
        
        /* background-color と mask-image は削除！ */
    }
    
    


    /* ========================================
       NEWS - SP用
       ======================================== */
    
    .news-inner {
        width: 95%;
        height: auto;
        margin: 0 auto;
        padding: 2vw 3vw;
        background-color: #ffffff;
        
        /* 2. 方眼紙の薄いライン（縦線と横線） */
        background-image: 
            linear-gradient(90deg, rgba(0, 160, 233, 0.09) 1px, transparent 1px),
            linear-gradient(rgba(0, 160, 233, 0.09) 1px, transparent 1px);
        
        /* 3. 方眼のマス目のサイズ（ここで方眼の細かさを調整できます） */
        background-size: 24px 24px;
        
        /* 4. 角丸（radius） */
        border-radius: 20px;
        
        border: 2px solid #00a0e9; /* 外枠が必要な場合 */
        
        background-position: top left;

    }

    .news__title-img {
        width: 90%;
        margin-bottom: 8%;
    }

    
    .news-list {
      list-style: none;
      padding: 0;
      margin: 5px 0 0;
    }
    
    .news-item {
      border-top: 1px solid #e5e5e5;
    }
    
    .news-item:last-child {
      border-bottom: 1px solid #e5e5e5;
    }
    
    .news-item a {
        display: flex;
        flex-wrap: wrap;   
        align-items: center; 
        gap: 5px 12px;      
        padding: 10px 7px; 
    }
    
    .news-category {
        font-size: clamp(13px, 3vw, 16px);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 1% 2%;
        justify-self: start;
    }
    .news-date {
      color: #00a0e9;
      font-size: clamp(13px, 3vw, 16px);
      display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .news-date,
    .news-category {
        flex-shrink: 0;     /* 絶対に文字を押し潰させないおまじない */
    }

    .news-date::before {
        width: 13px;
        height: 11px;
    }
    
    
    .news-title {
        width: 100%;        /* 強制的に2行目に回す（既存のまま） */
        font-size: clamp(13px, 3vw, 16px);
        line-height: 1.4;
        padding-left: 5px;
        
        /* ========================================
           ★追加：長いタイトルを枠内で確実に複数行にする設定
           ======================================== */
        white-space: normal;       /* 万が一他で1行固定（nowrap）がかかっていても強制解除 */
        overflow-wrap: anywhere;   /* 英語の羅列やURL、記号でも絶対に枠を突き破らせず改行する */
        word-break: break-word;
    }

    /* ========================================
    SPECIAL - SP用
    ======================================== */
 .sec-special {
     /* スマホ向けに上下の余白を調整 */
     padding: clamp(60px, 12vw, 100px) 0; 
 }

 .special__title img {
     width: 100%;
     max-width: 650px;
     margin: 0 auto;
 }

 .special__panels {
     width: 100%;
     gap: 20px; 
 }

 .special__panel--full {
     width: 95%;
     max-width: 750px;
     margin: 0 auto;
 }

 /* 下2つのパネルを縦並びに変更 */
 .special__panel-row {
     flex-direction: column;
     gap: 20px;
 }

 /* 3つ目のパネル（トーク）を少し縮めて「左寄せ」に */
 .special__panel-row .special__panel--half:nth-child(1) {
     width: 62%;
     margin-right: auto;
     margin-left: 0%; 
 }

 /* 4つ目のパネル（スチル）を少し縮めて「右寄せ」に */
 .special__panel-row .special__panel--half:nth-child(2) {
     width: 62%;
     margin-left: auto;
     margin-right: 0%; 
 }

 /* --- キャラクターの再配置 --- */
 /* ピンク髪（左下：4つ目のパネルの横） */
 .special__chara--left {
     width: 55%; 
     bottom: -47%; /* 一番下 */
     left: -12%;
 }

 /* 金髪（右：3つ目のパネルの横） */
 .special__chara--right {
     width: 65%;
     /* 3つ目のパネルの真横にくるように、下からの高さを調整 */
     bottom: -13%; 
     right: -10%;
 }

 .special__note {
    position: relative;
    z-index: 10;
    text-align: center;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 5px rgba(255, 255, 255, 0.9), 0 0 4px #ffffff;
    
    /* ========================================
       ★追加：スマホ用のフォントサイズと余白の上書き
       ======================================== */
    /* 最小10px（小さなスマホ）〜最大12px（大きめのスマホ）で可変させる */
    font-size: clamp(10px, 3.5vw, 14px); 
    
    /* スマホ画面だと左右がキツキツになるので、念のため少しだけ余白を持たせる */
    padding: 0 2%;
 }




 /* ========================================
 SYSTEM - SP用
 ======================================== */
.sec-system {
  margin-top: -10vw; 
  margin-bottom: -10vw;
  padding-top: clamp(80px, 15vw, 150px);
  padding-bottom: clamp(80px, 15vw, 150px);
}


/* ========================================
       軌跡線（ハートの点線） - SP用調整
       ======================================== */
    .system__path-line {
        /* 1. スタート位置を引き上げる（タイトルのすぐ下あたりに調整） */
        top: 10%; /* ★カンプに合わせて 5%〜12% あたりで微調整してください */
        
        /* 2. 線が横に広がりすぎないように、大枠と同じ 650px でロックする */
        width: 100%;
        max-width: 650px; 
        
        /* 3. 下の終わり位置。一番下の要素に被るくらいでストップさせる */
        height: 88%; 
    }

    .system__path-line img {
        /* ★魔法のコード：セクションが縦に間延びしても、画像が切れないように上基準でフィットさせる */
        width: 100%;
        height: 100%; 
        object-fit: fill !important; 
        
        object-position: top center;
    }

.system__inner {
    padding: 0;
}
.system__header {
    margin-bottom: clamp(40px,15vw,120px);
}

.system__title img {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

/* --------------------------------------
 大枠：下から上（白枠が奥、動画が手前）へ並べる
 -------------------------------------- */
 .system__item {
    flex-direction: column-reverse !important;
    margin-bottom: 80px; 
    
    max-width: 650px; 
  }

  /* ★追加：POINT 1, 3 (奇数) の「大枠」を画面左端に寄せる */
  .system__item:nth-child(odd) {
    margin-left: 0;
    margin-right: auto;
  }

  /* ★追加：POINT 2 (偶数) の「大枠」を画面右端に寄せる */
  .system__item:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
  }



/* --------------------------------------
 1. テキスト側の白枠（奥に敷かれる）
 -------------------------------------- */
.system__right {
    width: 94%; 
    position: relative;
    z-index: 1;
}
/* 奇数（左）の白枠を左ピタに */
    .system__item:nth-child(odd) .system__right {
      margin-left: 0 !important;
      margin-right: auto !important;
    }

    /* 偶数（右）の白枠を右ピタに */
    .system__item:nth-child(even) .system__right {
      margin-left: auto !important;
      margin-right: 0 !important;
    }


/* --------------------------------------
 2. 動画側のノート（※背景のノートは消して動画だけにする）
 -------------------------------------- */
.left-bg-img {
    display: none !important; /* ノート画像を非表示 */
}

.system__left {
    width: 60%; /* 動画（スマホ枠）のサイズ感 */
    max-width: none; /* ★修正：280pxのストッパーを解除して拡大を許可！ */
    position: relative;
    z-index: 10;
    margin-top: -92%;
}
/* PC版で絶対配置(top:50%等)になっていた動画の親枠をリセット */
.left-movie-wrapper {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 70%;
}

/* ========================================
 POINT 1, 3 (奇数) のジグザグ配置
 ======================================== */
.system__item:nth-child(odd) .system__left {
  /* 動画を右にはみ出させる */
  margin-left: auto;
  margin-right: -11%;
}
.system__item:nth-child(odd) .right-content {
  /* 動画が右に被さってくるので、右の余白を大きく空けて文字を左に避難させる */
  /* padding: 上・右・下・左 （★カンプに合わせて数値を要調整） */
  padding: 22% 51% 10% 4% !important;
}

/* ========================================
 POINT 2 (偶数) のジグザグ配置
 ======================================== */
.system__item:nth-child(even) .system__left {
  /* 動画を左にはみ出させる */
  margin-right: auto;
  margin-left: 6%;
}
.system__item:nth-child(even) .right-content {
  /* 動画が左に被さってくるので、左の余白を大きく空けて文字を右に避難させる */
  padding: 22% 3% 10% 52% !important;
}







/* ========================================
       各POINTのタイトル画像 個別サイズ・配置調整
       ======================================== */

       
       .system__item .right-title {
        padding-bottom: 10px;
        border-bottom: 2px dotted #0096ff;
       }


    /* POINT 1 (左寄せ) */
    .system__item:nth-child(1) .right-title {
        width: 95%; /* カンプを見ながら最適な数値に調整してください */
        max-width: none; /* ★修正：300pxのストッパーを解除 */
        margin-bottom: 6%;
        margin-left: 0;
        margin-right: auto;
    }

    /* POINT 2 (右寄せ) */
    .system__item:nth-child(2) .right-title {
        width: 98%; /* POINT2は少し長めなど、専用のサイズを指定 */
        max-width: none; /* ★修正：320pxのストッパーを解除 */
        margin-bottom: 6%;
        margin-left: auto;
        margin-right: 0;
    }

    /* POINT 3 (左寄せ) */
    .system__item:nth-child(3) .right-title {
        width: 98%; /* POINT3にジャストなサイズを指定 */
        max-width: none; /* ★修正：280pxのストッパーを解除 */
        margin-bottom: 6%;
        margin-left: 0;
        margin-right: auto;
    }





/* ========================================
 テキストとタイトルの共通調整
 ======================================== */
.right-text {
  font-size: clamp(12px, 3.4vw, 18px);
  line-height: 1.6;
  padding: 0 !important; /* PC側の余白を完全リセット */
}

.system__item:nth-child(2) .right-text {
    width: 95%;
    margin-left:3%;
}
/* ========================================
    SYSTEMセクション：右下注釈テキスト(SP用)
======================================== */
.right-note {
    font-size: clamp(10px, 2.6vw, 13px);
    margin-top: 8px;
        
        
    padding-right: 0 !important; 
}


    /* ========================================
       スマホ版：改行を許可しつつ光彩を綺麗に分割する
       ======================================== */
       .glow-line {
        position: static; 
        
        /* 1. 魔法のグラデーション：上65%を「完全に透明」にし、下35%にだけ色を敷く！ */
        background: linear-gradient(to bottom, transparent 65%, rgba(255, 215, 0, 0.3) 65%, rgba(255, 215, 0, 0.3) 100%);
        
        /* 2. 影も「下方向」にだけ落ちるようにオフセット（縦の数値）を調整 */
        box-shadow: 0 8px 10px -3px rgba(255, 215, 0, 0.3); 
        
        /* 下だけに敷くので角丸は外して馴染ませます */
        border-radius: 0;
        
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    
    .glow-line::after {
        /* PC版で使っていた巨大な四角形（元凶）をスマホでは消す */
        display: none; 
    }








/* ========================================
       CHARACTER - SP用 基本レイアウト
======================================== */

.sec-character {
    padding: clamp(100px, 12vw, 150px) 0 clamp(20px, 16vw, 200px);
}

.char__inner {
    margin: 10px auto;
    padding: 0;
}
.char__header {
    margin-bottom: clamp(80px,8vw,100px);
}

.char__title img {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
}



/* ========================================
       CHARACTER - SP用 基本レイアウト
       ======================================== */
    .char__content-sp {
        position: relative;
        /* ★追加：フレックスボックスにして中身に合わせて伸びるようにする */
        display: flex;
        flex-direction: column;
        width: 100%; 
        /*
        max-width: 650px;
        */
        margin: 0 auto;
        padding-bottom: 10px; /* ★追加：一番下の余白 */
        font-family: "fot-udmarugo-large-pr6n", sans-serif;
        font-style: normal;
    }

    /* --- 背景画像：絶対配置で枠全体に100%引き伸ばす！ --- */
    .char__content-sp .sp-bg-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        object-fit: fill; /* ★中身に合わせて縦に伸び縮みさせる */
    }

    /* --- 上部：キャラエリア --- */
    .char__content-sp .sp-char__top {
        position: relative;
        width: 92%;
        /* ★魔法：横幅に対して一定の高さの空間を強制確保する */
        aspect-ratio: 1 / 1.15; 
        margin: 0 auto;
        z-index: 1;
    }

    /* --- 矢印ボタン (※既存コード維持) --- */
    .char__content-sp .btn-arrow {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        width: clamp(40px, 10vw, 56px);
        background: none;
        border: none;
        z-index: 20;
        cursor: pointer;
    }
    .char__content-sp .btn-prev { left: -4%; }
    .char__content-sp .btn-next { right: -4%; }
    .char__content-sp .btn-arrow img {
        width: 100%;
        height: auto;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    }

    /* --- 名前・ボイス周辺 (※既存コード維持) --- */
    .char__content-sp .sp-char__head {
        position: absolute;
        top: 3%;
        left: 5%;
        width: 80%;
        z-index: 10;
    }
    .char__content-sp .char__voices {
        position: absolute;
        top: max(-65%, -80px);
        margin-left: -5%;
        margin-bottom: 10px;
        gap: 18px;
    }
    .char__content-sp .btn-voice {
        width: clamp(40px, 6vw, 44px);
    }


    
    .char__content-sp .char__name-box { margin-top: 0; }
    .char__content-sp .char__tag { 
        margin-bottom: 4px;
        color: var(--color-white);
        font-size: clamp(12px, 3.5vw, 24px);
        font-weight: bold;
        padding: 6px 5px; 
        width: clamp(120px, 25vw, 220px);
        display: inline-block;
        text-align: center;
        flex-shrink: 0;
    }
    .char__content-sp .char__furigana { 
        margin-bottom: -2px;
        font-size: clamp(11px, 2.5vw, 24px);
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 3px rgba(255, 255, 255, 0.9), 0 0 2px #ffffff;
    }
    .char__content-sp .char__name { 
        font-size: clamp(22px, 6.5vw, 46px);
        line-height: 1.2;
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 3px rgba(255, 255, 255, 0.9), 0 0 2px #ffffff;
    }
    .char__content-sp .char__catch { 
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 3px rgba(255, 255, 255, 0.9), 0 0 2px #ffffff;
    }
    .char__content-sp .char__catch .icon-ribbon {
        /* カンプのアイコンサイズに合わせて大きさを微調整してください */
        width: clamp(16px, 4.5vw, 36px);
        height: auto;
        flex-shrink: 0; /* テキストが長くなってもアイコンが潰れないようにするお守り */
    }
    .char__content-sp .char__catch .catch-text {
        font-size: clamp(13px, 3.5vw, 24px);
        padding-left: 5px;
    } 

    /* --- 立ち絵とスチル (※配置基準だけ修正) --- */
    .char__content-sp .sp-char__visuals {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        pointer-events: none;
    }
    .char__content-sp .stand-img {
        position: absolute;
        top: -5%; 
        right: -6%;
        width: 100%; 
        height: auto;
        z-index: 5;
    }
    .char__content-sp .char__illust-box {
        position: absolute;
        /* ★これもtop基準に */
        top: 49%; 
        left: -3%;
        width: 35%;
        z-index: 10;
        pointer-events: auto;
    }
    .char__content-sp .illust-img { padding: 2px; }
    .char__content-sp .icon-click {
        top: auto;
        bottom: -15%;
        right: -15%;
        width: 40%;
    }

    /* --- セリフ短冊 (※配置基準だけ修正) --- */
    .char__content-sp .sp-char__serif {
        position: absolute;
        /* ★キャラエリアの底に配置 */
        bottom: -15%; 
        left: -2%;
        width: 96%;
        z-index: 15;
    }
    .char__content-sp .serif-img {
        width: 100%;
        height: auto;
        animation: none;
        position: relative;
        top: auto; right: auto;
    }

    /* ========================================
       CHARACTER - SP用 下部（プロフ表・説明文）
       ======================================== */
    .char__content-sp .sp-char__bottom {
        position: relative; 
        bottom: auto; 
        width: 100%;
        padding: 0 0%; 
        margin-top: 17%; 
        z-index: 10;
        box-sizing: border-box;
        border-top: 2px dotted #0096ff;
        border-bottom: 2px dotted #0096ff;
        
        /* ★ここから変更：背景を白にしつつ、CSSで薄い方眼を描画！ */
        background-color: #ffffff;
        background-image: 
            linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
            linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
        /* ★修正：カンプに合わせてマス目を細かく！ */
        background-size: 16px 16px; 
        background-position: top left;
    }

    /* --- プロフィール表の点線枠 (※既存コード維持) --- */
    .char__content-sp .char__detail-text {
        padding: 4% 4%;
        margin-bottom: 4%;
        background-color: #b0eefd; 
        
        /* ★その上に、親と全く同じグレーの方眼を重ねて描画する！ */
        background-image: 
            linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
            linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px);
        background-size: 16px 16px; /* 親と同じマス目サイズ */
        background-position: top left;
    }
    .char__content-sp .char__detail-text dl {
        display: grid;
        grid-template-columns: auto 1fr auto 1fr;
        gap: 8px 15px;
        align-items: center;
    }
    .char__content-sp .char__detail-text dt {
        font-size: clamp(10px, 2.8vw, 18px) !important;
        border-radius: 100px !important; 
        
        padding: clamp(3px, 0.8vw, 6px) clamp(8px, 2.5vw, 16px) !important;
    }
    .char__content-sp .char__detail-text dd {
        font-size: clamp(11px, 3.2vw, 20px) !important;
    }

    /* --- 説明文 (※既存コード維持) --- */
    .char__content-sp .char__desc {
        width: 100%; 
        font-size: clamp(12px, 3.5vw, 22px) !important;
        line-height: 1.6;
        padding: 0 5% 5%;
        text-shadow: none; 
    }



    /* ========================================
       CHARACTER - SP用 サムネイルナビ（4個・3個の2段組み）
       ======================================== */
       .char__nav {
        width: 95%;
        margin: 1% auto 0;
        aspect-ratio: auto; 
        padding: 1% 0; 
        
        background-image: 
            url(../images/sp/sec05_thumbg01.webp),
            url(../images/sp/sec05_thumbg02.webp);
        background-image: 
            image-set(url(../images/sp/sec05_thumbg01.webp) 1x, url(../images/sp/2x/sec05_thumbg01@2x.webp) 2x),
            image-set(url(../images/sp/sec05_thumbg02.webp) 1x, url(../images/sp/2x/sec05_thumbg02@2x.webp) 2x);
            
        background-size: 100% auto, 75% auto; 
        
        background-position: center 15%, center 80%; 
        background-repeat: no-repeat;
    
    }

    .char__thumb-list {
        flex-wrap: wrap; 
        gap: clamp(14px, 4vw, 40px) 4%; 
        width: 90%;
        margin: 0 auto;
        justify-content: center;
    }

    .char__thumb-item {
        width: 22%; 
    }






 /* ========================================
       STORY & GALLERY - SP用
       ======================================== */
    .sec-story {
        /* 上の波線分のネガティブマージン */
        margin-top: -8vw; 
        padding: clamp(80px, 15vw, 150px) 0 clamp(60px, 12vw, 120px);
    }

    .sec-story .inner {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    /* タイトルのサイズ調整 */
    .story__header {
        margin-bottom: clamp(20px, 6vw, 40px);
    }
    .story__title img {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    /* --- SP専用コンテンツ枠 --- */
    .story__content-sp {
        position: relative;
        width: 100%;
    }

    .sp-story__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 中のテキストや画像に合わせて背景（方眼紙など）を縦に伸ばす */
        object-fit: fill; 
        z-index: 0;
    }

    .sp-story__inner {
        position: relative;
        z-index: 1;
        /* 背景画像の上下の帯（水色チェックなど）を避けるための余白 */
        padding: 7% 2% 7%; 
    }

    /* --- テキストエリア --- */
    .sp-story__text-area {
        padding: 0 4% 8%; 
    }
    
    .sp-story__text-area .story__text {
        font-size: clamp(14px, 4.4vw, 27px);
        line-height: 1.6;
    }

    /* --- サムネイルナビ（4個・3個の2段組み） --- */
    .sp-story__nav {
        width: 100%;
        padding: 0 0%;
    }
    
    .sp-story__thumb-list {
        display: flex;
        flex-wrap: wrap; /* 折り返しを許可 */
        justify-content: center; /* 落ちた3個を中央に寄せる */
        gap: clamp(8px, 2.8vw, 20px) 3%; /* 縦の隙間 と 横の隙間 */
    }
    
    .sp-story__thumb-item {
        /* 1行に4つ入るサイズ（25%未満）に設定 */
        width: 22%; 
        cursor: pointer;
        transition: transform 0.2s, filter 0.2s;
    }
    .sp-story__thumb-item:hover {
        transform: translateY(-4px);
        filter: brightness(1.1);
    }
    .sp-story__thumb-item img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 4px; /* カンプの角丸に合わせて調整 */
    }

    /* ========================================
    Information Section - SP用
    ======================================== */
 .sec-info {
     padding: clamp(60px, 12vw, 80px) 0 clamp(40px, 10vw, 60px);
 }
 
 .info__top {
     flex-direction: column;
     gap: clamp(30px, 8vw, 50px);
     margin-bottom: clamp(30px, 8vw, 40px);
 }
 .info__logo {
     width: 80%;
 }
 
 /* --- テキスト情報の調整 --- */
 .info__details {
     text-align: left;
     font-size: clamp(12px, 3.5vw, 16px);
 }
 
 /* カンプに合わせて「配信プラットフォーム」の項目だけ改行させる魔法 */
 .info__details dt:nth-of-type(4)::after {
     content: "|";
 }
 .info__details dd:nth-of-type(4) {
     display: block;
     margin-top: 10px;
 }
 
 /* --- 動作環境パネル --- */
 .info__spec {
     width: 90%;
     max-width: 500px;
     flex-direction: column;
     padding: clamp(25px, 6vw, 40px) 20px;
     gap: 20px;
     margin-bottom: 40px;
 }
 .info__spec-title {
     border-right: none;
     padding-right: 0;
     margin-bottom: 0;
     /* カンプの「動 作 環 境」のような文字間隔を再現 */
     letter-spacing: 0.3em; 
 }
 .info__spec-content {
     flex-direction: column;
 }
 .spec-col {
     text-align: left;
 }
 .spec-col h4 {
     justify-content: left;
     margin-bottom: 10px;
 }
 .spec-col ul li {
     justify-content: center;
     text-align: left;
     font-size: clamp(11px, 3.2vw, 15px);
 }
 .spec-col ul li span {
     display: none; /* リストの先頭の「・」を隠す */
 }

 /* --- SNSとリンクボタン --- */
 .info__sns {
     gap: 30px;
     margin-bottom: 30px;
 }
 .sns-link {
     width: clamp(50px, 16vw, 70px);
 }

 .info__links {
     flex-direction: column;
     align-items: center;
     gap: 20px;
 }
 .btn-info {
     width: 80%;
     max-width: 258px;
 }

 /* ========================================
       Footer - SP用
       ======================================== */
    .footer {
        /* ★修正：下部固定CTA（約100〜120px）が被らないように、下の余白を160pxに増やす */
        padding: 10px 0 calc(clamp(120px, 30vw, 250px) + env(safe-area-inset-bottom));
    }
    
    .footer__links {
        /* ★修正：Flexをやめて、Gridで強制的に「2列」のレイアウトにする */
        display: grid;
        grid-template-columns: 1fr; /* 1対1の比率で2列 */
        gap: 5px 5px; /* 縦の隙間 と 横の隙間 */
        
        font-size: clamp(12px, 2.8vw, 13px);
        line-height: 1.6em;
        width: 90%;
        margin: 0 auto 10px;
    }
    
    .footer__links li {
        justify-content: center;
        text-align: center;
    }
    
    .footer__links li:not(:last-child)::after {
        content: none;
    }



    /* ========================================
    YouTube専用ポップアップ（16:9比率維持）
    ======================================== */  


    #youtube-modal .lightbox__close {
        top: -55px;
        right: 10px;
    }





/* ========================================
    iOS Safariの背景 fixed 拡大バグ対策
======================================== */
 .news-section,
 .sec-story {
     /* スマホでは背景固定を解除して通常スクロールにする */
     background-attachment: scroll !important;
     background-position: top center !important; 
 }




}