@charset "utf-8";

/*元のスタイルをリセット*/

#visual { background: none; background-size: unset; width: auto; height: auto; max-height: unset; overflow: unset; position: static; background-position: unset;}
.top_page section { position: static;}
.top_page h2 { writing-mode: unset; position: static; color: unset; font-size: unset; text-align: unset;}
.top_page h2::after { display: none;}

/*元のスタイルをリセットここまで*/



/*共通の基本スタイルを適用*/

.top_page h2 { line-height: inherit;}
.top_page h2.center { text-align: center;}
.top_page h2.fs_625 { font-size: 625%;}
.top_page h2.fs_200 { font-size: 200%;}
.top_page h2.c_white { color: white;}
.top_page h2.c_brick { color: var(--c_brick);}
.top_page h2 span { display: inline; color: inherit; font-weight: inherit; font-size: inherit;}
.btn01 a { text-align: center;}
@media(max-width:999px){
	.top_page h2.fs_625 { font-size: 500%;}
}
@media(max-width:799px){
	.top_page h2.fs_625 { font-size: 400%;}
}
@media(max-width:499px){
	.top_page h2.fs_625 { font-size: 300%;}
}
@media(max-width:399px){
	.top_page h2.fs_625 { font-size: 250%;}
}

/*共通の基本スタイルを適用ここまで*/



#container { background: #f6f6f6 url(../images/front/bg01.jpg) no-repeat left top; background-size: 100%; background-attachment: fixed;}



#visual { width: 90vw; justify-content: center; margin-inline: auto; padding-block: clamp( 2em, 5vw, 5em );}
#visual .txt_area { width: 40%; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 2em; font-size: 180%; text-align: center;;}
#visual .img_area { width: 60%; max-width: 2048px; justify-content: center; align-content: center;}
#visual .txt_area .tate { writing-mode: vertical-rl; letter-spacing: .2em;}
#visual .txt_area .logo_area img { width: 6em;}
#visual .txt_area .logo_area span { font-size: 50%;}
#visual .img_area > div { width: 50%;}

@media(max-width: 899px) {
	#visual .txt_area { width: calc( 60% - 2em ); margin-right: auto;}
	#visual .img_area { width: 40%;}
	#visual .img_area > div { width: 100%;}
	#visual .txt_area .tate { margin: 0;}
}

@media(max-width: 799px) {
	#visual { padding-top: calc( 50px + clamp( 2em, 5vw, 5em ) );}
}

@media(max-width: 499px) {
	#visual .txt_area { font-size: 150%; width: calc( 50% - 1em );}
	#visual .img_area { width: 50%;}
}



.sctn_intro > .inr { max-width: 1200px;}
.sctn_intro .img_area { width: 50%; max-width: 500px;}
.sctn_intro .txt_area { width: 50%; min-width: calc( 100% - 500px ); gap: 1em; align-content: center; padding: clamp( 1.5em, 3vw, 4em );}
.sctn_intro .txt_area .btn01 { width: 100%;}

@media(max-width: 999px) {
	.sctn_intro > .inr { padding: clamp( 1.5em, 4vw, 2em );}
	.sctn_intro .img_area { width: 100%; margin: 0 auto 1.5em;}
	.sctn_intro .txt_area { width: 100%; padding: 0;}
	.sctn_intro .txt_area p { text-align: center; margin-inline: auto;}
	.sctn_intro .txt_area p br.pc { display: none;}
}



.sctn_concept h2 { width: 80vw; max-width: 1600px; margin-inline: auto;}
.sctn_concept > .inr { position: relative;}
.sctn_concept .txt_area { width: clamp( 600px, calc( 50% + 2em ), 900px ); position: relative; z-index: 3; margin: 0 -2em 5em auto; line-height: 2.2; padding: clamp( 1.5em, 5vw, 6em );}
.sctn_concept .txt_area > *:last-child { margin-bottom: 0;}
.sctn_concept .img_area { width: calc( 50% - 2em ); position: relative;}
.sctn_concept .img_area .img_small { width: clamp( 200px, 60%, 360px); aspect-ratio: 1 / 1; position: absolute; top: -4em; left: 6em; z-index: 2;}
.sctn_concept .img_area .img_large { width: 100%; max-width: 800px; aspect-ratio: 5 / 3.5; position: absolute; left: -2em; bottom: 0; z-index: 2;}
.sctn_concept .img_area img { display: block; width: 100%; height: 100%; object-fit: cover;}
.sctn_concept .illust_area { position: absolute; z-index: 1; right: 0; top: 0; opacity: .3; width: 35vw;}

