@charset "utf-8";

#breadcrumb { display: none;}

/*メインビジュアル
==================================================================================================================*/

#visual {
	background: url(../images/front/main_img.jpg) no-repeat top right;
	background-size: 74%;
	aspect-ratio: 4 / 3;
	position: relative;
	margin-bottom: 80px;
}

#visual h1 {
	font-size: clamp( 4rem, 9vw, 9.375rem );
	text-align: left;
	line-height: 1.4;
	position: absolute;
	top: 50%;
	left: 0.5em;
	transform: translateY(-50%);
}

#visual h1 .small {
	font-size: 68%;
}

@media (max-width: 899px){
	#visual { width: 100%; margin: 0 0 10vw; background-size: cover; background-position: center center;}
	#visual h1 { top: inherit; bottom: 5%; left: 5%; transform: inherit; font-size: clamp( 5rem, 10.5vw, 5.625rem );}
}

@media (max-width: 599px){
	#visual { aspect-ratio: 1 / 1;}
	#visual h1 { font-size: clamp( 3rem, 13vw, 5rem );}
}







/*ページ内汎用スタイル
==================================================================================================================*/

section h2 { font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem); margin-bottom: 1.25em;}
section h3 { font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem); margin-bottom: 1.25em}
p, dl dt, dl dd, li { font-size: clamp( 1rem, 3vw, 1.125rem );}







/*#front_intro
==================================================================================================================*/

#front_intro .box {
	padding: clamp( 7rem, 13vw, 10rem ) clamp( 2rem, 6vw, 6rem ) clamp( 2rem, 4vw, 6rem );
	position: relative;
}

#front_intro .box::after{
	content: "";
	display: block;
	background: url(../images/front/front_intro_img.png) no-repeat center center;
	background-size: contain;
	width: 20vw;
	max-width: 240px;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: -15%;
	right: -3%;
}

#front_intro h2 {
	font-size: clamp( 3rem, 6vw, 4.5rem );
	line-height: 1.2;
	position: absolute;
	top: -1em;
	left: -1em;
	transform: rotate(-10deg);
}
#front_intro h2 .txt02 { margin-left: 2.5em;}
#front_intro h2 .small { font-size: 60%;}
#front_intro h2 .big { font-size: 130%; font-weight: 900; line-height: 1;}

#front_intro .box .btn01 { width: fit-content; position: absolute; bottom: -3em; right: -1em;}
#front_intro .box .btn01 a { padding: 1em 2em;}

@media (max-width: 899px){
	#front_intro .box::after { width: 30vw; top: -15vw; right: 1%;}
	#front_intro h2 { top: -1.25em; left: -5vw; font-size: clamp( 2.25rem, 9vw, 4rem ); z-index: 1;}
	#front_intro .box .btn01 { width: 90%; margin: 4vw auto 0; position: static;}
}

@media (max-width: 599px){
	#front_intro .box { padding: 17vw 2rem 2em;}
}







/*#front_news
==================================================================================================================*/

#front_news .box { padding: 4em clamp( 2em, 5vw, 5em ) 3em; position: relative;}

#front_news h2 {
	font-size: clamp(2.813rem, 2.472rem + 1.7vw, 3.75rem);
	position: absolute;
	top: -.5em;
	left: -.5em;
	transform: rotate(-10deg);
}

#front_news h2 .wrap { position: relative; z-index: 999;}

#front_news h2::before, #front_news h2::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 0px 40px 193px;
	position: absolute;
	transform: rotate(10deg);
}

#front_news h2::before {
	border-color: transparent transparent transparent var(--yel01);
	top: 15%;
	left: 0;
	z-index: 2;
}

#front_news h2::after {
	border-color: transparent transparent transparent rgba(192, 218, 221, .6);
	top: 25%;
	left: 10%;
	z-index: 1;
}

#front_news ul { line-height: 1.4;}
#front_news ul li:not(:last-child) { margin-bottom: 1.2em; padding-bottom: 1.2em; border-bottom: 2px dotted var(--black01);}
#front_news dl dt { width: 8em;}
#front_news dl dd { width: calc( 100% - 8em );}

@media (max-width: 899px){
	#front_news .box { padding: 4em clamp( 2em, 8vw, 5em ) clamp( 2em, 5vw, 3em );}
}

