/*
 * 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:767px) {
}

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

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

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

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

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

:root {
	--color-e7f3fa: #e7f3fa;
	--color-057cb2: #057cb2;
	--color-0287d9: #0287d9;
	--color-00796b: #00796b;
	--color-f29a21: #f29a21;
	--color-da4d2e: #da4d2e;
	--color-d5485b: #d5485b;
	--color-e57a0d: #e57a0d;

	--color-015DB2: #015DB2;
}

@media (max-width: 767px) {
	section {
		font-size: clamp(0.813rem, -0.278rem + 5.45vw, 1rem);
		padding: 3.125em 0 5em;
	}
	section .inner {
		padding: 0 1em;
	}
}

@media (min-width: 768px) {
	section {
		font-size: clamp(0.813rem, 0.454rem + 0.75vw, 1rem);
		padding: 5em 1em 6.25em;
	}
	section .inner {
		max-width: 1170px;
		margin: 0 auto;
	}
}

section h2 { 
	font-weight: 700;
	text-align: center;
	margin: 0 0 1.5em;
	overflow: hidden;
}
section h2 span {
	display: inline-block;
	background: #fff;
	padding: 0 1em;
	position: relative;
}
section h2 span::before,
section h2 span::after {
	content: "";
	display: block;
	width: 5em;
	height: 1px;
	background: #000;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
section h2 span::before {
	left: 100%;
}

section h2 span::after {
	right: 100%;
}

section .pagelink { text-align: center; }
section .pagelink a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12.5em;
	color: #fff;
	background: var( --color-0287d9 );
	font-weight: 700;
	line-height: 1.4;
	border-radius: .5em;
	padding: 1em;
	margin: 0 auto;
}
section .pagelink a img { 
	width: 1.5em;
	aspect-ratio: 1;
	margin: 0 0 0 1em; 
}

@media (max-width: 767px) {
	section h2 { font-size: clamp(1.25rem, -0.205rem + 7.27vw, 1.5rem); }
	/* 20-24 320-375 */
	section .pagelink a {
		font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem);
	}
}

@media (min-width: 768px) {
	section h2 { font-size: clamp(1.313rem, -0.001rem + 2.74vw, 2rem); }
	/* 21-32 768-1170 */
	section .pagelink a {
		font-size: clamp(0.625rem, 0.147rem + 1vw, 0.875rem);
	}
}

/* ---------------------------------------- spbnr */

@media (max-width: 767px) {

	#spbnr {padding: 2.5em 0; }
	#spbnr .inner { padding: 0 1em; }
	#spbnr ul li:first-child { margin: 0 0 1em; }
	#spbnr ul li a { display: block; }
}

@media (min-width: 768px) {

	#spbnr { display: none; }
}

/* ---------------------------------------- visual */

#visual::after {
	content: "";
	display: block;
	background: url( ../images/home/visual-text.png ) no-repeat center center;
	background-size: contain;
	position: absolute;
}
#visual img {
	width: 100%;
	vertical-align: text-top;
	line-height: 1;
}

@media (max-width: 767px) {
	#visual img {
		aspect-ratio: 1 / 0.4; /* 0.467 */
		object-fit: cover;
		object-position: center;
	}
	#visual::after {
		width: 39%;
		max-width: 368px;
		aspect-ratio: 1 / 0.198;
		top: 20%;
		right: 1em;
		z-index: 10;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

@media (min-width: 768px) {
	#visual img {
		width: 100%;
		aspect-ratio: 1 / 0.354;
		object-fit: cover;
		object-position: center;
	}
	#visual::after {
		width: 39.5%;
		max-width: 570px;
		aspect-ratio: 1 / 0.198;
		top: 20%;
		right: 1em;
		z-index: 10;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

/* ---------------------------------------- news */

#news {
	background: var( --color-e7f3fa );
}
#news h2 { margin: 0 0 1em; }
#news .inside {
	background: #fff;
}
#news .inside ul li { 
	border-bottom: 1px #ddd solid; 
	padding: .5em 0;
}
#news .inside li .catedate .cate a { display: inline-block; }
#news .inside li .catedate .cate span {
	display: inline-block;
	color: var( --color-057cb2 );
	background: var( --color-e7f3fa );
	padding: .5em;
	margin: .25em .25em .25em 0;
	border-radius: 4px;
}
#news .inside li h3 { 
	line-height: 1.6; 
	/* font-weight: 500; */
}
#news .inside li h3 a:hover {
	color: var( --color-057cb2 );
}

