@charset "utf-8";

.loop-wrapper {
	pointer-events: none;
}

.salon-intro-row {
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  	gap: 40px;
}

.anchor-btn-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

.salon-name {
    font-family: var(--font-family03);
    font-size: clamp(30px, 27.573px + 0.647vw, 40px);
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1;
    margin: 0 20px 0 0;
}

.salon-th {
    font-family: var(--font-family01);
	font-size: clamp(15px, 12.137px + 0.763vw, 18px);
    letter-spacing: 0.05em;
}

.salon-td {
    margin: 5px 0 0;
    letter-spacing: 0.03em;
}

.salon-btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
  	margin: 30px auto 0;
}

.salon-btn-row .com-rsv-btn,.salon-btn-row .com-tel-btn {
    max-width: 270px;
    width: 100%;
    height: 65px;
    padding: 5px;
}

.salon-img-box01 img {
	aspect-ratio: 480 / 600;
}

.salon-img-box02 img {
	aspect-ratio: 480 / 340;
}


/*-----------------------------------------------------------
STAFF
-----------------------------------------------------------*/

.staff-inner {
	z-index: unset;
}

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

.in-modal-img-box {
    aspect-ratio: 380 / 420;
}

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

.salon-img-row {
	position: relative;
	width: 100%;
	gap: 40px;
}

.link-btn-wrapper:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 70%;
    top: auto;
    bottom: 0;
    left: 0;
    background: url(/system_panel/uploads/images/n-top-salon-bg.jpg)no-repeat center / cover;
    z-index: 1;
}

/*-----------------------------------------------------------
charm
-----------------------------------------------------------*/

.charm-item {
    border-bottom: 1px solid #CCC4B8;
}

.charm-title-box {
    display: flex;
    align-items: center;
    padding: 40px 0;
}

.charm-item:first-child .charm-title-box{
    padding: 0 0 40px 0;
}

.charm-num-box {
    font-family: var(--font-family03);
    font-size: clamp(16px, 15.029px + 0.259vw, 20px);
    margin: 0 20px 0 0;
    font-weight: 400;
}

.pink .charm-num-box {
	color: #F0A4A6;
}

.pink .accordion-icon-item {
	background: #F0A4A6;
}

.blue .charm-num-box {
	color: #378CB7;
}

.blue .accordion-icon-item {
	background: #378CB7;
}

.navy .charm-num-box {
	color: #4A5F7C;
}

.navy .accordion-icon-item {
	background: #4A5F7C;
}


.charm-title {
  	font-family: var(--font-family01);
	font-size: 16px;
    font-weight: 400;
	letter-spacing: 0.05em;
  	flex: 1;
}

.charm-text-block {
    margin: 0 0 30px 0;
  	width: 100%;
  	letter-spacing: 0.03em;
    line-height: 1.8;
}

/*-----------------------------------------------------------
バナー
-----------------------------------------------------------*/

.in-link-row .en-title50 {
  	font-family: var(--font-family03);
    font-weight: 300;
}

.in-link-row .banner-link-inner {
    justify-content: center;
    top: 0;
    bottom: 0;
}

.in-link-row .link-img-box {
    min-height: 250px !important;
}

.in-link-row .banner-link {
    margin: 40px auto 0;
}

/*-----------------------------------------------------------
メニュー
-----------------------------------------------------------*/

.salon-menu-left, .salon-menu-right {
    width: 100%;
}


.salon-menu-right {
    margin: 50px 0 0 0;
}

.salon-menu-title-box {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 0 20px;
    border-bottom: 1px solid;
}

.salon-menu-box {
	margin: 30px 0 0;
}

.salon-menu-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 0 20px;
    border-bottom: 1px solid #CCC4B8;
}

.menu-title-box {
	max-width: 500px;
	margin: 0 10px 0 0;
}

.menu-title {
	font-family: var(--font-family01);
	font-size: clamp(16px, 12.183px + 1.018vw, 20px);
  	letter-spacing: 0.05em;
}

.menu-text {
    font-size: clamp(14px, 13.515px + 0.129vw, 16px);
    letter-spacing: 0.03em;
    opacity: .65;
    margin: 10px 0 0;
}

.menu-price-box {
    margin: 10px 0 0 auto;
}

.menu-price-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.menu-price-list:nth-child(n+2) {
    margin: 10px 0 0;
}

.menu-price-text {
    width: 99px;
    font-size: clamp(14px, 13.515px + 0.129vw, 16px);
    letter-spacing: 0.03em;
    margin: 0;
    text-align: right;
}

