@charset "utf-8";

/* CSS Document */

header, footer {z-index:999;}

/*
16px基準文字サイズ対応表
10px  62.5%
11px  68.75%
12px  75%
13px  81.25%
14px  87.5%
15px  93.75%
16px  100%
17px  106.25%
18px  112.5%
19px  118.75%
20px  125%
21px  131.25%
22px  137.5%
23px  143.75%
24px  150%
25px  156.25%
26px  162.5%
*/
@media screen and (min-width:800px) {
.f_8px{ font-size:8px; line-height:10px;}
.f_10px{ font-size:10px; line-height:12px;}
.f_12px{ font-size:12px; line-height:14px;}
.f_14px{ font-size:14px; line-height:16px;}
.f_16px{ font-size:16px; line-height:18px;}
.f_18px{ font-size:18px; line-height:20px;}
.f_20px{ font-size:20px; line-height:22px;}
.f_22px{ font-size:22px; line-height:24px;}
.f_24px{ font-size:24px; line-height:26px;}
.f_26px{ font-size:26px; line-height:28px;}
.f_28px{ font-size:28px; line-height:30px;}
.f_30px{ font-size:30px; line-height:32px;}
.f_32px{ font-size:32px; line-height:34px;}
.f_34px{ font-size:34px; line-height:36px;}
.f_36px{ font-size:36px; line-height:38px;}
.f_38px{ font-size:38px; line-height:40px;}
.f_40px{ font-size:40px; line-height:42px;}
.f_42px{ font-size:42px; line-height:44px;}
.f_44px{ font-size:44px; line-height:46px;}
.f_46px{ font-size:46px; line-height:48px;}
.f_48px{ font-size:48px; line-height:50px;}
}
@media screen and (max-width:799px) {
.f_8px{ font-size:1.6vw; line-height:1.8vw;}
.f_10px{ font-size:1.8vw; line-height:2.0vw;}
.f_12px{ font-size:2.0vw; line-height:2.2vw;}
.f_14px{ font-size:2.2vw; line-height:2.4vw;}
.f_16px{ font-size:2.4vw; line-height:2.6vw;}
.f_18px{ font-size:2.6vw; line-height:2.8vw;}
.f_20px{ font-size:2.8vw; line-height:3.0vw;}
.f_22px{ font-size:3.0vw; line-height:3.2vw;}
.f_24px{ font-size:3.2vw; line-height:3.4vw;}
.f_26px{ font-size:3.4vw; line-height:3.6vw;}
.f_28px{ font-size:3.6vw; line-height:3.8vw;}
.f_30px{ font-size:3.8vw; line-height:4.0vw;}
.f_32px{ font-size:4.0vw; line-height:4.2vw;}
.f_34px{ font-size:4.2vw; line-height:4.4vw;}
.f_36px{ font-size:4.4vw; line-height:4.6vw;}
.f_38px{ font-size:4.6vw; line-height:4.8vw;}
.f_40px{ font-size:4.8vw; line-height:5.0vw;}
.f_42px{ font-size:5.0vw; line-height:5.2vw;}
.f_44px{ font-size:5.2vw; line-height:5.4vw;}
.f_46px{ font-size:5.4vw; line-height:5.6vw;}
.f_48px{ font-size:5.6vw; line-height:5.8vw;}
}

/*
================================================================================================================
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;}

#shutter_bg {
    width: 100%;
    height: auto;
    background-color: #FFF;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    overflow: hidden;
	text-align: 
}

html{width:100%; height:100%; min-width:320px;}

body{
min-width:320px;
background-color:rgba(255,255,255,1.00);
font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin:0;
overflow-x:hidden;}

@media screen and (max-width:799px){
body{background-color:rgba(255,255,255,1.00);}
}

header,footer{
min-width:320px;
z-index:990;}

header{
background:-moz-linear-gradient(top, rgba(255,255,255,1.00) 0%, rgba(255,255,255,1.00) 100%);
background:-webkit-linear-gradient(top, rgba(255,255,255,1.00) 0%, rgba(255,255,255,1.00) 100%);
background:linear-gradient(to bottom, rgba(255,255,255,1.00) 0%, rgba(255,255,255,1.00) 100%);
}
footer{
background:-moz-linear-gradient(top, rgba(255,255,255,1.00) 0%, rgba(255,255,255,1.00) 100%);
background:-webkit-linear-gradient(top, rgba(255,255,255,1.00) 0%, rgba(255,255,255,1.00) 100%);
background:linear-gradient(to bottom, rgba(255,255,255,1.00) 0%, rgba(255,255,255,1.00) 100%);
}
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;}
@media screen and (min-width:800px){._pc{display: block !important;}._sp{display: none !important;}}
@media screen and (max-width:799px){._sp{display: block !important;}._pc{display: none !important;}}
/*
================================================================================================================
 ブランド ロゴ
================================================================================================================
*/
#brand-logo a {
	position:absolute;
	float:left;
	height:40px;
	width:130px;
	top:0;
	margin:0;
	background-image:url(https://www.konami.com/ci/logo/konami_logo_blur.png);
	background-size: contain;
	background-position:left top;
	background-repeat:no-repeat;
}
@media screen and (max-width:799px) {
#brand-logo a {
	height:40px;
	width:130px;
}
}

