﻿@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

#visual{
	width:100%;
	margin-bottom:60px;
	overflow:hidden;
	position:relative;
	border-bottom:6px solid #CED2D8;
}

#visualInner{
	width:100%;
	position:absolute;
	bottom:8.75%;
	left:0;
	z-index:10;
}

#lead{
	text-align:center;
	color:#fff;
	font-size:60px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
	font-weight:bold;
}

#slider{
	width:100%;
	position:relative;
}

#slider:before{
	display:block;
	content:"";
	width:100%;
	height:100%;
	background:rgba(9,30,60,.1);
	position:absolute;
	left:0;
	top:0;
	z-index:5;
}

#tournamentWrap{
	width:100%;
	max-width:1480px;
	margin:0 auto;
}

#tournamentWrap a{
	width:34.45945945945946%;
	margin:0 15px;
	padding:30px 22px;
	border:10px solid;
	box-sizing:border-box;
	background:rgba(9,30,60,.8);
	transition:all 0.2s ease-out;
}

#tournamentWrap a:hover{ background:rgba(9,30,60,1);}

#tournamentWrap .cate1{
	color:#00A2FF;
	border-color:#00A2FF;
}

#tournamentWrap .cate2{
	color:#3DD966;
	border-color:#3DD966;
}

.tournamentHd{
	font-family: 'Heebo', sans-serif;
	font-size:42px;
	line-height:1;
	font-weight:500;
}

.tournamentYear{
	font-family: 'Heebo', sans-serif;
	font-size:98px;
	line-height:1;
	font-weight:bold;
	letter-spacing:-1px;
}

.tournamentTxt{
	width:100%;
	text-align:center;
	font-size:167%;
	font-weight:bold;
	color:#231815;
	padding:10px 0;
	margin-top:30px;
}

#tournamentWrap .cate1 .tournamentTxt{ background:#00A2FF;}
#tournamentWrap .cate2 .tournamentTxt{ background:#3DD966;}

#digestLink{
	width:100%;
	max-width:1036px;
	padding-top:6px;
	margin:0 auto 50px;
}

/*------------------------------------------------------------ 
    NEWS
------------------------------------------------------------*/  

#news{
	width:auto;
	max-width:730px;
	margin:0 auto;
	padding: 0 15px;
}

.newsHd{
	font-size:175%;
	font-weight:bold;
	margin-bottom:14px;
	color:#091E3C;
	line-height:17px;
}

.newsHd.main{
	padding-left:35px;
	position:relative;
}

.newsHd.main:before{
	display:block;
	content:"";
	width:22px;
	height:17px;
	background:url(../common/img/icons.png) no-repeat -72px 0;
	background-size:500px 500px;
	position:absolute;
	left:0;
	top:0;
}

.newsList li{
	width:100%;
	padding:10px 0;
	border-bottom:1px solid #DCDDDD;
}

.news-date{
	width:100px;
	line-height:22px;
	color:#727171;
	font-size:109%;
}

.news-cate{
	width:110px;
	text-align:center;
	height:22px;
	line-height:22px;
	color:#fff;
}

.news-cate.cate1{ background:#00A4FF;}
.news-cate.cate2{ background:#3DD966;}

.news-ttl{
	width:calc(100% - 210px);
	font-size:125%;
	line-height:22px;
	color:#091E3C;
	padding-left:15px;
	box-sizing:border-box;
}

.moreBtn{
	width:280px;
	height:40px;
	margin:30px auto 0;
}

.moreBtn a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:38px;
	color:#091E3C;
	font-size:125%;
	font-weight:bold;
	box-sizing:border-box;
	border:1px solid #EFEFEF;
	transition:all 0.2s ease-out;
	border-radius:5px;
}

.moreBtn a:hover{
	color:#fff;
	background:#091E3C;
	border-color:#091E3C;
}



#resultList{
	width:100%;
	max-width:1036px;
	margin:50px auto 0;
}

#resultList li:not(:last-child){ margin-bottom:30px;}

#resultList a{
	display:block;
	padding:20px;
	background:#ccc;
	text-align:center;
	position:relative;
	background:no-repeat 50% 50%;
	background-size:cover;
}

#resultList .cate1{ background-image:url(../img/bg-result1.png);}
#resultList .cate2{ background-image:url(../img/bg-result2.png);}

#resultList a:before{
	display:block;
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:5;
	transition:all 0.2s ease-out;
}

#resultList .cate1:before{ background:rgba(0,164,255,.7);}
#resultList .cate2:before{ background:rgba(61,217,102,.7);}

