@charset "UTF-8";

@media screen and (max-width: 667px) {
    p{font-size:12px;}
#wrapper {
background:none!important;
}
#wrapper_datafig nav#datafigMenu {
display:none;
}   
#contents {
width: 100%;
padding: 0;
background:none;
}
/* スライドバナー */
#wrapper_datafig{width:100%;margin:0 auto;background:none;}
#wrapper_datafig:before{
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url(../../_img/bg_sp.jpg) center top no-repeat;
background-size: 100% auto;
}
    
div#mainBanners li.bn{width:780px;border:2px solid #FFF;margin:3px;}



/* メインビジュアル */
div#mainVisual{width:100%;height:auto; padding-top: calc(100%*1100/800); margin:0 auto; position: relative;overflow: hidden;}
    
div#mainVisual #top_text{width:calc(100%*544/800); position:absolute; top:1%; left:0; right:0; margin: 0 auto;z-index:10;}
div#mainVisual #top_title{width:calc(100%*800/800); position:absolute;top:auto;  bottom:1%; left:1%; right:auto; margin: 0 auto;z-index:10;}

div#mainVisual #top1 .top1_chara {width:100%; height:auto;  padding-top: calc(100%*676/800); background:url(../../_img/top1_chara_sp.png) center top; background-size:100% auto; position:absolute; top:0px; left:0px; right:0; margin: 0 auto;z-index:0;}
div#mainVisual #top1 .top1_chara img {display:none;}
    
div#mainVisual #top1 .top1_fig1{width:calc(100%*195/800); position:absolute; top:55%; left:0px; right:-25%; margin: 0 auto;z-index:2;}
div#mainVisual #top1 .top1_fig2{width:calc(100%*195/800); position:absolute; top:55%; left:auto; right:0; margin: 0 auto;z-index:2;}
div#mainVisual #top1 .top1_fig3{width:calc(100%*195/800); position:absolute; top:55%; left:-25%; right:0px; margin: 0 auto;z-index:2;}
div#mainVisual #top1 .top1_fig5{width:calc(100%*195/800); position:absolute; top:35%; left:0; right:0; margin: 0 auto;z-index:1;}
div#mainVisual #top1 .top1_fig4{width:calc(100%*195/800); position:absolute; top:55%; left:0; right:auto; margin: 0 auto;z-index:2;}
div#mainVisual #top1 .top1_fig6{width:calc(100%*195/800); position:absolute; top:35%; left:-50%; right:0; margin: 0 auto;z-index:1;}
div#mainVisual #top1 .top1_fig7{width:calc(100%*195/800); position:absolute; top:35%; left:0; right:-50%; margin: 0 auto;z-index:1;}

div#mainVisual #top2{display:none; }
div#mainVisual #top2 .top2_chara {width:calc(100%*1000/800); position:absolute; top:0; left:-10%; right:0; margin: 0 auto;z-index:0;}
div#mainVisual #top2 .top2_stagium {width:calc(100%*1014/800); position:absolute; top:40%; left:-12%; right:0; margin: 0 auto;z-index:1;}
div#mainVisual #top2 .top2_fig {width:calc(100%*598/800); position:absolute; top:43%; left:0; right:-10%; margin: 0 auto;z-index:3;}
    

