@charset "UTF-8";
/* * 【PC_R18】のCSSを記述してください **************************
    1. セレクタには必ず.page-featureをつけてください 
        NG） h1 { magin:0; } ※要修正対象です
        OK） .page-feature h1 { magin:0; }
    2. #page,#mainへのスタイル指定は推奨しておりません
    3. #page / .page-feature の外側に影響する記述は禁止しています
    4. 利用規約ボックスのスタイル変更は禁止です。影響がでないよう、コーディングしてください
    5. コーディング完了後、下記サイトにてCSSのエラーがないかご確認ください
        http://jigsaw.w3.org/css-validator/#validate_by_input
*/

.page-feature {        
padding: 0 !important;
    overflow-x: hidden !important;     
    background-repeat: repeat !important;
    background-size: 24px auto !important;
/*    background: linear-gradient(to bottom, #494949 0%, #000000 100%) !important;*/
    background: linear-gradient(
        to bottom, 
        #1c0429 0%,
        #1e1e24 16%,
        #1a1a1a 31%,
        #260812 35%,
        #121017 55%,
        #303030 73%,
        #0a0a0a 87%,
        #1a0230 100%
    ) !important;
}

.page-feature.is-age-verifying {
    height: 100vh !important;
    overflow: hidden !important;
}

.page-feature .template {    
    background-repeat: no-repeat !important;
    background-position: top center !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 1880px;
    height: 9570px;
    background-image: url(../img/bg_page.jpg) !important;
    background-size: 100% auto !important;    
    z-index: 1;
}

.page-feature .title-character {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.page-feature .feature-contents,
.page-feature .feature-header,
.page-feature .gallery-introduction,
.page-feature .movie-introduction,
.page-feature .story-introduction,
.page-feature .character-introduction,
.page-feature .system-introduction,
.page-feature .campaign-introduction,
.page-feature .official-x-introduction {
    min-width: 0 !important;
    width: 100% !important;
}

.page-feature .feature-footer {
    position: relative;
}

.page-feature .feature-header {
    position: relative;
    width: 100%;
    min-width: 1024px;
    height: 900px;    
    z-index: 50;
}

.page-feature .title-character video {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    object-position: center center;

    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
}
.page-feature .title-logo {
    position: absolute;    
    top: 50px;
    left: 250px;
    z-index: 100;
}

.page-feature .feature-header .btn-regist-area {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    text-align: center;
}

.page-feature .feature-footer .btn-regist-area {
    position: relative;
    margin-bottom: 30px;
}

.page-feature .feature-header .hero-btn-bg {
    position: absolute;
    top: 86px; 
    left: 50%;
    transform: translate(-50%, -40%); 
    z-index: -1; 
    pointer-events: none; 
}
.page-feature .feature-header .hero-btn-bg img {
    width: auto;
    height: auto;
}

.page-feature .feature-header .hero-halftone {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 100%; 
    background-image: url(../img/Halftone.png);
    background-position: center bottom; 
    background-repeat: repeat-x; 
    z-index: 25; 
    pointer-events: none; 
}

.page-feature .hero-deco-lines {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 60; 
    pointer-events: none; 
}

.page-feature .hero-deco-lines .line {
    position: absolute;
    opacity: 0; 
}

.page-feature .hero-deco-lines .l1 { left: -90px; bottom: 650px; animation: slide-in-left 0.8s ease-out 0.3s forwards; }
.page-feature .hero-deco-lines .l2 { left: -320px; bottom: 350px; animation: slide-in-left 0.8s ease-out 0.3s forwards; }
.page-feature .hero-deco-lines .l3 { left: -460px; bottom: -300px; animation: slide-in-left 0.8s ease-out 0.5s forwards; }
.page-feature .hero-deco-lines .l4 { left: 130px; bottom: 10px; animation: slide-in-left 0.8s ease-out 0.2s forwards; }

.page-feature .hero-deco-lines .r1 { right: -170px; bottom: 600px; animation: slide-in-right 0.8s ease-out 0.1s forwards; }
.page-feature .hero-deco-lines .r2 { right: 20px; bottom: 100px; animation: slide-in-right 0.8s ease-out 0.3s forwards; }
.page-feature .hero-deco-lines .r3 { right: -280px; bottom: 10px; animation: slide-in-right 0.8s ease-out 0.5s forwards; }
.page-feature .hero-deco-lines .r4 { right: -350px; bottom: -50px; animation: slide-in-right 0.8s ease-out 0.2s forwards; }

@keyframes slide-in-left {
    0% { opacity: 0; transform: translate(-100px, 100px); }
    100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes slide-in-right {
    0% { opacity: 0; transform: translate(100px, -100px); }
    100% { opacity: 1; transform: translate(0, 0); }
}

.page-feature .sticky-reward-btn {
    position: fixed;
    bottom: 30px;
    right: 0px;
    z-index: 1000; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    transform-origin: right bottom;
}

.page-feature .sticky-reward-btn.is-show {
    opacity: 1;
    visibility: visible;
}

.page-feature .sticky-reward-btn img {
    width: 75%; 
    height: 75%;
    filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.5)); 
    transition: transform 0.2s ease;
}

