@charset "UTF-8";


:root {
	--noto-sans: "Noto Sans JP", sans-serif;
	--noto-serif: "Noto Serif JP", serif;
	--m-plus: "M PLUS Rounded 1c", system-ui;
	--anton: "Anton", sans-serif;
	--site-color: #F1EAD9;
	--site-color-blue: #8BC9EF;
}

html {
	scroll-behavior: smooth;
	--scroll-behavior: smooth;
	font-family: 'scroll-behavior:smooth';
}

* {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
	font-family: inherit;
}

body {
	font-size: 15px;
	line-height: calc(21 / 15);
	color: #000;
	font-family: var(--noto-sans);
	font-weight: 400;
}

body.noscroll {
	overflow: hidden;
	touch-action: pinch-zoom;
}

img {
  max-width: 100%;
  height: auto;
}

p {
	line-height: calc(27 / 15);
}

a {
	color: #343434;
}

a:hover {
	color: inherit;
	text-decoration: none;
	opacity: 0.7;
}

.container {
	max-width: 1000px;
}

@media(min-width: 992px) {
	.container-large {
		max-width: 1300px;
	}
}

header {
	position: absolute;
	width: 100%;
	top: 0;
	z-index: 99;
}

header .kinuta-top-link a {
	border: 1px solid #000;
	border-radius: 40px;
}

header nav {
	position: relative;
}

nav ul{
	list-style: none;
}

.menuStudy ul,
.menuCommunity ul,
.menuFeature ul,
.menuEvent ul{
	list-style: none;
	font-size: 10px;
}

.site-header {
	position: relative;
	display: flex;
	align-items: center;
	/* justify-content: space-between; */
	justify-content: flex-end;
	padding: 0 25px;
}

.site-global-nav-button {
	width: 108px;
	aspect-ratio: 108 / 145;
	background: var(--site-pink);
	top: 0;
	outline: none;
	border: none;
	border-radius: 0 0 30px 30px;
	margin-right: 35px;
	z-index: 50;
}

.site-global-nav-button::before {
	content: "MENU";
	font-size: 20px;
	font-weight: 700;
	color: #FFF;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
}

.site-global-nav-button:focus {
	outline: none;
}

.site-global-nav-button span {
	background: #FFF;
	display: block;
	width: 64px;
	aspect-ratio: 64 / 10;
	border-radius: 5px;
	position: absolute;
	transition: .5s;
}

.site-global-nav-button span:nth-of-type(1) {
	top: 50%;
	left: 50%;
	transform: translate(-50%,calc(-50% - 30px));
}

.site-global-nav-button span:nth-of-type(2) {
	top: 50%;
	left: 50%;
	transform: translate(-50%,calc(-50% - 15px));
}

