@charset "UTF-8";

/* 親サイトのヘッダーメニューを強制的に最前面に出す */
#iHead,
.MenuPanel,
.MenuPanel .inner {
    z-index: 9999 !important;
}

/* =========================================
   親サイトのフッターエリア（#fMap, #fotInfo）をLPのCSSから守る
   ========================================= */
#fMap,
#fMap *,
#fotInfo,
#fotInfo * {
    line-height: 1.5 !important; /* ダーウィン標準に近い通常の行間に戻す */
    letter-spacing: normal !important; /* 文字の隙間を標準に戻す */
}

/* もしリスト（ul, li）の隙間も広がってしまっている場合のリセット */
#fMap ul li,
#fMap ul li a,
#fotInfo ul li,
#fotInfo ul li a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* サイトマップなどのリンクが縦に間延びしないように微調整 */
#fotInfo ul li {
    display: inline-block;
}


/* =========================================
   検索ボックス・アイコンを最前面に出す（配置崩れ防止版）
   ========================================= */
#SearchBox {
    /* positionの強制上書きはやめて、ダーウィンの元々の配置ルールを活かします */
    z-index: 9999 !important;
}

/* もし検索アイコン（テキストリンク）自体も潜ってしまう場合のための安全策 */
a[href*="/cu5ggt00000002ri/"] {
    position: relative;
    z-index: 9999 !important;
}


/* =========================================
   [重要] 親サイトの枠組み（幅・余白）を強制リセットし、全画面表示にする
   ========================================= */
#contentWrap,
#contents,
#contentMain.wm,
#mainPanel,
#mainText.iBox,
#s0,
div.gCode /* ← .gCode を div.gCode にして詳細度を上げる */ {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important; /* ← 左右だけでなく上下のpaddingも一括リセット */
    margin: 0 !important;  /* ★ここがポイント！左右だけでなく上下のmarginも一括リセット */
    box-sizing: border-box !important;
}

#contentMain {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* =========================================
   [追加] 親サイトの不要なヘッダー（#iHead）を非表示化
   ========================================= */
#iHead {
    display: none !important;
}

/* =========================================
   [重要] LP内のすべての要素が画面外にはみ出さないための安全対策
   ========================================= */
.l-main,
.l-main *,
.l-main *::before,
.l-main *::after {
    box-sizing: border-box !important;
}

.l-main {
    width: 100%;
    overflow-x: hidden;
}

/* アプリ枠（水色の角丸エリア）を画面内に確実に収める */
.t-home-app__inner.content {
    width: calc(100% - 40px) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================
   親サイトのメニューパネル（.MenuPanel）をLPのCSSから守る
   ========================================= */
.MenuPanel,
.MenuPanel * {
    line-height: 1.4 !important; /* ダーウィン標準に近い通常の行間に戻す */
    letter-spacing: normal !important; /* 文字の隙間を標準に戻す */
}

/* もしリストの上下にも余計な隙間ができている場合のためのリセット */
.MenuPanel .inner.list ul li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.MenuPanel .inner.list h3 {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

/* =========================================
   ベース背景
   ========================================= */
.t-home__gradient {
    overflow: hidden;
}

/* =========================================
   メインビジュアル (MV) コンテナ
   ========================================= */
.t-home__mv {
    /* 画面幅の90%（最大1000px）でシームレスに可変させる */
    width: 90vw !important;
    max-width: 1000px !important;
    height: auto !important;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    margin: 0 auto;
}

.t-home__mv__main {
    width: 100% !important;
    max-width: 1000px !important;
    height: auto !important;
    aspect-ratio: 1200 / 630 !important;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 1rem;
    pointer-events: none;
}

/* =========================================
   MV 背景演出（スピードアップ改善版）
   ========================================= */
.t-home__mv__bg {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2;
    transform: none !important;
    
    opacity: 0;
    clip-path: inset(20% round 1rem);
    transition: clip-path 0.8s var(--easing_easeInOutCirc), opacity 0.3s ease;
}

body.is-home-op2 .t-home__mv__bg {
    opacity: 1;
    clip-path: inset(0% round 1rem);
}

.t-home__mv__bg::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, .5);
    pointer-events: none;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    display: none !important;
}