@media (max-width: 767px) {

	#news .inside { padding: 2.8em 1.25em 2.5em; }
	#news .inside ul { margin: 0 0 2em; }
	#news .inside li .catedate { margin: 0 1em 0 0; }
	#news .inside li .date { margin: 0 0 .5em; }
	#news .inside li .date,
	#news .inside li .cate span {
		font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem);
		/* 12-14 320-375 */
	}
	#news .inside li h3 {
		width: 100%;
		font-size: clamp(0.853rem, -0.001rem + 4.27vw, 1rem);
		/* 13.65-16 320-375 */
		margin: .5em 0 0;
	}

}

@media (min-width: 768px) {

	#news .inner {
		max-width: 970px;
	}
	#news .inside { padding: 3.125em 5em 2.5em; }
	#news .inside ul { margin: 0 0 1.5em; }
	#news .inside ul li .catedate {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin: 0 0 .5em;
	}
	#news .inside li .catedate .date { width: 6em; }
	#news .inside li .cate { width: calc( 100% - 6em ); }
	#news .inside li .cate span {
		font-size: clamp(0.625rem, 0.147rem + 1vw, 0.875rem);
		/* 10-14 768-1170 */
	}
	#news .inside li h3 {
		font-size: clamp(0.813rem, -0.023rem + 1.74vw, 1.25rem);
		/* 13-20 768-1170 */
	}
}

/* ---------------------------------------- menulist */

#menulist .inner > .inside {
	position: relative;
}
#menulist .inside .detail {
	position: absolute;
	bottom: 0;
	right: 1em;
	padding: 1.5em 1em; 
	border-radius: .75em;
}
#menulist .inside.youth .detail { background: rgba( 224,245,236,.9 ); }
#menulist .inside.club .detail { background: rgba( 255,250,223,.9 ); }
#menulist .inside.sports .detail { background: rgba( 216,236,255,.9 ); }
#menulist .inside.arts .detail { background: rgba( 255,245,250,.9 ); }

#menulist .inside .detail h2 {
	text-align: left;
	margin: 0 0 .5em;
}

#menulist .inside .detail ul:not(.pagelink){ line-height: 1.8; }
#menulist .inside .detail ul:not(.pagelink) li {
	line-height: 1.6;
	padding: 0 0 0 1.5em;
	position: relative;
}
#menulist .inside .detail ul:not(.pagelink) li::before {
	content: "";
	display: block;
	width: 1em;
	aspect-ratio: 1;
	border-radius: 100%;
	position: absolute;
	top: .3em;
	left: 0;
}

#menulist .inside .detail .pagelink { margin: 1em 0 0; }

#menulist .inside.youth .detail ul:not(.pagelink) li::before,
#menulist .inside.youth .detail .pagelink a { background: var( --color-00796b ); }
#menulist .inside.club .detail ul:not(.pagelink) li::before,
#menulist .inside.club .detail .pagelink a { background: var( --color-f29a21 ); }
#menulist .inside.sports .detail ul:not(.pagelink) li::before,
#menulist .inside.sports .detail .pagelink a { background: var( --color-015DB2 ); }
#menulist .inside.arts .detail ul:not(.pagelink) li::before,
#menulist .inside.arts .detail .pagelink a { background: var( --color-d5485b ); }

