sp-block {
    display: block;
}
@media screen and (min-width: 768px) {
    .pc-block {
        display: block !important;
    }

    .sp-block {
        display: none;
    }

    .sp-br {
        display: none !important;
    }
}

/* 画面幅が767px以下の時*/

@media screen and (max-width: 767px) {
    .pc-block {
        display: none !important;
    }

    .sp-br {
        display: block !important;
    }
}

h3:not(.topics-detail) h3{
    font-family: samantha-italic, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: capitalize;
    color: #718973;
    letter-spacing: 0.05rem;
    line-height: 0.8;
    margin: 0 0 30px 0;
    text-align: center;
}

.section-common-kv{
    width: 100%;
    /* height: 260px; */
    background: #DDE8DD;
    margin: 100px 0 100px 0;
    padding: 0 20px 50px;
}

.breadcrumb{
    margin: 0 auto 40px;
    padding: 25px 20px 0;
}

.keyvisual-inner{
    margin: 0 auto 0;
    text-align: center;
    

}

.keyvisual-title{
    font-family: samantha-italic, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: capitalize;
    color: #718973;
    letter-spacing: 0.05rem;
    line-height: 0.8;
    /* font-size: 8.0rem; */
    font-size: clamp(6.0rem, 1.5vw, 8.0rem);
    margin: 0;

}

.keyvisual-sub{
    /* font-size: 1.4rem; */
    font-size: clamp(1.3rem, 1.5vw, 1.4rem);
    display: block;
    color: #565B4B;
    margin: 20px 0 0;
}

.breadcrumb .breadcrumb-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: clamp(10px, 1.5vw, 12px);
}

.breadcrumb .breadcrumb-list a {
    color: #565B4B;
}

.breadcrumb .breadcrumb-item {
    color: #565B4B;
}


.breadcrumb .breadcrumb-item a {
    color: #565B4B;
}


.breadcrumb .breadcrumb-item a, .breadcrumb .breadcrumb-item span {
    /* font-size: 12px; */
    font-size: clamp(10px, 1.5vw, 12px);
}



.breadcrumb .breadcrumb-item::after {
    margin: 0 11px;
}

.breadcrumb .breadcrumb-item::after {
    content: "/";
}

.breadcrumb .breadcrumb-item:last-child::after {
  display: none;
}

ol, ul {
    list-style: none;
}


/*パンくず*/
#area-topics{
    .wrap-category,
    .pagenation {
        font-family: "source-han-sans-jp-variable",sans-serif;
        font-variation-settings: 'wght' 400;
    }

}


#content-area{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 100px;
    padding: 0 20px;
}


@media screen and (max-width:960px){
    
    #content-area{
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 80px;
    }
}



/*ふわっと表示*/
.basic {
  opacity: 0;
  translate: 0 15%;

    .isActive {
        opacity: 1;
        translate: 0;
        transition-timing-function: linear;
        transition-duration: 1.4s;
    }
}
.advanced {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  opacity: 0;
  translate: 0 13%;

    .isActive {
        opacity: 1;
        translate: 0;
        transition-timing-function:
            opacity var(--ease-out-cubic),
            translate var(--ease-out-quint);
        transition-duration: 1.8s;
    }
}
.split {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);

    .splitText .char {
        opacity: 0;
        translate: 0 100%;
    }

    .isActive {
        .headline .char {
        --delay: 0.05s;

        opacity: 1;
        translate: 0;
        transition:
            opacity 0.7s var(--ease-in-quad) calc(var(--delay) * var(--index)),
            translate 1.4s var(--ease-out-quart) calc(var(--delay) * var(--index));
        }

        .description .char {
        --delay: 0.003s;

        opacity: 1;
        translate: 0;
        transition:
            opacity 0.5s var(--ease-in-quad) calc(var(--delay) * var(--index) + 0.23s),
            translate 1.3s var(--ease-out-quart) calc(var(--delay) * var(--index) + 0.23s);
        }
    }
}
.showBottom {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  .char {
    transform-origin: 50% 100%;
    translate: 0 100%;
  }

  .headline,
  .description > span {
    overflow: hidden;
    line-height: 1;
  }

    .isActive {
        .headline .char {
        --delay: 0.02s;

        translate: 0;

        /* indexの2乗の遅延時間とすることで段々と出現が遅くなる */
        transition: translate 1s var(--ease-out-quart) calc((var(--delay) * pow(var(--index), 2)));
        }

        .description .char {
            --delay: 0.004s;

            translate: 0;
            transition: translate 1s var(--ease-out-quart)
            calc(var(--delay) * pow(var(--index), 2) * 0.01);
        }
    }
}
.blur {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

    opacity: 0;
    filter: blur(1em);
    scale: 1.1;

    .isActive {
        opacity: 1;
        filter: blur(0);
        scale: 1;
        transition:
            scale 1s var(--ease-out-quart),
            opacity 1s var(--ease-out-quart),
            filter 1.4s var(--ease-out-quart);
    }
}