.t-home__mv__bg__item {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    position: absolute !important;
    transform: none !important;
}

.t-home__mv__bg__item > img {
    position: relative;
    z-index: 5;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    object-position: center !important;
    transform: none !important;
}

.t-home__mv__bg__real { z-index: 2; }
.t-home__mv__bg__manga { display: none !important; }

body.is-home-op4 .t-home__mv__bg__manga { opacity: 0; transition-delay: 0.5s; }

/* =========================================
   ヘッダーアニメーション
   ========================================= */
.t-home__header { opacity: 0; visibility: hidden; transform: translateY(-20px); transition: .8s var(--easing_easeOutCubic); }
body.is-home-op4 .t-home__header { opacity: 1; visibility: visible; transform: translateY(0); }


/* =========================================
   イントロダクション
   ========================================= */
#t-home-introduction {
    font-size: 1.5rem;
    line-height: 1.5em;
    text-align: center;
    margin-bottom: 5em;
    background: linear-gradient(to right, #ff59ee, #fda37f, #eeff2e);
    -webkit-background-clip: text;
    color: transparent;
    font-family: var(--font-family_outfit, sans-serif);
    font-weight: 900;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
}

#t-home-introduction.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { #t-home-introduction { transition: none; transform: none; opacity: 1; } }

/* =========================================
   番組概要（イントロ）セクション
   ========================================= */
.t-home-intro { 
    position: relative; 
    /* ★修正：タイマーが画面幅いっぱいを使えるように左右paddingを0にする */
    padding: clamp(4rem, 2vw, 12rem) 0 clamp(5rem, 8vw, 10rem); 
    background-color: #ffffff; 
    overflow: hidden; 
    z-index: 5; 
}

.t-home-intro__inner { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center;
    /* ★追加：親枠の幅を100%に固定 */
    width: 100%; 
}

/* コンセプト文章エリア */
.t-home-intro__concept { 
    position: relative; 
    /* ★修正：親にあった左右20pxの余白を文章エリアに移動し、画面端ピッタリを防ぐ */
    padding: clamp(2rem, 5vw, 4rem) 20px; 
    width: 100%;
    box-sizing: border-box;
}
.t-home-intro__concept-inner { position: relative; display: inline-block; text-align: center; z-index: 1; }

/* 巨大クオートも画面幅で滑らかに縮む */
.t-home-intro__quote { 
    position: absolute; 
    font-family: var(--font-family_montserrat, 'Montserrat', sans-serif); 
    font-size: clamp(6rem, 12vw, 12rem); 
    font-weight: 900; 
    color: rgba(255, 89, 238, 0.08); 
    line-height: 1; 
    z-index: -1; 
    user-select: none; 
}
.t-home-intro__quote.-start { top: clamp(-2rem, -4vw, -4rem); left: clamp(-2rem, -6vw, -6rem); }
/* PC・タブレット表示時の右下クオート位置調整 */
.t-home-intro__quote.-end { 
    /* ★修正：テキストの真横ではなく「右下」に配置されるよう、下に大きくずらし、横幅も少し内側に寄せました */
    bottom: clamp(-10rem, -14vw, -14rem); 
    right: clamp(-1rem, -2vw, -2rem); 
}

.t-home-intro__concept p { 
    color: #333; 
    letter-spacing: 0.08em; 
    line-height: 1.8; 
    margin-bottom: clamp(1.8rem, 3vw, 2.5rem); 
}

/* リード文のフォント統一＆シームレスサイズ */
.t-home-intro__concept-lead { 
    font-family: var(--font-family_monbran, sans-serif) !important;
    font-size: clamp(2.2rem, 5vw, 2.8rem); 
    font-weight: 900; 
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem) !important; 
    line-height: 1.4;
}

