/*  Main
=============================================== */
.clearfix:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.clearfix { min-height:1px;}
* html .clearfix {height: 1px;}
#main { width:980px; margin:auto; }

#snav { margin-bottom:20px; padding:15px 15px 0 15px; box-sizing:border-box; border-radius:20px; background:rgb(181,127,40); background:linear-gradient(90deg, rgba(181,127,40,1) 0%, rgba(252,207,0,1) 50%, rgba(181,127,40,1) 100%); font-weight:900; font-style:normal; font-feature-settings:"palt"; color:#000; text-align:center; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); /* for space */ font-size:0; }
#snav li { display:inline-block; margin:0 15px 15px 0; vertical-align:middle; /* for space */ font-size:1.3rem; }
#snav li a { color:#000; text-decoration:none; font-weight:700; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #snav li a:hover { opacity:0.5; } }
#snav li a::before { content:"▶︎"; font-size:50%; margin:-0.25em 0.5em auto 0; display:inline-block; vertical-align:middle; }

.pagelink { margin-bottom:20px; padding:15px 15px 0 15px; background-color:#2863ab; border-radius:10px; text-align:center; /* for space */ font-size:0; }
.pagelink li { display:inline-block; margin:0 15px 15px 0; vertical-align:middle; /* for space */ font-size:1.1rem; }
.pagelink li a { color:#fff; text-decoration:none; font-weight:700; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { .pagelink li a:hover { opacity:0.5; } }
.pagelink li a::before { content:"▼"; font-size:60%; margin:-0.2em 0.5em auto 0; display:inline-block; vertical-align:middle; }

.box { margin-bottom:40px; }
.box-hd { margin-bottom:20px; text-align:center; }
.box-ttl { color:#de378f; }
.box-ttl .en, .box-ttl .jp { display:block; text-shadow:0px 2px 4px rgba(0,0,0,0.2); }
.box-ttl .en { margin-bottom:5px; font-size:320%; font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:0.02em; }
.box-ttl .jp { font-weight:900; font-style:normal; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#main { width:94%; margin:0 3%; }

#snav li { font-size:1.0rem; }

.pagelink li { font-size:0.9rem; }

.box-ttl { font-size:80%; }

}


/* top-top-cal
=============================================== */

#top-cal { width:980px; margin:0 auto 20px auto; padding:20px; box-sizing:border-box; border-radius:20px; background-color:#de378f; color:#FFFFFF; box-shadow:0px 0px 40px rgba(0,0,0,0.2) inset; font-weight:700; text-align:center; }

#top-cal-ttl { margin-bottom:0.5em; font-size:1.6rem; }
#top-cal-btn { /* for space */ font-size:0; }
#top-cal-btn li { display:inline-block; margin:0 0.2em 0.5em 0.2em; vertical-align:middle; /* for space */ font-size:1.6rem; }
#top-cal-btn li::before { display:inline-block; position:relative; top:-0.2em; content:"▶︎"; vertical-align:middle; margin-right:0.25em; font-size:60%; color:#FFFFFF; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#top-cal { width:94%; margin:10px 3%; padding:10px; border-radius:10px; }

#top-cal-ttl { font-size:1.1rem; }
#top-cal-btn li { font-size:1.0rem; }

}

/* youtube
-------------------------------- */

.mov_yt { width:100%; margin:10px 0 20px 0; }
.mov_yt_inner { position:relative; width:auto; height:0; padding-top:56.25%; }
.mov_yt_inner iframe { position:absolute; left:0; top:0; width:100%; height:100%; }

/* top-yt
=============================================== */
#top-yt-list { margin-bottom:20px; padding:0 50px; /* for space */ font-size:0; }
.top-yt-list-item { display:inline-block; width:278px; margin:0 7px; vertical-align:middle; /* for space */ font-size:1rem; }
.top-yt-list-item .tmb { position:relative; width:100%; height:0; margin-bottom:5px; padding-top:56.25%; background-color:rgba(0,0,0,0.2); }
.top-yt-list-item .tmb a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { .top-yt-list-item .tmb a:hover { opacity:0.5; } }
.top-yt-list-item .tmb a span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.top-yt-list-item .cap { line-height:140%; color:#333; }

#top-yt-list .slick-arrow { position:absolute; top:0; width:50px; height:100%; background-position:center center; background-repeat:no-repeat; background-size:50% auto; text-indent:-9999px; /* reset */ background-color:transparent; border:none; cursor:pointer; outline:none; padding:0; appearance:none; text-indent: -9999px; }
#top-yt-list .slick-prev { left:-50px; z-index:12; background-image:url(../img/top/ar_l_w.png); }
#top-yt-list .slick-next { right:-50px; z-index:13; background-image:url(../img/top/ar_r_w.png); }
#top-yt-list .slick-arrow:hover { background-color:rgba(255,255,255,0.2); }

#top-yt-pl { margin-bottom:20px; padding:20px 10px 10px 10px; border:#F8CB02 2px solid; border-radius:20px; text-align:center; }
#top-yt-pl-ttl { margin-bottom:20px; font-size:180%; color:#F8CB02; }
#top-yt-pl-btn { width:100%; /* for space */ font-size:0; }
#top-yt-pl-btn li { display:inline-block; margin:0 1% 10px 1%; width:23%; vertical-align:middle; /* for space */ font-size:1rem; }
#top-yt-pl-btn li a { display:inline-block; position:relative; width:100%; padding:1.0em 0; border-radius:2.2em; line-height:130%; font-weight:bold; color:#fff; text-decoration:none; background:#c71322; transition: opacity 0.2s ease-out; }
#top-yt-pl-btn li a::before { display:inline-block; position:absolute; top:1.95em; left:2.2em; margin-right:0.7em; content:"▶︎"; font-size:50%; }
#top-yt-pl-btn li a:hover { opacity:0.5; }


/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#top-yt-list { margin:0 -3% 20px -3%; padding:0 8.0vw; /* for space */ font-size:0; }
.top-yt-list-item { width:30vw; margin:0 1vw; }
.top-yt-list-item .cap { font-size:90%; }

#top-yt-list .slick-arrow { width:8.0vw; }
#top-yt-list .slick-prev { left:-8.0vw; }
#top-yt-list .slick-next { right:-8.0vw; }

#top-yt-pl-ttl { font-size:160%; }
#top-yt-pl-btn li { display:inline-block; margin:0 1% 10px 1%; width:48%; vertical-align:middle; /* for space */ font-size:1rem; }


}




/* top-2col
=============================================== */
#top-2col {margin-top:25px;}
#top-2col:after {content:"";clear:both;display:block;}
#top-twitter { width:980px; float:left; }
#top-banner { width:450px; float:right; padding-top:10px; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {
#top-twitter { width:auto; float:none; }
#top-banner { width:auto; float:none; padding-top:0; }
}


/* top-2col2
=============================================== */
#top-2col2:after {content:"";clear:both;display:block;}


/*	SNS buttons
============================== */
@media all and (min-width: 768px) {

div.sns-btns {
	width:320px;
	margin:0 auto 10px;
	padding:0px 0 7px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
div.sns-btns div.tw {
	width:100px;
	float:left;
	margin-left:40px;
}
div.sns-btns div.fb {
	float:right;
}
}
@media all and (max-width: 767px) {
div.sns-btns {
	padding:10px 0 7px;
	text-align:center;
}
div.sns-btns div.tw, div.sns-btns div.fb {
	display:inline-block;
}
div.sns-btns div.tw {
	margin-left:40px;
	padding-right:10px;
}
}



@media all and (min-width: 768px) {
#top_map_area{width:960px;margin:10px auto;border:#F8CB02 2px solid; }
#tournament_tit {width: 960px;
    height: 62px;
    background: url(../img/top_tournamen_parts.jpg) no-repeat;
    text-indent:-9999px; 
  }
  
.imgCB span {width:960px;height:921px;margin:8px auto;display:block;text-indent: -9999px;  }
.imgCB a:hover { opacity:0.5; }

}

@media all and (max-width: 767px) {
#yosen_map_tit,#tournament_tit,#live_tit, #midokoro_tit,#onair_tit,#result_tit2,#about_tit,#team_tit,#ouen_tit,#yosen_tit,#video_tit { 
 text-align:center; background:#de378f; padding:15px 0px;
 font-weight: bold;
 font-size:150%;color:#FFFFFF;
border-bottom: 6px double #FFFFFF;}
#top_map_area{width:100%;margin:10px auto;border:#F8CB02 2px solid; }
.imgCB span{width:100%; height:0; padding-top:95.9375%; display:block;background-size: contain;position:relative;text-indent:-9999px;margin:10px 0px;}

}


.sports-banner span {float:right;background-image:url(../img/top/sports-banner.jpg);width:450px;height:105px;margin:8px auto;display:block;text-indent: -9999px;  }
.youtube-banner span {float:left;background-image:url(../img/top/youtube-banner.jpg);width:450px;height:105px;margin:8px auto;display:block;text-indent: -9999px;  }

@media all and (min-width: 768px) {
#c-box{width:920px;margin:0px auto;}
}
@media all and (max-width: 767px) {
.sports-banner span,.youtube-banner span{width:100%; height:0; padding-top:23.3333333%; display:block;background-size: contain;position:relative;text-indent:-9999px;margin:10px 0px;}
}





/* top-attention
=============================================== */

#top-attention { width:980px; margin:10px auto 20px auto; padding:20px; box-sizing:border-box; border-radius:20px; 
background-color:#de378f; color:#fff; font-size:160%; line-height:140%; box-shadow:0px 2px 4px rgba(0,0,0,0.2); font-weight:700; text-align:center; }
#top-attention #bn-tiktok { background-image:url(../img/common/bn-tiktok.jpg);width:300px;margin:0px auto;  }
/* ---- Media Queries ---- */

@media all and (max-width: 767px) {
#top-attention { width:94%; margin:10px 3%; padding:10px; border-radius:10px; font-size:120%; }
}


/*///////////////// news mov（live配信など）  ////////////////*/
#news_mov{
background-color: #69508c;
width: 100%;
padding-top: 4em;
}
@media all and (max-width: 767px) {
#news_mov{
padding-top: 2em;
}


