/*
Theme Name: LUANA Hair Home
Theme URI: 
Author: LUANA
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	/* font-size: 16px; */
	font-size: 1.25vw;
	font-family: "Noto Serif JP", serif;
	line-height: 1.7;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*
*
* レイアウト
*
*/
.l-wrapper {
	width: 100dvw;
}

.l-main {
	/* font-size: 1.25vw; */
	width: 86%;
	margin: 0 0 0 14%;
}

.home .l-main {
	height: 100dvh;
}


/*
*
* ユーティリティ
*
*/
.u-button {
	text-align: center;
	padding: 10dvh 0 0 0;
}

.u-button_section {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	background-color: #4B4E2A;
	padding: 1em 2em;

}

.u-flex {
	display: flex;
}

.u-shadow {
	box-shadow: rgba(0, 0, 0, 0.35) 0px 54px 55px,
		rgba(0, 0, 0, 0.22) 0px -12px 30px, rgba(0, 0, 0, 0.2) 0px 4px 6px,
		rgba(0, 0, 0, 0.27) 0px 12px 13px, rgba(0, 0, 0, 0.19) 0px -3px 5px;
}


/*
*
* サイドバー
*
*/

.l-sidebar {
	display: flex;
	flex-direction: column;
	align-content: space-between;
	background-image: url(./img/bg__sidebar.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	width: 25%;
	height: 100dvh;
	padding: 0 10% 0 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 801;

}

.l-sidebar_brandmark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8dvw;
	height: 50dvh;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 18%;
	z-index: 802;
}

.l-sidebar_brandmark img {
	display: block;
	width: auto;
	height: 100%;
	/* max-height: 50%; */
}

.l-sidebar_sns {
	text-align: center;
	display: inline-block;
	width: 8dvw;
	position: absolute;
	bottom: 2.5dvh;
	left: 18%;
	z-index: 802;
}

.l-sidebar_sns_item {
	display: inline-block;
	margin: 0 .25em;
}

.l-sidebar_sns_item img {
	display: block;
	width: auto;
	height: 1.25em;
}



/*
*
* ヒーローイメージ
*
*/

.p-heroimg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	overflow: hidden;
	z-index: 101;
}

.p-heroimg img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
	/* ディゾルブ */
}

.p-heroimg img.active {
	opacity: 1;
}

.p-hero_calendar {
	display: inline;
	width: 1.5em;

	height: auto;
	position: fixed;
	top: 50%;                        /* 画面の縦中央に配置 */
	transform: translateY(-50%);     /* 要素の高さに応じて中央揃え */
	right: 1em;
	z-index: 102;
	background-color: green;

}

.p-hero_calendar_month {
	text-align: center;
	display: block;
	width: 100%;
	background-color: orange;
} 

.p-hero_calendar_txt {
	text-align: center;
	display: block;
	width: 100%;	
	writing-mode: vertical-rl;

}




.p-hero_news {
	position: fixed;
	right: 1em;
	bottom: 1em;
	z-index: 102;
	background-color: yellow;
}


/*
*
* ホームセクション
*
*/
.l-home {
	top: 100dvh;
	position: absolute;
	z-index: 201;
}

.l-home_section {}

#kabutoya.l-home_section,
#menu.l-home_section,
#staff.l-home_section {
	color: #fff;
	background-image: url(./img/bg__body.png);
	background-repeat: repeat;
	background-position: center center;
}

#news.l-home_section,
#payment.l-home_section,
#faq-access.l-home_section {
	color: #000;
	background: #F6F7FF;
	background: linear-gradient(180deg, rgba(246, 247, 255, 1) 0%, rgba(213, 215, 228, 1) 100%);
}

.l-home_section_inner {
	padding: 5em 5% 5em 10%;
}

.l-home_section_ttl {
	font-size: 2.25vw;
	font-weight: 600;
}

/* #kabutoya.l-home_section .l-home_section_ttl, */
#menu .l-home_section_ttl,
#staff .l-home_section_ttl {
	text-align: center;
	margin: 0 0 3.5em 0;
}


#news .l-home_section_ttl,
#payment .l-home_section_ttl,
#faq .l-home_section_ttl,
#access .l-home_section_ttl {
	text-align: center;
	margin: 0 0 3.5em 0;
	position: relative;
}

