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

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

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

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

/* m-plus-rounded-1c-100 - japanese_latin_latin-ext Thin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/m-plus-rounded-1c/m-plus-rounded-1c-v19-japanese_latin_latin-ext-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* m-plus-rounded-1c-300 - japanese_latin_latin-ext Light */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/m-plus-rounded-1c/m-plus-rounded-1c-v19-japanese_latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* m-plus-rounded-1c-regular - japanese_latin_latin-ext Regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/m-plus-rounded-1c/m-plus-rounded-1c-v19-japanese_latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* m-plus-rounded-1c-500 - japanese_latin_latin-ext Medium */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/m-plus-rounded-1c/m-plus-rounded-1c-v19-japanese_latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* m-plus-rounded-1c-700 - japanese_latin_latin-ext Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/m-plus-rounded-1c/m-plus-rounded-1c-v19-japanese_latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* m-plus-rounded-1c-800 - japanese_latin_latin-ext ExtraBold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/m-plus-rounded-1c/m-plus-rounded-1c-v19-japanese_latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* m-plus-rounded-1c-900 - japanese_latin_latin-ext Black */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/m-plus-rounded-1c/m-plus-rounded-1c-v19-japanese_latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

:root {
	--color-fffadf: #fffadf;
	--color-ffb50a: #ffb50a;
	--color-ff8f9c: #ff8f9c;
	--color-27c7b7: #27c7b7;
	--color-34cff1: #34cff1;
	--color-473200: #473200;
	--color-f5d2c7: #f5d2c7;
	
	--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: "M PLUS Rounded 1c", sans-serif;
	font-style: normal;
	font-weight: 800;
	margin: 0 0 2em;
}
section h2 em,
section h2 strong {
	display: inline-block;
	background: #fff;
	border-radius: 100px;
	line-height: 1;
}
section h2 em {
	border: 4px #fff solid;
}
section h2 strong {
	color: var( --color-473200 );
	border: 2px var( --color-473200 ) dashed;
	padding: .5em 1em;
}

@media (max-width: 767px) {
	section h2 strong {
		font-size: clamp(1.25rem, -0.205rem + 7.27vw, 1.5rem);
	}
}

@media (min-width: 768px) { /* max 970px */
	section h2 strong {
		min-width: 10.75em;
		font-size: clamp(1.625rem, 0.199rem + 2.97vw, 2rem);
	}
}

/* pagelink */

.pagelink { text-align: center; }
.pagelink a,
.pagelink button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 12em;
	color: #fff;
	background: var( --color-ffb50a );
	font-style: normal;
	font-weight: 700;
	padding: .75em 1em;
	border-radius: 10px;
	margin: 0 auto;
}
.pagelink a img,
.pagelink button img {
	margin: 0 0 0 .5em;
}

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

#visual::after {
	content: "";
	display: block;
	width: 100%;
	background: url( ../images/club/wave1.svg ) repeat-x center center;
	background-size: cover;
	position: absolute;
	bottom: -1px;
	left: 0;
	z-index: 10;
}
#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 {
		aspect-ratio: 1 / 0.052;
	}
}

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

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

#news {
	background: var( --color-fffadf );
}
#news .inner { position: relative; }

#news nav li a { 
	display: block;
	color: #fff;
	border-radius: 10px;
	cursor: pointer;
}
#news nav li.about a { background: var( --color-ff8f9c ); }
#news nav li.list a { background: var( --color-ffb50a ); }
#news nav li.admission a { background: var( --color-27c7b7 ); }
#news nav ul li a p {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 800;
}

#news .inside {
	background: #fff;
	border-radius: 1.5em;
}
#news .inside ul { margin: 0 0 2em; }
#news .inside ul li {
	border-bottom: 2px var( --color-473200 ) dashed;
}
#news .inside ul li .cate a { display: inline-block; }
#news .inside ul li .cate a span{
	display: inline-block;
	color: #fff;
	background: var( --color-ffb50a );
	border-radius: .25em;
	padding: .4em;
}
#news .inside ul li h3 {
	font-weight: 700;
	line-height: 1.4;
}
#news .inside ul li h3:hover {
	color: var( --color-ffb50a );
}