/*
================================================================================================================
PC/TABLET
================================================================================================================
*/
@media screen and (min-width:801px) {
header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 40px;
}
header #head_top {pointer-events:painted;}
header #head_top img {
    height: 22px;
    margin: 9px 0 0 10px;
}
footer {
    display: table;
    position: relative;
    bottom: 0;
    width: 100%;
    color: #333;
    border-top: 1px solid #05ADFF;
    background-color: #18C4E8;
    font-size: 12px;
	padding: 5px 0
}
#footer-link {
    display: table-cell;
    position: relative;
    left: 0;
    /*width: 45%;*/
    vertical-align: middle;
}
#footer-link ul {
    margin-left: 20px;
    letter-spacing: 1px;
    padding: 0;
}
#footer-link ul li {
    float: left;
}
#footer-link ul li a {
    color: #333;
}
#footer-link ul li a:hover {
    /*text-decoration: underline;*/
	color:#FF00CE;
}
#footer-link ul li span.footer_sp {
    display: none;
}
#footer-link ul:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}
#footer-copy {
    display: table-cell;
    position: relative;
    right: 0;
   /* width: 55%;*/
    font-size: 11px;
    text-align: right;
    vertical-align: middle;
    padding-right: 15px;
}
#footer-copy span {
    font-size: 12px;
    padding-right: 2px;
    color: #fff;
    font-family: Arial, Helvetica, serif;
}
.display_pc {
    display: block;
}
}

/*
================================================================================================================
MOBILE
================================================================================================================
*/
@media screen and (max-width:800px) {
header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 40px;
}
header #head_top {pointer-events:painted;}
header #head_top img {
    height: 20px;
    margin: 10px 0 0 10px;
}
footer {
    display: block;
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: #18C4E8;
    color: #fff;
    font-size: 12px;
}
#footer-link {
    display: block;
    width: 100%;
    vertical-align: middle;
}
#footer-link ul {
    width: 100%;
    padding: 0;
    margin: 0;
}
#footer-link ul li {
    display: block;
    width: 50%;
    float: left;
    border-bottom: solid 1px #00EBFF;
}
#footer-link ul li:nth-child(odd) {
    border-right: solid 1px #00EBFF;
}
#footer-link ul li:nth-child(1), #footer-link ul li:nth-child(2) {
    border-top: solid 1px #00EBFF;
}
#footer-link ul li a {
    display: block;
    color: #fff;
    padding: 10px 0 10px 10px;
    background-color: rgba(0,120,220,0.5);
}
#footer-link ul li a:hover {
    color: #fff;
    background-color: #50E7F4;
}
#footer-link ul li span.footer_sp {
    padding-right: 5px;
}
#footer-link ul li span.footer_pc {
    display: none;
}
#footer-link ul:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}
#footer-copy {
    display: block;
    width: 100%;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    padding: 1% 0;
}
#footer-copy span {
    font-size: 11px;
    padding-right: 2px;
    color: #fff;
    font-family: Arial, Helvetica, serif;
}
.display_pc {
    display: block;
}
}
/*
================================================================================================================
ヘッダー・フッター
================================================================================================================
*/

header,footer{
min-width:320px;
}

header{position:absolute; top:0; width:100%; height:37px;}
header .logo img{height:37px;}

