﻿@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:40%;
	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{
    display: flex;
    justify-content: center;
	width:100%;
	max-width:1080px;
	margin:0 auto;
}

#tournamentWrap a{
    display: inline-flex;
    flex-direction: column;
    gap:10px 0;
	margin:0 15px;
	padding:30px 22px;
	border:10px solid;
	box-sizing:border-box;
	background:rgba(9,30,60,.7);
	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:calc(42px*.8);
	line-height:1;
	font-weight:500;
    white-space: nowrap;
}

.tournamentYear{
	font-family: 'Heebo', sans-serif;
	font-size:calc(98px*.8);
	line-height:1;
	font-weight:bold;
	letter-spacing:-1px;
    padding-left:.1em;
}

.tournamentTxt{
	text-align:center;
	font-size:117%;
	font-weight:bold;
	color:#231815;
	padding:10px 15px;
}

.tournamentDate{
    padding-left: 15px;
    font-family: 'Heebo', sans-serif;
    line-height:1;
    font-weight: bold;
    font-size: 24px;
}

.tournamentDate span{
    color: inherit;
    font-weight: inherit;
    font-size:32px;
    line-height: 1;
}


#tournamentWrap .cate1 .tournamentTxt{ background:#00A2FF;}
#tournamentWrap .cate2 .tournamentTxt{ background:#3DD966;}

#digestLink{
	width:100%;
	max-width:1036px;
	padding-top:6px;
	margin:0 auto 50px;
}

.slider-item{
    width:100%;
    aspect-ratio: 1500/714;
}

/*------------------------------------------------------------ 
    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:85px;
	line-height:22px;
	color:#727171;
	font-size:109%;
}

.news-cate{
	width:125px;
	text-align:center;
	height:22px;
	line-height:22px;
	color:#fff;
}

.news-cate.cate0{ background:#091E3C;}
.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{
    justify-content: center;
}

#tournamentWrap a{
    gap:calc(100vw*(10/834)) 0;
	margin:0 calc(100vw*(15/834));
	padding:calc(100vw*(30/834)) calc(100vw*(22/834));
	border-width:calc(100vw*(10/834));
}

.tournamentHd{
	font-size:calc(100vw*(42*.8/834));
}

.tournamentYear{
	font-size:calc(100vw*(98*.8/834));

}

.tournamentTxt{
	font-size:calc(100vw*(14/834));
	padding:calc(100vw*(10/834)) calc(100vw*(15/834));
}

.tournamentDate{
    padding-left: calc(100vw*(15/834));
    font-size: calc(100vw*(24/834));
}

.tournamentDate span{
    font-size:calc(100vw*(32/834));
}

/*
#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-ttl {
    width: calc(100% - 205px);
    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:71%;
    gap:calc(100vw*(10/480)) 0;
	padding:calc(100vw*(14/480));
	border-width:calc(100vw*(10*.8/480));
}

.tournamentHd{
	font-size:calc(100vw*(42*.45/480));
}

.tournamentYear{
	font-size:calc(100vw*(98*.5/480));
}

.tournamentTxt{
    width:100%;
	font-size:calc(100vw*(14/480));
	padding:calc(100vw*(10*.8/480)) calc(100vw*(15*.8/480));
}

.tournamentDate{
    text-align: center;
    width:100%;
    margin-top:calc(100vw*(8/480));
    padding-left: 0;
    font-size: calc(100vw*(24*.8/480));
}

.tournamentDate span{
    font-size:calc(100vw*(32*.8/480));
}

/*
#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;
}

}