@media(max-width: 1299px) {
	.sctn_concept .txt_area { width: 100%; margin: 0 auto;}
	.sctn_concept .img_area { width: 100%;position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 2%; padding: 1em; height: 100%;}
	.sctn_concept .img_area .img_small { position: static; width: 38%; margin: 0 auto auto 0;}
	.sctn_concept .img_area .img_large { position: static; width: 60%; margin: auto 0 0 auto;}
	.sctn_concept .illust_area { z-index: 3;}
}

@media(max-width: 599px) {
	.sctn_concept .img_area { flex-wrap: wrap;}
	.sctn_concept .img_area .img_small { width: 60%;}
	.sctn_concept .img_area .img_large { width: 80%;}
}




.sctn_commitment > .inr { max-width: 1200px; padding: clamp( 1.5em, 5vw, 6em );}
.sctn_commitment h2 { margin-bottom: 1em;}
.sctn_commitment h2 .small { font-size: 80%;}
.sctn_commitment .commit_wrap { align-items: center;}
.sctn_commitment .commit_wrap:nth-of-type(odd) { flex-direction: row-reverse;}
.sctn_commitment .commit_wrap .txt_area { width: calc( 50% + 3rem ); padding-block: 2em;}
.sctn_commitment .commit_wrap .img_area { width: calc( 50% - 3rem );}
.sctn_commitment .commit_wrap .txt_area h3 { border-bottom: solid var(--c_pink) clamp( 2px, .25em, 4px ); padding-bottom: 1em; margin-bottom: 1.5em;}
.sctn_commitment .commit_wrap .txt_area > *:last-child { margin-bottom: 0;}
.sctn_commitment .commit_wrap:nth-of-type(odd) .txt_area > * { padding-left: 6rem;}
.sctn_commitment .commit_wrap:nth-of-type(even) .txt_area > * { padding-right: 6rem;}
.sctn_commitment .commit_wrap + .btn01 { margin-top: clamp( 1.5em, 4vw, 4em );}

@media(max-width:999px) {
	.sctn_commitment .commit_wrap .txt_area { width: 65%; padding-block: 2em;}
	.sctn_commitment .commit_wrap .img_area { width: 35%;}
	.sctn_commitment .commit_wrap:nth-of-type(odd) .txt_area > * { padding-left: 2rem;}
	.sctn_commitment .commit_wrap:nth-of-type(even) .txt_area > * { padding-right: 2rem;}
}

@media(max-width:799px) {
	.sctn_commitment .commit_wrap .txt_area { width: 100%; padding-block: 1em;}
	.sctn_commitment .commit_wrap:nth-of-type(odd) .txt_area > * { padding-left: 0;}
	.sctn_commitment .commit_wrap:nth-of-type(even) .txt_area > * { padding-right: 0;}
	.sctn_commitment .commit_wrap .img_area { width: 50%; margin: 1em auto; text-align: center;}
}



.gallery_wrap ul li.slick-slide { margin-inline: clamp( 10px, 3vw, 20px );}
.gallery_wrap .slick-dotted.slick-slider { margin-bottom: 4em;}
.gallery_wrap .slick-dots { bottom: -3em;}



