@charset "UTF-8";

/*----- main -----*/
div.sliderWrap {
    background: url("../images/h_bg.svg") no-repeat center bottom;
    background-size: 120vw 42vw;
}
ul.index_slider {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
ul.index_slider img {
    border-radius: 10px;
}

@media screen and (max-width: 600px) {
div.sliderWrap {
    background: url("../images/h_bg.svg") no-repeat center bottom;
    background-size: 180vw 63vw;
}
ul.index_slider {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
ul.index_slider img {
    border-radius: 10px;
}
}

.horizontal {
    display: inherit;
}
.vertical {
    display: none;
}
@media screen and (max-width: 600px) {
.horizontal {
    display: none;
}
.vertical {
    display: inherit;
}
}

/*----- introductionWrap -----*/
.introductionWrap {
    background: #E6EEF6;
    padding: 50px 0 0;
}
.introductionTtl {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 167px;
    background: url("../images/bg1Left.png") no-repeat right calc(50% + 450px) center, url("../images/bg1Right.png") no-repeat left calc(50% + 450px) center;
    background-size: 255px 167px, 255px 167px;
    padding: 50px 0;
    margin: 0 auto;
}
.introductionTtl p {
    font-size: calc( 20 / var(--root-font-size) * 1rem );
    text-align: center;
}

section#medical-services {
    padding: 50px 0 0;
}
section#medical-services .subTtl {
    position: relative;
}
section#medical-services .subTtl::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 110px;
    height: 28px;
    background: url("../images/icon_mark.svg") no-repeat center center;
    background-size: contain;
    margin: 0 auto;
}
section#medical-services div.medical-hair-removal {
    width: 100%;
    background: #FFF;
    padding: 100px 0;
}
section#medical-services div.medical-hair-removal div.bnr {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 1200px;
    height: 300px;
    background: url("../images/bnr_medical-hair-removal_pc.png") no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 0 5%;
    margin: 0 auto;
}
section#medical-services div.medical-hair-removal div.bnr a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section#medical-services div.medical-hair-removal div.bnr .ttl {
    color: #89A9CD;
    font-size: calc( 20 / var(--root-font-size) * 1rem );
    padding: 0 0 25px;
}
section#medical-services div.medical-hair-removal div.bnr .ttl span {
    font-size: calc( 30 / var(--root-font-size) * 1rem );
}
section#medical-services div.medical-hair-removal div.bnr p.txt {
    font-size: calc( 20 / var(--root-font-size) * 1rem );
}

@media screen and (max-width: 960px) {
.introductionWrap {
    background: #E6EEF6;
    padding: 25px 0 0;
}
.introductionTtl {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 115px;
    background: url("../images/bg1Left.png") no-repeat right calc(50% + 180px) center, url("../images/bg1Right.png") no-repeat left calc(50% + 180px) center;
    background-size: 175.6px 115px, 175.6Px 115px;
    padding: 25px 0;
    margin: 0 auto;
}
.introductionTtl p {
    width: 90%;
    font-size: calc( 16 / var(--root-font-size) * 1rem );
    text-align: center;
    margin: 0 auto;
}

section#medical-services {
    padding: 50px 0 0;
}
section#medical-services .subTtl {
    position: relative;
}
section#medical-services .subTtl::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 110px;
    height: 28px;
    background: url("../images/icon_mark.svg") no-repeat center center;
    background-size: contain;
    margin: 0 auto;
}
section#medical-services div.medical-hair-removal {
    width: 100%;
    background: linear-gradient(180deg, #E6EEF6 0%, #E6EEF6 25%, #FFF 25%, #FFF 100%);
    padding: 50px 0;
}
section#medical-services div.medical-hair-removal div.bnr {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1;
    background: url("../images/bnr_medical-hair-removal_sp.png") no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 0 5%;
    margin: 0 auto;
}
section#medical-services div.medical-hair-removal div.bnr a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section#medical-services div.medical-hair-removal div.bnr div {
    background: rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(5px);
    border-radius: 10px;
    padding: 25px;
}
section#medical-services div.medical-hair-removal div.bnr .ttl {
    color: #89A9CD;
    font-size: calc( 14 / var(--root-font-size) * 1rem );
    padding: 0 0 25px;
}
section#medical-services div.medical-hair-removal div.bnr .ttl span {
    font-size: calc( 24 / var(--root-font-size) * 1rem );
}
section#medical-services div.medical-hair-removal div.bnr p.txt {
    font-size: calc( 16 / var(--root-font-size) * 1rem );
}
}