@media (max-width: 599px){
	#front_news h2 { left: -.25em;}
	#front_news h2::before, #front_news h2::after { border-width: 0.75em 0 0.75em 3.5em;}
	#front_news dl dt, #front_news dl dd { width: 100%;}
}







/*#sec_worries
==================================================================================================================*/

#sec_worries h2 { font-size: clamp(1.375rem, 0.784rem + 2.95vw, 3rem);}







/*#sec_about
==================================================================================================================*/

#sec_about .bg_wt { position: relative; padding: 2em 3em;}

#sec_about h2 {
	margin-bottom: 2rem;
	padding-left: clamp( 2.75rem, 4vw, 3rem );
	font-size: clamp(1.375rem, 0.784rem + 2.95vw, 3rem);
	text-align: left;
}

#sec_about h2 .bold { font-weight: 900;}

#sec_about h2 .small { font-size: 75%;}

#sec_about h2 .ico {
	display: block;
	width: 1.5em;
	position: absolute;
	left: -3%;
	top: -30px;
	z-index: 0;
	transform: rotate(-15deg);
	color: var(--yel01);
	font-size: clamp( 3.5rem, 6vw, 5rem );
	line-height: 1.25;
	text-align: center;
}

#sec_about h2 .ico::after {
	content: "";
	display: block;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: var(--black01);
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

#sec_about li {
	width: calc( 100% / 3 - 6% );
	position: relative;
}

#sec_about li:not(:last-child)::after {
	content: "\f101";
	font-family: "FAsolid";
	display: inline-block;
	color: #73C4CE;
	font-size: clamp( 1rem, 0.636rem + 1.82vw, 2rem );
	position: absolute;
	top: 50%;
	right: -1.5em;
	transform: translateY(-50%);
}

#sec_about li figcaption {
	background: var(--black01);
	color: #fff;
}

@media (max-width: 899px){
	#sec_about .bg_wt { padding: 1.5em 2em;}
	#sec_about li { width: calc(100% / 3 - 5%);}
	#sec_about li:not(:last-child)::after { right: -1.25em;}
}


@media (max-width: 599px){
	#sec_about .bg_wt { padding: 1.5em clamp( .5em, 3vw, 1em );}
	#sec_about h2 { padding-left: 3.5rem;}
	#sec_about p { padding: 0 1em;}
}

@media (max-width: 399px){
	#sec_about h2 { padding-left: 7vw;}
	#sec_about h2 .ico { font-size: 10vw;}
}







/*#front_change
==================================================================================================================*/

#front_change .box {
	padding: 6em 3em 6em;
	position: relative;
	padding: clamp( 3rem, 4vw, 6rem ) clamp( 2rem, 6vw, 6rem ) clamp( 5rem, 4vw, 6rem );
}

#front_change .box::before {
	content: "";
	display: block;
	width: 20vw;
	max-width: 240px;
	aspect-ratio: 1 / 1;
	background: url(../images/front/front_change_img.png);
	background-size: cover;
	position: absolute;
	top: calc( -120px - 4em ) ;
	left: -3%;
}

#front_change h2 {
	width: fit-content;
	height: auto;
	margin-left: calc( 240px - 3% + 4vw );
	padding: 1em 0.5em;
	background: var(--yel01);
	text-align: left;
	position: relative;
}

#front_change h2::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: solid 3vw transparent;
	border-bottom: solid 3.4em var(--yel01);
	position: absolute;
	bottom: 0;
	right: calc( 100% - 3vw + 0.5px );
	z-index: -1;
}

#front_change h2 .condense { letter-spacing: max( -0.1em, -2vw );}


#front_change .btn01 {
	width: fit-content;
	position: absolute;
	bottom: -3em;
	right: -1em;
}

#front_change p a { color: #00BAD1;}

#front_change .box .btn01 a { padding: 1em 2em;}

@media (max-width: 1199px){
	#front_change .box::before { top: calc( -15vw - 1em );}
	#front_change h2 { margin-left: 22vw; padding: 1em; border-radius: 1em 1em 1em 0;}
	#front_change h2::after { border-bottom-width: 1em;}
}

@media (max-width: 899px){
	#front_change .box::before { width: 25vw; top: calc( -13vw - 4em ); left: -1%;}
	#front_change h2 { margin-left: 27vw;}
	#front_change .box .btn01{ width: 90%; margin: 4vw auto 0; position: static;}
}