.sctn_suggest > .inr, .sctn_recommend > .inr { max-width: 1000px;}
.rcm_wrap { gap: 1em 3em; margin-block: clamp( 2em, 6vw, 4em ); padding: clamp( 1.5em, 3vw, 3em ); border-radius: 2em; align-items: center; position: relative;}
.rcm_wrap .number { width: 11.25em; position: absolute; top: calc( -1 * ( clamp( 1em, 3vw, 2em ) ) ); left: calc( -1 * ( clamp( 1em, 3vw, 2em ) ) );}
.rcm_wrap .list_check { margin-left: 5em;}
.sctn_suggest .btn02 { margin-left: auto;}
.sctn_recommend .rcm_hdr { align-items: center; gap: 1em 3em;}
.sctn_recommend .rcm_hdr .arrow { transform: rotate( -90deg ) scaleX( 200% );}
.sctn_recommend .rcm_hdr p { margin: 0;}
.sctn_recommend .rcm_hdr .menu_name { border-block: solid 1px var(--c_gray); padding-block: 1em; width: 100%; margin-bottom: 1.5em;}
.sctn_recommend .rcm_menu { gap: 1em 3em;}
.sctn_recommend .rcm_menu .img_area { width: 30%;}
.sctn_recommend .rcm_menu .txt_area { width: calc( 70% - 3em );}
.sctn_recommend .rcm_menu .txt_area .price { margin: 2em 0 0; line-height: 1.2;}
.sctn_recommend .rcm_menu .txt_area .price .reg_price::after { content: ""; display: inline-block; width: auto; height: 1em; aspect-ratio: 70 / 31; background: url(../images/arrow.png) no-repeat center center; background-size: contain; margin-inline: 1em;}
.sctn_recommend .rcm_menu .txt_area .price .c_brick { font-size: 120%;}

@media(max-width: 999px) {
	.rcm_wrap .number { width: 10em;}
	.sctn_recommend .rcm_hdr { gap: 1em;}
	.rcm_wrap .list_check { margin-left: 4em;}
	.sctn_recommend .rcm_hdr .fs_225 { font-size: 180%;}
}

@media(max-width: 799px) {
	.sctn_recommend .rcm_hdr { justify-content: center; gap: 0; overflow: hidden;}
	.sctn_recommend .rcm_hdr .arrow { transform: rotate( 0deg ) scaleX( 200% ); width: 100%;}
}

@media(max-width: 599px) {
	.sctn_recommend .rcm_menu .img_area { width: 60%; margin-inline: auto;}
	.sctn_recommend .rcm_menu .txt_area { width: 100%;}
}

@media(max-width: 399px) {
	.rcm_wrap .number { width: 30vw;}
	.rcm_wrap .list_check { margin-left: 2em;}
}



.sctn_pickup > .inr { max-width: 1200px; background: rgba(255,255,255,.6); position: relative; padding: 6.25em clamp( 1.5em, 5vw, 5em ) clamp( 1.5em, 5vw, 5em );}
.sctn_pickup > .inr h2 { position: absolute; top: -1em; left: 0; right: 0;}
.sctn_pickup .pickup_wrap ul { justify-content: center; gap: 4em;}
.sctn_pickup .pickup_wrap ul li { width: calc( 50% - 2em ); padding: clamp( 1.5em, 4vw, 4em ); padding-bottom: calc( 4em + clamp( 1.5em, 4vw, 4em ) ); position: relative;}
.sctn_pickup .pickup_wrap ul li h3 { margin-bottom: .2em;}
.sctn_pickup .pickup_wrap ul li .btn01 { position: absolute; left: clamp( 1.5em, 4vw, 4em ); right: clamp( 1.5em, 4vw, 4em ); bottom: clamp( 1.5em, 4vw, 4em );}
.sctn_pickup .btn_area ul { width: 90vw; margin: clamp( 2em, 5vw, 5em ) auto 0; justify-content: center; gap: 1em clamp( 1em, 3vw, 2em );}
.sctn_pickup .btn_area li { width: calc( ( 100% - clamp( 2em, 6vw, 4em ) ) / 3 ); max-width: 400px;}

@media(max-width:1099px) {
	.sctn_pickup .pickup_wrap ul li h3.fs_225 { font-size: 180%;}
}

