@charset "UTF-8";
/* resset css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body, html {padding:0;margin:0}h1,h2,h3,h4,p,figure,picture,blockquote,ul,li,dl,dd{margin:0}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight: normal;}
i,em{font-style:normal;}
a:not([class]){color:currentColor}
img,figure,picture{display:block;max-width:100%;height:auto;vertical-align:top;margin-inline: auto;}
input,button,textarea,select{font:inherit}
textarea:not([rows]){min-height:10em}
button{all:unset;display:revert}
table {border-collapse:collapse;width:100%;}
textarea {white-space:revert}


:root {
	/* color */
	--color: #333; 
	--link: #EF513F;
	--white: #fff;
	--lightGray: #a5a5a5;
	--gray: #535860;
	--black: #333;
	--richBlack: #000;
	--darkBlue: #1c3f5e;
	--red: #e58094;
	--pink: #fef5f2;
	--yellow: #fcef32;
	--lightPink: #f1e0e3;
	--darkPink: #d9bab0;
	--bg_white: #f8f8f8;
	--bg_lightGray: #eee;
	--border: #e3ddd9;
	
	/* width */
	--maxWidth: 1000px;
	--tbBreak: 768px;
	--spBreak: 560px;
	
	--maxWidthN: 1000;
	--tbBreakN: 768;
	--spBreakN: 560;
}


.oswald {
	font-family: "Oswald", sans-serif;
	font-weight: 500;
}
.noto-sans-jp {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400; /*Regular*/
	font-weight: 500; /*semiBold*/
	font-weight: 700; /*Bold*/
}


//-------------------------------------------
//　element
//-------------------------------------------
html, body {
	overflow-x: hidden;
}
html {
	scroll-padding-top: 100px;
	scroll-behavior: smooth;
	@media (max-width: 768px) {
		scroll-padding-top: 60px;
	}
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400; /*Regular*/
	color: var(--gray);
	font-size: 15px;
	line-height: 1.8;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.1em;
	background: var(--white);
	padding-top: 100px;
	@media (max-width: 768px) {
		font-size: 13px;
		padding-top: 50px;
	}
}

#wrapper {
	&.open {
		#header {
			@media (max-width: 768px) {
				height: 100%;
				width: 100%;
				overflow-y: scroll;
				background: var(--white);
			}
		}
		nav {
			@media (max-width: 768px) {
				visibility: visible;
				opacity: 1;
				
			}
		}
	}
}

