@charset "UTF-8";
/* ----------
基本設定
---------- */
*, *::before, *::after {
	box-sizing: border-box;
}
body, h1, h2, h3, p, ul {
	margin: 0;
}
table {
	border-collapse: collapse;
}
ul {
	padding: 0;
	list-style: none;
}
html {
	scroll-behavior: smooth;
}
body {
	background: #111;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(15px, calc(.39vw + 12px), 16px);
	line-height: 1.8;
}
a {
	color: inherit;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
button {
	color: inherit;
	font: inherit;
}
a:focus-visible, button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 5px;
}
a:hover {
	opacity: .75;
}
@media screen and (min-width: 768px) {
	.pcOFF { display: none !important; }
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 767px) {
	.spOFF { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ----------
ヘッダー
---------- */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 50px;
	width: 100%;
	max-width: none;
	height: 100px;
	margin: auto;
	padding-inline: max(40px, calc((100% - 1200px) / 2));
	background: transparent;
	transition: background-color .4s ease;
}
.header.is-scrolled {
	background: rgb(0 0 0 / 80%);
}
@media (prefers-reduced-motion: reduce) {
	.header { transition: none; }
}
.header .header-logo {
	flex: 0 0 180px;
}
.header .header-logo img {
	width: 180px;
}
.header .header-nav {
	flex: 1;
}
.header .header-nav ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.header .header-nav a {
	white-space: nowrap;
	font-family: "futura-pt", sans-serif;
	font-size: 14px;
}
.header .header-nav li:nth-last-child(2) { color: #5dc0cd; }
.header .header-nav li:last-child { color: #cc6393; }
.header .header-contact {
	flex-shrink: 0;
	text-align: right;
	line-height: 1.2;
}
.header .header-contact a {
	font-size: 24px;
	font-weight: 700;
}
.header .header-contact img {
	width: 24px;
}
.header .header-contact p {
	font-size: 12px;
}
@media screen and (max-width: 1100px) {
	.header { gap: 24px; padding-inline: 40px; }
	.header .header-logo { flex-basis: 150px; }
	.header .header-nav ul { gap: 14px; }
	.header .header-nav a { font-size: 12px; }
	.header .header-contact { display: none; }
}
@media screen and (max-width: 767px) {
	.header { height: 64px; padding-inline: 20px; justify-content: space-between; }
	.header .header-logo img { width: 150px; }
	.header .menu-toggle {
		position: relative;
		z-index: 12;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 44px;
		height: 44px;
		padding: 7px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.header .menu-toggle span { width: 30px; height: 2px; background: #fff; }
	.header .menu-toggle span:last-child { width: 14px; }
	.header .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
	.header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.header .menu-toggle[aria-expanded="true"] span:last-child { width: 30px; transform: translateY(-8px) rotate(-45deg); }
	.header .header-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; padding: 20px; background: #111; }
	.header .header-nav.is-open { display: block; }
	.header .header-nav ul { display: block; }
	.header .header-nav a { display: block; padding: 12px; font-size: 18px; }
}

/* ----------
メインビジュアル
---------- */
.main-visual {
	position: relative;
	display: grid;
	place-items: center;
	height: 56.25vw;
	max-height: 1080px;
	min-height: 500px;
	background: #252525 url("../img/mainVisual01.png") center / cover no-repeat;
}
.main-visual::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 90%) 0%, rgb(0 0 0 / 0%) 100%);
	pointer-events: none;
	content: "";
}
.main-visual .main-visual-title {
	position: relative;
	width: 600px;
	max-width: calc(100% - 90px);
	padding: 32px 50px;
	border: 1px solid #fff;
}
.main-visual h1 {
	font-size: 0;
	line-height: 1;
}
.main-visual h1 img { width: 100%; }
@media screen and (max-width: 1100px) {
	.main-visual .main-visual-title { width: 440px; }
}
@media screen and (max-width: 767px) {
	.main-visual { height: 600px; min-height: 0; max-height: none; }
	.main-visual .main-visual-title { width: 340px; padding: 24px 28px; }
}

/* ----------
下層ページ見出し
---------- */
.page-heading {
	display: grid;
	place-items: center;
	height: 400px;
	padding-top: 68px;
	background: #1d2220;
}
.page-heading h1 {
	font-family: "Outfit", sans-serif;
	font-size: clamp(30px, calc(13.28vw - 72px), 64px);
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
}
.page-heading h1::after {
	display: block;
	width: 80px;
	height: 2px;
	margin: 18px auto 0;
	background: #61afc2;
	content: "";
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 767px) {
	.page-heading {
		height: 179px;
		padding-top: 35px;
	}
	.page-heading h1::after { margin-top: 14px; }
}

/* ----------
フッター
---------- */
.footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	column-gap: 100px;
	padding: 65px max(40px, calc((100vw - 1060px) / 2)) 0;
	background: #444;
}
.footer .footer-info {
	position: relative;
	grid-row: span 2;
	padding-bottom: 65px;
}
.footer .footer-logo img { width: 240px; margin-bottom: 20px; }
.footer .footer-info > p:nth-child(2) { display: inline-block; text-align: right; font-size: 12px; line-height: 1.2; }
.footer .footer-info > p:nth-child(2) a { font-size: 28px; font-weight: 700; white-space: nowrap; }
.footer .footer-info > p:nth-child(2) img { width: 25px; }
.footer .footer-info > p:nth-child(3) { display: inline-block; margin-left: 8px; vertical-align: top; }
.footer .footer-info > p:nth-child(3) img { width: 40px; }
.footer address { margin-top: 22px; font-style: normal; font-size: 14px; }
.footer .footer-nav ul { display: flex; justify-content: space-between; gap: 20px; }
.footer .footer-nav a { font-size: 14px; white-space: nowrap; }
.footer .footer-buttons { display: grid; gap: 10px; width: 340px; max-width: 100%; margin: 30px 0 65px auto; }
.footer .footer-buttons a,
.about .about-buttons a,
.courses .course-content > a,
.course-page .course-content > a,
.access .access-content > a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 50px;
	border: 1px solid #fff;
	font-size: clamp(15px, calc(.39vw + 12px), 16px);
	line-height: 1.4;
}
.footer .footer-buttons a::after,
.about .about-buttons a::after,
.courses .course-content > a::after,
.course-page .course-content > a::after,
.access .access-content > a::after {
	position: absolute;
	right: 26px;
	top: calc(50% - 7px);
	width: 14px;
	height: 14px;
	background: url("../img/arrow01.png") center / contain no-repeat;
	content: "";
}
.footer .footer-buttons img, .about .about-buttons img { width: 18px; max-height: 18px; object-fit: contain; }
.footer .footer-copyright {
	grid-column: 1 / -1;
	/* フッターの左右余白だけ広げ、縦スクロールバー分のはみ出しを防ぐ。 */
	margin-inline: calc(-1 * max(40px, (100vw - 1060px) / 2));
	padding: 15px 20px;
	background: #111;
	text-align: center;
	font-family: "futura-pt", sans-serif;
}
@media screen and (max-width: 1100px) {
	.footer { column-gap: 40px; padding-inline: 30px; }
	.footer .footer-nav ul { flex-wrap: wrap; gap: 10px 20px; }
	.footer .footer-copyright { margin-inline: -30px; }
}
@media screen and (max-width: 767px) {
	.footer { display: block; padding: 65px 45px 0; }
	.footer .footer-info { max-width: 270px; margin: auto; padding-bottom: 30px; }
	.footer .footer-logo { text-align: center; }
	.footer .footer-logo img { width: 200px; margin-bottom: 25px; }
	.footer .footer-info > p:nth-child(2) a { font-size: clamp(22px, 6.05vw, 26px); }
	.footer address { font-size: 16px; }
	.footer .footer-nav ul { display: block; }
	.footer .footer-nav li { border-top: 1px solid #888; text-align: center; }
	.footer .footer-nav li:last-child { border-bottom: 1px solid #888; }
	.footer .footer-nav a { display: block; padding: 17px 0; font-size: 16px; }
	.footer .footer-buttons { width: 100%; margin: 20px 0 60px; }
	.footer .footer-copyright { margin-inline: -45px; padding: 15px; }
}

/* ----------
ページトップ
---------- */
.page-top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 9;
	width: 70px;
	height: 70px;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	transition: opacity .4s ease, visibility .4s ease;
}
.page-top.is-visible {
	opacity: 1;
	visibility: visible;
}
.page-top img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
	.page-top { transition: none; }
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 767px) {
	.page-top {
		right: 15px;
		bottom: 15px;
		width: 54px;
		height: 54px;
	}
}