.site-global-nav-button span:nth-of-type(3) {
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

@media(max-width: 767px) {
	.site-header-logo-link {
		display: block;
		width: clamp(194px,50vw,388px);
	}
}

@media(max-width: 575px) {
	.site-header {
		padding: 0 12px;
	}
	.site-global-nav-button {
		width: 54px;
		border-radius: 0 0 15px 15px;
		margin-right: 17px;
	}
	.site-global-nav-button span {
		width: 32px;
		height: 4px;
	}
	.site-global-nav-button::before {
		font-size: 10px;
		bottom: 15px;
	}
	.site-global-nav-button span:nth-of-type(1) {
		transform: translate(-50%,calc(-50% - 15px));
	}
	.site-global-nav-button span:nth-of-type(2) {
		transform: translate(-50%,calc(-50% - 7.5px));
	}
}

.highlight {
	background: linear-gradient(transparent 80%, #F8F4A4 20%);
}

/*   fv   */
.fv {
	position: relative;
	min-height: 500px;
	background: #56A8DB;
	background-image: url(img/fv-bg.svg);
	background-size: cover;
	background-position: top 40% center;
	padding-top: 80px;
	padding-bottom: 255px;
	overflow-x: clip;
}

.fv::before {
	content: "";
	width: 100vw;
	height: 155px;
	background-image: url(img/fv-deco.png);
	background-size: 718px;
	background-repeat: repeat-x;
	background-position: left bottom;
	position: absolute;
	bottom: 125px;
	left: 0;
}

.fv::after {
	content: "";
    width: 100vw;
    height: 258px;
    background-image: url(img/fv-cloud.png);
    background-size: 1660px;
    background-repeat: repeat-x;
    background-position: center bottom;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.fv-content {
	max-width: min(95%,500px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

.fv-content::after {
	content: "";
	width: 35%;
	aspect-ratio: 283 / 385;
	background: url(img/fv-kodaguma.png?v2) center/cover;
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translate(20%,85%) rotate(-350deg);
	z-index: 10;
}

.fv-circle-image01,
.fv-circle-image02,
.fv-circle-image03,
.fv-circle-image04 {
	max-width: min(20%,140px);
	position: absolute;
}

.fv-circle-image01 {
	top: 15%;
	left: -1%;
}

.fv-circle-image01 img {
	transform: rotate(-15deg);
}

.fv-circle-image02 {
	top: 25%;
	right: -2%;
}

.fv-circle-image02 img {
	transform: rotate(20deg);
}

.fv-circle-image03 {
	top: 57%;
	left: 0;
}

.fv-circle-image03 img {
	transform: rotate(-15deg);
}

.fv-circle-image04 {
	top: 55%;
	right: 0;
}

.fv-circle-image04 img {
	transform: rotate(10deg);
}

@media(min-width: 992px) {
	.fv {
		margin-bottom: 40px;
	}
	.fv-circle-image01 {
		max-width: 250px;
		top: -5%;
		left: -40%;
	}
	.fv-circle-image02 {
		max-width: 220px;
		top: 10%;
		right: -30%;
	}
	.fv-circle-image03 {
		max-width: 200px;
		top: 55%;
		left: -25%;
	}
	.fv-circle-image04 {
		max-width: 260px;
		top: 52%;
		right: -40%;
	}
}

/*   intro   */
.intro {
	position: relative;
}

.intro-profile {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 10px;
	align-items: end;
	max-inline-size: max-content;
	margin-inline: auto;
}

.intro-profile-image {
	position: relative;
	padding-bottom: 20px;
	margin-right: -80%;
}

.intro-profile-image > span {
	display: grid;
	align-items: center;
	justify-content: center;
	width: 120px;
	min-height: 31px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: #FFF;
	background: #000;
	border-radius: 5px;
	position: absolute;
	left: 5%;
	bottom: 0;
}

.intro-profile-image > span .small {
	font-weight: 500;
}

.intro-profile-text {
	position: relative;
}

.intro-profile-text::before {
	content: "";
	width: 30px;
	aspect-ratio: 30 / 26;
	background: url(img/intro-profile-deco01.svg);
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-100%,-200%);
}

.intro-profile p { 
	font-size: 14px;
	line-height: calc(21 / 14);
}

@media(min-width: 992px) {
	.intro-profile {
		padding-top: 30px;
	}
}

/*   contents   */
.contents {
	padding-top: 30px;
}

.contents-content {
	max-width: 550px;
	position: relative;
	background: repeating-linear-gradient(135deg, #e8f3f5, #e8f3f5 10px, #fff 10px, #fff 20px);
	padding: 20px 30px 30px;
	margin-inline: auto;
}

.contents-content::before {
	content: "";
	width: 100%;
	height: 100%;
}

.contents-content h2 {
	font-size: 25px;
	font-family: var(--anton);
	letter-spacing: 0.1em;
	line-height: 1.1;
	background: linear-gradient(transparent 60%, #ACD5DD 40%);
	padding: 0 10px;
	max-inline-size: max-content;
	margin-inline: auto;
	margin-bottom: 20px;
}

.contents-content ul {
	position: relative;
	max-inline-size: max-content;
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
	margin-inline: auto;
	z-index: 10;
}

.contents-content > ul > li {
	line-height: calc(37 / 15);
	text-indent: -18px;
	margin-left: 18px;
}

.contents-content > ul > li::before {
	content: "◎";
}

.contents-content > ul > li ul {
	margin-top: 5px;
}

.contents-content > ul > li ul li {
	font-size: 14px;
	text-indent: -14px;
	line-height: calc(27 / 14);
	margin-left: 14px;
}

.contents-content > ul > li ul li::before {
	content: "・";
}

.contents-border-top,
.contents-border-bottom {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
}

.contents-border-top::before,
.contents-border-top::after,
.contents-border-bottom::before,
.contents-border-bottom::after {
	content: "";
	width: max(62px,20%);
	aspect-ratio: 1 / 1;
	position: absolute;
}

.contents-border-top::before {
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	top: 0;
	left: 0;
}

.contents-border-top::after {
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	top: 0;
	right: 0;
}

.contents-border-bottom::before {
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	bottom: 0;
	left: 0;
}

.contents-border-bottom::after {
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	bottom: 0;
	right: 0;
}

@media(min-width: 992px) {
	.contents {
		padding-bottom: 70px;
	}
	.contents-content {
		max-width: 650px;
		padding: 40px 30px 50px;
	}
	.contents-content h2 {
		font-size: 35px;
	}
	.contents-content > ul > li {
		font-size: 20px;
		text-indent: -20px;
		margin-left: 20px;
	}
	.contents-content > ul > li ul li {
		font-size: 18px;
	}
}



/*    gallery    */
.festival-gallery {
	position: relative;
	margin-top: 130px;
	overflow-x: clip;
	scroll-margin-top: 50px;
}

.festival-gallery::before {
	content: "";
	width: 100vw;
	height: 257px;
	background: url(img/cloud-bg.png) top center/1660px repeat-x;
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translate(-50%,-100%);
	z-index: -1;
}

.festival-gallery h2 {
	position: relative;
	font-size: 47px;
	font-family: var(--anton);
	line-height: 1;
	text-align: center;
	text-shadow: 4px 4px 0 rgba(255, 206, 51, .75);
	max-inline-size: max-content;
	margin-inline: auto;
}

.festival-gallery h2::before {
	content: "";
	width: 130%;
	min-width: 492px;
	aspect-ratio: 492 / 110;
	background: url(img/festival-gallery-deco.png) center/cover;
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translate(-50%,-100%);
}

.festival-gallery-content {
	max-width: 500px;
	display: grid;
	grid-template-columns: 40% 1fr;
	margin-right: -15px;
	margin-left: -15px;
	margin-inline: auto;
}

.festival-gallery-image01 {
	position: relative;
	width: 105%;
	grid-column: 1 / 2;
	margin-top: 10%;
	margin-left: -15%;
}

.festival-gallery-image01::before {
	content: "";
	width: 79px;
	aspect-ratio: 79 / 58;
	background: url(img/festival-gallery-image-deco01.png) center / cover;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-10%,-95%);
	z-index: 5;
}

.festival-gallery-image01 img {
	transform: rotate(-4deg);
}

.festival-gallery-image02 {
	position: relative;
	width: 135%;
	grid-column: 2 / 3;
	grid-row: 1 / 3;
	margin-top: 26%;
	margin-left: -22%;
	z-index: 5;
}

.festival-gallery-image02::before {
	content: "";
	width: 130px;
	aspect-ratio: 447 / 405;
	background: url(img/festival-gallery-image-deco02.png?v3) center / cover;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(-30%,-75%);
	z-index: -1;
}

.festival-gallery-image02 img {
	transform: rotate(-344deg);
}

.festival-gallery-image03 {
	width: 112%;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	margin-top: 10%;
	margin-left: -15%;
}

.festival-gallery-image03 img {
	transform: rotate(-356deg);
}

.festival-gallery-image04 {
	width: 80%;
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	margin-top: -14%;
	margin-left: 45%;
	z-index: 5;
}

.festival-gallery-image04 img {
	transform: rotate(-1.5deg);
}

.festival-gallery-image05 {
	width: 112%;
	grid-column: 1 / 2;
	grid-row: 4 / 5;
    margin-top: -35%;
	margin-left: -17%;
    z-index: 4;
}

.festival-gallery-image05 img {
	transform: rotate(-344deg);
}

.festival-gallery-image06 {
	width: 112%;
	grid-column: 2 / 3;
	grid-row: 3 / 5;
	margin-top: -2%;
	margin-left: -15%;
}

.festival-gallery-image06 img {
	transform: rotate(-359deg);
}

.festival-gallery-image07 {
	width: 88%;
	grid-column: 1 / 3;
	margin-top: 5%;
	margin-top: -1%;
	margin-left: 5%;
	z-index: 1;
}

.festival-gallery-image07 img {
	transform: rotate(-9deg);
}

.festival-gallery-image08 {
	position: relative;
	margin-top: -30%;
	margin-left: -20%;
	z-index: 2;
}

.festival-gallery-image08 img {
	transform: rotate(-13deg);
}

.festival-gallery-image09 {
	grid-row: 6 / 8;
	grid-column: 2 / 3;
	position: relative;
	margin-right: -20%;
	margin-left: -10%;
	z-index: 2;
}

.festival-gallery-image09 img {
	transform: rotate(-345deg);
}

.festival-gallery-image10 {
	position: relative;
	margin-left: -10%;
	z-index: 4;
}

.festival-gallery-image10 img {
	transform: rotate(-5deg);
}

.festival-gallery-image11 {
	position: relative;
	margin-right: -70%;
	margin-left: -25%;
	z-index: 5;
}

.festival-gallery-image11 img {
	transform: rotate(-9deg);
}

.festival-gallery-image12 {
	position: relative;
	margin-right: -5%;
	margin-left: 30%;
	z-index: 6;
}

.festival-gallery-image12 img {
	transform: rotate(-356deg);
}


@media(min-width: 992px) {
	.festival-gallery {
		scroll-margin-top: 100px;
	}
	.festival-gallery h2 {
		font-size: 65px;
		margin-bottom: 40px;
	}
	.festival-gallery h2::before {
		width: 170%;
		top: 15px;
	}
	.festival-gallery-content {
		max-width: 100%;
		grid-template-columns: 20% 1fr 20% 1fr;
	}
	.festival-gallery-image01 {
		grid-column: 1 / 2;
		margin-top: 15%;
		margin-left: -20%;
	}
	.festival-gallery-image02 {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
		margin-top: 35%;
		margin-left: -30%;
	}
	.festival-gallery-image02 img {
		transform: rotate(-365deg);
	}
	.festival-gallery-image03 {
		position: relative;
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		margin-top: 37%;
		z-index: 5;
	}
	.festival-gallery-image04 {
		grid-column: 3 / 4;
		grid-row: 1 / 2;
		margin-top: 0;
		margin-left: 0;
	}
	.festival-gallery-image04 img {
		transform: rotate(14.5deg);
	}
	.festival-gallery-image05 {
		grid-column: 3 / 4;
		grid-row: 2 / 3;
		margin-top: -40%;
	}
	.festival-gallery-image05 img {
		transform: rotate(-352deg);
	}
	.festival-gallery-image06 {
		grid-column: 4 / 5;
		grid-row: 1 / 3;
	}
	.festival-gallery-image07 {
		width: 75%;
		grid-column: 3 / 5;
		margin-top: -45%;
		margin-left: 15%;
	}
	.festival-gallery-image07 img {
		transform: rotate(22deg);
	}
	.festival-gallery-image08 {
		position: relative;
		grid-row: 3 / 4;
		margin-top: 10%;
		z-index: 5;
	}
	.festival-gallery-image08 img {
	}
	.festival-gallery-image09 {
		grid-row: 4 / 5;
		grid-column: 3 / 5;
		width: 85%;
		margin-top: -25%;
		margin-right: 0;
		margin-left: -5%;
	}
	.festival-gallery-image10 {
		position: relative;
		grid-row: 3 / 4;
		margin-top: -20%;
		margin-left: 5%;
		z-index: 5;
	}
	.festival-gallery-image11 {
		width: 85%;
		grid-column: 1 / 3;
		margin-top: -15%;
		margin-right: 0;
		margin-left: 0;
	}
	.festival-gallery-image12 {
		grid-row: 4 / 5;
		grid-column: 4 / 5;
		margin-top: 45%
	}
}

@media(min-width: 1200px) {
	.festival-gallery .container {
		max-width: 1300px;
	}
	.festival-gallery-image02::before {
		width: 200px;
		transform: translate(-30%,-85%);
	}
}

/*  interview  */

.interview-intro {
	position: relative;
	background: url(img/cloud-bg.png) center bottom -1px/1660px repeat-x,url(img/interview-intro-bg.svg) center/cover,linear-gradient(to bottom,#FFF,var(--site-color-blue));
	padding-bottom: 145px;
	overflow-x: clip;
}

.interview-intro::before {
	content: "";
	width: 130px;
	aspect-ratio: 1 / 1;
	background: url(img/interview-intro-circle01.svg) center/cover;
	position: absolute;
	top: 0;
	right: 50%;
	transform: translate(-80%,-25%) rotate(45deg)
}

.interview-intro::after {
	content: "";
	width: 182px;
	aspect-ratio: 1 / 1;
	background: url(img/interview-intro-circle02.svg) center/cover;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(50%,10%) rotate(-135deg);
}

.interview-intro-title {
	position: relative;
	display: grid;
	justify-content: center;
	max-inline-size: max-content;
	margin-bottom: 30px;
	margin-inline: auto;
}

.interview-intro-title::before {
	content: "";
	width: 261px;
	aspect-ratio: 261 / 185;
	background: url(img/interview-intro-kodaguma.png) center / cover;
	order: -2;
	margin-inline: auto;
	z-index: 5;
}

.interview-intro-title::after {
	content: "";
	width: 160px;
	aspect-ratio: 160 / 96;
	background: url(img/interview-intro-title-text.svg) center / cover;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	z-index: 5;
}

.interview-intro-title h2 {
	position: relative;
	font-size: 23px;
	font-weight: 600;
	line-height: calc(33 / 23);
	text-align: center;
	text-shadow: 2px 2px #FFF;
	margin-bottom: 0;
	z-index: 5;
}

.interview-intro-title h2::before,
.interview-intro-title h2::after {
	content: "";
	width: 63px;
	aspect-ratio: 63 / 58;
	background: url(img/title-wings.png) center/cover;
	position: absolute;
	top: 50%;
}

.interview-intro-title h2::before {
	left: 0;
	transform: translate(-50%,-50%);
	z-index: -1;
}


.interview-intro-title h2::after {
	right: 0;
	transform: translate(50%,-50%) scale(-1,1);
	z-index: -1;
}

.interview-intro-title h2 span {
	font-size: 41px;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--site-color-blue);
	vertical-align: sub;
	text-shadow: none;
}

.interview-intro-title > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 188px;
	min-height: 27px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.05em;
	color: #FFF;
	background: var(--site-color-blue);
	border-radius: 30px;
	margin-inline: auto;
	order: -1;
}

.interview-intro-content {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3,3fr);
	justify-content: center;
	max-width: 360px;
	background: #FFF;
	border: 1px solid #000;
	padding: 15px;
	margin-inline: auto;
}

.interview-intro-image {
	grid-column: 1 / 4;
}

.interview-intro-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: -8px;
}

.interview-intro-position {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: #FFF;
	font-weight: 500;
	min-width: 57px;
	min-height: 13px;
	padding: 1px 5px;
}

.interview-intro-name:nth-child(2) .interview-intro-position {
	background: #F0BB28;
}

.interview-intro-name:nth-child(3) .interview-intro-position {
	background: #F69084;
}

.interview-intro-name:nth-child(4) .interview-intro-position {
	background: #7ECCC2;
}

.interview-intro-name p {
	font-size: 14px;
	margin-bottom: 0;
}

.interview-intro-name p span {
	font-size: 10px;
	margin-left: 5px;
}

.interview-intro-deco01 {
	position: absolute;	
	top: 0;
	left: 5%;
	transform: translateY(-140%) rotate(-125deg);
}

.interview-intro-deco02 {
	position: absolute;
	top: 0;
	right: 5%;
	transform: translateY(-150%) rotate(-248deg)
}

.interview-intro-deco03 {
	position: absolute;
	bottom: 0;
	left: 5%;
	transform: translateY(135%);
}

.interview-intro-deco04 {
	position: absolute;
	bottom: 0;
	left: 20%;
	transform: translateY(215%) rotate(-58deg);
}

.interview-intro-deco05 {
	position: absolute;	
	bottom: 0;
	right: 10%;
	transform: translateY(140%) rotate(-58deg);
}

@media(min-width: 992px) {
	.interview-intro {
		padding-bottom: 0;
	}
	.interview-intro-title::after {
		width: 220px;
		transform: translate(-55%,-50%);
	}
	.interview-intro-title > span {
		font-size: 25px;
		width: 300px;
		min-height: 36px;
		margin-bottom: 15px;
	}
	.interview-intro-title h2 {
		font-size: 30px;
	}
	.interview-intro-title h2 span {
		font-size: 50px;
	}
	.interview-intro-content {
		max-width: 850px;
	}
	.interview-intro-image img {
		aspect-ratio: 7 / 5;
		object-fit: cover;
		object-position: center -30px;
	}
	.interview-intro-position {
		font-size: 18px;
	}
	.interview-intro-name p {
		font-size: 25px;
	}
	.interview-intro-name p span {
		font-size: 18px;
	}
}

.interview-start {
	margin-bottom: 60px;
}

.interview-title {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 15px;
	font-size: 17px;
	line-height: calc(27 / 18);
}

.interview-title::after {
	content: "";
	display: block;
	width: 120px;
	aspect-ratio: 261 / 253;
	background: url(img/interview-kodaguma.png) center/cover;
}

.interview-title + .interview-item {
	margin-top: -15px;
}

.interview-item {
	max-width: 850px;
	margin-bottom: 60px;
	margin-inline: auto;
}

.interview-item-text {
	position: relative;
	background: #FFF;
	border: 1px solid #000;
	border-radius: 20px;
	padding: 30px 35px;
	margin-bottom: 40px;
	z-index: 5;
}

.interview-item-text::before {
	content: "";
	width: 28px;
	aspect-ratio: 56 / 37;
	background: url(img/interview-item-text-arrow.png) center bottom/cover;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-140px,100%);
}

.interview-item-text .interview-item-position {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
	color: #FFF;
	min-width: 130px;
	min-height: 30px;
	background: var(--member-color);
	padding: 0 5px;
	margin-bottom: 0;
	position: absolute;
	top: 0;
	left: 25px;
	transform: translateY(-50%);
}

.interview-item-info {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 30px;
}

.interview-item-info-image img {
	border: 1px solid #000;
	border-radius: 50%;
}

.interview-item-info-text p {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 0;
}

.interview-item-info-text .interview-item-position {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	color: #FFF;
	min-width: 105px;
	min-height: 21px;
	background: var(--member-color);
	padding: 0 5px;
	margin-bottom: 0;
}

.interview-item-info-text p span {
	font-size: 14px;
	margin-left: 5px;
}

.interview-item-info-text > span {
	font-size: 14px;
	margin-left: -0.5em;
}

.interview-images {
	max-width: 850px;
	display: grid;
	gap: 50px;
	margin-inline: auto;
}

.interview-images figure img {
	border: 1px solid #000;
	border-radius: 20px;
	margin-bottom: 10px;
}

@media(min-width: 992px) {
	.interview-start {
		padding-top: 70px;
	}
	.interview-title {
		font-size: 25px;
	}
	.interview-title::after {
		width: 160px;
	}
	.interview-images {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.interview-item-text {
		margin-bottom: 15px;
	}
	.interview-item-text::before {
		right: 0;
		left: auto;
		transform: translate(-280px,100%);
	}
	.interview-item-text .interview-item-position {
		font-size: 18px;
		min-width: 150px;
		min-height: 34px;
	}
	.interview-item-info {
		justify-content: flex-end;
	}
}

.interview-history {
	background: url(img/cloud-bg.png) center bottom -1px/1660px repeat-x,linear-gradient(to top,var(--site-color-blue) 0px,var(--site-color-blue) 220px,#FFF);
	padding-bottom: 220px;
}

.interview-history-title {
	position: relative;
	display: grid;
	align-items: center;
	justify-content: center;
	max-inline-size: max-content;
	margin-inline: auto;
	margin-bottom: 55px;
}

.interview-history-title h3 {
	position: relative;
	font-size: 34px;
	font-weight: 600;
	line-height: calc(39 / 34);
	color: #56A8DB;
	margin-bottom: 0;
	z-index: 5;
}

.interview-history-title h3::before {
	content: "本番までの歩み";
	color: #FFF;
	-webkit-text-stroke: 5px #FFF;
	text-stroke: 5px #FFF;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.interview-history-title span {
	font-size: 23px;
	font-weight: 600;
	line-height: calc(39 / 23);
	text-align: center;
	order: -1;
}

.interview-history-title::before,
.interview-history-title::after {
	content: "";
	width: 63px;
	aspect-ratio: 63 / 58;
	background: url(img/title-wings.png) center/cover;
	position: absolute;
	top: 50%;
}

.interview-history-title::before {
	left: 0;
	transform: translate(-50%,-50%);
}

.interview-history-title::after {
	right: 0;
	transform: translate(50%,-50%) scale(-1,1);
}

.interview-history-content {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2,2fr);
	gap: 40px;
	padding: 0;
}

.interview-history-content::before {
	content: "";
	width: 67px;
	aspect-ratio: 67 / 117;
	background: url(img/interview-history-deco01.svg) center/cover;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-20%,-20%) rotate(-148deg);
}

.interview-history-content > * {
	position: relative;
	z-index: 5;
}

.interview-history-item {
	position: relative;
}

.interview-history-item:nth-child(odd):before {
	content: "";
	width: 8px;
	aspect-ratio: cos(60deg);
	clip-path: polygon(0 0,100% 50%,0 100%);
	background: linear-gradient(45deg,#000,#000);
	position: absolute;
	top: 30px;
	right: 0;
	transform: translate(calc(100% + 20px),-50%);
}

.interview-history-item:nth-child(odd):after {
	content: "";
	width: 12px;
	height: 5px;
	background: #000;
	position: absolute;
	top: 30px;
	right: 0;
	transform: translate(20px,-50%);
}

.interview-history-item:nth-child(even):before {
	content: "";
	width: 11px;
	aspect-ratio: 1;
	clip-path: polygon(0 100%,0 0,100% 100%);
	background: linear-gradient(45deg,#000,#000);
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translate(-30px,30px);
}

.interview-history-item:nth-child(even):after {
	content: "";
	width: 16px;
	height: 5px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translate(-28px,22px) rotate(-45deg);
}

.interview-history-item:last-child:before,
.interview-history-item:last-child:after {
	content: none;
}

.interview-history-item span {
	font-size: 16px;
	font-weight: 500;
	position: absolute;
	top: -5px;
	left: 0;
	transform: translateY(-100%);
}

.interview-history-item h4 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #FFF;
	background: #000;
	min-width: 140px;
	min-height: 25px;
}

.interview-history-item p {
	text-align: center;
}

.interview-what .interview-title {
	padding-bottom: 20px;
}

@media(min-width: 992px) {
	.interview-history {
		padding-top: 70px;
	}
	.interview-history-content {
		grid-template-columns: repeat(4,4fr);
	}
	.interview-what {
		padding-top: 70px;
	}
	.interview-what .interview-title {
		padding-bottom: 0;
	}
	.interview-history-item:not(:last-child)::before {
		content: "";
		width: 8px;
		aspect-ratio: cos(60deg);
		clip-path: polygon(0 0,100% 50%,0 100%);
		background: linear-gradient(45deg,#000,#000);
		position: absolute;
		top: 30px;
		right: 0;
		bottom: auto;
		left: auto;
		transform: translate(calc(100% + 20px),-50%);
	}
	.interview-history-item:not(:last-child)::after {
		content: "";
		width: 12px;
		height: 5px;
		background: #000;
		position: absolute;
		top: 30px;
		right: 0;
		bottom: auto;
		left: auto;
		transform: translate(20px,-50%);
	}
	.interview-history-item:last-child::before,
	.interview-history-item:last-child::after {
		content: none;
	}
	.interview-history-item:nth-child(4)::before,
	.interview-history-item:nth-child(4)::after {
		content: none;
	}
	.interview-history-item span {
		font-size: 18px;
	}
	.interview-history-item h4 {
		font-size: 18px;
		min-height: 30px;
	}
}

.interview-composition {
	position: relative;
	background: url(img/cloud-bg.png) center bottom -1px/1660px repeat-x,linear-gradient(to top,var(--site-color-blue) 0px,var(--site-color-blue) 220px,#FFF);
	padding-bottom: 200px;
	overflow-x: clip;
}

.interview-composition-title {
	position: relative;
	display: grid;
	align-items: center;
	justify-content: center;
	max-inline-size: max-content;
	margin-inline: auto;
	margin-bottom: 40px;
}

.interview-composition-title h3 {
	position: relative;
	font-size: 34px;
	font-weight: 600;
	line-height: calc(39 / 34);
	text-align: center;
	color: #56A8DB;
	margin-bottom: 0;
	z-index: 5;
}

.interview-composition-title span {
	font-size: 23px;
	font-weight: 600;
	line-height: calc(39 / 23);
	text-align: center;
	order: -1;
}

.interview-composition-title::before,
.interview-composition-title::after {
	content: "";
	width: 63px;
	aspect-ratio: 63 / 58;
	background: url(img/title-wings.png) center/cover;
	position: absolute;
	top: 50%;
}

.interview-composition-title::before {
	left: 0;
	transform: translate(-100%,-50%);
}

.interview-composition-title::after {
	right: 0;
	transform: translate(100%,-50%) scale(-1,1);
}

.interview-composition-table h4 {
	font-size: 18px;
	text-align: center;
	margin-bottom: 20px;
}

.interview-composition-table {
	position: relative;
	margin-bottom: 50px;
	
}

.interview-composition-table .inner{
	max-inline-size: max-content;
	max-width: 500px;
	margin-inline: auto;
}

.interview-composition-table .text{
	text-align: center;
	display: block;
}

.interview-composition-table .text p{
	text-align: left;
	display: inline-block;
}

/* .interview-composition-table::before {
	content: "";
	width: 100%;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	mix-blend-mode: color;
} */

.interview-composition-swiper {
	position: relative;
	margin-right: -15px;
	margin-left: -15px;
}

.interview-composition-swiper::before {
	content: "";
	width: 360px;
	aspect-ratio: 360 / 168;
	background: url(./img/interview-composition-deco01.svg) center / cover;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-40%,-25%);
}

.interview-composition-swiper .swiper-slide {
	width: auto;
	height: auto;
}

.interview-composition-swiper .swiper-pagination {
	position: relative;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
}

.interview-composition-swiper .swiper-pagination .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background: #FFF;
	opacity: 1;
}

.interview-composition-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 11px;
	height: 11px;
	background: #FFF561;
	border: 2px solid #e1deaa;
}

.interview-composition-swiper .swiper-button {
	position: absolute;
	top: 65%;
	left: 50%;
	max-width: 330px;
	width: 95%;
	transform: translateX(-50%);
	z-index: 10;
}

.interview-composition-swiper :is(.swiper-button-next,.swiper-button-prev) {
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
	background: #F5D147;
	border-radius: 50%;
}

.interview-composition-swiper .swiper-button-next::after {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: translateX(-2px) rotate(45deg);
}

.interview-composition-swiper .swiper-button-prev::after {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid #FFF;
	border-left: 2px solid #FFF;
	transform: translateX(2px) rotate(-45deg);
}

.interview-composition-content {
	max-width: 250px;
	height: 100%;
	background: #FFF;
	border-radius: 20px;
}

.interview-composition-body {
	position: relative;
	background: #FFF;
	border-radius: 10px;
	padding: 25px;
	margin-top: -10px;
}

.interview-composition-position {
	width: 178px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-60%);
}

