/*
 * base css 
 * pc width 1000px fixed
 */

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

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

/* ---------------------------------------- fonts */

/* kosugi-maru-regular - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Kosugi Maru';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kosugi-maru/kosugi-maru-v17-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

:root {
	--color-b1db8f: #b1db8f;
	--color-c9e3b4: #c9e3b4;
	--color-fdfee1: #fdfee1;
	--color-03a03a: #03a03a;
	--color-fafafa: #fafafa;
	--color-004ea8: #004ea8;
	--color-00b0d8: #00b0d8;
	--color-ffb332: #ffb332;
	--color-00ba41: #00ba41;
	--color-e0f5ec: #e0f5ec;
	
	--small-size-sp: clamp(0.75rem, 0.661rem + 0.45vw, 0.875rem);
	--small-size-pc: clamp(0.75rem, 0.511rem + 0.5vw, 0.875rem);
}

@media (max-width: 767px) {
	section {
		/* font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem); */
		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;
	}
}

/* title */

section h2 {
	text-align: center;
	font-family: 'BIZ UDGothic', sans-serif;
	font-style: normal;
	font-weight: 400;
	vertical-align: text-bottom;
	margin: 0 0 2em;
}
section h2 span {
	display: inline-block;
	color: #fff;
	background: var( --color-03a03a );
	line-height: 1;
	padding: 5px;
	margin: 0 2px 0 0;
	position: relative;
}
section h2 span::after {
	content: "";
	display: block;
	width: calc( 100% - 4px );
	aspect-ratio: 1;
	border: 1px #fff solid;
	position: absolute;
	top: 2px;
	left: 2px;
}

section h3 {
	font-family: 'BIZ UDGothic', sans-serif;
	line-height: 1.4;
}

@media (max-width: 767px) {
	section h2 {
		font-size: clamp(1.25rem, -0.205rem + 7.27vw, 1.5rem);
		margin: 0 0 1em;
	}
	section h2 span {
		font-size: clamp(1.875rem, -0.307rem + 10.91vw, 2.25rem);
	}
}

@media (min-width: 768px) {
	section h2 {
		font-size: clamp(1.25rem, -0.183rem + 2.99vw, 2rem);
	}
	section h2 span {
		font-size: clamp(1.875rem, -0.274rem + 4.48vw, 3rem);
	}
}

/* pagelink */

.pagelink { text-align: center; }
.pagelink a,
.pagelink button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 13em;
	color: #fff;
	background: var( --color-004ea8 );
	border-radius: .5em;
	padding: 1em;
	margin: 0 auto;
}
.pagelink a img,
.pagelink button img {
	margin: 0 0 0 .5em;
}

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

#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;
	}
}

@media (min-width: 768px) {
	#visual img {
		aspect-ratio: 1 / 0.354; /* 0.447 */
		object-fit: cover;
		object-position: center;
	}
}

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

#about {
	background: url( ../images/youth/backslash.svg ) no-repeat center center;
}
#about .inner p { line-height: 1.6; }

@media (max-width: 767px) {

	#about { padding: 3.75em 1em; }

}

@media (min-width: 768px) {

	#about { padding: 4em 1em; }
	#about .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#about .inner h2 { 
		width: 30%; 
		text-align: left;
		margin: 0;
	}
	#about .inner p { 
		width: 65%; 
		font-size: clamp(0.875rem, 0.159rem + 1.49vw, 1.25rem);

	}

}

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

#news .detail h3 {
	display: flex;
	align-items: center;
	padding: 0 0 4px;
	margin: 0 0 1em;
}
#news .detail h3 img {
	width: 1.5em;
	aspect-ratio: 1;
	margin: 0 1em 0 0;
}
#news .detail li {
	display: flex;
	flex-direction: column;
	min-height: 21.6em;
	border-radius: .5em;
}

#news .detail li > div { margin: 0 0 1em; }
#news .detail li > div a { display: inline-block; }
#news .detail li > div a span:not(.date ) {
	display: inline-block;
	color: #fff;
	border-radius: .5em;
	padding: .25em .5em;
}
#news .detail li figure { margin: 0 0 1em; }
#news .detail li figure a{
	 display: block;
    width: 100%;
    aspect-ratio: 1 / 0.862;
}
#news .detail li figure img {
	width: 100%;
	aspect-ratio: 1 / 0.862;
	object-fit: cover;
	object-position: top;
}
#news .detail li p {
	line-height: 1.4;
}
#news .detail .pagelink {
	margin: 1.25em 0 0;
}

/* affairs */
#news .affairs h3 {
	color: var( --color-004ea8 );
	border-bottom: 2px var( --color-004ea8 ) solid;
}
#news .affairs li {
	border: 2px var( --color-004ea8 ) solid;
}
#news .affairs li > div a span:not(.date ) {
	background: var( --color-004ea8 );
}
#news .affairs li > p a:hover {
	color: var( --color-004ea8 );
}
/* fujisawa */
#news .fujisawa h3 {
	color: var( --color-00b0d8 );
	border-bottom: 2px var( --color-00b0d8 ) solid;
}
#news .fujisawa li {
	border: 2px var( --color-00b0d8 ) solid;
}
#news .fujisawa li > div a span:not(.date ) {
	background: var( --color-00b0d8 );
}
#news .fujisawa .pagelink a {
	background: var( --color-00b0d8 );
}
#news .fujisawa li > p a:hover {
	color: var( --color-00b0d8 );
}
/* tsujido */
#news .tsujido h3 {
	color: var( --color-ffb332 );
	border-bottom: 2px var( --color-ffb332 ) solid;
}
#news .tsujido li {
	border: 2px var( --color-ffb332 ) solid;
}
#news .tsujido li > div a span:not(.date ) {
	background: var( --color-ffb332 );
}
#news .tsujido .pagelink a {
	background: var( --color-ffb332 );
}
#news .tsujido li > p a:hover {
	color: var( --color-ffb332 );
}
/* forest */
#news .forest h3 {
	color: var( --color-00ba41 );
	border-bottom: 2px var( --color-00ba41 ) solid;
}
#news .forest li {
	border: 2px var( --color-00ba41 ) solid;
}
#news .forest li > div a span:not(.date ) {
	background: var( --color-00ba41 );
}
#news .forest .pagelink a {
	background: var( --color-00ba41 );
}
#news .forest li > p a:hover {
	color: var( --color-00ba41 );
}

@media (max-width: 767px) {

	#news .inner > .inside > .detail:not(:last-child) {
		margin: 0 0 2em;
	}
	#news .inner > .inside > .detail ul {
		display: flex;
		justify-content: space-between;
	}
	#news .inner > .inside > .detail ul li {
		width: 49%;
	}
	#news .detail h3 {
		font-size: clamp(0.959rem, -0.004rem + 4.82vw, 1.125rem);
	}

	#news .detail li {
		padding: 1em .5em;
	}
	#news .detail li > div span {
		font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem);
	}
	#news .detail li > div span.date { 
		display: block;
		margin: 0 0 .5em; 
	}
}

@media (min-width: 768px) {

	#news .inner {
		max-width: 1100px;
		margin: 0 auto;
	}
	#news .inner > .inside {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#news .inner > .inside > .detail {
		width: 48%;
	}
	#news .inner > .inside > .detail:nth-child( n+3 ) {
		margin: 2em 0 0;
	}
	#news .inner > .inside > .detail ul {
		display: flex;
		justify-content: space-between;
	}
	#news .inner > .inside > .detail ul li {
		width: 48%;
	}

	#news .detail h3 {
		font-size: clamp(0.875rem, 0.159rem + 1.49vw, 1.25rem);
	}


	#news .detail li {
		padding: 1.5em 1em;
	}
	#news .detail li > div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#news .detail li > div a span:not(.date ) {
		font-size: clamp(0.625rem, 0.147rem + 1vw, 0.875rem);
	}
	#news .detail li p {
		font-size: clamp(0.75rem, 0.034rem + 1.49vw, 1.125rem);
	}
	
	#news .detail .pagelink a {
		font-size: clamp(0.688rem, 0.329rem + 0.75vw, 0.875rem);
	}
	#news .detail .pagelink a {
		margin: 0 0 0 auto;
	}
}

/* ---------------------------------------- facility */

#facility {
	background: #C9E384;
	background: linear-gradient(115deg,rgba(201, 227, 132, 1) 0%, rgba(177, 216, 143, 1) 50%, rgba(201, 227, 132, 1) 100%);
background: #C2E1A8;
background: linear-gradient(115deg,rgba(194, 225, 168, 1) 0%, rgba(180, 220, 146, 1) 50%, rgba(194, 225, 168, 1) 100%);
	position: relative;
	z-index: 1;
}
#facility::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url( ../images/youth/stripe.svg );
	background-size: 200%;
	opacity: .3;
	transform: scale(-1, 1);
	position: absolute;
	top: 0;
	left: 0;
}
#facility .inner {
	position: relative;
	z-index: 2;
}