/* 共通section */
section{width:96%;margin:0 auto 3%;padding:2% 0; border:2px solid #000; background: url("../../_img/bg_table.gif");box-sizing: border-box;}
section .inner{width:90%;margin:20px auto;}
section h2{width:100%;height:auto; background:url(../../_img/bg_h2_pc.gif) center top no-repeat;background-size:200% auto; font-size:6vw;text-align:center;color:#000;line-height:2.4em;letter-spacing: 0.1em;}
    
section.model h2{font-size:4.8vw;line-height:3.5rem;}
    
/* about */
section#about ul{width:90%;display: flex;flex-wrap: wrap;margin:5% auto;}
section#about ul li{width:46%; margin:2%;}
    
/* 遊び方PLAY */
section#play ul{width:90%;margin:3% auto;display: flex;flex-wrap: wrap;}
section#play ul.single li{width:98%; margin:1%;background:#FFF; padding:20px;color:#000;text-align:center;border-radius: 20px;border:4px solid #FF6c00;}

section#play h3{font-size:6.5vw; margin:5% 0 0 0;}
section#play .playBox2 .pictRight{width:70%; float:none;margin:0 auto 3%;}
section#play .playBox2 .pictLeft{width:70%; float:none;margin:0 auto 3%;}
    
section#play ul.rule{width:100%;margin:2% auto 0; display:flex; flex-wrap:wrap;font-size:14px;line-height:1.1em;}
section#play ul.rule li img{width:60%; margin:0 20%;}
section#play ul.rule li {width:100%; margin:5% auto;}
    
    
/* 商品ラインナップ */
section#lineup dl{width:90%;margin:3% auto;background:#FFF;border-radius: 20px;color:#000;padding:20px;box-sizing: border-box;}

.lower section#lineup dl{width:100%;margin:0px auto;}

section#lineup dt{width:70%; float:none;margin:0 15%;}
section#lineup dt img{width:100%;}
section#lineup dd{width:100%; margin-left:0%;}
section#lineup dd p{margin-bottom:15px;}
section#lineup dd .title{font-size:6.5vw; color:#005f9c;line-height:1.1em;}
section#lineup dd .title span{font-size:4.5vw;}
section#lineup dd .spec{border:1px solid #000;padding:0.5em;line-height:1.4em;}

.lower section#lineup .inner{width:95%;margin:20px auto; background:#FFF;border-radius: 20px;padding:20px;box-sizing: border-box; }

.lower section#lineup .inner .setPict{width:95%;margin:20px auto;}

.lower section#lineup ul#setInfo{width:100%;margin:30px auto;display:flex; flex-wrap: wrap;}
.lower section#lineup ul#setInfo li{width:49%;margin:0.5%;}
.lower section#lineup ul#setInfo li p{background:#00a6bf;color:#000;padding:0.2em 0;text-align: center;letter-spacing: 0.2em}
    
/* app */
section#app div#appImg{width:90%;height:auto; padding-bottom:calc(100%*980/929); background:url(../../_img/app_img1_sp.png) center top no-repeat;background-size: 100% auto; margin:5% auto 0;}
section#app div#appImg img{display:none;}
#wrapper_datafig section#app button {width:80%;position: absolute;bottom:4vh;left:0;right:0;margin:0 auto;font-size:4vw; letter-spacing: 0;}
    
    
    
/* アプリ詳細*/
.lower section#app .mainVisual{width: 96%;height: auto;padding-top: calc(100%*836/929);background:url(../../app/_img/top.png) center top no-repeat;background-size: 100% auto;margin: 2% auto;position: relative; }
.lower section#app .mainVisual #sc1 .gamen{width:42%;position:absolute; top:16%;left:8%;}
.lower section#app .mainVisual #sc1 .text{width:38%;position:absolute;top:70%;right:15%;}
.lower section#app .mainVisual #sc1 .fig{width:24%;position:absolute;top:50%;left:2%;}

.lower section#app .mainVisual #sc2 .gamen{width:42%;position:absolute;top:16%;left:8%;}
.lower section#app .mainVisual #sc2 .text{width:45%;position:absolute;top:70%;right:15%;}

.lower section#app .mainVisual #sc3 .gamen{width:42%;position:absolute;top:16%;left:8%;}
.lower section#app .mainVisual #sc3 .text{width:42%;position:absolute;top:70%;right:15%;}
.lower section#app .mainVisual #sc3 .yubi{width:13%;position:absolute;top:48%;left:12%;}
    
    
.lower section#app .inner{width:96%;margin:2% auto; background:#FFF;border-radius: 20px;padding:2%;box-sizing: border-box; }
.lower section#app .inner ul{width:100%;margin:0 auto;display: flex; flex-wrap: wrap;padding-left:1.5em;}
.lower section#app .inner ul li{width:100%;margin-right:0px;margin-bottom:5%;}
.lower section#app .inner ul li:nth-child(3){margin-right:0;}
.lower section#app .inner strong{width:100%;color:#000;text-align:center!important;font-size:3.7vw;margin:5% auto 10px;display: inline-block;}
.lower section#app .inner h3{background: #FF5500; color:#FFF; padding:10px;font-size:5vw;display:block; margin:3% auto 0;text-align: center;}
.lower section#app .inner h3 span{text-align: center;}
    
section#app dl{width:100%; margin:0 auto 10px;}

section#app #appBox{width:96%;margin:0 auto;background:#03597d;border-radius: 20px;color:#fff;padding:5% 2%;box-sizing: border-box;font-size:12px;line-height:1.2em;font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
    
.lower section#app #appBox{width:96%;padding:5% 2%;}

.lower　section#app dl{width:70%;margin:3% auto;}

.lower section#app .inner .damy{
width: 100%;
margin: 3% auto;
}
    
.lower section#app .inner .yomikomi {
width: 96%;font-size: 12px;margin:2% auto;
}
    
