@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");

.pcDISP{
	display:none;
}
.m-t-60{
	margin-top:30px !important;
}
.m-t-100{
	margin-top:30px !important;
}

/* ============================================
	KV
============================================ */
.kvArea_kokuritsu{
	position:relative
}
.kvArea_kokuritsu__img img{
	width:100%;
	height:auto;
	vertical-align:top;
	max-width:none
}
.kokuritsu_main{
	position:relative;
	width: 100%;
    margin: auto;
    padding: 0px;
}

/* ============================================
	試合詳細
============================================ */
.game_card{
	position:absolute;
	bottom:-50px;
	right: 0;
	left: 0;
	margin: auto;
	width: 95%;
	box-shadow: 0px 0px 20px 0px rgba(10,10,10,0.5);
}
.game_card img{
	width: 100%;
	vertical-align:top;
}

.comment{
	display: block;
	margin:20vw auto 0px auto;
	width: 90%;
	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: 1000;
    bottom: 0px;
    right: 0;
	left: 0;
    width:100%;
}
.floatingbnr img{
    width:100%;
	vertical-align: bottom;
}
.floatingbnr .btn__close {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 34px;
    top: 5px;
}
.floatingbnr a{
	/*pointer-events: none;*/
}
.floatingbnr a.nolink {
    pointer-events: none;
}
/* ============================================
	ナビ
============================================ */
.nav{
	position: relative;
	width: 90%;
	height:50px;
	margin:18vw auto 0px auto;
	background-color: #000000;
}
.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: 100%;
}
.nav .list:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.nav .list .item{
	float: left;
	width: 33.3%;
}
.nav .list .item a{
	display:block;
	text-decoration:none;
	color:#ffffff;
	text-align:center;
	font-size:14px;
	font-size:1.4rem;
	font-weight:700;
	height:50px;
	line-height:40px;
	background:url("/img/special/kokuritsu/icon_arrow.png") no-repeat center 30px;
	background-size: 14px;
	padding: 0px 0px 0px 0px;
}
.nav .list .item a.nolink{
	pointer-events: none;
	color:#333333;
	background:url("/img/special/kokuritsu/icon_arrow.png") no-repeat center 30px;
	background-size: 0px;
}
/* ============================================
	キャンペーン
============================================ */
.campaign{
	position:relative;
	margin: 50px auto 10px auto;
	width: 100%;
	padding: 50px 0px 50px 0px;
	background:url("/img/special/kokuritsu/campaign_bg.jpg") no-repeat 50% bottom;
	background-size: cover;
	box-shadow: 0px 0px 20px 10px rgba(10,10,10,0.3);
}
.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: 90%;
}
.campaign .ttl{
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 10px 0px;
	width: 90%;
	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%);	
}
.campaign .ttl img{
	margin: auto;
	transform: skewX(10deg);
	height: 37.5px;
}
.campaign .box{
	margin: 0px auto 20px auto;
	padding: 5%;
	background-color: rgba(255,255,255,0.5);
}
.campaign h3{
	margin: 0px auto 20px auto;
	padding: 0px 0px 10px 0px;
	font-size:24px;
	font-size:2.4rem;
	font-weight:700;
	line-height:1.5;
	color: #e60012;
	text-align: center;
	border-bottom: 1px solid #000000;
	width: 100%;
}
.campaign h4{
	margin: 0px 0px 10px 0px;
	padding: 0px;
	font-size:16px;
	font-size:1.6rem;
	font-weight:700;
	line-height:1.5;
	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: 20px 0px 10px 0px;
	padding: 5px 0px 5px 0px;
	font-size:20px;
	font-size:2.0rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
}
.campaign ul{
	margin: 0px 0px 0px 0px;
}
.campaign li{
	margin: 0px 0px 10px 0px;
	padding: 0px;
	font-size:16px;
	font-size:1.6rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
	text-indent:-1em;
	padding-left:1em !important;
}
.campaign p{
	margin: 0px;
	padding: 0px;
	font-size:14px;
	font-size:1.4rem;
	line-height:1.7;
	color: #000000;
}

.accordion {
	margin: auto;
	width: 100%;
}
.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: 30px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
	font-size:20px;
	font-size:2.0rem;
	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: 2000px;
transition: all 1.5s;
}
.toggle:checked + .topic::before {
transform: rotate(90deg) !important;
}
.campaign .box2{
	margin: 0px auto 0px auto;
	padding: 5%;
}
.campaign .box2 > ul li{
	margin: 0px 0px 10px 0px;
	padding: 0px;
	font-size:14px;
	font-size:1.4rem;
	font-weight:normal;
	line-height:1.7;
	color: #000000;
	text-indent:-1em;
	padding-left:1em !important;
}
.campaign .box2 > p{
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size:16px;
	font-size:1.6rem;
	font-weight:700;
	line-height:1.7;
	color: #000000;
}
.campaign .box2 > a{
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size:16px;
	font-size:1.6rem;
	font-weight:700;
	line-height:1.7;
	color: #000000;
	text-decoration: none;
}
.mapimg{
	width: 100%;
	margin-top: 20px;
}