/*///////////////// news ////////////////*/
#news{
margin-top: 5em;
background: rgba(255, 255, 255, 1);
}

#news h2{
    background: url(../img/title_bg.png?new) center center no-repeat;
    background-size: contain;
}


#news .inbox{
padding:.5em 0;
}


#news dl a{
	color: #000;
	transition: all .5s ease-in-out;}
#news dl a:hover{color: #AA7701;}
#news dl{
	width: 90%;
	font-size:100%;
	margin:1em auto;
	padding: 1em;
	display: flex;
	flex-wrap:nowrap;
align-content: flex-start;
align-items: flex-start;
border-bottom: solid 1px #AA7701;
	word-break: break-word;
	line-height: 1.2;
}
#news dl:last-of-type{
	border:none;
}

#news dt{
color: #fff;
background: #C99B20;
font-family: fot-udkakugoc80-pro, sans-serif;
font-style: normal;
font-weight: 700;
margin-right: 1em;
white-space: nowrap;
padding:.2em .5em;
text-align: center;
}
#news dd{
width: 100%;
padding:.2em 0;
font-feature-settings: "palt";
}

@media all and (max-width: 767px) {
#news{
margin-top: 2em;
}
#news h2{
    background: url(../img/title_bg_smp.png?new) center center no-repeat;
    background-size: contain;
}
#news dl{
	width: 90%;
	margin:1em auto 0;
	padding: 1em 0;
	font-size: 80%;
	flex-wrap: wrap;
}
#news dt{
	margin-bottom:.5em;
}
}