#main {
	max-width: 1000px;
	margin-inline: auto;
	@media (max-width: 1060px) {
		padding-inline: 20px;
	}
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--white);
	padding: 0 30px;
	box-shadow: 0 0 10px #ddd;
	z-index: 100;
	@media (max-width: 768px) {
		height: 50px;
		padding: 0 15px;
	}
	.logo {
		 max-width: 260px;
		@media (max-width: 1100px) {
			position: absolute;
			top: 9px;
			bottom: 0;
			z-index: 10;
			max-width: 160px;
		}
		@media (max-width: 768px) {
		   max-width: 120px;
		   top: 13px;
		}
		@media (max-width: 560px) {
			max-width: 90px;
			top: 16px;
		}
	}
	#menuTrigger {
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		margin: 0;
		z-index: 101;
		cursor: pointer;
		@media (min-width: 768px) {
			display: none;
		}
		i {
			display: block;
			text-indent: 130%;
			white-space: nowrap;
			overflow: hidden;
		}
		&::before,
		&::after,
		i:before {
			position: absolute;
			display: block;
			content: "";
			width: calc(100% - 25px);
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			height: 2px;
			background: var(--black);
			border-radius: 1px;
			//transition: .3s;
		}
		&:before {
			top: -17px;
		}
		&::after {
			bottom: -17px;
		}
		&.open {
			&::before {
				top: 0;
				rotate: 45deg;
			}
			&::after {
				bottom: 0;
				rotate: -45deg;
			}
			i:before {
				display: none;
			}
			&:hover {
				
			}
		}
	}
	.subNavList {
		position: absolute;
		display: flex;
		top: 0;
		right: 0;
		justify-content: flex-end;
		align-items: center;
		@media (max-width: 768px) {
			height: 50px;
		}
		> li {
			display: flex;
			margin-left: 5px;
			&.contact,
			&.nearby {
				margin-left: 4px;
				height: 34px;
				display: flex;
				justify-content: center;
				align-items: center;
				a {
					height: 100%;
					font-size: 13px;
					display: flex;
					justify-content: center;
					align-items: center;
					background: var(--yellow);
				}
			}
			&.select {
				margin-right: 20px;
				margin-left: 10px;
				position: relative;
				@media (max-width: 768px) {
					margin-inline: 7px;
				}
				&::after {
					position: absolute;
					content: "";
					top: -2px;
					bottom: 0;
					right: 10px;
					margin: auto;
					width: 6px;
					height: 6px;
					border-top: solid 2px var(--black);
					border-right: solid 2px var(--black);
					rotate: 135deg;
				}
				label {
					display: none;
				}
				select {
					width: 70px;
					font-size: 10px;
					border: 1px solid var(--black);
					padding: 3px 10px 3px 10px;
					border-radius: 50px;
					padding-right: 25px;
					line-height: 1.5;
					appearance: none;
					color: var(--color);
					background: var(--white);
					@media (max-width: 768px) {
						width: 68px;
					}
					
				}
			}
			&.facebook,
			&.instagram {
				margin-right: 10px;
				@media (max-width: 768px) {
					display: none;
				}
			}
			&.contact {
				@media (max-width: 768px) {
					display: none;
				}
				a {
					width: 150px;
				}
			}
			&.nearby {
				@media (max-width: 768px) {
					margin-right: 50px;
				}
				a {
					width: 250px;
					@media (max-width: 768px) {
						width: auto;
						padding: 3px 10px;
						border-radius: 17px;
						font-size: 12px;
						height: auto;
						letter-spacing: 0;
					}
					i {
						@media (max-width: 768px) {
							display: none;
						}
					}
				}
			}
			a {
				display: block;
				white-space: nowrap;
				text-align: center;
			}
		}
	}
	
	
	@media (min-width: 768px) {
		nav {
			margin-top: 34px;
			.navList {
				position: relative;
				display: flex;
				justify-content:flex-end;
				right: -10px;
				li {
					a {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 66px;
						padding: 0 10px;
						font-size: 14px;
						color: var(--black);
						line-height: 1;
						white-space: nowrap;
						opacity: 1;
						&:hover {
							background: var(--bg_white);
						}
					}
					&.teach {
						&:hover > a + ul {
							visibility: visible;
							opacity: 1;
						}
						> a {
							position: relative;
							padding-right: 25px;
							&::after {
								position: absolute;
								content: "";
								top: -2px;
								bottom: 0;
								right: 10px;
								margin: auto;
								width: 8px;
								height: 8px;
								border-top: solid 2px var(--black);
								border-right: solid 2px var(--black);
								rotate: 135deg;
							}
							+ ul {
								position: absolute;
								background: var(--white);
								visibility: hidden;
								opacity: 0;
								transition: .7s;
								li {
									a {
										height: auto;
										padding: 20px 20px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	@media (min-width: 768px) and (max-width: 1100px) {
		nav {
			.navList {
				position: absolute;
				right: 10px;
				top: 34px;
				li {
					a {
						padding-inline: 7px;
						font-size: clamp(13px, calc((14 / 1100) * 100vw) , 14px);
					}
				}
			}
		}
	}
	
	@media (max-width: 768px) {
		nav {
			position: absolute;
			visibility: hidden;
			opacity: 0;
			top: 50px;
			left: 0;
			width: 100%;
			height: 100vh;
			background: var(--gray);
			color: var(--white);
			transition: 0.3s ease-in-out;
			z-index: 100;
			.navList {
				position: relative;
				li {
					position: relative;
					text-align: left;
					a {
						position: relative;
						display: block;
						text-decoration: none;
						font-size: 14px;
						border-bottom: 1px solid var(--lightGray);
						line-height: 1;
						padding: 18px 30px;
						&::after {
							content: "";
							position: absolute;
							top: 0;
							bottom: 0;
							right: 25px;
							margin: auto;
							display: block;
							width: 8px;
							height: 8px;
							border-top: solid 2px var(--white);
							border-right: solid 2px var(--white);
							rotate: 45deg;
						}
					}
				}
			}
		}
	}
}

#footer {
	background: var(--gray);
	color: var(--white);
	padding-inline: 30px;
	padding-top: 45px;
	padding-bottom: 25px;
	@media (max-width: 768px) {
		padding-inline: 20px;
	}
	> div {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 30px;
		max-width: 1000px;
		margin-inline: auto;
		@media (max-width: 768px) {
			flex-direction: column-reverse;
			
		}
		> div {
			:first-child {
				
			}
			:last-child {
				
			}
		}
	}
	.footerLogo {
		margin-bottom: 30px;
		@media (max-width: 768px) {
			
		}
		img {
			margin: 0;
		}
	}
	p {
		+ p {
			margin-top: 10px;
			font-size: 11px;
		}
		.spOnly {
			@media (max-width: 830px) {
				display: block;
			}
		}
	}
	.companyName {
		margin-bottom: 10px;
		line-height: 1.8;
		border-left: 4px solid var(--white);
		padding-left: 10px;
	 }
	.copyright {
		width: 100%;
		text-align: center;
		margin-top: 70px;
		font-size: 11px;
		letter-spacing: 0;
		@media (max-width: 768px) {
			margin-top: 50px;
		}
	}
	.snsList {
		margin-top: 30px;
		display: flex;
		gap: 30px;
		@media (max-width: 768px) {
			justify-content: center;
			margin-top: 50px;
		}
	}
	.footerNav {
		display: flex;
		gap: 70px;
		font-size: 12px;
		
		@media (max-width: 1000px) {
			gap: calc((40 / 1000) * 100vw);
		}
		@media (max-width: 768px) {
			flex-direction: column;
			gap: 0;
			letter-spacing: 0;
		}
		ul {
			@media (max-width: 768px) {
				display: flex;
				flex-wrap: wrap;
			}
			li {
				@media (max-width: 768px) {
					width: 50%;
					padding: 7px 0;
				}
				+ li {
					margin-top: 13px;
					@media (max-width: 768px) {
						margin-top: 0;
					}
				}
			}
		}
	}
}

#float_banner {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
	width: 360px;
	visibility: hidden;
	opacity: 0;
	transition: 0.3s ease-in-out;
	@media (max-width: 768px) {
		width: calc(100% - (30px * 2));
		right: 10px;
		bottom: 10px;
		margin-inline: auto;
	}
	&.visible {
		visibility: visible;
		opacity: 1;
	}
	> div {
		position: relative;
	}
	a {
		display: block;
		border: 1px solid var(--border);
	}
	.close {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		position: absolute;
		top: -7px;
		right: -7px;
		z-index: 1;
		width: 20px;
		height: 20px;
		color: var(--gray);
		background: var(--white);
		border: 1px solid var(--lightGray);
		border-radius: 50%;
		cursor: pointer;
		@media (max-width: 768px) {
			width: 30px;
			height: 30px;
		}
	}
}

.hero {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	padding-inline: calc(50vw - 50%);
	position: relative;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	max-height: 272px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--white);
	aspect-ratio: 1200 / 274;
	@media (min-width: 1200px) {
		height: 272px;
		aspect-ratio: auto;
	}
	@media (max-width: 768px) {
		aspect-ratio: auto;
		height: 150px;
	}
	&.program_list { background-image: url("/img/program_list/main_program_list01.webp");}
	&.music_list { background-image: url("/img/music_list/main_music_list01.webp");}
	&.flow { background-image: url("/img/flow/main_flow01.webp");}
	&.teach { background-image: url("/img/teach/main_teach01.webp");}
	&.application { background-image: url("/img/application/main_application01.webp");}
	&.schedule { background-image: url("/img/schedule/main_schedule01.webp");}
	&.faq { background-image: url("/img/faq/main_faq01.webp");}
	&.contact { background-image: url("/img/contact/main_contact01.webp");}
	&.column { background-image: url("/img/blog/main_column01.webp");}
	&.other,&.news,&.blog {
		background: #6a8497;
		height: 80px;
		display: flex;
		align-items: center;
		margin-bottom: 60px;
		aspect-ratio: auto;
		@media (max-width: 768px) {
			height: 44px;
			margin-bottom: 30px;
		}

	}
   
 	.heroTtl {
		position: absolute;
		top: 0;
		bottom: 0;
		height: 2em;
		margin: auto;
		font-size: 36px;
		font-weight: 700;
		text-shadow: 0 0 10px #aaa;
		@media (max-width: 768px) {
			font-size: 20px;
		}
		i {
			display: block;
			font-size:24px;
			font-weight: 500;
			font-family: 'Oswald', sans-serif;
			letter-spacing: 0.02em;
			@media (max-width: 768px) {
				font-size:16px;
			}
		}
	}
	.breadcrumbList {
		display: flex;
		font-size: 12px;
		overflow: hidden;
		li {
			position: relative;
			padding-right: 1em;
			margin-right: 1em;
			white-space: nowrap;
			&:last-child {
				text-overflow: ellipsis;
				overflow-x: hidden;
				&::after {
					display: none;
				}
			}
			&::after {
				position: absolute;
				content: "";
				display: block;
				top: 0;
				bottom: 0;
				right: 0;
				width: 6px;
				height: 6px;
				margin: auto;
				border-top: 1.5px solid var(--white);
				border-right: 1.5px solid var(--white);
				rotate: 45deg;
			}
			a {
				
			}  
		}
	}
}

section {
	position: relative;
	padding-top: 45px;
	padding-bottom: 80px;
	@media (max-width: 768px) {
		padding-top: 25px;
		padding-bottom: 40px;
	}
	&#introduction {
		background: var(--pink);
		margin-inline: calc(50% - 50vw);
		max-width: 100vw;
		padding-inline: calc(50vw + 75px - 50%);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 30px;
		padding-top: 30px;
		padding-bottom: 30px;
		margin-bottom: 70px;
		@media (max-width: 1000px) {
			padding-inline: calc(50vw - 50%);
		}
		@media (max-width: 560px) {
			flex-wrap: wrap;
			flex-direction: column;
			gap: 15px;
			padding-top: 20px;
			padding-bottom: 20px;
			margin-bottom: 0;
		}
		.ttl {
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 15px;
		}
		p {
			font-size: 14px;
			@media (max-width: 768px) {
				font-size: 12px;
			}
			+ p {
				margin-top: 10px;
			}
		}
		figure {
			position: relative;
			min-width: 360px;
			@media (max-width: 768px) {
				min-width: 0;
				aspect-ratio: 3 / 2;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 200%;
			}
			@media (max-width: 560px) {
				aspect-ratio: 18 / 9;
			}
			img {
				@media (max-width: 560px) {
					
				}
			}
		}
	}
}
.w850 {
	margin-inline: auto;
	max-width: 850px;
}
.w800 {
	margin-inline: auto;
	max-width: 800px;
}
.w730 {
	margin-inline: auto;
	max-width: 730px;
}

img {
	object-fit: cover;
}
 
a {
	color: var(--gray);
	transition: .4s;
	text-decoration: none;
	&:hover{
		opacity: .7;
	}
	&.modal-open-button {
		text-decoration: underline;
		&:hover{
			text-decoration: none;
		}

	}
}
h1,h2,h3,h4,h5,h6 {
	line-height: 1.5;
	font-weight: 700; /*Bold*/
}

.subHead {
	* + & {
		margin-top: 40px;
	}
	font-size: 24px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: 700;
}
.ttl {
	* + & {
		margin-top: 30px;
	}
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
	@media (max-width: 768px) {
		font-size: 18px;
	}
	@media (max-width: 560px) {
		text-align: center;
		font-size: 17px;
	}				
}

p {
	text-align: justify;
	text-justify: inter-ideograph;
	* + & {
		margin-top: 25px;
	}
	.subHead + &,
	.ttl + & {
		margin-top: 10px;
	}
}

.spOnly {
	display: none;
	@media (max-width: 768px) {
		display: block;
	}
}

.pcOnly {
		display: block;
	@media (max-width: 768px) {
		display: none;
	}
}

a {
	word-break: break-all;
}

.btn {
	position: relative;
	z-index: 2;
    * + & {
		margin-top: 40px;
		@media (max-width: 560px) {
			margin-top: 30px;
		}
	}
	a {
		display: inline-block;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: var(--black);
		font-weight: 700; /*Bold*/
		background: var(--yellow);
		border-radius: 40px;
		line-height: 1;
		width: 220px;
		margin-inline: auto;
		padding: 12px 10px;
	}
	&.red {
		a {
			color: var(--white);
			background: var(--red);
		}
	}
	&.pink {
		a {
			background: var(--lightPink);
		}
	}
	&.white {
		a {
			background: var(--white);
		}
	}
	&.gray {
		a {
			color: var(--white);
			background: var(--gray);
		}
	}
}

.ex {
	font-size: 90%;
}
.bold {
	font-weight: bold;
}

.indent {
	margin-left: 1em;
	text-align: left;
	* + & {
		margin-top: 10px;
	}
	> li {
		text-indent: -1em;
	}
	&.number {
		margin-left: 1.5em;
		li {
			text-indent: -1.5em;
		}
	}
}

.numberList {
	text-align: left;
	> li {
		position: relative;
		counter-increment: count;
		//text-indent: -1.2em;
		padding-left: 1.2em;
		&::after {
			position: absolute;
			top: 0;
			left: 0;
			width: 1.2em;
			content: counter(count) ".";
		}
	}
}

.dotList {
	text-align: left;
	> li {
		position: relative;
		counter-increment: count;
		padding-left: 1.5em;
		+ li {
			margin-top: 0.5em;
		}
		&::after {
			position: absolute;
			top: 0;
			left: 0;
			width: 1.5em;
			content: "●";
		}
	}
}

/* top */
/* ------------------------------- */
@keyframes rotateProgress {
	0%   { stroke-dashoffset: 125.664px;}
	90%  { stroke-dashoffset: 0;}
	100% { stroke-dashoffset: -125.664px;}
}

body.top {
	#hero {
		margin-inline: calc(50% - 50vw);
		padding: 0;
	}
	#topSlider {
		.nextArrow {
			position:absolute;
			z-index: 10;
			color: var(--white);
			left: 30px;
			bottom: calc((50 / 1100) * 100vw);
			@media (min-width: 1000px){
				bottom: 50px;
			}
			@media (max-width: 768px) {
				left: 20px;
				bottom: 20px;
			}
			.swiper-button-next {
				position: relative;
				cursor: pointer;
				margin-left: 10px;
				font-size: 12px;
				line-height: 1.4;
				padding-left: 80px;
				color: var(--white);
				&::after {
					position: absolute;
					display: block;	
					content: "▶︎";
					top: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					font-size: 14px;
					text-align: center;
					line-height: 44px;
					width: 44px;
					height: 44px;
					color: var(--white);
					border: 1px solid var(--white);
					border-radius: 50%;
				}
			}
		}
		.swiper-pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			bottom: calc((50 / 1100) * 100vw);
			@media (min-width: 1000px){
				bottom: 50px;
			}
			@media (max-width: 768px) {
				justify-content: flex-end;
				bottom: 20px;
				padding-right: 30px;
			}
		}
		.swiper-pagination-bullet {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: auto;
			height: auto;
			margin: 0 10px;
			background-color: transparent;
			border-radius: 50%;
			cursor: pointer;
			transition: 0.3s;
			span {
				color: var(--white);
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			.progress {
				transform: rotate(-90deg);
				.circle-origin {
					fill: transparent;
					stroke: var(--white);
					stroke-width: 1;
					stroke-linecap: round;
					stroke-dasharray: 125.664px;
					stroke-dashoffset: 125.664px;
				}
			}
			&.swiper-pagination-bullet-active {
				.progress {
					.circle-origin {
						animation: rotateProgress 5s linear forwards;
					}
				}
			}
		}
	}
	#news {
		margin-inline: calc(50% - 50vw);
		max-width: 100vw;
		padding-inline: calc(50vw - 50%);
		padding-top: 25px;
		padding-bottom: 25px;
		background: var(--lightPink);
		display: flex;
		align-items: center;
		gap: 30px;
		@media (max-width: 960px) {
			flex-direction: column;
			justify-content: center;
		}
		@media (max-width: 768px) {
			gap: 20px; 
		}
		h2 {
			font-size: 29px;
			font-family: 'Oswald', sans-serif;
			font-weight: 400;
			white-space: nowrap;
			letter-spacing: 0.01em;
			@media (max-width: 960px) {
				text-align: center;	 
			}
			i {
				display: block;
				font-size: 13px;
				font-weight: 700;
				margin-top: 4px;
				@media (max-width: 768px) {
					margin-top: 0;
				}
			}
		}
		.newsEventList {
			display: flex;
			gap: 10px;
			@media (max-width: 768px) {
				gap: 15px;
				flex-wrap: wrap;
			}
			> li {
				width: calc((100% - (10px * 3)) / 4);
				display: flex;
				flex-direction: column;
				@media (max-width: 768px) {
					width: calc((100% - (15px * 1)) / 2);
				}
				a {
					display: block;
					background: var(--white);
					border: 1px solid var(--gray);
					border-radius: 5px;
					font-weight: 500;
					padding: 20px 15px;
					@media (max-width: 768px) {
						padding: 10px 10px;
					}
					h3 {
						width: 100%;
						overflow: hidden;
						font-size: 13px;
						display: -webkit-box;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						line-height: 1.5;
						margin-bottom: 7px;
					}
					figure {
						overflow: hidden;
						aspect-ratio: 16 / 9;
						img {
							height: 100%;
							width: 100%;
						}
					}
					> div {
						margin-top: 15px;
						display: flex;
						justify-content: space-between;	
						align-items: center;
						@media (max-width: 768px) {
							margin-top: 8px;
						}
						span {
							background: var(--gray);
							display: inline-block;
							padding: 4px 7px;
							font-size: 11px;
							color: var(--white);
							line-height: 1.2;
							letter-spacing: 0;
							@media (max-width: 768px) {
								font-size: 10px;
								padding: 2px 7px;
							}
						}
						time {
							position: relative;
							font-size: 13px;
							line-height: 1.2;
							letter-spacing: 0;
							padding-left: 15px;
							&::before {
								position: absolute;
								content: "";
								top: 2px;
								bottom: 0;
								left: 0;
								margin: auto;
								width: 12px;
								height: 12px;
								background: url("/common/img/icon_time01.webp") no-repeat 0 0 / contain;
							}
						}
					}
				}
			}
		}
	}
	#special {
		position: relative;
		text-align: center;
		background: var(--color);
		margin-inline: calc(50% - 50vw);
		max-width: 100vw;
		padding-inline: calc(50vw - 50%);
		padding-top: 50px;
		padding-bottom: 40px;
		color: var(--white);
		font-size: 15px;
		@media (max-width:768px){
			font-size: 13px;
			padding: 30px 20px;
			padding-top: 30px;
			padding-bottom: 20px;
		}
		.celebrationNewsList {
			display: inline-block;
			margin-top: 20px;
			border-top: 1px dotted var(--lightGray);
			li {
				text-align: left;
				line-height: 1.4;
				border-bottom: 1px dotted var(--lightGray);
				a {
					display: block;
					margin-inline: auto;
					padding: 10px 20px; 
					@media (max-width:768px){
						padding-inline: 0;
					}
					> * {
						display: inline-block;
						@media (max-width:768px){
							display: block;
						}
					}
					i {
						font-style: normal;
						margin-right: 1em;
						@media (max-width:768px){
							margin-bottom: 3px;
							font-size: 12px;
						}
					}
				}
			}
		}
	}
	#about {
		h2 {
			display: flex;
			gap: calc((60 / 1000) * 100vw);
			margin-bottom: 40px;
			@media (max-width: 768px) {
				flex-direction: column;
				gap: 20px;
			}
			em {
				display: block;
				font-family: "Oswald", sans-serif;
				font-weight: 500;
				font-size: 32px;
				i {
					display: block;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: 400; /*Regular*/
					font-size: 16px;
				}
			}
			span {
				display: block;
				font-size: 16px;
			}
		}
		.aboutList {
			display: flex;
			gap: calc((50 / 1000) * 100vw) calc((60 / 1000) * 100vw);
			flex-wrap: wrap;
			@media (max-width: 768px) {
				flex-direction: column;
				gap: 30px;
			}
			> li {
				position: relative;
				width: calc((100% - ((60 / 1000) * 100vw)) / 2);
				counter-increment: count;
				padding-top: 40px;
				@media (max-width: 768px) {
					width: 100%;
				}
				&::before {
					position: absolute;
					display: block;
					top: 0;
					left: 56px;
					line-height: 1;
					margin: auto;
					content: "0" counter(count);
					font-size: 28px;
					font-family: 'Oswald', sans-serif;
					font-weight: 300;
					z-index: 1;
				}
				&::after {
					position: absolute;
					display: block;
					content: "";
					top: 14px;
					left: 0;
					width: 46px;
					height: 1px;
					background: var(--gray);
				}
				h3 {
					display: flex;
					align-items: center;
					margin-bottom: 15px;
					font-size: 27px;
					line-height: 1.3;
					min-height: 80px;
					@media (max-width: 768px) {
						font-size: 20px;
						min-height: auto;
					}
				}
				figure {
					@media (max-width: 768px) {
						width: 100%;
						min-width: calc(100% - (30px * 2));
						width: calc(100% - (30px * 2));
					}
				}
				p {
					margin-top: 15px;
				}
			}
		}
		.bgColor {
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 900px;
			margin-inline: auto;
			background: var(--gray);
			color: var(--white);
			padding: 40px;
			margin-top: calc((60 / 1000) * 100vw);
			gap: 20px;
			@media (max-width: 768px) {
				flex-direction: column;
				padding: 30px 25px 25px 25px;
			}
			h2 {
				display: inline-block;
				font-size: 37px;
				letter-spacing: 0.01em;
				rotate: -3deg;
				line-height: 1.2;
				margin-bottom: 0;
				@media (max-width: 768px) {
					font-size: 29px;
				}
				i {
					display: inline-block;
					background: var(--white);
					color: var(--gray);
					padding: 10px 20px;
					margin-bottom: 10px;
					white-space: nowrap;
					@media (max-width: 768px) {
						padding: 5px 10px;
					}
				}
			}
			p {
				margin-top: 20px;
				font-size: 18px;
				font-weight: 600;
				line-height: 1.6;
				@media (max-width: 768px) {
					margin-top: 10px;
					font-size: 14px;

				}
				+ p {
					margin-top: 10px;
					@media (max-width: 768px) {
						margin-top: 7px;
					}
				}
			}
			.video {
				max-width: 450px;
				video {
					width: 100%;
					border: 10px solid var(--white);
				}
			}
		}
		.program_musicList {
			display: flex;
			gap: 30px;
			margin-top: 100px;
			@media (max-width: 768px) {
				flex-wrap: wrap;
				flex-direction: column;
				gap: 30px;
				margin-top: 40px;
			}
			> li {
				position: relative;
				width: calc((100% - (30px * 1)) / 2);
				@media (max-width: 768px) {
					width: calc(100% - (30px * 2));
					margin-inline: auto;
				}
				figure {
					border: 1px solid var(--border);
				}
				p {
					font-size: 13px;
					margin-top: 15px;
					padding: 0 15px;
					@media (max-width: 768px) {
						padding: 0;
					}
				}
			}
		}
	}
	#venue,
	#flow,
	#blog,
	#campaign {
		h2 {
			text-align: center;
			font-size: 42px;
			font-family: 'Oswald', sans-serif;
			font-weight: 400;
			margin-bottom: 30px;
			@media (max-width: 560px) {
				font-size: 26px;
			}
			i {
				display: block;
				font-size: 13px;
			}
		}
	}
	#venue {
		max-width: 800px;
		margin-inline: auto;
		padding-bottom: 0;
		> div {
			display: flex;
			gap: 30px;
			@media (max-width: 560px) {
				flex-wrap: wrap;
				flex-direction: column;
				gap: 15px;
			}
			figure {
				width: 40%;
				@media (max-width: 560px) {
					width: 30%;
				}
			}
			> div {
				width: 450px;
				padding: 30px 40px;
				text-align: center;
				border: 1px solid var(--border);
				border-radius: 7px;
				@media (max-width: 768px) {
					padding: 20px 20px;
				}
				@media (max-width: 560px) {
					margin-inline: auto;
					width: calc(100% - (15px * 2));
				}
				h3 {
					font-size: 21px;
					@media (max-width: 560px) {
						font-size: 18px;
						margin-bottom: 10px;
					}
				}
				p {
					@media (max-width: 560px) {
						margin-top: 10px;
					}
					&.btn {
						@media (max-width: 560px) {
							margin-top: 15px;
						}
						a {
							font-size: 13px;
							letter-spacing: 0;
							padding-inline: 30px;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
	#flow {
		.flowList {
			display: flex;
			gap: 30px;
			flex-wrap: wrap;
			> li {
				position: relative;
				width: calc((100% - (30px * 3)) / 4);
				counter-increment: count;
				text-align: center;
				padding: 60px 10px 30px 10px;
				background: var(--lightPink);
				border-radius: 7px;
				@media (max-width: 768px) {
					width: calc((100% - (30px * 1)) / 2);
				}
				&::before {
					position: absolute;
					display: block;
					top: 25px;
					left: 0;
					right: 0;
					line-height: 1;
					margin: auto;
					content: "STEP 0" counter(count);
					font-size: 18px;
					font-weight: 300;
					letter-spacing: 0.01em;
					z-index: 1;
				}
				+ li {
					&::after {
						position: absolute;
						display: inline-block;
						content: "";
						top: 0;
						bottom: 0;
						left: -22px;
						margin: auto;
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 12px 0 12px 17.5px;
						border-color: transparent transparent transparent var(--darkBlue);
					}
				}
				&:nth-child(3) {
					@media (max-width: 768px) {
						&::after {
							left: auto;
							bottom: auto;
							top: -24px;
							right: -24px;
							rotate: 135deg;	
						}
					}
				}
				figure {
					
				}
				p {
					margin-top: 10px;
					text-align: center;
					font-size: 16px;
					font-weight: 700;
					line-height: 1.8;
					i {
						display: inline-block;
						background: linear-gradient(transparent 60%, #ff6 60%);

					}
				}
			}
		}
	}
	#blog {
		.blogList {
			display: flex;
			gap: 30px;
			@media (max-width: 768px) {
				flex-wrap: wrap;
				gap: 20px;
			}
			> li {
				width: calc((100% - (30px * 3)) / 4);
				display: flex;
				flex-direction: column;
				@media (max-width: 768px) {
					width: calc((100% - (20px * 1)) / 2);
				}
				figure {
					overflow: hidden;
					aspect-ratio: 16 / 9;
					img {
						height: 100%;
						width: 100%;
					}
				}
				time {
					display: block;
					margin-top: 13px;
					position: relative;
					font-size: 13px;
					line-height: 1.2;
					letter-spacing: 0;
					padding-left: 15px;
					&::before {
						position: absolute;
						content: "";
						top: 2px;
						bottom: 0;
						left: 0;
						margin: auto;
						width: 12px;
						height: 12px;
						background: url("/common/img/icon_time01.webp") no-repeat 0 0 / contain;
					}
				}
				h3 {
					font-size: 15px;
					margin-top: 7px;
					margin-bottom: 7px;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
				p {
					margin-top: 7px;
					font-size: 11px;
					line-height: 1.5;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					letter-spacing: 0.02em;
				}
			}
		}
	}
	#contact {
		margin-inline: calc(50% - 50vw);
		max-width: 100vw;
		padding-inline: calc(50vw - 50%);
		padding-top: 40px;
		padding-bottom: 40px;
		margin-top: 40px;
        /*margin-top: 100px;*/
		background: #8092a0 url("/img/top/bg_footer_contact.webp") 50% 50% / cover;
		text-align: center;
		color: var(--white);
        @media (max-width: 768px) {
            margin-top: 0px;
        }
		h2 {
			font-size: 31px;
			margin-bottom: 28px;
			@media (max-width: 768px) {
			   font-size: 21px; 
				margin-bottom: 15px;
			}
			+ p {
				text-align: center;
				font-weight: 700;
				background: url("/img/top/bg_footer_contact_line.webp") no-repeat 50% 100%;
				background-size: auto 14px;
				padding-bottom: 40px;
				@media (max-width: 768px) {
					padding-bottom: 20px;
					background-size: 280px 8px;
				}
			}
		}
		.contactList {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			gap: calc((60 / 1000) * 100vw);
			max-width: 700px;
			margin-inline: auto;
			@media (max-width: 768px) {
				margin-top: 30px;
				flex-direction: column;
				gap: 30px;
			}
			> li {
				width: calc((100% - ((60 / 1000) * 100vw)) / 2);
				@media (max-width: 768px) {
					width: 100%;
				}
			}
			h3 {
				position: relative;
				display: inline-block;
				padding-inline: 1em;
				line-height: 1;
				margin-bottom: 7px;
				@media (max-width: 768px) {
					margin-bottom: 5px;
				}
				&::before,
				&::after {
					position: absolute;
					display: block;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 1em;
					line-height: 1;
					 font-weight: 700;
				}
				&::before {
					content: "＼";
					left: 0;
				}
				&::after {
					content: "／";
					right: 0;
				}
				i {
					display: inline-block;
					color: var(--yellow);
				}
			}
			.btn {
				margin-top: 7px;
				@media (max-width: 768px) {
					margin-top: 5px;
				}
				a {
					white-space: nowrap;
					width: 300px;
					letter-spacing: 0.01em;
					padding-top: 20px;
					padding-bottom: 20px;
				}
			}
		}
	}
}




/* about */
/* ------------------------------- */
body.about {
	#hero {
		margin-inline: calc(50% - 50vw);
		padding: 0;
	}
	h2 {
		position: relative;
		text-align: center;
		font-size: 34px;
		padding-top: 70px;
		color: var(--richBlack);
		letter-spacing: 0.15em;
		margin-bottom: 30px;
		@media (max-width: 768px) {
			font-size: 24px;
			padding-top: 44px;
			line-height: 1.3;
		}
		b {
			font-size: 64px;
			line-height: 34px;
			@media (max-width: 768px) {
				 font-size: 30px;
				 line-height: 30px;
			}
		}
		i {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			color: var(--bg_lightGray);
			font-size: 134px;
			font-weight: 500;
			font-family: 'Oswald', sans-serif;
			line-height: 1;
			letter-spacing: 0;
			z-index: -1;
			@media (max-width: 768px) {
				font-size: 80px;
			}
		}
	}
	
	#about {
		padding-bottom: 0;
		.aboutIntroduction {
			display: flex;
			align-items: center;
			gap: 40px;
			margin-bottom: 60px;
			@media (max-width: 768px) {
				gap: 10px;
				flex-wrap: wrap;
				flex-direction: column;
				margin-bottom: 40px;
			}
			ul {
				width: 100%;
				@media (max-width: 768px) {
					width: calc(100% - (30px * 2));
				}
				li {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					background: var(--black);
					color: var(--white);
					margin-bottom: 20px;
					height: 60px;
					padding: 0 20px;
					font-size: 23px;
					font-weight: 600;
					white-space: nowrap;
					width: 440px;
					@media (max-width: 1000px) {
						width: calc((440 / 1100) * 100vw);
					}
					@media (max-width: 768px) {
						height: 40px;
						font-size: 18px;
						width: 100%;
					}
					i {
						display: inline-block;
						color: var(--yellow);
					}
					&:nth-child(2) {
						margin-left: 20px;
						@media (max-width: 768px) {
							margin-left: auto;
						}
					}
					&:nth-child(3) {
						margin-left: 40px;
						@media (max-width: 768px) {
							margin-left: auto;
						}
					}
					&::after {
						position: absolute;
						content: "";
						width: 440px;
						height: 60px;
						background: #707070;
						top: -7px;
						left: -6px;
						z-index: -1;
					}
					@media (max-width: 1000px) {
						&::after {
							width: calc((440 / 1100) * 100vw);
						}
					}
					@media (max-width: 768px) {
						&::after {
							height: 40px;
							font-size: 18px;
							width: 100%;
						}
					}
				}
			}
			figure {
				min-width: 440px;
				@media (max-width: 1000px) {
					min-width: calc((440 / 1100) * 100vw);
				}
				@media (max-width: 768px) {
					width: 100%;
					min-width: calc(100% - (30px * 2));
					width: calc(100% - (30px * 2));
				}
			}
		}
		.aboutListContainer {
			position: relative;
			overflow: hidden;
			margin-inline: calc(50% - 50vw);
			max-width: 100vw;
			padding-inline: calc(50vw - 50%);
			background: var(--black);
			&::before,
			&::after {
				position: absolute;
				display: inline-block;
				content: "";
				left: 0;
				width: 0;
				height: 0;
				border-style: solid;
				z-index: 1;
			}
			&::before {
				top: 0;
				border-width: 0 100vw 60px 0;
				border-color: transparent var(--white) transparent transparent ;
			}
			&::after {
				border-width: 0 0 60px 100vw;
				border-color: transparent transparent var(--white) transparent;
				bottom: 0;
			}
		}
		.aboutList {
			position: relative;
			color: var(--white);
			font-weight: 500;
			line-height: 1.8;
			padding-top: 20px;
			margin-top: 60px;
			padding-bottom: 30px;			
			@media (max-width: 1120px) {
				padding-inline: calc(50vw - 50% + 20px);
			}
			@media (max-width: 768px) {
				padding-inline: 0;
				margin-top: 30px;
			}
			
			> li {
				position: relative;
				display: flex;
				gap: 40px;
				padding-top: 50px;
				padding-bottom: 50px;
				counter-increment: count;
				@media (max-width: 1120px) {
					gap: calc((40 / 1100) * 100vw);
				}
				@media (max-width: 768px) {
					flex-wrap: wrap;
					flex-direction: column;
					gap: 15px;
					padding-top: 30px;
					padding-bottom: 30px;
				}
				&:nth-child(even) {
					flex-direction: row-reverse;
					@media (max-width: 768px) {
						flex-direction: column;
					}
					> div {
						padding-left: 0;
						padding-right: 80px;
						@media (max-width: 1120px) {
							padding-right: 70px;
						}
						@media (max-width: 768px) {
							padding-right: 0;
						}
					}
					.point {
						left: auto;
						right: 0;
					}
				}
				&:nth-child(1) {
					@media (max-width: 768px) {
						padding-top: 0;
					}
				}
				&:nth-child(3) {
					padding-bottom: 0;
				}
				> div {
					position: relative;
					padding-left: 80px;
					@media (max-width: 1120px) {
						padding-left: 70px;
					}
					@media (max-width: 768px) {
						padding-left: 0;

					}
					&::before {
						position: absolute;
						display: block;
						content: "";
						line-height: 1;
						background-repeat: no-repeat;
						background-position: 0 0;
						background-size: contain;
						z-index: 3;
					}
				}
				&:nth-child(1) > div::before {
					bottom: -40px; left: -45px;
					width: 160px; height: 190px;
					background-image: url("/img/about/ph_about_icon01.webp");
				}
				@media (max-width: 768px) {
					&:nth-child(1) > div::before {
						width: 90px; height: 106px;
						bottom: auto; left: auto;
						top: -18px; right: -10px;
					}
				}
				&:nth-child(2) > div::before {
					bottom: -40px; left: auto;
					right: -120px;
					width: 150px; height: 226px;
					background-image: url("/img/about/ph_about_icon02.webp");
				}
				@media (max-width: 768px) {
					&:nth-child(2) > div::before {
						width: 80px; height: 120px;
						bottom: auto; left: auto;
						top: -18px; right: -10px;
					}
				}
				&:nth-child(3) > div::before {
					bottom: -40px; left: -60px;
					width: 100px; height: 175px;
					background-image: url("/img/about/ph_about_icon03.webp");
				}
				@media (max-width: 768px) {
					&:nth-child(3) > div::before {
						width: 70px; height: 122px;
						bottom: auto; left: auto;
						top: -18px; right: -10px;
					}
				}
				.point {
					position: absolute;
					display: block;
					top: 0;
					left: 0;
					width: 50px;
					height: 105%;
					background: var(--richBlack);
					color: var(--white);
					-ms-writing-mode: tb-rl;
					writing-mode: vertical-rl;
					text-orientation: sideways;
					display: flex;
					align-items: center;
					padding: 20px 0px;
					font-size: 21px;
					font-weight: 600;
					z-index: 2;
					@media (max-width: 768px) {
						position: relative;
						height: auto;
						-ms-writing-mode: initial;
						writing-mode: initial;
						width: 140px;
						justify-content: center;
						padding: 5px 10px;
						margin-bottom: 16px;
					}
					i {
						display: inline-block;
						color: var(--yellow);
						margin-top: 0.5em;
						line-height: 1;
						@media (max-width: 768px) {
							margin-top: 0;
							margin-left: 0.3em;
						}
					}
				}
				h3 {
					position: relative;
					font-size: 32px;
					margin-bottom: 20px;
					@media (max-width: 1000px) {
						font-size: calc((32 / 1100) * 100vw);
					}
					@media (max-width: 768px) {
						font-size: 24px;
						margin-bottom: 15px;
					}
					span {
						position: relative;
						z-index: 4;
					}
					i {
						display: inline-block;
						color: var(--yellow);
					}
					&::before {
						position: absolute;
						top: -70px;
						left: 0;
						height: 1em;
						line-height: 1;
						content: "0" counter(count);
						color: #5a5959;
						font-size: 223px;
						font-family: "Oswald", sans-serif;
						font-weight: 500;
						z-index: 1;
					}
					@media (max-width: 1000px) {
						 &::before {
							font-size: calc((223 / 1100) * 100vw);
						}
					}
					@media (max-width: 768px) {
						 &::before {
							font-size: 123px;
							top: -80px;						 
							left: auto;
							right: 52px;
						}
					}
				}
				* + p {
					@media (max-width: 768px) {
						margin-top: 15px;
					}
				}
				.text {
					position: relative;
					z-index: 4;
				}
				.link {
					position: relative;
					z-index: 4;
					a {
						color: var(--yellow);
						text-decoration: underline;
						&:hover {
							text-decoration: none;
						}
					}
				}
				figure {
					position: relative;
					z-index: 4;
					min-width: 440px;
					@media (max-width: 1000px) {
						min-width: calc((440 / 1100) * 100vw);
					}
					@media (max-width: 768px) {
						min-width: 0;
						width: calc(100% - (30px * 2));
					}
				}
			}
		}
	}
	#voice {
		padding-top: 0;
		h2 {
			display: flex;
			align-items: flex-end;
			@media (max-width: 768px) {
				margin-bottom: 20px;
			}
			> * {
				display: block;
			}
			em {
				font-size: 154px;
				font-family: 'Oswald', sans-serif;
				font-weight: 500;
				line-height: 1;
				background-image: url("/img/about/ph_about03.webp");
				-webkit-background-clip: text;
				color: transparent;
				filter: grayscale(1);
				letter-spacing: 0;
				@media (max-width: 768px) {
					font-size: 58px;
				}
			}
			span {
				text-align: left;
				font-size: 28px;
				font-weight: 600;
				margin-left: 40px;
				line-height: 1.5;
				letter-spacing: 0.05em;
				@media (max-width: 768px) {
					 font-size: 14px;
					 margin-left: 15px;
				}
			}
		}
		.voiceList {
			display: flex;
			gap: 30px;
			@media (max-width: 768px) {
				flex-wrap: wrap;
				flex-direction: column;
				gap: 20px;
			}
			@media (max-width: 560px) {
				margin-inline: auto;
				width: calc(100% - (15px * 2));
			}
			> li {
				position: relative; 
				padding: 30px;
				border-radius: 10px;
				width: calc((100% - (30px * 2)) / 3);
				background: var(--white);
				box-shadow: 0 0 20px #ddd;
				counter-increment: count;
				@media (max-width: 768px) {
					padding: 15px 15px 10px 15px;
					width: 100%;
				}
				&:nth-child(2) {
					top: 30px;
					@media (max-width: 768px) {
						top: 0;
					}
				}
				&:nth-child(3) {
					top: 60px;
					@media (max-width: 768px) {
						top: 0;
					}
				}
				> * {
					position: relative;
					z-index: 2;
				}
				&::before {
					position: absolute;
					display: block;
					bottom: -6px;
					right: 20px;
					line-height: 1;
					content: "0" counter(count);
					font-size: 134px;
					color: #eeeeee;
					font-family: 'Oswald', sans-serif;
					font-weight: 600;
					z-index: 1;
				}
				@media (max-width: 768px) {
					&::before {
						font-size: 80px;
					}
				}
				h3 {
					position: relative;
					font-size: 23px;
					text-align: center;
					margin-bottom: 10px;
					white-space: nowrap;
					line-height: 1.3;
					@media (max-width: 768px) {
						font-size: 18px;
						text-align: left;
					}
					@media (max-width: 560px) {
						white-space: normal;
					}
					br.spOnly {
					   @media (max-width: 1000px) {
						   display: block; 
						} 
						@media (max-width: 768px) {
							display: none; 
						}
					}
					
					&::before {
						position: relative;
						display: block;
						top: 0;
						left: 0;
						right: 0;
						margin: auto auto 16px;
						line-height: 1;
						text-align: center;
						content: "VOICE0" counter(count);
						color: var(--white);
						font-size: 15px;
						background: var(--color);
						width: 100px;
						padding: 5px 10px;
						font-weight: 500;
						letter-spacing: 0.05em;
					}
					@media (max-width: 768px) {
						&::before {
							width: 90px;
							margin-bottom: 7px;
							margin-left: 0;
							float: left;
							margin-right: 15px;
						}
					}
				}
				figure {
					@media (max-width: 768px) {
						width: 90px;
						float: left;
						margin-top: 5px;
						margin-right: 15px;
						margin-bottom: 5px;
					}
				}
				p {
					font-size: 13px;
					line-height: 1.8;
					letter-spacing: 0.05em;
					@media (max-width: 768px) {
						letter-spacing: 0;
						margin-top: 10px;
					}
					&.age {
						font-size: 16px;
						font-weight: 500;
						margin-top: 20px;
						@media (max-width: 768px) {
							font-size: 14px;
							margin-top: 7px;
							float: right;
						}
					}
				}
			}
		}
	}
	#reason {
		h2 {
			letter-spacing: 0.05em;
			@media (max-width: 768px) {
				padding-top: 24px;
			}
		}
		.reasonList {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			gap: 80px;
			@media (max-width: 768px) {
				gap: 40px;
			}
			> li {
				position: relative;
				display: flex;
				align-items: flex-start;
				gap: 60px;
				counter-increment: count;
				@media (max-width: 768px) {
					flex-wrap: wrap;
					flex-direction: column;
					gap: 20px;
				}
				&:nth-child(odd) {
					padding-right: 80px;
					@media (max-width: 768px) {
						padding-right: 0;
					}
				}
				&:nth-child(even) {
					flex-direction: row-reverse;
					padding-left: 80px;
					@media (max-width: 768px) {
						flex-direction: column;
						padding-left: 0;
					}
				}
				> div {
					position: relative;
					&::before {
						position: absolute;
						display: inline-block;
						top: 0;
						left: 0;
						margin-bottom: 10px;
						line-height: 1;
						text-align: center;
						content: "REASON0" counter(count);
						color: var(--black);
						font-size: 15px;
						background: var(--yellow);
						width: 140px;
						padding: 10px 10px;
						font-weight: 700;
						letter-spacing: 0.01em;
					}
					@media (max-width: 768px) {
						&::before {
							font-size: 14px;
							width: auto;
							padding: 7px 10px;
						}
					}
				}
				h3 {
					display: inline-block;
					font-size: 21px;
					line-height: 1;
					background: var(--richBlack);
					color: var(--white);
					padding: 7px 10px;
					margin-top: 45px;
					margin-bottom: 5px;
					@media (max-width: 768px) {
						font-size: 18px;
						margin-top: 28px;
					}
				}
				figure {
					position: relative;
					display: inline-block;
					z-index: 2;
					min-width: 390px;
					@media (max-width: 1000px) {
						min-width: calc((390 / 1100) * 100vw);
					}
					@media (max-width: 768px) {
						width: calc(100% - (40px * 2));
						img {
							width: 100%;
						}
					}
					&::before {
						position: absolute;
						content: "";
						display: block;
						bottom: -14px;
						left: -14px;
						width: 130px;
						height: 90px;
						background: var(--richBlack);
						z-index: -1;
					}
					@media (max-width: 768px) {
						&::before {
							bottom: -10px;
							left: -10px;
						}
					}
					&::after {
						position: absolute;
						content: "";
						display: block;
						top: -14px;
						right: -14px;
						width: 130px;
						height: 90px;
						background: var(--yellow);
						z-index: -1;
					}
					@media (max-width: 768px) {
						&::after {
							top: -10px;
							right: -10px;
						}
					}
				}
				p {
					 margin-top: 7px;
					@media (max-width: 768px) {
						margin-top: 5px;
					}
				}
			}
		}
	}
	#program {
		position: relative;
		background: var(--black);
		color: var(--white);
		margin-inline: calc(50% - 50vw);
		max-width: 100vw;
		padding-inline: calc(50vw - 50%);
		margin-top: 80px;
		@media (max-width: 1120px) {
			padding-inline: calc(50vw - 50% + 30px);
		}
		@media (max-width: 768px) {
			padding-inline: calc(50vw - 50%);
			margin-top: 120px;
			padding-top: 10px;
		}
		&::before,
		&::after {
			position: absolute;
			display: inline-block;
			content: "";
			left: 0;
			width: 0;
			height: 0;
			border-style: solid;
			z-index: 1;
		}
		&::before {
			top: -60px;
			border-width: 60px 0 0 100vw;
			border-color: transparent transparent transparent var(--black);
		}
		&::after {
			border-width: 0 0 60px 100vw;
			border-color: transparent transparent var(--white) transparent;
			bottom: 0;
		}
		h2 {
			position: absolute;
			top: -80px;
			left: 0;
			right: 0;
			margin-inline: auto;
			text-align: center;
			padding-top: 0;
			z-index: 1;
			em {
				font-size: 84px;
				font-family: 'Oswald', sans-serif;
				font-weight: 500;
				line-height: 1;
				background-clip: text;
				-webkit-background-clip: text;
				background-image: url("/img/about/ph_reason01.webp");
				color: transparent;
				filter: grayscale(1);
				background-position: 50% 0%;
				letter-spacing: 0;
				@media (max-width: 768px) {
					font-size: 54px;
				}
			}
			span {
				display: block;
				font-size: 26px;
				font-weight: 600;
				letter-spacing: 0.05em;
				color: var(--yellow);
				margin-top: 10px;
				@media (max-width: 768px) {
					
				}
			}
			+ p {
				text-align: center;
				@media (max-width: 560px) {
					text-align: left;		
				}
			}
		}
		.programList {
			
		}
		#programSliderWrapper {
			margin-top: 20px;
			position: relative;
			@media (max-width: 768px) {
				margin-inline: -20px;
			}
		}
		#programSlider {
			overflow: hidden;
			margin-inline: auto;
		}
		.c-swiper-control {
			position: absolute;
			top: 50%;
			display: flex;
			margin-top: -23px;
			width: 100%;
			height: 46px;
			@media (max-width: 768px) {
				margin-top: -18px;
				height: 36px;
			}
		}
		.c-swiper-button {

		}	
		.swiper-button-prev,
		.swiper-button-next {
			position: absolute;
			top: 0;
			display: grid;
			place-content: center;
			background: var(--lightGray);
			width: 46px;
			height: 46px;
			border-radius: 50%;
			margin-top: 0 !important;
			transition: .3s;
			z-index: 1;
			@media (max-width: 768px) {
				background: var(--white);
				width: 36px;
				height: 36px;
			}		
			&::after {
				display: inline-block;
				content: "";
				width: 12px;
				height: 12px;
				border-top: 1px solid var(--black);
				border-right: 1px solid var(--black);
				transition: .3s;			
			}
			@media (max-width: 768px) {
				&::after {
					width: 8px;
					height: 8px;
				}
			}	
			@media (any-hover: hover) {
				&:hover {
					background: var(--white);			
				}
			}
			@media (any-hover: none) {
				&:active {
					background: var(--white);
				}
			}
		}	
		.swiper-button-prev {
			left: -60px;
			@media (max-width: 1080px) {
				left: -23px;
			}
			@media (max-width: 768px) {
				left: 0;
			}
			&::after {
				margin-left: 3px;
				transform: rotate(-135deg);
			}
		}
		.swiper-button-next {
			right: -60px;
			@media (max-width: 1080px) {
				right: -23px;
			}
			@media (max-width: 768px) {
				right: 0;
			}
			&::after {
				margin-right: 3px;
				rotate: 45deg;
			}
		}
	}
	#music {
		h2 {
			@media (max-width: 768px) {
				padding-top: 24px;
			}
			+ p {
				text-align: center;
				@media (max-width: 560px) {
					text-align: left;		
				}
			}
		}
		.musicList {
			margin-top: 35px;
			@media (max-width: 560px) {
				margin-top: 20px;
				margin-inline: auto;
				width: calc(100% - (15px * 2));
			}
			display: flex;
			gap: 20px;
			@media (max-width: 768px) {
				gap: 10px;
			}
			@media (max-width: 560px) {
				flex-wrap: wrap;	
			}
			> li {
				width: calc((100% - (20px * 2)) / 3);
				background: var(--bg_lightGray);
				padding: 20px 30px;
				border-radius: 10px;
				@media (max-width: 768px) {
					width: calc((100% - (10px * 2)) / 3);
					padding: 10px 20px 15px 20px;
				}
				@media (max-width: 560px) {
					width:100%;	
				}
				h3 {
					display: inline;
					font-size: 18px;
					margin-bottom: 10px;
					letter-spacing: 0.01em;
					background-image: linear-gradient(rgba(255, 255, 255, 0) 50%, var(--yellow) 50%);
					@media (max-width: 768px) {
						font-size: 16px;
					}
				}
				dl {
					margin-top: 10px;
					letter-spacing: 0.01em;
					display: flex;
					gap: 10px 10px;
					flex-wrap: wrap;
					width: 100%;
					dt,dd {
						padding: 5px 0;
						line-height: 1;
					}
					dt {
						text-align: center;
						width: 5.5em;
						background: var(--black);
						color: var(--white);
					}
					dd {
						width: calc(100% - 5.5em - 10px);
					}
				}
			}
		}
	}
	#charm {
		margin-inline: calc(50% - 50vw);
		max-width: 100vw;
		padding-inline: calc(50vw - 50%);
		background: url("/img/about/bg_charm01.webp") no-repeat 50% 0;
		background-size: 100% auto;
		@media (max-width: 560px) {
			padding-top: 0;
			margin-top: 30px;
		}
		h2 {
			display: flex;
			align-items: flex-end;
			@media (max-width: 768px) {
				margin-bottom: 20px;
				padding-top: 30px;
			}
			> * {
				display: block;
			}
			em {
				font-size: 84px;
				font-family: 'Oswald', sans-serif;
				font-weight: 500;
				line-height: 1;
				color: var(--bg_lightGray);
				letter-spacing: 0;
				@media (max-width: 768px) {
					font-size: 54px;
				}
			}
			span {
				text-align: left;
				font-size: 26px;
				font-weight: 600;
				margin-left: 40px;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: var(--yellow);
				@media (max-width: 768px) {
					 font-size: 14px;
					 margin-left: 15px;
				}
			}
		}
		.charmList {
			display: flex;
			gap: 35px;
			margin-top: 70px;
			@media (max-width: 768px) {
				flex-wrap: wrap;
				gap: 20px;
			}
			@media (max-width: 560px) {
				margin-top: 20px;
				margin-inline: auto;
				width: calc(100% - (15px * 2));
			}
			> li {
				position: relative;
				width: calc((100% - (35px * 2)) / 3);
				background: var(--white);
				box-shadow: 0 0 20px #999;
				padding: 50px 30px 30px;
				border-radius: 10px;
				position: relative;
				counter-increment: count;
				@media (max-width: 768px) {
					width: 100%;
					padding: 15px 20px;
					box-shadow: 0 0 10px #999;
				}
				&::before {
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: -30px;
					left: 0;
					right: 0;
					margin: auto;
					line-height: 1;
					content: "0" counter(count);
					color: var(--white);
					font-size: 29px;
					font-weight: 700;
					letter-spacing: 0;
					background: var(--richBlack);
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
				@media (max-width: 768px) {
					&::before {
						top: 13px;
						left: 15px;
						right: auto;
						font-size: 14px;
						width: 32px;
						height: 32px;
					}
				}
				h3 {
					text-align: center;
					font-size: 18px;
					@media (max-width: 560px) {
						font-size: 16px;
					}
				}
				figure {
					img {
						@media (max-width: 560px) {
							max-width: 160px;
						}
					}
					
				}
				p {
					margin-top: 5px;
				}
				.indent {
					font-size: 90%;
				}
			}
		}
	}
	#venue {
		max-width: 800px;
		margin-inline: auto;
		padding-bottom: 0;
		h2 {
			font-size: 34px;
			letter-spacing: 0.05em;
			padding-top: 45px;
			@media (max-width: 768px) {
		   		font-size: 24px;
			}
			@media (max-width: 560px) {
				margin-bottom: 20px;
			}
			i {
				font-size: 84px;
				letter-spacing: 0.075em;
				@media (max-width: 768px) {
					font-size: 54px;
				}
			}
		}
		> div {
			display: flex;
			gap: 30px;
			@media (max-width: 560px) {
				flex-wrap: wrap;
				flex-direction: column;
				gap: 15px;
			}
			figure {
				width: 40%;
				@media (max-width: 560px) {
					width: 30%;
				}
			}
			> div {
				width: 450px;
				padding: 30px 40px;
				text-align: center;
				border: 1px solid var(--border);
				border-radius: 7px;
				@media (max-width: 768px) {
					padding: 20px 20px;
				}
				@media (max-width: 560px) {
					margin-inline: auto;
					width: calc(100% - (15px * 2));
				}
				h3 {
					font-size: 21px;
					@media (max-width: 560px) {
						font-size: 18px;
						margin-bottom: 10px;
					}
				}
				p {
					@media (max-width: 560px) {
						margin-top: 10px;
					}
					&.btn {
						@media (max-width: 560px) {
							margin-top: 15px;
						}
						a {
							font-size: 13px;
							letter-spacing: 0;
							padding-inline: 30px;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
	#faq {
		max-width: 800px;
		margin-inline: auto;
		padding-top: 0;
		h2 {
			font-size: 21px;
			margin-bottom: 40px;
			letter-spacing: 0.05em;
			@media (max-width: 768px) {
				font-size: 18px;
				margin-bottom: 20px;
			}
		}
	}
	#history {
		position: relative;
		background: var(--black);
		color: var(--white);
		margin-inline: calc(50% - 50vw);
		max-width: 100vw;
		padding-inline: calc(50vw - 50%);
		margin-top: 100px;
		&::before {
			position: absolute;
			display: inline-block;
			content: "";
			left: 0;
			width: 0;
			height: 0;
			border-style: solid;
			z-index: 1;
		
			top: -60px;
			border-width:  0 0 60px 100vw;
			border-color: transparent transparent var(--black) transparent ;
		}
		h2 {
			position: relative;
			top: -150px;
			left: 0;
			padding-top: 0;
			margin-bottom: -90px;
			z-index: 1;
			text-align: left;
			font-size: 154px;
			font-family: 'Oswald', sans-serif;
			font-weight: 500;
			line-height: 1;
			background-image: url("/img/about/ph_about01.webp");
			-webkit-background-clip: text;
			color: transparent;
			filter: grayscale(1);
			letter-spacing: 0;
			@media (max-width: 768px) {
				font-size: 58px;
				top: -110px;
				margin-bottom: -80px;
			}
		}
		.historyList {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			gap: 60px;
			@media (max-width: 768px) {
				gap: 30px;
			}
			> li {
				position: relative;
				/*
				display: flex;
				align-items: flex-start;
				gap: 60px;
				*/
				counter-increment: count;
				/*
				@media (max-width: 1000px) {
					gap: calc((60 / 1100) * 100vw);
				}
				@media (max-width: 768px) {
					flex-wrap: wrap;
					flex-direction: column;
					gap: 20px;
				}
				*/
				@media (max-width: 560px) {
					text-align: center;
				}
				&:nth-child(even) {
					/*
					flex-direction: row-reverse;
					@media (max-width: 768px) {
						flex-direction: column;
					}
					*/
					figure {
						float: right;
						margin-right: auto;
						margin-left: 30px;
						@media (max-width: 768px) {
							margin-left: 15px;
						}
						@media (max-width: 560px) {
							float: none;
							margin-left: auto;
						}
					}
				}
				h3 {
					font-size: 26px;
					line-height: 1.8;
					@media (max-width: 768px) {
						font-size: 22px;
					}
					i {
						color: var(--yellow);
					}
				}
				p {
					@media (max-width: 768px) {
						margin-top: 10px;
					}
				}
				figure {
					position: relative;
					display: inline-block;
					z-index: 2;
					width: 450px;
					margin-right: 30px;
					margin-bottom: 30px;
					float: left;
					@media (max-width: 1000px) {
						width: calc((450 / 1100) * 100vw);
					}
					@media (max-width: 768px) {
						margin-right: 15px;
						margin-bottom: 15px;
					}
					@media (max-width: 560px) {
						float: none;
						margin-inline: auto;
						margin-bottom: 15px;
						width: calc(100% - (30px * 2));

					}
				}
			}
		}
	}
	#movie {
		position: relative;
		background: var(--black);
		color: var(--white);
		margin-inline: calc(50% - 50vw);
		max-width: 100vw;
		padding-inline: calc(50vw - 50%);
		&::before,
		&::after {
			position: absolute;
			display: inline-block;
			content: "";
			left: 0;
			width: 0;
			bottom: 0;
			z-index: 1;
		}
		&::before {
			bottom: 0;
			width: 100%;
			height: 300px;
			background: var(--white);
		}
		@media (max-width: 768px) {
			&::before {
				height: 100px;
			}
		}
		&::after {
			border-style: solid;
			border-width: 60px 0 0 100vw;
			border-color: transparent transparent transparent var(--white);
			bottom: 300px;
		}
		@media (max-width: 768px) {
			&::after {
				bottom: 100px;
			}
		}
		h2 {
			color: var(--white);
			z-index: 1;
			i {
				color: #4f4f4f;
				z-index: -1;
			}
		}
		p {
			text-align: center;
			@media (max-width: 768px) {
				text-align: left;
			}
		}
		.video {
			* + & {
				margin-top: 30px;
			} 
			position: relative;
			width: 100%;
			overflow: hidden;
			max-width: 800px;
			margin-inline: auto;
			z-index: 2;
			video {
				width: 100%;
				height: 100%;
			}
			@media (max-width: 768px) {
				width: calc(100% - (30px * 2));
			}
		}
	}
}



/* faq */
/* ------------------------------- */
body.faq {
	
}
.faqList {
	border-bottom: 2px solid var(--lightGray);
	> div {
		counter-increment: count;
		border-top: 2px solid var(--lightGray);
		&.open {
			dt {
				&::after {
					rotate: -45deg;
				}
			}
			dd {
				visibility: visible;
				opacity: 1;
				height: auto;
				padding-top: 20px;
				padding-bottom: 20px;
			}
		}
	}
	dt,dd {
		position: relative;
		transition: .3s;
		padding-inline: 76px;
		background: var(--white);
		@media (max-width: 768px) {
			padding-left: 46px;
			padding-right: 30px;
		}
		&::before {
			position: absolute;
			display: block;
			top: 14px;
			left: 0;
			width: 36px;
			height: 36px;
			text-align: center;
			line-height: 36px;
			margin: auto;
			border-radius: 50%;
			font-weight: 600;
			letter-spacing: 0;
		}
		@media (max-width: 768px) {
			&::before {
				top: 12px;
			}
		}
	}
	dt {
		padding-top: 20px;
		padding-bottom: 20px;
		cursor: pointer;
		pointer-events: all;
		&::before {
			content: "Q" counter(count);
			background: var(--bg_lightGray);
		}
		&::after {
			position: absolute;
			content: "";
			display: block;
			top: 0;
			bottom: 0;
			right: 25px;
			width: 8px;
			height: 8px;
			margin: auto;
			border-top: 1.5px solid var(--color);
			border-right: 1.5px solid var(--color);
			rotate: 135deg;
			transition: .3s;
		}
		@media (max-width: 768px) {
			&::after {
				right: 10px;
			}
		}
	}
	dd {
		visibility: hidden;
		opacity: 0; 
		height: 0;
		@media (max-width: 768px) {
			padding-right: 0;
		}
		&::before {
			content: "A" counter(count);
			background: var(--gray);
			color: var(--white);
		}
	}
}


/* music_list */
/* ------------------------------- */
body.music_list {
	.musicList {
		li {
			+ li {
				margin-top: 75px;
				@media (max-width: 560px) {
					margin-top: 50px;
				}
			}
		}
		.ttl_music_list {
			background: url("/img/music_list/ttl_music_list.svg") no-repeat 0 0;
			background-size: 50px 50px;
			padding-left: 60px;
			height: 50px;
			font-size: 18px;
			font-weight: 700;
			letter-spacing: .01em;
			margin-bottom: 40px;
			@media (max-width: 560px) {
				background-size: 40px 40px;
				padding-left: 50px;
				height: 40px;
				font-size: 16px;
				margin-bottom: 20px;
			}
			i {
				display: block;
				font-size: 14px;
				font-weight: 400;
				@media (max-width: 560px) {
					font-size: 12px;
				}
			}
		}
		figure {
			@media (max-width: 560px) {
				margin-inline: -20px;
				width: 100vw;
				max-width: 100vw;
			}
		}
	}
}

/* program_list */
/* ------------------------------- */
body.program_list {
	.programTable {
		tr {
			border-top: 2px solid var(--lightGray);
		}
        tr.dot {
			border-top: 1px dotted var(--lightGray);
		}
		th,td {
			padding: 20px 10px;
			vertical-align: top;
			text-align: left;
			@media (max-width: 560px) {
				display: block;
				padding-top: 10px;
				padding-bottom: 10px;
			}
		}
		th {
			font-weight: 700; /*Bold*/
			letter-spacing: .01em;
			white-space: nowrap;
			@media (max-width: 560px) {
			}
			br {
				@media (max-width: 560px) {
					display: none;
				}
			}
		}
		td {
			@media (max-width: 560px) {
				border-top: 1px solid var(--border);
				padding-top: 15px;
				padding-bottom: 20px;
			}
		}
	}
}



/* contact */
/* ------------------------------- */
body.contact {
	.contactList {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
		@media (max-width: 768px) {
			gap: 20px;
		}
		> li {
			width: calc((100% - (40px * 1)) / 2);
			border: 1px solid var(--border);
			border-radius: 7px;
			padding: 25px;
			@media (max-width: 768px) {
				width: calc((100% - (20px * 1)) / 2);
				padding: 20px;
			}
			@media (max-width: 560px) {
				width: 100%;
			}
			> div {
				display: flex;
				gap: 20px;
				@media (max-width: 900px) {
					flex-wrap: wrap;
					flex-direction: column;
				}
				@media (max-width: 768px) {
					gap: 15px;
				}
			}
		}
		.ttl {
			width: 100%;
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 20px;
			@media (max-width: 768px) {
				font-size: 18px;
			}
			@media (max-width: 560px) {
				text-align: center;
			}
		}
		figure {
			min-width: 120px;
			img {
				border: 5px solid var(--yellow);
			}	
		}
		p {
			font-size: 14px;
			@media (max-width: 560px) {
				font-size: 13px;
			}
			+ p {
				margin-top: 20px;
			}
			&.btn {
				a {
					font-size: 12px;
					line-height: 1.3;
					@media (max-width: 768px) {
						width: auto;
					}
					br {
						&.spOnly {
							@media (max-width: 560px) {
								display: none;
							}
						}
					}
				}
				+ p {
					margin-top: 30px;
				}
			}
		}
	}
}

/* flow */
/* ------------------------------- */
body.teach{
	.columnList {
		> li {
			display: flex;
			align-items: flex-start;
			gap: 40px;
			@media (max-width: 768px) {
				flex-wrap: wrap;
				gap: 20px;
			}
			+ li {
				margin-top: 40px;
			}
			&:nth-child(even) {
				flex-direction: row-reverse;
			}
			div {
				width: calc(100% - 400px - 40px);
				@media (max-width: 768px) {
					width: 100%;
				}
			}
			figure,.video {
				width: 400px;
				max-width: 400px;
				margin-inline: auto;
				@media (max-width: 768px) {
					width: 100%;
					min-width: calc(100% - (30px * 2));
					width: calc(100% - (30px * 2));	
				}
			}
			.video {
				position: relative;
				video {
					width: 100%;
					height: 100%;
				}
			}
			h2 {
			    font-size: 21px;
			    @media (max-width: 560px) {
					font-size: 18px;
					margin-bottom: 10px;
				}
			}
			p {
				margin-top: 20px;
				@media (max-width: 560px) {
					margin-top: 10px;
				}
			}
		}
	}
	.border {
		.btn {
			margin-top: 20px;
			a {
				width: 80%;
				font-size: 90%;
			}
		}
	}
	#feature,#support,#faq {
		h2 {
			text-align: center;
			margin-bottom: 40px;
			@media (max-width: 560px) {
				margin-bottom: 20px;
			}
			+ p {
				text-align: center;
				@media (max-width: 560px) {
					text-align: left;
				}
				br {
					@media (max-width: 560px) {
						display: none;
					}
				}
			}
		}
	}
	.featureList {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		@media (max-width: 560px) {
			gap: 15px;
		}
		> li {
			text-align: center;
			width: calc((100% - (20px * 1)) / 2);
			border: 1px solid var(--border);
			padding: 20px;
			@media (max-width: 560px) {
				width: 100%;
				padding: 15px;
			}
			h3 {
				margin-bottom: 20px;
				@media (max-width: 560px) {
					margin-bottom: 10px;
				}
			}
			p {
				margin-top: 20px;
				@media (max-width: 560px) {
					margin-top: 10px;
				}
			}
		}
	}
	.suppoetList {
		* + & {
			margin-top: 60px;
			@media (max-width: 768px) {
				margin-top: 30px;
			}
		}
		> li {
			display: flex;
			align-items: flex-start;
			gap: 40px;
			counter-increment: count;
			@media (max-width: 768px) {
				flex-wrap: wrap;
				gap: 15px;
			}
			+ li {
				margin-top: 60px;
				@media (max-width: 560px) {
					margin-top: 40px;
				}
			}
			&:nth-child(even) {
				flex-direction: row-reverse;
			}
			div {
				width: calc(100% - 400px - 40px);
				@media (max-width: 768px) {
					width: 100%;
				}
			}
			figure {
				width: 400px;
				max-width: 400px;
				margin-inline: auto;
				@media (max-width: 768px) {
					width: 100%;
					min-width: calc(100% - (30px * 2));
					width: calc(100% - (30px * 2));	
				}
				img {
				}
			}
			h3 {
				position: relative;
				font-size: 21px;
				margin-bottom: 15px;
				padding-top: 20px;
				@media (max-width: 560px) {
					font-size: 18px;
				}
				&::before {
					position: absolute;
					top: 0;
					left: 30px;
					margin: auto;
					line-height: 1;
					content: "SUPPORT 0" counter(count);
					color: var(--darkPink);
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0.01em;
				}
				&::after {
					position: absolute;
					content: "";
					top: 6px;
					left: 0;
					margin: auto;
					line-height: 1;
					height: 1px;
					width: 15px;
					background: var(--darkPink);
				}
			}
			p {
				margin-top: 15px;
			}
		}
	}
}		