.menu-price {
	font-family: var(--font-family03);
    font-size: clamp(18px, 16.301px + 0.453vw, 25px);
    font-weight: 300;
  	text-align: right;
}

.menu-price-box02 {
    margin: 10px 0 0 auto;
}

.menu-atte-text-box {
    margin: 30px 0 0;
    display: inline-block;
    padding: 5px 10px 6px;
    font-size: clamp(14px, 13.515px + 0.129vw, 16px);
    letter-spacing: 0.03em;
}

.pink.menu-atte-text-box {
    background: #F0A4A6;
}

.blue.menu-atte-text-box {
    background: #378CB7;
}

.navy.menu-atte-text-box {
    background: #4A5F7C;
}

.menu-add-text-box {
	margin: 15px 0 0;
	font-size: clamp(13px, 12.272px + 0.194vw, 16px);
  	letter-spacing: 0.03em;
}

.menu-price-box.menu-price-box-wide {
    width: 300px;
}

.menu-price-box.menu-price-box-wide .menu-price-text {
    width: 178px;
}

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

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

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

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

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

.salon-td {
    margin: 0;
}

.charm-title {
    font-size: clamp(18px, 16.301px + 0.453vw, 25px);
}


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

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

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

.anchor-btn-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}  
  
.salon-btn-row {
    flex-direction: row;
  	margin: 40px auto 0;
}
  
/*-----------------------------------------------------------
STAFF
-----------------------------------------------------------*/

.staff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

  
/*-----------------------------------------------------------
メニュー
-----------------------------------------------------------*/
  
.salon-menu-list {
    align-items: flex-start;
    flex-direction: row;
}

.menu-price-box {
    margin: 0;
}
  
.menu-price-box02 {
    margin: 0;
}
  
}/* min-width: 576px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

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

@media screen and (min-width: 768px) {
  
.salon-intro-row {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 80px;
}
  
.anchor-btn-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}  
  
.salon-btn-row {
    flex-direction: column;
}
  
.salon-th {
	font-size: clamp(16px, 13.333px + 0.347vw, 20px);
}

.in-link-row .banner-link {
    margin: 0;
    width: 48%;
}

.link-btn-wrapper:after {
    height: 50%;
}
  
/*-----------------------------------------------------------
メニュー
-----------------------------------------------------------*/

.salon-menu-left,.salon-menu-right {
    width: 48%;
  	margin: 0;
}
  
.salon-menu-list {
    align-items: flex-start;
    flex-direction: column;
}
  
.menu-title {
	font-size: clamp(17px, 1.941px + 1.961vw, 22px);
}

.menu-price-box {
    margin: 10px 0 0 auto;
}
  
.menu-price-box02 {
    margin: 10px 0 0 auto;
}


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

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

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


.salon-menu-title-box {
    flex-direction: row;
}


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


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

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


.salon-btn-row {
    flex-direction: row;
}
  
/*-----------------------------------------------------------
STAFF
-----------------------------------------------------------*/

.staff-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

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

.salon-img-row {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
  
/*-----------------------------------------------------------
バナー
-----------------------------------------------------------*/
  
.in-link-row .link-img-box {
    min-height: 300px !important;
}
  
  
/*-----------------------------------------------------------
メニュー
-----------------------------------------------------------*/
  
.menu-price-box {
    width: 208px;
    margin: 0;
}
  
.salon-menu-list {
    align-items: flex-start;
    flex-direction: row;
    padding: 0 0 20px;
}
  
.menu-title {
	font-size: clamp(16px, 5.714px + 1.004vw, 25px);
}
  
.menu-price-box02 {
    margin: 0;
}

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

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

@media screen and (min-width:1200px) {
  
.salon-intro-row {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 110px;
}
  
.salon-row-left {
    width: 50% !important;
}

.salon-row-right {
    width: 42.425% !important;
}

.salon-th {
	width: 175px !important;  
}
  
/*-----------------------------------------------------------
STAFF
-----------------------------------------------------------*/

.staff-grid {
    gap: 60px;
}



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

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

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

.salon-menu-left, .salon-menu-right {
    width: 46.9%;
}

.menu-price-box {
    width: 220px;
}
  
.menu-price-box.menu-price-box-wide {
    width: 300px;
}

.menu-price-box.menu-price-box-wide .menu-price-text {
    width: 178px;
}

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

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

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

/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/


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

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

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


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

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

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