@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");
*{
	margin:0px;
	padding:0px;
	outline:none;
	box-sizing:border-box;
}
html{
	font-size:62.5%;
	overflow-y:auto;
}
body{
	background:#ffffff;
	height:100%;
	width:100%;
	font-size:1.6rem;
	min-width:980px;
}
.spDISP{
	display:none;
}
.m-t-60{
	margin-top:60px !important;
}
.m-t-100{
	margin-top:100px !important;
}
/* ============================================
	KV
============================================ */
.kvArea{
	position:relative;
}
.kvArea__img img{
	width:100%;
	height:auto;
	vertical-align:top;
	max-width:none;
}
.main{
	position:relative;
	padding-top: 243px;
}
@media screen and (max-width: 1400px){
	.main{
		padding-top: 16.1%;
	}
}
/* ============================================
	試合詳細
============================================ */
.game_card{
	position:absolute;
	top:-77px;
	right: 0;
	left: 0;
	margin: auto;
	width: 100%;
	max-width: 1400px;
	box-shadow: 0px 0px 20px 0px rgba(10,10,10,0.5);
}
@media screen and (max-width: 1400px){
	.game_card{
		width: 95%;
	}
}
.game_card img{
	width: 100%;
	vertical-align:top;
}

.comment{
	display: block;
	margin:50px auto 30px auto;
	width: 100%;
	max-width: 1400px;
	text-align: center;
}
.comment p{
	font-size:clamp(14px, 1.35vw, 18px);
	line-height:2.0;
	font-weight: 700;
}

/* ============================================
	追従ボタン
============================================ */
.floatingbnr {
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: 30px;
    right: 0;
    width: 613px;
}
.floatingbnr .btn__close {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 34px;
    top: 5px;
	pointer-events: all !important;
}
.floatingbnr a{
	pointer-events: none;
}
/* ============================================
	ナビ
============================================ */
.nav{
	position: relative;
	max-width:1380px;
	height: 80px;
	margin:50px auto 170px auto;
	background-color: #000000;
}
@media screen and (max-width: 1400px){
	.nav{
		width: 93%;
	}
}
@media screen and (max-width: 1120px){
	.nav{
		height:60px;
		margin:0px auto 150px auto;
	}
}
.nav:before{
	position: absolute;
	z-index: -1;
	content: "";
	bottom:-10px;
	left: -10px;
	width: 100%;
	height: 100%;
	background-color: #e60012;
}
.nav:after{
	position: absolute;
	z-index: -1;
	content: "";
	bottom:-10px;
	right: -10px;
	width: 100%;
	height: 100%;
	background-color: #e60012;
}
.nav .list{
	margin:0 auto;
	padding: 0px 0% 0px 0%;
	width: 1000px;
}
@media screen and (max-width: 1120px){
	.nav .list{
		width: 900px;
	}
}
.nav .list:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.nav .list .item{
	float: left;
	width: 30%;
}
.nav .list .item:nth-child(2){
	width: 30%;
}
.nav .list .item:nth-child(3){
	width: 20%;
}
.nav .list .item:nth-child(4){
	width: 20%;
}
.nav .list .item a{
	display:block;
	text-decoration:none;
	color:#ffffff;
	text-align:center;
	font-size:24px;
	font-size:2.4rem;
	font-weight:700;
	height:80px;
	line-height:70px;
	transition:background 0.2s ease;
	background:url("/img/special/kokuritsu/0429/icon_arrow.png") no-repeat center 50px;
	background-size: 21px;
	padding: 0px 0px 0px 0px;
}
@media screen and (max-width: 1120px){
	.nav .list .item a{
		font-size:16px;
		font-size:1.6rem;
		height:60px;
		line-height:50px;
		background:url("/img/special/kokuritsu/0429/icon_arrow.png") no-repeat center 35px;
		background-size: 18px;
	}
}

