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





/*================================================================================
		ヒーローコンテンツの設定
================================================================================*/
/*全体の設定================================================================================*/
#hero_content .content {
	width: 100%;
	height: clamp(50vh, 100vw * 9 / 16, 100vh - 145px - 1rem);
}

#hero_content .content::before {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 94%;
	height: 90%;
	background-color: #DAEAE9;
	z-index: -1;
}

.hero_content_container {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 94%;
	height: 90%;
	display: flex;
	flex-flow: column;
	row-gap: 30px;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.hero_headline, .hero_text {
	color: #DDDDDD;
	text-align: center;
	z-index: 1;
}

.hero_headline {
	line-height: 1.2;
}

#hero_video {
	position: absolute;
	width: 100%;
	height: 100%;
}

#hero_video::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 25%;
	height: 25%;
	background-color:  #000000;
	box-shadow: 0 0 80px 120px #000000;
	transform: translate(-50%, -50%);
	opacity: 0.45;
}

#hero_video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}

#hero_video #video01 {
	display: block;
}
/*================================================================================全体の設定*/










/*================================================================================
		「コンセプト」コンテンツの設定
================================================================================*/
/*全体の設定================================================================================*/
#concept_content .content {
	width: 100%;
	padding-top: clamp(30px, 100vw / 15, 100px);
}

.concept_headline {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -16px;
	color: #DAEAE9;
	font-size: clamp(50px, 100vw / 10, 140px);
	line-height: 1;
	z-index: -1;
	opacity: 1;
	transform: translateX(0);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.concept_headline.close {
	opacity: 0;
	transform: translateX(-30%);
}

.concept_content_container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 100px;
	row-gap: 10px;
	justify-content: center;
	margin-bottom: 100px;
}

.concept_text_area {
	width: max(50ch, 45% - 50px);
	flex-grow: 1;
}

.concept_image_area {
	position: relative;
	width: calc(55% - 50px);
	aspect-ratio: 1/0.65;
	flex-grow: 0.6;
}

.concept_text_area h3 {
	margin-bottom: 20px;
}

.concept_text_area p {
	margin-bottom: 1rem;
}

.concept_image_area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.concept_image_area > div {
	transform: translateY(0);
	opacity: 1;
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.concept_image_area > div.close {
	transform: translateY(50%);
	opacity: 0;
}


@media screen and (min-width: 1239px/*calc(((50ch + 20px) * 100) / 45)*/) {
	.concept_text_area.text_left {
		order: 1;
	}
}
/*================================================================================全体の設定*/





/*右側に画像がある方の設定================================================================================*/
.concept_image_area.image_right::before {
	content: "";
	position: absolute;
	right: 10%;
	bottom: 10%;
	width: 50%;
	height: 30%;
	background-color: #DAEAE9;
}

.concept_image_area.image_right div {
	position: absolute;
	width: 55%;
	aspect-ratio: 1/1;
	overflow: hidden;
}

.concept_image_area.image_right div:nth-child(1) {
	left: 0;
	bottom: 0;
	z-index: 1;
}

.concept_image_area.image_right div:nth-child(2) {
	top: 0;
	left: 45%;
}

/*================================================================================右側に画像がある方の設定*/





/*左側に画像がある方の設定================================================================================*/
.concept_image_area.image_left::before {
	content: "";
	position: absolute;
	left: 10%;
	bottom: 10%;
	width: 50%;
	height: 30%;
	background-color: #DAEAE9;
}

.concept_image_area.image_left div {
	position: absolute;
	width: 55%;
	aspect-ratio: 1/1;
	overflow: hidden;
}

.concept_image_area.image_left div:nth-child(1) {
	top: 0;
	left: 0;
	z-index: 1;
}

.concept_image_area.image_left div:nth-child(2) {
	left: 45%;
	bottom: 0;
}
/*================================================================================左側に画像がある方の設定*/





/*画像のみの設定================================================================================*/
.concept_content_container.image_only .concept_image_area {
	position: relative;
	width: calc(55% - 50px);
	aspect-ratio: 1/0.4;
	flex-grow: 1;
}

.concept_content_container.image_only .concept_image_area::before {
	content: "";
	position: absolute;
	left: 25%;
	bottom: 10%;
	width: 50%;
	height: 30%;
	background-color: #DAEAE9;
}

.concept_content_container.image_only .concept_image_area div {
	overflow: hidden;
}

.concept_content_container.image_only .concept_image_area div:nth-child(1) {
	position: absolute;
	width: 65%;
	aspect-ratio: 1/0.5;
	top: 0;
	left: 0;
}

.concept_content_container.image_only .concept_image_area div:nth-child(2) {
	position: absolute;
	width: 40%;
	aspect-ratio: 1/0.75;
	left: 60%;
	bottom: 0;
}

.concept_content_container.image_only .concept_image_area img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}
/*================================================================================画像のみの設定*/