@media (max-width: 599px){
	#front_change .box { padding: 7vw 2rem 2em;}
	#front_change .box::before { width: 30vw; top: -26vw;}
	#front_change h2 { margin-left: 32vw; font-size: 5vw;}
}







/*#front_book
==================================================================================================================*/







/*#front_menu
==================================================================================================================*/

#front_menu h2 {
	margin-bottom: 2rem;
	position: relative;
	text-align: left;
	font-size: clamp(1.5rem, 3vw, 2.875rem);
}

#front_menu h2 .bubble {
	display: inline-block;
	padding: 0.75em 1em;
	font-size: clamp( 1rem, 50%, 1.5rem );
	line-height: 1;
	background: var(--skyblue01);
	border-radius: 1.5em;
	position: absolute;
	top: -3em;
	left: -1em;
}

#front_menu h2 .bubble::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: solid 1.25rem transparent;
	border-right: solid 1rem var(--skyblue01);
	position: absolute;
	top: calc( 100% - 1.25rem );
	left: 0.5em;
	z-index: -1;
}

#front_menu h2 .big {
	font-size: 133.3333%;
	font-weight: 900;
	padding-inline: 0.1em;
}

#front_menu .img_box li {
	width: calc( 100% / 3 - 3rem );
	margin: 1.5rem;
	position: relative;
}

#front_menu .img_box h3.fNico {
	font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
	position: absolute;
	transform: rotate(-10deg);
	z-index: 99;
}
#front_menu .img_box li:nth-of-type(odd) h3 { bottom: 0; right: -0.125em;}
#front_menu .img_box li:nth-of-type(even) h3 { top: 0; left: .125em;}
#front_menu .img_box h3.c_blk { text-shadow: 1px 1px 0px rgba(255,255,255,1);}
#front_menu .img_box h3.c_wt { text-shadow: 1px 1px 0px rgba(0,0,0,1);}

#front_menu .btn_box li {
	width: calc( 100% / 2 - 2rem );
	max-width: 360px;
	margin: 1rem;
}

@media (max-width: 1599px){
	#front_menu .img_box li { width: calc( 100% / 3 - 3vw ); margin: 1.5vw;}
	#front_menu .btn_box li { width: calc( 100% / 2 - 2vw ); margin: 1vw;}
}

@media (max-width: 899px){
	#front_menu h2 { font-size: clamp(1.5rem, 4vw, 2.875rem);}
}

@media (max-width: 599px){
		#front_menu .img_box li { width: calc( 100% / 3 - 2vw ); margin: 0 1vw;}
		#front_menu .btn_box li { width: 90%; margin: 4vw auto 0;}
		#front_menu .btn_box .btn01 a { font-size: clamp( 1.125rem, 4vw, 1.75rem );}
}







/*#front_care
==================================================================================================================*/

#front_care h2 { background: var(--yel01); padding: .3em .5em; font-size: clamp( 2rem, 5.5vw, 5rem ); margin-bottom: 2rem;}
#front_care h2 .txt01 { font-size: 60%;}
#front_care h2 .txt01 .small { font-size: 45%;}
#front_care h2 .txt02::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	background: url(../images/common/deco_sparkle.png) no-repeat right top;
	background-size: contain;
	vertical-align: text-top;
	margin-left: -0.1em;
}

#front_care h3 { font-size: clamp( 1.875rem, 3.5vw, 2.5rem );}

#front_care .box01 { text-align: center;}

#front_care .box01 > li {
	width: 48%;
	background: #fff;
	padding: 1em;
	position: relative;
	overflow: hidden;
}

#front_care .box01 .img_area { margin-bottom: 1rem;}

#front_care .box01 h3 { margin-bottom: 0.3em;}

#front_care .box01 h3 .eyecatch {
	padding: 0.2em 0.3em;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	text-align: left;
	font-size: clamp( 1rem, 2vw, 1.75rem );
}

#front_care .box01 h3 .eyecatch::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: solid 5em transparent;
	position: absolute;
	left: -5em;
	top: 0;
	z-index: -1;
}

#front_care .box01 h3 .ec_red::after { border-top: solid 5em #F32C2C;}