/* flow */
/* ------------------------------- */
body.flow {
	.anchorList {
		display: flex;
		flex-wrap: wrap;
		gap: 13px;
		li {
			width: calc((100% - (13px * 4)) / 5);
			text-align: center;
			border: 1px solid var(--border);
			border-radius: 7px;
			padding: 7px 7px 10px 7px;
			@media (max-width: 768px) {
				width: calc((100% - (13px * 2)) / 3);
			}
			@media (max-width: 560px) {
				width: calc((100% - (13px * 1)) / 2);
			}
			figure {
				border-radius: 5px 0 0 5px;
				overflow: hidden;	
			}
			.ttl {
				font-size: 14px;
				line-height: 1.3;
				margin-top: 10px;
				@media (max-width: 560px) {
					margin-top: 7px;
				}	
			}
		}
	}
}

.stepList {
	margin-top: 100px;
	@media (max-width: 560px) {
		margin-top: 70px;
	}
	> li {
		position: relative;
		counter-increment: count;
		display: flex;
		gap: 40px;
		border: 1px solid var(--border);
		border-radius: 7px;
		padding: 40px;
		@media (max-width: 560px) {
			flex-wrap: wrap;
			flex-direction: column-reverse;
			gap: 18px;
			padding: 20px;
		}
		+ li {
			margin-top: 90px;
			@media (max-width: 560px) {
				margin-top: 70px;
			}
		}
		&::after {
			position: absolute;
			top: -40px;
			left: 0;
			height: 1em;
			line-height: 1;
			content: "STEP" counter(count);
			color: var(--darkPink);
			font-size: 27px;
			font-family: "Oswald", sans-serif;
			font-weight: 500;
		}
		p {
			font-size: 14px;
			@media (max-width: 560px) {
				font-size: 13px;
			}
			+ p {
				margin-top: 10px;
			}
			&.btn {
				margin-top: 20px;
				a {
					width: auto;
					max-width: 290px;
					margin-left: 0;
					@media (max-width: 560px) {
						margin-left: auto;
					}
				}
			}
			i {
				background: var(--pink);
			}
		}
		figure {
			margin-right: 0;
			@media (max-width: 560px) {
				margin-right: auto;
				min-width: calc(100% - (80px * 2));
				width: calc(100% - (80px * 2));
			}
			img {
				min-width: 260px;
				@media (max-width: 560px) {
					min-width: 0px;
				}
			}
		}
	}
}


