/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background:#fff;}
#wrapper{position:relative !important;}
header#id_nav_menu_1{z-index:9999 !important;}
footer{z-index:2 !important;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; max-width:2000px; height:100%; margin:0 auto;}
body{
width:100%;
min-width:320px !important;
height:100%;
color:#000;
background:#fff;
margin:0;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{display:none;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:bold; font-style:normal;}
table{width:100%; border-collapse:collapse; border-spacing:0; margin:0 auto;}
tr,td,th{border-collapse:collapse;}

/*
================================================================================================================
背景
================================================================================================================
*/
#bg,
#bg #bg01,
#bg #bg02,
#base::after{
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:1;}

#bg01{
background-image:url(/game/2dx/34/teaser/img/bg/cherry01.webp) , url(/game/2dx/34/teaser/img/bg/common.jpg); 
background-size:auto , cover;
background-position:top right , center;
background-repeat:no-repeat , no-repeat;}
@media screen and (max-width:1400px){#bg01{background-size:60% auto , cover;}}
@media screen and (max-width:480px){#bg01{background-size:80% auto , cover;}}

/*花びらループ*/
#bg02{
background-image:url(/game/2dx/34/teaser/img/bg/cherry_petal.webp); 
background-size:100% auto;
background-position:top;
background-repeat:repeat-y;
filter:drop-shadow(1px 1px 2px #000);
transform:translateZ(0);
transition: .3s ease;}
@media screen and (max-width:1400px){#bg02{background-size:150% auto;}}

/*花パーツ下*/
#base::after{
content:"";
background-image:url(/game/2dx/34/teaser/img/bg/cherry02.webp); 
background-size:auto;
background-position:bottom left;
background-repeat:no-repeat;
transition: .3s ease;}
@media screen and (max-width:1400px){#base::after{background-size:60% auto;}}
@media screen and (max-width:480px){#base::after{background-size:80% auto;}}

#base.btm::after{position:absolute;}

/*
================================================================================================================
ページベース
================================================================================================================
*/
@media screen and (min-width:981px){#base{min-height:calc(100vh - 367px);}}
@media screen and (max-width:980px){#base{min-height:calc(100vh - 345px);}}

#base{
display:block;
position:relative;
width:100%;
max-width:2000px;
font-family:'Noto Sans JP', sans-serif;
color:#fff;
padding:0 0 40px;
margin:0 auto;
z-index:1;}
#base img{width:100%;}
#base > *{position:relative; margin:50px auto 0; z-index:2;}
#base > *.head + *{margin-top:10px;}
@media screen and (max-width:1100px){#base > *{margin:30px auto 0;}}

/*
=============================
見出し
=============================
*/
.head{width:100%; max-width:980px; text-align:left; pointer-events:none; z-index:3 !important;}
.head img{display:block; position:relative; width:50% !important; max-width:550px; margin:0 auto 0 0;}
.head::before{
display:block;
content:"";
position:absolute;
top:0;
left:-30vw;
width:50vw;
height:100%;
background:rgba(0,0,0,.5);}
@media screen and (max-width:640px){.head img{width:80% !important;}}

/*
========================
リスト装飾
========================
*/
.small{font-size:12px !important;}
@media screen and (max-width:640px){.small{font-size:11px !important;}}
@media screen and (max-width:480px){.small{font-size:10px !important;}}

ul.dot > li,ul.ast > li{position:relative; padding-left:16px;}
ul.dot > li::before,ul.ast > li::before{display:block; position:absolute; top:0; left:0;}
ul.dot > li::before{content:"・";}
ul.ast > li::before{content:"※";}
@media screen and (max-width:640px){ul.ast.small li{padding-left:14px;}}

/*
================================================================================================================
ロゴエリア
================================================================================================================
*/
#top-inner{
position:relative;
display:flex;
width:100%;
aspect-ratio:16 / 7;
align-items:center;
justify-content:center;
text-align:center;}

#top-inner .title{padding:20px;}
#top-inner .title img{width:100%;}
#top-inner .title p + p{margin-top:20px;}
#top-inner .title p:nth-child(1) img{max-width:1400px;}
#top-inner .title p:nth-child(2) img{max-width:1400px;}
#top-inner .title p:nth-child(3) img{max-width:800px;}

#top-inner .title p:nth-child(2){display:block;}
#top-inner .title p:nth-child(3){display:none;}
@media screen and (max-width:800px){
#top-inner{aspect-ratio:8 / 7;}
#top-inner .title p:nth-child(2){display:none;}
#top-inner .title p:nth-child(3){display:block;}}
@media screen and (max-width:480px){#top-inner{aspect-ratio:4 / 3;}}

/*
================================================================================================================
動画エリア
================================================================================================================
*/
.movie-list{font-family:'M PLUS 1', sans-serif; padding:0 20px;}
.movie-list > ul{
display:flex;
width:100%;
color:#fe40dd;
max-width:1300px;
justify-content:space-between;
margin:0 auto;}
.movie-list > ul > li{
width:calc((100% / 3) - 10px);
background:#fff;
border-radius:20px;
padding:20px;}
.movie-list > ul > li > .movie{border:1px solid #fe40dd;}
.movie-list > ul > li > p{text-align:center; margin:20px auto 0;}
@media screen and (max-width:1200px){
.movie-list > ul{width:100%; flex-wrap:wrap; justify-content:center;}
.movie-list > ul > li{width:calc(50% - 10px); border-radius:10px;}
.movie-list > ul > li > p{margin:10px auto 0;}}
@media screen and (min-width:801px) and (max-width:1200px){
.movie-list > ul > li{margin:10px 0;}
.movie-list > ul > li:nth-child(even){margin-left:20px;}}
@media screen and (max-width:800px){
.movie-list{padding:0 10px;}
.movie-list > ul > li{width:100%;}
.movie-list > ul > li + li{margin-top:10px;}}
@media screen and (max-width:480px){.movie-list > ul > li{padding:10px;}}

/*
========================
動画
========================
*/
.movie{
position:relative;
width:100%;
margin:0 auto;}
.movie img{width:100%;}
.movie-inner{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;}
.movie-inner iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0 auto;
z-index:2;}

/*
================================================================================================================
お知らせ
================================================================================================================
*/
#info{position:relative; width:calc(100% - 40px); margin:0 auto;}
@media screen and (max-width:800px){#info{width:calc(100% - 20px);}}

#info > #info-inner{width:100%; max-width:980px; color:#000; background:#fff; font-weight:700; line-height:150%; border-radius:20px; padding:40px; margin:0 auto;}
@media screen and (max-width:900px){#info > #info-inner{border-radius:10px;}}
@media screen and (max-width:640px){#info > #info-inner{padding:20px;}}

ul#info-news{
width:100%;
height:400px;
padding-right:20px;
overflow-y:scroll;}
ul#info-news::-webkit-scrollbar{width:4px;}
ul#info-news::-webkit-scrollbar-track{background:#222; border-radius:4px;}
ul#info-news::-webkit-scrollbar-thumb{background:#fe40dd; border-radius:4px;}
@media screen and (max-width:640px){ul#info-news{height:360px;}}
@media screen and (max-width:480px){ul#info-news{padding-right:10px;}}

#info h2{display:block; color:#fe40dd; font-size:18px; font-family:'M PLUS 1', sans-serif; font-weight:500; border-bottom:2px solid; padding:0 0 10px 0; margin:30px auto 10px;}
#info h2:first-child{margin:0 auto 10px;}
#info ul > li > ul{font-size:13px;}
#info b{display:block; color:#00a8ff; font-size:13px; margin:5px auto 0;}
@media screen and (max-width:480px){
#info h2{font-size:15px; padding:0 0 5px 0;}
#info{font-size:13px;}
#info ul > li > ul,#info b{font-size:11px;}}

/*
================================================================================================================
SNSリンク
================================================================================================================
*/
#top-link{padding:50px 0;}
@media screen and (max-width:640px){#top-link{padding:30px 0;}}

#top-link ul{display:flex; width:100%; margin:20px auto 0; justify-content:center; align-items:center;}
#top-link ul li + li{margin-left:10px;}
#top-link ul li a{display:block; width:50px; border-radius:5px; transition:all .2s ease;}
#top-link ul li a:hover{opacity:.7;}
#top-link ul li:nth-child(1) a{background:#000;}
#top-link ul li:nth-child(2) a{background:#fff;}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:10px;
right:10px;
width:120px;
height:120px;
z-index:999 !important;
filter:drop-shadow(2px 2px 1px rgba(0,0,0,.3));}
#page-top a{
position:relative;
display:block;
width:100%;
height:100%;
background-image:url(/game/2dx/34/teaser/img/btn_top.png);
background-size:100% auto;
transition:all .3s ease;
z-index:999 !important;}
#page-top a:hover{opacity:.5}
@media screen and (max-width:800px){#page-top{width:90px; height:90px;}}