/*
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-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%;
	height: 100dvh;
	margin: 0 0 0 14%;
}


/*
*
* ユーティリティ
*
*/
.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: 301;

}

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

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

.l-sidebar_sns {
	display: flex;
	justify-content: center;
	margin: auto;
	position: absolute;
	bottom: 2.5dvh;
	z-index: 5;
}

.l-sidebar_sns_item {
	width: 1em;
	margin: 0 .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;
}


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

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

#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.l-home_section,
#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_ttl {
	font-size: 2.25vw;
	font-weight: 600;
}

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


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

#news.l-home_section .l-home_section_ttl::before,
#payment.l-home_section .l-home_section_ttl::before,
#faq.l-home_section .l-home_section_ttl::before,
#access.l-home_section .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: 100%;
	height: auto;

}

/*
*
* お知らせ
*
*/
.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: 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;
	/* 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: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(5, 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;
}

/*
*
*アクセス
*
*/
.googlemap {
	width: calc(100dvw - 14dvw);
	overflow-x: hidden;
}

.googlemap iframe {
	width: 100%;

}


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

#p-hamburger_input {
	display: none;
}

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

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

.p-hamburger .line {
	position: absolute;
	display: block;
	width: 4.5em;
	height: .5em;
	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: 2em;
	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: 6.2em;
	height: .5em;
	transform: rotate(45deg);
}

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

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

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



/*
*
* 下層ページコンテンツ #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;
}

/* モーダルの背景 */
#modalOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

/* モーダルの中身 */
#modalContent {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 600px;
	width: 80%;
	max-height: 80%;
	overflow-y: auto;
	background: #222;
	color: #fff;
	padding: 20px;
	box-sizing: border-box;
}

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

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