@charset "UTF-8";

/* ----------------------------------------------------------------------------------------------------

common

---------------------------------------------------------------------------------------------------- */
.bn_sec {
	display: none;
}
@media screen and (max-width: 768px) {
	#page-top {
		bottom: 1rem;	
	}
}

/* ----------------------------------------------------------------------------------------------------

head

---------------------------------------------------------------------------------------------------- */
.head {
	margin-bottom: 5rem;
	text-align: center;
}
.head h2 span {
	display: block;
}
.head h2 .jp {
	margin-bottom: 0.5rem;
	font-weight: 600;
	font-size: 3.4rem;
}
.head h2 .jp br {
	display: none;
}
.head h2 .jp br.static {
	display: block;
}
.head h2 .en {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 1.7rem;
}
/* SP */
@media screen and (max-width: 768px) {
	.head {
		margin-bottom: 3rem;
	}
	.head h2 .jp {
		font-size: 2.8rem;
	}
	.head h2 .jp br {
		display: block;
	}
	.head h2 .en {
		font-size: 1.6rem;
	}
}

/* ----------------------------------------------------------------------------------------------------

kv

---------------------------------------------------------------------------------------------------- */
.top-kv {
	position: relative;
	padding-top: 55.55%;
	height: 0;
}
.top-kv h2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.top-kv h2 .sp {
	display: none;
}
@media screen and (max-width: 768px) {
	.top-kv {
		padding-top: 116%;
	}
	.top-kv h2 .pc {
		display: none;
	}
	.top-kv h2 .sp {
		display: block;
	}
}

/* ----------------------------------------------------------------------------------------------------

navigation

---------------------------------------------------------------------------------------------------- */
.top-navigation {
}
.top-navigation ul {
	display: flex;
	justify-content: center;
	margin: 0 -1.46rem;
	padding-bottom: 4.48rem;
}
.top-navigation ul:last-child {
	padding-bottom: 0;
}
.top-navigation li {
	flex-basis: 50%;
	padding: 0 1.46rem;
}
.top-navigation li a {
	display: block;
	filter: drop-shadow(0 0.68rem 1.38rem rgba(167,160,156,0.6));
}
.top-footer-navigation {
	padding: 7.3rem 0 5rem 0;
	background-color: #f4f4f4;
}

@media screen and (max-width: 768px) {
	.top-navigation {
		padding: 0 3rem;
	}
	.top-navigation ul {
		display: block;
		margin: 0;
		padding: 0;
	}
	.top-navigation li {
		padding: 0 0 2rem 0;
	}
	.top-footer-navigation {
		padding: 4rem 3rem;
	}
}

/* ----------------------------------------------------------------------------------------------------

about machine

---------------------------------------------------------------------------------------------------- */
.about-machine {
}
.about-machine .wrap-1 {
	margin-bottom: 8rem;
}
.about-machine .wrap-1 > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
	margin-bottom: 3rem;
}
.about-machine .wrap-1 > div > * {
	width: 48%;
}
.about-machine .wrap-1 > div figure img {
	border-radius: 0.8rem;
}
.about-machine .wrap-1 > div > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.6rem;
}
.about-machine .wrap-1 > div > * {
	width: 48%;
}
.about-machine .wrap-1 > div > div ul {
	display: flex;
	justify-content: center;
	margin: 1.5rem 0;
}
.about-machine .wrap-1 > div > div ul li {
	width: 10rem;
	height: 10rem;
	border: solid 0.15rem #353535;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	white-space: nowrap;
}
.about-machine .wrap-1 > div > div ul li:not(:last-child) {
	margin-right: 1rem;
}
.about-machine .wrap-2 h3 {
	font-weight: normal;
	font-size: 2.6rem;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 0.15em;
	text-align: center;
	position: relative;
	margin-bottom: 3.5rem;
}
.about-machine .wrap-2 h3::before {
	left: 0;
}
.about-machine .wrap-2 h3::after {
	right: 0;
}
.about-machine .wrap-2 h3::before, .about-machine .wrap-2 h3::after {
	content: "";
	width: 27%;
	height: 0.12rem;
	background: #353535;
	top: 50%;
	position: absolute;
}
.about-machine .wrap-2 ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.about-machine .wrap-2 ul li {
	width: 48%;
}
.about-machine .wrap-2 ul li figure {
	margin-bottom: 1.5rem;
}
.about-machine .wrap-2 ul li figure img {
	border-radius: 0.8rem;
}
.about-machine .wrap-2 ul li dl dt {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	font-family: 'Noto Serif JP', serif;
	font-size: 2rem;
	letter-spacing: 0.1em;
}
.about-machine .wrap-2 ul li dl dt span {
	display: flex;
	align-items: center;
	background: var(--pink);
	border-radius: 10rem;
	margin-right: 1.5rem;
	padding: 0.1rem 0.9rem 0 1rem;
	line-height: 1;
	font-size: 1.4rem;
	letter-spacing: 0;
}
.about-machine .wrap-2 ul li dl dt span strong {
	font-weight: normal;
	font-size: 2.2rem;
	margin-left: 0.3rem;
	margin-bottom: 0.3rem;
}
.about-machine .wrap-2 ul li:nth-child(n + 3) {
	margin-top: 4rem;
}
@media screen and (max-width: 768px) {
	.about-machine {
		padding: 6rem 3rem 6rem 3rem;
	}
	.about-machine .wrap-1 {
		margin-bottom: 6rem;
	}
	.about-machine .wrap-1 > div {
		display: block;
		margin-bottom: 3rem;
	}
	.about-machine .wrap-1 figure {
		margin-bottom: 2rem;
	}
	.about-machine .wrap-1 > div > * {
		width: 100%;
	}
	.about-machine .wrap-1 > div > * {
		width: 100%;
	}
	.about-machine .wrap-2 h3 {
		font-size: 2.4rem;
		margin-bottom: 2rem;
	}
	.about-machine .wrap-2 ul {
		display: block;
	}
	.about-machine .wrap-2 ul li:not(:last-child) {
		margin-bottom: 3rem;
	}
	.about-machine .wrap-2 ul li {
		width: 100%;
	}
	.about-machine .wrap-2 h3::before,
	.about-machine .wrap-2 h3::after {
		display: none;
	}
}