/* ----------
お知らせ
---------- */
.information {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 160px;
	margin: -80px 0 0 max(40px, calc((100% - 1200px) / 2));
	background: rgb(93 192 205 / 70%);
}
.information h2 {
	display: flex;
	align-items: center;
	flex: 0 0 360px;
	padding-left: 60px;
	background: #82888d;
	clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
	font: 500 32px "futura-pt", sans-serif;
}
.information .information-list { align-self: center; padding: 20px 30px; }
.information .information-list li { display: grid; grid-template-columns: 100px 120px 1fr; align-items: baseline; gap: 20px; font-size: 15px; }
.information .information-list li + li { margin-top: 8px; }
.information time { font-family: "futura-pt", sans-serif; letter-spacing: .06em; }
.information .information-list span { padding: 1px 14px; background: #2d6593; text-align: center; font-size: clamp(14px, calc(.39vw + 11px), 15px); white-space: nowrap; }
@media screen and (max-width: 1100px) {
	.information { margin-left: 20px; }
	.information h2 { flex-basis: 240px; padding-left: 25px; font-size: 26px; }
	.information .information-list li { grid-template-columns: 80px 90px 1fr; gap: 10px; font-size: 13px; }
}
@media screen and (max-width: 767px) {
	.information { display: block; margin: 0; }
	.information h2 { justify-content: center; height: 60px; padding: 0; clip-path: none; font-size: 32px; }
	.information .information-list { padding: 20px; }
	.information .information-list li { grid-template-columns: 62px minmax(0, 1fr); gap: 3px 10px; font-size: 12px; line-height: 1.5; }
	.information .information-list li + li { margin-top: 22px; }
	.information .information-list span { justify-self: start; padding: 2px 7px; font-size: 11px; }
	.information .information-list a { grid-column: 1 / -1; }
}

/* ----------
スタジオ紹介
---------- */
.about {
	position: relative;
	display: grid;
	grid-template-columns: 390px 1fr;
	align-items: center;
	gap: 70px;
	padding: 80px max(40px, calc((100% - 1200px) / 2)) 100px;
	background: linear-gradient(90deg, #444, #000);
	isolation: isolate;
}
.about::before { position: absolute; z-index: -1; inset: 0 0 0 75%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); background: rgb(255 255 255 / 5%); content: ""; }
.about .about-heading { position: relative; padding: 50px 35px; text-align: center; }
.about .about-heading::before, .about .about-heading::after { position: absolute; width: 30px; height: 70px; border: solid #aaa; content: ""; }
.about .about-heading::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.about .about-heading::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.about h2 { padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid #aaa; line-height: 1; }
.about h2 img { width: 180px; }
.about .about-heading p { font-size: 22px; font-weight: 700; line-height: 1.5; }
.about .about-content > p { line-height: 1.8; }
.about .about-content > p + p { margin-top: 25px; }
.about .about-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 35px; }
@media screen and (max-width: 1100px) {
	.about { grid-template-columns: 34% 1fr; gap: 35px; padding-inline: 30px; }
	.about .about-heading { padding-inline: 20px; }
	.about .about-heading p { font-size: 18px; }
	.about .about-buttons { gap: 20px; }
}
@media screen and (max-width: 767px) {
	.about { display: block; padding: 40px 20px 60px; background: #111; }
	.about::before { display: none; }
	.about .about-heading { padding: 35px 30px; margin-bottom: 30px; }
	.about .about-heading p { font-size: 22px; }
	.about .about-content > p { font-size: 16px; line-height: 1.65; }
	.about .about-content > p + p { margin-top: 28px; }
	.about .about-buttons { grid-template-columns: 1fr; gap: 20px; margin: 32px 25px 0; }
}

/* ----------
コース紹介
---------- */
.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.courses > .section-heading { grid-column: 1 / -1; padding: 120px 20px 100px; background: #82888d; text-align: center; }
.courses .section-heading h2, .company .section-heading h2, .access .section-heading h2 {
	font-family: "futura-pt", sans-serif;
	font-size: clamp(40px, calc(9.38vw - 32px), 64px);
	font-weight: 400;
	line-height: 1.2;
}
.courses .section-heading h2::before { display: block; width: 1px; height: 80px; margin: 0 auto 30px; background: #fff; content: ""; }
.courses .course { display: flex; flex-direction: column; padding-bottom: 50px; }
.courses .course-hiphop { background: #d99ca9; }
.courses .course-ballet { background: #b99bd7; }
.courses .course-yoga { background: #b6cc8a; }
.courses .course-kpop { background: #579cbb; }
.courses .course-karate { background: #d29455; }
.courses .course-cheer { background: #aec3eb; }
.courses .course-content { display: flex; flex-direction: column; flex: 1; padding: 95px 50px 80px; }
.courses h3 { margin-bottom: 18px; font-size: clamp(25px, calc(5.86vw - 20px), 40px); font-weight: 500; line-height: 1.4; }
.courses .course-hiphop h3 { font-family: "futura-pt", sans-serif; }
.courses .course-content p { font-size: clamp(16px, calc(.78vw + 10px), 18px); line-height: 1.65; }
.courses .course-content > a { align-self: flex-end; width: 240px; max-width: 100%; margin-top: auto; top: 30px; font-family: "futura-pt", sans-serif; }
.courses .course-image img { display: block; width: 100%; aspect-ratio: 2.13; object-fit: cover; }
@media screen and (max-width: 1100px) {
	.courses .course-content { padding: 50px 25px 60px; }
	.courses h3 { font-size: 25px; }
}
@media screen and (max-width: 767px) {
	.courses { grid-template-columns: minmax(0, 1fr); }
	.courses > .section-heading { padding: 60px 20px 40px; }
	.courses .section-heading h2::before { height: 40px; margin-bottom: 15px; }
	.courses .course { padding-bottom: 40px; }
	.courses .course-content { padding: 28px 20px 40px; }
	.courses h3 { margin-bottom: 10px; }
	.courses .course-content p { font-size: 16px; line-height: 1.5; }
	.courses .course-content > a { top: 0; margin-top: 25px; }
	.courses .course-image img { height: 200px; aspect-ratio: auto; }
}

/* ----------
コース一覧ページ
---------- */
.breadcrumb {
	background: #444;
}
.breadcrumb .inner {
	display: flex;
	align-items: center;
	width: calc(100% - 80px);
	max-width: 1200px;
	min-height: 100px;
	margin: 0 auto;
}
.breadcrumb ol {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}
.breadcrumb li + li::before {
	margin-right: 20px;
	color: #aaa;
	content: ">";
}
.course-page .course-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.course-page .course {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-bottom: 50px;
}
.course-page .course-hiphop { background: #d99ca9; }
.course-page .course-ballet { background: #b99bd7; }
.course-page .course-yoga { background: #b6cc8a; }
.course-page .course-kpop { background: #579cbb; }
.course-page .course-karate { background: #d29455; }
.course-page .course-cheer { background: #aec3eb; }
.course-page .course-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 95px 50px 80px;
}
.course-page .course-content h2 {
	margin-bottom: 18px;
	font-size: clamp(25px, calc(5.86vw - 20px), 40px);
	font-weight: 500;
	line-height: 1.4;
}
.course-page .course-hiphop h2 { font-family: "futura-pt", sans-serif; }
.course-page .course-content p {
	font-size: clamp(16px, calc(.78vw + 10px), 18px);
	line-height: 1.65;
}
.course-page .course-content > a {
	align-self: flex-end;
	width: 240px;
	max-width: 100%;
	margin-top: auto;
	top: 30px;
	font-family: "futura-pt", sans-serif;
}
.course-page .course-image img {
	display: block;
	width: 100%;
	aspect-ratio: 2.13;
	object-fit: cover;
}
@media screen and (max-width: 1100px) {
	.breadcrumb .inner { width: calc(100% - 60px); }
	.course-page .course-content { padding: 50px 25px 60px; }
	.course-page .course-content h2 { font-size: 25px; }
}
@media screen and (max-width: 767px) {
	.breadcrumb .inner {
		width: calc(100% - 40px);
		min-height: 65px;
	}
	.breadcrumb ol { gap: 10px; font-size: 12px; }
	.breadcrumb li + li::before { margin-right: 10px; }
	.course-page .course-list { grid-template-columns: minmax(0, 1fr); }
	.course-page .course { padding-bottom: 40px; }
	.course-page .course-content { padding: 28px 20px 40px; }
	.course-page .course-content h2 { margin-bottom: 10px; }
	.course-page .course-content p { font-size: 16px; line-height: 1.5; }
	.course-page .course-content > a { top: 0; margin-top: 25px; }
	.course-page .course-image img { height: 200px; aspect-ratio: auto; }
}

/* ----------
運営会社
---------- */
.company { padding: 150px 30px 220px; background: linear-gradient(90deg, #444, #000); }
.company .section-heading { max-width: 900px; margin: auto; text-align: center; }
.company .section-heading h2 { margin-bottom: 60px; letter-spacing: .06em; }
.company .section-heading > p:first-of-type { font-size: 22px; letter-spacing: .08em; }
.company .section-heading > p:last-child { display: flex; align-items: center; gap: 20px; margin-top: 15px; }
.company .section-heading > p:last-child::before, .company .section-heading > p:last-child::after { flex: 1; height: 1px; background: #fff; content: ""; }
.company .company-facilities { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 60px auto 0; }
.company .company-facility { display: flex; align-items: center; gap: 20px; min-height: 160px; padding: 30px; background: #eee; color: #111; }
.company .company-facility img { flex-shrink: 0; width: 90px; }
.company .company-facility p { font-size: 14px; font-weight: 700; line-height: 1.4; }
@media screen and (max-width: 1100px) {
	.company .company-facility { padding: 20px; gap: 15px; }
}
@media screen and (max-width: 767px) {
	.company { padding: 70px 20px 60px; }
	.company .section-heading h2 { margin-bottom: 22px; letter-spacing: 0; }
	.company .section-heading > p:first-of-type { font-size: 15px; letter-spacing: 0; }
	.company .section-heading > p:last-child { gap: 15px; font-size: 14px; line-height: 1.3; }
	.company .section-heading > p:last-child::before, .company .section-heading > p:last-child::after { flex: 0 0 40px; }
	.company .company-facilities { grid-template-columns: 1fr; gap: 10px; margin-top: 35px; }
	.company .company-facility { min-height: 80px; padding: 10px 20px; gap: 12px; }
	.company .company-facility img { width: 68px; }
	.company .company-facility p { min-width: 0; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
}

/* ----------
アクセス
---------- */
.access { padding: 150px max(30px, calc((100% - 1150px) / 2)) 120px; background: #a3afbb; }
.access .section-heading { margin-bottom: 60px; text-align: center; }
.access .section-heading h2 { letter-spacing: .06em; }
.access .access-map iframe { display: block; width: 100%; height: 600px; border: 0; }
.access .access-content { position: relative; margin-top: 50px; padding-right: 280px; }
.access .access-content h3, .access .access-content p { font-size: clamp(20px, calc(1.56vw + 8px), 24px); font-weight: 700; line-height: 2; }
.access .access-content > a { position: absolute; right: 0; bottom: 0; width: 240px; font-family: "futura-pt", sans-serif; }
@media screen and (max-width: 1100px) {
	.access .access-map iframe { height: 480px; }
}
@media screen and (max-width: 767px) {
	.access { padding: 70px 20px 60px; }
	.access .section-heading { margin-bottom: 35px; }
	.access .section-heading h2 { letter-spacing: 0; }
	.access .access-map iframe { height: 240px; }
	.access .access-content { margin-top: 10px; padding: 0; }
	.access .access-content h3, .access .access-content p { font-size: 15px; line-height: 1.65; }
	.access .access-content > a { position: relative; width: 240px; max-width: 100%; margin: 20px auto 0; }
}

/* ----------
アクセス・施設紹介ページ
---------- */
.access-page {
	background: #a3afbb;
}
.access-page .inner {
	width: calc(100% - 80px);
	max-width: 1200px;
	margin-inline: auto;
}
.access-page .facilitySec {
	padding-block: 170px 150px;
}
.access-page .facilitySec-heading {
	margin-bottom: 75px;
	text-align: center;
}
.access-page .facilitySec-heading h2 {
	font-family: "Outfit", sans-serif;
	font-size: clamp(48px, calc(9.38vw - 24px), 96px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0;
}
.access-page .facilitySec-heading p {
	margin-top: 18px;
	font-size: clamp(18px, calc(.78vw + 12px), 20px);
	line-height: 1.5;
}
.access-page .facilitySec-heading p::after {
	display: block;
	width: 40px;
	height: 2px;
	margin: 15px auto 0;
	background: #b6cc8a;
	content: "";
}
.access-page .facilitySec-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(430px, .84fr);
	align-items: center;
	gap: 80px;
	max-width: 1180px;
}
.access-page .facilitySec-pic img {
	display: block;
	width: 100%;
	height: auto;
}
.access-page .facilitySec-lead {
	margin-bottom: 65px;
	font-size: clamp(17.00px, calc(1.17vw + 8.00px), 20.00px);
	font-weight: 700;
	line-height: 2;
}
.access-page .facilitySec-data table {
	width: 100%;
	border-top: 1px solid rgb(255 255 255 / 70%);
}
.access-page .facilitySec-data tr {
	border-bottom: 1px solid rgb(255 255 255 / 70%);
}
.access-page .facilitySec-data th,
.access-page .facilitySec-data td {
	padding-block: 28px;
	text-align: left;
	vertical-align: middle;
	font-size: clamp(17.00px, calc(1.17vw + 8.00px), 20.00px);
	font-weight: 500;
	line-height: 1.6;
}
.access-page .facilitySec-data th {
	width: 140px;
}
.access-page .facilitySec-data small {
	font-size: 15px;
}
.access-page .facilitySec-studio {
	display: grid;
	grid-template-columns: minmax(0, .84fr) minmax(0, 1.2fr);
	align-items: center;
	gap: 90px;
	margin-top: 150px;
	max-width: 1480px;
}
.access-page .facilitySec-txt h3 {
	margin-bottom: 50px;
	font-size: clamp(19.00px, calc(1.95vw + 4.00px), 24.00px);
	font-weight: 700;
	line-height: 1.7;
}
.access-page .facilitySec-txt p {
	font-size: clamp(16.00px, calc(0.78vw + 10.00px), 18.00px);
	font-weight: 500;
	line-height: 2.2;
}
.access-page .facilitySec-txt p + p {
	margin-top: 46px;
}
.access-page .mapSec {
	padding-bottom: 150px;
}
.access-page .mapSec-frame iframe {
	display: block;
	width: 100%;
	height: 520px;
	border: 0;
}
@media screen and (max-width: 1100px) {
	.access-page .inner { width: calc(100% - 60px); }
	.access-page .facilitySec { padding-block: 110px 100px; }
	.access-page .facilitySec-info,
	.access-page .facilitySec-studio { gap: 45px; }
	.access-page .facilitySec-info { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
	.access-page .facilitySec-studio { margin-top: 100px; }
}
@media screen and (max-width: 767px) {
	.access-page .inner { width: calc(100% - 40px); }
	.access-page .facilitySec { padding-block: 70px 75px; }
	.access-page .facilitySec-heading { margin-bottom: 42px; }
	.access-page .facilitySec-heading p { margin-top: 10px; }
	.access-page .facilitySec-info,
	.access-page .facilitySec-studio {
		display: block;
	}
	.access-page .facilitySec-data {
		margin-top: 32px;
	}
	.access-page .facilitySec-lead {
		margin-bottom: 28px;
		line-height: 1.8;
	}
	.access-page .facilitySec-data th,
	.access-page .facilitySec-data td {
		display: block;
		width: 100%;
		padding-block: 0;
	}
	.access-page .facilitySec-data th {
		padding-top: 18px;
	}
	.access-page .facilitySec-data td {
		padding: 5px 0 18px;
	}
	.access-page .facilitySec-data small {
		font-size: 13px;
	}
	.access-page .facilitySec-studio {
		margin-top: 70px;
	}
	.access-page .facilitySec-txt h3 {
		margin-bottom: 25px;
	}
	.access-page .facilitySec-txt p {
		line-height: 1.9;
	}
	.access-page .facilitySec-txt p + p {
		margin-top: 28px;
	}
	.access-page .facilitySec-pic--studio {
		margin-top: 35px;
	}
	.access-page .mapSec {
		padding-bottom: 75px;
	}
	.access-page .mapSec-frame iframe {
		height: 300px;
	}
}

/* ----------
FAQ
---------- */
.faq-page {
	background: #a3afbb;
}
.faq-page .faq {
	padding-block: 90px 160px;
}
.faq-page .faq > .inner {
	width: calc(100% - 80px);
	max-width: 1280px;
	margin-inline: auto;
}
.faq-page .faq-heading {
	margin-bottom: 70px;
	text-align: center;
}
.faq-page .faq-heading h2 {
	font-family: "Outfit", sans-serif;
	font-size: clamp(40px, calc(9.38vw - 32px), 64px);
	font-weight: 300;
	line-height: 1.2;
}
.faq-page .faq-heading p {
	margin-top: 12px;
	font-size: clamp(15px, calc(.39vw + 12px), 16px);
	line-height: 1.5;
}
.faq-page .faq-heading p::after {
	display: block;
	width: 40px;
	height: 2px;
	margin: 12px auto 0;
	background: #b6cc8a;
	content: "";
}
.faq-page .faq-menu {
	display: grid;
	gap: 60px;
}
.faq-page .faq-menu-group h3 {
	padding: 14px 20px;
	font-size: clamp(20.00px, calc(1.56vw + 8.00px), 24.00px);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
.faq-page .faq-menu-group--total h3 {
	background: #d99ca9;
}
.faq-page .faq-menu-group--lesson h3 {
	background: #b99bd7;
}
.faq-page .faq-menu-group ul {
	display: grid;
	gap: 15px 20px;
	margin-top: 30px;
}
.faq-page .faq-menu-group--total ul {
	grid-template-columns: minmax(0, 400px);
}
.faq-page .faq-menu-group--lesson ul {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.faq-page .faq-menu a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70px;
	padding: 15px 50px 15px 20px;
	border: 1px solid rgb(255 255 255 / 65%);
	font-size: clamp(17.00px, calc(1.17vw + 8.00px), 20.00px);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
.faq-page .faq-menu a::after {
	position: absolute;
	right: 20px;
	top: calc(50% - 8px);
	width: 16px;
	height: 16px;
	background: url("/assets/img/arrow03.png") center / contain no-repeat;
	content: "";
}
.faq-page .faq-section {
	margin-top: 170px;
}
.faq-page .faq-section > h2 {
	margin-bottom: 30px;
	padding-left: 20px;
	border-left: 6px solid;
	font-size: clamp(18.00px, calc(3.13vw + -6.00px), 26.00px);
	font-weight: 500;
	line-height: 1.5;
}
.faq-page .faq-section--total > h2 {
	border-color: #d99ca9;
}
.faq-page .faq-section--lesson > h2 {
	border-color: #b99bd7;
}
.faq-page .faq-category + .faq-category {
	margin-top: 70px;
}
.faq-page .faq-category {
	scroll-margin-top: 120px;
}
.faq-page .faq-category > h3 {
	width: 160px;
	margin-bottom: 14px;
	padding: 4px 10px;
	background: #2d6593;
	font-size: clamp(14.00px, calc(.39vw + 11.00px), 15.00px);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
.faq-page .faq-item {
	display: block;
	border-top: 1px solid rgb(255 255 255 / 65%);
}
.faq-page .faq-category > .faq-item:last-child {
	border-bottom: 1px solid rgb(255 255 255 / 65%);
}
.faq-page .faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 70px;
	padding: 18px 20px;
	cursor: pointer;
	font-size: clamp(20.00px, calc(1.56vw + 8.00px), 24.00px);
	font-weight: 500;
	line-height: 1.6;
	list-style: none;
}
.faq-page .faq-question::-webkit-details-marker {
	display: none;
}
.faq-page .faq-question::marker {
	content: "";
}
.faq-page .faq-question span {
	min-width: 0;
}
.faq-page .faq-question::after {
	display: block;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("/assets/img/faq_open.png") center / 24px 24px no-repeat;
	content: "";
}
.faq-page .faq-item[open] > .faq-question::after {
	background-image: url("/assets/img/faq_close.png");
}
.faq-page .faq-answer {
	padding: 0 20px 26px;
	font-size: clamp(14.00px, calc(.78vw + 8.00px), 16.00px);
	line-height: 2;
}
.faq-page .faq-answer p + p {
	margin-top: 25px;
}
.faq-page .faq-contact {
	margin-top: 100px;
	font-size: clamp(14.00px, calc(.39vw + 11.00px), 15.00px);
	text-align: center;
}
@media screen and (max-width: 1100px) {
	.faq-page .faq > .inner { width: calc(100% - 60px); }
	.faq-page .faq-section { margin-top: 130px; }
}
@media screen and (max-width: 767px) {
	.faq-page .faq { padding-block: 70px 75px; }
	.faq-page .faq > .inner { width: calc(100% - 40px); }
	.faq-page .faq-heading { margin-bottom: 42px; }
	.faq-page .faq-heading p { margin-top: 10px; }
	.faq-page .faq-menu { gap: 35px; }
	.faq-page .faq-menu-group h3 { padding: 10px 15px; }
	.faq-page .faq-menu-group ul { gap: 10px; margin-top: 15px; }
	.faq-page .faq-menu-group--total ul { grid-template-columns: minmax(0, 1fr); }
	.faq-page .faq-menu-group--lesson ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.faq-page .faq-menu a {
		min-height: 55px;
		padding: 10px 35px 10px 10px;
	}
	.faq-page .faq-menu a::after {
		right: 10px;
		width: 14px;
		height: 14px;
		top: calc(50% - 7px);
	}
	.faq-page .faq-section { margin-top: 100px; }
	.faq-page .faq-section > h2 {
		margin-bottom: 22px;
		padding-left: 12px;
		border-left-width: 4px;
	}
	.faq-page .faq-category + .faq-category { margin-top: 45px; }
	.faq-page .faq-category { scroll-margin-top: 80px; }
	.faq-page .faq-category > h3 { width: 150px; }
	.faq-page .faq-question {
		min-height: 60px;
		padding: 15px 10px;
	}
	.faq-page .faq-answer {
		padding: 0 10px 20px;
		line-height: 1.9;
	}
.faq-page .faq-contact { margin-top: 65px; }
}

/* ----------
お問い合わせ
---------- */
.contact-page {
	
}
.contact-page .contact-intro,
.contact-page .contact-form,
.contact-page .contact-complete {
	background: #fff;
}
.contact-page .contact-intro {
	padding: 80px 0 70px;
}
.contact-page .contact-form {
	padding: 0 0 120px;
}
.contact-page .contact-complete {
	padding: 80px 0 140px;
}
.contact-page .contact-intro .inner,
.contact-page .contact-form .inner,
.contact-page .contact-complete .inner {
	width: calc(100% - 80px);
	max-width: 1180px;
	margin: 0 auto;
}
.contact-page .contact-heading {
	position: relative;
	margin-bottom: 42px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #c7c7c7;
}
.contact-page .contact-heading h1,
.contact-page .contact-heading h2 {
	color: #33251f;
	font-size: clamp(22px, calc(1.17vw + 13px), 25px);
	font-weight: 700;
	line-height: 1.5;
}
.contact-page .contact-intro__txt {
	margin: 0 0 55px;
	color: #33251f;
	font-size: 15px;
	line-height: 2;
}
.contact-page .contact-intro__tel {
	color: #f28f22;
	font-size: 14px;
	text-align: center;
}
.contact-page .contact-form__box {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #33251f;
}
.contact-page .contact-form__lead {
	margin-bottom: 30px;
	font-size: 15px;
	line-height: 1.8;
}
.contact-page .errorMessages {
	margin-bottom: 30px;
	padding: 16px 20px;
	border: 1px solid #d99ca9;
	background: #fff5f7;
	color: #9b1c31;
	font-size: 14px;
}
.contact-page .errorMessages ul {
	margin: 0;
	padding-left: 1.4em;
	list-style: disc;
}
.contact-page .formError {
	z-index: 30;
}
.contact-page .formError .formErrorContent {
	min-width: 160px;
	padding: 7px 12px;
	border: 0;
	border-radius: 4px;
	background: #9b1c31;
	box-shadow: 0 4px 10px rgb(0 0 0 / 18%);
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}
.contact-page .formError .formErrorArrow {
	margin-top: -1px;
}
.contact-page .formError .formErrorArrow div {
	border: 0;
	background: #9b1c31;
	box-shadow: none;
}
.contact-page .formError .formErrorArrow .line2,
.contact-page .formError .formErrorArrow .line1 {
	background: #9b1c31;
}
.contact-page .formError.inline {
	display: block;
	margin-top: 8px;
}
.contact-page .formError.inline .formErrorContent {
	display: inline-block;
	border-radius: 4px;
}
.contact-page .submitArea {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 50px;
}
.contact-page .submitArea form {
	width: min(100%, 320px);
}
.contact-page .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 405px);
	min-height: 50px;
	padding: 12px 30px;
	border: 0;
	border-radius: 5px;
	background: #543b2e;
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}
.contact-page .btn--back {
	border: 1px solid #543b2e;
	background: #fff;
	color: #543b2e;
}
.contact-page .confirmTbl {
	border-top: 1px dashed #cfcfcf;
	color: #33251f;
}
.contact-page .confirmTbl dl {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 30px;
	margin: 0;
	padding: 18px;
	border-bottom: 1px dashed #cfcfcf;
}
.contact-page .confirmTbl dt {
	color: #33251f;
	font-weight: 700;
}
.contact-page .confirmTbl dd {
	margin: 0;
	color: #33251f;
}
.contact-page .contact-complete__box {
	max-width: 852px;
	margin: 0 auto;
	padding: 58px 40px;
	border: 1px solid #c8c8c8;
	text-align: center;
}
.contact-page .contact-complete__box p + p {
	margin-top: 12px;
}
.contact-page .contact-complete__lnk {
	margin-top: 35px !important;
}
.contact-page .contact-complete__lnk a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	min-height: 48px;
	padding: 10px 28px;
	border-radius: 5px;
	background: #543b2e;
	color: #fff;
}
@media screen and (max-width: 1100px) {
	.contact-page .contact-form__box {
		max-width: none;
	}
	.contact-page .confirmTbl dl {
		grid-template-columns: 180px minmax(0, 1fr);
		gap: 24px;
	}
}
@media screen and (max-width: 767px) {
	.contact-page .contact-intro {
		padding: 55px 0;
	}
	.contact-page .contact-form {
		padding-bottom: 80px;
	}
	.contact-page .contact-complete {
		padding: 55px 0 90px;
	}
	.contact-page .contact-intro .inner,
	.contact-page .contact-form .inner,
	.contact-page .contact-complete .inner {
		width: calc(100% - 30px);
	}
	.contact-page .contact-heading {
		margin-bottom: 30px;
		padding-bottom: 16px;
	}
	.contact-page .contact-intro__txt {
		margin-bottom: 35px;
	}
	.contact-page .contact-intro__tel {
		text-align: left;
	}
	.contact-page .contact-complete__box {
		padding: 30px 18px;
	}
	.contact-page .submitArea {
		display: grid;
		gap: 12px;
	}
	.contact-page .submitArea form,
	.contact-page .btn {
		width: 100%;
	}
	.contact-page .confirmTbl dl {
		display: block;
		padding: 18px 0;
	}
	.contact-page .confirmTbl dt {
		margin-bottom: 10px;
	}
	.contact-page .formError .formErrorContent {
		max-width: calc(100vw - 40px);
		font-size: 11px;
	}
}