/*================================================================================
		パララックスコンテンツの設定
================================================================================*/
/*全体の設定================================================================================*/
.parallax_content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: clamp(100px, 100vw, 100vh * 0.5);
	overflow: hidden;
	opacity: 0;
}

.parallax_content::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.40);
	z-index: 1;
}

.parallax_content h2 {
	position: relative;
	padding: 0 0 0 10vw;
	font-size: clamp(1.5rem, 100vw / 20, 3rem);
	color: #FFFFFF;
	text-shadow: 1px 2px 5px #000000;
	z-index: 1;
	transform: translateX(100px);
	opacity: 0;
	transition: all .5s;
}

.parallax_content p {
	position: relative;
	padding: 0 15vw 0 15vw;
	color: #FFFFFF;
	z-index: 1;
}

.parallax_content h2.active {
	transform: translateX(0);
	opacity: 1;
}

.parallax_image {
	position: absolute;
	width: 100%;
	height: auto;
	min-height: 200%;
	bottom: 0;
	transition: opacity .2s;
}

.parallax_image img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*================================================================================全体の設定*/










/*================================================================================
		メニュー一覧の設定
================================================================================*/
/*全体の設定================================================================================*/
#menu_index .content {
	display: flex;
	flex-flow: column;
}

#menu_index .content_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 100px;
	margin-bottom: 60px;
}

.menu_index_text {
	width: min(100%, 80ch);
	margin: 0 auto;
	margin-bottom: 60px;
}

.menu_index_text p {
	font-size: 1.2rem;
	line-height: 1.5;
}

.menu_headline {
	margin-left: 20px;
	font-size: 1.6rem;
	line-height: 3;
}

.menu_image {
	width: 40%;
	flex-grow: 0.6;
	margin-bottom: 20px;
}

.menu_sentence {
	position: relative;
	width: max(50ch, 40%);
	flex-grow: 0.9;
}

.menu_sentence p {
	padding: 20px 0;
	border-bottom: dashed 1px #BBBBBB;
}

.menu_sentence span {
	position: absolute;
	right: 0;
	line-height: inherit
}
/*================================================================================全体の設定*/










/*================================================================================
		スタッフ紹介の設定
================================================================================*/
/*全体の設定================================================================================*/
#staff_profile .content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	column-gap: 40px;
	row-gap: 20px;
	justify-content: center;
}

.staff_content_container {
	display: flex;
	flex-flow: column;
	row-gap: 30px;
	align-items: center;
	padding: 20px;
	border-radius: 10px;
	background-color: #DAEAE9;
}

.staff_image {
	width: 80%;
	aspect-ratio: 1/1;
	margin-bottom: 20px;
	border-radius: 50%;
	overflow: hidden;
}

.staff_image img {
	width: auto;
	height: 100%;
}
/*================================================================================全体の設定*/










/*================================================================================
		インスタグラム一覧の設定
================================================================================*/
/*全体の設定================================================================================*/
#instagram_index {
	background-color: #DAEAE9;
	padding: 50px 0 100px
}

#instagram_index .content_inner {
	/*width: min(100% - 32px, 1200px);*/
}

.instagram_headline {
	position: absolute;
	left: 0px;
	bottom: calc(100% + 45px);
	margin-left: -16px;
	color: #DAEAE9;
	font-size: clamp(50px, 100vw / 10, 140px);
	line-height: 1;
	z-index: -1;
	opacity: 1;
	transform: translateX(0);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.instagram_headline.close {
	opacity: 0;
	transform: translateX(-30%);
}


.instagram_content_headline {
	font-size: 1.8rem;
	line-height: 3;
	text-align: center;
}

.instagram_content_text {
	margin-bottom: 50px;
	text-align: center;
}

#instagram_index .content_container {
	width: min(90%, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 0.8fr));
	column-gap: 20px;
	row-gap: 20px;
	justify-content: center;
	margin-bottom: 50px;
}

.instagram_image {
	width: 100%;
	aspect-ratio: 1/1;
}

.instagram_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.instagram_archive_link {
	margin-right: 100px;
	text-align: right;
}

.instagram_archive_link a {
	display: inline-block;
	font-size: 1.2rem;
	opacity: 1;
	transition: .3s
}