.page-feature .sticky-reward-btn:hover img {
    transform: translateY(-5px);
}

.page-feature .sticky-reward-btn:active img {
    transform: scale(0.92) translateY(5px);
    transition: transform 0.1s ease;
}

.page-feature .gallery-introduction { 
    position: relative; 
    height: 1375px; 
    width: 100%; 
    min-width: 1024px; 
    overflow: hidden; 
    background-image: url(../img/title_gallery.png);
    background-position: center top;
    background-size: 100% auto; 
    background-repeat: no-repeat;
    margin-top: 30px; 
    z-index: 25; 
}

.page-feature .gallery-title { 
    position: absolute; 
    top: 160px; 
    left: 0; 
    width: 100%; 
    display: flex;
    justify-content: center;
    z-index: 30;
}

.page-feature .gallery-tv-frame { 
    position: absolute; 
    top: 350px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 20; 
    pointer-events: none;
}
.page-feature .gallery-tv-frame img {
    width: 1073px;
    height: 730px;
}

.page-feature .gallery-slider { 
    position: absolute; 
    top: 450px; 
    left: 50%; 
    transform: translateX(-62%); 
    width: 785px; 
    height: 562px; 
    z-index: 10; 
    background: #000;
}
.page-feature .gallery-slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    opacity: 0; 
    background: #000;
    transition: opacity 0.1s ease-out;
}
.page-feature .gallery-slider.is-sandstorm::after {
    opacity: 0.6;
    background-color: #222;
    background-image:
        linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.15) 21%, rgba(255, 255, 255, 0.15) 24%, transparent 25%, transparent 60%, rgba(255, 255, 255, 0.1) 61%, rgba(255, 255, 255, 0.1) 65%, transparent 66%),
        linear-gradient(to bottom, transparent 10%, rgba(255, 255, 255, 0.2) 11%, transparent 12%, transparent 80%, rgba(255, 255, 255, 0.15) 82%, transparent 84%),
        repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, 0.6) 3px, rgba(0, 0, 0, 0.6) 4px);
    background-size: 200px 3px, 100% 4px;
    animation: vhs-tracking 0.2s linear infinite;
}
@keyframes vhs-tracking {
    0% { background-position: 0px 0px, 0 0; }
    20% { background-position: -80px 10px, 50px -5px, 0 0; }
    40% { background-position: 120px -10px, -60px 15px, 0 0; }
    60% { background-position: -150px 5px, 30px -20px, 0 0; }
    80% { background-position: 60px -15px, -110px 10px, 0 0; }
    100% { background-position: 0px 0px, 0 0; }
}
.page-feature .gallery-slider .bx-wrapper,
.page-feature .gallery-slider .bx-wrapper .bx-viewport {
    height: 576px !important;
    border: none !important;
    border-radius: 10px;
    box-shadow: none !important;
    background: #000 !important;
}
.page-feature .gallery-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.25) translate(0px, 18px);
}

