@charset "utf-8";
/* CSS Document */
* html body{behavior:url("/gate/p/css/csshover.htc");}

div{word-break:break-all; word-wrap:break-word;}
form,input{margin:0; padding:0;}
a,img{border:none;}
.clear{clear:both; margin:0; padding:0; height:0;}
.textindent{text-indent:-9999px; overflow:hidden;}
li{list-style:none;}

a{text-decoration:underline; color:#940042;}
body{
min-width:320px !important;
background-color:#fff;
font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}

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

html{width:100%; min-width:320px !important; height:100%;}
header{background-color:#fff;}
header,footer{z-index:10;}
/*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;}
li{list-style:none;}
strong{font-weight:bold;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

/*デバイス別表示非表示*/
.display_pc{display:block;}
.display_sp{display:none;}
@media screen and (max-width:639px){
.display_pc{display:none;}
.display_sp{display:block;}
}

/*
================================================================================================================
ページデザイン共通
================================================================================================================
*/

#medal_header{
background:url(../img/bg/header_bg.png),linear-gradient( 90deg,rgba(255,164,30,1), rgba(253,252,83,1));
  background-position:center;
  background-repeat:repeat;
  background-size:auto;
  padding:5px 10px;
  border-bottom:3px solid #a46211;
  position: relative;
}
#medal_header:after{
  content: "";
  border-bottom: solid 4px #fff9c4;
  position: absolute;
  bottom:0;
  left: 0;
  width:100%;
}
#medal_header img{
width:auto;height:60px;
}
@media screen and (max-width: 639px){
#medal_header{
background-size:3%,auto;
}

#medal_header img{
width:auto;height:40px;
}
}


#main{
  width:100%;
min-height: calc(100vh - 180px);
position:relative;
background-image:url(../img/bg/bg_ptn.png),url(../img/bg/main_visual.png);
  background-position:center,center bottom;
  background-repeat:repeat,no-repeat;
  background-size:auto,contain;
  background-attachment:fixed,fixed;
}
#main::before {
content: "";
background-image:url(../img/bg/bg_ptn.png),url(../img/bg/main_visual.png);
display: block;
  background-position:center,center bottom;
  background-repeat:repeat,no-repeat;
  background-size:auto,contain;
  background-attachment:fixed,fixed;
position: fixed;
top: 0;
bottom:0;
left: 0;
right:0;
z-index:-1;
}
.bg_color{
width:100%;
height:350px;
position:absolute;
top:0;
z-index:0;
background: linear-gradient(rgba(168,34,41,1), rgba(168,34,41,0));
}


/*表示エリア*/
#content{
width:100%;
    max-width: 1200px;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
}

/*ベース枠*/
.base{
width:width:96%;
margin:0 auto 30px;
padding:20px 40px;
background-color:rgba(116,0,4,1);
border-radius:10px;
}
.base .title{
color: #FFF;
font-size: 24px;
line-height:40px;
font-weight: bold;
text-align:center;
text-shadow: rgba(168,34,41,1.0) 2px 0px 2px,
 rgba(168,34,41,1.0) -2px 0px 2px, 
 rgba(168,34,41,1.0) 0px -2px 2px, 
 rgba(168,34,41,1.0) -2px 0px 2px, 
 rgba(168,34,41,1.0) 2px 2px 2px, 
 rgba(168,34,41,1.0) -2px 2px 2px, 
 rgba(168,34,41,1.0) 2px -2px 2px, 
 rgba(168,34,41,1.0) -2px -2px 2px;
background: linear-gradient(rgba(243,87,88,1), rgba(138,3,28,1),rgba(243,87,88,1));
border-radius:30px;
}
@media screen and (max-width:639px){

#main,#main::before{
background-image:none;
}
.bg_color{background:none;}
.base{padding:20px 5px 10px;}
.base .title{font-size:18px;line-height:30px;}
}


/*メインビジュアル*/
#topvisual{width:100%;margin:0 auto;}
#topvisual img{width:100%;height:auto;}


@media screen and (max-width: 639px) {
#topvisual .regular_slide .period{font-size:130%;}
}
@media screen and (max-width: 480px) {
#topvisual .regular_slide .period{font-size:100%;}
}

/*表示非表示ボタン*/
.btn {
    display:block;
    width: 90%;
    max-width: 250px;
    border: 2px solid #f6c85b;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    margin: 0 auto 20px;
}
.btn a{display: block;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    line-height: 36px;
}

.btn#con_record,
.btn#news_record{
background: linear-gradient( #ff6b72 0%, #a61717 100%);
    box-shadow: 0 6px #750f0f;}
    
@media screen and (max-width:639px){
#news ul#newslist{
width:calc(100% - 10px);
margin: 10px auto;
padding:10px;
}
}
/*
============================================================
コンテンツバナー欄
============================================================
*/
#con_bnr{}
#con_bnr ul#conbnr_list{
background-color:#FFF;
width:calc(100% - 40px);
margin: 20px auto;
padding:20px;
border-radius:10px;
}
#con_bnr ul#conbnr_list li{width:calc(100% - 100px);margin:20px auto;position:relative;}
#con_bnr ul#conbnr_list li .newmark{position:absolute;top:-20px;right:-20px;width:150px;height:0;padding-top:78px;
/*background-image:url("../img/icon_new.png");*/
background-position:center;
  background-repeat:no-repeat;
  background-size:contain;}
