@charset "utf-8";
/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:768px) {
}

@media (min-width: 769px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

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

@media (min-width: 768px) {
}

/* ---------------------------------------- common */

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

@media (min-width: 768px) {

	#drawer, #drawer-menu { display: none !important; }

}

/* icon ( news icon ） */

.pala { background: #0281c8 !important; } /* パラリンピック */
.world { background: #05a552 !important; } /* 国際大会 */
.jpn { background: #ee6501 !important; } /* 国内大会 */
.info { background: #feb113 !important; } /* お知らせ */

/* ---------------------------------------- header */

header {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 999;
}

@media (max-width: 767px) {

	header .inner.pc { display: none !important; }

	header { 
		background: #fff;
		font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem);
		line-height: 1;
		padding: .75em 1em; 
	}
	header .inner.sp { 
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	header .inner.sp ul { 
		display: flex;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 0;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	header .inner.sp ul li {
		width: 24px;
		margin: 0 .5em 0 0;
	}
	header .inner.sp ul li a { display: block; }
	header .inner.sp ul li a img { 
		width: 100%;
		aspect-ratio: 1;
	}
	header .inner.sp .logo {
		width: 6em;
	}
}

@media (min-width: 768px) {

	header .inner.sp { display: none !important; }
	
	header { 
		font-size: clamp(0.75rem, -0.078rem + 1.72vw, 1rem);
	}
	header .headerWarp {
		background: #000;
		padding: 1em 1em 0 1em; 
		position: relative;
	}
	header::before {
		content: "";
		position: absolute;
		top: 100%; /* ナビゲーションの直下から */
		left: 0;
		width: 100%;
		height: 0; /* 初期状態は非表示 */
		background: #e1123a;
		transition: height 0.1s ease;
		z-index: 1; /* ナビの裏側に */
	}
	
	/* JS で高さを変えるために CSS変数を使う */
	header.show-bg::before {
		height: var(--submenu-height, 0);
	}

	header .inner.pc {
		color: #fff;
	}
	header .inner.pc .headtt {
		font-size: clamp(0.625rem, 0.211rem + 0.86vw, 0.75rem);
	}
	header .inner.pc .inside {
		display: flex;
		justify-content: center;
		
	}
	header .inner.pc .inside > ul {
		display: flex;
		justify-content: center;
		align-items: end;
	}
	header .inner.pc .inside > ul > li {
		padding: 0 .5em;
		position: relative;
	}
	header .inner.pc .inside > ul > li > a,
	header .inner.pc .inside > ul > li > span {
		display: block;
		padding: .5em .5em 1em;
		cursor: pointer;
	}
	header .inner.pc .inside > ul > li.logo > a {
		padding: 0 0 .5em;
	}
	header .inner.pc .inside > ul > li.logo > a img {
		width: 6em;
		height: auto;
	}

	header .inner.pc .inside ul ul {
		display: none;
		height: 0;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		-webkit-transition: height 0.3s ease-out;
		transition: height 0.3s ease;
	}

	header .inner.pc .inside ul ul li {
		white-space: nowrap;
	}
	header .inner.pc .inside ul ul li a {
		display: block;
	}
	header .inner.pc .inside > ul > li > a:hover,
	header .inner.pc .inside > ul > li.current > a,
		header .inner.pc .inside ul li.current span {
		color: #e1123a;
	}

	header .inner.pc .inside ul span:hover {
		color: #fff;
		background: #e1123a;
	}
	header .inner.pc .inside ul span:hover + ul,
	header .inner.pc .inside ul ul:hover {
		display: block;
		height: auto;
		padding: 1em;
	}
	header .inner.pc .inside ul li:hover > span.submenu {
		color: #fff;
		background: #e1123a;
	}

}

/* ---------------------------------------- siteName */

#siteName {
	background: #e1123a;
	text-align: center;
	padding: .5em 1em;
}

@media (max-width: 767px) {

	#siteName {
		font-size: clamp(0.75rem, -0.078rem + 1.72vw, 1rem);
	}

}

@media (min-width: 768px) {

	#siteName {
		font-size: clamp(0.75rem, -0.078rem + 1.72vw, 1rem);
	}

}

/* ---------------------------------------- footer */

@media (max-width: 767px) {

	footer { display: none; }

}

@media (min-width: 768px) {

	footer {
		color: #fff;
		background: #e1123a;
		font-size: clamp(0.75rem, -0.078rem + 1.72vw, 1rem);
		padding: 3em 1em;
	}
	footer .inner {
		display: flex;
		justify-content: space-between;
		max-width: 1130px;
		margin: 0 auto;
	}

	footer .inside { 
		width: 31%;
		max-width: 336px;
	}
	footer .inside .logo {
		margin: 0 0 .5em;
	}
	footer .inside p {
		line-height: 2;
		margin: 0 0 2em;
	}
	footer .inside .pagelink a {
		display: inline-block;
		background: #000 url( ../images/commons/arrwo-brackets-right-w.svg) no-repeat right 1em center;
		background-size: auto 1em;
		padding: 1em 2.5em 1em 1.5em;
	}

	footer .footnav {
		display: flex;
		justify-content: space-between;
		width: 65%;
	}
	footer .footnav dl:nth-child(1) { 
		width: 32%; 
	}
	footer .footnav dl:nth-child(2) { 
		width: 25%; 
	}
	footer .footnav dl:nth-child(3) { 
		width: 35%; 
	}
	footer .footnav dl:not(:last-child){ margin: 0 2em 0 0; }
	footer .footnav dl a { 
		display: block;
		padding: .5em 0;
	}
	footer .footnav dl dt { border-bottom: 1px #fff solid; }
	footer .footnav dl dt span { color: #ffff00; }
	
	footer .footnav dl dt + dt { margin: 2em 0 0; }
	footer .footnav dl dt + dd { margin: .5em 0 0; }
	footer .footnav dl .spacer { padding: 2em 0 0; }

}

/* ---------------------------------------- cregit */

#cregit {
	color: #fff;
	background: #000;
	font-size: clamp(0.625rem, 0.211rem + 0.86vw, 0.75rem);
	text-align: center;
	padding: 1em;
}

/* ---------------------------------------- sidemenu */

@media (max-width: 767px) {
	#sidemenu { display: none; }
}

@media (min-width: 768px) {
	#sidemenu {
		position: fixed;
		z-index: 99999;
		top: 30vh;
		right: 0;
		line-height: 1.2;
	}
	#sidemenu li {
		width: 7vw;
		min-width: 50px;
		max-width: 70px;
	}
	#sidemenu li a { display: block; }
}

/* ---------------------------------------- return_top */

#return_top {
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 999;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}
#return_top.active {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#return_top a {
	display: block;
	background: rgba(0,0,0,0.2);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	z-index: 100;
}
#return_top span {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}
#return_top a:hover {
	background: #000;
}
#return_top a:before {
	font-family: 'FontAwesome';
	content: '\f106';
	display: block;
	color: #fff;
	font-size: 1em;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media (max-width: 767px) {

	#return_top a {
		height: 44px;
		width: 44px;
		line-height: 44px;
	}

}

@media (min-width: 768px) {

	#return_top a {
		height: 60px;
		width: 60px;
		line-height: 60px;
	}

}