#front_care .box01 h3 .eyecatch .condense { letter-spacing: -0.2em;}
#front_care .box01 h3 .eyecatch .small { font-size: 75%;}

#front_care .box01 ul { display: inline-block; text-align: left;}
#front_care .box01 ul li { margin: 0 auto 0.6em;}

#front_care .box02 h3 { max-width: calc( 100% - 2em ); margin: 0 auto 1em; color: var(--yel01); text-shadow: 1px 1px 0px #499EA8;}
#front_care .box02 h3 .wrap { position: relative;}
#front_care .box02 h3 .wrap::before,
#front_care .box02 h3 .wrap::after {
	content: "";
	display: block;
	width: 2px;
	height: 1em;
	box-shadow: 1px 1px 0px #499EA8;
	background: var(--yel01);
	position: absolute;
	bottom: .125em;
}
#front_care .box02 h3 .wrap::before { transform: rotate(-40deg); left: -.75em;}
#front_care .box02 h3 .wrap::after { transform: rotate(40deg); right: -.75em;}

#front_care .box02 .list ul {
	width: 48%;
	background: var(--skyblue01);
	padding: 1.5em;
}

#front_care .box02 .list li {
	font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}

#front_care .box02 .list li:not(:last-child) {
	margin-bottom: 3em;
	border: 3px solid var(--blue01);
	padding: .75em;
	border-radius: 24px;
	position: relative;
}

#front_care .box02 .list li .big {
	font-size: clamp(1.875rem, 1.466rem + 2.05vw, 3rem);
}

#front_care .box02 .list li:nth-of-type(1) { background: #fff;}
#front_care .box02 .list li:nth-of-type(n+2) { background: #F6FF75;}
#front_care .box02 .list li:nth-of-type(-n+2)::after {
	content: "+";
	color: var(--blue01);
	position: absolute;
	bottom: -1.5em;
	right:  0;
	left: 0;
	font-size: 4rem;
	margin: auto;
}

#front_care .box02 .list li:nth-of-type(3)::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-color: var(--blue01) transparent transparent transparent;
	border-width: 24px 47px 0px 47px;
	position: absolute;
	bottom: -2em;
	right:  0;
	left: 0;
	margin: auto;
}

#front_care .box02 .list li.btn01 a { font-size: clamp( 1.125rem, 2vw, 1.75rem );}

@media (max-width: 899px){
	#front_care h2 { font-size: clamp( 2rem, 7.5vw, 5rem );}
	#front_care h3 { font-size: clamp( 1.5rem, 4.5vw, 2.5rem );}
	#front_care .box01 h3 .eyecatch { font-size: clamp( 1rem, 3vw, 1.5rem );}
}

@media (max-width: 699px){
	#front_care .box02 .list ul { width: 100%;}
	#front_care .box02 .list ul:first-child { margin-bottom: 6vw;}
}

@media (max-width: 599px){
	#front_care h2 { font-size: clamp( 2rem, 10vw, 5rem );}
	#front_care h2 .txt01 { font-size: 40%;}
	#front_care h2 .txt01 .small { display: inline; font-size: 80%;}
	#front_care h2 .txt02::after { vertical-align: super;}
	#front_care .list > li { display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
	#front_care .list > li:first-child { margin-bottom: 6vw;}
	#front_care .list .img_area { width: 40%;}
	#front_care .list .ttl_area { width: calc( 60% - 4vw ); margin-left: auto;}
	#front_care .box01 h3, #front_care .box01 p.center { text-align: left; line-height: 1.4;}
	#front_care .list .ttl_area + * { width: 100%;}
	#front_care .box01 ul { column-count: 2; column-gap: 1em;}
}

@media (max-width: 499px){
	#front_care .box01 ul { column-count: 1; column-gap: unset;}
}

@media (max-width: 399px){
	#front_care .list > li { max-width: 320px; margin-inline: auto;}
	#front_care .list .img_area { width:100%; max-width: 270px; margin: auto auto 0.8em;}
	#front_care .list .ttl_area { width: 100%; margin: auto;}
	#front_care .box01 h3, #front_care .box01 p.center { text-align: center;}
}







/*#front_salon
==================================================================================================================*/

#front_salon .box { position: relative;}

#front_salon .inner { padding-block: clamp( 1em, 3vw, 2em );}

