@charset "UTF-8";
/* CSS Document */

#Head .ttl { background: var(--main-bg-color-alpha); height: 300px; display: flex; align-items: center; padding-left: 80px; position: relative; }
h1 { border-left: 4px solid var(--font-color); font-size: 0.938em; font-weight: 400; color: var(--font-color); padding-left: 15px; letter-spacing: 0.1em; }
h1 strong { font-size: 2.125rem; display: inline-block; margin-bottom: 10px; }
#Head nav,#Mainvisual { max-width: 1700px; width: 100%; position: relative; z-index: 2; }
#Head nav ul { max-width: 1700px; width: 90%; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; box-sizing: border-box; font-size: 1.250em; }
#Head nav ul li { width: 25%; box-sizing: border-box; }
#Head nav ul li + li { border-left: 1px solid #FFF; }
#Head nav ul li a { display: flex; justify-content: center; align-items: center; background: var(--main-bg-color-alpha); color: var(--font-color); height: 100px; }
#Head nav ul li a.active { background:#956e50; color:#fff; }

.inner { max-width: 1200px; width: 90%; margin-left: auto; margin-right: auto; box-sizing: border-box; }
h2 { color: var(--sub-font-color); font-size: 1.500em; margin-top: 75px; border-left: 9px solid var(--sub-font-color); padding: 10px 0 10px 20px; }
h2 span { font-size: 1.125rem; vertical-align: middle; list-style: 1; }
h2 + p { font-size: 0.938em; line-height: 1.8em; font-weight: 300; margin-top: 30px; }

img.sp,br.br { display: none; }