#area-topics{
    .wrap-category{
        justify-content: center;
        align-items: center;

        .inner-category{
            background: #DDE8DD;
            /* padding: 6px 0px; */
            width: calc((100% - 80px) / 5);
            text-align: center;
            margin: 0 20px 60px 0;

            a{
                display: block;
                padding: 6px 0px;
                color: #565B4B;
            }

            a.current{
                color: #fff!important;
                background: #718973;
                transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
            }
        }

        .inner-category:last-child{
            margin-right:0px;
        }
        
    }

}

@media (hover: hover) and (pointer: fine) {
    .inner-category{
        a:hover {
           color: #fff!important;
        background: #718973;
        transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
        }
    }
}

/*IE11用に以下のコードも追加*/
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .inner-category{
        a:hover {
           color: #fff!important;
        background: #718973;
        transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
        }
    }
}




@media screen and (max-width:960px){
    #area-topics{

        .box-topics-d {
            .inner-topics {
                width: 100%;
                

            }
        }

        .wrap-category{
            gap: 15px;
            flex-wrap: wrap;
            margin: 0 0 30px;

            .inner-category{
                width: calc((100% - 30px) / 3);
                margin: 0;

            }

            .inner-category:last-child{
                width: calc((100% - 30px) / 3);
                margin-right:0px;
            }
            
        }

    }

}





.pagenation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -20px;
}

.pagenation li {
    margin-top: 20px;
}

.pagenation li:not(:last-child) {
    margin-right: 20px;
}

.pagenation li a,
.pagenation li span {
    display: block;
    padding: 20px;
    line-height: 1;

    background:#DDE8DD;
    color: #718973;
}

.pagenation li span {
    color: #fff;
    background-color: #718973;
}

@media screen and (max-width:960px){
    .pagenation li a,
    .pagenation li span {
        padding: 15px;

    }
}

#area-res{
    padding: 0 20px;

    .wrap-res{
        background: radial-gradient(at  0%  90%, #ABC6AB 0, transparent 50%),
            radial-gradient(at 70% 30%, #FFFDDD 0, transparent 40%),
            radial-gradient(at 50% 100%, #DDE8DD 0, transparent 100%);
        padding: 50px 0;
        margin-left: auto;
        margin-right: auto;
    }

    .wrap-salon{
        align-items: center;
        gap: 8rem;
        justify-content: center;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;

        .inner-txt{
            .box-txt{
                margin: 0 auto 30px;
                padding: 0 20px;
            }
        }
    }

    h3{
        text-align: center;
        margin: -70px 0 30px 0;
    }

    h4{
        color: #333;
    }

    .keyvisual-sub{
        line-height: 1.2;
        margin: 20px 0 0;
    }

    .minion{
        font-family: minion-pro-caption, serif;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0.1em;
    }

    .btnlinestretches2{
        color: #718973;
    }

    .inner-txt{
        .box-txt{
            text-align: center;
            width: 100%;
            max-width: 600px;
            margin: 0 auto 30px;
        }

        .wrap-btn{
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
        }
    }



}



#area-topics {
    .box-topics-d{

        .inner-topics {
            width: 90%;
            margin: 0 auto 40px;
            border-bottom: 2px solid #DDE8DD;
            padding: 0 0 40px 0;

            /* .wrap-topics-area {
                width: 100%;
                max-width: 1015px;

                .area-ttl {
                    font-variation-settings: 'wght' 300;
                    letter-spacing: 0.1em;
                    border-bottom: 2px solid #DDE8DD;
                    padding: 0 0 20px 0;
                    margin: 0 0 30px 0;
                    font-size: clamp(1.6rem, 1.5vw, 1.8rem);
                }
            } */
        }

    }
}


/* pagination */
.wp-pagenavi{
	margin: 2rem auto 5rem;
	display:flex;
	width: 100%;
	justify-content:center;
 }

.wp-pagenavi a:hover,
.p-justify__center a:hover{
	border: 1px #DDE8DD solid;
	background: #DDE8DD;
	color: #718973;
	transition : all 0.5s ease 0s;
 }

 .nav-links{
	display:flex;
	width: 100%;
	 justify-content:center;
 }
 .wp-pagenavi .page-numbers{
	display:inline-block;
	margin-right:20px;
	padding:10px 15px;
	color:#718973;
	/*border-radius:3px;*/
	/*box-shadow:0 3px 3px #999;*/
	background:#fff;
	border-radius: 4px;
	border: 1px #DDE8DD solid;
 }

.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink{
	border: 1px #999 solid;
    background: #999;
    color: #718973;
		display:inline-block;
	margin-right:20px;
	padding:10px 15px;
	color:#718973;
	background:#fff;
	border-radius: 4px;
	border: 1px #DDE8DD solid;
}

.wp-pagenavi .current{
	display:inline-block;
	margin-right:20px;
	padding:10px 15px;
	color:#718973;
	background:#DDE8DD;
	border-radius: 4px;
	border: 1px #DDE8DD solid;
	}

 .wp-pagenavi .page{
	margin-right:20px;
	padding:10px 15px;
	color:#718973;
	background:#fff;
	border-radius: 4px;
	border: 1px #DDE8DD solid;
	}

 .wp-pagenavi .dots{
	background:transparent;
	box-shadow:none;
 }



@media screen and (max-width: 960px) {
    #area-res {
        .wrap-salon {
            gap: 3rem;
        }
    }

    /* #area-topics {
        .inner-topics {
            .wrap-topics-area {
                width: 100%;
            }
        }
    } */
}

