@media ( prefers-reduced-motion: reduce ) {
   .sip-slider, .swiper-container, .swiper-wrapper, .swiper-slide, .swiper-slide img{
    transition-duration: 100ms !important;
  }
}

.hr {
border-bottom: 1px solid var(--gray);
margin: auto;
}

/*+++++++++++++++++++++++*/
/*loading
/*+++++++++++++++++++++++*/
.loading {
position: fixed;
width: var(--flex-100);
height: 110vh;
z-index: 10;
background: var(--black);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}

.loaded {
height: 0;
}

.loaded figure {
opacity: 0;
}

.remove .loading {
display: none;
transition: none;
background: none;
transform: none;
position: inherit;
z-index: -1;
}

.remove .loading * {
background: none;
display: none !important;
width: 0 !important;
height: 0 !important;
}

.loading figure {display: flex;align-items: center;justify-content: center;max-width: max-content;width: 100%;height: 100%;}

.loading figure img {
    margin: -80px auto 0;
    max-width: var(--width240);
}

.progress-bar {
width: 50%;
height: 1px;
background: var(--opa-white01);
position: relative;
margin: 50px auto;
}

.progress {
width: 100%;
height: 1px;
background-color: var(--opa-white05);
position: absolute;
top: 0;
left: 0;
animation: blink 1s infinite;
}

@keyframes blink {
0% {
    width: 0;
}

100% {
    width: 100%;
}
}

/*+++++++++++++++++
slider
+++++++++++++++++*/
#slider {
	position: relative;
	padding: 0 0 80px;
}

#slider .slide-swiper .swiper-wrapper {
height: auto;
transition-timing-function: linear;
}

#slider .slide-swiper .swiper-slide {
margin: 0 0 0 -3px;
}

#slider .slide-swiper .swiper-wrapper img {
	width: 100%;
	margin: 0 0 0 -2px;
	aspect-ratio: 2/3;
	object-fit: cover;
}

#slider .sliderbox {
height: auto;
width: var(--flex-100);
}

.heading {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	padding: 25px;
	color: var(--white);
	width: 100%;
	box-sizing: border-box;
}

/*+++++++++++++++++
information
+++++++++++++++++*/
#information .grid ol {
display: block;
max-width: 100%;
}

/*+++++++++++++++++
concept
+++++++++++++++++*/
#concept {
	padding: 100px 20px 0;
	margin: 0;
	/* position: sticky; */
	top: 0;
}
#concept.indx {
	position: relative;
	/* display: none; */
}
#concept.indx.active {
	padding: 0;
	display: block;
}
#concept .large-inner {
max-width: 100%;
}

#concept .large-inner > .cpbox {
max-width: var(--large-inner);
margin: auto;
}

#concept .smbutton .column-2 span {
    padding: 0;
}

#concept .li_str {
	max-width: var(--flex-100);
	margin: 80px auto 0;
}
#concept .grid .li_str figure {
	overflow: hidden;
}
#concept .grid .li_str figure img {
	aspect-ratio: 3/1.5;
	vertical-align: bottom;
}
#concept .li_str a {
	display:block;
	/* border-top: 1px solid rgba(0,0,0,0.2); */
	padding: 0;
	position: relative;
	width: var(--flex-100);
	margin: 0 auto 30px;
}

#concept .li_str a .detail {
	padding:1.5rem;
}
#concept .li_str a .icon-arrow {
	/* margin: auto; */
	bottom: -0.5rem;
	transform: none;
	width: 50px;
	height: 50px;
}
#concept .li_str a:after {
	content:"";
	position: absolute;
	/* background: rgba(0,0,0,0.2); */
	width: 1px;
	height: 50%;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
}

#concept .grid {grid-template-columns: 1fr;justify-content: left;gap: 0;max-width: var(--flex-85);margin: auto;}

#concept .grid figure img {width: var(--flex-100);aspect-ratio: 2/1.5;object-fit: cover;}