/*///////////////// video ////////////////*/
#video{
margin-top: 5em;
padding-bottom: 1em;
background: rgba(255, 255, 255, 1);
}
#video h2{
    background: url(../img/title_bg.png?new) center center no-repeat;
    background-size: contain;
}
#video section{
width: 90%;
margin: auto;
padding:1em 0;
border-bottom: solid 1px #AA7701;
}
#video section:last-of-type{
border-bottom: none;
}


#video h3 {text-align:center;}
#video h3 span{
font-size: 140%;
border-bottom:5px solid;
border-image: linear-gradient(to right, #EEC90E, #AA7701) 1;
padding-bottom: .2em;
}

/* SliderList */
#video .SliderList {
width: 100%;
max-width: 900px;
margin:20px auto;
padding:0 50px;
 /* for space */ font-size:0;
 }
#video .list-item { display:inline-block; width:288px; margin:0 7px; vertical-align:middle; /* for space */ font-size:1rem; }
#video .list-item .tmb { position:relative; width:100%; height:0; margin-bottom:5px; padding-top:56.25%; background-color:rgba(0,0,0,0.1); }
#video .list-item .tmb a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; /* hover fade */ transition: opacity 0.2s ease-out; }
@media (hover: hover) { #video .list-item .tmb a:hover { opacity:0.5; } }
#video .list-item .tmb a span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#video .list-item .cap { line-height:1.4; color:#000; }
#video .SliderList .slick-arrow { position:absolute; top:0; width:50px; height:100%; background-position:center center; background-repeat:no-repeat; background-size:50% auto; text-indent:-9999px; /* reset */ background-color:transparent; border:none; cursor:pointer; outline:none; padding:0; appearance:none; text-indent: -9999px; }
#video .SliderList .slick-prev { left:-50px; z-index:12; background-image:url(../img/top/ar_l_w2.svg?2025); }
#video .SliderList .slick-next { right:-50px; z-index:13; background-image:url(../img/top/ar_r_w2.svg?2025); }
#video .SliderList .slick-arrow:hover { opacity:0.5; }
@media all and (min-width: 1080px) {
	#video .list-item .cap { font-size:90%; }
}
@media all and (max-width: 1079px) {
/* SliderList */
#video .SliderList {
	width:98%;
	margin:20px auto;
	padding:0;
	 }
	#video .list-item { width:34vw; margin:0 1vw; }
	#video .list-item .cap { font-size:70%; }
	#video .SliderList .slick-arrow {display: none !important}
}


@media all and (max-width: 767px) {
#video{
margin-top: 2em;
}
#video section{
	padding-top:0.5em;
}

#video h2{
background: url(../img/title_bg_smp.png?new) center center no-repeat;
background-size: contain;
}


#video h3 span{
font-size: 100%;
border-bottom:3px solid #178A4B;
padding-bottom: .2em;
}
}