/* application */
/* ------------------------------- */
body.application {
	#vnft {
		.subHead {
			font-size: 42px;
			margin-bottom: 10px;
			@media (max-width: 560px) {
				font-size: 32px;
			}
		}
		.text {
			text-align: center;
			font-size: 24px;
			font-weight: 700;
			margin-bottom: 50px;
			@media (max-width: 560px) {
				font-size: 16px;
				text-align: left;
				margin-bottom: 30px;
			}
			br {
				@media (max-width: 560px) {
					display: none;
				}
			}
		   
		}
		.ttl {
			text-align: center;
			@media (max-width: 560px) {
				text-align: left;
			}
		}
		div {
			margin-top: 20px;
			background: var(--pink);
			padding: 40px;
			@media (max-width: 560px) {
				padding: 30px 20px;
			}
			.indent {
				li {
					font-size: 16px;
					@media (max-width: 560px) {
						font-size: 14px;
					}
					+ li {
						margin-top: 15px;
						@media (max-width: 560px) {
							margin-top: 10px;
						}
					}
				}
			}
		}
	}
}


.border {
	margin-top: 70px;
	border: 1px solid var(--border);
	border-radius: 7px;
	padding: 40px;
	@media (max-width: 560px) {
		margin-top: 40px;
		padding: 20px;
	}
	.ttl {
		text-align: center;
		margin-bottom: 20px;
	}
	> div {
		display: flex;
		gap: 20px;
		@media (max-width: 560px) {
			flex-wrap: wrap;
			flex-direction: column;
		}
		figure {
			img {
				min-width: 300px;
				@media (max-width: 768px) {
					min-width: 200px;
				}
			}
		}
	}
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, 0.6);
	opacity: 0;
	padding: 60px;
	scale: 0;
	z-index: 200;
	@media (max-width: 560px) {
		padding: 34px;		
	}
	&:target {
		opacity: 1;
		transition: opacity 0.5s;
		scale: 1;
		/* モーダルがターゲットされたときに .modal-wrapper を表示 */
		.modal-wrapper {
			opacity: 1;
		}
	}
	/* 背景クリックでモーダルを閉じる */
	.modal-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
		/* 背景がクリック可能であることを明示 */
	}
	.modal-wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 0;
		width: 100%;
		max-width: 750px;
		max-height: 90%;
		margin: auto;
		background-color: var(--white);
		border-radius: 10px;
		opacity: 0;
		transition: .5s;
		z-index: 210;
		@media (max-width: 560px) {
			max-height: 70%;
		}
		.modal-content-wrapper {
			flex: 1;
			overflow-y: auto;
			padding: 70px 60px;
			@media (max-width: 560px) {
				padding: 32px 28px 32px;
			}
		}
		.btnClose {
			position: sticky;
			top: 0;
			right: 0;
			text-align: right;
			height: 0;
			.close {
				position: relative;
				top: -48px;
				right: 15px;
				font-family: "Noto Sans JP", sans-serif;
				font-weight: 700; 
				font-size: 36px;
				color: var(--white);
				line-height: 1;
				text-decoration: none;
				cursor: pointer;
				@media (max-width: 560px) {
					top: -42px;
					right: 10px;
				}
			}
		}
		.modal-content {
			.ttl {
				@media (max-width: 560px) {
					text-align: left;
				}
			}
			.table {
				th,td {
					padding: 16px;
					border: 1px solid var(--border);
					@media (max-width: 560px) {
						padding: 10px;
					}
				}
				th {
					background: var(--gray);
					color: var(--white);
					white-space: nowrap;
				}
			}
		}
	}
}