#concept .grid .cpbox {margin: 0;padding: 50px 0 150px;box-sizing: border-box;}
#concept .column-2 {
	display:block;
}
#concept .column-2 a {
	margin: 30px 0;
}
#concept .smbutton {
}
/*+++++++++++++++++
salon
+++++++++++++++++*/
/*#salon a:hover .mdbutton{
background: var(--black);
}*/
#salon .large-inner {
	margin:auto;
}
#salon .icon-arrow {
	transform:none;
}
#salon .salon-flex {
	display: block;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 50px;
}

.salon-swiper {
	position: relative;
}

#salon .salon-tab {
	display: flex;
	margin: 50px 0 0;
	justify-content: center;
}

#salon .salon-tab a {
	font-weight: var(--wght-600);
	position: relative;
	color: var(--black);
	cursor: pointer;
	font-size: var(--font-h6);
	/* margin: 0 20px 0 0; */
}

#salon .salon-tab a.active {color: var(--gray);border-bottom: 2px solid var(--opa-black05);padding: 0 0 5px;}

#salon .salon-tab a:before {
	content: "";
	position: absolute;
	right: -2.5rem;
	width: 1px;
	height: 20px;
	/* background: var(--opa-black05); */
	transform: rotate(30deg);
	top: -2px;
	bottom: 0;
}

#salon .salon-tab a:last-child:before {
display: none;
}

#salon .swiper-slide figure {
background: var(--lightgray);
overflow: hidden;
}

#salon .swiper-slide figure img {aspect-ratio: 3/3.5;object-fit: cover;}
#salon .swiper-slide {
	position:relative;
}
#salon .swiper-button {
	display: flex;
	gap:20px;
	position: relative;
	bottom: -1rem;
	justify-content: center;
}

#salon .swiper-button-prev {
	width: 40px;
	height: auto;
	background: var(--white);
	border-radius: 100%;
	position: relative;
	border: 1px solid var(--black);
	bottom: 0;
	z-index: 2;
	left: 0;
	margin: 0;
	top: inherit;
	display: flex;
	align-items: center;
	padding: 10px;
}
#salon .swiper-button-next {
	width: 40px;
	height: 40px;
	background: var(--white);
	border-radius: 100%;
	position: relative;
	border: 1px solid var(--black);
	bottom: 0;
	z-index: 2;
	left: 0;
	margin: 0;
	top: inherit;
	display: flex;
	align-items: center;
	padding: 10px;
}
#salon .swiper-button-prev:before {
	content:"\f061";
	color: var(--black);
	transform: rotate(180deg);
}
#salon .swiper-button-prev:after,
#salon .swiper-button-next:after {
	display:none;
}
#salon .swiper-button-next:before {
	content:"\f061";
	color: var(--black);
}

#salon .swiper-slide a {overflow: hidden;position: relative;}
#salon .swiper-slide a:before {
        content: "";
        background: linear-gradient(transparent,var(--opa-black05));
        position: absolute;
        width: var(--flex-100);
        height: 20%;
        z-index: 1;
        transition: .3s;
        bottom: 0;
}
.detail {
	position: absolute;
	bottom: 0;
	padding: 1.5rem;
	left: 0;
	width: var(--flex-100);
	box-sizing: border-box;
	z-index: 2;
}
.fcsalon  .h2-title {
	margin:auto;
	text-align: center;
}
.fcsalon-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    align-items: center;
    height: 100%;
    /* max-width: 250px; */
    margin: 20px auto 30px;
}

.fcsalon-list li {
	/* border: 1px solid var(--black); */
	border-radius: 10px;
	display: flex;
	align-items: center;
	margin: auto;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	}
.fcsalon-list li a {
	display: block;
	/* padding: 20px 10px; */
	text-align: center;
	margin: auto;
}


/*+++++++++++++++++
gallery
+++++++++++++++++*/
#gallery {
overflow: hidden;
}

#gallery .catalog-swiper ol li {
background: var(--gray);
}

#gallery .catalog-swiper ol li a {display: block;overflow: hidden;width: var(--flex-100);}