.page-feature .gallery-slider .bxslider li {
    background-color: transparent !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.page-feature .gallery-illustration1, 
.page-feature .gallery-illustration2,
.page-feature .gallery-illustration3 { 
    width: 785px; 
    height: 562px; 
    background-color: #000; 
    background-position: center center; 
    background-size: cover; 
    background-repeat: no-repeat; 
}
.page-feature .gallery-illustration1 { background-image: url(../img/pic_gallery_01.png); }
.page-feature .gallery-illustration2 { background-image: url(../img/pic_gallery_02.png); }
.page-feature .gallery-illustration3 { background-image: url(../img/pic_gallery_03.png); }

.page-feature .gallery-introduction .bx-wrapper .bx-prev, 
.page-feature .gallery-introduction .bx-wrapper .bx-next { 
    position: absolute;
    top: 230px;
    transform: translateY(-50%); 
    width: 57px; 
    height: 68px; 
    z-index: 40;
}
.page-feature .gallery-introduction .bx-wrapper .bx-prev { 
    left: 50%; 
    margin-left: -480px;
    background: url(../img/Arrow_L.png) center/cover no-repeat !important; 
}
.page-feature .gallery-introduction .bx-wrapper .bx-next { 
    left: 50%; 
    margin-left: 600px;
    background: url(../img/Arrow_R.png) center/cover no-repeat !important; 
}

.page-feature .bx-pager { 
    position: absolute; 
    top: 540px;
    left: 48.1%; 
    transform: translate(360px, -50%); 
    z-index: 30; 
}
.page-feature .gallery-pager-alignment { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.page-feature .gallery-pager-icon1, 
.page-feature .gallery-pager-icon2, 
.page-feature .gallery-pager-icon3 { 
    width: 125px; 
    height: 72px; 
    background-color: #000; 
    background-position: center center; 
    background-size: cover; 
    background-repeat: no-repeat; 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
}

.page-feature .gallery-pager-icon1, .page-feature .gallery-pager-icon2, .page-feature .gallery-pager-icon3,
.page-feature .character-icon-alignment a,
.page-feature .system-pager-icon1, .page-feature .system-pager-icon2, .page-feature .system-pager-icon3, .page-feature .system-pager-icon4 {
    transition: transform 0.2s ease, filter 0.2s ease;
}
.page-feature .gallery-pager-icon1:hover, .page-feature .gallery-pager-icon2:hover, .page-feature .gallery-pager-icon3:hover,
.page-feature .character-icon-alignment a:hover,
.page-feature .system-pager-icon1:hover, .page-feature .system-pager-icon2:hover, .page-feature .system-pager-icon3:hover, .page-feature .system-pager-icon4:hover {
    transform: scale(1.08);
}
.page-feature .gallery-pager-icon1:active, .page-feature .gallery-pager-icon2:active, .page-feature .gallery-pager-icon3:active,
.page-feature .character-icon-alignment a:active,
.page-feature .system-pager-icon1:active, .page-feature .system-pager-icon2:active, .page-feature .system-pager-icon3:active, .page-feature .system-pager-icon4:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.page-feature .gallery-pager-icon1 { background-image: url(../img/pic_gallery_01.webp); }
.page-feature .gallery-pager-icon2 { background-image: url(../img/pic_gallery_02.webp); }
.page-feature .gallery-pager-icon3 { background-image: url(../img/pic_gallery_03.webp); }

.page-feature .gallery-pager-alignment a.active .gallery-pager-icon1 { background-image: url(../img/GalleryThumbnail_Kaede_on.webp); }
.page-feature .gallery-pager-alignment a.active .gallery-pager-icon2 { background-image: url(../img/GalleryThumbnail_Supika_on.webp); }
.page-feature .gallery-pager-alignment a.active .gallery-pager-icon3 { background-image: url(../img/GalleryThumbnail_Metan_on.webp); }

.page-feature .gallery-deco-left, 
.page-feature .gallery-deco-right { 
    display: none !important; 
}

.page-feature .movie-introduction { 
    position: relative; 
    height: 1200px; 
    width: 100%; 
    min-width: 1024px; 
    overflow: hidden;     
    margin-top: -30px; 
}

.page-feature .movie-title { 
    position: absolute; 
    top: 150px; 
    left: 0; 
    width: 100%; 
    display: flex;
    justify-content: center;
    z-index: 20; 
}

.page-feature .movie-player { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 10; 
}
.page-feature .movie-player video { 
    outline: none; 
    border: none; 
    width: 854px; 
    height: auto; 
    display: block; 
}

.page-feature .movie-barcode { 
    position: absolute; 
    bottom: -200px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 11; 
}

.page-feature .movie-play-btn { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 15; 
    pointer-events: none; 
    transition: opacity 0.3s ease;
    opacity: 1;
}

.page-feature .movie-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(1.2);
    cursor: pointer;
}
.page-feature .movie-play-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
    transition: transform 0.1s ease;
}

.page-feature .movie-player.is-playing .movie-play-btn { 
    opacity: 0;
    visibility: hidden;
}

.page-feature .movie-deco-left { 
    position: absolute; 
    left: 50px;
    top: 10%; 
    transform: translateY(-50%);
    z-index: 5; 
    opacity: 0; 
    margin-top: 150px; 
    transition: opacity 1s, margin-top 1s ease-out; 
}