@media(max-width:899px) {
	.sctn_pickup .pickup_wrap ul li { width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
}

@media(max-width:799px) {
	.sctn_pickup .btn_area li { width: 100%;}
}



.sctn_review { background: rgba(248,231,230,.6);}
.sctn_review .sctn_hdr { align-items: flex-end; gap: 3em; width: 80vw; margin: 3em auto; line-height: 1;}
.sctn_review .sctn_hdr p { padding: .5em .8em; margin-bottom: .5em;}
.review_wrap li.slick-slide { display: inline-flex; margin-inline: clamp( 10px, 3vw, 20px ); vertical-align: top;}
.review_wrap li.slick-slide .count_area { width: 4rem; text-align: center;}
.review_wrap li.slick-slide .review_body { width: calc( 100% - 4rem ); padding: 1.5em; flex-direction: column-reverse;}
.review_hdr h3 { border-block: solid 1px currentColor; padding-block: .8em; margin-bottom: .8em;}
.review_hdr h3 .small { font-size: 90%;}
.review_hdr .rating { gap: 0 1em; font-size: 80%;}
.review_wrap .slick-dotted.slick-slider { margin-bottom: 4em;}
.review_wrap .slick-dots { bottom: -3em;}

@media(max-width:599px) {
	.review_wrap li.slick-slide .count_area { width: 100%; text-align: left; line-height: 1; padding: .3em;}
	.review_wrap li.slick-slide .review_body { width: 100%; line-height: 1.6;}
}



.sctn_news { padding-top: 0;}
.sctn_news .sctn_hdr { background: url(../front/bg02.png) no-repeat center center; background-size: cover; padding: clamp( 2em, 5vw, 8em ) clamp( 2em, 5vw, 5em );}
.sctn_news .sctn_hdr h2 { background: rgba(255,255,255,.5); letter-spacing: .05em; width: 10em; max-width: 100%; margin-inline: auto; padding: .5em;}
.bg_sheergray { background: rgba(45,45,45,.4);}
.bg_sheergray .inr { width: 90vw; margin-inline: auto; padding: clamp( 2em, 5vw, 5em ) 0;}
.bg_sheergray h3 { width: 100%; margin-bottom: .5em;}
.front_news_area { align-items: center; max-width: 1400px;}
.front_news_area .news_area_hdr { width: clamp( 300px, 50%, 700px ); padding-inline: 3vw;}
.front_news_area .news_area_body { width: calc( 100% - clamp( 300px, 50%, 700px ) );}
.front_news_list li { border-bottom: dotted 1px currentColor; padding-block: 2px;}
.front_news_list li a { padding-block: 1em; display: flex; flex-wrap: wrap; gap: 0 2em; align-items: baseline;}
.front_news_list li a .img_area { display: none;}
.front_news_list li a > span { display: block;}
.front_news_list li dl { width: 100%; display: flex; flex-wrap: wrap; gap: 0 2em; align-items: baseline;}
.front_news_list li .date, .front_news_list li .news_tit { width: 6em;}
.front_news_list li .news_body, .front_news_list li dd { width: calc( 100% - 8em ); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-block: .3em;}
.front_news_list li dd p { display: none;}
.front_blog_list { gap: 1em clamp( 1em, 4vw, 3em ); margin-bottom: clamp( 1em, 4vw, 4em ); justify-content: center;}
.front_blog_list li { width: calc( ( 100% - clamp( 2em, 8vw, 6em ) ) / 3 ); max-width: 500px; background: white;}
.front_blog_list li a { display: flex; flex-wrap: wrap; padding: 1.5em; gap: 1em;}
.front_blog_list li .img_area { width: 7em; height: 7em;}
.front_blog_list li .img_area img { display: block; width: 100%; height: 100%; object-fit: cover;}
.front_blog_list li .txt_area, .front_blog_list li a dl { line-height: 1.4; width: calc( 100% - 8em );}
.front_blog_list li .txt_area > span, .front_blog_list li a dl > * { display: block;}
.front_blog_list li .txt_area .blog_ttl, .front_blog_list li a dl h4 { white-space: nowrap; width: 100%; text-overflow: ellipsis; overflow: hidden; margin-block: .3em; font-weight: bold; font-size: 110%;}
.front_blog_list li .txt_area .blog_body, .front_blog_list li a dl dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

@media(max-width: 1199px) {
	.front_blog_list li .img_area { width: 100%; height: auto; aspect-ratio: 1 / 1; margin-inline: auto;}
	.front_blog_list li .txt_area, .front_blog_list li a dl { width: 100%;}
}

@media(max-width: 999px) {
	.front_news_area .news_area_hdr { width: 100%; margin-bottom: 2em;}
	.front_news_area .news_area_body { width: 100%;}
}

@media(max-width: 799px) {
	.front_blog_list li { width: 100%;}
	.front_blog_list li .img_area { width: 7em; height: 7em;}
	.front_blog_list li .txt_area, .front_blog_list li a dl { width: calc( 100% - 8em );}
}




.sctn_salon h2 { margin-bottom: clamp( 2em, 4vw, 4em );}
.sctn_salon h2 .c_gray { color: var(--c_gray);}
.sctn_salon h2 .fs_625 { font-size: 625%;}
.sctn_salon h2 .fs_200 { font-size: 200%;}
.sctn_salon h3 { width: 100%;}
.sctn_salon .salon_info_wrap { flex-direction: row-reverse; gap: clamp( 2em, 5vw, 6em ); margin-bottom: clamp( 2em, 5vw, 4em );}
.sctn_salon .txt_area { width: calc( 50% - clamp( 2em, 5vw, 6em ) );}
.sctn_salon .txt_area .salon_info_list li { padding-bottom: 1em; border-bottom: dotted 1px currentColor; margin-bottom: 1em;}
.sctn_salon .txt_area .salon_info_list li dt { width: 5em;}
.sctn_salon .txt_area .salon_info_list li dd { width: calc( 100% - 7em ); margin-left: auto;}
.sctn_salon .txt_area .btn01 { margin-top: 3em;}
.sctn_salon .img_area { width: 50%; gap: clamp( 1em, 1.5vw, 3em ); align-content: flex-start;}
.sctn_salon .img_area > div { width: calc( 50% - clamp( .5em, .75vw, 1.5em ) );}
.sctn_salon .map_area { width: 100%; max-width: 1600px; margin-inline: auto;}
.access_wrap { gap: clamp( 2em, 4vw, 4em ); max-width: 1600px; margin-inline: auto;}
.access_wrap h3 { border-bottom: solid 1px currentColor;}
.access_wrap .txt_area { width: calc( 50% - clamp( 2em, 4vw, 4em ) ); min-width: calc( 100% - 773px - clamp( 2em, 4vw, 4em ) );}
.access_wrap .txt_area dl:not(:last-of-type) { margin-bottom: 1.5em;}
.access_wrap .img_area { width: 50%; max-width: 773px;}

@media(max-width:1199px) {
	.access_wrap .txt_area { width: 100%;}
	.access_wrap .img_area { width: 100%; max-width: 773px; margin-inline: auto;}
}

@media(max-width:999px) {
	.sctn_salon h2 .fs_625 { font-size: 500%;}
	.sctn_salon .txt_area { width: 100%; order: 2;}
	.sctn_salon .txt_area .btn01 { text-align: center;}
	.sctn_salon .img_area { width: 100%; order: 1; gap: clamp( .5em, 3vw, 1em );}
	.sctn_salon .img_area > div { width: calc( ( 100% - clamp( 1.5em, 9vw, 3em ) ) / 4 );}
	.sctn_salon .map_area { order: 3;}
}

@media(max-width:799px){
	.sctn_salon h2 .fs_625 { font-size: 400%;}
	.sctn_salon h2 .fs_200 { font-size: 150%;}
}

@media(max-width:599px) {
	.sctn_salon .img_area > div { width: calc( ( 100% - clamp( .5em, 3vw, 1em ) ) / 2 );}
}

@media(max-width:499px){
	.sctn_salon h2 .fs_200 { font-size: 150%;}
}

@media(max-width:399px) {
	.sctn_salon h2 .fs_625 { font-size: 130%;}
}