#content-salon{

    #area-salon-img{
        text-align: center;

        img{
            margin: 0 0 20px 0;
        }

        .wrap-25th{
            font-family: samantha-italic, sans-serif;
            font-weight: 400;
            font-style: normal;
            text-transform: capitalize;
            color: #718973;
            letter-spacing: 0.05rem;
            line-height: 0.8;
            /* font-size: 2.6em; */
            font-size: clamp(2.6rem, 4.5vw, 4.0rem);
        }
    }

    #area-salon-detail{
        .wrap-concept::before {
            content: '';
            position: absolute;
            top: 80px; /* ← ここで下にずらす */
            left: 0;
            width: 100%;
            height: 94%;
            background-image: url('../images/hair-gracias/concept-bg01.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center top;
            z-index: -1;
        }

        .wrap-concept.fresco::before {
            content: '';
            position: absolute;
            top: 80px; /* ← ここで下にずらす */
            left: 0;
            width: 100%;
            height: 94%;
            background-image: url('../images/hair-fresco/concept-bg01.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center top;
            z-index: -1;
        }

        .wrap-concept{
            position: relative;
            z-index: 1;
            padding: 0 0 50px;


            .box-concept{
                margin: 0 auto 0;
                padding: 0 20px;
            }

            .concept-img{
                text-align: center;
                margin: 0 0 30px 0;
            }

            .inner-concept{
                    background: #ffffff;
                    padding: 80px 100px;
                    text-align: center;

                    h3{
                        margin: 0 0 30px 0;
                    }

                    .concept-txt{
                        margin: 0 0 30px 0;
                    }
            }

            .concept-point{
                    background: #F5F8F5;
                    padding: 40px 50px;
                    text-align: left;
                    margin: 0 auto 30px;
                    width: 100%;
                    max-width: 780px;
                    /* font-size: 1.5rem; */
                    font-size: clamp(1.4rem, 1.5vw, 1.5rem);
                    
            }

            ul.concept-point>li{
                position: relative;
                padding-left: 1.25em;
            }
            
            ul.concept-point>li:before{
                content: '';
                position: absolute;
                left: 0;
                top: .8em;
                width: 6px;
                height: 6px;
                background-color: #718973;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .concept-end{
                color: #565b4b;
                /* font-size: 2.0rem; */
                font-size: clamp(1.8rem, 1.5vw, 2.0rem);
            }

        }

        .wrap-menu{
            margin-right: auto;
            margin-left: auto;
            padding: 0 20px;

            .menu-txt{
                gap: 40px 30px;
                flex-wrap: wrap;
                justify-content: center;

                dl{
                    width: calc((100% - 4rem) / 2);
                }

                dt{
                    background: #DDE8DD;
                    color: #565B4B;
                    padding: 8px 0 8px 20px;
                    /* font-size: 2.4rem; */
                    font-size: clamp(2.2rem, 1.5vw, 2.4rem);
                }

                dd{
                    padding: 10px 10px 10px 20px;
                    border-bottom: 1px solid #DDE8DD;

                }

                dd span.price{
                    display: inline-block; /* または block */
                    float: right; /* 右寄せしたいだけならこれがベスト */


                }

                dd.memo{
                    color: #808080;
                    /* font-size: 1.2rem; */
                    font-size: clamp(1.1rem, 1.5vw, 1.2rem);
                    border: 0;
                }

                
            }

        }

        .wrap-mcard{
            margin-right: auto;
            margin-left: auto;
            padding: 0 20px;

            .box-mcard{
                align-items: center;
                justify-content: center;
                position: relative;
                max-height: 26rem;
                margin: 30px 0 0 0;

                .mcard-img{
                    margin: 0 -30px 0 0;
                    max-width: clamp(220px, 21vw, 320px);
                    width: 100%;
                }

                .mcard-txt{
                    background: #DDE8DD;
                    padding: 80px;
                    /* position: absolute; */
                    z-index: -2;
                }
            }

        }

        .wrap-info{

            h3{
                margin: 0 0 60px 0;
            }
            .info-img{
                text-align: center;
                background: #DDE8DD;
                padding: 0 0 30px;
                margin: 0 0 50px 0;

                img{
                    margin: -20px 0 20px 0;
                    
                }
            }

            .salon-name{
                font-family: cormorant, sans-serif;
                font-weight: 600;
                font-style: normal;
                color: #333;
                /* font-size: 2.8rem; */
                font-size: clamp(2.6rem, 1.5vw, 2.8rem);
                gap: 4rem;

            }

            .info-detail{
                margin-right: auto;
                margin-left: auto;
                gap: 4rem;
                padding: 0 20px;

                dl {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    width: calc((100% - 4rem) / 2);
                    /* font-size: 1.4rem; */
                    font-size: clamp(1.3rem, 1.5vw, 1.4rem);
                    /* align-items: flex-end; */
                    align-content: flex-start;
                }

                dt {
                    padding: 20px 30px;
                    width: 160px;
                    border-bottom: 2px solid #dde8dd;
                    display: flex;
                    align-items: center;
                }

                dd {
                    padding: 20px 30px;
                    width: calc(100% - 160px);
                    border-bottom: 2px solid #dde8dd;
                    display: flex;
                    align-items: center;
                }

                dt,
                dd {
                    display: flex;
                    align-items: center;
                }

                .maps{
                    position: relative;
                    width: calc((100% - 4rem) / 2);
                    padding-top: 32.4%;
                    height: 0;
                }

                .maps iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }




        }


        .wrap-calender{
            margin-right: auto;
            margin-left: auto;
            padding: 0 20px;

            .calender-detail{
                width: 100%;
                /* height: 500px;
                background: #DDE8DD; */
            }
        }

        .wrap-staff{
            margin-right: auto;
            margin-left: auto;
            padding: 0 20px;

            .box-staff{
                justify-content: space-evenly;
                flex-wrap: wrap;
                gap: 20px;

                .staff-detail{
                    text-align: center;
                    width: calc((100% - 20px) / 4);
                    max-width: 220px;

                    .staff-name{
                        /* font-size: 2.6rem; */
                        font-size: clamp(2.4rem, 1.5vw, 2.6rem);
                        margin: 8px 0;
                        color: #718973;   
                        letter-spacing: 0.1rem;
                        line-height: 1.1;                   
                    }

                    .staff-job{
                        /* font-size: 1.4rem; */
                        font-size: clamp(1.3rem, 1.5vw, 1.4rem);
                        line-height: 1.5;
                    }

                    img{
                        width: 100%;
                        max-width: 220px;
                        /* height: 100%;
                        max-height: 220px; */
                        object-fit: cover;
                        aspect-ratio: 1 / 1;
                    }

                }

                .staff-detail:nth-child(even) img{
                    box-shadow: 10px 10px 0 var(--accent-color-yl);
                    border: 1px solid #718973;
                }

                    
                .staff-detail:nth-child(odd) img{
                    box-shadow: 10px 10px 0 var(--accent-color-lgr);
                    border: 1px solid #718973;
                }
            }
        }
    }
}
:root {
    --accent-color-lgr: #DDE8DD;
    --accent-color-yl:#fcf7d0;
}