section .smbutton {
	margin: auto;
	right: 1rem !important;
}
/*+++++++++++++++++++++++*/
/*recruit
/*+++++++++++++++++++++++*/
#recruit {
	box-sizing: border-box;
	display: flex;
	/* height: 350px; */
	align-items: center;
	justify-content: space-between;
	background: var(--white);
}
#recruit .efc-title {
	font-size: 3.5rem !important;
}
#recruit a {
	display: block;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
	margin: 100px auto !important;
	width: 100%;
	padding: 60px 30px 30px;
	background:url("../../images/common/material.png") repeat var(--darkgray);
	border-radius: 20px;
	box-sizing: border-box;
}
#recruit a .flex {
	align-items: center;
	justify-content: center;
}
#recruit a .icon-arrow{
	transform: scale(1.5);
	transition: .3s;
	position: relative;
}
#recruit a:hover .icon-arrow{
	transform: scale(1.8);
	transition: .3s;
}

@media screen and (min-width: 767px) {
.hr {
    border-bottom: 1px solid var(--gray);
    margin: 0 auto 80px;
}

/*+++++++++++++++++++++++*/
/*loading
/*+++++++++++++++++++++++*/

.loaded {
    height: 0;
}

.loaded figure {
    opacity: 0;
}

.remove .loading {
    display: none;
    transition: none;
    background: none;
    transform: none;
    position: inherit;
    z-index: -1;
}

.remove .loading * {
    background: none;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


.progress-bar {
    width: 50%;
    height: 1px;
    background: var(--opa-white01);
    position: relative;
    margin: 50px auto;
}

/*+++++++++++++++++
slider
+++++++++++++++++*/

#slider .slide-swiper .swiper-wrapper img {aspect-ratio: 3/2;}

/*+++++++++++++++++
concept
+++++++++++++++++*/
#concept {
	/* max-width:var(--width640); */
	margin:auto;
}
#concept .li_str {
	display: grid;
	gap:30px;
	grid-template-columns: 1fr 1fr;
}
#concept .li_str a {
	width:var(--flex-100);
}

/*+++++++++++++++++
information
+++++++++++++++++*/
#information .grid {grid-template-columns: 1fr;}

/*+++++++++++++++++
salon
+++++++++++++++++*/
#salon .salon-flex {width: var(--flex-95);/* display: flex; */}

#salon .salon-tab a:last-child:before {
    display: none;
}

.fcsalon-list .mdbutton:before {
    display: none;
}

}

@media screen and (min-width: 1024px) {
.hr {
    border-bottom: 1px solid var(--gray);
    margin: 0 auto 80px;
}
section .smbutton {
	/* margin:0; */
	/* right:0 !important; */
}
#gallery .smbutton {
	margin:auto;
	right: 4rem !important;
}
/*+++++++++++++++++++++++*/
/*loading
/*+++++++++++++++++++++++*/

.loaded {
    height: 0;
}

.loaded figure {
    opacity: 0;
}

.loading figure img {
    max-width: inherit
}
.remove .loading {
    display: none;
    transition: none;
    background: none;
    transform: none;
    position: inherit;
    z-index: -1;
}

.remove .loading * {
    background: none;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.progress-bar {
    width: 50%;
    height: 1px;
    background: var(--opa-white01);
    position: relative;
    margin: 50px auto;
}



/*+++++++++++++++++
slider
+++++++++++++++++*/
#slider .slide-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

/*+++++++++++++++++
information
+++++++++++++++++*/
#information {
	position: relative;
	z-index: 1;
}	

/*+++++++++++++++++
concept
+++++++++++++++++*/
#concept {
	position: relative;
	padding: 150px 0 0;
}	
#concept .grid figure img {aspect-ratio: 2/3;}