/* ============================================
	キャンペーン
============================================ */
.campaign{
	position:relative;
	margin: 0px auto 50px auto;
	width: 100%;
	padding: 70px 0px 80px 0px;
	background:url("/img/special/kokuritsu/0429/campaign_bg.jpg") no-repeat 50% bottom;
	background-size: cover;
	box-shadow: 0px 0px 20px 10px rgba(10,10,10,0.3);
	
    padding-top: 70px;
    margin-top: -70px;
}
.campaign:after{
	position: absolute;
	z-index: -1;
	content: "";
	bottom:0;
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(left, #b59874 0%, #eddeae 100%);
background: -webkit-gradient(linear, left center, right center, from(#b59874), to(#eddeae));
background: -webkit-linear-gradient(left, #b59874 0%, #eddeae 100%);
background: -o-linear-gradient(left, #b59874 0%, #eddeae 100%);
background: -ms-linear-gradient(left, #b59874 0%, #eddeae 100%);
background: linear-gradient(to right, #b59874 0%, #eddeae 100%);
}
.campaign .campaign_area{
	margin: auto;
	width: 980px;
}
.campaign .ttl{
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 20px 0px;
	width: 1000px;
	text-align: center;
	transform: skewX(-10deg);
	box-shadow: -5px 5px 0px 0px rgba(10,10,10,1);
background: #c7b095;
background: -moz-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -webkit-gradient(linear, left center, right center, from(#f1e5c0), to(#c7b095));
background: -webkit-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -o-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -ms-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: linear-gradient(to right, #f1e5c0 0%, #c7b095 100%);	
}
@media screen and (max-width: 1040px){
	.campaign .ttl{
		width: 95%;
	}
}
.campaign .ttl img{
	margin: auto;
	transform: skewX(10deg);
}
.campaign .box{
	margin: 0px auto 0px auto;
	padding: 30px;
	background-color: rgba(255,255,255,0.5);
}
.campaign h3{
	margin: 60px auto 30px auto;
	padding: 0px 0px 10px 0px;
	font-size:34px;
	font-size:3.4rem;
	font-weight:700;
	line-height:1.5;
	color: #e60012;
	text-align: center;
	border-bottom: 1px solid #000000;
}
.campaign h4{
	margin: 0px 0px 20px 0px;
	padding: 0px;
	font-size:20px;
	font-size:2rem;
	font-weight:700;
	line-height:2.0;
	color: #000000;
}
.campaign h5{
	margin: 60px 0px 0px 0px;
	padding: 10px 0px 5px 0px;
	font-size:28px;
	font-size:2.8rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
}
.campaign h6{
	margin: 60px 0px 20px 0px;
	padding: 10px 0px 5px 0px;
	font-size:26px;
	font-size:2.6rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
}
.campaign ul{
	margin: 0px 0px 20px 0px;
}
.campaign li{
	margin: 0px;
	padding: 0px;
	font-size:20px;
	font-size:2rem;
	font-weight:700;
	line-height:2.0;
	color: #000000;
	text-indent:-1em;
	padding-left:1em !important;
}
.campaign p{
	margin: 0px;
	padding: 0px;
	font-size:16px;
	font-size:1.6rem;
	line-height:2.0;
	color: #000000;
}

.accordion {
	margin: auto;
}
.toggle {
	display: none;
}
.option {
	position: relative;
	margin-bottom: 1em;
}
.topic,
.caution {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.topic {
	margin: 60px 0px 0px 0px;
	padding: 10px 0px 5px 0px;
	font-size:28px;
	font-size:2.8rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
	display: block;
}

.topic::after,
.topic::before {
	content: "";
	position: absolute;
	right: 1.25em;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 5px;
	height: 0.75em;
	background-color: #000;
	transition: all 0.3s;
}
.topic::after {
	transform: rotate(90deg);
}
.caution {
	max-height: 0;
	overflow: hidden;
	margin: 0px auto 0px auto;
	background-color: rgba(255,255,255,0.5);
}
.toggle:checked + .topic + .caution {
max-height: 1000px;
transition: all 1.5s;
}
.toggle:checked + .topic::before {
transform: rotate(90deg) !important;
}
.campaign .box2{
	margin: 0px auto 0px auto;
	padding: 30px;
}
.campaign .box2 > ul li{
	margin: 0px;
	padding: 0px;
	font-size:20px;
	font-size:2rem;
	font-weight:normal;
	line-height:2.0;
	color: #000000;
	text-indent:-1em;
	padding-left:1em !important;
}
.campaign .box2 > p{
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size:20px;
	font-size:2rem;
	font-weight:700;
	line-height:2.0;
	color: #000000;
}
.campaign .box2 > a{
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size:20px;
	font-size:2rem;
	font-weight:700;
	line-height:2.0;
	color: #000000;
	text-decoration: none;
}

/* ============================================
	グッズバナー
============================================ */
.goods_bn{
	position:relative;
	margin: 40px auto -50px auto;
	width: 100%;
	padding: 0px 0px 0px 0px;
}
.goods_bn .goods_bn_area{
	margin: auto;
	width: 980px;
}
.goods_bn img{
	width:100%;
}
.goods_bn a.btn{
	display: block;
	width: 511px;
	height: 84px;
	margin: 20px auto 0px auto;
	padding: 27px 0px 0px 0px;
	background: url("/img/special/kokuritsu/0429/guide_btn.png") no-repeat center 50%;
	background-size: contain;
	text-align: center;
	font-size:17px;
	font-size:1.7rem;
	line-height:1.5;
	font-weight: 700;
	color: #ffffff;
}
.goods_bn a.btn:hover{
	text-decoration: none;
}

/* ============================================
	応募ボタン
============================================ */
.entry{
	position:relative;
	margin: 0px auto 0px auto;
	width: 100%;
	padding: 0px 0px 0px 0px;
}
.entry .entry_area{
	margin: auto;
	width: 980px;
}
.entry a.btn{
	display: block;
	width: 744px;
	margin: 0px auto 0px auto;
	padding: 0px;
	pointer-events: none;
}
.entry img{
	width:100%;
}

/* ============================================
	ガイド
============================================ */
.guide{
	position:relative;
	margin: 160px auto 60px auto;
	width: 100%;
	padding: 70px 0px 80px 0px;
	background: url("/img/special/kokuritsu/0429/guide_bg.jpg") no-repeat center top #dcdcdc;
	background-size: contain;
	box-shadow: 0px 0px 20px 10px rgba(10,10,10,0.3);
}
.guide .guide_area{
	margin: auto;
	width: 980px;
}
.guide .ttl{
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 20px 0px;
	width: 1000px;
	text-align: center;
	transform: skewX(-10deg);
	box-shadow: -5px 5px 0px 0px rgba(10,10,10,1);
background: #c7b095;
background: -moz-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -webkit-gradient(linear, left center, right center, from(#f1e5c0), to(#c7b095));
background: -webkit-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -o-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -ms-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: linear-gradient(to right, #f1e5c0 0%, #c7b095 100%);	
}
@media screen and (max-width: 1040px){
	.guide .ttl{
		width: 95%;
	}
}
.guide .ttl img{
	margin: auto;
	transform: skewX(10deg);
}
.guide .box{
	margin: 0px auto 0px auto;
	padding: 30px 30px 60px 30px;
	background-color: rgba(255,255,255,0.5);
}
.guide h3{
	margin: 60px auto 30px auto;
	padding: 0px 0px 10px 0px;
	font-size:34px;
	font-size:3.4rem;
	font-weight:700;
	line-height:1.5;
	color: #e60012;
	text-align: center;
	border-bottom: 1px solid #000000;
}
.guide h4{
	margin: 0px 0px 30px 0px;
	padding: 10px 0px 5px 0px;
	font-size:26px;
	font-size:2.6rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
}
.guide p{
	margin: 0px 0px 30px 0px;
	padding: 0px;
	font-size:20px;
	font-size:2.0rem;
	line-height:1.5;
	color: #000000;
}
.guide ul{
	margin:0px auto 30px auto;
	padding:0px;
	list-style:none;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;		
}
.guide ul:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.guide li{
	display:table;
	width:48%;
	float:left;
	padding: 0px 0px 0px 0px;
	margin:0px 4% 0px 0px;
}
.guide li:last-child{
	margin:0px 0px 0px 0px;
}
.guide li img{
	width:100%;
}
.guide a.btn{
	display: block;
	width: 511px;
	height: 84px;
	margin: auto;
	padding: 27px 0px 0px 0px;
	background: url("/img/special/kokuritsu/0429/guide_btn.png") no-repeat center 50%;
	background-size: contain;
	text-align: center;
	font-size:20px;
	font-size:2.0rem;
	line-height:1.5;
	font-weight: 700;
	color: #ffffff;
}
.guide a.btn:hover{
	text-decoration: none;
}
.guide .imgarea{
	display: block;
	width:670px;
	margin: 0px auto 30px auto;
}
.guide .imgarea img{
	width:100%;
}

/* ============================================
	イベント情報
============================================ */
.event{
	position:relative;
	margin: 160px auto 0px auto;
	width: 100%;
	padding: 70px 0px 80px 0px;
	background: url("/img/special/kokuritsu/0429/event_bg.jpg") no-repeat center top;
	background-size: cover;
	box-shadow: 0px 0px 20px 10px rgba(10,10,10,0.3);
}
.event .event_area{
	margin: auto;
	width: 980px;
}
.event .ttl{
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 20px 0px;
	width: 1000px;
	text-align: center;
	transform: skewX(-10deg);
	box-shadow: -5px 5px 0px 0px rgba(10,10,10,1);
background: #c7b095;
background: -moz-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -webkit-gradient(linear, left center, right center, from(#f1e5c0), to(#c7b095));
background: -webkit-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -o-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -ms-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: linear-gradient(to right, #f1e5c0 0%, #c7b095 100%);	
}
@media screen and (max-width: 1040px){
	.event .ttl{
		width: 95%;
	}
}
.event .ttl img{
	margin: auto;
	transform: skewX(10deg);
}
.event .box{
	margin: 0px auto 0px auto;
	padding: 0px 0px 30px 0px;
	background-color: rgba(255,255,255,0.5);
}
.event .box img{
	display: block;
	width:100%;
	margin: 0px auto 0px auto;
}
.event h3{
	margin: 35px auto 0px auto;
	padding: 0px 30px 0px 30px;
	font-size:20px;
	font-size:2.0rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
}
.event p{
	margin: 0px 0px 0px 0px;
	padding: 0px 30px 0px 30px;
	font-size:20px;
	font-size:2.0rem;
	line-height:1.5;
	color: #000000;
}
.event p span{
	display: block;
	font-size:16px;
	font-size:1.6rem;
}

/* ============================================
	アクセス
============================================ */
.access{
	position:relative;
	margin: 130px auto 70px auto;
	width: 100%;
	padding: 80px 0px 80px 0px;
	background: url("/img/special/kokuritsu/0429/access_bg.jpg") no-repeat center top;
	background-size: cover;
	box-shadow: 0px 0px 20px 10px rgba(10,10,10,0.3);
}
.access .access_area{
	margin: auto;
	width: 980px;
}
.access .ttl{
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 20px 0px;
	width: 1000px;
	text-align: center;
	transform: skewX(-10deg);
	box-shadow: -5px 5px 0px 0px rgba(10,10,10,1);
background: #c7b095;
background: -moz-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -webkit-gradient(linear, left center, right center, from(#f1e5c0), to(#c7b095));
background: -webkit-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -o-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: -ms-linear-gradient(left, #f1e5c0 0%, #c7b095 100%);
background: linear-gradient(to right, #f1e5c0 0%, #c7b095 100%);	
}
@media screen and (max-width: 1040px){
	.access .ttl{
		width: 95%;
	}
}
.access .ttl img{
	margin: auto;
	transform: skewX(10deg);
}
.access .box{
	margin: 0px auto 0px auto;
	padding: 0px 0px 20px 0px;
	background-color: rgba(255,255,255,0.5);
}
.access .box .accessmap{
	width: 100%;
	margin: 0px auto 10px auto;
	border-bottom: 3px solid #c5b8b1;
}
.access .box .accessmap .gmap{
	width: 100%;
	height: 600px;
}
.access p{
	margin: 0px 0px 0px 0px;
	padding: 0px 30px 0px 30px;
	font-size:20px;
	font-size:2.0rem;
	line-height:2.0;
	font-weight: 700;
	color: #000000;
}