/* schedule */
/* ------------------------------- */
body.schedule {
	.scheduleList {
		margin-top: 40px;
		li {
			background: var(--bg_lightGray);
			padding: 30px 40px;
			@media (max-width: 560px) {
				padding: 20px 20px;
			}
			+ li {
				margin-top: 20px;
			}
			.ttl {
				position: relative;
				display: inline-block;
				&.new {
					&::after {
						position: absolute;
						top: 1px;
						left: -120px;
						display: inline-block;
						content: "NEW";
						font-family: "Oswald", sans-serif;
						font-weight: 500;
						color: var(--red);
					}
					@media (max-width: 560px) {
						&::after {
							left: -110px;
						}
					}
				}	
			}
			.planeTable {
				width: auto;
				margin-inline: auto;
			}
		}
	}
	#programSchedule {
		text-align: center;
		.indent {
			display: inline-block;
			margin-inline: auto;
		}
	}
}

.planeTable {
	text-align: left;
	border-top: 1px solid var(--lightGray);
	th,td {
		padding: 10px 5px;
		vertical-align: bottom;
		border-bottom: 1px solid var(--lightGray);
		line-height: 1.5;
		@media (max-width: 560px) {
			padding: 7px 5px;
		}
	}
}


/* news */
/* ------------------------------- */
body.news,
body.blog {
	article {
		max-width: 640px;
		margin-inline: auto;
        margin-bottom: 40px;
		h1 {
			font-size: 21px;
			@media (max-width: 560px) {
				font-size: 17px;
			}
		}
		h2 {
			font-size: 21px;
			@media (max-width: 560px) {
				font-size: 18px;
			}
			* + & {
				margin-top: 40px;
				@media (max-width: 560px) {
					margin-top: 30px;
				}
			}
		}
		h3 {
			position: relative;
			font-size: 18px;
		    border-left: 5px solid var(--gray);
			padding-left: 14px;
			@media (max-width: 560px) {
				font-size: 15px;
			}
			* + & {
				margin-top: 40px;
				@media (max-width: 560px) {
					margin-top: 30px;
				}
			}
		}
		h4 {
			position: relative;
			font-size: 18px;
			padding-left: 1em;
			@media (max-width: 560px) {
				font-size: 15px;
			}
			* + & {
				margin-top: 40px;
				@media (max-width: 560px) {
					margin-top: 30px;
				}
			}
			&::before {
				content: "";
				display: block;
				width: 10px;
				height: 10px;
				background: var(--gray);
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;
			}
		}
		> * + * {
			margin-top: 20px;
			@media (max-width: 560px) {
				margin-top: 15px;
			}
		}
		a {
			color: var(--link);
			text-decoration: underline;
			&:hover {
				text-decoration: none;
			}
		}
		.video {
			position: relative;
			width: 100%;
			position: relative;
			overflow: hidden;
			margin-inline: auto;
			z-index: 2;
			margin-top: 30px;
			margin-bottom: 30px;
			video {
				width: 100%;
				height: 100%;
			}
			@media (max-width: 768px) {
				width: calc(100% - (30px * 2));
			}
		}
	}
	.thumbnailList01,.thumbnailList02,.thumbnailList03 {
		display: flex;
		gap: 5px;
	}
	.thumbnailList01 li {
		width: 100%;
	}
	.thumbnailList02 li {
		width: calc((100% - (5px * 1)) / 2);
	}
	.thumbnailList03 li {
		width: calc((100% - (5px * 2)) / 3);
	}
	
	table {
		th,td {
			padding: 5px 10px;
			border: solid 1px var(--border);
			@media (max-width: 768px) {
				padding: 3px 7px;
				font-size: 13px;
				line-height: 1.3;
			}
		}
		th {
			text-align: center;
			background: var(--gray);
			color: var(--white);
			vertical-align: top;
		}
		td {
			
		}
	}
	
	.profileList {
		> li {
			display: flex;
			width: 100%;
			gap: 30px;
			@media (max-width: 560px) {
				flex-direction: column;
				flex-wrap: wrap;
			}
			+ li {
				margin-top: 60px;
			}
			figure {
				width: 254px;
				@media (max-width: 560px) {
					width: calc(100% - (30px * 2));
				}
			}
			div {
				width: calc(100% - 254px - 30px);
				@media (max-width: 560px) {
					width: 100%;
				}
				h2,h3 {
					+ p {
						@media (max-width: 560px) {
							margin-top: 15px;
						}
					}
				}
			}
		}
	}
	
	section#sns {
		.subNavList {
			display: flex;
			justify-content: center;
			gap: 20px;
		}
	}
}