@media (max-width: 767px) {

	#news { padding: 0 1em 2.5em; }
	#news .inner { padding: 6em 0 0; }

	#news nav {
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 20;
		width: 100%;
		-webkit-transform: translate(-50%, -2em);
		transform: translate(-50%, -2em);
	}

	#news nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#news nav ul li { margin: 0 .5em .5em; }
	#news nav ul li a {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: .5em 1em;
	}
	#news nav ul li a figure img {
		width: auto;
		height: 1.5em;
		margin: 0 .5em 0 0;
	}

	#news .inside {
		border: .4em var( --color-ffb50a ) solid;
		padding: 2em 1em;
	}
	#news .inside ul li { 
		padding: .5em 0;
		margin: 0 0 .5em; 
	}

	#news .inside ul li p {
		display: inline-block;
	}
	#news .inside ul li .date { 
		width: 5.5em;
		font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem);
	}
	#news .inside ul li .cate { 
		font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem);
	}
	#news .inside ul li h3 { 
		font-size: clamp(0.853rem, -0.001rem + 4.27vw, 1rem);
		line-height: 1.6;
		margin: .5em 0 0;
	}
}

@media (min-width: 768px) {

	#news .inner { 
		max-width: 970px; 
		padding: 9em 0 0;
	}

	#news nav {
		position: absolute;
		top: -5em;
		left: 50%;
		z-index: 20;
		width: 100%;
		-webkit-transform: translate(-50%, -4.375em);
		transform: translate(-50%, -4.375em);
	}

	#news nav ul {
		display: flex;
		justify-content: center;
	}
	#news nav ul li {
		width: 24.7452%;
		text-align: center;
		margin: 0 1em 0 0;
	}
	#news nav ul li:last-child { margin: 0; }
	#news nav ul li a {
		padding: 1.25em;
	}
	#news nav ul li a figure {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 8.75em;
	}
	#news nav ul li a p {
		font-size: clamp(1rem, 0.05rem + 1.98vw, 1.25rem);
		margin: 1em 0 0;
	}

	#news .inside {
		border: .5em var( --color-ffb50a ) solid;
		padding: 3em 4em;
	}
	#news .inside ul li {
		display: table;
		table-layout: fixed;
		width: 100%;
		padding: 1em;
	}
	#news .inside ul li > * {
		display: table-cell;
		vertical-align: middle;
	}
	#news .inside ul li .date { width: 7em; }
	#news .inside ul li .cate { 
		width: 8.5em;
		text-align: center;
		font-size: clamp(0.688rem, -0.025rem + 1.49vw, 0.875rem); 
	}
	#news .inside ul li h3 { 
		font-size: clamp(1rem, 0.05rem + 1.98vw, 1.25rem); 
		line-height: 1.6;
		padding: 0 0 0 1.5em;
	}

}
/* ---------------------------------------- work */

#work {
	background: url( ../images/club/dots.png ) repeat center center;
	background-size: auto;
	position: relative;
	overflow: hidden;
}
#work::before {
	content: "";
	display: block;
	width: 100%;
	background: url( ../images/club/wave2.svg ) repeat-x center center;
	background-size: cover;
	position: absolute;
	top: -1px;
	left: 0;
	z-index: 10;
}
#work::after {
	content: "";
	display: block;
	width: 100%;
	background: url( ../images/club/wave3.svg ) no-repeat center center;
	background-size: cover;
	position: absolute;
	bottom: -1px;
	left: 0;
	z-index: 10;
}

@media (max-width: 767px) {
	#work { padding: 3em 0 4em; }
	#work::before {
		aspect-ratio: 1 / 0.052;
	}
	#work::after {
		width: 175%;
		background-position: left bottom;
		aspect-ratio: 1 / 0.05;
	}
	#work figure.sp {
		text-align: center;
		margin: 0 0 .5em;
	}
	#work figure.sp img {
		width: 84%;
		min-width: 300px;
		max-width: 676px;
		height: auto;
	}
}

@media (min-width: 768px) {
	#work { padding: 7.625em 1em 10.5875em; }
	#work::before {
		aspect-ratio: 1 / 0.03;
	}
	#work::after {
		aspect-ratio: 1 / 0.05;
	}

	#work .inner { position: relative; }
	#work .inner::before {
		content: "";
		display: block;
		width: 100%;
		max-width: 23.9375em;
		aspect-ratio: 1 / 0.694;
		background: url( ../images/club/work01.png ) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: -3em;
		left: 0;
		z-index: 10;
	}
	#work .inner::after {
		content: "";
		display: block;
		width: 100%;
		max-width: 25.75em;
		aspect-ratio: 1 / 0.721;
		background: url( ../images/club/work02.png ) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: -3em;
		right: 0;
		z-index: 10;
	}
	#work h2,
	#work .pagelink {
		position: relative;
		z-index: 20;
	}

}