footer{color:#333;}
footer a{color:#333;}
#footer-copy span{padding-right:2px; font-family:Arial, Helvetica, serif;}

@media screen and (min-width:801px){
footer{
position:relative;
padding: 5px 0;
bottom:0;
width:100%;
font-size:12px; 
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
color:#333; 
}

#footer-link{display:table-cell; position:relative; left:0; vertical-align:middle;}
#footer-link ul{margin-left:20px; letter-spacing:1px;}
#footer-link ul li{float:left;}
#footer-link ul li a:hover{text-decoration:underline;}
#footer-link ul li span.pc{display:inline-block!important;}
#footer-link ul:after{visibility:hidden; display:block; content:" "; clear:both; height:0;}

#footer-copy{display:table-cell; position:relative; right:0; font-size:11px; text-align:right; vertical-align:middle; padding-right:15px;}
#footer-copy span{font-size:12px; color: #333;}

.display_pc{display:block;}}

@media screen and (max-width:800px){
footer{
display: flex;
flex-wrap: wrap;
position:relative;
width:100%;
font-size:12px;}

#footer-link{display:block; width:100%; vertical-align:middle;}
#footer-link ul{display:flex; flex-wrap:wrap; width:100%; padding:0; margin:0;}
#footer-link ul li{width:calc(50% - 0.6px); float:left; background-color:#fff; border-bottom:solid 1px #FFFFFF;}
#footer-link ul li:nth-child(odd){border-right:solid 1px #FFFFFF;}
#footer-link ul li:nth-child(1),
#footer-link ul li:nth-child(2){border-top:solid 1px #FFFFFF;}
#footer-link ul li a{display:block; padding:10px 0 10px 25px; color:#FFFFFF; background-color:#FD54F2;}
#footer-link ul li a:hover{color:#FFFFFF; background-color:#FCBC53;}
#footer-link ul li span.pc{display:none!important;}
#footer-link ul:after{visibility:hidden; display:block; content:" "; clear:both; height:0;}
	
#footer-link ul li a::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #FFFFFF;
    position:absolute;
    margin-left: -15px;
    margin-top: 2px;
}

#footer-copy{display:block; width:100%; font-size:10px; text-align:center; vertical-align:middle; padding:1% 0; color:#FFFFFF; background-color:#FD54F2;}
#footer-copy span{font-size:11px; color:#FFFFFF;}

.display_pc{display:block;}}

/*
================================================================================================================
注意書き
================================================================================================================
*/
#footer-notice {
  display: block;
  width: 100%;
  color: #fff;
  background-color: #900;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
}
#footer-notice br.display_sp {
  display: none;
}
@media screen and (max-width:800px) {
  #footer-notice {
    height: auto;
    font-size: 11px;
    line-height: auto;
    padding: 3px 0;
  }
  #footer-notice br.display_sp {
    display: block;
  }
}

/*
================================================================================================================
 PageTop
================================================================================================================
*/
#page-top{
position:fixed;
bottom:50px;
right:10px;
font-size:10px;
z-index:9999;
}
#page-top span{font-size:22px;}
#page-top a{
background-color:rgba(255,180,40,0.8);
text-decoration:none;
color:#fff;
width:50px;
padding:10px 5px 6px 5px;
text-align:center;
line-height:10px;
display:block;
border-radius:24px;
-webkit-border-radius:24px;
-moz-border-radius:24px;
}
#page-top a:hover{
text-decoration:none;
background-color:rgba(255,240,140,1.0);
color:#fa0;
}

@media screen and (max-width:799px){
#page-top{
bottom:10px;
right:10px;
font-size:10px;
}
#page-top a{
width:50px;
padding:10px 2px 6px 2px;
text-align:center;
line-height:10px;
display:block;
border-radius:24px;
-webkit-border-radius:24px;
-moz-border-radius:24px;
}
}

/*
================================================================================================================
 ふわっと表示（フェードイン）
================================================================================================================
*/
.fade-in {
	transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-webkit-transition: opacity 0.4s;
	-o-transition: opacity 0.4s;
}

/*
================================================================================================================
 下からふわっと表示（フェードアップ）
================================================================================================================
*/
.fade-up, .fade-up01 {
	transition: transform 0.7s, opacity 0.7s;
	-moz-transition: transform 0.7s, opacity 0.7s;
	-webkit-transition: transform 0.7s, opacity 0.7s;
	-o-transition: transform 0.7s, opacity 0.7s;
}