#front_salon h2 {
	position: absolute;
	top: -1em;
	left: 0;
	transform: rotate(-10deg);
	font-size: clamp(1.5rem, 1.364rem + 0.68vw, 1.875rem);
}

#front_salon h2::after {
	content: "";
	display: block;
	background: url(../images/front/bubble.png);
	background-size: cover;
	width: 34vw;
	height: 16vw;
	max-width: 283px;
	max-height: 160px;
	position: absolute;
	top: -40%;
	left: 50%;
	transform: translateX(-50%);
	margin: auto;
}

#front_salon h2 .wrap { position: relative; z-index: 99;}

#front_salon h2 .small { font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);}

#front_salon .salon_add h3 { font-size: clamp(1.125rem, 1.057rem + 0.34vw, 1.313rem); margin-bottom: .75em;}

#front_salon .txt_area, #front_salon .gmap_sns_wrap { width: 48%;}

#front_salon .gmap_sns_wrap .sns_set {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1em;
	order: 2;
	width: 100%;
}

#front_salon .gmap_sns_wrap .sns_set > li {
	width: 50px;
	height: 50px;
}

#front_salon .gmap {
	order: 1;
	width: 100%;
	padding-bottom: 70%;
	margin-bottom: 1em;
}

#front_salon .txt_area li { padding: .75em 0; border-top: 2px dotted #707070;}

#front_salon .salon_staff .txt_area {
	width: 70%;
	padding: 2em;
	margin-bottom: auto;
	font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
	background: var(--skyblue01);
	border-radius: 24px;
}

#front_salon .salon_staff .img_area { width: 24%;}
#front_salon .salon_staff .img_area img { width: 100%; max-width: 200px; margin: 0 auto; text-align: center;}

#front_salon .salon_staff figcaption { font-size: clamp(1.125rem, 1.057rem + 0.34vw, 1.313rem);}
#front_salon .salon_staff figcaption .small { font-size: .75rem; line-height: 1.4;}

@media (max-width: 1299px){
	#front_salon .gmap { padding-bottom: 90%;}
}

@media (max-width: 1099px){
	#front_salon .gmap { padding-bottom: 120%;}
}

@media (max-width: 999px){
	#front_salon .txt_area, #front_salon .gmap_sns_wrap { width: 100%;}
	#front_salon .gmap_sns_wrap .sns_set { order: 1; justify-content: flex-start; padding: 0.75em 0; border-top: 2px dotted #707070;}
	#front_salon .gmap { margin-bottom: 0; padding-bottom: 60%; order: 2;}
}

@media (max-width: 999px){
	#front_salon .txt_area, #front_salon .gmap_sns_wrap { width: 48%;}
	#front_salon .gmap_sns_wrap .sns_set { order: 2; justify-content: center; padding: 0; border-top: none;}
	#front_salon .gmap { margin-bottom: 1em; padding-bottom: 90%; order: 1;}
}

@media (max-width: 799px){
	#front_salon .txt_area, #front_salon .gmap_sns_wrap { width: 100%;}
	#front_salon .gmap_sns_wrap .sns_set { order: 1; justify-content: flex-start; padding: 0.75em 0; border-top: 2px dotted #707070;}
	#front_salon .gmap { margin-bottom: 0; padding-bottom: 60%; order: 2;}
}

@media (max-width: 599px){
	#front_salon h2 { top: -2em; left: 0; right: 0; margin: auto; transform: inherit;}
	#front_salon h2 .wrap { display: inline-block; background: var(--yel01); padding: 1em 1.5em; border-radius: 50%;}
	#front_salon h2::after { display: none;}
	#front_salon .salon_staff .txt_area { width: 100%; padding: 2em; border-radius: 24px;}
	#front_salon .salon_staff .img_area { width: 100%; margin-bottom: 1em;}
	#front_salon .salon_staff .img_area img, #front_salon .salon_staff .img_area figcaption { display: inline-block; vertical-align: middle;}
	#front_salon .salon_staff .img_area img { width: 20vw; max-width: 200px;}
	#front_salon .salon_staff .img_area figcaption { text-align: left; margin-left: 1em;}
}







/*.cta_set
==================================================================================================================*/

.cta_set h2 { font-size: clamp(1.375rem, 0.784rem + 2.95vw, 3rem); margin-block: 1em 0.5em;}