@charset "UTF-8";
/*--------------------------
リセット
---------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
  overflow-y:scroll;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}


/*----------------------------------------------------
基本：SP,PC切替
------------------------------------------------------ */
/* [ PC - SP switch ] */
@media screen and (min-width: 768px) {
  .pcOFF {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  /* Smartphone */
  .spOFF {
    display: none !important;
  }
}


/*----------------------------------------------------
基本：基本タグ
------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	line-height:1.6;
	min-width:280px;
}
@media print  {
}

/*----------------------------------------------------
モジュール
------------------------------------------------------ */
#wrapper .inner{
	width:100%;
	margin:0 auto 100px;
}

@media screen and (max-width: 1200px) {
	.inner{
		max-width:calc(100% - 30px);
	}
}

/* tit01 */
.tit01{
	font-size:clamp( 25px , 4.6vw , 36px );
	text-align:center;
	font-weight:bold;
	margin-bottom:60px;

	&:after{
		display:block;
		content:"";
		width:80px;
		height:5px;
		background:#0A5BAA;
		margin:10px auto 0;
	}
}

/* tit02 */
.tit02{
	font-size:clamp( 18px , 4.6vw , 26px );
	font-weight:bold;
	line-height:1.6;
	margin-bottom:30px;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2211.5%22%20stroke%3D%22%23DD58A8%22%20stroke-width%3D%227%22%2F%3E%3C%2Fsvg%3E') no-repeat left 6px;
	padding-left:40px;
}

/* txt */
.txt{
	font-size:clamp( 16px , 2.2vw , 17px );
	+ .txt{
		margin-top:35px;
	}
}

@media screen and (max-width: 767px) {
	/* tit02 */
	.tit02{
		background-size: 25px auto;
		background-position:left 2px;
		padding-left:30px;
	}
}


.bgBox{
	background:#DDEDFD;
	padding:90px 0;
	margin-bottom:100px;
	.inner{
		margin-bottom:0 !important;
	}
}
@media screen and (max-width: 767px) {
	.bgBox{
		padding:30px 0 50px;
		margin-bottom:50px;
	}
}

/*----------------------------------------------------
mainHeader
------------------------------------------------------ */
.mainHeader{
	margin-bottom:0px;
	/*background:#1260ad;*/
	.inner{
		width:100%;
		position:relative;
		.header{

			width:100%;
			max-width:1600px;
			margin:0 auto;
			padding:10px 0;

			display:flex;
			justify-content:flex-start;
			align-items: center;

			position:relative;
			z-index:50;

			gap:0 15px;
			.headerTitle{
				width:30%;
				min-width:350px;
				& a{
					text-decoration:none;
					.headerTitle-logo{
						& img{
							width:100%;
							max-width:436px;
							height:auto;
						}
					}
				}
			}
			.headerSns{
				width:4%;
				min-width:40px;
				& a{
					& img{
						width:100%;
						max-width:50px;
						height:auto;
					}
				}
			}
		}
	}

}
@media screen and (max-width: 1600px) {
	.mainHeader{
		.inner{
			width:100%;
			.header{
				max-width:calc(100% - 30px);
			}
		}
	}
}
@media screen and (max-width:1200px) {
	.mainHeader{
		.inner{
			max-width:100%;
		}
	}
}


@media screen and (max-width:450px) {
	.mainHeader{
		.inner{
			.header{
					justify-content: space-between;
				.headerTitle{
					width:30%;
					min-width:280px;
				}
				.headerSns{
					width:4%;
					min-width:40px;
				}
			}
		}

	}
}

@media screen and (max-width:350px) {
	.mainHeader{
		.inner{
			.header{
				.headerTitle{
					width:30%;
					min-width:190px;
				}
				.headerSns{
					width:4%;
					min-width:35px;
				}
			}
		}

	}
}


/*----------------------------------------------------
mainVisual
------------------------------------------------------ */
.mainVisual{
	position:relative;
	z-index:1;
	.pic01{
		position:relative;
		top:0;
		z-index:5;
		text-align:center;
		& img{
			width:100%;
			max-width:1682px;
			height:auto;
			vertical-align:bottom;
		}
	}
	.pic02{

		width:100%;
		max-width:2132px;
		position:absolute;
		bottom:3.15%;


		z-index:10;
		text-align:right;

		  left: 0;
		  right: 0;
		  margin: auto;


		& img{
			width:100%;
			max-width:1682px;
			height:auto;
			vertical-align:bottom;

		}
	}
	.pic03{

		position:absolute;
		bottom: 5.3%;
		width:100%;
		max-width:2136px;

		left:0;
		right:0;
		margin:auto;
		z-index:1;
		text-align:center;


		& img{
			width:100%;
			height:auto;
			vertical-align:bottom;

		}
	}
}




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