#news .l-home_section_ttl::before,
#payment .l-home_section_ttl::before,
#faq .l-home_section_ttl::before,
#access .l-home_section_ttl::before {
	content: "";
	display: inline-block;
	background-color: #191B2C;
	width: 3px;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 3em;
	right: 0;
	bottom: 0;
	left: 0;
}


/*
*
* かぶとや
*
*/
#kabutoya .u-flex {
	justify-content: space-between;
}

.p-kabutoya_read {
	width: 48%;
	padding: 0;
}

.p-kabutoya_read h1 {
	display: inline-block;
	margin: 0 0 1em 0;
	padding: .75em 1.25em;
	position: relative;
}

.p-kabutoya_read h1:before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	border: solid 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: rgba(255, 255, 255, .5);
	border-left-color: rgba(255, 255, 255, .5);
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 1px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 101;
}

.p-kabutoya_read h1:after {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	border: solid 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: rgba(255, 255, 255, .5);
	border-bottom-color: rgba(255, 255, 255, .5);
	border-top-width: 0;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 101;
}

.p-kabutoya_read p {
	line-height: 2.25;

}

.p-kabutoya_gallery {
	display: block;
	width: 48%;
	aspect-ratio: 1;
	overflow: hidden;
}

.p-kabutoya_gallery img {
	width: auto;
	height: 100%;

}

/*
*
* お知らせ
*
*/
.c-newslist_item {
	list-style: none;
}

.c-newslist_item a {
	color: #000;
	text-decoration: none;
}

.c-newslist_item_date {
	display: inline-block;
	margin: 0 1em 0 0;
	;
}


/*
*
* メニュー
*
*/


/* タブ */
.p-menu {}

.p-menu_tab {
	display: block;
	/* display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr; */
	/* display: flex;
	justify-content: space-between; */
}

/* .p-menu_tab_item222 {
	width: 19%;
	padding: .5em 0;
	color: rgba(255, 255, 255, .5);
	text-align: center;
	cursor: pointer;
	transition: .4s ease-in-out;
} */

.p-menu_tab_item {
	color: rgba(255, 255, 255, .5);
	text-align: center;
	display: inine-block;
	/* background-image: linear-gradient(0deg, #ffffff80, transparent 60%); */
	padding: .5em 0;
	cursor: pointer;
	transition: .4s ease-in-out;
	/* grid-column-gap: 0px;
	grid-row-gap: 50px; */
}


.p-menu_tab_item:nth-child(0) {
	width: 33.33333%
}

.p-menu_tab_item:nth-child(1) {
	width: 33.33334%
}

.p-menu_tab_item:nth-child(2) {
	width: 33.33333%
}

/* .p-menu_tab_item:first-child {
	background-color: rgba(226, 129, 148, 0.15);
}

.p-menu_tab_item:nth-child(2) {
	background-color: rgba(245, 182, 2, 0.15);
}

.p-menu_tab_item:nth-child(3) {
	background-color: rgba(138, 179, 161, 0.15);
}

.p-menu_tab_item:nth-child(4) {
	background-color: rgba(92, 183, 212, 0.15);
}

.p-menu_tab_item:last-child {
	background-color: rgba(177, 121, 196, 0.15);
} */

/* タブをクリックした時 ホバーした時 */
/* .p-menu_tab_item:hover,
.p-menu_tab_item.active {
	color: #fff;
} */