/* ---------------------------------------- menu */

#menu {
	background: #FFFADF;
	background: linear-gradient(-180deg, rgba(255, 250, 223, 1) 5%, rgba(255, 212, 111, 1) 95%);
}
#menu .inner { position: relative; }
#menu .inner::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 0.869;
	background: url( ../images/club/menu/deco01.jpg ) no-repeat center center;
	background-size: contain;
	position: absolute;
	z-index: 2;
}
#menu .inner::after {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 0.869;
	background: url( ../images/club/menu/deco02.jpg ) no-repeat center center;
	background-size: contain;
	position: absolute;
	z-index: 2;
}

#menu .inside ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#menu .inside ul li a {
	display: block;
	aspect-ratio: 1;
	text-align: center;
	border-radius: 100%;
	overflow: hidden;
	position: relative;
}
#menu .inside ul li a figure img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
#menu .inside ul li a figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 4em;
	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	padding: .5em 2.5em;
}
#menu .inside ul li.about a figcaption { background: var( --color-ff8f9c ); }
#menu .inside ul li.list a figcaption { background: var( --color-ffb50a ); }
#menu .inside ul li.admission a figcaption { background: var( --color-27c7b7 ); }
#menu .inside ul li.contents a figcaption { background: var( --color-34cff1 ); }

@media (max-width: 767px) {

	#menu { padding: 5.5em 0 5em; }
	#menu .inner::before,
	#menu .inner::after {
		max-width: 5em;
	}
	#menu .inner::before {
		-webkit-transform:rotate(-15deg);
		transform:rotate(-15deg);
		top: -3.5em;
		left: 1em;
	}
	#menu .inner::after {
		-webkit-transform:rotate(15deg);
		transform:rotate(15deg);
		top: -3.5em;
		right: 1em;
	}

	#menu h2 {
		position: relative;
		z-index: 5;
	}
	#menu .inside ul li {
		width: 48.5%;
		max-width: 240px;
		margin: 0 3% 3% 0;
	}
	#menu .inside ul li:nth-child( 2n+2 ) {
		margin: 0 0 3% 0;
	}
	#menu .inside ul li a figcaption {
		font-size: clamp(0.688rem, -0.04rem + 3.64vw, 0.813rem);
		padding: .5em 1.5em;
	}
}

@media (min-width: 768px) {

	#menu { padding: 5em 7em; }
	#menu .inner { max-width: 750px; }
	#menu .inner::before,
	#menu .inner::after {
		max-width: 10em;
	}
	#menu .inner::before {
		-webkit-transform:rotate(-15deg) translateX(-50%);
		transform:rotate(-15deg) translateX(-50%);
		top: -3em;
		left: 0;
	}
	#menu .inner::after {
		-webkit-transform:rotate(15deg) translateX(50%);
		transform:rotate(15deg) translateX(50%);
		top: -3em;
		right: 0;
	}

	#menu h2 { margin: 0 0 2.5em; }
	#menu .inside ul li {
		width: 30%;
		margin: 0 5% 4% 0;
	}
	#menu .inside ul li:nth-child( 3n+3 ) {
		margin: 0 0 4% 0;
	}
}

/* ---------------------------------------- articles */

#articles {
	background: url( ../images/club/checkers.jpg );
	position: relative;
	overflow: hidden;
}
#articles::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 0.056;
	background: url( ../images/club/wave4.svg ) no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
#articles::after {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 0.056;
	background: url( ../images/club/wave5.svg ) no-repeat center center;
	background-size: cover;
	position: absolute;
	bottom: -1px;
	left: 0;
	z-index: 10;
}



#articles .inside {
	background: #fff;
	border-radius: 1em;
}
#articles .inside ul { margin: 0 0 2em; }
#articles .inside ul li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 0;
	border-bottom: 2px var( --color-473200 ) dashed;
}
#articles .inside ul li a {

}
#articles .inside ul li p { margin: 0 0 .5em; }
#articles .inside ul li p a { display: inline-block; }
#articles .inside ul li p a span {
	display: inline-block;
	color: #fff;
	background: var( --color-ffb50a );
	border-radius: .25em;
	padding: .25em .4em;
	margin: .25em .25em .25em 0;
}
#articles .inside ul li h3 a:hover {
	color: var( --color-ffb50a );
}