.page-feature .movie-deco-right { 
    position: absolute; 
    right: 50px;
    top: 10%; 
    transform: translateY(-50%); 
    z-index: 5; 
    opacity: 0; 
    margin-top: -150px; 
    transition: opacity 1s, margin-top 1s ease-out; 
}

.page-feature .movie-deco-left.slidein-show, 
.page-feature .movie-deco-right.slidein-show { 
    opacity: 1; 
    margin-top: 0;
}

.page-feature .movie-deco-left img,
.page-feature .movie-deco-right img {
    height: 900px;
    width: auto;
}

.page-feature .story-introduction { 
    position: relative; 
    height: 1265px; 
    width: 100%; 
    min-width: 1920px; 
    overflow: hidden; 
    background-image: url(../img/story.png);
    background-position: center center;
    background-size: cover; 
    background-repeat: no-repeat;
}

.page-feature .story-subtitle { 
    position: absolute; 
    top: 180px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 10; 
}

.page-feature .story-text { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 380px; 
    left: 45%; 
    transform: translateX(-450px); 
    z-index: 10; 
}

.page-feature .character-introduction { 
    position: relative; 
    height: 2214px; 
    width: 100%; 
    min-width: 1920px; 
    overflow: hidden; 
    z-index: 20;
    margin-top: -600px; 
    background-image: url(../img/CHARACTER_BG.png);
    background-position: center top, center top;
    background-size: 100% auto, 100% auto; 
    background-repeat: no-repeat, no-repeat;
}

.page-feature .character-title { 
    position: absolute; 
    top: 600px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 30; 
}

.page-feature .character-illustration { 
    position: absolute !important; 
    top: 720px !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
    width: 1458px !important; 
    height: 761px !important; 
    z-index: 10 !important; 
    margin: 0 !important;
}

.page-feature .character-introduction .bx-wrapper { margin: 0 auto !important; }
.page-feature .character-introduction .bx-wrapper .bx-viewport { border: none !important; box-shadow: none !important; background: transparent !important; overflow: visible !important; }

.page-feature .illustration1, .page-feature .illustration2, 
.page-feature .illustration3, .page-feature .illustration4, 
.page-feature .illustration5, .page-feature .illustration6,
.page-feature .illustration7, .page-feature .illustration8 { 
    width: 1458px; 
    height: 761px;
    background-position: calc(50% + -19px) center;    
    background-size: contain !important;    
    background-repeat: no-repeat; 
}
.page-feature .illustration1 { background-image: url(../img/pic_char01.png); }
.page-feature .illustration2 { background-image: url(../img/pic_char03.png); }
.page-feature .illustration3 { background-image: url(../img/pic_char05.png); }
.page-feature .illustration4 { background-image: url(../img/pic_char04.png); }
.page-feature .illustration5 { background-image: url(../img/pic_char06.png); }
.page-feature .illustration6 { background-image: url(../img/pic_char02.png); }
.page-feature .illustration7 { background-image: url(../img/pic_char07.png); }
.page-feature .illustration8 { background-image: url(../img/pic_char08.png); }

.page-feature .bt-voice-play { 
    position: absolute; 
    bottom: 10px; 
    right: 20px; 
    width: 79px; 
    height: 80px; 
    cursor: pointer; 
    z-index: 60; 
}

.page-feature .character-introduction .bx-wrapper .bx-prev { 
    position: absolute !important;
    top: 50% !important;
    left: -80px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    width: 57px !important; height: 68px !important; z-index: 20 !important;
    background: url(../img/Arrow_L.png) center/cover no-repeat !important; 
}
.page-feature .character-introduction .bx-wrapper .bx-next { 
    position: absolute !important;
    top: 50% !important;
    right: -80px !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    width: 57px !important; height: 68px !important; z-index: 20 !important;
    background: url(../img/Arrow_R.png) center/cover no-repeat !important; 
}

.page-feature .character-introduction .bx-pager {
    position: absolute !important;
    top: 1500px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    margin: 0 !important;
    z-index: 20 !important;
}

.page-feature .character-icon-alignment { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    gap: 15px !important; 
    margin: 0 !important; 
    padding: 0 !important;
}