/*----------------------------------------------------
footer
------------------------------------------------------ */
.footer{
	background:#0A5BAA;
	padding:60px 0;
	.inner{
		margin-bottom:0px !important;
		.footerLnks{
			text-align:center;
			margin-bottom:70px;
			text-align:center;
			& li{
				display:inline-block;
				margin-right:35px;

				&:last-child{
					margin-right:none;
				}

				& a{
					text-decoration:none;
					color:#fff;
					font-size:clamp( 13px , 1.9vw , 15px );
					display:block;
				}
			}	
		}
		.address{
			text-align:center;
			color:#fff;
			font-size:clamp( 11px , 1.9vw , 12px );
		}
	}
}

@media screen and (max-width: 1100px) {
	.footer{
		.inner{
			.footerLnks{
				& li{
					width:calc( (100% -  50px) / 6);
				}	
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.footer{
		padding:30px 0;
		.inner{
			.footerLnks{
				margin-bottom:30px;
				& li{
					margin:0 0 0px;
					width:100%;
					& a{
						padding:10px 0;
						border-bottom:solid 1px #346ba1;

						&:first-child{
							border-top:solid 1px #346ba1;
						}
					}
				}	
			}
			.address{
				& br{
					display:none;
				}
			}
		}
	}
}
@media screen and (max-width: 400px) {
	.address span br{
		display:block !important;
	}
}

/*----------------------------------------------------
leadBox
------------------------------------------------------ */
.leadBox{
	.inner{
		max-width:1180px;
		margin-bottom:30px !important;
		.txt{
			font-size:clamp( 15px , 3.3vw , 26px );
			font-weight:bold;
			text-align:center;
		}
	}
}
@media screen and (max-width: 1180px) {
	.leadBox{
		.inner{
			max-width:calc( 100% - 30px);
		}
	}
}
@media screen and (max-width: 767px) {
	.leadBox{
		.inner{
			margin-bottom:20px;
		}
	}
}



/*----------------------------------------------------
pageLinkBox
------------------------------------------------------ */
.pageLinkBox{
	.inner{
		max-width:1180px;
	}
}
@media screen and (max-width: 1180px) {
	.pageLinkBox{
		.inner{
			max-width:calc( 100% - 30px);
		}
	}
}

/* pageLnks */
.pageLinks{

	display:flex;
	flex-wrap:wrap;
	gap:5px 20px;

	.item{
		width:calc( (100% - 60px) / 4);
		& a{
			display:block;
			text-decoration:none;
			color:#fff;
			background:#0A5BAA;
			border-radius:10px;

			font-size:clamp( 14px , 1.9vw , 20px );
			text-align:center;
			font-weight:bold;
			padding:15px 5px;
		}
		& a:hover{
			background:#DD58A7;
		}		
	}
}
@media screen and (max-width: 767px) {
	.pageLinks{

		gap:5px 5px;

		.item{
			width:calc( (100% - 15px) / 4);
		}
	}
}
@media screen and (max-width: 700px) {

	.pageLinkBox{
		.inner{
			margin-bottom:40px !important;
		}
	}

	.pageLinks{

		gap:5px 5px;

		.item{
			width:calc( (100% - 15px) / 2);
			a{
				padding:8px 3px;
			}
		}
	}
}

/*----------------------------------------------------
aboutBox
------------------------------------------------------ */
.aboutBox{
	.inner{
		max-width:1200px;
		display:flex;
		flex-wrap:wrap;
		justify-content: space-between;

		.aboutInfo{
			width:51%;
		}
		.aboutInformation{
			width:41%;
		}
	}
}
@media screen and (max-width: 1200px) {
	.aboutBox{
		.inner{
			max-width:calc(100% - 30px);
		}
	}
}
.aboutInfo{
	.tit{
	}
	.txt{
		padding-left:40px;
	}
}
.aboutInformation{
	.tit{
		font-size:clamp( 20px , 3.3vw , 26px );
		font-weight:bold;
		text-align:center;
		margin-bottom:45px;
	}
}

@media screen and (max-width: 767px) {
	.aboutBox{
		.inner{
			.aboutInfo{
				margin-bottom:30px;
				width:100%;
			}
			.aboutInformation{
				width:100%;
			}
		}
	}
	.aboutInfo{
		.tit{
		}
		.txt{
			padding-left:0px;
		}
	}

}

/*----------------------------------------------------
groupBox
------------------------------------------------------ */
.groupBox{
	.inner{
		max-width:900px;
	}
}
.groupBanner{
	display:flex;
	flex-wrap:wrap;
	gap:10px 20px;
	.item{
		width:calc( (100% - 20px) / 2 );
		& a{
			display:block;
			text-decoration:none;
			text-align:center;
			& img{
				width:100%;
				height:auto;
				vertical-align:bottom;
			}	
		}
	}
}

@media screen and (max-width: 900px) {
	.groupBox{
		.inner{
			max-width:calc(100% - 30px);
		}
	}
}
@media screen and (max-width: 767px) {
	.groupBanner{
		.item{
			width:calc( (100% - 0px) / 1 );
			& a{
				& img{
					max-width:440px;
				}
			}
		}
	}
}

/*----------------------------------------------------
federationBox
------------------------------------------------------ */
.federationBox{
	.inner{
		max-width:1470px;
		.tit01{
			&:after{
				background:#DD58A8;
			}
		}
	}
}
@media screen and (max-width: 1470px) {
	.federationBox{
		.inner{
			max-width:calc(100% - 30px);
		}
	}
}
.federationBox{
	.inner{
		.tit01{
			margin-bottom:0px;
		}
	}
}
.missionTit{
	text-align:center;
	font-weight:bold;
	color:#DD58A7;
	margin-bottom:25px;
	font-size:clamp( 19px , 3.3vw , 26px );
	.big{
		font-size:clamp( 46px , 8.3vw , 64px );
		text-decoration: underline; /* 下線 */
		text-decoration-thickness: 0.3em; /* 線の太さ */
		text-decoration-color: rgba(255, 255, 115, 1); /* 線の色 */
		text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
		text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
	}
	.middle{
		font-size:clamp( 33px , 5.9vw , 46px );
		.small{
			font-size:clamp( 26px , 4.6vw , 36px );
		}
	}
}
@media screen and (max-width: 600px) {

	.federationBox{
		.inner{
			.tit01{
				margin-bottom:20px;
			}
		}
}
	.missionTit{
		line-height:1;
		.big{
			display:block;
		}
		.middle{
			.small{
			}
		}
	}
}

/* .missionCards */
.missionCards{
	display:flex;
	flex-wrap:wrap;
	gap:25px 25px;
	margin-bottom:90px;
	.card{
		width:calc( (100% - 50px) / 3);

		display:grid;
		grid-template-columns: 130px 1fr;
		align-items: center;
		gap:10px 25px;

		.pic{
			& img{
				width:100%;
				max-width:130px;
				height:auto;
			}
		}
		.cnt{
			.tit{
				font-size:clamp( 16px , 2.3vw , 18px );
				font-weight:bold;
				color:#DD58A7;
				margin-bottom:5px;
			}
			.txt{
				font-size:clamp( 13px , 1.9vw , 15px );
			}
		}

		&:nth-child(even){
			.cnt{
				.tit{
					color:#0A5BAA;
				}
			}
		}
	}
}

@media screen and (max-width: 1250px) {
	.missionCards{
		.card{
			grid-template-columns: 90px 1fr !important;
		}
	}
}

@media screen and (max-width: 1000px) {
	.missionCards{
		gap:25px 15px;
		.card{
			width:calc( (100% - 15px) / 2);
		}
	}
}
@media screen and (max-width: 600px) {
	.missionCards{
		margin-bottom:40px;
		gap:5px 0px !important;
		.card{
			grid-template-columns: 75px 1fr !important;
			width:calc( (100% - 0px) / 1);
		}
	}
}


/* .federationInfo */
/* .tbl-federation */

.federationInfo{

	max-width:1200px;
	margin:0 auto;
	width:100%;
	background:#fff;
	border-radius:20px;
	padding:100px 100px;
	.tbl-federation{
		width:100%;
		& tr{
			border-top:solid 1px #ccc;

			&:last-child{
				border-bottom:solid 1px #ccc;
			}

			& th{
				width:30%;
				padding:30px;
				padding-left:50px;
			}
			& td{
				width:70%;
				padding:30px;
			}
		}
	}
}

@media screen and (max-width: 1200px) {
	.federationInfo{
		max-width:calc(100% - 30px);
	}
}
@media screen and (max-width: 767px) {
	.federationInfo{
		border-radius:10px;
		padding:20px 10px;
		max-width:100%;
		.tbl-federation{
			& tr{
				border-top:solid 1px #ccc;

				&:last-child{
					border-bottom:solid 1px #ccc;
				}

				& th{
					width:30%;
					padding:20px 10px;
					padding-left:10px;
					font-weight:bold;
				}
				& td{
					width:70%;
					padding:20px 10px;
				}
			}
		}
	}
}

/*----------------------------------------------------
eventBox
------------------------------------------------------ */
.eventBox{
	.inner{
		max-width:740px;
		.tit01{
			&:after{
				background:#DD58A8;
			}
		}
	}
}
@media screen and (max-width: 740px) {
	.eventBox{
		.inner{
			max-width:calc(100% - 30px);
		}
	}
}

/* --- */
.eventCards{

	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	align-items:center;

	.eventCalendar{
		width:265px;
	}
	.eventInfo{
		width:380px;
	}
}

/* --- */
.eventCards{
	.eventCalendar{
		.pic{
			text-align:center;
			& img {
				width:100%;
				max-width:262px;
				height:auto;
			}
		}
	}
	.eventInfo{
		.tit{
			font-size:clamp( 15px , 2.0vw , 16px );
			margin-bottom:30px;
		}
		span{
			font-weight: bold;
			text-align: center;
			background: #DD58A8;
			color: #fff;
			display: block;
			margin-top: 20px;
			line-height: 2em;
		}
		.btn{
			& a{
				display:block;
				border:solid 2px #2ECC87;
				width:100%;
				border-radius:10px;
				padding:5px 5px 0;
				text-align:center;
				img{
					width:100%;
					max-width:177px;
					height:auto;
					vertical-align:bottom;
				}
			}
			& a:hover{
				background:#d4eed2;
			}	
		}
	}
}

@media screen and (max-width: 767px) {
	/* --- */
	.eventCards{
		flex-wrap: nowrap;
		gap: 20px;

		.eventCalendar{
			flex-basis: 30%;
			margin:0 auto 20px;
		}
		.eventInfo{
			width:100%;
			margin:0 auto 0px;
		}
		.eventInfo{
			.tit{
				margin-bottom:30px;
			}
		}
	}


}

/*----------------------------------------------------
pointBox
------------------------------------------------------ */
.pointBox{
	.inner{
		max-width:1200px;
	}
}

.pointBox .pointCards{
	align-items:start;
}
@media screen and (max-width: 1200px) {
	.pointBox{
		.inner{
			max-width:calc(100% - 30px);
		}
	}
}


.pointCards{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	width:100%;	

	.cnt{
		width:60%;
	}
	.ranking{
		width:35%;
	}
}
@media screen and (max-width: 767px) {
	.pointCards{
		.cnt{
			width:100%;
			margin-bottom:80px;
		}
		.ranking{
			width:100%;
		}
	}
}

/* ----- */
.pointCards{
	.cnt{
		.pointTit{
			font-size:clamp( 18px , 1.6vw , 20px );
			font-weight:bold;
			text-align:center;
			background:#fff;
			border-radius:100px;
			padding:15px 15px;
			margin-bottom:25px;
			span{
				color:#DD58A7;
			}
		}
		.txt{
		}
		.lst-groups{
			margin-top:30px;
			margin-bottom:30px;
			& li{
				background:#fff;
				border-radius:10px;
				color:#0A5BAA;
				font-size:clamp( 16px , 2.0vw , 16px );
				padding:15px 20px;
				margin-bottom:5px;
				font-weight:bold;

				&:last-child{
					margin-bottom:0;
				}
			}
		}
		.tbl-league{
			width:100%;
			border-radius:10px;
			overflow:hidden;
			margin-top:15px;
			border:solid 1px #D9D9D9;
			tr{
				th{
					background:#EEEEEE;
					padding:15px 10px;
					border:solid 1px #D9D9D9;
					font-weight:bold;
					font-size:clamp( 15px , 2.0vw , 16px );
				}
				td{
					background:#ffffff;
					padding:15px 10px;
					border:solid 1px #D9D9D9;
					font-size:clamp( 15px , 2.0vw , 16px );
				}
			}
		}
	}
}
@media screen and (max-width: 767px) {
}


.ranking{
	.tit-rank{
		font-size:clamp( 20px , 3.3vw , 26px );
		font-weight:bold;
		text-align:center;
		margin-bottom:10px;
	}
	.rankingLst{
		& li{
			margin-bottom:15px;
			text-align:center;
			img{
				width:100%;
				height;auto;
				max-width:300px;
			}
		}
	}
	.pointtxt{
		font-size: 90%;
		text-align: center;
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 767px) {
	.ranking{
		.tit-rank{
			margin-bottom:20px;
		}
		.rankingLst{
			& li{
				margin-bottom:30px;
				text-align:center;
				img{
				}
			}
		}
	}
}

/*----------------------------------------------------
contactBox
------------------------------------------------------ */
.contactBox{
	.inner{
		max-width:1000px;
	}
}
@media screen and (max-width: 1000px) {
	.contactBox{
		.inner{
			max-width:calc( 100% - 30px);
		}
	}
}
@media screen and (max-width: 767px) {
}