.lower section#app.model p.title {
font-size: 3.7vw;
}
    
section#app dt{width:30%; margin:0 auto 5%;float:none;}
section#app dt img{width:100%;}
section#app dd{width:96%; margin:0 auto;}
section#app dd p{margin-bottom:7px;}
section#app dd .title{font-size:4.4vw;line-height:1.1em;font-weight:bold;border:1px solid #FFF;padding:2%;text-align:center;}

section#app dl ul#btns{display:flex; width:100%; flex-wrap:nowrap;}
section#app dl ul#btns li{margin:5px;}
section#app dl ul#btns li:nth-of-type(1) {
width: 43%;
}
section#app dl ul#btns li:nth-of-type(2) {
width: 52%;
}
section#app ul#btns2{display:flex;flex-wrap:wrap;width:100%;margin:0px auto 10px;}
section#app ul#btns2 li{margin:0 5px;width:100%;}
section#app ul#btns2 .btn{font-size:3.5vw;letter-spacing: 0;padding:12px 20px;font-weight:bold;box-sizing: border-box;width:100%;}
section#app ul#btns2 .btn:after {
content: "";
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 2px;
width: 6px;
height: 6px;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
transform: rotate(45deg);
}

    
/* ニュース*/
.lower section#news .inner{width:90%;margin:20px auto; background:#FFF;border-radius: 20px;padding:20px;box-sizing: border-box; }
.lower section#news .inner h3{background: #FF5500; color:#FFF; padding:10px;font-size:4vw;display:block; margin:10px auto 30px;text-align: center;}
.lower section#news p{color:#000;text-align:left;margin:2% 0;}
.lower section#news .inner .days{text-align:right;color:#000;font-size:13px;}
.lower section#news .inner .img700{width:90%;margin:20px auto;}
    
.lower section#app.kiyaku .inner strong{width:100%;color:#000;text-align:left!important;font-size:4vw;margin:5% auto 2%;display: inline-block;}
.lower section#app.kiyaku .inner{font-size:3vw;color:#000;}
.lower section#app.kiyaku .inner ul li{width:100%;margin-right:0px;margin-bottom:2%;}
    
    
section.qaSec h4 {
font-size:3.5vw;
}


    
p.caution{text-align:center; font-size:10px;line-height:1.4em;}

#footer_new{width:100%;padding:3% 0; margin:3% auto 0;background:#000;}
#footer_new p{text-align:center;color:#FFF;font-size:10px;}
    
/* ボタン*/
.btn{display:block;width:100%;background-color:#FF6c00;color:#fff;text-align:center;padding:12px 0;margin-top:10px;font-size:4.5vw;line-height:1.1em;letter-spacing: 0.1em;border-radius: 12px;border-bottom:6px solid #ac4900;position: relative;}

#news .btn{width:66%;margin-top:5%; font-size:3.5vw}
    
}