#resultList a:hover:before{ background:none;}

#resultList a:hover .resultHd-en{ text-shadow: 1px 1px 1px rgba(0,0,0,.3);}

.resultHd-en{
	font-family: 'Heebo', sans-serif;
	font-size:42px;
	font-weight:bold;
	letter-spacing:0.5px;
	color:#fff;
	line-height:44px;
	position:relative;
	z-index:10;
}

.resultHd-jp{
	width:510px;
	margin:12px auto 0;
	font-size:167%;
	line-height:44px;
	text-align:center;
	background:#fff;
	font-weight:bold;
	position:relative;
	z-index:10;
}

#resultList .cate1 .resultHd-jp{ color:#00A4FF;}
#resultList .cate2 .resultHd-jp{ color:#3DD966;}

.resultTxt{
	width:80px;
	height:80px;
	text-align:center;
	color:#00A4FF;
	font-size:134%;
	padding:18px 0;
	box-sizing:border-box;
	background:#FFF100;
	line-height:22px;
	border-radius:50%;
	position:absolute;
	z-index:10;
	right:60px;
	top:50%;
	transform:translateY(-50%);
}


/*------------------------------------------------------------ 
    大会情報
------------------------------------------------------------*/  

#tournamentInfo{
	width:100%;
	margin-top:90px;
	padding:40px 0;
	background:#091E3C;
}

.tournamentInfo__list{
	display: flex;
	justify-content: center;
	gap:0 50px;
}

.tournamentItem{ width:calc(50% - 25px);}

.tournamentItemHd{
	text-align:center;
	border:1px solid;
	letter-spacing:1px;
	line-height:58px;
	font-size:234%;
	margin-bottom:25px;
	font-weight:bold;
}

.tournamentItem.cate1 .tournamentItemHd{
	border-color:#00A4FF;
	color:#00A4FF;
}

.tournamentItem.cate2 .tournamentItemHd{
	border-color:#3DD966;
	color:#3DD966;
}

.tournamentItemImg{ width:180px;}

.tournamentItemMenu{
	width:calc(100% - 205px);
	font-size:142%;
}

.tournamentItemMenu li:not(:last-child){ margin-bottom:18px;}

.tournamentItemMenu a{
	color:#fff;
	transition:all 0.2s ease-out;
}

.tournamentItem.cate1 .tournamentItemMenu a:hover{ color:#00A4FF;}
.tournamentItem.cate2 .tournamentItemMenu a:hover{ color:#3DD966;}


#topMenu{
	width:100%;
	margin-bottom:65px;
}

.topMenuItem{ width:33.3333333%;}

.topMenuItem a{
	display:block;
	width:100%;
	height:100%;
	position:relative;
}

.topMenuItem a:before{
	display:block;
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	bottom:0;
	z-index:2;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(9,30,60,.4) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(9,30,60,.4) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(9,30,60,.4) 100%);
}

.topMenuItem span{
	display:block;
	width:100%;
	text-align:center;
	position:absolute;
	bottom:30px;
	left:0;
	color:#fff;
	font-size:200%;
	z-index:10;
	font-weight:bold;
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

/*------------------------------------------------------------ 
    協会からのお知らせ
------------------------------------------------------------*/  

#leftBox{/* 540 */
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	   -ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
    flex-wrap: wrap;
	width:50%;
	min-height:360px;
}
#information{ padding-bottom:28px;}
#information .news-date{ width:90px;}
#information .news-ttl{ width:calc(100% - 90px);}

#fbArea{
	width:calc(50% - 40px); /* 500 */
	box-sizing:border-box;
}

#sponsorshipBtn{
	max-width:inherit;
	padding:40px 15px 0;
	margin:45px auto 0;
	border-top:1px solid #DCDDDD;
}

#sponsorshipBtn a{
	max-width:320px;
	margin:0 auto;
}

#topBanner{
	width:100%;
	margin-top:auto;
	padding: 14px 10px;
	border: 1px solid #DCDDDD;
	box-sizing:border-box;
}

#topBanner li{
	padding:10px 14px;
	width:50%;
	text-align: center;
	box-sizing: border-box;
}

#topBanner li img{
	width:auto;
	max-width: 100%;
}


/*
#banner1{ width:220px;}
#banner2{ width:146px;}
#banner3{ width:200px;}
#banner4{ width:190px;}
#banner5{ width:calc(94px*.8);}
*/
#logo-upopoi{ width:100%;}

#logo-upopoi a{
	display:block;
	width:auto;
	padding:26px 100px;
	border: 1px solid #DCDDDD;
}



