@charset "Shift-JIS";


.midashi{
color:#FFF;
font-weight:bold;
font-size:18px;
text-align:center;
width:96%;
max-width:860px;
line-height:40px;
margin:20px auto 10px;
border-radius:6px;
background-image:url(../img/common/midashi_bg.jpg); 
background-position:center;
background-size:auto 160%;
background-repeat:repeat;
border:#2c8a00 3px solid;
}

/*
================================================================================================================
ゲームの流れ・全ステーション参加のゲーム
================================================================================================================
*/
#game,#all_station{position:relative; width:96%; max-width:880px; margin:30px auto 50px;}
#game img,#all_station img{width:100%;}

.text{width:100%; margin:0 auto 15px;}
.text img{width:100%;}

.pop_btn{display:flex; position:absolute; width:90%; max-width:900px; bottom:10px; right:5%;}
.pop_btn p{width:33%; text-align:center;}
.pop_btn p img{
width:100%;
max-width:252px;
filter:drop-shadow(5px 5px 2px rgba(0,0,0,0.5));}

.link{position:relative; z-index:2;}

.game_play{display:flex; width:100%; max-width:900px; margin:0 auto;}
.game_play .game_inner{position:relative; width:50%; z-index:2;}
.game_play .game_inner img{width:100%; max-width:480px;}

p.new1,p.new2{position:absolute; top:-20px; right:10px; width:100%; max-width:128px; text-align:right;}
p.new1{top:-20px;}
p.new2{top:-40px;}
p.new1 img,
p.new2 img{width:100%; max-width:128px;}

@media screen and (min-width:901px){
#game_pc{display:block;margin-top:30px;}
#game_sp{display:none;}}
@media screen and (max-width:900px){
#game_pc{display:none;}
#game_sp{display:block;}}

@media screen and (min-width:921px){
.pop_btn{min-height:60px;}}

@media screen and (max-width:920px){
.pop_btn{bottom:7%;}
.pop_btn p img{width:90%;}

p.new1{top:-3%;}
p.new2{top:-8%;}
p.new1 img,p.new2 img{width:90px !important;}}

@media screen and (max-width:900px){
p.new1{top:-5%;}
p.new2{top:-9%;}
p.new1 img,p.new2 img{width:80px !important;}}

@media screen and (max-width:639px){
#game,#all_station{margin:0 auto;}
p.new1{top:-7.5%;}
p.new2{top:-10%;}
p.new1 img,p.new2 img{width:70px !important;}}

@media screen and (max-width:480px){
p.new1{top:-7%;}
p.new2{top:-10%;}
p.new1 img,p.new2 img{width:50px !important;}}

@media screen and (max-width:400px){
p.new1{top:-7%;}
p.new2{top:-10%;}
p.new1 img,p.new2 img{width:40px !important;}}


/*
================================================================================================================
ゲームの流れ ポップアップ
================================================================================================================
*/
.pop_box{width:100%; max-width:880px; overflow:hidden;}
.pop_box img{width:100%; max-width:880px;}

/*

/*
================================================================================================================
ストーリー
================================================================================================================
*/
#story{width:100%; margin:30px auto 50px;max-width:880px;}
#story img{width:100%;}

@media screen and (max-width:980px){
#story{width:96%;}}

@media screen and (max-width:639px){
#story{margin:0 auto;}}

/*
================================================================================================================
ゲーム紹介・ストーリー ページ上部サブメニュー
================================================================================================================
*/
#sub_menu{
width:100%;
max-width:980px;
background:url(../img/common/box/sub_menu_bg_l.png),url(../img/common/box/sub_menu_bg_r.png),url(../img/common/box/sub_menu_bg_m.png),url(../img/common/box/sub_menu_bg.png),linear-gradient(rgba(0,211,179,0.75),rgba(255,255,255,0.75));
background-position:center left,center right,center,center;
background-repeat:no-repeat,no-repeat,repeat-x,repeat-x;
background-size:auto 100%,auto 100%,auto 100%,auto 120%;
border-radius:10px;
padding:15px;
margin:20px auto 0;}

#sub_menu::before{}
#sub_menu::after{}

#sub_menu #sub_menu_inner{
width:100%;
display: -webkit-flex;
    display: flex;
    -webkit-justify-content:center;
    justify-content:center;
margin:0 auto;}
#sub_menu #sub_menu_inner p{width:50%;max-width:260px;margin:0 10px;}
#sub_menu #sub_menu_inner p img{width:100%; }

/*
================================================================================================================
アニマップ
================================================================================================================
*/
#animap{width:100%; max-width:880px; margin:30px auto 0;}
#animap img{width:100%; max-width:900px;margin-bottom:20px;}
#animap img#top{margin:20px 0 0;}
#animap .btn_inner img{margin-bottom:20px;}

#animap img.bottom{width:100%; max-width:800px;margin:0 auto;display: block;}


@media screen and (max-width:920px){
#animap{width:96%; margin:0 auto;}}

@media screen and (max-width:639px){

}


/*
============================================================
新要素/データ引継ぎ
============================================================
*/

#new,
#data{
width:96%;
max-width:880px;
margin:20px auto 50px;}

#new img.bottom_space,#data img.bottom_space{margin-bottom:20px;}

@media screen and (max-width:639px){
#new,
#data{margin:0 auto;}}

/*
============================================================
e-amusement pass
============================================================
*/

#epass{
width:96%;
max-width:880px;
margin:20px auto 50px;}

#epass_box{
display:flex;
width:100%;
max-width:880px;
flex-wrap:wrap;
margin:30px auto;}
#epass_box p{display:block; width:50%; text-align:center; padding:10px; margin:0 auto;}
#epass_box p img{
width:100%;
max-width:420px;
filter:drop-shadow(5px 5px 2px rgba(0,0,0,0.5));}