.interview-composition-name {
	font-size: 18px;
	font-weight: 500;
	text-align: center;
}

.interview-composition-name span {
	font-size: 14px;
	margin-left: 3px;
}

.interview-composition-faculty {
	display: block;
	font-size: 14px;
	text-align: center;
	margin-bottom: 15px;
}

.interview-composition-text {
	border-top: 1px dashed #000;
	padding-top: 15px;
}

.interview-composition-text p {
	line-height: calc(24 / 15);
}

@media(min-width: 992px) {
	.interview-composition {
		padding-top: 70px;
	}
	.interview-composition-content {
		max-width: 300px;
	}
	.interview-composition-swiper .swiper-button {
		max-width: 380px;
		top: 60%;
	}
}

.interview-catchcopy {
	background: url(img/cloud-bg.png) center bottom/1660px repeat-x;
	padding-bottom: 200px;
}

@media(min-width: 992px) {
	.interview-catchcopy {
		padding-top: 70px;
	}
}

.interview-plan {
	background: url(img/cloud-bg.png) center bottom/1660px repeat-x;
	padding-bottom: 200px;
}


.interview-hard {
	position: relative;
	background: url(img/cloud-bg.png) center bottom -1px/1660px repeat-x,linear-gradient(to top,var(--site-color-blue) 0px,var(--site-color-blue) 220px,#FFF);
	padding-bottom: 200px;
	overflow-x: clip;
}

.interview-hard::after {
	content: '';
	width: 281px;
	aspect-ratio: 281 / 151;
	background: url(img/interview-hard-kodaguma.png) center / cover;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,-10%);
}