#concept .li_str {
	margin: 100px auto 0;
	max-width: var(--width360);
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr;
}	
#concept .grid {
    grid-template-columns: 45% 50%;
    justify-content: center;
    gap: 40px;
    /* width: 100%; */
    max-width: max-content;
}
#concept .column-2 {
	display:grid;
}
#concept .column-2 a {
	margin:0;
}	
#concept .li_str a {
	margin: 0;
	width: auto;
}
#concept .li_str a:last-child {
	float:none;
}	
#concept .grid .li_str figure img {aspect-ratio: 3/1.6;}	
/*+++++++++++++++++
salon
+++++++++++++++++*/
#salon {
position: relative;
z-index: 1;
}
#salon .salon-flex {/* display:flex; */width: auto;}	
#salon .large-inner{
	margin: 0 0 0 3rem;
}	
#salon .swiper-slide figure img {
	
aspect-ratio: 3/4;
}
	
#salon .salon-tab {
	margin: 40px auto 0;
	justify-content: right;
}

#salon .salon-tab a {
    font-size: var(--font-h5);
}


#salon .salon-tab a:before {
    height: 20px;
    top: -2px;
    bottom: 0;
}

#salon .salon-tab a:last-child:before {
    display: none;
}
.detail {
	padding: 2rem 1rem 2.5rem 2rem;
}

.fcsalon {
	/* display: flex; */
	/* grid-template-columns: 28% 65%; */
	align-items: center;
	justify-content: space-between;
	width: var(--large-inner);
	margin: auto;
}

	
.fcsalon-list {
	margin: auto;
	grid-template-columns: repeat(3,1fr);
	max-width: 1000px;
}
.fcsalon-list a {
	text-align: center;
	display: block;
	margin: auto;
	padding: 30px 30px;
}
.fcsalon-list a figure {
    overflow: hidden;
}


.fcsalon-list .mdbutton:before {
    display: none;
}
    
#salonlist .fcsalon-list {
    grid-template-columns: repeat(2,1fr);
}

/*+++++++++++++++++
gallery
+++++++++++++++++*/
#gallery {
	position: relative;
	z-index: 1;
}
#gallery .large-inner {

	margin: 0 0 0 3rem;
	/* overflow:hidden; */
}	

/*+++++++++++++++++++++++*/
/*recruit
/*+++++++++++++++++++++++*/

#recruit .sec-title {
	margin:0;
}
#recruit .efc-title {
	font-size: 5rem !important;
}
#recruit a {
	padding: 130px 50px;
	display: flex;
	width: var(--medium-inner);
}
#recruit a .flex {
	align-items: center;
}
#recruit a .icon-arrow{
	width:70px;
	height: 70px;
}
#recruit a:hover .icon-arrow{
	transform: scale(1.8);
	transition: .3s;
}
}

@media screen and (min-width: 1200px) {
.hr {
    border-bottom: 1px solid var(--gray);
    margin: 0 auto 80px;
}

/*+++++++++++++++++++++++*/
/*loading
/*+++++++++++++++++++++++*/

.loaded {
    height: 0;
}

.loaded figure {
    opacity: 0;
}

.remove .loading {
    display: none;
    transition: none;
    background: none;
    transform: none;
    position: inherit;
    z-index: -1;
}

.remove .loading * {
    background: none;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.progress-bar {
    width: 50%;
    height: 1px;
    background: var(--opa-white01);
    position: relative;
    margin: 50px auto;
}


.heading > div {
    position: absolute;
    bottom: 3rem;
    left: 2rem;
    width: var(--flex-100);
}
.heading > div .h3-title {
	font-size: var(--font-h4) !important;
	color: var(--black);
}
#slider {
	position: relative;
	top: 0;
	width: var(--flex-100);
	right: 0;
	height: auto;
	/* overflow: hidden; */
	padding: 0;
}

.heading > div {
    bottom: -3rem;

}	
/*+++++++++++++++++
concept
+++++++++++++++++*/
#concept .grid {
    grid-template-columns: 45% 51%;
    justify-content: space-between;
    gap: 40px;
    /* width: 100%; */
}	
#concept .grid figure img {
	aspect-ratio: 2/2;
}	
#concept .li_str {
	grid-template-columns:1fr 1fr;
}	
#concept .li_str {
	max-width: var(--flex-90);
	margin: 100px 0 0;
}	
/*+++++++++++++++++
information
+++++++++++++++++*/
#information .grid {
	grid-template-columns: 1fr 1fr 1fr;
}
	