#facility ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#facility ul li a { display: block; }
#facility ul li a figure {
	width: 100%;
	aspect-ratio: 1 / 0.75;
	line-height: 1;
}
#facility ul li a figure img {
	width: 100%;
	aspect-ratio: 1 / 0.75;
	object-fit: cover;
	object-position: center;
	border-radius: 1.5em 0 0 0;
}
#facility ul li a p {
	background: var( --color-e0f5ec );
	text-align: center;
	padding: 1em .5em;
	border-radius: 0 0 1.5em 0;
}

@media (max-width: 481px) {

	#facility ul li {
		width: 63%;
		max-width: 240px;
	}
	#facility ul li:nth-child( n+2 ) { margin: 1.5em 0 0; }

}

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

	#facility ul li {
		width: 45%;
		max-width: 240px;
		margin: 0 5% 3% 0;
	}
	#facility ul li:nth-child( 2n+2 ) { margin: 0 0 3%; }
}

@media (max-width: 767px) {

	#facility { padding: 4em 0 5em; }
	#facility h2 { position: relative; }
	#facility h2::before {
		content: "";
		display: block;
		width: 3em;
		max-width: 72px;
		aspect-ratio: 1 / 0.914;
		background: url( ../images/youth/character.png ) no-repeat center center;
		background-size: contain;
		position: absolute;
		bottom: 1.25em;
		right: 0;
	}
}

@media (min-width: 768px) {

	#facility ul {
		max-width: 800px;
		margin: 0 auto;
		position: relative;
	}
	#facility ul li {
		width: 30%;
		max-width: 240px;
		margin: 0 5% 3% 0;
	}
	#facility ul li:nth-child( 3n+3 ) { margin: 0 0 3%; }

	#facility ul::before {
		content: "";
		display: block;
		width: 8.125em;
		aspect-ratio: 1 / 0.914;
		background: url( ../images/youth/character.png ) no-repeat center center;
		background-size: contain;
		position: absolute;
		bottom: 100%;
		left: 0;
	}

}

/* ---------------------------------------- activity */

#activity {
	background: url( ../images/youth/activity-back.jpg ) no-repeat center center;
	background-size: cover;
	padding: 0;
}
#activity .backWrap {
	background: rgba( 0,0,0,.3 );
}
#activity .info .inner {
	border: 3px #00796B solid;
	background: #fff;
	border-radius: 1em;
}

#activity .info ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #00796B;
	border: 2px #00796B solid;
	border-radius: .5em;
	font-weight: 700;
	padding: 1em;
}
#activity .info ul li a img {
	width: 3.75em;
	aspect-ratio: 1 / 0.912;
	margin: 0 .5em 0 0;
}

#activity .event {
	background: rgba( 255,255,230,.75 );
	text-align: center;
	padding: 2em;
}
#activity .event h2 + p { margin: 0 0 1.5em; }

@media (max-width: 559px) {

	#activity { padding: 0 0 5em; }
	#activity .info { 
		padding: 5em 1em;
	}
	#activity .info .inner { padding: 2em; }
	#activity .info ul li + li { margin: 1em 0 0; }
}

@media (min-width: 560px) and (max-width:767px) {

	#activity .info .inner { padding: 2em 1em; }
	#activity .info ul {
		display: flex;
		justify-content: center;
	}
	#activity .info ul li {
		width: 48%;
		max-width: 364px;
		margin: 0 .5em;
	}

}

@media (min-width: 768px) {

	#activity { padding: 0 0 5em; }
	#activity .info { 
		padding: 5em 1em;
	}
	#activity .info .inner { padding: 2em; }
	#activity .info h2 { margin: 0 0 1em; }
	#activity .info ul {
		display: flex;
		justify-content: center;
	}
	#activity .info ul li {
		width: 22.75em;
		max-width: 364px;
		margin: 0 .5em;
	}

	#activity .event h2 { margin: 0 0 1em; }

}

/* ---------------------------------------- recruit */

#recruit {
	background: url( ../images/youth/backslash.svg ) no-repeat center center;
	text-align: center;
	padding: 5em 1em;
}
#recruit .pagelink a { background: var( --color-ffb332 ); }
#recruit h2 + p { 
	line-height: 1.6;
	margin: 0 0 1.5em; 
}

@media (max-width: 767px) {


}

@media (min-width: 768px) {

	#recruit h2 { margin: 0 0 1em; }
	

}