.interview-hard .interview-item {
	position: relative;
}

.interview-hard .interview-item:nth-child(3)::before {
	content: "";
    width: 60px;
    aspect-ratio: 60 / 104;
    background: url(img/interview-hard-deco01.png) center / cover;
    position: absolute;
	top: 0;
	left: 0;
    transform: translate(-60%, -50%);
}

.interview-hard .interview-item:nth-child(4)::before {
	content: "";
    width: 60px;
    aspect-ratio: 60 / 104;
    background: url(img/interview-hard-deco01.png) center / cover;
    position: absolute;
	top: 0;
	right: 0;
    transform: translate(20%, -70%) rotate(-170deg);
}

.interview-hard-image {
	position: relative;
	z-index: 5;
}

.interview-hard-image::before {
	content: "";
    width: 60px;
    aspect-ratio: 60 / 104;
    background: url(img/interview-hard-deco01.png) center / cover;
    position: absolute;
	top: 0;
	left: 0;
    transform: translate(-15%, -95%) rotate(150deg) scale(-1,1);
	z-index: -1;
}

.interview-hard .interview-item:last-child::before {
	content: "";
    width: 60px;
    aspect-ratio: 60 / 104;
    background: url(img/interview-hard-deco01.png) center / cover;
    position: absolute;
	top: 0;
	right: 0;
    transform: translate(20%, -70%) rotate(-70deg);
}