@media (max-width: 767px) {

	#articles::before {
		width: 175%;
		background-position: top center;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#articles::after {
		width: 175%;
		background-position: bottom center;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	#articles .inside {
		padding: 2em 1em;
	}

	#articles .inside ul li > figure { width: 30%; }
	#articles .inside ul li > div { width: 65%; }
	#articles .inside ul li p.date { 
		font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem);
	}
	#articles .inside ul li p.cate span { 
		font-size: clamp(0.625rem, -0.102rem + 3.64vw, 0.75rem);
	}
	#articles .inside ul li h3 { 
		font-size: clamp(0.75rem, 0.023rem + 3.64vw, 0.875rem);
		line-height: 1.6;
	}

}

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

	#articles .inside ul li > figure { width: 120px; }
	#articles .inside ul li > div { width: calc( 97% - 120px ); }

}

@media (min-width: 768px) {

	#articles .inside {
		max-width: 600px;
		padding: 2em;
		margin: 0 auto;
	}

	#articles .inside ul li > figure { width: 22%; }
	#articles .inside ul li > div { width: 75%; }
	#articles .inside ul li p.cate { 
		font-size: clamp(0.813rem, 0.693rem + 0.25vw, 0.875rem);
	}
	#articles .inside ul li h3 { 
		font-size: clamp(0.813rem, -0.023rem + 1.74vw, 1.25rem); 
		line-height: 1.6;
	}

}

/* ---------------------------------------- newsletter */

#newsletter {
	background: var( --color-f5d2c7 );
	position: relative;
	overflow: hidden;
}
#newsletter::after {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 0.051;
	background: url( ../images/club/wave6.svg ) no-repeat left bottom;
	background-size: cover;
	position: absolute;
	bottom: -1px;
	z-index: 10;
}

#newsletter .inside ul { margin: 0 0 2em; }
#newsletter .inside ul li a p .cate {
	color: #fff;
	background: var( --color-ffb50a );
	border-radius: .25em;
	padding: .2em .4em;
	margin: 0 0 0 1em;
}
#newsletter .inside ul li p { margin: 0 0 .5em; }
#newsletter .inside ul li h3 { line-height: 1.4; }

@media (max-width: 767px) {

	#newsletter::after {
		width: 175%;
		right: 0;
	}
	#newsletter h2 span { 
		display: block; 
		margin: .25em 0 0;
	}
	
	#newsletter .inside ul li { margin: 0 0 1.5em; }
	#newsletter .inside ul li a { 
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	#newsletter .inside ul li a > figure {
		width: 32%;
	}
	#newsletter .inside ul li a > div {
		width: 65%;
	}

	#newsletter .inside ul li p .date { 
		width: 7em; 
		font-size: clamp(0.688rem, -0.403rem + 5.45vw, 0.875rem);
	}
	#newsletter .inside ul li p .cate { 
		width: 7em;
		text-align: center;
		font-size: clamp(0.625rem, -0.102rem + 3.64vw, 0.75rem); 
	}

}

@media (min-width: 768px) {

	#newsletter::after { left: 0; }

	#newsletter h2 span { margin: 0 0 0 1em; }
	#newsletter .inside {
		max-width: 750px;
		margin: 0 auto;
	}
	#newsletter .inside ul {
		display: flex;
		justify-content: center;
	}
	#newsletter .inside ul li { 
		width: 30%; 
		margin: 0 5% 0 0;
	}
	#newsletter .inside ul li:last-child { margin: 0; }
	#newsletter .inside ul li a { display: block; }
	#newsletter .inside ul li a figure {
		text-align: center;
		margin: 0 0 .5em;
	}

	#newsletter .inside ul li p .date { 
		width: 7em; 
		font-size: clamp(0.688rem, 0.329rem + 0.75vw, 0.875rem);
	}
	#newsletter .inside ul li p .cate { 
		width: 7em;
		text-align: center;
		font-size: clamp(0.625rem, 0.386rem + 0.5vw, 0.75rem); 
	}

}