/* blog */
/* ------------------------------- */
#blogContainer {
	display: flex;
	gap: 40px;
	@media (max-width: 560px) {
	    flex-direction: column-reverse;
	}
	h2 {
	    font-size: 19px;
	    white-space: nowrap;
	    @media (max-width: 560px) {
		   font-size: 18px;
	    }
	}
	aside {
		.asideList {
			margin-top: 20px;
			li {
				a {
					display: block;
					position: relative;
					border-bottom: 1px solid var(--border);
					padding: 7px 10px;
					&::after {
						position: absolute;
						content: "";
						display: block;
						top: 0;
						bottom: 0;
						right: 15px;
						width: 8px;
						height: 8px;
						margin: auto;
						border-top: 1.5px solid var(--lightGray);
						border-right: 1.5px solid var(--lightGray);
						rotate: 45deg;
						transition: .3s;
					}
				}
			}
		}
	}
	> div {
		
	}
	.blogIndexList {
		margin-top: 20px;
		display: flex;
		gap: 40px 30px;
		flex-wrap: wrap;
		@media (max-width: 768px) {
			flex-wrap: wrap;
			gap: 20px 15px;
		}
		> li {
			width: calc((100% - (30px * 1)) / 2);
			@media (max-width: 768px) {
				width: calc((100% - (15px * 1)) / 2);
			}
			figure {
				overflow: hidden;
				aspect-ratio: 16 / 9;
				img {
					height: 100%;
					width: 100%;
				}
			}
			h3 {
				font-size: 15px;
				margin-top: 10px;
				margin-bottom: 0;
				line-height: 1.4;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				@media (max-width: 560px) {
					margin-top: 7px;
				   font-size: 13px;
				   letter-spacing: 0.01em;
			    }
			}
			.category {
				display: inline-block;
				margin-top: 10px;
				font-size: 12px;
				line-height: 1;
				letter-spacing: 0.02em;
				padding: 5px 15px;
				background: var(--yellow);
				border-radius: 11px;
				@media (max-width: 560px) {
					font-size: 11px;
					margin-top: 7px;
					padding: 3px 15px;
			    }
			}
			time {
				display: block;
				margin-top: 7px;
				position: relative;
				font-size: 13px;
				line-height: 1.2;
				letter-spacing: 0;
				padding-left: 15px;
				&::before {
					position: absolute;
					content: "";
					top: 2px;
					bottom: 0;
					left: 0;
					margin: auto;
					width: 12px;
					height: 12px;
					background: url("/common/img/icon_time01.webp") no-repeat 0 0 / contain;
				}
			}
		}
	}
	.pagination {
		display: flex;
		gap: 15px;
		margin-top: 60px;
		> li {
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				border: 1px solid var(--lightGray);
				line-height: 1;
				&:hover {
					background: var(--lightGray);
					color: var(--white);
				}
			}
			&.active a {
				background: var(--gray);
				border-color: var(--gray);
				color: var(--white);
				pointer-events: none;
				cursor: default;
			}
		}
	}
}