/* ----------------------------------------------------------------------------------------------------

banner training

---------------------------------------------------------------------------------------------------- */
.banner-training {
	 padding-bottom: 7rem;
}
@media screen and (max-width: 768px) {
	.banner-training {
		padding: 0 3rem;
 }
}

/* ----------------------------------------------------------------------------------------------------

about

---------------------------------------------------------------------------------------------------- */
.top-about {
	margin: 12rem 0 0 0;
	padding-bottom: 40rem;
	background: var(--blue);
	position: relative;
}
.top-about::before {
	content: "";
	width: 50rem;
	height: 50rem;
	background: var(--pink);
	border-radius: 50%;
	position: absolute;
	left: 9rem;
	top: -12rem
}
.top-about > * {
	position: relative;
	z-index: 10;
}
.top-about h2 {
	font-weight: normal;
	font-size: 2.2rem;
	margin-bottom: 5rem;
}
.top-about h2 img {
	display: block;
	width: 38rem;
	margin-bottom: 3rem;
}
.top-about h2 span {
	display: block;
	padding-left: 2rem;
}
.top-about p {
	width: 80rem;
	margin: 0 auto 3rem auto;
	line-height: 2;
}
.top-about-movie {
	width: 80rem;
	margin: 0 auto;
}
.top-about-movie .player {
	position: relative;
	padding-top: 56.25%;
	height: 0;
}
.top-about-movie .player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 768px) {
	.top-about {
		padding-bottom: 15rem;
	}
	.top-about::before {
		width: 33rem;
		height: 33rem;
		left: 1.2rem;
		top: -6rem
	}
	.top-about h2 {
		font-size: 1.8rem;
		margin-bottom: 4rem;
	}
	.top-about h2 img {
		width: 30rem;
		margin-bottom: 2rem;
	}
	.top-about h2 span {
		padding-left: 1.5rem;
	}
	.top-about p {
		width: auto;
	}
	.top-about-movie {
		width: auto;
	}
	.top-about-movie iframe {
		width: 100%;
		height: 240px;
	}
}

/* ----------------------------------------------------------------------------------------------------

reason

---------------------------------------------------------------------------------------------------- */
.top-reason {
	margin-top: -32rem;
	padding: 0;
}
.top-reason .base-width {
	position: relative;
	padding: 6.9rem 6.9rem 0 6.9rem;
	width: 103.45rem;
	background-color: #fff;
	border-radius: 1.7rem;
}
.top-reason ul {
	display: flex;
	margin: 0 -2.8rem;
}
.top-reason li {
	flex-basis: 33.333%;
	padding: 0 2.8rem;
}
.top-reason li span {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--pink);
	margin: -4.6rem 0 -3rem -3.4rem;
	width: 9.48rem;
	height: 9.48rem;
	border-radius: 50%;
	font-size: 1.46rem;
}
.top-reason li h3 {
	position: relative;
	font-size: 2.2rem;
	font-weight: 400;
}
@media screen and (max-width: 768px) {
	.top-reason {
		margin-top: -8rem;
		padding: 0 3rem;
	}
	.top-reason .base-width {
		padding: 5rem 2rem 0 2rem;
		width: auto;
	}
	.top-reason ul {
		display: block;
		margin: 0;
	}
	.top-reason li {
		padding: 0 0 3rem 0;
		text-align: center;
	}
	.top-reason li:last-child {
		padding: 0;
	}
}