#epass #code_manual #head{
width:96%;max-width:1200px;
margin:10px auto 0;
text-align:center;
border-radius:10px 10px 0 0;
border:#16a0be 3px solid;
border-bottom:none;
background-image: url(../img/epass/code_manual_head_bg.jpg);
background-repeat:repeat-x;
background-position:center;
background-size:auto 120%;}
#epass #code_manual #head img{width:70%;max-width:680px;}

#epass #code_manual #middle{
width:90%;max-width:615px;
margin:0 auto 20px ;}
#epass #code_manual #middle img{width:100%;}

#epass #code_manual ul{
width:96%;max-width:1200px;
margin:0 auto 50px;
padding:20px;
border-radius:0 0 10px 10px;
border:#16a0be 3px solid;
border-top:none;
background-color: #FFFFFF;
}

#epass #code_manual ul li{
position:relative;
padding-bottom:20px;
text-align:center;
}

#epass #code_manual ul li .subhead{
font-weight:bold;
color:#FFFFFF;
margin-bottom:20px;
padding:10px;
font-size:18px;
border-radius:10px;
border: #2c8a00 3px solid;
background: #67D41F;
background: linear-gradient(0deg,rgba(103, 212, 31, 1) 0%, rgba(52, 174, 16, 1) 40%, rgba(52, 174, 16, 1) 60%, rgba(103, 212, 31, 1) 100%);
}

#epass #code_manual ul li img{
width:90%;
}

#epass #code_manual #guide{
background: rgb(63,94,197);
font-weight:bold;
color:#FFFFFF;
font-size:24px;
line-height:140%;
border-radius:10px;
text-align:center;
margin-top:30px;
padding:15px;
}
#epass #code_manual .check{
text-align:right;
font-size:75%;
}


@media screen and (max-width:639px){
#epass{width:96%;margin:20px auto 0;}
#epass_box{margin:15px auto;}
#epass_box p{width:100%;}
#epass_box p.dummy{display:none;}
#epass #code_manual #head img{width:90%;}
#epass #code_manual #middle{width:96%;}
#epass #code_manual ul{margin:0 auto 20px;padding:20px 5px;}
#epass #code_manual ul li .subhead{padding:10px;font-size:14px;padding:10px 0;}
#epass #code_manual ul li img{width:98%;}
#epass #code_manual #guide{font-size:14px;padding:10px 5px;}
}

/*
============================================================
リモートプレイ
============================================================
*/

#remote{width:96%;max-width:880px;margin:20px auto 50px;}
#remote .remote02{width:80%;max-width:880px;margin:10px auto;}
#remote_box{width:96%;max-width:880px;margin:30px auto;}

@media screen and (max-width:639px){
#remote{width:96%;margin:0 auto 20px;}
#remote .remote02{width:96%;margin:10px auto 0;}
#remote_box{margin:15px auto;}
}

/*
============================================================
ダウンロード
============================================================
*/
#dl{
width:90%;
text-align:center;
margin:0 auto 50px;}

#dl .dl-inner{
display:flex;
flex-wrap:wrap;}

#dl .dl-inner p{
width:32%;
background-color:#fff;
border:1px solid #00cea0;
border-radius:10px;
padding:10px;
margin:0 auto;}