.interview-hard .interview-item:last-child::after {
	content: "";
    width: 60px;
    aspect-ratio: 60 / 104;
    background: url(img/interview-hard-deco01.png) center / cover;
    position: absolute;
	bottom: 0;
	left: 0;
    transform: translate(-20%, 70%) rotate(-140deg);
}

.interview-hard-image {
	max-width: 850px;
	margin: 0 -15px 60px;
}

.interview-plan .interview-item-image {
	margin-bottom: 15px;
}

.interview-plan .interview-item-text {
	border: none;
	margin-bottom: 15px;
	padding: 0;
}

.interview-plan .interview-item-text::before {
	content: none;
}

.interview-plan .interview-item-text h4 {
	font-size: 18px;
	margin-bottom: 15px;
}

.interview-plan .interview-item-info {
	justify-content: flex-start;
	gap: 15px;
}

.interview-plan .interview-item-info-image {
	max-width: 80px;
}

.interview-plan .interview-item-info-text p {
	font-size: 18px;
	span {
		font-size: 14px;
	}
}

.interview-plan .interview-item-info-text .interview-item-position {
	font-size: 12px;
	min-width: 90px;	
}

@media(min-width: 992px) {
	.interview-plan {
		padding-top: 70px;
	}
	.interview-plan .interview-item {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto;
		align-items: end;
		gap: 30px;
	}
	.interview-plan .interview-item-image {
		grid-row: 1 / 3;
		margin-bottom: 0;
	}
	.interview-plan .interview-item-text {
		margin-bottom: 0;
	}
	.interview-plan .interview-item-text h4 {
		font-size: 22px;
		margin-bottom: 5px;
	}
	.interview-hard::after {
		transform: translate(-50%,-50%);
	}
	.interview-hard-image {
		margin-inline: auto;
	}
	.interview-hard {
		padding-top: 70px;
	}
}