.u-text-highlight { background: linear-gradient(135deg, #ff59ee, #fda37f, #eeff2e); -webkit-background-clip: text; color: transparent; display: inline-block; position: relative; }
.u-text-highlight::after { 
    content: '✨'; 
    font-size: clamp(1rem, 2vw, 1.5rem); 
    position: absolute; 
    top: clamp(-5px, -1vw, -10px); 
    right: clamp(-15px, -3vw, -25px); 
    animation: twinkle 1.5s infinite alternate; 
}
@keyframes twinkle { 0% { opacity: 0.2; transform: scale(0.8) rotate(-10deg); } 100% { opacity: 1; transform: scale(1.2) rotate(10deg); } }

.t-home-intro__concept-text { 
    font-size: clamp(1.3rem, 2.5vw, 1.8rem); 
    font-weight: 500; 
}
.t-home-intro__concept-text strong { font-weight: 900; color: #ff59ee; padding: 0 0.2em; }

.t-home-intro__concept-end { 
    font-size: clamp(1.6rem, 3vw, 2.2rem); 
    font-weight: 700; 
    margin-top: clamp(6rem, 10vw, 8rem); 
    /* ★修正：クオートをさらに下にずらすため、被らないように底の余白も広げました */
    margin-bottom: clamp(6rem, 8vw, 8rem);
}

.u-text-marker { position: relative; display: inline-block; z-index: 1; font-weight: 900; }
.u-text-marker::before { content: ''; position: absolute; bottom: 2px; left: 0; width: 0; height: clamp(6px, 1vw, 10px); background: linear-gradient(90deg, #ff59ee, #eeff2e); z-index: -1; transition: width 1s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 5px; }

.is-visible .u-text-marker::before, .is-visible.u-text-marker::before { width: 100%; transition-delay: 0.8s; }

/* PC〜スマホ間でテキストの配置を微調整 */
@media screen and (max-width: 799px) {
    .t-home-intro__concept p { text-align: center; }
    .t-home-intro__concept-lead,
    .t-home-intro__concept-end { text-align: center !important; }
    
    /* スマホ専用のクオート位置を確実に右下に指定 */
    .t-home-intro__quote { font-size: 6rem; }
    .t-home-intro__quote.-start { left: -1rem; top: -1rem; }
    .t-home-intro__quote.-end { right: -1rem; bottom: -4rem; }
}

/* --- 共通：スクロールフェードインアニメーション --- */
.u-fade-up { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; }
.u-fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================
   グローバルナビゲーション（横並びメニュー）
   ========================================= */
.t-home-global-nav { width: 100%; max-width: 1000px; margin: 4rem auto 0; padding: 0 20px; position: relative; z-index: 20; }
.t-home-global-nav__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem 4rem; list-style: none; margin: 0; padding: 0; }
.t-home-global-nav__list li { margin: 0; padding: 0; }
.t-home-global-nav__list li a { display: inline-block; font-size: 1.4rem; font-weight: 700; color: #111; text-decoration: none !important; letter-spacing: 0.1em; position: relative; padding-bottom: 5px; transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.t-home-global-nav__list li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #ff59ee, #eeff2e); transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 2px; }
.t-home-global-nav__list li a:hover { color: #ff59ee; }
.t-home-global-nav__list li a:hover::after { width: 100%; }

@media screen and (max-width: 799px) {
    .t-home-global-nav { margin: 2rem auto 0; }
    .t-home-global-nav__list { gap: 1rem 1.5rem; }
    .t-home-global-nav__list li a { font-size: 1.2rem; }
}

/* =========================================
   番組プロモーション動画セクション
   ========================================= */
.t-home-promo-movie { padding: 0 20px 8rem; background-color: #ffffff; position: relative; z-index: 5; }
.t-home-promo-movie__inner { max-width: 900px; margin: 0 auto; }
.t-home-promo-movie__info { text-align: center; }