#dl .dl-inner p a{
display:block;
width:90%;
color:#fff;
background:#fa4072;
background:-moz-linear-gradient(top, #fa4072 0%, #c5084d 100%);
background:-webkit-linear-gradient(top, #fa4072 0%,#c5084d 100%);
background:linear-gradient(to bottom, #fa4072 0%,#c5084d 100%);
font-size:14px;
font-weight:bold;
border-radius:5px;
padding:6px;
margin:10px auto 0;}
#dl .dl-inner p a:hover{
background:#c5084d;
background:-moz-linear-gradient(top, #fa4072 0%, #ff95bc 100%);
background:-webkit-linear-gradient(top, #fa4072 0%,#ff95bc 100%);
background:linear-gradient(to bottom, #fa4072 0%,#ff95bc 100%);}

#dl img{width:100%; max-width:320px;}

@media screen and (max-width:639px){
#dl .dl-inner p{width:48%; margin:5px auto;}}

@media screen and (max-width:480px){
#dl{margin:0 auto 10px;}
#dl .dl-inner p{width:98%;}}

/*
============================================================
Q&A
============================================================
*/

/*案内表示*/
#attention{display:flex; align-items:center;width:96%; max-width: 700px; margin:0 auto 20px;}
#attention:after{content: "";clear: both;display: block;}

#attention .text{
  width : calc(100% - 110px);
  margin-top: 20px;
  padding:5px;
  background-color: #FFF;
  border-radius: 6px;
  border: 2px solid #e42b96;
  position: relative;
  color:#005349;
  line-height:140%;
  font-size:82.25%;}
#attention .text a{font-weight:bold;color:#e42b96;}
#attention .text .parts{
  position: absolute;top:5px;right:-12px;width:12px;
}
#attention .chara{width:80px;}

#attention .text .parts img,
#attention .chara img{width: 100%; height: auto;}

@media screen and (max-width:480px){
#attention{width : calc(100% - 12px);margin:0 0 0 7px;}
#attention .text{width : calc(100% - 20px);margin:20px 10px 20px 0;}
#attention .chara {width: 60px;}
}

/*FAQ*/
.faq_area{ width:96%;margin: 30px auto; padding:20px 0 5px;
  background-color:rgba(255,255,255,0.85);
  border-radius:6px;}
.faq_area .Qes,#faq_area .Ans{width:96%; max-width: 760px;margin:0 auto 5px;}
.faq_area .Ans{margin:0 auto 30px;}

.faq_area:after,#faq_area .Qes:after,#faq_area .Ans:after{content: "";clear: both;display: block;}

.faq_area .text{
  float: right;
  width : -webkit-calc(100% - 55px);width : -moz-calc(100% - 55px);width : calc(100% - 55px);
  padding:5px;
  border-radius: 6px;
  position: relative;
  line-height: 140%;
  font-weight: bold;
  font-size:87.25%;}
.faq_area .text .parts{position: absolute;top:0;left:-10px;width:10px;}
.faq_area .icon{width:50px; float: left;}

.faq_area .Qes .text{background: url(../img/faq/bg_que.jpg);border: 1px solid #eb6100;color:#eb6100;}
.faq_area .Ans .text{background: url(../img/faq/bg_ans.jpg);border: 1px solid #009944;color:#005349;}
.faq_area .Ans .text a{font-weight:bold;color:#e42b96;}
.faq_area .anima_image{width:96%;max-width:680px;margin:20px auto;}
.faq_area .song_copy{font-weight:normal;font-size:92.25%;}

.faq_area .text .parts img,
.faq_area .icon img,
.faq_area .anima_image img{width: 100%; height: auto;}


@media only screen and (min-width: 768px){
.faq_area{ width:96%; max-width: 800px;margin: 0 auto 50px;padding: 20px 20px 15px 10px;}
.faq_area .Qes,#faq_area .Ans{width:96%; max-width: 760px;}

.faq_area .text{
  width : -webkit-calc(100% - 100px);width : -moz-calc(100% - 100px);width : calc(100% - 100px);
  padding:5px 10px;
  line-height: 160%;
  font-size:100%;}
.faq_area .text .parts{left:-14px;width:14px;}
.faq_area .icon{width:90px; float: left;}
}

/*歌詞*/
#qa-music{
font-size:15px;
font-weight:normal;
padding:10px;}
#qa-music .song_copy{font-size:12px !important; margin-bottom:5px !important;}
#qa-music strong{font-size:16px;}

@media screen and (max-width:639px){
#qa-music{font-size:13px;}
#qa-music .song_copy{font-size:11px !important;}
#qa-music strong{font-size:15px;}}

@media screen and (max-width:480px){
#qa-music{padding:5px;}
#qa-music strong{font-size:14px;}}

@media screen and (max-width:360px){
#qa-music{font-size:11px; padding:2px;}
#qa-music strong{font-size:12px;}}

/*ストーリー*/
#qa-story p:first-child{display:block;}
#qa-story p:last-child{display:none;}
#qa-story p a.inline_sp{display:inline-block !important;}

@media screen and (max-width:800px){
#qa-story p:first-child{display:none;}
#qa-story p:last-child{display:block;}}

#story-pc,#story-sp{padding:20px;}
#story-pc img{width:100%; max-width:980px; margin-bottom:40px;}
#story-pc img:last-child{margin-bottom:0;}

#story-sp img{width:100%; max-width:640px; margin-bottom:30px;}
#story-sp img:last-child{margin-bottom:0;}