@charset "Shift-JIS";

.info_pc{display:block;}
.info_sp{display:none;}
.pop_box img{width:100%;}

@media screen and (max-width:900px){
.info_pc{display:none;}
.info_sp{display:block;}}

/*
============================================================
メインビジュアル
============================================================
*/
#top-img{width:100%; max-width:980px; filter:drop-shadow(0px 0px 10px #fff) drop-shadow(0px 0px 10x #fff)  drop-shadow(0px 0px 10px #fff); margin:0 auto 0;}
#top-img img{width:100%;height:auto; padding-top: 0px;}

@media screen and (max-width:900px){
#top-img{margin:0 auto;}
#top-img img{width:100%;height:auto; padding-top: 20px;}
}

/*
============================================================
動画
============================================================
*/
.cat1#movie .cat-title img {
    max-width: 460px;
}

.movie{
position:relative;
width:96%;
height:0;
padding-bottom:56.25%;
overflow:hidden;
margin:20px auto 50px;}

.movie iframe{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;}

@media screen and (max-width:480px){.movie{margin:0 auto;}}

/*
============================================================
更新履歴
============================================================
*/
.news-area{margin:20px auto 50px;}
.news-area .main{
padding:4px 10px 5px;
border:1px solid #764100;
border-radius:4px;
background-color:#fff;
width:96%;
margin:auto;
position:relative;}
.news-area .main li{
color:#444;
padding:6px 2px 5px;
border-bottom:1px dotted #b9cdd6;}
.news-area .main li:last-child{border-bottom:none;}
.news-area .main li p{font-size:87.5%; line-height:1.2857;}
.news-area .main li a span.date,
.news-area .main li p span.date{
display:block;
padding-bottom:2px;
color:#3c454c;
font-size:78.5714%;
line-height:1.1818;}
.news-area .main li a{color:#7c0000;cursor:pointer;}
.news-area .main li a:hover{color:#f00;}

@media screen and (max-width:640px){
.news-area{margin:10px auto 0;}
.news-area .main li{font-size:13px;}}

@media screen and (max-width:480px){
.news-area{margin:20px auto 0;}}

/*
============================================================
お知らせ
============================================================
*/

#bnr_area{width:94%;margin:0 auto;}

#news_bnr{display:block; width:100%; text-align:center; margin:20px auto;}
#news_bnr img{width:100%; max-width:750px; filter:drop-shadow(5px 5px 2px rgba(0,0,0,0.5)); margin:5px 0;}

@media screen and (max-width:980px){#news_bnr{ margin:10px auto 0!important;}}
@media screen and (max-width:640px){#news_bnr{margin:0 auto !important;}}


/*お知らせバナー、更新履歴一覧ページリンクボタン*/
.recoedbtn {
    width: 90%;
    max-width: 250px;
    margin:20px auto;
    border: 2px solid #f6c85b;
    border-radius: 10px;
    background: linear-gradient( #061DB0 0%, #7F42E8 100%);
    box-shadow: 0 6px #040D5A;    
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
.recoedbtn  a{
    display: block;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    line-height: 36px;
}

@media screen and (max-width:899px){
#bnr_area{margin:20px auto 0;}
}

@media screen and (max-width:480px){
#bnr_area{margin:10px auto 0;}
.cat1#top_info {
    margin: 20px auto 30px;
}
}

/*
============================================================
関連サイト
============================================================
*/
#recommend-area{
display:flex;
width:100%;
max-width:980px;
margin:0 auto;}
#recommend-area .cat{
width:33%;
height:500px;
border:1px solid #B9CDD6;
border-radius:4px;
font-size:13px;
background:#fff;
padding:10px;}
#recommend-area .cat:first-child,#recommend-area .cat:nth-child(2){margin-right:1.5%;}
#recommend-area .cat .timeline{width:100%; height:450px; background-color:#fff; margin:auto; overflow:auto;}
#recommend-area .cat .ttl{font-size:13px; border-bottom:2px solid #B9CDD6; margin:0 auto 10px;}

#recommend-area ul li a{
display:block;
padding:10px 0;
font-size:87.5%;
line-height:1.4;
color:#990014;}
#recommend-area ul li a:hover{color:#f00;}

#recommend-area ul li p.game-tab a{padding:0 !important;}

#recommend-area dl{display:table;}
#recommend-area dl dt{display:table-cell;}
#recommend-area dl dt img{
width:60px;
vertical-align:bottom;
border-radius:6px;}
#recommend-area dl dd{
display:table-cell;
padding:3px 0 0 10px;
vertical-align:top;}

@media only screen and (min-width:1024px){
#recommend-area-in{
width:100%;
margin:0 auto;
display:table;
border-spacing:10px 0;}}

@media screen and (max-width:640px){
#recommend-area{display:block; margin:0 auto;}
#recommend-area .cat{
width:100%;
height:400px;
margin:0 auto 20px !important;}
#recommend-area .cat .timeline{height:250px;}}

@media screen and (min-width:801px){
#recommend-area dl dt img{width:86px;}
#recommend-area dl dd{padding:6px 0 0 12px;}}

/*
============================================================
初心者ゲーム説明リンクボタン
============================================================
*/
.box_title{
position: relative;
width: 100%;
max-width:1360px;
height: auto;
margin:0 auto;
padding: 0;
}
.box_btn_howto{
position: absolute;
top:5%;
right:-3%;
width: 26%;
max-width:210px;
height: auto;
margin:0 2% 0 2%;
padding: 0;
background-image:url(../img/howto/top_link_btn00.png); 
background-size:100%;
background-position: top left;
background-repeat: no-repeat;
background-color: transparent;
z-index:10;
}
.btn_howto_img {
width: 100%;
max-width:324px;
height: auto;
margin: 0;
padding: 0;
opacity: 0;
}
.btn_howto_img:hover {
  opacity: 1;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}

@media screen and (max-width:1200px) {
.box_btn_howto{
position: absolute;
top:1%;
right:0%;
width: 20%;
max-width:324px;
height: auto;
margin:0;
padding: 0;
background-image:url(../img/howto/top_link_btn00.png); 
background-size:100%;
background-position: top left;
background-repeat: no-repeat;
background-color: transparent;
z-index:2;
}
}

@media screen and (max-width:639px) {
.box_btn_howto{
top:5%;
width: 23%;
}
}

/*
============================================================
期間限定リンクボタン
============================================================
*/
.box_btn_birth{
position: absolute;
top:5%;
left:8%;
width: 26%;
max-width:185px;
height: auto;
margin:0 2% 0 2%;
padding: 0;
background-image:url(../img/birth_pre/swich_00.png); 
background-size:100%;
background-position: top left;
background-repeat: no-repeat;
background-color: transparent;
z-index:10;
pointer-events:none;
}
.btn_birth_img {
width: 100%;
max-width:185px;
height: auto;
margin: 0;
padding: 0;
opacity: 0;
pointer-events:auto;
}
.btn_birth_img:hover {
  opacity: 1;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}

.box_btn_birth:hover {
background-image:none;
}

@media screen and (max-width:1200px) {
.box_btn_birth{
position: absolute;
top:1%;
left:0%;
width: 20%;
max-width:185px;
height: auto;
margin:0;
padding: 0;
background-image:url(../img/birth_pre/swich_00.png); 
background-size:100%;
background-position: top left;
background-repeat: no-repeat;
background-color: transparent;
z-index:2;
}
}

@media screen and (max-width:639px) {
.box_btn_birth{
top:5%;
width: 23%;
}
}