/*+++++++++++++++++
salon
+++++++++++++++++*/

#salon .salon-flex {
	justify-content:space-between;
}	
#salon .salon-tab {
	justify-content: right;
}
#salon .salon-tab a:before {
    height: 50px;
    top: -12px;
}

#salon .salon-tab a:last-child:before {
    display: none;
}
#salon .swiper-button {
	display: flex;
	gap:20px;
	position: absolute;
	bottom: -7rem;
}

.fcsalon .h2-title,
#salon  .smbutton {
	margin: 0 auto 20px;
	text-align: center;
}

/*+++++++++++++++++
gallery
+++++++++++++++++*/

}


@media screen and (min-width: 1400px) {
.hr {
    border-bottom: 1px solid var(--gray);
    margin: 0 auto 80px;
}
.heading > div .h3-title {
	font-size: var(--font-h3) !important;
}	
.heading > div {
    bottom: 3em;
    left: 3rem;
    width: var(--flex-100);
}
/*+++++++++++++++++++++++*/
/*loading
/*+++++++++++++++++++++++*/

.loaded {
    height: 0;
}

.loaded figure {
    opacity: 0;
}

.remove .loading {
    display: none;
    transition: none;
    background: none;
    transform: none;
    position: inherit;
    z-index: -1;
}

.remove .loading * {
    background: none;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.progress-bar {
    width: 50%;
    height: 1px;
    background: var(--opa-white01);
    position: relative;
    margin: 50px auto;
}

/*+++++++++++++++++
slider
+++++++++++++++++*/

#slider .slide-swiper .swiper-wrapper img {
    width: 100%;
    aspect-ratio: 2/1.8;
}

#slider .sliderbox {grid-template-columns: 35% 65%;display: grid;}

.heading {position: relative;padding: 0;}


.heading .h3-title {
    color: var(--black);
    width: 43rem;
}
	
section {
	position: relative;
}
/*+++++++++++++++++
concept
+++++++++++++++++*/
#concept {
	max-width: var(--flex-100);
	position: sticky;
}
#concept .grid {
	grid-template-columns: 35% 60%;
}	
#concept .grid figure img {
	aspect-ratio: 2/3.48;
}	
	
/*+++++++++++++++++
information
+++++++++++++++++*/
#information .large-inner {
    margin: 0 0 0 5rem;
}

/*+++++++++++++++++
concept
+++++++++++++++++*/
#concept .smbutton {
    margin: 0;
}

/*+++++++++++++++++
salon
+++++++++++++++++*/

#salon .salon-tab {
	margin: 0 50px 0 0;
}	
#salon .large-inner {max-width: var(--large-inner) !important;margin: 0 0 0 5rem;}
#salon .salon-tab a:last-child:before {
    display: none;
}

#salon .swiper-slide figure img {aspect-ratio: 3/3.5;}


.fcsalon-list .mdbutton:before {
    display: none;
}


/*+++++++++++++++++
gallery
+++++++++++++++++*/
#salon .large-inner,
#gallery .large-inner {
	max-width:var(--flex-100) !important;
	margin: 0 0 0 6rem !important;
	/* overflow:hidden; */
}	
/*+++++++++++++++++
recruit
+++++++++++++++++*/
#recruit a {
	padding: 130px 100px;
	display: flex;
	width: var(--large-inner);
}	
	
}

@media screen and (min-width: 1700px) {
#slider .slide-swiper .swiper-wrapper img {
	aspect-ratio: 2/1.6;
	object-fit: cover;
	}
#concept .grid figure img {aspect-ratio: 2/2.95;}	

#concept .grid .cpbox {
	padding:100px 0 0;
}	
#concept .li_str {max-width: var(--flex-80);margin: 95px 0 0;}	

}