.xo-event-calendar p.holiday-title {
    padding: 2px 2.2rem 0 0!important;
    display: inline;
}

@media screen and (max-width: 960px) {
    #content-salon{

        #area-salon-img{
            text-align: center;

            img{
                margin: 0 0 20px 0;
            }

            .wrap-25th{
                font-family: samantha-italic, sans-serif;
                font-weight: 400;
                font-style: normal;
                text-transform: capitalize;
                color: #718973;
                letter-spacing: 0.05rem;
                line-height: 0.8;
                /* font-size: 2.6em; */
                /* font-size: clamp(2.4rem, 1.5vw, 2.6rem); */
            }
        }

        #area-salon-detail {

                            .wrap-concept{
            
            padding: 0 0 50px;


            .box-concept{
                margin: 0 auto 0;
                padding: 0 20px;
            }

            .concept-img{
                text-align: center;
                margin: 0 0 30px 0;
            }

            .inner-concept{
                    background: #ffffff;
                    padding: 80px 4rem;
                    text-align: center;

                    h3{
                        margin: 0 0 30px 0;
                    }

                    .concept-txt{
                        margin: 0 0 30px 0;
                        text-align: left;
                    }
            }

            .concept-point{
                    background: #F5F8F5;
                    /* padding: 40px 50px; */
                    padding: clamp(20px, 5vw, 40px) clamp(30px, 6vw, 50px);
                    text-align: left;
                    margin: 0 auto 30px;
                    width: 100%;
                    max-width: 780px;
                    /* font-size: 1.4rem; */
                    font-size: clamp(1.3rem, 1.5vw, 1.4rem);
                    
            }

            ul.concept-point>li{
                position: relative;
                padding-left: 1.25em;
            }
            
            /* ul.concept-point>li:before{
                content: '\30fb';
                position: absolute;
                left: 0;
                top: 0;
            } */

            .concept-end{
                color: #565b4b;
            }

        }

        .wrap-menu{
            margin-right: auto;
            margin-left: auto;

            .menu-txt{
                gap: 40px 30px;
                flex-wrap: wrap;
                justify-content: center;

                dl{
                    width: 100%!important;
                    margin: 0 0 30px 0;
                }

                dt{
                    background: #DDE8DD;
                    color: #565B4B;
                    padding: 6px 0 6px 20px;
                }

                dd{
                    padding: 10px 10px 10px 20px;
                    border-bottom: 1px solid #DDE8DD;

                }

                dd span.price{
                    display: inline-block; /* または block */
                    float: right; /* 右寄せしたいだけならこれがベスト */


                }

                dd.memo{
                    color: #808080;
                    /* font-size: 1.2rem; */
                    font-size: clamp(1.1rem, 1.5vw, 1.2rem);
                    border: 0;
                }

                
            }

        }

        .wrap-mcard{
            margin-right: auto;
            margin-left: auto;

            .box-mcard{
                align-items: center;
                justify-content: center;
                position: relative;
                max-height: 26rem;
                flex-flow: column;
                margin: 50px 0 0 0;


                .mcard-img{
                    margin: 0 0 -50px 0;
                }

                .mcard-txt{
                    background: #DDE8DD;
                    /* padding: 60px 60px 50px; */
                    padding: clamp(55px, 6vw, 60px) clamp(30px, 6vw, 60px) clamp(25px, 5vw, 50px);
                    /* position: absolute; */
                    z-index: -2;
                }
            }

        }

            .wrap-info{

                h3{
                    margin: 0 0 60px 0;
                }
                .info-img{
                    text-align: center;
                    background: #DDE8DD;
                    padding: 0 0 30px;
                    margin: 0 0 50px 0;

                    img{
                        margin: -20px 0 20px 0;
                        width: 60%;
                    }
                }

                .salon-name{
                    font-family: cormorant, sans-serif;
                    font-weight: 600;
                    font-style: normal;
                    color: #333;
                    /* font-size: 2.8rem; */
                    font-size: clamp(2.6rem, 1.5vw, 2.8rem);
                    gap: 4rem;

                }

                .info-detail{
                    margin-right: auto;
                    margin-left: auto;
                    gap: 4rem;

                    dl {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        width: 100%;
                        /* font-size: 1.4rem; */
                        font-size: clamp(1.3rem, 1.5vw, 1.4rem);
                        /* align-items: flex-end; */
                        align-content: flex-start;
                        margin: 0 0 30px 0;
                    }

                    dt {
                        padding: 20px 30px;
                        width: 160px;
                        display: flex;
                        align-items: center;
                        color: #718973;
                    }

                    dd {
                        padding: 20px 30px;
                        width: calc(100% - 160px);
                        

                        display: flex;
                        align-items: center;
                    }

                    .maps{
                        position: relative;
                        width: 100%;
                        padding-top: 60%;
                        height: 0;
                    }

                    .maps iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                }




            }


            .wrap-calender{
                margin-right: auto;
                margin-left: auto;

                .calender-detail{
                    width: 100%;
                    /* height: 500px;
                    background: #DDE8DD; */
                }
            }

            .wrap-staff{
                margin-right: auto;
                margin-left: auto;

                .box-staff{
                    justify-content: space-evenly;
                    flex-wrap: wrap;
                    margin-right: auto;
                    margin-left: auto;
                    width: 100%;
                    max-width: 600px;

                    .staff-detail{
                        text-align: center;
                        width: calc((100% - 20px) / 2);

                        img{
                            box-shadow: 10px 10px 0 var(--accent-color-lgr);
                        }

                        .staff-name{
                            /* font-size: 2.4rem;  */
                            font-size: clamp(2.2rem, 1.5vw, 2.4rem);                 
                        }
                    }
                }
            }

        }

        :root {
            --accent-color-lgr: #DDE8DD;
            --accent-color-yl:#fcf7d0;
        }


    }

}