.instagram_archive_link a:hover {
	opacity: 0.5;
}

/*================================================================================全体の設定*/










/*================================================================================
		会社概要の設定
================================================================================*/
/*全体の設定================================================================================*/
#salon_info_headline {
	margin-bottom: 10px;
}

.salon_info_headline {
	position: absolute;
	top: -90px;
	left: 0;
	margin-left: -16px;
	color: #DAEAE9;
	font-size: clamp(50px, 100vw / 10, 140px);
	line-height: 1;
	z-index: -1;
	opacity: 1;
	transform: translateX(0);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.salon_info_headline.close {
	opacity: 0;
	transform: translateX(-30%);
}


#salon_info.content_wrapper {
	position: relative;
	padding: 60px 0 160px;
}

#salon_info.content_wrapper::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 1;
}

@media screen and (min-width: calc(90ch + 46px)) {
	#salon_info.content_wrapper::before {
		opacity: 0;
	}
	
}

.info_background_image {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}

.info_background_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#salon_info .content_inner {
	width: min(100% - 32px, 1400px);
	padding: 30px;
	background-color: rgba(0,0,0,0.6);
}

#salon_info .content {
	display: flex;
	flex-wrap: wrap;
	column-gap: 80px;
	row-gap: 40px;
}

@media screen and (min-width: calc(90ch + 145px)) {
	#salon_info .content_inner {
		width: min(100% - 128px, 1400px);
		padding: 50px;
	}
}

.info_map_image {
	width: max(30ch, 100% - 60ch - 80px);
	flex-grow: 1;
}

.info_map_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.info_sentence {
	width: min(100%, 50ch);
}

.info_logo_image {
	width: 100%;
	aspect-ratio: 1/1;
	max-height: 100px;
	margin-bottom: 40px;
}

.info_logo_image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.info_sentence p {
	color: #EEEEEE;
	margin-bottom: 10px;
}

.info_sentence .info_tel {
	margin-bottom: 0;
	font-size: 1.8rem;
	color: #BADBD8;
	font-weight: 700;
	line-height: 1.5;
}

.info_tel > a {
	font-size: 1.8rem;
	color: #BADBD8;
}
/*================================================================================全体の設定*/










/*================================================================================
		フッターの設定
================================================================================*/
/*全体の設定================================================================================*/
#banner_content {
	/*position: sticky;
	left: 0;
	bottom: 0;*/
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	z-index: 8;
}

.banner_yoyaku, .banner_coupon {
	width: max(30ch, 50%);
	flex-grow: 1;
}

.banner_yoyaku > a, .banner_coupon > a {
	display: block;
	padding: 20px 0 30px;
	background-color: #DAEAE9;
	text-align: center;
	transition: .3s;
}

.banner_yoyaku:hover > a, .banner_coupon:hover > a {
	background-color: #BADBD8;
}
/*全体の設定================================================================================*/










/*================================================================================
		トップページへ戻るボタンの設定
================================================================================*/
/*全体の設定================================================================================*/
#page_top_back_button {
	position: fixed;
	right: 3vw;
	bottom: 3vh;
	width: 75px;
	aspect-ratio: 1/1;
	background-color: #333333;
	border-radius: 50%;
	opacity: 1;
	z-index: 8;
	transition: bottom .8s, opacity .5s;
}

#page_top_back_button.close {
	bottom: -50%;
	opacity: 0;
}

#page_top_back_button > a {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 10px;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
}

#page_top_back_button > a > span {
	position: relative;
	display: block;
	width: 50%;
	height: 50%;
}

#page_top_back_button > a > span > span:nth-child(1) {
	position: absolute;
	top: 0;
	left: 50%;
	display: inline-block;
	width: 50%;
	height: 50%;
	border-top: solid 3px #EEEEEE;
	border-left: solid 3px #EEEEEE;
	transform-origin: top left;
	transform: rotateZ(45deg);
}

#page_top_back_button > a > span > span:nth-child(2) {
	position: absolute;
	top: 0;
	left: 50%;
	display: inline-block;
	width: 3px;
	height: 100%;
	background-color: #EEEEEE;
	transform: translate(-50%, 0);
}

#page_top_back_button p {
	font-size: 0.8rem;
	color: #EEEEEE;
}

/*全体の設定================================================================================*/










/*================================================================================
		フッターの設定
================================================================================*/
/*全体の設定================================================================================*/
footer p {
	padding: 15px 0;
	background-color: #333333;
	color: #FFFFFF;
	text-align: center;
}

/*全体の設定================================================================================*/