/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

@media screen and (max-width: 1480px) and (min-width: 835px){

#tournamentWrap a{ padding:2.2% 1.6%;}

.tournamentHd{ font-size:2.7vw;}
.tournamentYear{ font-size:6.6vw;}

.tournamentTxt{
	font-size:1.5vw;
	margin-top:6%;
}

}

/* TABLET */
@media screen and (max-width: 834px){

#visual{ margin-bottom: 48px;}

#visual .slick-slide img{
	height:calc(100vw * (480 / 834));
	object-fit:cover;
}

#tournamentWrap a{
	margin: 0 calc(100vw * (12 / 834));
	padding: calc(100vw * (24 / 834)) calc(100vw * (18 / 834));
	border-width:calc(100vw * (8 / 834));
}

.tournamentHd{ font-size: calc(100vw * (21 / 834));}
.tournamentYear{ font-size: calc(100vw * (54 / 834));}

.tournamentTxt{
	font-size:calc(100vw * (16 / 834));
	padding:calc(100vw * (8 / 834)) 0;
	margin-top:calc(100vw * (16 / 834));
}

/* news */

.news-date{ width:80px;}
.news-cate{ width:88px;}
.news-ttl {
    width: calc(100% - 168px);
    font-size: 117%;
}

.moreBtn{ width:240px;}


/* tourinfo */

#tournamentInfo { margin-top: 60px;}

.tournamentInfo__list{
	gap:0 20px;
}
.tournamentItem{ width:calc(50% - 10px);}

.tournamentItemHd {
    line-height: 46px;
    font-size: 22px;
    margin-bottom: 20px;
}

.tournamentItemImg{ width:144px;}
.tournamentItemMenu {
    width: calc(100% - 160px);
    font-size: 125%;
}

#topMenu{ margin-bottom: 40px;}

.topMenuItem img{
	height:140px;
	object-fit:cover;
}

.topMenuItem span {
    bottom: 24px;
    font-size: 150%;
}

#fbArea{ width:calc(50% - 20px);}

#logo-upopoi a{ padding: 40px 60px;}

#topBanner { padding: 20px 0;}
#topBanner li {
    padding: 7px 14px;
}

#banner1{ width:187px;}
#banner2{ width:117px;}
#banner3{ width:160px;}
#banner4{ width:calc(190px*.8);}
#banner5{ width:calc(94px*.6);}



}


/* SP */
@media screen and (max-width: 480px){

#visual{
	margin-bottom: 40px;
	border-bottom-width: 4px;
}

#visual .slick-slide img{
	height:calc(100vw * (360 / 480));
	object-fit:cover;
}

#tournamentWrap a{
	width:43%;
	margin: 0 calc(100vw * (8 / 480));
	padding: calc(100vw * (18 / 480)) calc(100vw * (12 / 480));
	border-width:calc(100vw * (5 / 480));
}

.tournamentHd{ font-size: calc(100vw * (16 / 480));}
.tournamentYear{ font-size: calc(100vw * (38 / 480));}

.tournamentTxt{
	font-size:calc(100vw * (14 / 480));
	padding:calc(100vw * (6 / 480)) 0;
	margin-top:calc(100vw * (12 / 480));
}

.newsHd{ font-size: 150%;}

.news-cate{ margin-right: auto;}

.news-ttl{
	width:100%;
	margin-top:8px;
	padding-left: 0;
}

.moreBtn{
	max-width:220px;
	margin-top:24px;
}

.moreBtn a{ font-size: 117%;}


/* tourinfo */

#tournamentInfo { margin-top: 40px;}

.tournamentInfo__list{
	display: block;
	gap:0;
}
.tournamentItem{ width:100%;}
.tournamentItem + .tournamentItem{ margin-top:30px;}

.tournamentItemHd {
    line-height: 42px;
    font-size: 150%;
}

.tournamentItemImg{ width:150px;}
.tournamentItemMenu {
    width: calc(100% - 165px);
    font-size: 117%;
}

#topMenu{
	padding: 15px 15px 0;
	box-sizing:border-box;
}
.topMenuItem{ width:100%;}
.topMenuItem + .topMenuItem{ margin-top: 15px;}

#leftBox{
	width:100%;
	min-height:inherit;
}

#logo-upopoi a{
	padding: 20px 40px;
	text-align: center;
}

#logo-upopoi img{
	width:100%;
	max-width:200px;
	height: auto;
}

#topBanner{
	margin-top:20px;
	padding: 10px 0;
}

#fbArea{
	width:100%;
	margin-top:20px;
}

}