@media (max-width: 767px) {

	#menulist .inside { padding: 0 0 5em; }
	#menulist .inside figure img {
		width: 100%;
		aspect-ratio: 1 / 1.053;
		object-fit: cover;
		object-position: center;
	}

	#menulist .inside .detail {
		width: 85%;
		right: .5em;
	}
	#menulist .inner > .inside:not(:last-child) {
		margin: 0 0 2.5em;
	}
	#menulist .inside .detail ul {
		font-size: clamp(0.853rem, -0.001rem + 4.27vw, 1rem);
	}

	#menulist .inside .detail .pagelink a {
		width: 100%;
		margin: 0;
	}
	#menulist .inside .detail .pagelink a:nth-child( 1 ) {
		/* font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem); */
		font-size: clamp(0.625rem, -0.102rem + 3.64vw, 0.75rem); /* 10-12 320-375 */
		margin: 0 0 1em;
	}
	#menulist .inside .detail .pagelink a:nth-child( 2 ) {
		font-size: clamp(0.625rem, -0.102rem + 3.64vw, 0.75rem); /* 10-12 320-375 */
	}
	#menulist .inside .detail .pagelink a:nth-child( 2 ) br { display: none; }
	#menulist .pagelink a { justify-content: space-between; }
	#menulist .pagelink a img {
		width: 1em;
		aspect-ratio: 1;
		font-size: clamp(0.625rem, -0.102rem + 3.64vw, 0.75rem);
		margin: 0 0 0 .5em;
	}

}

@media (min-width: 768px) {

	#menulist .inner {
		display: flex;
		flex-wrap: wrap;
	}
	#menulist .inner > .inside {
		width: 48.7%;
	}
	#menulist .inner > .inside:nth-child( 2n+1 ){
		margin-right: 2.6%;
	}
	#menulist .inner > .inside:nth-child( n+3 ){
		margin-top: 2.5em;
	}

	#menulist .inside { padding: 0 0 2.5em; }
	#menulist .inside .detail {
		width: 25em;
	}

	#menulist .inside figure img {
		width: 100%;
		aspect-ratio: 1 / 0.719;
		object-fit: cover;
		object-position: center;
	}

	#menulist .inside .detail ul {
		font-size: clamp(0.813rem, -0.023rem + 1.74vw, 1.25rem);
	}

	#menulist .inside .detail .pagelink {
		display: flex;
		justify-content: space-between;
	}
	#menulist .inside .detail .pagelink a {
		width: 49%;
		margin: 0;
	}
	#menulist .inside .detail .pagelink a:nth-child( 1 ) {
		font-size: clamp(0.625rem, 0.147rem + 1vw, 0.875rem);
	}
	#menulist .inside .detail .pagelink a:nth-child( 2 ) {
		font-size: clamp(0.5rem, 0.022rem + 1vw, 0.75rem);
	}
	#menulist .pagelink a img {
		width: 1.5em;
		aspect-ratio: 1;
		font-size: clamp(0.5rem, 0.022rem + 1vw, 0.75rem);
		margin: 0 0 0 1em;
	}
}

/* ---------------------------------------- about */

#about {
	color: #fff;
}
#about h2 span {
	background: none;
}
#about h2 span::before,
#about h2 span::after {
	background: #fff;
}
#about p {
	text-align: center;
	line-height: 1.8;
	margin: 0 0 2.5em;
}
#about .pagelink a {
	background: var( --color-e57a0d );
}

@media (max-width: 767px) {

	#about { 
		background: url( ../images/home/about-sp.png ) no-repeat center center;
		background-size: cover;
	}
	#about p {
		font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem);
	}

}

@media (min-width: 768px) {

	#about { 
		background: url( ../images/home/about-pc.png ) no-repeat center center;
		background-size: cover;
	}
	#about p {
		font-size: clamp(0.813rem, -0.023rem + 1.74vw, 1.25rem);
	}

}

/* ---------------------------------------- insta */

#insta {
	background: #DCFFBD;
	background: linear-gradient(180deg,rgba(220, 255, 189, 1) 0%, rgba(10, 179, 223, 1) 100%);
}
#insta h2 span {
	background: none;
	line-height: 1.4;
}
#insta .inside { margin: 0 0 2em; }
#insta p { text-align: center; }
#insta p a {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1;
	color: var( --color-057cb2 );
	border: 4px var( --color-057cb2 ) solid;
	background: #fff;
	border-radius: 100%;
	margin: 0 auto;
}

@media (max-width: 767px) {
	#insta p a {
		width: 16%;
		font-size: clamp(2.25rem, -0.659rem + 14.55vw, 2.75rem);
	}
}

@media (min-width: 768px) {
	#insta h2 span br { display: none; }
	#insta p a {
		width: 6.5%;
		font-size: clamp(2.5rem, 0.112rem + 4.98vw, 3.75rem);
	}

}