/* ============================================
	グッズバナー
============================================ */
.goods_bn{
	position:relative;
	margin: 0px auto -20px auto;
	width: 100%;
	padding: 0px 0px 0px 0px;
}
.goods_bn .goods_bn_area{
	margin: auto;
	width: 90%;
}
.goods_bn img{
	width:100%;
}
.goods_bn a.btn{
	display: block;
	width: 90%;
	margin: 10px auto 0px auto;
	padding: 2% 0px 3% 0px;
	background: url("/img/special/kokuritsu/guide_btn.png") no-repeat center top;
	background-size: 100%;
	text-align: center;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.2;
	font-weight: 700;
	color: #ffffff;
}

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

/* ============================================
	ガイド
============================================ */
.guide{
	position:relative;
	margin: 70px auto 10px auto;
	width: 100%;
	padding: 30px 0px 20px 0px;
	background: url("/img/special/kokuritsu/guide_bg.png") 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: 90%;
}
.guide .ttl{
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 10px 0px;
	width: 90%;
	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%);	
}
.guide .ttl img{
	margin: auto;
	transform: skewX(10deg);
	height: 37.5px;
}
.guide .box{
	margin: 0px auto 30px auto;
	padding: 5% 5% 5% 5%;
	background-color: rgba(255,255,255,0.5);
}
.guide h3{
	margin: 0px auto 20px auto;
	padding: 0px 0px 10px 0px;
	font-size:24px;
	font-size:2.4rem;
	font-weight:700;
	line-height:1.2;
	color: #e60012;
	text-align: center;
	border-bottom: 1px solid #000000;
	width: 100%
}
.guide h4{
	margin: 0px 0px 20px 0px;
	padding: 5px 0px 5px 0px;
	font-size:20px;
	font-size:2.0rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
}
.guide p{
	margin: 0px 0px 20px 0px;
	padding: 0px;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.5;
	color: #000000;
}
.guide ul{
	margin:0px auto 20px 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:100%;
	float:none;
	padding: 0px 0px 0px 0px;
	margin:0px 0% 10px 0px;
}
.guide li:last-child{
	margin:0px 0px 0px 0px;
}
.guide li img{
	width:100%;
}
.guide a.btn{
	display: block;
	width: 100%;
	margin: auto;
	padding: 4% 0px 5% 0px;
	background: url("/img/special/kokuritsu/guide_btn.png") no-repeat center top;
	background-size: 100%;
	text-align: center;
	font-size:18px;
	font-size:1.8rem;
	line-height:1.5;
	font-weight: 700;
	color: #ffffff;
}
.guide a.btn:hover{
	text-decoration: none;
}
.guide .imgarea{
	display: block;
	width:90%;
	margin: 0px auto 20px auto;
}
.guide .imgarea img{
	width:100%;
}

/* ============================================
	イベント情報
============================================ */
.event{
	position:relative;
	margin: 70px auto 0px auto;
	width: 100%;
	padding: 50px 0px 50px 0px;
	background: url("/img/special/kokuritsu/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: 90%;
}
.event .ttl{
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 10px 0px;
	width: 90%;
	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%);	
}
.event .ttl img{
	margin: auto;
	transform: skewX(10deg);
	height: 37.5px;
}
.event .box{
	margin: 0px auto 20px auto;
	padding: 20px 0px 20px 0px;
	background-color: rgba(255,255,255,0.5);
}
.event .box img{
	display: block;
	width:100%;
	margin: 0px auto 0px auto;
}
.event h2{
	margin: 0px 5% 20px 5%;
	padding: 5px 0px 5px 0px;
	font-size:20px;
	font-size:2.0rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
}
.event h3{
	margin: 0px auto 0px auto;
	padding: 0px 0px 10px 0px;
	font-size:20px;
	font-size:2.0rem;
	font-weight:700;
	line-height:1.5;
	color: #000000;
}
.event p{
	margin: 0px 0px 20px 0px;
	padding: 0px 5% 0px 5%;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.5;
	color: #000000;
}
.event p span{
	display: block;
	font-size:14px;
	font-size:1.4rem;
}
.event p span.alignR{
	text-align: right;
}
.event .box ul{
	margin:20px auto 5px auto;
	padding: 0px 5% 0px 5%;
	list-style:none;	
}
.event .box ul li{
	display:block;
	width:100%;
	padding: 0px 0px 0px 0px;
	margin:0px 0% 20px 0px;
	text-align: center;
	overflow: hidden;
}
.event .box ul li:last-child{
	margin:0px 0% 0px 0px;
}
.event .box ul li a{
	display: block;
	width: 100%;
	transition: all 0.2s ease;
}
.event .box ul li a:hover{
  transform: scale(1.05);
}
.event .box ul li a img{
	width: 100%;
}
.event .glee{
	display: block;
	margin: 10px 5% 10px 5%;
	padding: 0px;
}
.event a.btn_k{
	display: block;
	width: 90%;
	margin: auto;
	padding: 4% 0px 5% 0px;
	background: url("/img/special/kokuritsu/guide_btn.png") no-repeat center top;
	background-size: 100%;
	text-align: center;
	font-size:18px;
	font-size:1.8rem;
	line-height:1.5;
	font-weight: 700;
	color: #ffffff;
}
/* ============================================
	アクセス
============================================ */
.access{
	position:relative;
	margin: 50px auto 50px auto;
	width: 100%;
	padding: 50px 0px 50px 0px;
	background: url("/img/special/kokuritsu/access_bg.png") 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: 90%;
}
.access .ttl{
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 10px 0px;
	width: 90%;
	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%);	
}
.access .ttl img{
	margin: auto;
	transform: skewX(10deg);
	height: 37.5px;
}
.access .box{
	margin: 0px auto 0px auto;
	padding: 0px 0px 5% 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: 60vw;
}
.access p{
	margin: 0px 0px 10px 0px;
	padding: 0px 5% 0px 5%;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.5;
	font-weight: 700;
	color: #000000;
}