.page-feature .character-icon-alignment a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-feature .character-icon1, .page-feature .character-icon2, 
.page-feature .character-icon3, .page-feature .character-icon4, 
.page-feature .character-icon5, .page-feature .character-icon6,
.page-feature .character-icon7, .page-feature .character-icon8 { 
    width: 122px; height: 124px; background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; cursor: pointer; 
}
.page-feature .character-icon1 { background-image: url(../img/icon_char01.png); }
.page-feature .character-icon2 { background-image: url(../img/icon_char03.png); }
.page-feature .character-icon3 { background-image: url(../img/icon_char05.png); }
.page-feature .character-icon4 { background-image: url(../img/icon_char04.png); }
.page-feature .character-icon5 { background-image: url(../img/icon_char06.png); }
.page-feature .character-icon6 { background-image: url(../img/icon_char02.png); }
.page-feature .character-icon7 { background-image: url(../img/icon_char07.png); }
.page-feature .character-icon8 { background-image: url(../img/icon_char08.png); }
.page-feature .character-icon-alignment a div img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; z-index: 1; }
.page-feature .character-icon-alignment a.active div { border: 3px solid #ADFF2F; box-shadow: 0 0 15px #ADFF2F, inset 0 0 10px #ADFF2F; border-radius: 10px; box-sizing: border-box; }
.page-feature .character-icon-alignment a.active div img { visibility: visible; }

.page-feature .system-introduction { 
    position: relative; 
    height: 1352px; 
    width: 100%; 
    min-width: 1920px; 
    overflow: hidden; 
    z-index: 10;
    margin-top: -500px; 
    background-image: url(../img/system.png);
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.page-feature .system-title { 
    position: absolute; 
    top: 110px; 
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 30; 
}

.page-feature .system-subtitle { 
    position: absolute; 
    top: 250px; 
    left: 50%; 
    transform: translateX(-500px);
    z-index: 40; 
}

.page-feature .system-slider { 
    position: absolute !important; 
    top: 55% !important; 
    left: 50% !important; 
    transform: translate(-50%, -50%) !important; 
    width: 965px !important;
    height: 651px !important;
    z-index: 20 !important; 
    margin: 0 !important;
}

.page-feature .system-introduction .bx-wrapper { margin: 0 auto !important; }
.page-feature .system-introduction .bx-wrapper .bx-viewport { border: none !important; border-radius: 10px; box-shadow: none !important; background: transparent !important;  overflow: visible !important;}

.page-feature .system-illustration1, 
.page-feature .system-illustration2, 
.page-feature .system-illustration3,
.page-feature .system-illustration4 { 
    width: 965px !important;
    height: 651px !important;
    background-position: calc(50% + -30px) center;   
    background-size: auto !important;
    background-repeat: no-repeat; 
}

.page-feature .system-illustration1 { background-image: url(../img/pic_system_01.png); }
.page-feature .system-illustration2 { background-image: url(../img/pic_system_02.png); }
.page-feature .system-illustration3 { background-image: url(../img/pic_system_03.png); }
.page-feature .system-illustration4 { background-image: url(../img/pic_system_04.png); }

.page-feature .system-introduction .bx-wrapper .bx-prev { 
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -600px !important;
    transform: translateY(-50%) !important;
    width: 57px !important; height: 68px !important; z-index: 30 !important;
    background: url(../img/Arrow_L.png) center/cover no-repeat !important; 
}
.page-feature .system-introduction .bx-wrapper .bx-next { 
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: 530px !important;
    transform: translateY(-50%) !important;
    width: 57px !important; height: 68px !important; z-index: 30 !important;
    background: url(../img/Arrow_R.png) center/cover no-repeat !important; 
}

.page-feature .system-introduction .bx-pager {
    position: absolute !important;
    top: 1105px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    z-index: 30 !important;
    margin: 0 !important;
}

.page-feature .system-pager-alignment { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    gap: 15px !important; 
    margin: 0 !important; 
}
.page-feature .system-pager-icon1,
.page-feature .system-pager-icon2,
.page-feature .system-pager-icon3,
.page-feature .system-pager-icon4 { 
    width: 37px; 
    height: 31px;     
    background-image: url(../img/Slideshow_icon_off.png); 
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; 
}
.page-feature .system-pager-alignment a.active div { 
    background-image: url(../img/Slideshow_icon_on.png); 
}

.page-feature .system-deco-left { 
    position: absolute; 
    left: 50px;
    top: 26%;
    transform: translateY(-50%);
    z-index: 5;
    opacity: 0;
    margin-left: -100px; 
    transition: opacity 1s, margin-left 1s ease-out; 
}
.page-feature .system-deco-right { 
    position: absolute;
    right: 50px;
    top: 55%;
    transform: translateY(-50%);
    z-index: 5;
    opacity: 0;
    margin-right: -100px;
    transition: opacity 1s, margin-right 1s ease-out; 
}
.page-feature .system-deco-left.slidein-show { opacity: 1; margin-left: 0; }
.page-feature .system-deco-right.slidein-show { opacity: 1; margin-right: 0; }

.page-feature .campaign-introduction { 
    position: relative; 
    height: 1111px;
    width: 100%; 
    min-width: 1111px; 
    overflow: hidden;     
    background-image: url(../img/Rewards_BG.png);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 20;
    margin-top: -53px; 
}

.page-feature .tape-scroll {
    position: absolute;
    left: 0;
    width: 100%;
    height: 83px;
    background-image: url(../img/bg_tape.png);
    background-repeat: repeat-x;
    background-size: auto 100%;    
    z-index: 30;
    will-change: background-position;
}
.page-feature .tape-scroll-top {
    top: 0px;
    animation: tape-scroll-right 20s linear infinite;
}
.page-feature .tape-scroll-bottom {
    bottom: 0;
    animation: tape-scroll-left 20s linear infinite;
}

@keyframes tape-scroll-right {
    0% { background-position: 0 0; }
    100% { background-position: 1920px 0; }
}
@keyframes tape-scroll-left {
    0% { background-position: 0 0; }
    100% { background-position: -1920px 0; }
}

.page-feature .campaign-title { 
    position: absolute; 
    top: 150px; 
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 25; 
}

.page-feature .campaign-window {
    position: absolute;
    top: 330px; 
    left: 50%;
    transform: translateX(-50%);
    width: 1101px; 
    height: 649px; 
    background-image: url(../img/Rewards_Window.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
}

.page-feature .reward-main {
    position: absolute;
    top: 654px; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; 
    text-align: center;    
    z-index: 30;
    opacity: 0;
}
.page-feature .reward-main img { width: auto; height: auto; }
.page-feature .reward-main.fadein-block-show {
    animation-delay: 0.8s;
    animation-fill-mode: both;
}

.page-feature .campaign-chara-left {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -870px; 
    z-index: 20;
}
.page-feature .campaign-chara-right {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: 140px; 
    z-index: 20;
}
.page-feature .campaign-chara-left img,
.page-feature .campaign-chara-right img { 
    height: 836px; width: auto; 
}

.page-feature .official-x-introduction { 
    position: relative; 
    height: 1312px; 
    width: 100%; 
    min-width: 1321px; 
    overflow: hidden; 
    z-index: 10;
    background-image: url(../img/campaign.png);
    background-position: center top;
    background-size: 100% auto; 
    background-repeat: no-repeat;
    color: #fff;
    font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
}

.page-feature .official-x-introduction .follow-text {
    position: absolute;
    top: 100px; 
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
}

.page-feature .official-x-introduction .x-official-link {
    position: absolute;
    top: 140px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.page-feature .official-x-introduction .x-official-link img {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.page-feature .official-x-introduction .x-official-link:hover img {
    transform: scale(1.08);
}

.page-feature .official-x-introduction .x-official-link:active img {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.page-feature .official-x-introduction .game-info-wrapper {
    position: absolute;
    top: 600px; 
    left: 50%;
    transform: translateX(-50%);
    width: 1000px; 
    display: flex;
    justify-content: space-between; 
    align-items: center;
    z-index: 15;
}

.page-feature .official-x-introduction .logo-white { 
    position: absolute; 
    top: 570px;
    left: 50%;
    margin-left: -550px;
    width: 568px; 
    text-align: center; 
    z-index: 15;
}
.page-feature .official-x-introduction .logo-white img { 
    width: 100%; height: auto; 
}

.page-feature .official-x-introduction .game-details { 
    position: absolute; 
    top: 630px;
    left: 53%;
    margin-left: 50px;
    width: 500px; 
    z-index: 15;
}
.page-feature .official-x-introduction .game-details dl {
    margin: 0; padding: 0; list-style: none;
    font-size: 16px; 
    display: grid; 
    grid-template-columns: 100px 1fr; 
    row-gap: 25px; 
    column-gap: 25px; 
    align-items: center; 
}
.page-feature .official-x-introduction .game-details dt {
    font-weight: bold;
    color: #000;
    background-color: #A0A0A0; 
    text-align: left; 
    padding: 6px 10px; 
    border-radius: 0; 
}
.page-feature .official-x-introduction .game-details dd {
    color: #fff;
    margin: 0;
}

.page-feature .official-x-introduction .pre-register-wrapper {
    position: absolute;
    bottom: 120px; 
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 50px; 
    z-index: 20;
}

.page-feature .official-x-introduction .arrow-left,
.page-feature .official-x-introduction .arrow-right { width: 178px; margin-top: 30px; }

.page-feature .official-x-introduction .arrow-left img,
.page-feature .official-x-introduction .arrow-right img { width: 100%; height: auto; }

.page-feature .official-x-introduction .arrow-left img { transform: scaleX(-1); }
.page-feature .official-x-introduction .arrow-right img { transform: scaleX(1); }

.page-feature .official-x-introduction .support-area {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 20;
}

.page-feature .official-x-introduction .sns-x-arrow1 {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.page-feature .official-x-introduction .sns-x-arrow2 {
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.page-feature .ntg-btn-registration {
    width: 551px;
    height: 172px;
    border: 0;
    border-radius: 30px;
    background-color: transparent;
    background-image: none !important; 
    display: block;
    cursor: pointer;
    margin: 0 auto 10px;
    position: relative;
    padding: 0;
    overflow: hidden;
}

.page-feature .ntg-btn-registration::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/bt_registration_02_second.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0; 
    transition: opacity 0.3s ease; 
    z-index: 2; 
}

.page-feature .ntg-btn-registration:hover::before {
    opacity: 1;
}

.page-feature .ntg-btn-registration:active {
    transform: scale(0.97) translateY(3px);
    transition: transform 0.1s ease;
}

.page-feature .ntg-btn-registration img {
    width: 551px !important;
    height: 172px !important;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1; 
    transition: opacity 0.3s ease;
    z-index: 1; 
}

.page-feature .ntg-btn-registration:hover img {
    opacity: 0;
}
.page-feature .feature-footer {
    display: none !important;
}

.page-feature .official-x-introduction .final-footer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30;
}

.page-feature .official-x-introduction .final-footer-bar p {
    color: #fff;
    font-size: 14px;
    margin: 0;
    letter-spacing: 0.05em;
}

.page-feature .official-x-introduction .ntg-btn-registration::before,
.page-feature .feature-footer .ntg-btn-registration::before {
    background-image: url(../img/bt_registration_01_second.png) !important;
    opacity: 0 !important;
}

.page-feature .official-x-introduction .ntg-btn-registration:hover img,
.page-feature .feature-footer .ntg-btn-registration:hover img {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.page-feature .official-x-introduction .ntg-btn-registration:hover::before,
.page-feature .feature-footer .ntg-btn-registration:hover::before {
    opacity: 0 !important;
}

.page-feature .official-x-introduction .ntg-btn-registration img,
.page-feature .feature-footer .ntg-btn-registration img {
    opacity: 1 !important;
}

.page-feature .official-x-introduction .ntg-btn-registration:hover::before,
.page-feature .feature-footer .ntg-btn-registration:hover::before {
    opacity: 1 !important;
}

.page-feature .checkbox.type-oblong {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 480px !important; 
    padding: 12px 20px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
    gap: 8px 0 !important; 
}

.page-feature .checkbox.type-oblong .box-info,
.page-feature .checkbox.type-oblong .box-prof,
.page-feature .checkbox.type-oblong .box-kiyaku,
.page-feature .checkbox.type-oblong .box-name {
    width: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important; 
    float: none !important;      
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    color: #fff !important;
    line-height: 1.4 !important;
}

.page-feature .checkbox.type-oblong input[type="checkbox"] {
    margin-right: 6px !important;
}

.page-feature .support-button {
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}
.page-feature .support-area {
    display: none !important;
}
.page-feature .support-button:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}
.page-feature .support-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.page-feature .bxslider li {
    display: none;
}
.page-feature .bx-viewport .bxslider li {
    display: block;
}
.page-feature .bx-wrapper .bx-prev {
    top: 280px;
    width: 69px;
    height: 101px;
    background: url(../img/Arrow_L.png) no-repeat;
    background-position: center center;
    background-size: cover;
}
.page-feature .bx-wrapper .bx-next {
    top: 280px;
    width: 69px;
    height: 101px;
    background: url(../img/Arrow_R.png) no-repeat;
    background-position: center center;
    background-size: cover;
}

.page-feature .bx-wrapper .bx-prev:hover,
.page-feature .bx-wrapper .bx-next:hover {
    transform: translateY(-50%) scale(1.15) !important;
    filter: brightness(1.2);
}
.page-feature .bx-wrapper .bx-prev:active,
.page-feature .bx-wrapper .bx-next:active {
    transform: translateY(-50%) scale(0.9) !important;
    transition: transform 0.1s ease !important;
}

.page-feature .fadein-block {
    opacity: 0;
}
.page-feature .fadein-block-show {
    animation: 2s fadein-block-show forwards;
}
@keyframes fadein-block-show {
    from { }
    to {
        opacity: 1;
        transition: none;
    }
}

.page-feature .fadein-title {
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-out;
    display: flex;
    justify-content: center;
}
.page-feature .fadein-title-show {
    opacity: 1;
}

.page-feature .character-icon-alignment a.active div {    
    border: none !important;
    box-shadow: none !important;
}

.page-feature .character-icon-alignment a.active div img {    
    visibility: visible !important;
}

@keyframes floating {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.page-feature .slidein-left-block {
    opacity: 0;
    transform: translateY(-120px);
}
.page-feature .slidein-right-block {
    opacity: 0;
    transform: translateY(120px);
}
.page-feature .slidein-show {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* ! 編集不可 *********************************************** */
.page-feature .btn-regist-area {
    text-align: center !important;
}
.page-feature .btn-regist-area .ntg-btn-registration {
    display: block !important;
    margin: 0 auto !important;
}
.page-feature .checkbox {
    margin: 0 auto;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    letter-spacing: 0.01071em;
    font-size: 11px;
    box-sizing: initial;
}
.page-feature .checkbox a {
    color: inherit !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}
.page-feature .checkbox span {
    margin-bottom: 3px;
}
.page-feature .checkbox span, .page-feature .checkbox p {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
}
.page-feature .checkbox input {
    margin: 0;
}
.page-feature .checkbox label {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    cursor: pointer;
    gap: 5px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.page-feature .checkbox.type-square {
    display: block;
    width: 210px;
    text-align: center;
}
.page-feature .checkbox.type-square .box-kiyaku {
    margin-bottom: 3px;
}
.page-feature .checkbox.type-square .box-name {
    display: inline-block;
    text-align: center;
}
.page-feature .checkbox.type-square .box-name label {
    display: inline;
    margin-left: 5px;
}
.page-feature .checkbox.type-oblong {
    position: relative;
    display: inline-block;
    min-width: 385px;
}
.page-feature .checkbox.type-oblong .box-kiyaku {
    position: absolute;
    top: 6px;
    margin-left: 180px;
}
.page-feature .checkbox.type-oblong .box-info, .page-feature .checkbox.type-oblong .box-prof {
    width: 180px;
}
.page-feature .checkbox.type-oblong .box-prof {
    float: left;
    margin-bottom: 0;
}
/* ! 編集不可ここまで *********************************************** */

/* ▼ 年齢認証テンプレート用CSS*/
.page-feature .common-age-verification {
    top: 0;
    left: 0; 
    width: 100%; /* ★ 100vw から 100% に変更（スクロールバーはみ出し防止） */
    text-align: center;
    background-color: #fff;
    position: fixed;
    z-index: 9999;
    height: 100vh;
    padding-top: 100px;
    box-sizing: border-box;
}

.page-feature .common-age-verification-heading {
    font-size: 20px;
    font-weight: normal;
    color: #333;
    margin-top: 40px;
}

.page-feature .common-age-verification-description {
    font-size: 14px;
    line-height: 2;
    color: #333;
    margin: 40px 0;
}

.page-feature .common-age-verification-button {
    display: block;
    margin: 0 auto;
    width: 238px;
    height: 48px;
    line-height: 48px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    border: none;
}

.page-feature .common-age-verification-button:hover {
    text-decoration: none;
}

.page-feature .common-age-verification-button + .common-age-verification-button {
    margin-top: 20px;
}

.page-feature .common-age-verification-button-agree {
    background-color: #ee2737;
    color: #fff;
}

.page-feature .common-age-verification-button-agree:hover,
.page-feature .common-age-verification-button-agree:focus {
    opacity: 0.6;
}

.page-feature .common-age-verification-button-disagree:link,
.page-feature .common-age-verification-button-disagree:visited {
    color: #888;
}

.page-feature .common-age-verification-button-disagree:hover,
.page-feature .common-age-verification-button-disagree:active,
.page-feature .common-age-verification-button-disagree:focus {
    background-color: #eaeaea;
}
/* ▲ 年齢認証テンプレート用CSS (統合) ▲ */