/*----- informationWrap -----*/
div.informationWrap {
    background: #F7F7F7;
    padding: 100px 0 125px;
}

div.informationWrap div.inner {
    width: 95%;
    max-width: 1320px;
    margin: 0 auto;
}
div.informationWrap div.inner.flexWrap {
    justify-content: space-between;
}
section#news,
section#column {
    position: relative;
    width: 48.75%;
    background: #FFF;
    border-radius: 10px;
    padding: 50px 3.75%;
    margin: 0 0 100px;
}
section#news::after,
section#column::after {
    content: "";
    position: absolute;
}
section#news::after {
    top: -20px;
    right: 7.69235%;
    width: 116px;
    height: 148px;
    background: url("../images/illust_baerery1.svg") no-repeat center center;
    background-size: contain;
}
section#column::after {
    top: 40px;
    right: 7.69235%;
    width: 180px;
    height: 54px;
    background: url("../images/illust_pippi1.svg") no-repeat center center;
    background-size: contain;
}
section#news a.btn,
section#column a.btn {
    max-width: 300px;
}

section#recruitLink {
}
section#recruitLink div.bnr {
    position: relative;
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    height: 300px;
    background: url("../images/bnr_recruit_pc.png") no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    color: #FFF;
    padding: 0 5%;
    margin: 0 auto;
}
section#recruitLink div.bnr a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section#recruitLink div.bnr div.ttl {
    padding: 0 0 10px;
}
section#recruitLink div.bnr div.ttl .en {
    font-size: calc( 45 / var(--root-font-size) * 1rem );
    letter-spacing: 0.1em;
}
section#recruitLink div.bnr p.txt {
    font-size: calc( 20 / var(--root-font-size) * 1rem );
}

@media screen and (max-width: 960px) {
div.informationWrap {
    background: #F7F7F7;
    padding: 50px 0 75px;
}

div.informationWrap div.inner {
    width: 95%;
    max-width: 1320px;
    margin: 0 auto;
}
div.informationWrap div.inner.flexWrap {
    flex-wrap: wrap;
    justify-content: space-between;
}
section#news,
section#column {
    position: relative;
    width: 100%;
    background: #FFF;
    border-radius: 10px;
    padding: 30px 5vw 50px;
    margin: 0 0 50px;
}
section#news::after,
section#column::after {
    content: "";
    position: absolute;
}
section#news::after {
    top: 15px;
    right: 5vw;
    width: 75.4px;
    height: 96.2px;
    background: url("../images/illust_baerery1.svg") no-repeat center center;
    background-size: contain;
}
section#column::after {
    top: 40px;
    right: 5vw;
    width: 117px;
    height: 35.1px;
    background: url("../images/illust_pippi1.svg") no-repeat center center;
    background-size: contain;
}
section#news a.btn,
section#column a.btn {
    max-width: 300px;
}

section#recruitLink {
}
section#recruitLink div.bnr {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 90%;
    max-width: 450px;
    height: 345px;
    background: url("../images/bnr_recruit_sp.png") no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    color: #FFF;
    padding: 30px min(8vw, 30px);
    margin: 0 auto;
}
section#recruitLink div.bnr a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section#recruitLink div.bnr div.ttl {
    padding: 0 0 5px;
}
section#recruitLink div.bnr div.ttl .en {
    font-size: calc( 36 / var(--root-font-size) * 1rem );
    letter-spacing: 0.1em;
}
section#recruitLink div.bnr p.txt {
    font-size: calc( 16 / var(--root-font-size) * 1rem );
}
}