/* ============================================
	EVENT
============================================ */
.photo {
	display: block;
	width: 100%;
	margin: auto;
	padding: 0px 0px 0px 0px;
}
.photo .inner {
	max-width: 100%;
	margin: auto;
	padding: 30px 0px 10px 0px;	
}
.photo .inner h3 {
	margin: 0px auto 20px auto;
    padding: 0px 0px 10px 0px;
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.3;
    color: #e60012;
    text-align: center;
    border-bottom: 1px solid #000000;
    width: 90%;
}
.photo .inner .box {
	width: 100%;
	margin: auto;
	padding: 0px 0% 0px 0%;	
}
.photo .inner .box img{
	display: block;
	width: 100%;
	margin: auto;
	padding:0px;
}

/* ============================================
	スライダーエリア
============================================ */
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  /*height: 300px;*/
	position: relative;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
}

/* 丸ボタン */
.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  margin: 0 0 0 10px !important;
  background: #333 !important;
}
.swiper-pagination-bullet:first-child {
  margin: 0 !important;
}

.arrow_adjust{
	position: absolute;
	top: 60%;
	width: 100%;
}

/* 矢印ボタンのスタイル */
.swiper-button-prev,
.swiper-button-next {
  width: 50px !important; /* ボタンの幅 */
  height: 50px !important; /* ボタンの高さ */
  background-size: 24px 40px; /* 表示したいサイズ */
  transform: translateY(-50%);
  margin-top: 0;
	pointer-events: all;
	background-color: #ff0000;
}
/* 次ページボタンのスタイル */
.swiper-button-next {
/*background-image: url('https://kiomiru.co.jp/blog/wp-content/uploads/2021/09/img_arrow_black_01.png');*/
	background: url("/img/special/kokuritsu/img_arrow_black_01.png") no-repeat 50% 50%;
	background-size: 14px;
	background-color: rgba(0,0,0,.5);
}
/* 前ページボタンのスタイル */
.swiper-button-prev {
  /*background-image: url('https://kiomiru.co.jp/blog/wp-content/uploads/2021/09/img_arrow_black_01.png');*/
	background: url("/img/special/kokuritsu/img_arrow_black_01.png") no-repeat 50% 50%;
  transform: translateY(-50%) scale(-1, 1); /* 左右反転 */
	background-size: 14px;
	background-color: rgba(0,0,0,.5);
}
.swiper-button-prev:after,
.swiper-button-next:after {
 display: none;
}

/* ============================================
	POPUP
============================================ */
.mfp-inline-holder .mfp-content {
  padding: 50px;
  width: 980px;
  background: #fff;
  margin: 50px;
}
.mfp-inline-holder .mfp-content .mfp-close {
  color: #fff;
  top: -44px;
  font-size: 60px;
  opacity: 1;
}
.mfp-inline-holder .mfp-content span.btn {
  color: #fff !important;
}
.mfp-inline-holder .mfp-content span.btn:after, .mfp-inline-holder .mfp-content span.btn:before {
  content: none;
}

.mfp-container {
  padding: 0;
}

.mfp-inline-holder .mfp-content {
  width: 90%;
  box-sizing: border-box;
  margin: 50px 0;
  padding: 30px 5%;
}
.mfp-inline-holder .mfp-content img{
  width: 100%;
}

.mfp-wrap {
  top: 0 !important;
}