/* ---------------------------------------------------
Features
-------------------------------------------------- */
.Features .features,#Greeting { max-width: 1700px; width: 100%; }
.Features .features .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 1200px; width: 90%; margin: auto; counter-reset: number 0; }
.Features .img { max-width: 600px; width: 60%; margin-top: 100px; }
.Features .txt { width: 34.5%; }
.Features h2 { color: var(--main-font-color); border: none; padding: 0; text-align: center; line-height: 1.5em; font-size: 1.500rem; font-weight: 400; display: flex; flex-direction: column; }
.Features .txt h2::before { content: ""; display: block; counter-increment: number 1; content: "0"counter(number); font-size: 1.875rem; color: var(--sub-font-color); letter-spacing: 0.2em; line-height: 1; order: -2; margin-left: 0.2em; margin-bottom: 10px; }
.Features .txt h2::after { content: "ABOUT MHAA"; font-size: 0.938rem; color: var(--sub-font-color); order: -1; letter-spacing: 0.1em; margin-bottom: 30px; line-height: 1; }
.Features p { font-size: 0.938rem; line-height: 1.8em; margin-top: 30px; }
.Features .btn { width: 100%; margin-top: 25px; }
.Features .btn a { background: var(--sub-font-color); display: flex; width: 100%; height: 60px; justify-content: center; align-items: center; color: #FFF; border-radius: 10px; font-weight: 400; }
.Features #Pass-rate { width: 100%; }
.Features h3 { font-size: 1.125rem; }
.Features dl { display: flex; justify-content: space-between; flex-wrap: wrap; }
.Features dl div { width: 23%; display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.Features dl dt { color: #fff; font-size: 0.938em; width: 70px; height: 30px; display: flex; align-items: center; justify-content: center; background: #B1B6B8; }
.Features dl dd { font-size: 1.625em; width: calc(95% - 70px); }

/* ---------------------------------------------------
Greeting
-------------------------------------------------- */
#Greeting .inner { max-width: 1100px; width: 90%; margin: 70px auto 0 auto; }
#Greeting h3 { color: var(--sub-font-color); font-size: 1.125em; margin-top: 30px; }
#Greeting p { font-size: 0.938rem; line-height: 1.8em; font-weight: 300; margin-top: 10px; }

#History { max-width: 1100px; width: 90%; margin: 0 auto; }
#History dl { font-size: 0.938em; display: flex; justify-content: flex-start; flex-wrap: wrap; line-height: 1.8em; margin-top: 30px; }
#History dl dt { width: 8em; }
#History dl dd { width: calc(100% - 8em); }

/* ---------------------------------------------------
Facilities
-------------------------------------------------- */
#Facilities,#Salon { max-width: 1700px; width: 100%; }
#Facilities .inner,#Salon .inner { max-width: 1200px; margin: 0 auto; }
#Facilities .photo { display: flex; justify-content: space-between; flex-wrap: wrap; }
#Facilities .photo .column { width: 48%; margin-top: 60px; }

#Salon { margin-top: 120px; }
#Salon h2 { color: var(--main-font-color); border: none; padding: 0; }
#Salon .ttl { font-size: 1.500rem; text-align: center; font-weight: 400; }
#Salon .ttl + p { font-size: 0.938rem; text-align: center; line-height: 1.8em; margin-top: 20px; }
#Salon .salon { margin-top: 35px; display: flex; justify-content: space-between; flex-wrap: wrap; }
#Salon .salon .l_img { width: 100%; }
#Salon .salon .img { width: 48%; margin-top: 30px; }
#Salon .salon .txt { width: 49%; margin-top: 30px; }
#Salon .salon .txt .ttl { font-size: 1.625rem; text-align: left; line-height: 1.3em; }
#Salon .salon .txt .ttl + p { text-align: left; margin-top: 10px; }
#Salon .salon .txt .link { font-family: din-condensed, sans-serif; font-style: normal; font-weight: 300; font-size: 1.563rem; margin-top: 10px; }
#Salon .salon + .salon { margin-top: 130px; }

/* ---------------------------------------------------
Access
-------------------------------------------------- */
#Access { max-width: 1700px; width: 100%; }
.station { display: flex; justify-content: flex-start; }
.station .column { max-width: 400px; width: 45%; }
.station .column + .column { margin-left: 40px; }
.station h3 { font-size: 1.250em; margin: 50px auto 0 auto; width: 120px; height: 120px; background: #fff; border: 1px #F2A59C solid; text-align: center; color: #F2A59C; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1.2em; }
.station ul { font-size: 0.938em; margin-top: 25px; }
.station ul li { padding-left: 40px; line-height: 1.8em; position: relative; }
.station ul li::before { content: ""; display: block; width: 17px; height: 17px; background: #F2A59C; position: absolute; border-radius: 50%; left: 0; top: 7px; z-index: 1; }
.station ul li::after { content: ""; display: block; width: 1px; height: calc(100% + 20px); top: 7px; left: 8px; margin: auto; position: absolute; background: #F2A59C; }
.station ul li:last-child:after { display: none; }
.station ul li + li { margin-top: 20px; }

#Access .img { max-width: 760px; width: 100%; margin-top: 50px; }

#Map { margin-top: 90px; height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; max-width: calc(1700px - 5%); width: 95%; margin-left: 5%; }
#Map iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }

@media screen and (max-width:960px) {
	#Head { margin-top: 50px; }
	#Head .ttl { height: 108px; padding-left: 2.5%; align-items: flex-start; padding-top: 20px; box-sizing: border-box; }
	h1 { font-size: 0.750rem; }
	h1 strong { font-size: 1.375rem; display: inline-block; margin-bottom: 10px; }
	#Head nav,#Mainvisual { display: none; }
	
	h2 { font-size: 1.375rem; border-width: 6px; }
	h2 span { font-size: 0.750rem; }
	h2 + p { font-size: 0.875rem; margin-top: 20px; }

/* ---------------------------------------------------
Features
-------------------------------------------------- */
	.Features .img { max-width: 600px; width: 50%; }
	.Features .txt { width: 40%; margin-top: 0; }
	.Features .txt h2::before { font-size: 1.625rem; }
	.Features .txt h2::after { font-size: 0.750rem; }
	.Features p { font-size: 0.875rem; }
	.Features dl div { width: 32%; }
	.Features dl::after { content: ""; width: 32%; }
	.Features dl dt { font-size: 0.750rem; }
	
/* ---------------------------------------------------
Greeting
-------------------------------------------------- */
	#Greeting h3 { font-size: 0.938rem; }
	#Greeting p { font-size: 0.875rem; }
	#History dl { font-size: 0.875rem; }
	
/* ---------------------------------------------------
Facilities
-------------------------------------------------- */
	#Salon .ttl + p { font-size: 0.875rem; }
	#Salon h2 { font-size: 1.000rem; }
	#Salon .salon { margin-top: 15px; } 
	#Salon .salon .txt .ttl { font-size: 1.250rem; }
	#Salon .salon .txt .link { font-size: 1.250rem; }
	#Salon .salon .txt .ttl + p { font-size: 0.875rem; }
	
/* ---------------------------------------------------
Access
-------------------------------------------------- */
	.station h3 { font-size: 1.000rem; }
	.station { justify-content: space-between; }
	.station .column { max-width: inherit; width: 47%; }
	.station ul { font-size: 0.875rem; }
	.station .column + .column { margin-left: 0; }
	.station ul li { padding-left: 30px; }
	.station ul li:last-child::after { content: ""; display: block; width: 17px; height: 17px; background: #FFF; position: absolute;left: 0; top: 24px; z-index: 1; }

	#Map { width: 100%; margin-left: 0; }
	
}


@media screen and (max-width:600px) {
	h1 { padding-left: 10px; }
	h2 { padding: 7px 0 7px 10px; }
	
	img.sp,br.br { display: block; }
	img.pc { display: none; }
	
/* ---------------------------------------------------
Features
-------------------------------------------------- */
	.Features .img { width: 100%; margin-top: 30px; }
	.Features .txt { width: 100%; position: relative; }

	.Features #Exam { order: 1; }
	.Features #Exam + .img { order: 2; }
	.Features .btn { order: 3; }
	.Features #Pro { order: 4; }
	.Features .btn + .img { order: 5; }
	.Features #Polite { order: 5; }
	.Features #Polite + .img { order: 6; }
	.Features #Pass-rate { order: 7; }
	.Features dl div { width: 48%; }

/* ---------------------------------------------------
Greeting
-------------------------------------------------- */
	#Greeting .inner { flex-wrap: wrap; margin: 40px auto 0 auto; }
	#History dl dt { width: 6em; }
	#History dl dd { width: calc(100% - 6em); }
	
/* ---------------------------------------------------
Facilities
-------------------------------------------------- */
	#Facilities .photo .column { width: 100%; margin-top: 30px; }

	#Salon { margin-top: 70px; }
	#Salon .ttl { line-height: 1.3em; }
	#Salon .salon .img { display: none; }
	#Salon .salon .txt { width: 100%; margin-top: 30px; }
	#Salon .salon + .salon { margin-top: 50px; }

/* ---------------------------------------------------
Access
-------------------------------------------------- */
	.Access h2 { margin-top: 30px; }
	.Access h2 + p { margin-top: 10px; }
	
	.station { flex-wrap: wrap; flex-direction: column; align-items: center; }
	.station .column { max-width: 320px; width: 100%; }
	.station .column + .column { margin-left: 0; }
	.station ul li { padding-left: 25px; }
	.station ul li::before { width: 13px; height: 13px; }
	.station ul li::after { left: 6px; }
	.station h3 { width: 84px; height: 84px; font-size: 0.875rem; line-height: 1.3em; }

}