.lead-sub {
    /* font-size: 1.4rem; */
    font-size: clamp(1.3rem, 1.5vw, 1.4rem);
    margin: 10px 0 30px 0;
    display: block;
    color: #333;
}

@media screen and (max-width: 767px) {
    #content-salon {
        #area-salon-detail {
            .wrap-menu {
                .menu-txt {
                    dd span.price {
                        display: block;
                        float: none;
                    }
                }
            }

            .wrap-concept::before {
                content: none;
            }

            .wrap-concept.fresco::before {
                content: none;
            }


            .wrap-concept {
                padding: 0;
                .inner-concept {
                    padding: 30px 0 0;
                }

                .concept-point {
                    padding: 40px;
                }
            }






        }
    }

}


@media screen and (max-width: 767px) {
    #content-salon {
        #area-salon-detail {
            .wrap-info {
                .info-detail {


                        dl {
                            display: block;
                            border-top: 2px solid #DDE8DD;
                            width: 100%;
                        }

                        dt {
                            padding: 20px 30px 0;
                            width: 100%;
                            border-bottom: 0;
                            color: #718973;
                        }

                        dd {
                            padding: 6px 30px 20px;
                            width: 100%;
                            border-bottom: 2px solid #DDE8DD;
                        }

                        dt,
                        dd {
                            display: flex;
                            align-items: center;
                        }

                        .maps {
                            width:100%;
                            height: 400px;
                        }

                        
                }
            }
        }
    }
}