.p-menu_tab_item:hover,
.p-menu_tab_item.active {
	color: #fff;
	background-image: linear-gradient(0deg, #ffffff80, transparent 45%);
}

/* .p-menu_tab_item:nth-child(2):hover,
.p-menu_tab_item:nth-child(2).active {
	background-color: #f5b602;
}

.p-menu_tab_item:nth-child(3):hover,
.p-menu_tab_item:nth-child(3).active {
	background-color: #8ab3a1;
}

.p-menu_tab_item:nth-child(4):hover,
.p-menu_tab_item:nth-child(4).active {
	background-color: #5cb7d4;
}

.p-menu_tab_item:last-child:hover,
.p-menu_tab_item:last-child.active {
	background-color: #b179c4;
} */

/* パネル */
.p-menu_tabpanel {}

.p-menu_tabpanel_item {
	display: none;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 3%;
	grid-row-gap: 2.5em;
	padding: 1.5em 0 0 0;
}

.p-menu_tabpanel_item.active {
	display: grid;
	/* flex-direction: row;
	flex-wrap: wrap; */
	animation: panel_show .9s ease-in-out forwards;
}

/* パネル切り替えのアニメーション */
@keyframes panel_show {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.c-menuitem {
	width: 100%;
	/* margin: 0 .5% 1.5em 0; */
}

.c-menulist_item {}

.c-menuitem_photo {
	margin: 0 0 .5em 0;
}

.c-menuitem_photo img {
	display: block;
	margin: 0 0 1em 0;
	width: 100%;
	height: auto;
	box-shadow: rgba(50, 50, 93, 0.5) 0px 50px 100px -20px,
		rgba(0, 0, 0, 0.6) 0px 30px 60px -30px;
}

.c-menuitem_data {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.c-menuitem_data_name {
	line-height: 1;
	display: inline-block;
	letter-spacing: 0;
	margin: 0 0 .5em 0;
	padding: 0;
}

.c-menuitem_data_price {
	text-align: right;
	line-height: 1;
	display: inline-block;
	letter-spacing: 0;
	padding: 0;
}

.c-menuitem_data_price span::after {
	content: "円";
	font-size: 85%;
	line-height: 1;
	display: inline-block;
}


/*
*
* お支払い方法
*
*/
.p-creditcard {
	display: flex;
	justify-content: center;
	width: 100%;
}

.p-creditcard_img {
	width: auto;
	height: 35dvh;
}


/*
*
*よくお寄せいただくご質問
*
*/

/* タブ */
.p-faq {}

.p-faq_tab {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	/* display: flex;
	justify-content: space-between;*/
}

.p-faq_tab_item {
	/* color: rgba(255, 255, 255, .5); */
	text-align: center;
	/* display: inine-block; */
	/* background-image: linear-gradient(0deg, #ffffff80, transparent 60%); */
	padding: .5em 0;
	cursor: pointer;
	transition: .4s ease-in-out;
	grid-column-gap: 0px;
	grid-row-gap: 50px;
	border-top: 0;
	border-right: 0;
	border-bottom: solid 1px #252B4B;
	border-left: 0;


}

.p-faq_tab_item.active {
	/* color: #fff; */
	/* background-image: linear-gradient(0deg, #ffffff80, transparent 45%); */
	/* background-color: red; */
	border-top: solid 1px #252B4B;
	border-right: solid 1px #252B4B;
	border-bottom: 0;
	border-left: solid 1px #252B4B;

}

.p-faq_tab_item:hover {
	background-color: red;

}

.p-faq_tab_item.active:hover {
	background: none;
}

/* パネル */
.p-faq_tabpanel {}

.p-faq_tabpanel_item {
	display: none;
	/* grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 3%;
	grid-row-gap: 2.5em; */
	padding: 1.5em 0 0 0;
}

.p-faq_tabpanel_item.active {
	display: block;
	/* display: grid; */
	/* flex-direction: row;
	flex-wrap: wrap; */
	animation: faq_panel_show .9s ease-in-out forwards;
}

/* パネル切り替えのアニメーション */
@keyframes faq_panel_show {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* アコーディオン */
.accordion-content {
	display: none;
	/* background: rgba(255, 255, 255, .5); */
	width: 100%;
	padding: 1em;
	/* border: 1px solid #252B4B; */
}

.accordion-header {
	background: rgba(255, 255, 255, .25);
	width: 100%;
	padding: 1em;
	border: 1px solid #252B4B;
	border-radius: 5px;
	cursor: pointer;

}



/*
*
*アクセス
*
*/


.access_data {
	padding: 0 10dvw;
}

.access_data_inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}

.access_data_shopinfo {
	width: 45%;
}

.access_data_trafficinfo {
	width: 45%;
}

.googlemap {
	width: calc(100dvw - 14dvw);
	overflow-x: hidden;
}

.googlemap iframe {
	width: 100%;

}


/*
*
* フッター
*
*/

.l-footer {
	color: #fff;
	background-color: #191B2C;
}

.l-footer_inner {
	padding: 5em 5% 5em 10%;
}

.l-footer_nav {
	text-align: center;
	display: block;
	margin: 1em 0;
}

.l-footer_nav_list {
	display: flex;
	justify-content: center;
	margin: 0 auto 1em;
}

.l-footer_nav_listitem a {
	color: #fff;
	display: inline-block;
	margin: 0 1em;
}

.l-footer_copyright {
	text-align: center;
	display: block;
}


/*
*
* ハンバーガーメニューボタン
*
*/

#p-hamburger_input {
	display: none;
}

.p-hamburger {
	display: flex;
	width: 2em;
	position: fixed;
	top: 1.25em;
	left: 1.25em;
	z-index: 999;
}

.p-hamburger div {
	position: relative;
	width: 1.75em;
	height: 1.5em;
	cursor: pointer;
}

.p-hamburger .line {
	position: absolute;
	display: block;
	width: 1.75em;
	height: .1em;
	border-radius: 5px;
	background-color: black;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-hamburger .line1 {
	top: 0;
	transform-origin: left;
}

.p-hamburger .line2,
.p-hamburger .line3 {
	/* top: .75em; */
	margin: auto;
	top: 0;
	bottom: 0;
	transform-origin: center;
}

.p-hamburger .line4 {
	bottom: 0;
	transform-origin: right;
}

.p-hamburger_button .line1,
.p-hamburger_button .line4 {
	transform-origin: 5%;
}

.p-hamburger input:checked+label>.p-hamburger_button>.line1 {
	width: 2.2em;
	height: .1em;
	transform: rotate(45deg);
}

.p-hamburger input:checked+label>.p-hamburger_button>.line3 {
	height: .1em;
	transform: rotate(45deg);
	background-color: transparent;
}

.p-hamburger input:checked+label>.p-hamburger_button>.line2 {
	height: .1em;
	transform: rotate(-45deg);
	background-color: transparent;
}

.p-hamburger input:checked+label>.p-hamburger_button>.line4 {
	width: 2.2em;
	height: .1em;
	transform: rotate(-45deg);
}


/*
*
* ドロワー
*
*/
/* #drawer_overlay {
	color: #fff;
	display: none;
	background-color: rgba(25, 27, 44, .8);
	width: 100dvw;
	height: 100dvh;
	z-index: 701;
} */


#drawer_overlay {
	color: #fff;
	background-color: rgba(25, 27, 44, .97);
	width: 100dvw;
	height: 100dvh;
	padding: 0 0 0 25%;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 701;
	clip-path: circle(0% at 30px 30px);
	transition: clip-path 0.6s ease;
	pointer-events: none;
}

#drawer_overlay.open {
	clip-path: circle(150% at 30px 30px);
	pointer-events: auto;
}

#drawer_overlay nav ul {
	list-style: none;
	padding: 60px 20px;
	margin: 0;
}

