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

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

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


/* ---------------------------------------------------
Schedule
-------------------------------------------------- */
.Schedule { background: #f3dfcc; }
.Schedule h1 { color: #f4a570; font-size: 0.938rem; font-weight: 400; text-align: center; letter-spacing: 0.1em; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.Schedule h1::before { content: attr(data-en); font-size: 2.125rem; display: block; margin-bottom: 20px; }
.Schedule #Mainvisual { color: #231815; margin: 0 auto; text-align: center; }
.Schedule h2 { font-size: clamp(1.563rem, 1.406rem + 0.78vw, 2.188rem); margin-top: 55px; line-height: 1.4; }
.Schedule h2::before { content: ""; width: 200px; aspect-ratio: 152 / 57; display: block; background: url(../../images/schoollife/schedule/img_point.svg) no-repeat; background-size: 100% auto; margin: 0 auto 25px auto; /*background: #065792; */ mask: url(../../images/schoollife/schedule/img_point.svg) no-repeat; mask-size: 100% auto; }
.Schedule #Mainvisual p { font-size: 0.938em; line-height: 1.5em; box-sizing: border-box; margin-top: 30px; }

#Schedule { padding-bottom: 100px; }
#Schedule dl { font-size: 1.125em; display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 5%; }
#Schedule .column { max-width: 470px; width: 48%; margin-top: 5%; padding-left: 20px; position: relative; box-sizing: border-box; padding-bottom: 20px; }
#Schedule .column::before { content: ""; width: 1px; height: 100%; background: #fff; position: absolute; left: 20px; }
#Schedule dl dt { color: #fff; margin-top: 40px; padding: 0 20px 10px 20px; position: relative; background: #c5a4cc; }
#Schedule dl dt::before { content: attr(data-month); font-size: 2.500rem; margin-right: 15px; }
/*#Schedule dl dt::after { content: "＋"; color: #38718e; position: absolute; left: -8px; top: 10px; bottom: 0; margin: auto; }*/
#Schedule dl dd { font-size: 0.938rem; color: #231815; line-height: 1.5em; margin-top: 15px; padding: 0 20px; }
#Schedule dl dd + dd { color: #231815; margin-top: 15px; }
#Schedule dl dd img { margin-bottom: 10px; }

.Schedule .photo { background: var(--sub-bg-color); padding: 100px 0; }
.Schedule .photo .inner { display: flex; justify-content: center; flex-wrap: wrap; }
.Schedule .column { width: 50%; }

.Schedule + footer { margin-top: 0; }

/* ---------------------------------------------------
Teacher
-------------------------------------------------- */
.Teacher,.Voice { max-width: 1700px; width: 100%; }
.Teacher h1 { font-size: 1.500rem; text-align: center; margin-top: 50px; }
.Teacher h1 + p { font-size: 0.938em; line-height: 1.5em; margin-top: 25px; text-align: center; }
.Teacher .img { margin-top: 75px; }
.Teacher h1 + p + .img + p { font-size: 0.938em; line-height: 1.5em; margin-top: 45px; text-align: center; }
.Teacher h1 + p + .img + p::before { content: ""; display: block; width: 178px; height: 88px; -webkit-mask: url(../../images/schoollife/schedule/img_point.svg) no-repeat left bottom; mask: url(../../images/schoollife/schedule/img_point.svg) no-repeat left bottom; -webkit-mask-size: 100% auto; mask-size: 100% auto; background: #cbdbdc; margin: 0 auto 30px auto; }

.Teacher .pickup { display: flex; justify-content: space-between; }
.Teacher .pickup .column { max-width: 345px; width: 31%; margin-top: 80px; }
.Teacher .pickup .img:first-of-type { margin: 0 auto; max-width: 294px; width: 100%; }
.Teacher .pickup .img:nth-of-type(2) { margin-top: 30px; }
.Teacher .pickup .name { font-size: 1.375rem; text-align: center; margin-top: 45px; }
.Teacher .pickup .name::before { content: attr(data-en); font-size: clamp(1.438rem, 1.165rem + 0.45vw, 1.563rem); color: var(--sub-font-color); display: block; letter-spacing: 0.1em; margin-bottom: 25px; }
.Teacher .pickup .pos { color: #606060; text-align: center; margin-top: 40px; }
.Teacher .pickup p:not([class]) { font-size: 0.938em; line-height: 1.5em; margin-top: 40px; }

.Teacher .point { font-size: 0.938em; line-height: 2.000em; color: var(--sub-font-color); display: flex; flex-direction: column; margin-top: 100px; }
.Teacher .point::before { content: ""; display: block; width: 90px; height: 60px; -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(--main-bg-color-dark); order: -2; }
.Teacher .point::after { content: ""; display: block; width: 100%; height: 1px; background: var(--sub-font-color); order: -2; margin: 15px 0; }


/* ---------------------------------------------------
Voice
-------------------------------------------------- */
.Voice h1 { font-size: 2.125rem; font-weight: 400; text-align: center; letter-spacing: 0.1em; margin-top: 50px; }
.Voice h1 + p { font-size: 0.938rem; margin-top: 20px; text-align: center; }
.Voice .voice { display: flex; justify-content: space-between; align-items: flex-end; background: url(../../images/bg_logo.svg) no-repeat; background-size: 523px auto; background-position: top left 10px; position: relative; padding: 0 20px 20px 35px; max-width: 1100px; width: 100%; margin: 8% auto 0 auto; box-sizing: border-box; }
.Voice .voice:nth-child(even) { padding: 0 35px 20px 20px; background-position: top right; }
.Voice .voice::before { content: ""; display: block; width: 100%; height: 140px; background: var(--main-bg-color-alpha); position: absolute; left: 0; bottom: 0; z-index: -1; }
.Voice .voice::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 0 50px 100vw; border-color: transparent transparent #FFF transparent; position: absolute; bottom: 90px; transform: scaleY(-1); z-index: -1; }
.Voice .voice:nth-child(even)::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 0 50px 100vw; border-color: transparent transparent #FFF transparent; position: absolute; bottom: 90px; transform: scale(-1,-1); z-index: -1; }
.Voice .voice .img { width: 56%; margin-top: 40px; }
.Voice .voice .txt { margin-bottom: 25px; width: 40%; }
.Voice .voice .txt .bgbox { background: #b59c8a; box-sizing: border-box; color: #FFF; margin-top: 15px; padding: 30px 25px; height: calc(100% - 100px);  }
.Voice .voice:nth-child(even) .txt .bgbox { background: #ed6d2b; }
.Voice .voice .txt .bgbox p { font-size: 1.063rem; line-height: 1.5em; max-width: 270px; margin-left: auto; margin-right: auto; }
.Voice .voice .txt .bgbox p strong { font-size: 1.250rem; }
.Voice .voice .txt .bgbox p + p { margin-top: 30px; font-size: 0.938rem; }
.Voice .btn { max-width: 1100px; width: 95%; margin: 45px auto 0 auto; }
.Voice .btn a { background: var(--sub-bg-color); display: flex; width: 100%; height: 60px; justify-content: center; align-items: center; color: #FFF; border-radius: 10px; }

#Award { margin-top: 10%; }
#Award ul { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; width: 100%; margin: auto; list-style: none; }
#Award ul li { width: 31%; margin-top: 40px; font-size: 0.938rem; }
#Award ul li img { margin-bottom: 10px; }


/* ---------------------------------------------------
Collection
-------------------------------------------------- */
.Collection { max-width: 1700px; width: 100%; background: #EEEFEF; padding-bottom: 100px; }
.Collection #Mainvisual { position: relative; width: 100%; height: 100vh; }
.Collection #Mainvisual::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../images/schoollife/collection/main_img.png) no-repeat top left #EEEFEF; background-size: cover; }
.Collection #Mainvisual .txt { width: 400px; position: absolute; top: auto; bottom: 13%; right: 11%; padding: 20px; margin: auto; background: rgba(238, 238, 238, .5); }
.Collection #Mainvisual .txt h1 { font-size: 2.125rem; font-weight: 400; width: 370px; margin: 0 auto; letter-spacing: 0.2em; }
.Collection #Mainvisual .txt h1::before { content: attr(data-sttl); display: block; font-size: 0.938rem; margin-bottom: 10px; letter-spacing: 0.05em; }
.Collection #Mainvisual .txt p { font-size: 0.938em; line-height: 2.000em; margin-top: 20px; }

.Collection #Photo { background: #EEEFEF; padding: 1px 0 135px 0; }
.Collection ul { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 1; max-width: 1700px; width: 88%; margin: -3% auto 0 auto; }
.Collection ul li:nth-child(1) { width: 53.6%; align-self: flex-end; margin-bottom: -5%; }
.Collection ul li:nth-child(2) { width: 28.3%; margin-right: 6%; margin-top: -0%; }
.Collection ul li:nth-child(3) { width: 33.8%; margin-top: 10%; }
.Collection ul li:nth-child(4) { width: 33.8%; margin-left: 8.5%; margin-right: auto; margin-top: 10%; }
.Collection ul li:nth-child(5) { width: 50.54%; margin-top: 15%; margin-left: 3%; }
.Collection ul li:nth-child(6) { width: 26%; margin-right: 7%; margin-top: 2%; }
.Collection ul li:nth-child(7) { width: 28%; margin-left: auto; position: absolute; bottom: 0; right: 12%; }
.Collection ul li:nth-child(8) { width: 28%; }

#Works { padding: 35px; background: #f29a76; border-radius: 10px; display: flex; justify-content: space-between; }
#Works .column { width: 48.5%; }
#Works h2 { color: #fff; font-size: 2.000em; line-height: 1.231em; letter-spacing: 0.1em; display: flex; justify-content: space-between; align-items: center; }
#Works h2::after { content: ""; width: 110px; height: 110px; background: url(../../images/schoollife/collection/img_coment.svg); background-size: 100% auto; }
#Works p { color: #fff; font-size: 0.938em; line-height: 2.0em; box-sizing: border-box; margin-top: 5px; }

.Collection + footer { margin-top: 0; }


/* ---------------------------------------------------
Salon
-------------------------------------------------- */
.Salon h1 { color: var(--main-font-color); font-size: 0.938rem; font-weight: 400; text-align: center; letter-spacing: 0.1em; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.Salon h1::before { content: attr(data-en); font-size: 2.125rem; color: var(--sub-font-color); display: block; margin-bottom: 20px; }

#Salon h2 { font-size: 1.500rem; line-height: 1.667em; margin-top: 50px; }
#Salon h2::before { content: attr(data-sttl); font-size: 0.938rem; line-height: 1rem; color: #fff; text-align: center; display: block; width: 8em; padding: 10px 0; background: var(--sub-font-color); margin-bottom: 10px; width: 180px; }
#Salon p { font-size: 0.938rem; line-height: 2.000em; box-sizing: border-box; }

.Salon .lecture { display: flex; justify-content: space-between; flex-wrap: wrap; }
.Salon .lecture .column { width: 47.5%; margin-top: 35px; }
.Salon .photo { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 70px; }
.Salon .photo .column { width: 48.5%; }

.Salon .btn { margin-top: 4%; }
.Salon .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-size: 1.000em; font-weight: 400; }
.Salon .hairmakeshow { margin: 100px auto; }
.Salon .hairmakeshow .inner { display: flex; justify-content: space-between; }
.Salon .hairmakeshow .column { width: 52%; margin-top: 20px; }
.Salon .hairmakeshow .right_box { display: flex; flex-direction: column; width: 43%; justify-content: space-between; margin-top: 10px; }
.Salon .hairmakeshow .right_box .img02 { /*width: 300px;*/ margin-top: 30px; }

/* ---------------------------------------------------
Graduate
-------------------------------------------------- */
.Graduate { background: #fff; padding-bottom: 150px; }
.Graduate h1 { color: #38718e; font-size: 0.938rem; font-weight: 400; text-align: center; letter-spacing: 0.1em; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.Graduate h1::before { content: attr(data-en); font-size: 2.125rem; display: block; margin-bottom: 20px; color: #38718e; }
.Graduate .flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
.Graduate .flex .txt p { font-size: 1.500rem; color: #38718e; }
.Graduate .flex .txt ul { font-size: 0.938rem; line-height: 1.429em; color: #38718e; }
.Graduate .flex .txt ul::before { content: attr(data-sub); display: block; }
.Graduate .flex .txt ul li + li::before { content: "-"; display: block; }
.Graduate .flex .img + .txt,.Graduate .flex .txt + .img { margin-top: 30px; }

.Graduate .column01 { width: 56%; margin-top: 50px; }
.Graduate .column01 .txt,.Graduate .column06 .txt { display: flex; justify-content: flex-end; }
.Graduate .column01 p { text-align: center; }
.Graduate .column01 ul,.Graduate .column06 ul,.Graduate .column08 ul { margin-left: 10%; text-align: right; }
.Graduate .column02 { width: 30%; margin-top: 100px; }
/* .Graduate .column02 ul,.Graduate .column03 ul,.Graduate .column04 ul,.Graduate .column05 ul,.Graduate .column07 ul,.Graduate .column07 ul { margin-top: 15px; } */
.Graduate ul { margin-top: 15px; }
.Graduate .column03 { width: 33%; margin-top: 50px; }
.Graduate .column04 { width: 54%; margin-top: 50px; }
.Graduate .column05 { width: 30%; margin-top: 50px; }
.Graduate .column06 { width: 57%; margin-top: 50px; }
.Graduate .column07 { width: 28%; margin-top: 100px; /*order: 10;*/ }
.Graduate .column08 { width: 56%; margin-top: 50px; }

.Graduate + footer { margin-top: 0; }

@media screen and (max-width:1280px) {
	.Collection #Mainvisual .txt { right: 1%; margin: auto; }
}

@media screen and (max-width:960px) {
	#Contents { margin-top: 50px; }
/* ---------------------------------------------------
Schedule
-------------------------------------------------- */
	.Schedule h1 { font-size: 0.750rem; height: 150px; }
	.Schedule h1::before { font-size: 1.625rem; margin-bottom: 10px; }
/*	.Schedule h2 { font-size: 0.813rem; }*/
	.Schedule h2::before { width: 140px; margin: 0 auto 25px auto; }
	.Schedule #Mainvisual p { font-size: 0.875rem; }
	#Schedule dl { font-size: 0.875rem; }
	#Schedule dl dd { font-size: 0.875rem; }

/* ---------------------------------------------------
Teacher
-------------------------------------------------- */
	.Teacher h1 { font-size: 1.500rem; text-align: center; line-height: 1.636em; }
	.Teacher h1 + p { font-size: 0.875rem; text-align: left; }
	.Teacher .img { margin-top: 35px; }
	.Teacher h1 + p + .img + p { font-size: 0.875rem; line-height: 1.5em; margin-top: 35px; text-align: center; }

	.Teacher .pickup p:not([class]) { font-size: 0.875rem; }
	.Teacher .point { font-size: 0.875rem; }
	
/* ---------------------------------------------------
Voice
-------------------------------------------------- */
	.Voice h1 { font-size: 1.625rem; }
	.Voice h1 + p { font-size: 0.875rem; line-height: 1.5em; }
	.Voice .voice .txt .bgbox { padding: 20px 15px; height: calc(100% - 100px);  }
	.Voice .voice .txt .bgbox p { font-size: 1.000rem; }
	.Voice .voice .txt .bgbox p strong { font-size: 1.250rem; }
	.Voice .voice .txt .bgbox p + p { margin-top: 20px; font-size: 0.875rem; }
	.Voice .btn { max-width: 1100px; width: 95%; margin: 25px auto 0 auto; }
	
	#Award ul { font-size: 0.875rem; line-height: 1.3em; }

/* ---------------------------------------------------
Collection
-------------------------------------------------- */
	.Collection #Mainvisual { height: auto; }
	.Collection #Mainvisual::before { display: block; position: static; aspect-ratio: 55 / 42; }
	.Collection #Mainvisual .txt { max-width: 1200px; width: 90%; padding: 0; margin: 55px auto 0 auto; position: static; }
	.Collection #Mainvisual .txt h1 { width: 100%; }
	.Collection #Mainvisual .txt h1 { font-size: 2.500rem; width: 100%; margin: 0 auto; }
	.Collection #Mainvisual .txt h1::before { display: block; font-size: 0.875rem; margin-bottom: 10px; }
	.Collection #Mainvisual .txt p { font-size: 0.875rem; }
	
	.Collection ul { width: 90%; margin-top: 70px; }
	
	#Works h2 { font-size: 1.500rem; }
	#Works p { font-size: 0.875rem; line-height: 1.5em; margin-top: 10px; }
	
/* ---------------------------------------------------
Salon
-------------------------------------------------- */
	.Salon h1 { font-size: 0.750rem; height: 150px; }
	.Salon h1::before { font-size: 1.625rem; margin-bottom: 10px; }
	#Salon h2 { font-size: 1.500rem; margin-top: 50px; }
	#Salon h2::before { font-size: 0.750rem; }
	#Salon p { font-size: 0.875rem; }

/* ---------------------------------------------------
Graduate
-------------------------------------------------- */
	.Graduate h1 { font-size: 0.875rem; height: 150px; }
	.Graduate h1::before { font-size: 1.625rem; }
	.Graduate .flex .txt p { font-size: 1.375rem; line-height: 1.182em; }
	.Graduate .flex .txt ul { font-size: 0.875rem; }
	.Graduate .column01 ul,.Graduate .column06 ul,.Graduate .column08 ul { margin-left: 8%; }
	.Graduate .column07 { width: 30%; margin-top: 0; }

}

@media screen and (max-width:600px) {
	#Contents { margin-top: 50px; }
	img.sp,br.br { display: block; }
	img.pc,br.hide,br.pc { display: none; }
	
/* ---------------------------------------------------
Schedule
-------------------------------------------------- */
	.Schedule #Mainvisual p { text-align: left; }
	#Schedule dl { margin-top: 80px; }
	#Schedule .column { max-width: inherit; width: 100%; margin-top: 0; padding-bottom: 0; }
	#Schedule .column + .column { padding-bottom: 20px; }

	.Schedule .photo { padding: 80px 0 100px; }
	.Schedule .photo .column { width: 100%; }

/* ---------------------------------------------------
Teacher
-------------------------------------------------- */
	.Teacher h1 + p + .img { width: 100vw; margin: 35px calc(50% - 50vw) 0 calc(50% - 50vw); }
	.Teacher .pickup { flex-wrap: wrap; }
	.Teacher .pickup .column { max-width: inherit; width: 100%; }
	.Teacher .point { margin-top: 65px; }

/* ---------------------------------------------------
Voice
-------------------------------------------------- */
	.Voice .voice { flex-wrap: wrap; background-image: none; padding: 0 0 30px 0; margin-top: 50px; }
	.Voice .voice:nth-child(even) { padding: 0 0 30px 0; background-position: top right; }
	.Voice .voice .img { width: 100%; margin-top: 40px; position: relative; z-index: 0; }
	.Voice .voice .txt { width: 100%; margin: 0; position: relative; z-index: 1; }
	.Voice .voice .img::before { content: ""; display: block; position: absolute; top: 5%; left: 5%; height: 44px; }
	.Voice .voice .txt .bgbox { width: 90%; margin: -20px auto 0 auto; height: auto; }
	.Voice .voice .img:nth-child(2) { order: 1; }
	.Voice .voice .txt:nth-child(1) { order: 2; }
	
	#Award { margin-top: 100px; }
	#Award ul li { width: 100%; margin-top: 40px; }
	
/* ---------------------------------------------------
Collection
-------------------------------------------------- */
	.Collection #Mainvisual::before { aspect-ratio: 3 / 4;  background: url(../../images/schoollife/collection/main_img_sp.jpg) no-repeat top left #EEEFEF; background-size: cover; }
	.Collection #Photo { padding: 1px 0 80px 0; }
	.Collection ul { width: 100%; }
	.Collection ul li { margin-top: 30px; }
	.Collection ul li:nth-child(1) { width: 100%; }
	.Collection ul li:nth-child(2) { width: 66.7%; margin: 50px 0 0 auto; }
	.Collection ul li:nth-child(3) { width: 66.8%; margin: 20px auto 0 0; }
	.Collection ul li:nth-child(4) { width: 66.7%; margin: 30px 0 0 auto; }
	.Collection ul li:nth-child(5) { width: 53.5%; margin: 20px 0 0 8%; }
	.Collection ul li:nth-child(6) { width: 48%; margin: -66px 0 0 auto; }
	.Collection ul li:nth-child(7) { width: 69.3%; margin: 40px 0 0 0; position: static; }

	#Works { flex-wrap: wrap; padding: 30px 25px; }
	#Works .column { width: 100%; }
	#Works h2 { color: #fff; font-size: 1.625rem; }
	#Works h2::after { margin-top: -10px; }

/* ---------------------------------------------------
Salon
-------------------------------------------------- */
	.Salon .lecture .column { width: 100%; margin-top: 20px; }
	.Salon .lecture .column + .column { margin-top: 30px; } 
	.Salon .photo { margin-top: 40px; }
	.Salon .photo .column { width: 100%; }
	.Salon .btn { margin-top: 50px; }
  .Salon .hairmakeshow .inner { display: block; }
  .Salon .hairmakeshow .column , .Salon .hairmakeshow .right_box , .Salon .hairmakeshow .right_box .img02 { width: 100%; }

/* ---------------------------------------------------
Graduate
-------------------------------------------------- */
	.Graduate .flex { flex-wrap: wrap; margin-top: 0px; }
	.Graduate .column01 .txt,.Graduate .column06 .txt,.Graduate .column08 .txt { justify-content: space-between; align-items: center; }
	.Graduate .flex .img + .txt,.Graduate .flex .txt + .img { margin-top: 20px; }
	.Graduate .column01 { width: 100%; }
	.Graduate .column01 p { width: 47%; }
	.Graduate .column02 { width: 100%; margin-top: 50px; display: flex; justify-content: space-between; align-items: center; }
	.Graduate .column02 .img,.Graduate .column03 .img,.Graduate .column05 .img { width: 55%; margin-top: 0; }
	.Graduate .column02 .txt { margin-top: 0; }
	.Graduate .column03,.Graduate .column05 { width: 100%; display: flex; justify-content: space-between; align-items: center; }
	.Graduate .column03 .txt,.Graduate .column05 .txt { width: 38%; text-align: right; }
	.Graduate .column04 { width: 100%; }
	.Graduate .column01 ul,.Graduate .column06 ul,.Graduate .column08 ul { margin-left: auto; }
	.Graduate .column06 { width: 100%; margin-top: 50px; }
	.Graduate .column06 p { width: 40%; text-align: center; }
	.Graduate .column07 { width: 100%; margin-top: 50px; order: initial; display: flex; justify-content: space-between; align-items: center; }
	.Graduate .column07 .img { width: 44%; margin-top: 0; }
	.Graduate .column07 .txt { width: 46%; }
	.Graduate .column08 { width: 100%; }
	.Graduate .column08 p { width: 47%; text-align: center; }
}