/* 
h4 {
    position: relative;
    display: inline-block;
    padding: 0 55px;
}

h4:before, h4:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: black;
}

h4:before {
    left:0;
}
h4:after {
    right: 0;
} */

#content-about{
    #area-about{
        margin-right: auto;
        margin-left: auto;
        padding: 0 20px;


        h4 {
            position: relative;
            display: inline-block;
            padding: 0 70px;
            width: 100%;
            /* font-size: 2.8rem; */
            font-size: clamp(2.6rem, 1.5vw, 2.8rem);

                span.title-wrapper{
                    background: linear-gradient(transparent 60%, #dde8dd 60%);
                    padding: 0 0.4rem;
                }
        }

        .wrap-philosophy{
            .inner-philosophy{
                text-align: center;
            }

            h4 {
                /* font-size: 2.8rem; */
                font-size: clamp(2.6rem, 1.5vw, 2.8rem);
            }


            h4:before, h4:after {
                content: '';
                position: absolute;
                top: 50%;
                display: inline-block;
                width: 42%;
                height: 2px;
                background-color: #DDE8DD;
            }

            h4:before {
                left:0;
            }
            h4:after {
                right: 0;
            }



            .box-txt{
                border-bottom: 2px solid #DDE8DD;
                padding: 3rem 2rem;
            }


        }



        .wrap-ainfo{
            .ainfo-detail{
                margin-right: auto;
                margin-left: auto;
                gap: 4rem;

                dl {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    width: 100%;
                    /* font-size: 1.4rem; */
                    font-size: clamp(1.3rem, 1.5vw, 1.4rem);
                    /* align-items: flex-end; */
                    align-content: flex-start;
                    border-top: 2px solid #DDE8DD;
                }

                dt {
                    padding: 20px 30px;
                    width: 300px;
                    border-bottom: 2px solid #DDE8DD;

                    display: flex;
                    align-items: center;
                    color: #718973;
                }

                dd {
                    padding: 20px 30px;
                    width: calc(100% - 300px);
                    border-bottom: 2px solid #DDE8DD;

                    display: flex;
                    align-items: center;
                }

                dt,
                dd {
                    display: flex;
                    align-items: center;
                }


            }

        }

        .wrap-access{
            .access-detail{
                margin-right: auto;
                margin-left: auto;
                text-align: center;
                margin: 0 auto 30px;

                .add{
                    margin: 0 0 10px 0;
                }

                .maps{
                    position: relative;
                    width: 100%;
                    padding-top: 30%;
                    /* 16:9 */
                    height: 0;
                }

                .maps iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }


            }

        }
    }
}

@media screen and (max-width: 960px) {
   
    #content-about{
        #area-about{




            .wrap-access{
                .access-detail{


                    .maps{
                        padding-top: 60%;
                    }




                }

            }
        }
    } 
}