.topics {
	padding: 100px 15px 60px;
}

.topics h2 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 700px;
	aspect-ratio: 689 / 100;
	font-size: clamp(21px,5.8vw,42px);
	font-weight: 600;
	letter-spacing: 0.12em;
	border: 3px solid #343434;
	border-radius: 60px;
	margin-bottom: clamp(30px,8vw,60px);
	margin-inline: auto;
}

.topics h2::before {
	content: "";
    max-width: 24px;
	width: 5%;
    aspect-ratio: 1 / cos(30deg);
    clip-path: polygon(50% 100%, 100% 0, 0 0);
    background: #343434;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 100%);
}

.topics h2::after {
	content: "";
    max-width: 18px;
	width: calc(5% - 5px);
    aspect-ratio: 1 / cos(30deg);
    clip-path: polygon(50% 100%, 100% 0, 0 0);
    background: #FFF;
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate(-50%, 100%);
}

.topics-wrapper {
	display: grid;
	grid-template-columns: repeat(3,3fr);
	column-gap: 30px;
}

.topics-content {
	max-width: 690px;
	width: 100%;
	border: 1px solid #343434;
	border-radius: 25px;
	margin-inline: auto;
}

.topics-content-image img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	aspect-ratio: 580 / 470;
	border-radius: 25px 25px 0 0;
}