#con_bnr ul#conbnr_list li img{width:100%;height:auto;}
@media screen and (max-width:980px){
#con_bnr ul#conbnr_list li .newmark{top:-20px;right:-10px;width:80px;padding-top:40px;}
}
@media screen and (max-width:639px){
#con_bnr ul#conbnr_list{width:calc(100% - 10px);
margin: 20px auto 10px;
padding:10px;}
#con_bnr ul#conbnr_list li{width:100%;margin:2px auto;}
}
/*
============================================================
更新情報欄
============================================================
*/
#news{}
#news ul#newslist{
background-color:#FFF;
text-align: left;
width:calc(100% - 40px);
margin: 20px auto;
padding:20px;
font-size: 14px;
border-radius:10px;
}
#news ul#newslist li {
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #CCC;
}
#news ul#newslist li:after{ content: ""; display: block; clear: both; }
#news ul#newslist dl {
    width: 100%;
}

#news ul#newslist dt,#news ul#newslist dd{
float:left;
}
#news ul#newslist dt {
    width: 100px;
    padding-bottom: 5px;
}
#news ul#newslist .info {
    margin-bottom: 5px;
    position: relative;
    padding-left: 70px;
}
#news ul#newslist .info .type {
float: left;
    width: 65px;
    margin-right: 10px;
    text-align: center;
    color: #FFF;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0099ff;
}
#news ul#newslist dd a {
    text-decoration: underline;
    color: #0066cc;
}

/*
============================================================
おすすめ情報・公式サイト
============================================================
*/
#recommend-area{
display:flex;
width:100%;
max-width:980px;
margin:0 auto;
padding-bottom:20px;}
#recommend-area .cat{
width:33%;
min-height:450px;
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:350px; 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;}

/*公式サイトバナー*/
#recommend-area .cat#off_bnr{
width:66%;
}
#recommend-area .cat#off_bnr ul{text-align: left;}
#recommend-area .cat#off_bnr ul li{
width:calc(50% - 5px);
display:inline-block;
}
#recommend-area .cat#off_bnr ul li:nth-child(even){
float:right;  
}
#recommend-area .cat#off_bnr ul li a{
padding:5px;
}
#recommend-area .cat#off_bnr ul img{
width:100%;
height:auto;
vertical-align:bottom;
}

@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;padding-bottom:20px;}
#recommend-area .cat,
#recommend-area .cat#off_bnr{
width:96%;
min-height:300px;
margin:20px auto 0 !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;}}


.cat1{
position:relative;
width:100%;
max-width:980px;
border-radius:10px;
margin:100px auto;}
.cat1 img{width:100%; height:auto;}

.cat1 .cat-title{
position:absolute;
top:-30px;
width:100%;
text-align:center;
z-index:3;}
.cat1 .cat-title img{width:100%; max-width:200px;}

.cat1 .top,
.cat1 .btm{
position:absolute;
width:100%;
height:96px;
background-repeat:no-repeat;
z-index:2;}
.cat1 .top{top:-60px; background-image:url(../img/common/box/bar_top.png); background-position:left;}
.cat1 .btm{bottom:-20px; background-image:url(../img/common/box/bar_bottom.png); background-position:right;}

.cat1 .inner{
width:100%;
max-width:920px;
background-image:url(../img/common/box/bg.png);
background-repeat:repeat-y;
border:2px solid #013c50;
padding:40px 0;
margin:0 auto;}

.cat1 .inner .sub-title{
display:block;
width:90%;
max-width:840px;
text-align:center;
margin:0 auto 20px;}
.cat1 .inner .sub-title img{width:100%; max-width:600px;}

.cat1 .inner .red{
background:#fe4475;
background:-moz-linear-gradient(top, #fe4475 0%, #c3064c 100%);
background:-webkit-linear-gradient(top, #fe4475 0%,#c3064c 100%);
background:linear-gradient(to bottom, #fe4475 0%,#c3064c 100%);
padding:5px 0;}
.cat1 .inner .green{
background-color:#00cea0;
background-image:url(../img/common/bg/title01.png);
background-repeat:repeat-x;
background-position:bottom;
border-radius:10px;}

@media screen and (max-width:980px){
.cat1 .inner{width:94%;}}

@media screen and (max-width:800px){
.cat1 .cat-title img{max-width:170px;}}

@media screen and (max-width:640px){
.cat1 .cat-title img{max-width:150px;}
.cat1 .top,.cat1 .btm{background-size:600px auto;}
.cat1 .top{left:-5px;}
.cat1 .btm{right:-5px; bottom:-30px;}}

@media screen and (max-width:480px){
.cat1{margin:70px auto;}
.cat1 .cat-title img{max-width:130px;}}

@media screen and (max-width:320px){
.cat1{margin:50px auto;}}

#pege_top {
    width:82px;
    height:0;
    cursor:pointer;
    background-image:url("../img/return.png");
    background-repeat:no-repeat;
    background-size: cover;
    padding-top:84px;
    position: fixed;
    bottom:10px;
    right:10px;
}

@media screen and (max-width:639px){
#pege_top {
    width:70px;
    padding-top:70px;
    right:5px;
}
}


@media screen and (max-width:320px){
.cat1{margin:50px auto;}}


/*
============================================================
戻るボタン
============================================================
*/
#return{text-align:center;margin: 20px auto;padding-top:10px;font-size: 13px;border-top:1px solid #666666;}
.btn_top_page {
    width: 120px;
    height: 30px;
    background: url(https://eacache.s.konaminet.jp/game/eacloud/p/images/common/bt_return_01.png);
    margin: 20px auto;
    cursor:pointer;
}