#drawer_overlay nav ul li {
	margin-bottom: 20px;
}

#drawer_overlay nav ul li a {
	color: #fff;
	text-decoration: none;
}

/* スマートフォン用（上から表示） */
@media (max-width: 768px) {
	#drawer_overlay {
		clip-path: circle(0% at 50% 0%);
	}

	#drawer_overlay.open {
		clip-path: circle(150% at 50% 0%);
	}
}



/*
*
* 下層ページコンテンツ #F6F7FF
*
*/

.l-lower_layer {}

.l-lower_layer_ttl {
	color: #fff;
	font-size: 2.25vw;
	font-weight: 600;
	/* background: linear-gradient(transparent 90%, #f6f7ff), url(./img/bg__body.png) repeat center center; */
	background: url(./img/bg__body.png) repeat center center;
	/* background-image: url(./img/bg__body.png);
	background-repeat: repeat;
	background-position: center center; */
	padding: 2.5em 5% 3.5em 10%;
}

.l-lower_layer_contents {
	color: #000;
	background-color: #F6F7FF;
	padding: 3em 5% 5em 10%;
}

.l-lower_layer_contents p {
	margin: 0 0 1.25em 0;
}

.l-lower_layer_contents figure {
	text-align: center;
}

.l-lower_layer_contents img {
	max-width: 50%;
	height: auto;
}

@media screen and (min-width: 1200px) {

	/* デスクトップ用スタイル */
	body {
		/* background-color: RED; */
	}

}

@media screen and (max-width: 767px) and (orientation: portrait) {

	/* スマートフォン縦位置用スタイル */
	body {
		background-color: blue;
	}

}