.topics-content-body {
	aspect-ratio: 688 / 142;
	padding: 5px 15px 15px;
}

.topics-content-body .date {
	font-size: 18px;
}

.topics-content-title {
	font-size: 20px;
	font-weight: 600;
	line-height: calc(42 / 30);
	letter-spacing: 0.12em;
	margin-bottom: 0;
}

@media(min-width: 992px) {
	.topics h2 {
		font-size: 35px;
		max-height: 80px;
	}
}

@media(max-width: 991px) {
	.topics-wrapper {
		grid-template-columns: auto;
		row-gap: 40px;
	}	
	.topics-content {
		border-radius: 50px;
	}
	.topics-content-image img {
		border-radius: 50px 50px 0 0;
	}
	.topics-content-body {
		padding: 5px 30px 15px;
	}
	.topics-content-body .date {
		font-size: clamp(13px,3.5vw,26px);
	}
	.topics-content-title {
		font-size: clamp(15px,4vw,30px);
	}
}

@media(max-width: 575px) {
	.topics {
		padding: 80px 0 60px;
	}
	.topics-wrapper {
		row-gap: 20px;
	}
	.topics-content {
		border-radius: 25px;
	}
	.topics-content-image img {
		border-radius: 25px 25px 0 0;
	}
	.topics-content-body {
		padding: 5px 15px 10px;
	}
}