@media screen and (max-width: 767px) {
    #content-about{
        #area-about{
            .wrap-philosophy{

                .box-txt{
                    text-align: left;
                }

                h4:before, h4:after {
                    width: calc(50% - 80px);
                }
            }

            .wrap-ainfo{
                .ainfo-detail{
                    margin-right: auto;
                    margin-left: auto;
                    gap: 4rem;

                    dl {
                        display: block;
                        border-top: 2px solid #DDE8DD;
                    }

                    dt {
                        padding: 20px 30px 0;
                        width: 100%;
                        border-bottom: 0;
                        color: #718973;
                    }

                    dd {
                        padding: 20px 30px;
                        width: 100%;
                        border-bottom: 2px solid #DDE8DD;
                    }

                    dt,
                    dd {
                        display: flex;
                        align-items: center;
                    }

                }
            
            }
        }

    }

}

#content-transferb{
    #area-transferb{
        margin-right: auto;
        margin-left: auto;
        padding: 0 20px;

        .wrap-tb_concept{
            .box-tb_concept{
                align-items: center;
                gap: 50px;

                .concept-img{
                    width: 100%;
                    max-width: 260px;
                }

                .concept-txt{
                    padding: 50px;
                    background: #f5f8f5;
                }
            }

        }

        .wrap-activities{
            .inner-activities{

                .inner-ttl{
                    text-align: center;
                    background: #DDE8DD;
                    padding: 20px;
                    margin: 0 0 30px 0;
                    background-image: radial-gradient(circle, #ffffff 2px, transparent 2px);
                    background-position: 0 0;
                    background-size: 8px 7px;
                }

                .box-activities{
                    align-items: center;
                    gap: 40px;

                    .box-img{
                        justify-content: space-evenly;
                        align-items: center;
                        gap: 20px;
                    }

                    .box-img img{
                            width: 20rem;
                            border: 1px solid #718973;
                    }

                    .box-txt{
                        width: calc(100% - (40rem + 40px));
                    }

                
                }

            }


            .inner-etc{
                background: #f5f8f5;
                /* padding: 40px 50px; */
                width: 100%;
                max-width: 780px;
                margin: 0 auto 30px;
                padding: clamp(30px, 5vw, 40px) clamp(30px, 6vw, 50px);
            }

            .inner-etc h4{
                text-align: center;
                margin: 0 auto 30px;
                /* font-size: 2.0rem; */
                font-size: clamp(1.8rem, 1.5vw, 2.0rem);
            }

            ul.concept-point{
                    text-align: left;                  
            }

            ul.concept-point>li{
                position: relative;
                padding-left: 1.25em;
            }
            
            ul.concept-point>li:before{
                content: '\30fb';
                position: absolute;
                left: 0;
                top: 0;
            }

        }

    }

}


@media screen and (max-width: 960px) {
    #content-transferb{
        #area-transferb{
            margin-right: auto;
            margin-left: auto;
            padding: 0 20px;

            .wrap-tb_concept{
                .box-tb_concept{

                    .concept-img{
                        margin: 0 auto 30px;
                    }

                    .concept-txt{
                        /* padding: 50px;
                        background: #eee; */
                        padding: clamp(30px, 5vw, 40px) clamp(30px, 6vw, 50px);
                    }
                }

            }

            .wrap-activities{
                .inner-activities{

                        .inner-ttl{
                            /* text-align: center;
                            background: #eee;
                            padding: 20px;
                            margin: 0 0 30px 0; */
                            
                            background-image: radial-gradient(circle, #ffffff 1.5px, transparent 1.5px);
                            background-position: 0 0;
                            background-size: 6px 6px;
                        }

                        .box-activities{
                            /* align-items: center;
                            gap: 40px; */

                            .box-img{
                                margin: 0 auto 20px;
                                width: 100%;
                                max-width: 420px;
                            }

                            .box-img img{
                                width: 44%;
                                max-width: 20rem;
                            } 

                            .box-txt{
                                width: 100%;
                            }

                        
                        }

                }

                /* ul.concept-point{
                        background: #F5F8F5;
                        padding: 40px 50px;
                        text-align: left;
                        margin: 0 auto 30px;
                        width: 100%;
                        max-width: 780px;
                        
                }

                ul.concept-point>li{
                    position: relative;
                    padding-left: 1.25em;
                }
                
                ul.concept-point>li:before{
                    content: '\30fb';
                    position: absolute;
                    left: 0;
                    top: 0;
                } */

            }

        }

    }
}

#content-recruit{
    #area-recruit{
        margin-right: auto;
        margin-left: auto;
        /* padding: 0 20px; */

        .inner-recruit{
            h3{
                padding: 0 20px;
            }

            .box-intro{
                
                text-align: center;

                .catch-txt{
                    margin: 0 0 30px 0;
                    padding: 0 20px;
                    font-variation-settings: 'wght' 500;
                }

                .wrap-catch{
                    padding: 50px 0;
                    background: #DDE8DD;

                    .catch-txt{
                        margin: 0 0 30px 0;
                    }

                    .catch-img{
                        margin-right: auto;
                        margin-left: auto;
                        gap: 20px;
                        padding: 0 20px;

                        .box-img{

                            .caption{
                                /* font-size: 1.2rem; */
                                font-size: clamp(1.1rem, 1.5vw, 1.2rem);
                                font-variation-settings: 'wght' 500;
                            }
                        }
                    }
                    
                }

            }

            .box-recruit{
                text-align: center;
                margin-right: auto;
                margin-left: auto;
                padding: 0 20px;

                h4{
                    /* font-size: 2.0rem; */
                    font-size: clamp(1.8rem, 1.5vw, 2.0rem);
                    position: static;
                    margin: 0 0 20px 0;

                    span.title-wrapper{
                        background: linear-gradient(transparent 70%, #dde8dd 70%);
                        padding: 0 0.4rem;
                    }

                }

                h4:before, h4:after {
                    position: static;
                    width: 0;
                }

                dl {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    width: 100%;
                    /* font-size: 1.4rem; */
                    font-size: clamp(1.3rem, 1.5vw, 1.4rem);
                    align-content: flex-start;
                    text-align: left;
                    border-top: 2px solid #DDE8DD;
                }

                dt {
                    padding: 20px 30px;
                    width: 260px;
                    border-bottom: 2px solid #DDE8DD;

                    display: flex;
                    align-items: center;

                    color: #718973;
                }

                dd {
                    padding: 20px 30px;
                    width: calc(100% - 260px);
                    border-bottom: 2px solid #DDE8DD;

                    display: flex;
                    align-items: center;
                }

                dt,
                dd {
                    display: flex;
                    align-items: center;
                }

                .detail-txt{
                    border-top: 2px solid #DDE8DD;
                    width: 100%;
                    text-align: left;
                    padding: 30px 0 0 30px;
                    margin-right: auto;
                    margin-left: auto;
                }
            }

        }
    }
}

@media screen and (max-width: 767px) {
    #content-recruit{
        #area-recruit{
            margin-right: auto;
            margin-left: auto;
            /* padding: 0 20px; */

            .inner-recruit{
                h3{
                    padding: 0 20px;
                }

                .box-intro{
                    
                    text-align: center;

                    .catch-txt{
                        margin: 0 0 30px 0;
                    }

                    .wrap-catch{
                        padding: 50px 0;
                        background: #DDE8DD;

                        .catch-txt{
                            margin: 0 0 30px 0;
                        }

                        .catch-img{
                            margin-right: auto;
                            margin-left: auto;
                            gap: 20px;
                            padding: 0 20px;
                            flex-wrap: wrap;
                            justify-content: center;

                            .box-img{
                                width: calc((100% /2) - 20px);

                                .caption{
                                    /* font-size: 1.3rem; */
                                    font-size: clamp(1.2rem, 1.5vw, 1.3rem);
                                }
                            }
                        }
                        
                    }

                }

                .box-recruit{
                    text-align: center;
                    margin-right: auto;
                    margin-left: auto;
                    padding: 0 20px;

                    h4{
                        /* font-size: 2.0rem; */
                        font-size: clamp(1.8rem, 1.5vw, 2.0rem);
                        position: static;
                        margin: 0 0 20px 0;

                        span.title-wrapper{
                            background: linear-gradient(transparent 70%, #dde8dd 70%);
                            padding: 0 0.4rem;
                        }

                    }

                    h4:before, h4:after {
                        position: static;
                        width: 0;
                    }

                    dl {
                        display: block;
                        border-top: 2px solid #DDE8DD;
                    }

                    dt {
                        padding: 20px 30px 0;
                        width: 100%;
                        border-bottom: 0;

                        display: flex;
                        align-items: center;

                        color: #718973;
                    }

                    dd {
                        padding: 20px 30px;
                        width: 100%;
                        border-bottom: 2px solid #DDE8DD;

                        display: flex;
                        align-items: center;
                    }

                    dt,
                    dd {
                        display: flex;
                        align-items: center;
                    }

                    .detail-txt{
                        border-top: 2px solid #DDE8DD;
                        width: 100%;
                        text-align: left;
                        padding: 30px 0 0 30px;
                        margin-right: auto;
                        margin-left: auto;
                    }
                }

            }
        }
    }
}

#area-404{
    margin-right: auto;
    margin-left: auto;
    text-align: center;

    p{
        margin: 0 auto 30px;
    }

    .txt-404{
        /* font-size: 10rem; */
        font-size: clamp(9rem, 1.5vw, 10rem);
    }
}