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

#Contents .inner { max-width: 1200px; width: 90%; margin: auto; box-sizing: border-box; }

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

#Mainvisual h1 { font-weight: 400; height: 300px; display: flex; align-items: center; }
#Mainvisual picture { display: block; }

.flex { display: flex; justify-content: space-between; flex-wrap: wrap; }
.flex .column { width: 47%; margin-top: 50px; }
.flex[data-col="3"] .column { width: 31%; }

:is(#Contents) p:not([class]) { font-size: 0.938rem; line-height: 2.000em; }
h2:not([class]) { font-size: 1.500rem; line-height: 1.667em; margin-top: 50px; }

h2:not([class]) + p { margin-top: 20px; }
h2[data-ttl] { font-size: 2.125rem; letter-spacing: 0.1em; }
h2[data-ttl]::before { content: attr(data-ttl); font-size: 0.938rem; display: block; line-height: 1; letter-spacing: 0.05em; }
.circle { font-size: 0.938rem; line-height: 2.000em; margin-top: 25px; }
.circle li::before { content: "●"; }
h3.bg { font-size: 0.938rem; color: #fff; text-align: center; border-radius: 6px; padding: 15px; margin-top: 50px; }
h3.color { font-size: 1.500rem; line-height: 1.417em; margin-top: 50px; }

.point { font-size: 0.938rem; line-height: 2.000em; display: flex; flex-direction: column; }
.point::before { content: ""; display: block; width: 110px; height: 70px; -webkit-mask: url(../../images/schoollife/schedule/img_point.svg) no-repeat; mask: url(../../images/schoollife/schedule/img_point.svg) no-repeat; -webkit-mask-size: 100% auto; mask-size: 100% auto; background: var(--sub-font-color); order: -2; }
.point::after { content: ""; display: block; width: 100%; height: 1px; background: var(--sub-font-color); order: -2; margin: 15px 0; }
.font-s { font-size: 0.750em!important; }
.btn { margin-top: 25px; }
.btn a { background: #f29b8f; display: flex; width: 100%; height: 60px; justify-content: center; align-items: center; color: #FFF; border-radius: 10px; }

/* ---------------------------------------------------
Beauty course
-------------------------------------------------- */
.Beauty #Mainvisual h1,.Barber #Mainvisual h1 { color: #f29a76; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.Beauty #Mainvisual h1::before,.Barber #Mainvisual h1::before { content: attr(data-en); font-size: 2.125rem; letter-spacing: 0.1em; order: 1; }
.Beauty #Mainvisual h1::after,.Barber #Mainvisual h1::after { content: "COURSE"; font-size: 0.938rem; order: 2; letter-spacing: 0.1em; margin-top: 10px; }
.Beauty #Mainvisual h1 span,.Barber #Mainvisual h1 span { font-size: 0.938rem; color: #fff; letter-spacing: 0.2em; display: block; margin-top: 10px; padding: 5px 1em; background: #f29a76; order: 3; text-indent: 0.2em; }

.Beauty #Lead h3 { margin-top: 50px; }
.Beauty #Lead .column + .column { margin-top: 50px; }
.Beauty h3.bg { background: #f29a76; }
.Beauty #Lead p + h3 { margin-top: 80px; }

.Beauty h3 + p { margin-top: 25px; }
#Elective-class { flex-wrap: wrap; align-items: flex-start; margin-top: 75px; }
#Elective-class h3 { width: 100%; padding: 15px 20px; position: relative; }
#Elective-class h3::before { content: ""; display: block; width: calc(8em + 40px); height: 100%; border: 1px solid var(--sub-font-color); position: absolute; left: 0; top: 0; background: #fff; z-index: -1; border-radius: 10px 10px 0 0; border-bottom: none; }
#Elective-class h3::after { content: ""; display: block; width: calc(100% - (8em + 40px)); height: 1px; position: absolute; right: 0; bottom: -1px; background: var(--sub-font-color); z-index: -2; }
#Elective-class ul { font-size: 0.938em; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 30px; }
#Elective-class ul li { width: 47%; box-sizing: border-box; border: 1px solid var(--sub-font-color); border-radius: 6px; margin-top: 20px; text-align: center; padding: 10px; }
#Elective-class p { font-size: 0.938rem; line-height: 2.000em; }

#Salon { margin-top: 140px; }
#Salon h2[data-ttl] { color: #f29a76; line-height: 1; }
#Salon h2[data-ttl]::before { color: #fff; background: #f29a76; width: 160px; text-align: center; padding: 5px 0; margin-bottom: 15px; }
#Salon .img { margin-top: 25px; }
.Beauty .btn a { background: #f29a76; }

#Create { position: relative; z-index: 0; padding: 75px 0; margin-top: 140px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
#Create::before { content: ""; width: 100vw; height: 100%; position: absolute; top: 0; left: 0; background: #EEEEEF; z-index: -1; margin: 0 calc(50% - 50vw); }
#Create h2 { margin-top: 0; }
#Create .img { width: 30%; margin-top: 0px; position: absolute; left: 0; }
#Create .txt { width: 65%; margin-left: auto; }
#Create .btn { width: 100%; }

#Works { background: #f29a76; padding: 30px 20px; border-radius: 10px; width: 65%; box-sizing: border-box; margin-top: 50px; margin-left: auto; display: flex; justify-content: space-between; }
#Works .column { width: 47.5%; color: #fff; }
#Works h3 { color: #fff; font-size: 1.625rem; line-height: 1.231em; letter-spacing: 0.1em; display: flex; justify-content: space-between; align-items: center; margin-top: 0; }
#Works h3::after { content: ""; width: 110px; height: 110px; background: url(../../images/schoollife/collection/img_coment.svg) no-repeat; background-size: 100% auto; margin-top: -10px; }
#Works p { font-size: 0.875rem; line-height: 1.857em; margin-top: 5px; }

#Creater { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
#Creater .column { margin-top: 100px; }
#Creater .column:not(#monthly) { display: flex; flex-direction: column; width: 53%; }
#Creater .txt { border: 1px solid var(--sub-font-color); border-left: none; border-radius: 0 80px 80px 0; padding: 35px 0; margin-top: -20px; }
#Creater .txt h2 { font-size: 1.750rem; margin-top: 0; }
#Creater .column:not(#monthly) .img { order: -1; }
#Creater .column:not(#monthly) .img-r { width: 60%; margin-left: auto; margin-top: 40px; }
#Creater .column:not(#monthly) .img-l { width: 60%; margin-right: auto; }
#monthly { background: #EEEEEF; border-radius: 6px; padding: 30px 20px; box-sizing: border-box; width: 40%; }
#monthly h3 { font-size: 1.750rem; color: var(--sub-font-color); margin-top: 20px; }
#monthly p + .img { margin-top: 60px; }

/* ---------------------------------------------------
Barber course
-------------------------------------------------- */
.Barber #Mainvisual h1 { color: #a5bec8; }
.Barber #Mainvisual h1 span { background: #a5bec8; }

.Barber h2 { margin: 0; }
.Barber #Lead { position: relative; }
.Barber #Lead::before { content: ""; width: 47%; order: 2; }
.Barber #Lead .column:first-child { order: 1; }
.Barber #Lead .img { position: absolute; top: 0; right: 0; }
.Barber #Lead .column:nth-child(3) { order: 3; }

.Barber h3.bg { background: #a5bec8; }
.Barber h3.color { color: #a5bec8; }
.Barber .circle li { margin-top: 30px; }
.Barber h3.color + p { margin-top: 20px; }
.Barber .point::before { width: 170px; height: 60px; }
.Barber .point::before , .Barber .point::after { background: #a5bec8; }


.graduate { background: #EEEEEF; display: flex; justify-content: space-between; align-items: center; margin-top: 100px; padding-left: 2%; position: relative; }
.graduate::after { content: "graduate"; font-size: 1.125rem; color: #fff; display: flex; align-items: center; justify-content: center; width: 150px; height: 36px; background: #a5bec8; position: absolute; top: -18px; left: 30px; border-radius: 999px; }
.graduate .parson { width: 200px; text-align: center; }
.graduate .parson img { max-width: 200px; width: 90%; display: block; margin: 0 auto; }
.graduate .parson p.name { font-size: 0.750rem; line-height: 1.278rem; margin-top: 20px; }
.graduate .parson p.name::before { content: attr(data-sub); font-size: 0.813rem; color: #a5bec8; display: block; }
.graduate .parson p.name strong { font-size: 1.125rem; }
.graduate .txt { width: calc((100% - 200px) / 2); }
.graduate .txt .shop { font-size: clamp(1.25rem, 0.25rem + 1.67vw, 1.5rem); color: #a5bec8; line-height: 1.250rem; margin-top: 15px; }
.graduate .txt .shop span { font-size: 1.125rem; display: inline-block; margin-top: 10px; }
.graduate .shop_logo { max-width: 110px; margin-top: 10px; background: #fff; padding: 2px 10px; }
.graduate .img { width: calc((92% - 200px) / 2); overflow: hidden; }
.graduate .img img { width: auto; min-height: 330px; height: auto; object-fit: cover; }


/* ---------------------------------------------------
Make course
-------------------------------------------------- */
.Make #Mainvisual h1 { flex-wrap: wrap; align-items: center; justify-content: center; }
.Make #Mainvisual h1 span { display: inline-block; width: 100%; text-align: center; margin-top: 15px; margin-bottom: auto; }
.Make #Mainvisual h1::before { content: attr(data-en); font-size: 2.125rem; color: #f29b8f; letter-spacing: 0.1em; order: -2; margin-top: auto; }
.Make #Mainvisual h1::after { content: "& COLOR COORDINATE"; font-size: 0.938rem; color: #f29b8f; letter-spacing: 0.1em; order: -1; margin-top: auto; }
.Make #Lead p + p { margin-top: 50px; font-size: 1.125rem; }

.Make h3.color,.Braidal h3.color,.Dressing h3.color { color: #f29b8f; }
h3.color + p { margin-top: 20px; }
.Make #Tool { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 100px; position: relative; }
.Make #Tool::after { content: ""; width: 20%; }
.Make #Tool .point { color: #f29b8f; font-size: 1.125rem; align-items: flex-end; flex-direction: row; flex-wrap: wrap; width: 100%; }
.Make #Tool .point::before { background: #f29b8f; order: initial; margin-right: 35px; width: 150px; height: 50px; }
.Make #Tool .point::after { background:#f29b8f; order: initial; }
.Make #Tool .column { width: 60%; margin-top: 25px; }
.Make #Tool .flex { display: flex; }
.Make #Tool .img { width: 20%; position: absolute; top: 0; right: 0; }
.Make #Tool h3 img { width: auto; height: 45px; }
.Make #Tool h3 img:last-child { margin-left: 15px; }
.Make #Tool h3 + p { margin-top: 20px; }

.Make #Basic,.Make #License { margin-top: 100px; }
.Make #Basic h3 { font-size: 1.188rem;  color: #fff; text-align: center; background: #f29b8f; border-radius: 6px; padding: 10px; }
#License { color: #fff; background: #f29b8f; padding: 30px; box-sizing: border-box; }
#License::before { content: ""; display: block; width: 100%; height: 14px; background: url(../../images/course/make/license.svg) center; background-size: auto 100%; }
#License h3 { font-size: 1.375rem; line-height: 1.300em; text-align: center; padding-top: 20px; }
.Make #License h3::before { content: attr(data-ttl); font-size: 1.000rem; display: block; margin-bottom: 10px; }
#License p { margin-top: 20px; }


/* ---------------------------------------------------
Braidal course
-------------------------------------------------- */
.Braidal #Mainvisual h1,.Nail #Mainvisual h1,.Dressing #Mainvisual h1,.Esthetic #Mainvisual h1 { flex-wrap: wrap; align-items: center; justify-content: center; }
.Braidal #Mainvisual h1 span,.Nail #Mainvisual h1 span,.Dressing #Mainvisual h1 span,.Esthetic #Mainvisual h1 span { display: inline-block; width: 100%; text-align: center; margin-top: 15px; margin-bottom: auto; }
.Braidal #Mainvisual h1::before,.Nail #Mainvisual h1::before,.Dressing #Mainvisual h1::before,.Esthetic #Mainvisual h1::before { content: attr(data-en); font-size: 2.125rem; color: #f29b8f; letter-spacing: 0.1em; order: -1; margin-top: auto; }

.Braidal #Lead .txt { width: 100%; }
.Braidal #Show { align-items: flex-start;}
.Braidal #Show h4 { font-size: 1.250rem; margin-top: 70px; font-weight: 400; position: relative; }
.Braidal #Show h4::after { content: ""; max-width: 106px; width: 20%; padding-top: 100%; background: url(../../images/course/braidal/ic_reserve.png) no-repeat; background-size: 100% auto; position: absolute; right: 0; top: -35%; }
.Braidal #Show dl { font-size: 0.875rem; display: flex; align-items: flex-end; flex-wrap: wrap; }
.Braidal #Show dl dt { width: 145px; margin-top: 15px; }
.Braidal #Show dl dt strong { font-size: 3.375rem; margin-right: 10px; }
.Braidal #Show dl dd { width: calc(100% - 145px); margin-top: 15px; }
.Braidal #Show dl + p { margin-top: 20px; }
.Braidal #Show .img { display: flex; }
.Braidal #Show .img img { width: 50%; }
.Braidal #Show #License { margin-top: 50px; }


/* ---------------------------------------------------
Nail course
-------------------------------------------------- */
.Nail h3.bg { background: #f29b8f; margin-top: 0; }


/* ---------------------------------------------------
Dressing course
-------------------------------------------------- */
.Dressing h2::before { content: attr(data-sub); font-size: 0.938rem; color: #fff; text-align: center; display: block; width: 190px; background: #f29b8f; padding: 10px; line-height: 1rem; margin-bottom: 10px; }

#Award { color: #fff; background: #f29b8f; padding: 30px; box-sizing: border-box; margin-top: 100px; align-self: flex-start; }
#Award .img { margin-top: -80px; }
#Award .ttl { font-size: 1.250rem; text-align: center; margin-top: 30px!important; }
#Award .ttl::before { content: attr(data-sub); font-size: 0.938rem; display: block; margin-bottom: 10px; }
#Award .ttl + p { margin-top: 20px; }


/* ---------------------------------------------------
Esthetic course
-------------------------------------------------- */
.Esthetic h3 { font-size: 0.938rem; display: flex; flex-direction: column; }
.Esthetic h3::before { content: attr(data-en); font-size: 2.125rem; line-height: 1.417em; color: #f29b8f; margin-bottom: 5px; }
.Esthetic h3::after { content: ""; width: 1px; height: 40px; background: #f29b8f; order: -1; margin-left: 10px; }
.Esthetic h3 + p { margin-top: 20px; }

@media screen and (max-width:960px) {
	#Contents { margin-top: 50px; }
	#Mainvisual h1 { font-size: 0.750rem; height: 150px; }

	:is(#Contents) p:not([class]) { font-size: 0.875rem; line-height: 1.929em; }
	h2:not([class]) { margin-top: 0; }
	h2:not([class]) + p { margin-top: 20px; }
	h2[data-ttl] { font-size: 1.625rem; }
	h2[data-ttl]::before { font-size: 0.750rem; }
	h3.color { font-size: 1.250rem; }
	.circle { font-size: 0.875rem; }

	.flex[data-col="3"] .column { width: 47%; }
	.flex[data-col="3"] .column:last-child { margin-top: 0; }

/* ---------------------------------------------------
Beauty course
-------------------------------------------------- */
	.Beauty #Mainvisual h1::before,.Barber #Mainvisual h1::before { font-size: 1.625rem; }
	.Beauty #Mainvisual h1::after,.Barber #Mainvisual h1::after { font-size: 0.750rem; }
	.Beauty #Mainvisual h1 span,.Barber #Mainvisual h1 span { font-size: 0.750rem; }
	.Beauty .flex .column + .column { margin-top: 50px; }
	.Beauty h3 { margin-top: 50px; }

	#Elective-class ul { font-size: 0.750rem; }
	#Elective-class p { font-size: 0.875rem; margin-top: 30px; }

	#Salon h2[data-ttl]::before { width: 100px; }

	#Create .img { width: 35%; margin-top: 0px; position: static; order: -1; }
	#Create .txt { width: 60%; margin-left: auto; }
	#Works { width: 100%; }
	#Works p { font-size: 0.875rem; line-height: 1.857em; margin-top: 5px; }
	#Works h3 { font-size: 1.625rem; }
	
	#Creater .txt h2 { font-size: 1.500rem; }
	#monthly h3 { font-size: 1.500rem; }
	
/* ---------------------------------------------------
Barber course
-------------------------------------------------- */
	.Barber #Lead .column:nth-child(3) { width: 100%; }

	.graduate { flex-wrap: wrap; align-items: flex-start; margin-top: 60px; padding: 50px 30px; }
	.graduate::after { left: 0; right: 0; margin: auto; }
	.graduate .parson { width: 100%; margin: 0 auto; }
	.graduate .parson img { max-width: initial; width: 280px; }
	.graduate .parson p.name { margin-top: 10px; }
	.graduate .txt { width: 47%; margin-top: 50px; }
	.graduate .txt .shop { font-size: clamp(1rem, 0.167rem + 2.22vw, 1.5rem); }
	.graduate .img { width: 47%; margin-top: 50px; }
	.graduate .img img { min-height: initial; object-fit: inherit; }
	
/* ---------------------------------------------------
Make course
-------------------------------------------------- */
	.Make #Mainvisual h1::before { font-size: 1.625rem; }
	.Make #Mainvisual h1::after { font-size: 0.875rem; }
	.Make #Lead p + p { margin-top: 0; font-size: 0.875rem; }

	.Make #Tool .column { margin-top: 25px; }
	#License h3 { font-size: 1.250rem; }
	.Make #License h3::before { font-size: 0.750rem; }
  .Make #Tool h3 img { height: 30px; }

/* ---------------------------------------------------
Braidal course
-------------------------------------------------- */
	.Braidal #Mainvisual h1,.Nail #Mainvisual h1,.Dressing #Mainvisual h1,.Esthetic #Mainvisual h1 { font-size: 0.875rem; }
	.Braidal #Mainvisual h1::before,.Nail #Mainvisual h1::before,.Dressing #Mainvisual h1::before,.Esthetic #Mainvisual h1::before { font-size: 1.625rem; }

/* ---------------------------------------------------
Dressing course
-------------------------------------------------- */
	.Dressing h2,.Esthetic h2 { margin-top: 50px; }

/* ---------------------------------------------------
Esthetic course
-------------------------------------------------- */
	.Esthetic h3 { font-size: 0.750rem; }
	.Esthetic h3::before { font-size: 1.625rem; }
}


@media screen and (max-width:600px) {
	#Contents { margin-top: 50px; }
	img.sp,br.br { display: block; }
	img.pc,br.pc { display: none; }
	
	.flex { flex-wrap: wrap; }
	.flex .column { width: 100%; }
	.flex[data-col="3"] .column { width: 100%; margin-top: 0; }

/* ---------------------------------------------------
Beauty course
-------------------------------------------------- */
	#Create { padding: 55px 0; margin-top: 70px; }
	#Create .img { width: 100%; margin-top: 20px; order: inherit; }
	#Create .txt p { margin-top: 10px; }
	#Create .img { width: 100%; margin-top: 20px; position: static; }
	#Create .txt { width: 100%; margin-left: auto; }

	#Works { width: 100%; margin-top: 40px; padding: 30px 25px; flex-wrap: wrap; }
	#Works .column { width: 100%; }
	#Works h3::after { margin-top: -10px; }

	#Creater .column:not(#monthly) { width: 100%; }
	#Creater .txt { border: none; padding: 20px 0; border-radius: 0; margin-top: -20px; position: relative; }
	#Creater .txt::before { content: ""; width: calc(100% + 6%); height: 100%; border: 1px solid var(--sub-font-color); border-left: none; border-radius: 0 70px 70px 0; position: absolute; left: -6%; top: 0; }
	#Creater .column:not(#monthly) .img { order: inherit; margin-top: 50px; }
	#Creater .column:not(#monthly) .img-r { width: 100%; margin-top: 0; }
	#Creater .column:not(#monthly) .img-l { width: 100%; }
	#monthly { width: 100%; }
	#monthly p + .img { margin-top: 60px; }
	
	
/* ---------------------------------------------------
Barber course
-------------------------------------------------- */
	.Barber #Lead::before { display: none; }
	.Barber #Lead .img { position: static; order: 2; }

	.graduate { z-index: 0; padding: 50px 0; }
	.graduate::before { content: ""; width: 100vw; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: #EEEEEF; margin: 0 calc(50% - 50vw); }
	.graduate .txt { width: 100%; margin-top: 25px; }
	.graduate .txt .shop { font-size: 1.500rem; display: inline-block; margin-top: 30px; }
	.graduate .img { width: 100%; margin-top: 25px; }
	.graduate .img img { min-height: initial; object-fit: inherit; }

		
/* ---------------------------------------------------
Make course
-------------------------------------------------- */
	.Make h3.color + p { margin-top: 10px; }
	.Make #Tool::after { display: none; }
	.Make #Tool .point { order: 1; }
	.Make #Tool .point::before { order: -2; margin-right: 0px; }
	.Make #Tool .point::after { order: -1; }
	.Make #Tool .img { width: 100%; position: static; order: 2; margin-top: 10px; }
	.Make #Tool .column { width: 100%; order: 3; margin-top: 30px; }
	.Make #Tool h3 + p { margin-top: 10px; }

	.Make #Basic,.Make #License { margin-top: 80px; }
	.Make #License { margin-top: 50px; padding: 25px 10px; }

	
/* ---------------------------------------------------
Braidal course
-------------------------------------------------- */
	.Braidal #Lead .column:nth-child(3) { margin-top: 0; }
	.Braidal #Show h3 { margin-top: 0; }
	.Braidal #Show .column:first-child h3 + p::after { content: ""; display: block; width: 100%; background: url(../../images/course/braidal/img_braidal03.png) no-repeat; background-size: 100% auto; aspect-ratio: 133 / 207; margin-top: 20px; }
	.Braidal #Show h4::after { width: 106px; top: -35px; }
	.Braidal #Show .img { display: block; margin-top: 100px; }
	.Braidal #Show .img img { width: 100%; }
	.Braidal #Show .img img:first-child { display: none; }

	
/* ---------------------------------------------------
Nail course
-------------------------------------------------- */
	

/* ---------------------------------------------------
Dressing course
-------------------------------------------------- */	
	
	
/* ---------------------------------------------------
Esthetic course
-------------------------------------------------- */
	.Esthetic #Mainvisual h1::before { width: 290px; text-align: center; }
	.Esthetic h3 { text-align: center; }
	.Esthetic h3::before { margin: 5px 0; }
	.Esthetic h3::after { margin: 0 auto; }
	.Esthetic .column:nth-child(1) { order: 2; }
	.Esthetic .column:nth-child(2) { order: 1; }
	.Esthetic .column:nth-child(3) { order: 3; }
	.Esthetic .column:nth-child(4) { order: 4; }
	.Esthetic .column:nth-child(5) { order: 6; }
	.Esthetic .column:nth-child(6) { order: 5; }
	.Esthetic .column:nth-child(1),.Esthetic .column:nth-child(4),.Esthetic .column:nth-child(5) { margin-top: 20px; }
	
}