@charset "utf-8";

/*-----------------------------------------------------------
header
-----------------------------------------------------------*/

.header-navi {
    color: var(--base-body-color)!important;
}

.header-navi:hover {
    color: var(--base-body-color)!important;
}

.hamburger-btn-bar > div {
    background: var(--base-body-color)!important;
}

.nav-second-link {
    color: var(--base-body-color)!important;
}

.nav-second-link:before {
    background: var(--base-body-color);
}

a[data-lightbox] {
    position: relative;
    display: block;
}

a[data-lightbox]:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.3);
    opacity: 0;
    transition: .5s;
}

a[data-lightbox]:hover:before {
    opacity: 1;
    transition: .5s;
}


/*-----------------------------------------------------------
ページャー
-----------------------------------------------------------*/

.webgene-pagination {
	width: 100%;
}

.webgene-pagination > ul{
	padding: 0;
	display: flex;
	justify-content: center;
}

.webgene-pagination > ul > li{
	display: flex;
}

.webgene-pagination > ul > li{
	margin: 40px 10px 0;
	height: 40px;
	width:100%;
	max-width: 40px;
	font-family: var(--font-family03);
	line-height: 1em;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.webgene-pagination > ul > li.selected > a{
	color: var(--white);
	background: var(--primary);
	cursor: inherit;
}

.webgene-pagination > ul > li.selected > a:hover {
	color: var(--white);
	background-color: var(--primary);
}

.webgene-pagination > ul > li > a {
	width: 100%;
	height: 40px;
	width: 40px;
	background: var(--white);
	color: var(--primary);
    font-weight: 700;
	border: 1px solid var(--primary);
	display: flex;
	justify-content: center;
	align-items: center;
}

.webgene-pagination > ul > li > a:hover{
	color: var(--white);
	background-color: var(--primary);
	text-decoration: none;
}

.webgene-pagination>ul>.prev>a,
.webgene-pagination>ul>.next>a {
	position: relative;
	height: 40px;
	width: 40px;
	/*border: 0;*/
}

.webgene-pagination>ul>.prev>a:hover,
.webgene-pagination>ul>.next>a:hover {
	background-color: var(--primary);
}

.webgene-pagination>ul>.prev>a::before,
.webgene-pagination>ul>.next>a::before {
	content: "";
	display: block;
	transition: all .3s;
}

.webgene-pagination>ul>.prev>a::before {
	content: "";
	width: 14px;
	height: 14px;
	display: block;
	border-bottom: solid 2px var(--primary);
	border-left: solid 2px var(--primary);
	transform: translateY(-50%) rotate(45deg);
	position: absolute;
	left: 15px;
	top: 50%;
}

.webgene-pagination>ul>.prev>a:hover:before {
	border-bottom: solid 2px var(--white);
	border-left: solid 2px var(--white);
}

.webgene-pagination>ul>.next>a::before {
	content: "";
	width: 10px;
	height: 10px;
	display: block;
	border-top: solid 2px var(--primary);
	border-right: solid 2px var(--primary);
	transform: translateY(-50%) rotate(45deg);
	position: absolute;
	right: 15px;
	top: 50%;
}

.webgene-pagination>ul>.next>a:hover:before {
	border-top: solid 2px var(--white);
	border-right: solid 2px var(--white);
}

.dtlPager {
	display: flex;
	justify-content: space-between;
	margin: 80px 0 0;
}

.webgene-item-aroundPageLink {
	color: #333;
	font-size: 14px;
}

/*-----------------------------------------------------------
concept
-----------------------------------------------------------*/

.concept-number-box .en-title01 {
	letter-spacing: 0.05em;
}

/*-----------------------------------------------------------
menu
-----------------------------------------------------------*/

.anchor-contents03 .btn02 {
  	max-width: 100%;
  	font-size: 16px;
	padding: 12px 15px 10px;
    justify-content: center;
  	border: 1px solid var(--primary)
}

.anchor-contents03 .btn02-green:hover {
    color: var(--primary);
    background-color: var(--white);
}

/*-----------------------------------------------------------
salon
-----------------------------------------------------------*/

.salon-indicators {
    position: static;
    width: 100%;
    margin: 16px auto 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.salon-img-box {
	display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    position: relative;
}

.carousel-indicators .img-control {
    transition: .3s all;
}

.carousel-indicators .img-control:hover {
    filter: brightness(1.1);
    transition: .3s all;
}

.reserve-frame .anchor-contents02 {
    grid-template-columns: repeat(1, 1fr);
	gap: 20px 30px;
}

.reserve-block .btn02 {
  	max-width: 100%;
    height: 80px;
    justify-content: center;
  	color: var(--base-body-color);
  	font-size: 16px;
	padding: 12px 15px 10px;
}

.reserve-tel-btn:hover {
    background-color: var(--white);
}

/*-----------------------------------------------------------
staff
-----------------------------------------------------------*/

.gallery-grid04 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.gallery-item {
  margin: 15px 0 0 0;
  transition: .5s;
}

.staff-gallery .gallery-item a {
    display: block;
    aspect-ratio: 341 / 458;
    width: 100%;
    height: 100%;
    position: relative;
}

a[data-lightbox] {
    position: relative;
    display: block;
}

a[data-lightbox]:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.3);
    opacity: 0;
    transition: .5s;
}

a[data-lightbox]:hover:before {
    opacity: 1;
    transition: .5s;
}

.gallery-item > a[data-lightbox] img {
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.staff-gallery .gallery-item a:hover {
	filter: brightness(1.1);
  	transition: all .3s;
}

/*-----------------------------------------------------------
recruit
-----------------------------------------------------------*/

.entry-btn:after {
  	content: "";
  	position: absolute;
  	top: 50%;
  	right: 25px;
  	max-width: 58px;
  	width: 8%;
  	height: 8px;
	background: url(/system_panel/uploads/images/arrow-white02.svg) no-repeat;
  	background-size: contain;
}

.entry-btn {
  	transition: all .3s;
}

.entry-btn:after {
  	transition: all .3s;
}

.entry-btn:hover::after {
  	right: 15px;
  	transition: all .3s;
}

.point-img-box img {
    justify-content: center;
    align-items: center;
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    max-width: 100%;
    width: 100%;
    margin: auto;
    object-fit: cover;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

}/* min-width: 375px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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



}/* min-width: 414px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

	.reserve-frame .anchor-contents02 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
  	}
  
}/* min-width: 576px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 768px) {
  
    .gallery-grid04 {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

	.reserve-frame .anchor-contents02 {
        gap: 30px;
  	}
  
    .entry-btn:after {
        right: 50px;
    }
  
    .entry-btn:hover::after {
        right: 40px;
    }

}/* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

}/* min-width: 992px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

    .point-title {
		font-size: 35px !important;
    }
  
}/* min-width: 1100px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1200px) {
  
    .recruit-text-box01 {
        font-size: 40px !important;
    }
  
    .point-title {
		font-size: 40px !important;
    }

}/* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

	.value-title-box {
		font-size: 32px !important;
    }
  

}/* min-width: 1400px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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



}/* min-width: 1500px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

	/*-----------------------------------------------------------
	ヘッダー
	-----------------------------------------------------------*/


}/* min-width: 1600px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1700px) {

}/* min-width: 1700px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */