@charset "utf-8";

/*++++++++++++++
salon
++++++++++++++*/
/*追従*/
#aside_reserve {
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 0;
	right: 0;
	color: var(--darkblue);
	text-align: center;
	font-weight: var(--wght-600);
	font-size: var(--font-h6);
	margin: auto;
	box-sizing: border-box;
	/* position: relative; */
}
#aside_reserve:before {
	content:"";
	-ms-filter: blur(10px);
	filter: blur(10px);
	width: var(--flex-100);
	height: var(--flex-100);
	position: absolute;
	left: 0;
	padding: 20px;
	background: var(--opa-white02);
	z-index: -1;
	box-sizing: border-box;
}

#aside_reserve dl {
	margin: 15px auto;
	position: relative;
	z-index: 100;
	max-width: var(--flex-90);
	border: 1px solid var(--darkblue);
	background: var(--white);
	border-radius: 5px;
}
#aside_reserve dt {
	padding: 15px 20px;
	position: relative;
}
#aside_reserve dt:before {
	content:"\f107";
	position: absolute;
	transform:rotate(180deg);
	right: 1rem;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
}
#aside_reserve dl.active dt{
	background: var(--darkblue);
	color: var(--white);
}
#aside_reserve dl.active dt:before {
	transform:rotate(0deg);
}
#aside_reserve dd {
	display: none;
	transition: .3s;
}
#aside_reserve dl.active dd{
	display: block;
	transition: .3s;
	padding: 20px;
	/* box-sizing: border-box; */
}
#aside_reserve ol {
	
}
#aside_reserve li {
	
}
#aside_reserve li a.rsv {
	display: block;
	background: var(--black);
	color: var(--white);
	padding: 16px;
	border-radius: 5px;
	position: relative;
}
#aside_reserve li a.rsv:before {
	content: "\f08e";
	position: absolute;
	right: 1rem;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;	
}

/**/

.line_button_grid {
	display: grid;
	grid-template-columns: 1fr;
}
.content_innerbox>figure.wp-block-image,.wp-block-vk-blocks-slider {
    margin: 0 calc(45% - 50vw);
}
.wp-block-vk-blocks-slider .swiper-button-prev {
	left: 3rem;
    top: 0 !important;
    margin: auto;	
}
.wp-block-vk-blocks-slider .swiper-button-next {
	right: 3rem;
    top: 0 !important;
    margin: auto;	
}

/*++++++++++++++
staff
++++++++++++++*/
.staffBox  li{

}
.staffBox li figure {
	background: var(--lightgray);
}
.staffBox li figure.mv-fade {
	
}
.staffBox li figure img {
	aspect-ratio: 2/3;
	object-fit: cover;
}
.staffBox li figure a {
	display: block;
	border: 1px solid var(--black);
	box-sizing: border-box;
	overflow: hidden;
}
.staffBox li span {
	display:block;
	text-align:center;
	font-size: 0.8rem;
}

.single-staff #staff .reservebox {
	grid-template-columns: repeat(2,1fr) !important;
}

.staff_reserve {
	/* margin: 20px 0 0; */
}
.staff_reserve a,.salon_reserve a {
	display: block;
	max-width: var(--flex-100);
	margin: auto;
	background: var(--black);
	padding: 10px 20px 12px;
	text-align: center;
	color: var(--white);
	font-weight: var(--wght-500);
	font-size: var(--font-em);
	letter-spacing: 0.5px;
	position: relative;
}

.staff_reserve a .icon-arrow, .salon_reserve a  .icon-arrow{
	transform: none;
	background: none;
	top: 0;
	margin: auto;
	right: 0rem;
}


.reservebox a .icon-arrow span::before,
.reservebox a .icon-arrow span::after {
    color: var(--gray);
}

.salon_reserve {

}    
.salon_reserve a{
	background: var(--white);
	border: 1px solid var(--black);
	box-sizing: border-box;
}        

.tab{
	margin: 30px 0 0;
	gap: 15px;
}
.tab a{
	background: var(--white);
	color: var(--black);
	border: 1px solid var(--black);
	border-radius: 100px;
	padding: 5px 50px 8px;
	font-weight: var(--wght-500);
	display: block;
	cursor: pointer;
}
.tab a.active {
	background: var(--black);
	color: var(--white);
}

.vk_slider_item-paddingLR-use {
	padding: 0 !important;
}

/*++++++++++++++++++
staff_single
+++++++++++++++++++*/
/*SNS*/
.single-staff #staff .template_contents ol.sns {
	max-width: var(--width240);
	justify-content: center;
	grid-template-columns: auto;
	flex-wrap: wrap;
}
.single-staff #staff .template_contents ol.sns li {
	max-width: 30px;
	width: var(--flex-100);
}
.single-staff #staff .template_contents ol.sns li.tw {
	max-width: 26px;	
}
.single-staff #staff .template_contents ol.sns li img {
	border: none;
}
/**/
.single-staff #staff .column-2 {
	grid-template-columns: 1fr;
}
.single-staff #staff .column-2 img {
	width:var(--flex-100);
}
.single-staff #staff  .smbutton {
	width:var(--flex-100);
	max-width: var(--flex-100);
	box-sizing: border-box;
	text-align: center;
	padding: 10px;
}
.single-staff .wp-block-separator {
	border:none;
	padding: 30px 0 0;
}

.single-staff #staff .template_contents .haircatalog li,
.single-staff #staff .template_contents figure{
background: var(--lightgray);
    object-fit: cover;
    width: var(--flex-100);
}
.single-staff #staff .template_contents .haircatalog li a {
	display: block;
    border: 1px solid var(--black);
	overflow: hidden;
}