/* other */
/* ------------------------------- */
.heroTtlOther {
	text-align: center;
	font-size: 28px;
	font-weight: 600;
	i {
		display: block;
		font-size: 24px;
		font-weight: 500;
		font-family: 'Oswald', sans-serif;
		color: #707579;
		letter-spacing: 0.02em;
	}
}

.sitemapContainer {
	display: flex;
	justify-content: center;
	margin-bottom: 60px;
	gap: calc((100 / 1100) * 100vw);
	@media (max-width: 560px) {
		flex-wrap: wrap;
		flex-direction: column;
		gap: 20px;
		margin-bottom: 30px;
	}
	ul {
		li {
			+ li {
				margin-top: 20px;
			}
		}
	}
}

.privacyContainer {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	margin-bottom: 60px;
	@media (max-width: 560px) {
		justify-content: flex-start;
	}
	ul {
		li {
			position: relative;
			/*margin-top: 20px;*/
            /*transition: .3s;*/
            padding-inline: 24px;
            /*padding-top: 20px;*/
            padding-bottom: 20px;
            cursor: pointer;
            /*pointer-events: all;*/
            &::before {
				content: "\025b7";
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                width: 24px;
                height: 24px;
                line-height: 34px;
                margin: auto;
                letter-spacing: 0;
			}
			a {
				text-decoration: none;
                
				&:hover {
					text-decoration: underline;
				}
			}
            h2 {
                
            }p {
                margin-top: 5px;
            }
		}
	}
}