@media screen and (max-width: 767px) and (orientation: landscape) {

	/* スマートフォン横位置用スタイル */
	body {
		background-color: green;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

	/* タブレット縦位置用スタイル */
	body {
		background-color: orange;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

	/* タブレット横位置用スタイル */
	body {
		background-color: yellow;
	}
}





/* タブ */
/* .tab-list {
	display: flex;
	justify-content: space-between;
}

.tab-item {
	width: 19%;
	padding: 10px 0;
	border-radius: 6px 6px 0 0;
	background-color: #e28194;
	color: #999;
	text-align: center;
	cursor: pointer;
	transition: .4s ease-in-out;
}

.tab-item:first-child {
	background-color: rgba(226, 129, 148, 0.15);
}

.tab-item:nth-child(2) {
	background-color: rgba(245, 182, 2, 0.15);
}

.tab-item:nth-child(3) {
	background-color: rgba(138, 179, 161, 0.15);
}

.tab-item:nth-child(4) {
	background-color: rgba(92, 183, 212, 0.15);
}

.tab-item:last-child {
	background-color: rgba(177, 121, 196, 0.15);
} */

/* タブをクリックした時 ホバーした時 */
/* .tab-item:hover,
.tab-item.is-active {
	color: #333;
}

.tab-item:first-child:hover,
.tab-item:first-child.is-active {
	background-color: #e28194;
}

.tab-item:nth-child(2):hover,
.tab-item:nth-child(2).is-active {
	background-color: #f5b602;
}

.tab-item:nth-child(3):hover,
.tab-item:nth-child(3).is-active {
	background-color: #8ab3a1;
}

.tab-item:nth-child(4):hover,
.tab-item:nth-child(4).is-active {
	background-color: #5cb7d4;
}

.tab-item:last-child:hover,
.tab-item:last-child.is-active {
	background-color: #b179c4;
} */

/* パネル */
/* .panel-list {
	background-color: #fff;
}

.panel-item {
	display: none;
	width: 100%;
	padding: 40px 30px;
	background-color: #fff;
}

.panel-item.is-active {
	display: block;
	animation: panel-show .9s ease-in-out forwards;
} */

/* パネル切り替えのアニメーション */
/* @keyframes panel-show {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
} */




body.modal-open {
	overflow: hidden;
}

/* モーダルの背景 */
#modal_overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	background-color: rgba(25, 27, 44, .97);
	z-index: 1000;
}

/* モーダルの中身 */
#modal_content {
	color: #fff;
	display: block;	
	/* padding: 10dvh 20%; */
	box-sizing: border-box;
	/* top: 50%;
	left: 50%; */
	transform: translate(-50%, -50%);
	overflow-y: auto;
background-color: yellowgreen;
}

/* 閉じるボタン */
#closeModal {
	display: block;
	margin-bottom: 15px;
}

/* 全コンテンツ非表示 */
.modal_content_inner {
	display: none;
}


#businessday_calendar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 768px;
	/* position: absolute; */
	/* margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; */
}

.businessday_calendar_ttl {
	margin: 0 0 1em 0;
	background-color: yellow;
}

.businessday_calendar_img {

}

.businessday_calendar_img img {
	display: block;
	width: 100%;
	height: 768px;
	max-height: 50dvh;
}



/*
*/
.global-nav {
	position: relative;
	width: fit-content;
}

.global-nav ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}

.global-nav li {
	width: 300px;
	height: 90px;
	line-height: 90px;
	text-align: center;
	position: relative;
}

.global-nav a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #333;
	font-size: 20px;
	position: relative;
	z-index: 2;
}

/* 赤いインジケーターのスタイル */
.global-nav .indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 300px;
	height: 90px;
	background-color: red;
	transition: left 0.3s ease;
	z-index: 1;
}

/* 初期位置（ホーム） */
.global-nav li.active~.indicator {
	left: 0;
}



.p-menu_tab .p-menu_tab_item {
	position: relative;
}

.p-menu_tab span {
	display: block;
	width: 300px;
	height: 80px;
	text-decoration: none;
	position: relative;
	z-index: 999;
}

/* 赤いインジケーターのスタイル */
.p-menu_tab .indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 300px;
	height: 80px;
	background-color: red;
	transition: left 0.3s ease;
	z-index: 998;
}

/* 初期位置（ホーム） */
.p-menu_tab .p-menu_tab_item.active~.indicator {
	left: 0;
}