/* ----------------------------------------------------------------------------------------------------

voice

---------------------------------------------------------------------------------------------------- */
.top-voice {
	padding-top: 8rem;
}
@media screen and (max-width: 768px) {
	.top-voice {
		padding: 6rem 3rem;
	}
}

/* ----------------------------------------------------------------------------------------------------

lesson

---------------------------------------------------------------------------------------------------- */
.lesson_sec {
	padding-top: 5rem;
}
.lesson_sec img {
	position: absolute;
	top: 0;
	left: 0;
}
.lesson_img {
	display: block;
	width: 75%;
	margin: 0 auto;
	padding-bottom: 8rem;
	padding-top: 15%;
}
.lesson_img ul {
	display: flex;
}
.lesson_img li {
	width: 33%;
}
.lesson_img li img {
	/* width: calc(100% / 3); */
	width: 100%;
	position: relative;
}
@media screen and (max-width: 768px) {
	.lesson_sec {
		padding-top: 3rem;
	}
	.lesson_img {
		width: auto;
		padding: 6rem 3rem;
	}
}

/* ----------------------------------------------------------------------------------------------------

access

---------------------------------------------------------------------------------------------------- */
.top-access {
	padding-bottom: 7rem;
	background: var(--bg-grey);
}
.top-access .row {
	display: flex;
}
.top-access .col {
	flex-basis: 50%;
	flex-basis: 100%;
	padding: 0 10rem;
}
.top-access .store-name {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}
.top-access .store-name h3 {
	position: relative;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 2.5rem;
}
.top-access .store-name h3.new {
	padding-left: 5.4rem;
}
.top-access .store-name h3.new::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 4.3rem;
	height: 4.3rem;
	background-repeat: no-repeat;
	background-image: url(../img/new.svg);
	background-size: contain;
}
.top-access .gmap {
	overflow: hidden;
	margin-bottom: 4rem;
	height: 26rem;
	border: solid 0.3rem #fff;
	border-radius: 1rem;
}
.top-access .gmap iframe {
	height: 100%;
}
.top-access table {
	margin-bottom: 3rem;
	border-collapse: collapse;
	width: 100%;
}
.top-access table th,
.top-access table td {
	padding: 1rem;
	vertical-align: middle;
	font-weight: normal;
	border: solid 0.15rem var(--bg-grey);
	background: #fff;
}
.top-access table th {
	width: 8.2rem;
	text-align: center;
	white-space: nowrap;
}
.top-access .foot {
	display: flex;
	justify-content: center;
}
.top-access .foot a {
	display: block;
	max-width: 49rem;
	filter: drop-shadow(0 0.68rem 1.38rem rgba(167,160,156,0.6));
}
@media screen and (min-width: 769px) {
	.top-access table {
		height: 30.2rem;
	}
}
@media screen and (max-width: 768px) {
	.top-access {
	}
	.top-access .row {
		display: block;
		margin: 0;
	}
	.top-access .col {
		padding: 0 0 6rem 0;
	}
	.top-access .col:last-child {
		padding: 0;
	}
	.top-access .gmap {
		height: 32rem;
	}
	.top-access table th {
		width: auto;
	}
}

/* ----------------------------------------------------------------------------------------------------

course

---------------------------------------------------------------------------------------------------- */
.top-course {

}
@media screen and (max-width: 768px) {
	.top-course {

	}
}

/* ----------------------------------------------------------------------------------------------------

price

---------------------------------------------------------------------------------------------------- */
.top-price {
	padding: 8.6rem 0;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-image: url(../img/price-bg.jpg);
	background-size: 100% auto;
}
@media screen and (max-width: 768px) {
	.top-price {
		padding: 5rem 3rem;
	}
}

/* ----------------------------------------------------------------------------------------------------

instructor

---------------------------------------------------------------------------------------------------- */
.c-instructor {

}
@media screen and (max-width: 768px) {
	.c-instructor {
	}
}

/* ----------------------------------------------------------------------------------------------------

faq

---------------------------------------------------------------------------------------------------- */
.top-faq {
	padding-top: 0;
	padding-bottom: 1rem;
}
.top-faq .faq-sec {
	padding-bottom: 2rem;
}
.top-faq .faq-list h3 {
	font-weight: 600;
	font-family: var(--font-serif);
	font-size: 2rem;
	border-bottom: solid 0.2rem var(--pink);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	pointer-events: none;
}
@media screen and (max-width: 768px) {
	.top-faq {
		padding-top: 0;
		padding-bottom: 0px;
	}
}

/* ----------------------------------------------------------------------------------------------------

announcement

---------------------------------------------------------------------------------------------------- */
.announcement {
	text-align: center;
	padding: 80px 20px;
}
.announcement h3 {
	margin-bottom: 20px;
	font-weight: 600;
	font-family: var(--font-serif);
	font-size: 2rem;
}
.announcement .sp {
	display: none;
}
@media screen and (max-width: 768px) {
	.announcement {
		padding: 40px 20px;
	}
	.announcement .sp {
		display: block;
	}
}