.share {
	padding: 0 15px 100px;
}

.share h2 {
	position: relative;
	font-size: clamp(21px,5vw,42px);
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.12em;
	padding-bottom: 25px;
	margin-bottom: 30px;
}

.share h2::before {
	content: "";
	width: 50px;
	height: 5px;
	background: #343434;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.share-sns {
	display: grid;
	grid-template-columns: 20% 20% 20%;
	gap: 30px;
	justify-content: space-between;
	max-width: 480px;
	width: 70%;
	margin-inline: auto;
}

@media(min-width:992px) {
	.share h2 {
		font-size: 35px;
	}
}

@media(max-width: 575px) {
	.share {
		padding: 0 0 50px;
	}
}


.site-footer-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 40px;
}

.site-footer-list li {
	border-bottom: 1px solid #6E6E6E;
}

.site-footer-list li:first-child {
	border-top: 1px solid #6E6E6E;
}

.site-footer-list li a {
	display: block;
	font-size: clamp(15px,4vw,30px);
	text-align: center;
	letter-spacing: 0.14em;
	color: #000;
	width: 100%;
	padding: 25px 15px;
}

.copyright {
	font-size: clamp(10px,2.7vw,20px);
	text-align: center;
	letter-spacing: 0.14em;
	line-height: calc(24 / 20);
	margin-bottom: 25px;
}

@media(min-width:992px) {
	.site-footer-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.site-footer-list li {
		border-bottom: 1px solid #6E6E6E;
	}
	.site-footer-list li:nth-child(-n+3) {
		border-top: 1px solid #6E6E6E;
	}
	.site-footer-list li a {
		font-size: 20px;
	}
	.copyright {
		font-size: 15px;
	}
}

@media(max-width: 575px) {
	.site-footer-list {
		margin-bottom: 20px;
	}
	.site-footer-list li a {
		padding: 15px;
	}
	.copyright {
		margin-bottom: 13px;
	}
}

.page-top {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	position: fixed;
	right: 5%;
	bottom: 5%;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: .5s;
}

.page-top.show {
	opacity: 1;
	visibility: visible;
}

@media(min-width: 992px) {
	.page-top img {
		width: 90px;
	}
}

@media(max-width:575px) {
	.page-top {
		right: 3%;
	}
}

.text-underline,
.text-underline:hover {
	text-decoration: underline;
}



.wow:not(.animate__animated) {
	animation-name: none;
	visibility: hidden;
}