.single-staff #staff .template_contents .pulldown {
	border-top: 1px solid var(--gray);
}
.single-staff #staff .template_contents .pulldown:last-child {
}
.single-staff #staff .template_contents .pulldown dt{
	padding: 10px;
	position: relative;
	box-sizing: border-box;
}
.single-staff #staff .template_contents .pulldown dt.active {
	background: var(--lightgray);
}
.single-staff #staff .template_contents .pulldown dt:before {
    content: "＋";
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    top: 6px;
    margin: auto;
    width: 30px;
    height: 30px;
    justify-content: center;
    color: var(--darkgray);
    transition: .3s;
    font-size: var(--font-h6);
    font-weight: var(--wght-400);
}
.single-staff #staff .template_contents .pulldown dt.active:before {
    content: "－";
}
.single-staff #staff .template_contents .pulldown dd{
	display: none;
	/* border-bottom: 1px solid var(--gray); */
	padding: 10px;
	line-height: var(--lh-md);
}
.single-staff #staff .staff_reserve {
	/* margin: 0 0 60px; */
}
.single-staff #staff .staff_reserve a {
	/* margin: 0; */
	max-width: var(--flex-100);
}

/*++++++++++++++++++
gallery
+++++++++++++++++++*/
.galleryBox {
	grid-template-columns: repeat(3,1fr);
}
.galleryBox figure {
	position: relative;
	height: auto;
	overflow: hidden;
}
.galleryBox figure img{
	width: 100%;
	position: relative;
	top: 0rem;
	bottom: inherit;
	margin: auto;
}

@media screen and (min-width: 600px) {
/*++++++++++++++
salon
++++++++++++++*/
.line_button_grid {
	display: flex;
}	
.content_innerbox>figure.wp-block-image,.wp-block-vk-blocks-slider {
    margin: 0;
}	
.wp-block-vk-blocks-slider .swiper-button-prev {
	left: 1rem;
    top: 0 !important;
	bottom: 0;
    margin: auto;	
}
.wp-block-vk-blocks-slider .swiper-button-next {
	right: 1rem;
    top: 0 !important;
	bottom: 0;
    margin: auto;	
}	
/*++++++++++++++
staff
++++++++++++++*/
.staffBox  li{

}
.staffBox li figure {
	background: var(--lightgray);
}
.staffBox li figure.mv-fade {
	
}
.staffBox li figure img {
	aspect-ratio: 2/3;
	object-fit: cover;
}
.staffBox li figure a {
	display: block;
	border: 1px solid var(--black);
	box-sizing: border-box;
	overflow: hidden;
}
.staffBox li span {
	display:block;
	font-size: 0.9rem;
	text-align:center;
}

.staff_reserve {
	/* margin: 20px 0 0; */
}



.tab{
	margin: 30px 0 0;
	gap: 15px;
}
.tab a{
	background: var(--white);
	color: var(--black);
	border: 1px solid var(--black);
	border-radius: 100px;
	padding: 5px 50px 8px;
	font-weight: var(--wght-500);
	display: block;
	cursor: pointer;
}
.tab a.active {
	background: var(--black);
	color: var(--white);
}

/*++++++++++++++++++
staff_single
+++++++++++++++++++*/
.single-staff .wp-block-separator {
	
border-top: 1px solid;
	
padding: 60px 0 0;
}	
/*SNS*/
.single-staff #staff .template_contents ol.sns {
	max-width: var(--width240);
	justify-content: center;
	grid-template-columns: auto;
	flex-wrap: wrap;
}
.single-staff #staff .template_contents ol.sns li {
	max-width: 30px;
	width: var(--flex-100);
}
.single-staff #staff .template_contents ol.sns li.tw {
	max-width: 26px;	
}
.single-staff #staff .template_contents ol.sns li img {
	border: none;
}
/**/
.single-staff #staff .column-2 {
	grid-template-columns: 40% 55%;
	/* grid-template-columns: repeat(2,1fr); */
}


.single-staff #staff .template_contents .haircatalog li,
.single-staff #staff .template_contents figure{
background: var(--lightgray);
    object-fit: cover;
    width: var(--flex-100);
}
.single-staff #staff .template_contents .haircatalog li a {
	display: block;
    border: 1px solid var(--black);
	overflow: hidden;
}

.single-staff #staff .template_contents .pulldown {
}
.single-staff #staff .template_contents .pulldown:last-child {
}
.single-staff #staff .template_contents .pulldown dt{
	padding: 20px;
}
.single-staff #staff .template_contents .pulldown dt.active {
}
.single-staff #staff .template_contents .pulldown dt:before {
    content: "＋";
    position: absolute;
    right: 1rem;
    display: flex;
    align-items: center;
    top: 18px;
    margin: auto;
    width: 30px;
    height: 30px;
    justify-content: center;
    color: var(--darkgray);
    transition: .3s;
    font-size: var(--font-h6);
    font-weight: var(--wght-400);
}
.single-staff #staff .template_contents .pulldown dt.active:before {
    content: "－";
}
.single-staff #staff .template_contents .pulldown dd{
	padding: 20px;
}
.single-staff #staff .staff_reserve {
	/* margin: 0 0 60px; */
}
.single-staff #staff .staff_reserve a {
	/* margin: 0; */
}

/*++++++++++++++++++
gallery
+++++++++++++++++++*/
.galleryBox {
	grid-template-columns: repeat(3,1fr);
}

.galleryBox figure img{
    aspect-ratio:3/3.5;
    object-fit: cover;
}
}