@charset "UTF-8"; html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none
}

html.is-locked {
    touch-action: none;
    overflow: clip
}

.p-layout {
    font-size: 16px
}

@media screen and (max-width: 768px) {
    .p-layout {
        font-size:3.2vw!important
    }
}

body.is-brandsite {
    padding-top: 0!important
}

.m-pageTop .m-pageTop_btn {
    transition: none!important
}

.p-layout {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt"
}

.p-layout,.p-layout *,.p-layout ::after,.p-layout ::before,.p-layout::after,.p-layout::before {
    box-sizing: border-box
}

.p-layout ol,.p-layout ul {
    list-style: none
}

.p-layout button,.p-layout input,.p-layout select,.p-layout textarea {
    font: inherit
}

.p-layout a {
    text-decoration: none
}

@media (hover: hover) and (pointer:fine) {
    .p-layout a:hover {
        text-decoration:underline
    }
}

.p-layout sup {
    font-size: .5em
}

.fsp {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: auto;
    --font-jp: Zen Kaku Gothic New,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,ヒラギノ丸ゴ ProN W4,Hiragino Maru Gothic ProN,ヒラギノ丸ゴ Pro W4,Hiragino Maru Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,Sans-Serif;
    --font-en: Lato,Zen Kaku Gothic New,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,ヒラギノ丸ゴ ProN W4,Hiragino Maru Gothic ProN,ヒラギノ丸ゴ Pro W4,Hiragino Maru Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,Sans-Serif;
    font-family: var(--font-jp);
    letter-spacing: .06em;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal
}

.fsp .m-btn {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.fsp .m-btn--primary {
    padding: 3.2vw 0;
    background-color: #1e4d9e;
    color: #fff;
    border-radius: 10.6666666667vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp .m-btn--primary {
        padding:12px 0;
        border-radius: 80px
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp .m-btn--primary:hover {
        background-color:#3373c4
    }
}

.fsp .m-btn--primary>.m-btn_text {
    font-weight: 700;
    font-style: normal;
    font-size: 4.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp .m-btn--primary>.m-btn_text {
        font-size:18px
    }
}

.fsp .m-btn--primary>.m-icon {
    margin: auto auto auto 3.2vw
}

@media screen and (min-width: 769px),print {
    .fsp .m-btn--primary>.m-icon {
        margin:auto auto auto 16px
    }
}

.fsp .m-btn--primary>.m-circle-small {
    margin: auto 3.2vw auto auto
}

@media screen and (min-width: 769px),print {
    .fsp .m-btn--primary>.m-circle-small {
        margin:auto 16px auto auto
    }
}

@media (hover: hover) and (pointer:fine) {
    @keyframes arwPrev {
        0% {
            transform:translateX(0);
            opacity: 1
        }

        50% {
            transform: translateX(-200%);
            opacity: 0
        }

        50.1% {
            transform: translateX(200%);
            opacity: 0
        }

        100% {
            transform: translateX(0);
            opacity: 1
        }
    }

    .fsp .m-btn:hover .m-icon--arw-prev {
        animation: arwPrev .4s cubic-bezier(.645,.045,.355,1) forwards
    }

    @keyframes arwNext {
        0% {
            transform: translateX(0);
            opacity: 1
        }

        50% {
            transform: translateX(200%);
            opacity: 0
        }

        50.1% {
            transform: translateX(-200%);
            opacity: 0
        }

        100% {
            transform: translateX(0);
            opacity: 1
        }
    }

    .fsp .m-btn:hover .m-icon--arw-next {
        animation: arwNext .4s cubic-bezier(.645,.045,.355,1) forwards
    }

    @keyframes arwNormal {
        0% {
            transform: translateX(0);
            opacity: 1
        }

        50% {
            transform: translateX(200%);
            opacity: 0
        }

        50.1% {
            transform: translateX(-200%);
            opacity: 0
        }

        100% {
            transform: translateX(0);
            opacity: 1
        }
    }

    .fsp .m-btn:hover .m-icon--arw {
        animation: arwNormal .4s cubic-bezier(.645,.045,.355,1) forwards
    }
}

@keyframes arwNormal {
    0% {
        transform: translateX(0);
        opacity: 1
    }

    50% {
        transform: translateX(200%);
        opacity: 0
    }

    50.1% {
        transform: translateX(-200%);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.fsp .m-btn.is-animation .m-icon--arw {
    animation: arwNormal .4s cubic-bezier(.645,.045,.355,1) forwards
}

@media (hover: hover) and (pointer:fine) {
    .fsp a.m-btn:hover {
        text-decoration:none
    }
}

.fsp .m-icon {
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    display: block
}

.fsp .m-icon--arw {
    width: 2.9333333333vw;
    height: 2.1333333333vw;
    aspect-ratio: 10/7;
    -webkit-mask-image: url("/skinpatch/img/ico_arw.svg");
    mask-image: url("/skinpatch/img/ico_arw.svg");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: #fff
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--arw {
        width:10px;
        height: 7px
    }
}

.fsp .m-icon--arw-next,.fsp .m-icon--arw-prev {
    width: 4vw;
    height: auto;
    aspect-ratio: 25/18;
    background-color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--arw-next,.fsp .m-icon--arw-prev {
        width:25px;
        height: 18px
    }
}

.fsp .m-icon--arw-next {
    -webkit-mask-image: url("/skinpatch/img/nav_arw_next.svg");
    mask-image: url("/skinpatch/img/nav_arw_next.svg");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center
}

.fsp .m-icon--arw-prev {
    -webkit-mask-image: url("/skinpatch/img/nav_arw_prev.svg");
    mask-image: url("/skinpatch/img/nav_arw_prev.svg");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center
}

.fsp .m-icon--schedule {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    aspect-ratio: 1/1;
    background-image: url("/skinpatch/img/ico_schedule.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--schedule {
        width:32px;
        height: 32px
    }
}

.fsp .m-icon--shop {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    aspect-ratio: 1/1;
    background-image: url("/skinpatch/img/ico_shop.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--shop {
        width:32px;
        height: 32px
    }
}

.fsp .m-icon--plus {
    width: 3.2vw;
    height: 3.2vw;
    aspect-ratio: 1/1;
    -webkit-mask-image: url("/skinpatch/img/ico_plus.svg");
    mask-image: url("/skinpatch/img/ico_plus.svg");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: #fff
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--plus {
        width:12px;
        height: 12px
    }
}

.fsp .m-icon--close {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    aspect-ratio: 1/1;
    -webkit-mask-image: url("/skinpatch/img/ico_close.svg");
    mask-image: url("/skinpatch/img/ico_close.svg");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--close {
        width:36px;
        height: 36px
    }
}

.fsp .m-icon--line {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    aspect-ratio: 1/1;
    background-image: url("/skinpatch/img/ico_line.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--line {
        width:40px;
        height: 40px
    }
}

.fsp .m-icon--x {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    aspect-ratio: 1/1;
    background-image: url("/skinpatch/img/ico_x.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--x {
        width:40px;
        height: 40px
    }
}

.fsp .m-icon--copy {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    aspect-ratio: 1/1;
    background-image: url("/skinpatch/img/ico_copy.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--copy {
        width:32px;
        height: 32px
    }
}

.fsp .m-icon--play {
    width: 3.2vw;
    height: 3.2vw;
    aspect-ratio: 1/1;
    background-image: url("/skinpatch/img/ico_play.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--play {
        width:12px;
        height: 12px
    }
}

.fsp .m-icon--skipatch-check {
    width: 6.9333333333vw;
    height: 8.2666666667vw;
    aspect-ratio: 26/31;
    background-image: url("/skinpatch/img/ico_skinpatch_check.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--skipatch-check {
        width:26px;
        height: 31px
    }
}

.fsp .m-icon--external {
    width: 4.8vw;
    height: 4.8vw;
    aspect-ratio: 18/18;
    background-image: url("/skinpatch/img/ico_external.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--external {
        width:18px;
        height: 18px
    }
}

.fsp .m-icon--external-color {
    width: 4.8vw;
    height: 4.8vw;
    aspect-ratio: 18/18;
    background-image: url("/skinpatch/img/ico_external_color.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp .m-icon--external-color {
        width:18px;
        height: 18px
    }
}

.fsp .m-circle {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 12.8vw;
    height: 12.8vw;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (min-width: 769px),print {
    .fsp .m-circle {
        width:80px;
        height: 80px
    }
}

.fsp .m-circle:before {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    margin: -6.4vw 0 0 -6.4vw;
    width: 12.8vw;
    height: 12.8vw;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    display: block;
    content: "";
    border: .5333333333vw solid #b2cae9;
    transform: scale(1);
    transition: transform .3s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp .m-circle:before {
        margin:-40px 0 0 -40px;
        width: 80px;
        height: 80px;
        border-width: 2px;
        transform: scale(.9)
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp .m-btn:hover .m-circle:before {
        transform:scale(1)
    }
}

.fsp .m-btn.is-animation .m-circle:before {
    transform: scale(1)
}

.fsp .m-circle-small {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 6.4vw;
    height: 6.4vw;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (min-width: 769px),print {
    .fsp .m-circle-small {
        width:32px;
        height: 32px
    }
}

.fsp .m-circle-small:before {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    margin: -3.2vw 0 0 -3.2vw;
    width: 6.4vw;
    height: 6.4vw;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    content: "";
    border: .2666666667vw solid #b2cae9;
    transform: scale(1);
    transition: transform .3s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp .m-circle-small:before {
        margin:-16px 0 0 -16px;
        width: 32px;
        height: 32px;
        border-width: 1px;
        transform: scale(.9)
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp .m-btn.is-animation .m-circle-small:before,.fsp .m-btn:hover .m-circle-small:before {
        transform:scale(1)
    }
}

.fsp .m-code {
    font-size: 3.2vw;
    color: rgba(255,255,255,.7);
    white-space: nowrap;
    letter-spacing: .1em
}

@media screen and (min-width: 769px),print {
    .fsp .m-code {
        font-size:16px
    }
}

.fsp .m-code:after,.fsp .m-code:before {
    content: "";
    display: inline-block
}

.fsp .m-code:before {
    margin-right: 1.0666666667vw;
    content: "{"
}

@media screen and (min-width: 769px),print {
    .fsp .m-code:before {
        margin-right:7px
    }
}

.fsp .m-code:after {
    margin-left: 1.0666666667vw;
    content: "}"
}

@media screen and (min-width: 769px),print {
    .fsp .m-code:after {
        margin-left:7px
    }
}

.fsp .m-code {
    opacity: 0;
    transition: opacity .1s linear
}

.fsp .m-code span {
    width: auto;
    display: inline-block;
    max-width: 0;
    clip-path: inset(0 100% 0 0)
}

.fsp .m-code.is-act {
    opacity: 1
}

.fsp .m-code.is-act span {
    max-width: 16em;
    clip-path: inset(0 0% 0 0);
    transition: max-width .6s linear,clip-path .6s cubic-bezier(.165, .84, .44, 1)
}

.fsp .m-flash span {
    opacity: 0
}

@keyframes flashT {
    0% {
        opacity: 0
    }

    30%,6% {
        opacity: .45
    }

    15%,40% {
        opacity: .2
    }

    100% {
        opacity: 1
    }
}

.fsp .m-flash.is-act span:first-child {
    animation: flashT .6s 32.5ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(2) {
    animation: flashT .6s .1875s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(3) {
    animation: flashT .6s 15ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(4) {
    animation: flashT .6s .1625s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(5) {
    animation: flashT .6s 87.5ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(6) {
    animation: flashT .6s 225ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(7) {
    animation: flashT .6s 155ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(8) {
    animation: flashT .6s 67.5ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(9) {
    animation: flashT .6s .1025s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(10) {
    animation: flashT .6s 70ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(11) {
    animation: flashT .6s 82.5ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(12) {
    animation: flashT .6s 87.5ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(13) {
    animation: flashT .6s .1325s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(14) {
    animation: flashT .6s .11s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(15) {
    animation: flashT .6s 225ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(16) {
    animation: flashT .6s 40ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(17) {
    animation: flashT .6s .2325s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(18) {
    animation: flashT .6s .23s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(19) {
    animation: flashT .6s 15ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(20) {
    animation: flashT .6s .1625s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(21) {
    animation: flashT .6s 87.5ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(22) {
    animation: flashT .6s 225ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(23) {
    animation: flashT .6s 40ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(24) {
    animation: flashT .6s 82.5ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(25) {
    animation: flashT .6s 87.5ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(26) {
    animation: flashT .6s .1325s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(27) {
    animation: flashT .6s .11s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(28) {
    animation: flashT .6s 225ms 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(29) {
    animation: flashT .6s .1625s 1 linear forwards
}

.fsp .m-flash.is-act span:nth-child(30) {
    animation: flashT .6s 87.5ms 1 linear forwards
}

.fsp_modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    display: none;
    background-color: rgba(0,0,0,.3);
    overflow: auto
}

.fsp_modal.is-prepare {
    display: block
}

.fsp_modal {
    opacity: 0;
    transition: opacity .1s linear
}

.fsp_modal.is-show {
    opacity: 1;
    transition: opacity .3s linear
}

.fsp_modal_fixed {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 0
}

.fsp_modal_close {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    z-index: 10;
    margin: 2.1333333333vw 2.1333333333vw 0 auto;
    width: 14.4vw;
    height: 14.4vw;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 4vw 4vw 4.8vw rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal_close {
        margin:24px 24px 0 auto;
        width: 72px;
        height: 72px;
        box-shadow: 20px 20px 24px rgba(0,0,0,.08)
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_modal_close .m-icon {
        transition:transform .3s cubic-bezier(.165, .84, .44, 1)
    }

    .fsp_modal_close:hover {
        background-color: #ccdcf0
    }

    .fsp_modal_close:hover .m-icon {
        transform: scale(.8)
    }
}

.fsp_modal_close.type-color {
    background-color: #1e4d9e
}

.fsp_modal_close.type-color>.m-icon--close {
    background-color: #fff
}

@media (hover: hover) and (pointer:fine) {
    .fsp_modal_close.type-color:hover {
        background-color:#3373c4
    }
}

.fsp_modal.type-screen .fsp_modal_close {
    margin: 4.8vw 4.8vw 0 auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal.type-screen .fsp_modal_close {
        margin:24px 24px 0 auto
    }
}

.fsp_modal_inner {
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_modal_inner {
        min-width:1200px;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
}

.fsp_modal .fsp_modal_inner {
    opacity: 0;
    transform: translateY(21.3333333333vw);
    transition: transform .6s cubic-bezier(.165, .84, .44, 1),opacity .1s linear
}

@media screen and (min-width: 769px),print {
    .fsp_modal .fsp_modal_inner {
        transform:translateY(80px)
    }
}

.fsp_modal.is-show .fsp_modal_inner {
    opacity: 1;
    transform: translateY(0)
}

@media screen and (min-width: 769px),print {
    .fsp_modal.is-show .fsp_modal_inner {
        transform:translateY(0)
    }
}

.fsp_header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    width: 100%;
    height: 18.6666666667vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none
}

@media screen and (min-width: 769px),print {
    .fsp_header {
        height:110px
    }
}

.fsp_header_title {
    position: absolute;
    z-index: 301;
    top: 0;
    left: 0;
    margin: 6.1333333333vw 0 0 5.3333333333vw;
    width: 31.2vw;
    height: 6.9333333333vw;
    background-image: url("/skinpatch/img/logo_fancl.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

.fsp_header_title span {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_header_title {
        margin:40px 0 0 47px;
        width: 183px;
        height: 40px
    }
}

.fsp_header_title a {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block
}

.fsp_header_switch {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 2.1333333333vw 2.1333333333vw 0 auto;
    width: 14.4vw;
    height: 14.4vw;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 4vw 4vw 4.8vw rgba(0,0,0,.08);
    transition: background-color .2s linear;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: auto
}

@media screen and (min-width: 769px),print {
    .fsp_header_switch {
        margin:24px 24px 0 auto;
        width: 72px;
        height: 72px;
        box-shadow: 20px 20px 24px rgba(0,0,0,.08)
    }
}

.fsp_header_switch_line {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    margin-top: -.2666666667vw;
    margin-left: -3.2vw;
    width: 6.4vw;
    height: .5333333333vw;
    background-image: url("/skinpatch/img/nav_menu_bar.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform .2s cubic-bezier(.39, .575, .565, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_header_switch_line {
        margin-top:-1px;
        margin-left: -17px;
        width: 34px;
        height: 2px
    }
}

.fsp_header_switch_line--1 {
    transform: translateY(-1.0666666667vw)
}

@media screen and (min-width: 769px),print {
    .fsp_header_switch_line--1 {
        transform:translateY(-5px)
    }
}

.fsp_header_switch_line--2 {
    transform: translateY(1.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_header_switch_line--2 {
        transform:translateY(6px)
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_header_switch:hover {
        background-color:#ccdcf0
    }

    .fsp_header_switch:hover .fsp_header_switch_line--1 {
        transform: translateY(-.8vw)
    }
}

@media screen and (hover: hover) and (pointer:fine) and (min-width:769px),print and (hover:hover) and (pointer:fine) {
    .fsp_header_switch:hover .fsp_header_switch_line--1 {
        transform:translateY(-4px)
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_header_switch:hover .fsp_header_switch_line--2 {
        transform:translateY(.8vw)
    }
}

@media screen and (hover: hover) and (pointer:fine) and (min-width:769px),print and (hover:hover) and (pointer:fine) {
    .fsp_header_switch:hover .fsp_header_switch_line--2 {
        transform:translateY(4px)
    }
}

.fsp_navigation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 301;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    display: none;
    overflow: auto
}

.fsp_navigation.is-show {
    display: block
}

.fsp_navigation_fixed {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 0
}

.fsp_navigation_close {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    z-index: 10;
    margin: 2.1333333333vw 2.1333333333vw 0 auto;
    width: 14.4vw;
    height: 14.4vw;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 4vw 4vw 4.8vw rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_close {
        margin:24px 24px 0 auto;
        width: 72px;
        height: 72px;
        box-shadow: 20px 20px 24px rgba(0,0,0,.08)
    }
}

.fsp_navigation_close {
    opacity: 0;
    transition: opacity .3s .1s linear;
    pointer-events: none
}

.fsp_navigation_close.is-show {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .2s .1s linear
}

@media (hover: hover) and (pointer:fine) {
    .fsp_navigation_close .m-icon {
        transition:transform .3s cubic-bezier(.165, .84, .44, 1)
    }

    .fsp_navigation_close:hover {
        background-color: #ccdcf0
    }

    .fsp_navigation_close:hover .m-icon {
        transform: scale(.8)
    }
}

.fsp_navigation_inner {
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    background-color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_inner {
        min-width:1200px;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
}

.fsp_navigation_inner {
    opacity: 0;
    clip-path: inset(0% 0 100% 0);
    transition: clip-path .5s cubic-bezier(.165, .84, .44, 1),opacity .1s .5s linear
}

.fsp_navigation_inner.is-act {
    opacity: 1;
    clip-path: inset(0% 0 0% 0);
    transition: clip-path .6s cubic-bezier(.645, .045, .355, 1),opacity .1s 0s linear
}

.fsp_navigation_content {
    margin: 0 auto;
    width: 83.2vw;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_content {
        margin:0 auto 0;
        width: calc(100% - 40px);
        min-width: 1160px;
        max-width: 1200px
    }
}

.fsp_navigation_content {
    opacity: 0;
    transform: translateY(3.2vw);
    transition: transform .8s .2s cubic-bezier(.165, .84, .44, 1),opacity .4s 0s linear
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_content {
        transform:translateY(24px)
    }
}

.fsp_navigation_inner.is-act .fsp_navigation_content {
    opacity: 1;
    transform: translateY(0);
    transition: transform .8s .2s cubic-bezier(.165, .84, .44, 1),opacity 0s 0s linear
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_inner.is-act .fsp_navigation_content {
        transform:translateY(0)
    }
}

.fsp_navigation_top {
    margin: 7.4666666667vw 0 17.0666666667vw;
    width: auto
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_top {
        margin:10px 0 80px;
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 40px
    }
}

.fsp_navigation_top_title {
    margin: 0 0 3.2vw;
    width: 61.0666666667vw;
    height: auto;
    aspect-ratio: 472/33;
    background-image: url("/skinpatch/img/nav_ttl.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

.fsp_navigation_top_title span {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_top_title {
        margin:0 0 0;
        width: 472px
    }
}

.fsp_navigation_top_btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2.6666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_top_btn {
        gap:10px
    }
}

.fsp_navigation_top_btn>.m-circle-small {
    width: 4.8vw;
    height: 4.8vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_top_btn>.m-circle-small {
        width:24px;
        height: 24px
    }
}

.fsp_navigation_top_btn>.m-circle-small:before {
    margin: -2.4vw 0 0 -2.4vw;
    width: 4.8vw;
    height: 4.8vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_top_btn>.m-circle-small:before {
        margin:-12px 0 0 -12px;
        width: 24px;
        height: 24px
    }
}

.fsp_navigation_top_btn>.m-circle-small>.m-icon {
    width: 1.6vw;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_top_btn>.m-circle-small>.m-icon {
        width:8px;
        height: auto
    }
}

.fsp_navigation_top_btn>.m-btn_text {
    padding-bottom: .1em;
    font-size: 1.3333333333em;
    color: #fff;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .06em
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_top_btn>.m-btn_text {
        font-size:1em
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_navigation_top:hover .fsp_navigation_top_btn {
        opacity:.6
    }
}

.fsp_navigation_menu {
    margin: 0 auto 8.5333333333vw;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6.4vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu {
        margin:0 auto 80px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0
    }
}

.fsp_navigation_menu_column {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6.4vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_column {
        width:455px;
        height: auto;
        gap: 50px
    }
}

.fsp_navigation_menu_btn {
    margin: 0 0 0
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn {
        margin:0 0 0
    }
}

.fsp_navigation_menu_btn>.m-code {
    margin: 0 0 1.6vw;
    text-align: left;
    font-size: 2.6666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn>.m-code {
        margin:0 0 4px;
        font-size: 12px
    }
}

.fsp_navigation_menu_btn_text {
    font-size: 1.5em;
    color: #fff;
    font-weight: 700;
    font-style: normal;
    text-align: left;
    line-height: 1.5;
    letter-spacing: .06em
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn_text {
        font-size:1.5em;
        line-height: 1.8
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_navigation_menu_btn:hover {
        opacity:.6
    }
}

.fsp_navigation_menu_btn_text {
    clip-path: inset(0% 100% 0% 0)
}

.fsp_navigation_menu_btn--about .fsp_navigation_menu_btn_text {
    transition: clip-path .7s .4s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--about .fsp_navigation_menu_btn_text {
        transition:clip-path .7s .5s cubic-bezier(.215, .61, .355, 1)
    }
}

.fsp_navigation_menu_btn--about .m-code span {
    transition: max-width .6s .4s linear,clip-path .6s .4s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--about .m-code span {
        transition:max-width .6s .5s linear,clip-path .6s .5s cubic-bezier(.165, .84, .44, 1)
    }
}

.fsp_navigation_menu_btn--flow .fsp_navigation_menu_btn_text {
    transition: clip-path .7s .45s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--flow .fsp_navigation_menu_btn_text {
        transition:clip-path .7s .55s cubic-bezier(.215, .61, .355, 1)
    }
}

.fsp_navigation_menu_btn--flow .m-code span {
    transition: max-width .6s .45s linear,clip-path .6s .45s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--flow .m-code span {
        transition:max-width .6s .55s linear,clip-path .6s .55s cubic-bezier(.165, .84, .44, 1)
    }
}

.fsp_navigation_menu_btn--experience .fsp_navigation_menu_btn_text {
    transition: clip-path .7s .5s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--experience .fsp_navigation_menu_btn_text {
        transition:clip-path .7s .6s cubic-bezier(.215, .61, .355, 1)
    }
}

.fsp_navigation_menu_btn--experience .m-code span {
    transition: max-width .6s .5s linear,clip-path .6s .5s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--experience .m-code span {
        transition:max-width .6s .6s linear,clip-path .6s .6s cubic-bezier(.165, .84, .44, 1)
    }
}

.fsp_navigation_menu_btn--reservation .fsp_navigation_menu_btn_text {
    transition: clip-path .7s .55s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--reservation .fsp_navigation_menu_btn_text {
        transition:clip-path .7s .5s cubic-bezier(.215, .61, .355, 1)
    }
}

.fsp_navigation_menu_btn--reservation .m-code span {
    transition: max-width .6s .55s linear,clip-path .6s .55s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--reservation .m-code span {
        transition:max-width .6s .5s linear,clip-path .6s .5s cubic-bezier(.165, .84, .44, 1)
    }
}

.fsp_navigation_menu_btn--researcher .fsp_navigation_menu_btn_text {
    transition: clip-path .7s .6s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--researcher .fsp_navigation_menu_btn_text {
        transition:clip-path .7s .55s cubic-bezier(.215, .61, .355, 1)
    }
}

.fsp_navigation_menu_btn--researcher .m-code span {
    transition: max-width .6s .6s linear,clip-path .6s .6s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--researcher .m-code span {
        transition:max-width .6s .55s linear,clip-path .6s .55s cubic-bezier(.165, .84, .44, 1)
    }
}

.fsp_navigation_menu_btn--movie .fsp_navigation_menu_btn_text {
    transition: clip-path .7s .65s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--movie .fsp_navigation_menu_btn_text {
        transition:clip-path .7s .6s cubic-bezier(.215, .61, .355, 1)
    }
}

.fsp_navigation_menu_btn--movie .m-code span {
    transition: max-width .6s .65s linear,clip-path .6s .65s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu_btn--movie .m-code span {
        transition:max-width .6s .6s linear,clip-path .6s .6s cubic-bezier(.165, .84, .44, 1)
    }
}

.fsp_navigation_menu {
    opacity: 0;
    transform: translateY(6.4vw);
    transition: transform .8s .3s cubic-bezier(.165, .84, .44, 1),opacity .2s .3s linear
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_menu {
        transform:translateY(32px)
    }
}

.fsp_navigation_inner.is-act .fsp_navigation_menu {
    opacity: 1;
    transform: translateY(0)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_inner.is-act .fsp_navigation_menu {
        transform:translateY(0)
    }
}

.fsp_navigation_inner.is-act .fsp_navigation_menu_btn_text {
    clip-path: inset(0% 0 0 0)
}

.fsp_navigation_inner .fsp_navigation_menu_btn .m-code {
    transition: opacity .1s .3s linear
}

.fsp_navigation_inner.is-act .fsp_navigation_menu_btn .m-code {
    opacity: 1;
    transition: opacity .1s linear
}

.fsp_navigation_inner.is-act .fsp_navigation_menu_btn .m-code span {
    max-width: 16em;
    clip-path: inset(0 0% 0 0)
}

.fsp_navigation_share {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 14.9333333333vw;
    padding: 3.2vw 0 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share {
        margin:0 0 0;
        padding: 12px 0 0
    }
}

.fsp_navigation_share:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 4.2666666667vw;
    height: 1px;
    background-color: #fff;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share:before {
        width:16px;
        height: 1px
    }
}

.fsp_navigation_share_title {
    margin: 0 0 3.2vw;
    font-size: 1em;
    color: #fff;
    font-weight: 500;
    font-style: normal;
    letter-spacing: .06em
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share_title {
        margin:0 0 16px;
        font-size: 1em
    }
}

.fsp_navigation_share_btns {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share_btns {
        gap:16px
    }
}

.fsp_navigation_share_btn-line {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share_btn-line {
        width:40px;
        height: 40px
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_navigation_share_btn-line:hover {
        opacity:.6
    }
}

.fsp_navigation_share_btn-x {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share_btn-x {
        width:40px;
        height: 40px
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_navigation_share_btn-x:hover {
        opacity:.6
    }
}

.fsp_navigation_share_btn-copy {
    padding: 0 4.2666666667vw 0 2.1333333333vw;
    width: auto;
    height: 10.6666666667vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-radius: 2.1333333333vw;
    overflow: hidden;
    background-color: #3373c4
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share_btn-copy {
        padding:0 16px 0 8px;
        width: auto;
        height: 40px;
        border-radius: 8px
    }
}

.fsp_navigation_share_btn-copy>.m-btn_text {
    font-size: 1.3333333333em;
    color: #fff;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share_btn-copy>.m-btn_text {
        font-size:1em
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_navigation_share_btn-copy:hover {
        background-color:#1a62bc
    }
}

.fsp_navigation_share {
    opacity: 0;
    transform: translateY(8.5333333333vw);
    transition: transform .8s .4s cubic-bezier(.165, .84, .44, 1),opacity .2s .4s linear
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_share {
        transform:translateY(32px)
    }
}

.fsp_navigation_inner.is-act .fsp_navigation_share {
    opacity: 1;
    transform: translateY(0)
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_inner.is-act .fsp_navigation_share {
        transform:translateY(0)
    }
}

.fsp_navigation_btn-reservation.m-btn--primary {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 8vw;
    padding: 0;
    width: 56.5333333333vw;
    height: 14.9333333333vw;
    border: 1.0666666667vw solid rgba(255,255,255,.5);
    box-sizing: content-box;
    background-color: transparent;
    letter-spacing: .06em
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_btn-reservation.m-btn--primary {
        position:absolute;
        left: auto;
        top: auto;
        bottom: 33px;
        right: 33px;
        margin: 0;
        padding: 0;
        width: 238px;
        height: 64px;
        border: 8px solid rgba(255,255,255,.5)
    }
}

.fsp_navigation_btn-reservation.m-btn--primary::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: #1e4d9e;
    transition: background-color .3s cubic-bezier(.165, .84, .44, 1)
}

.fsp_navigation_btn-reservation.m-btn--primary .m-circle-small {
    width: 7.4666666667vw;
    height: 7.4666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_btn-reservation.m-btn--primary .m-circle-small {
        width:32px;
        height: 32px
    }
}

.fsp_navigation_btn-reservation.m-btn--primary .m-circle-small:before {
    margin: -3.7333333333vw 0 0 -3.7333333333vw;
    width: 7.4666666667vw;
    height: 7.4666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_navigation_btn-reservation.m-btn--primary .m-circle-small:before {
        margin:-16px 0 0 -16px;
        width: 32px;
        height: 32px
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_navigation_btn-reservation.m-btn--primary:hover {
        background-color:transparent
    }

    .fsp_navigation_btn-reservation.m-btn--primary:hover:before {
        background-color: #3373c4
    }
}

.fsp_main {
    position: relative;
    z-index: 101;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_main {
        min-width:1200px
    }
}

.fsp_main .p-world {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #fff
}

.fsp_main .p-world-canvas {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_main .p-world-canvas {
        display:block
    }
}

.fsp_kv {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    background-color: #e2e9f1
}

.fsp_kv_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto
}

.fsp_kv {
    transition: opacity 1s 0s;
    opacity: 0
}

.fsp_kv.is-act {
    opacity: 1
}

.fsp_kv_container {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

.fsp_kv_container:before {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: auto;
    min-height: 137.8666666667vw;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_kv_container:before {
        margin:0 auto;
        min-width: 1200px;
        max-width: 2440px;
        height: calc(min(1440px,max(1200px,100vw)) * .5638888889);
        min-height: auto
    }
}

.fsp_kv_image {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e2e9f1;
    opacity: 0;
    transition: opacity .6s .4s ease,filter .2s 1s linear;
    filter: brightness(1.2)
}

.fsp_kv_image.is-show {
    z-index: 1;
    opacity: 1;
    filter: brightness(1);
    transition: opacity .8s 0s ease,filter .8s 0s cubic-bezier(.165, .84, .44, 1)
}

.fsp_kv_image_layout {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: auto;
    min-height: 137.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_kv_image_layout {
        margin:0 auto;
        min-width: 1200px;
        max-width: 2440px;
        height: calc(min(1440px,max(1200px,100vw)) * .5638888889);
        min-height: auto
    }
}

.fsp_kv_image img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: contain;
    object-fit: contain
}

.fsp_kv_image img.m-sp {
    display: block
}

.fsp_kv_image img.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_kv_image img.m-sp {
        display:none
    }

    .fsp_kv_image img.m-pc {
        display: block
    }
}

@media screen and (min-width: 769px),print {
    .fsp_kv_image img {
        -o-object-fit:cover;
        object-fit: cover
    }
}

.fsp_kv_indicator {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    margin: 0 0 2.6666666667vw 2.6666666667vw;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 1.6vw
}

@media screen and (min-width: 769px),print {
    .fsp_kv_indicator {
        position:sticky;
        bottom: 4px;
        margin: -36px 0 0 80px;
        height: 36px;
        gap: 6px
    }
}

.fsp_kv_indicator_item {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 3.2vw;
    height: 1.0666666667vw;
    background-color: #b2cae9;
    border-radius: 2.1333333333vw;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: background-color .2s linear,width .5s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_kv_indicator_item {
        width:12px;
        height: 4px;
        border-radius: 8px
    }
}

.fsp_kv_indicator_item.is-active {
    width: 10.6666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_kv_indicator_item.is-active {
        width:40px
    }
}

.fsp_kv_indicator_item:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: calc(var(--progress,0) * 100%);
    height: 100%;
    background-color: #1e4d9e;
    border-radius: 2.1333333333vw;
    overflow: hidden;
    content: "";
    display: block;
    transition: background-color .2s linear,width .3s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_kv_indicator_item:before {
        border-radius:8px
    }
}

.fsp_kv_indicator_item:after {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    margin-top: -1.6vw;
    width: 100%;
    height: 4.2666666667vw;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_kv_indicator_item:after {
        margin-top:-6px;
        height: 16px
    }
}

.fsp_kv_indicator_item.is-active:before {
    transition: background-color .2s linear,width 0s linear
}

@media (hover: hover) and (pointer:fine) {
    .fsp_kv_indicator_item:hover {
        background-color:#ccdcf0
    }

    .fsp_kv_indicator_item:hover:before {
        background-color: #3373c4
    }
}

.fsp_statement {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto
}

.fsp_statement_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_statement_inner {
        min-width:1200px;
        max-width: 1440px
    }
}

.fsp_statement_inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_statement_inner {
        flex-direction:row;
        justify-content: space-between;
        align-items: stretch
    }
}

.fsp_statement_fixed {
    width: 100%;
    height: auto;
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_statement_fixed {
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        flex-grow: 1
    }
}

.fsp_statement_fixed_inner {
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_statement_fixed_inner {
        margin-right:calc(90px + .1666666667 * max(100vw - 1200px,0px));
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        flex-grow: 1
    }
}

@media screen and (min-width: 1441px),print {
    .fsp_statement_fixed_inner {
        margin-right:130px
    }
}

.fsp_statement_image {
    position: sticky;
    top: 0;
    left: 0;
    width: 74.6666666667vw;
    height: 89.3333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_statement_image {
        top:calc(50vh - 187.5px);
        margin-top: 270px;
        margin-bottom: 200px;
        width: 280px;
        height: 335px
    }
}

.fsp_statement_image img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0
}

.fsp_statement_image.is-show img {
    opacity: 1
}

.fsp_statement_content {
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_statement_content {
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }
}

.fsp_statement_content_inner {
    margin: 0 auto 50px;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_statement_content_inner {
        margin:0 0 120px;
        margin-left: calc(90px + .1666666667 * max(100vw - 1200px,0px));
        width: 510px
    }
}

@media screen and (min-width: 1441px),print {
    .fsp_statement_content_inner {
        margin-left:130px
    }
}

.fsp_statement_catch,.fsp_statement_intro,.fsp_statement_name,.fsp_statement_text_line {
    line-height: 2;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

.fsp_statement_text_line {
    line-height: 2
}

@media screen and (min-width: 769px),print {
    .fsp_statement_text_line {
        line-height:2.4
    }
}

.fsp_statement_cotion {
    color: #3373c4;
    font-weight: 500;
    font-style: normal
}

.fsp_statement_intro {
    margin: 10.6666666667vw 0 8.5333333333vw;
    width: 100%;
    font-size: 2.1666666667em
}

@media screen and (min-width: 769px),print {
    .fsp_statement_intro {
        margin:75px 0 40px;
        font-size: 2.5em
    }
}

.fsp_statement_intro sup {
    vertical-align: text-top
}

.fsp_statement_text {
    margin: 0 0 8.5333333333vw;
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_statement_text {
        margin:0 0 40px
    }
}

.fsp_statement_text br.m-sp {
    display: inline
}

.fsp_statement_text br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_statement_text br.m-sp {
        display:none
    }

    .fsp_statement_text br.m-pc {
        display: inline
    }
}

.fsp_statement_text sup {
    vertical-align: text-top
}

.fsp_statement_text_line {
    margin: 0 0 0;
    width: 100%;
    font-size: 1.3333333333em
}

@media screen and (min-width: 769px),print {
    .fsp_statement_text_line {
        margin:0 0 0;
        font-size: 1.125em
    }
}

.fsp_statement_catch {
    margin: 0 0 8.5333333333vw;
    width: 100%;
    font-size: 2.1666666667em
}

@media screen and (min-width: 769px),print {
    .fsp_statement_catch {
        margin:0 0 40px;
        font-size: 2.5em
    }
}

.fsp_statement_cotion {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 .5333333333vw;
    padding-left: 1.25em;
    width: 100%;
    font-size: .8333333333em;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_statement_cotion {
        margin:0 0 0;
        font-size: .75em;
        line-height: 2
    }
}

.fsp_statement_cotion span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    font-size: 1.25em
}

.fsp_statement_catch,.fsp_statement_cotion,.fsp_statement_intro,.fsp_statement_name,.fsp_statement_text_line {
    opacity: 0;
    transition: transform 1.2s 0s cubic-bezier(.165, .84, .44, 1),opacity .6s 0s linear;
    transform: translateY(3.2vw)
}

@media screen and (min-width: 769px),print {
    .fsp_statement_catch,.fsp_statement_cotion,.fsp_statement_intro,.fsp_statement_name,.fsp_statement_text_line {
        transform:translateY(12px)
    }
}

.fsp_statement_catch.is-act,.fsp_statement_cotion.is-act,.fsp_statement_intro.is-act,.fsp_statement_name.is-act,.fsp_statement_text_line.is-act {
    opacity: 1;
    transform: translateY(0)
}

@media screen and (min-width: 769px),print {
    .fsp_statement_catch.is-act,.fsp_statement_cotion.is-act,.fsp_statement_intro.is-act,.fsp_statement_name.is-act,.fsp_statement_text_line.is-act {
        transform:translateY(0)
    }
}

.fsp_about {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto;
    background-color: #f2f6fb
}

@media screen and (min-width: 769px),print {
    .fsp_about {
        border-radius:64px 64px 0 0
    }
}

.fsp_about_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 6.4vw 0 6.4vw;
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_about_inner {
        padding:120px 0 80px;
        width: 1200px
    }
}

.fsp_about_inner {
    transition: opacity .3s,transform .8s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(21.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_about_inner {
        transform:translateY(120px)
    }
}

.fsp_about_inner.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_about_head {
    padding: 10.6666666667vw 0 6.4vw;
    width: 100%;
    background-color: #1e4d9e;
    border-radius: 10.6666666667vw 10.6666666667vw 0 0;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_about_head {
        padding:0;
        min-height: 150px;
        background-color: transparent;
        background-image: url("/skinpatch/img/about_bg_head.svg");
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
        border-radius: 0
    }
}

.fsp_about_head_code {
    margin-top: 0;
    margin-left: 8.5333333333vw;
    margin-bottom: 2.1333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_about_head_code {
        margin-top:35px;
        margin-left: 54px;
        margin-bottom: 4px
    }
}

.fsp_about_head_title {
    margin-top: 0;
    margin-left: 8.5333333333vw;
    font-size: 2em;
    color: #fff;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_about_head_title {
        margin-top:0;
        margin-left: 54px;
        font-size: 2.25em;
        letter-spacing: .1em
    }
}

.fsp_about_body {
    position: relative;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1e4d9e;
    border-radius: 0 0 8.5333333333vw 8.5333333333vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_about_body {
        margin-top:-1px;
        padding: 0 0 55px;
        border-radius: 0 0 64px 64px
    }
}

.fsp_about_body_mask {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 17.0666666667vw;
    width: 100%;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_mask {
        margin:0 auto;
        padding: 0 0 48px;
        width: 1080px;
        min-height: 480px;
        background-color: #fff;
        border-radius: 24px
    }
}

.fsp_about_body_container {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding: 0 12.8vw;
    margin: 0;
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8.5333333333vw;
    transform: translateX(calc(var(--index,0) * -83.2vw))
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_container {
        margin:0;
        padding: 0;
        width: auto;
        gap: 0;
        transform: translateX(calc(var(--index,0) * -1080px))
    }
}

.fsp_about_body_item {
    width: 74.6666666667vw;
    height: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item {
        width:1080px;
        min-height: 432px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch
    }
}

.fsp_about_body_item_visual {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 3.2vw;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    pointer-events: none
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_visual {
        margin:0;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start
    }
}

.fsp_about_body_item_visual_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 56vw;
    background-color: #fff;
    border-radius: 4.8vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_visual_image {
        width:auto;
        height: auto;
        border-radius: 0
    }
}

.fsp_about_body_item_visual_image img,.fsp_about_body_item_visual_image video {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover
}

.fsp_about_body_item_visual_cotion {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    margin-bottom: -5.3333333333vw;
    font-size: .8333333333em;
    color: #b2cae9;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_visual_cotion {
        position:relative;
        right: auto;
        left: 0;
        margin-bottom: 0;
        margin-top: 8px;
        width: 100%;
        color: #565b60;
        font-size: .625em
    }
}

.fsp_about_body_item_content {
    padding-left: 0;
    width: 100%;
    height: auto;
    flex-shrink: 0
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_content {
        padding-left:0;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start
    }
}

.fsp_about_body_item_content br.m-sp {
    display: inline
}

.fsp_about_body_item_content br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_content br.m-sp {
        display:none
    }

    .fsp_about_body_item_content br.m-pc {
        display: inline
    }
}

.fsp_about_body_item_catch {
    font-size: 1.3333333333em;
    color: #fff;
    font-weight: 700;
    font-style: normal;
    line-height: 2
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_catch {
        font-size:1.75em;
        color: #1e4d9e;
        line-height: 1.8
    }
}

.fsp_about_body_item_text {
    font-size: 1em;
    color: #fff;
    font-weight: 500;
    font-style: normal;
    line-height: 2
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_text {
        font-size:1.125em;
        font-weight: 700;
        font-style: normal;
        color: #1e4d9e;
        line-height: 1.8
    }
}

.fsp_about_body_item_catch+.fsp_about_body_item_text {
    margin-top: 1.0666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_catch+.fsp_about_body_item_text {
        margin-top:32px
    }
}

.fsp_about_body_item_cotion {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding-left: 1.5em;
    font-size: .8333333333em;
    color: #ccdcf0;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_cotion {
        font-size:1em;
        color: #565b60;
        line-height: 1.5
    }
}

.fsp_about_body_item_cotion span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_about_body_item_catch+.fsp_about_body_item_cotion {
    margin-top: 1.0666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item_catch+.fsp_about_body_item_cotion {
        margin-top:32px
    }
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--1 .fsp_about_body_item_visual {
        margin-top:62px;
        margin-right: 48px;
        width: 480px;
        height: auto
    }
}

.fsp_about_body_item--1 .fsp_about_body_item_visual_image {
    background-color: #ccdcf0
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--1 .fsp_about_body_item_visual_image {
        width:480px;
        height: 302px;
        border-radius: 24px
    }
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--2 .fsp_about_body_item_visual {
        margin-top:0;
        margin-right: 18px;
        width: 596px;
        height: auto
    }
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--2 .fsp_about_body_item_visual_image {
        width:596px;
        height: 432px
    }
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--3 .fsp_about_body_item_visual {
        margin-top:57px;
        margin-right: 72px;
        width: 266px;
        height: auto
    }
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--3 .fsp_about_body_item_visual_image {
        width:266px;
        height: 319px
    }
}

.fsp_about_body_item--3 .fsp_about_body_item_visual_image img {
    top: 0;
    left: 50%;
    margin: 6.4vw 0 0 -18vw;
    width: 36vw;
    height: auto;
    aspect-ratio: 560/670
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--3 .fsp_about_body_item_visual_image img {
        left:0;
        margin: 0;
        width: 266px
    }
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--4 .fsp_about_body_item_visual {
        margin-top:0;
        margin-right: 48px;
        width: 540px;
        height: auto
    }
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--4 .fsp_about_body_item_visual_image {
        width:540px;
        height: 432px
    }
}

.fsp_about_body_item--4 .fsp_about_body_item_visual_image img {
    margin: 3.4666666667vw 0 0 1.8666666667vw;
    width: 70.1333333333vw;
    height: 51.7333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_item--4 .fsp_about_body_item_visual_image img {
        margin:0;
        width: 540px;
        height: 432px
    }
}

.fsp_about_body_indicator {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    margin-bottom: 10.6666666667vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.0666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_indicator {
        margin-bottom:96px;
        gap: 4px
    }
}

.fsp_about_body_indicator_item {
    width: 3.2vw;
    height: 3.2vw;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_indicator_item {
        width:12px;
        height: 12px
    }
}

.fsp_about_body_indicator_item:before {
    margin: 1.0666666667vw auto;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-color: #b2cae9;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    background-color: transparent;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_indicator_item:before {
        margin:4px auto;
        width: 8px;
        height: 8px
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_about_body_indicator_item:hover:before {
        background-color:#fff;
        border-color: transparent
    }
}

@media screen and (hover: hover) and (pointer:fine) and (min-width:769px),print and (hover:hover) and (pointer:fine) {
    .fsp_about_body_indicator_item:hover:before {
        background-color:#1e4d9e
    }
}

.fsp_about_body_indicator_item.is-active:before {
    background-color: #fff;
    border-color: transparent
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_indicator_item.is-active:before {
        background-color:#1e4d9e
    }
}

.fsp_about_body_ui {
    position: absolute;
    z-index: 10;
    top: 0;
    margin-top: 21.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_ui {
        margin-top:204px
    }
}

.fsp_about_body_ui {
    transition: opacity .1s
}

.fsp_about_body_ui.is-disabled {
    opacity: 0;
    pointer-events: none
}

.fsp_about_body_ui--next {
    right: 2.1333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_ui--next {
        right:22px
    }
}

.fsp_about_body_ui--prev {
    left: 2.1333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_about_body_ui--prev {
        left:22px
    }
}

.fsp_howto {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto;
    background-color: #f2f6fb;
    overflow: hidden
}

.fsp_howto_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 16vw;
    padding: 9.6vw 0 9.6vw;
    width: 100%;
    background-color: #fff;
    border-radius: 10.6666666667vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_howto_inner {
        margin:0 auto 0;
        padding: 92px 0 130px;
        width: 100%;
        background-color: transparent;
        border-radius: 0
    }
}

.fsp_howto_inner {
    transition: opacity .3s,transform .8s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(21.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_howto_inner {
        transform:translateY(120px)
    }
}

.fsp_howto_inner.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_howto_head {
    margin: 0 auto 6.9333333333vw;
    width: 83.2vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_howto_head {
        position:absolute;
        z-index: 10;
        top: 0;
        left: 0;
        top: 0;
        left: 50%;
        margin: 60px 0 0 -411px;
        width: 822px;
        overflow: visible;
        pointer-events: none
    }
}

.fsp_howto_head_code {
    margin: 0 0 2.1333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_howto_head_code {
        margin:0 0 4px -135px
    }
}

.fsp_howto_head_code.m-code {
    color: rgba(30,77,158,.7)
}

.fsp_howto_head_title {
    margin-top: 0;
    margin-left: 0;
    font-size: 2em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_howto_head_title {
        margin-top:0;
        margin-left: -135px;
        font-size: 2.25em;
        letter-spacing: .1em
    }
}

.fsp_howto_head_title br.m-sp {
    display: inline
}

.fsp_howto_head_title br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_howto_head_title br.m-sp {
        display:none
    }

    .fsp_howto_head_title br.m-pc {
        display: inline
    }
}

.fsp_howto_body {
    position: relative;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%
}

.fsp_howto_body_mask {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_mask {
        margin:0;
        width: 100%
    }

    .fsp_howto_body_mask:after,.fsp_howto_body_mask:before {
        position: absolute;
        z-index: 1;
        top: 0;
        width: calc(50% - 411px);
        height: 100%;
        background-size: 100% 100%;
        content: "";
        display: block
    }

    .fsp_howto_body_mask:before {
        left: 0;
        background-image: linear-gradient(to right,#f2f6fb 0,rgba(242,246,251,0) 100%)
    }

    .fsp_howto_body_mask:after {
        right: 0;
        background-image: linear-gradient(to left,#f2f6fb 0,rgba(242,246,251,0) 100%)
    }
}

.fsp_howto_body_container {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 83.2vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_container {
        padding:0 calc(50% - 411px);
        margin: 0;
        width: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        gap: 128px;
        transform: translateX(calc(var(--index,0) * -950px))
    }
}

.fsp_howto_body_item {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item {
        margin:0 auto;
        width: 822px;
        min-height: 544px;
        background-color: #fff;
        border-radius: 64px;
        flex-shrink: 0;
        flex-direction: row-reverse;
        justify-content: space-between
    }
}

.fsp_howto_body_item br.m-sp {
    display: inline
}

.fsp_howto_body_item br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item br.m-sp {
        display:none
    }

    .fsp_howto_body_item br.m-pc {
        display: inline
    }
}

.fsp_howto_body_item {
    padding-bottom: 9.0666666667vw;
    margin-bottom: 6.4vw
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item {
        padding-bottom:0;
        margin-bottom: 0
    }
}

.fsp_howto_body_item:last-child {
    padding-bottom: 0;
    margin-bottom: 0
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item:last-child {
        padding-bottom:0;
        margin-bottom: 0
    }
}

.fsp_howto_body_item:after {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.9333333333vw;
    content: "";
    display: block;
    background-image: url("/skinpatch/img/flow_img_hr.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item:after {
        display:none
    }
}

.fsp_howto_body_item:last-child:after {
    display: none
}

.fsp_howto_body_item_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 29.3333333333vw;
    height: 29.3333333333vw;
    flex-shrink: 0;
    border-radius: 4.2666666667vw;
    overflow: hidden;
    pointer-events: none
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_image {
        margin:24px 24px 24px auto;
        width: 429px;
        height: 495px;
        border-radius: 48px
    }
}

.fsp_howto_body_item_image img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_image img {
        width:100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.fsp_howto_body_item--1 .fsp_howto_body_item_image img {
    -o-object-position: center 0%;
    object-position: center 0%;
    transform: scale(1.05);
    transform-origin: center 10%
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item--1 .fsp_howto_body_item_image img {
        transform:scale(1)
    }
}

.fsp_howto_body_item--3 .fsp_howto_body_item_image img {
    -o-object-position: center 0%;
    object-position: center 0%;
    transform: scale(1.15);
    transform-origin: center 0
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item--3 .fsp_howto_body_item_image img {
        transform:scale(1)
    }
}

.fsp_howto_body_item_content {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 49.6vw;
    height: auto;
    flex-shrink: 0
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_content {
        margin-left:48px;
        padding-bottom: 40px;
        width: 320px;
        height: auto;
        flex-glow: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start
    }
}

.fsp_howto_body_item_step {
    font-size: 1em;
    color: #80a7da;
    font-weight: 700;
    font-style: normal;
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_step {
        margin-bottom:24px;
        font-size: 1em;
        display: block
    }
}

.fsp_howto_body_item_title {
    margin-bottom: 2.4vw;
    font-size: 1.5em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_title {
        margin-bottom:12px;
        font-size: 1.5em;
        font-weight: 700;
        font-style: normal;
        line-height: 1.8
    }
}

.fsp_howto_body_item_text {
    font-size: 1.1666666667em;
    color: #3373c4;
    font-weight: 500;
    font-style: normal;
    line-height: 1.8
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_text {
        font-size:1em;
        font-weight: 700;
        font-style: normal;
        line-height: 2
    }
}

.fsp_howto_body_item_cotion {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin-top: 2.4vw;
    font-size: .8333333333em;
    padding-left: 1.5em;
    color: #3373c4;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_cotion {
        margin-top:25px;
        font-size: .75em;
        font-weight: 500;
        font-style: normal;
        line-height: 2
    }
}

.fsp_howto_body_item_cotion span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_howto_body_item_btn {
    margin-top: 2.4vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6vw
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_btn {
        margin-top:40px;
        gap: 8px
    }
}

.fsp_howto_body_item_btn>.m-circle-small {
    width: 5.3333333333vw;
    height: 5.3333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_btn>.m-circle-small {
        width:32px;
        height: 32px
    }
}

.fsp_howto_body_item_btn>.m-circle-small:before {
    margin: -2.6666666667vw 0 0 -2.6666666667vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_btn>.m-circle-small:before {
        margin:-16px 0 0 -16px;
        width: 32px;
        height: 32px
    }
}

.fsp_howto_body_item_btn>.m-circle-small>.m-icon {
    width: 1.8666666667vw;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_btn>.m-circle-small>.m-icon {
        width:10px;
        height: auto
    }
}

.fsp_howto_body_item_btn>.m-btn_text {
    padding-bottom: .03em;
    font-size: 1.1666666667em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_item_btn>.m-btn_text {
        font-size:1.125em
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_howto_body_item_btn:hover {
        opacity:.6
    }
}

.fsp_howto_body_indicator {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.0666666667vw;
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_indicator {
        margin-top:24px;
        gap: 4px;
        display: flex
    }
}

.fsp_howto_body_indicator_item {
    width: 3.2vw;
    height: 3.2vw;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_indicator_item {
        width:12px;
        height: 12px
    }
}

.fsp_howto_body_indicator_item:before {
    margin: 1.0666666667vw auto;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-color: #b2cae9;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    background-color: transparent;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_indicator_item:before {
        margin:4px auto;
        width: 8px;
        height: 8px
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_howto_body_indicator_item:hover:before {
        background-color:#fff;
        border-color: transparent
    }
}

@media screen and (hover: hover) and (pointer:fine) and (min-width:769px),print and (hover:hover) and (pointer:fine) {
    .fsp_howto_body_indicator_item:hover:before {
        background-color:#1e4d9e
    }
}

.fsp_howto_body_indicator_item.is-active:before {
    background-color: #fff;
    border-color: transparent
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_indicator_item.is-active:before {
        background-color:#1e4d9e
    }
}

.fsp_howto_body_ui {
    position: absolute;
    z-index: 10;
    top: 0;
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_ui {
        margin-top:236px;
        display: block
    }
}

.fsp_howto_body_ui {
    transition: opacity .1s
}

.fsp_howto_body_ui.is-disabled {
    opacity: 0;
    pointer-events: none
}

.fsp_howto_body_ui--next {
    right: 0
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_ui--next {
        right:50%;
        margin-right: -443px
    }
}

.fsp_howto_body_ui--prev {
    left: 0
}

@media screen and (min-width: 769px),print {
    .fsp_howto_body_ui--prev {
        left:50%;
        margin-left: -443px
    }
}

.fsp_experience {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto;
    background-color: #f2f6fb
}

.fsp_experience_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_experience_inner {
        min-width:1200px;
        max-width: 1440px
    }
}

.fsp_experience_inner {
    overflow: hidden
}

.fsp_experience_inner {
    transition: opacity .3s,transform .8s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(21.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_experience_inner {
        transform:translateY(120px)
    }
}

.fsp_experience_inner.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_experience_head {
    margin: 0 auto 0;
    width: 100%;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_experience_head {
        margin:0 auto 0
    }
}

.fsp_experience_head_title {
    margin: 0 auto 6.9333333333vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    line-height: 1.8;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_experience_head_title {
        margin:0 auto 32px;
        font-size: 2.25em;
        line-height: 1.5
    }
}

.fsp_experience_head_title:after,.fsp_experience_head_title:before {
    content: "";
    display: block;
    margin: 0 1.8666666667vw;
    width: 8vw;
    height: 12.8vw;
    background-image: url("/skinpatch/img/experience_img_dots.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp_experience_head_title:after,.fsp_experience_head_title:before {
        margin:0 32px;
        width: 52px;
        height: 85px
    }
}

.fsp_experience_head_title:before {
    transform: scaleX(-1)
}

.fsp_experience_body {
    position: relative;
    z-index: 2;
    top: 0;
    left: 0;
    padding-bottom: 14.4vw;
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body {
        padding-bottom:80px
    }
}

.fsp_experience_body_container {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0;
    width: auto;
    min-height: 117.3333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_container {
        min-height:718px
    }
}

.fsp_experience_body_item {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    margin-left: -41.6vw;
    width: 83.2vw;
    height: 117.3333333333vw;
    border-radius: 12.8vw;
    background-color: #fff;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (max-width: 768px) {
    .fsp_experience_body_item.is-detail {
        position:relative;
        left: 0;
        margin-left: 0;
        width: 100%;
        height: auto;
        border-radius: 12.8vw 12.8vw 0 0
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item {
        margin-left:-590px;
        width: 1180px;
        height: 718px;
        border-radius: 64px
    }
}

.fsp_experience_body_item {
    transform: translateX(calc(var(--v,0) * -5%));
    transition: background-color .6s linear
}

.fsp_experience_body_item_content {
    opacity: 0;
    transition: opacity .1s linear
}

.fsp_experience_body_item.layer-1 {
    z-index: 10
}

.fsp_experience_body_item.layer-1 .fsp_experience_body_item_content {
    opacity: 1
}

.fsp_experience_body_item.is-detail .fsp_experience_body_item_content {
    opacity: 1
}

.fsp_experience_body_item.layer-2 {
    z-index: 8;
    background-color: #ccdcf0;
    transform: rotate(-2deg) translateX(calc(var(--v,0) * -5%))
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item.layer-2 {
        transform:rotate(2deg) translateX(calc(var(--v,0) * -5%))
    }
}

.fsp_experience_body_item.layer-3 {
    z-index: 6;
    background-color: #b2cae9;
    transform: rotate(-3deg) translateX(calc(var(--v,0) * -5%))
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item.layer-3 {
        transform:rotate(3deg) translateX(calc(var(--v,0) * -5%))
    }
}

.fsp_experience_body_item.layer-4 {
    z-index: 4;
    background-color: #b2cae9;
    transform: rotate(-3deg) translateX(calc(var(--v,0) * -5%))
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item.layer-4 {
        transform:rotate(3deg) translateX(calc(var(--v,0) * -5%))
    }
}

.fsp_experience_body_item_content {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding: 2.1333333333vw 0 2.1333333333vw;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content {
        background-color:#f7fafd
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content {
        padding:24px 0 20px;
        background-color: #e5edf8;
        flex-direction: row
    }
}

.fsp_experience_body_item_content_personal {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 2.6666666667vw;
    width: 78.6666666667vw;
    height: 55.2vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_personal {
        width:95.7333333333vw;
        height: auto
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal {
        margin:0 10px 0 20px;
        width: 470px;
        height: 674px
    }
}

.fsp_experience_body_item_content_personal_visual {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 55.2vw;
    border-radius: 10.6666666667vw 10.6666666667vw 1.6vw 1.6vw;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_personal_visual {
        height:95.7333333333vw
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_visual {
        height:auto;
        flex-grow: 1;
        border-radius: 48px 48px 0 0
    }
}

.fsp_experience_body_item_content_personal_visual_image {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.fsp_experience_body_item_content_personal_visual_image img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.fsp_experience_body_item_content_personal_visual_image img.m-sp {
    display: block
}

.fsp_experience_body_item_content_personal_visual_image img.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_visual_image img.m-sp {
        display:none
    }

    .fsp_experience_body_item_content_personal_visual_image img.m-pc {
        display: block
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_visual_image img {
        width:100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.fsp_experience_body_item_content_personal_visual_image img.m-sp-detail {
    display: none
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_personal_visual_image .m-sp {
        display:none
    }

    .is-detail .fsp_experience_body_item_content_personal_visual_image .m-sp-detail {
        display: block
    }
}

.fsp_experience_body_item_content_personal_visual_message {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 0 4.2666666667vw 0 0;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_visual_message {
        border-radius:0 16px 0 0
    }
}

.fsp_experience_body_item_content_personal_visual_message img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_visual_message img {
        width:100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain
    }
}

.fsp_experience_body_item_content_personal_data {
    margin: 1.0666666667vw 0 4.2666666667vw;
    width: 100%;
    border-radius: 0 0 2.1333333333vw 2.1333333333vw;
    gap: .5333333333vw;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    display: none
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_personal_data {
        display:flex
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_data {
        display:flex;
        margin: 4px 0 0;
        border-radius: 0 0 8px 48px;
        gap: 1px
    }
}

.fsp_experience_body_item_content_personal_data_item {
    padding: 2.1333333333vw 0;
    width: 100%;
    display: flex;
    background-color: #fff;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_data_item {
        padding:8px 0
    }
}

.fsp_experience_body_item_content_personal_data_item_label {
    margin: 0 0 0 4.2666666667vw;
    width: 33.6vw;
    flex-shrink: 0;
    font-size: 1em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_data_item_label {
        margin:0 0 0 32px;
        width: 138px;
        font-size: .875em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_personal_data_item_value {
    width: auto;
    padding: 0 0 0 5.6vw;
    border-left: 1px solid #b2cae9;
    flex-grow: 1;
    font-size: 1.1666666667em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_data_item_value {
        padding:0 0 0 8px;
        font-size: .875em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_personal_data_item_value br.m-sp {
    display: inline
}

.fsp_experience_body_item_content_personal_data_item_value br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_personal_data_item_value br.m-sp {
        display:none
    }

    .fsp_experience_body_item_content_personal_data_item_value br.m-pc {
        display: inline
    }
}

.fsp_experience_body_item_content_body {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 0;
    width: 78.6666666667vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-grow: 1
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_body {
        width:100%
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_body {
        margin:0 auto 0 0;
        width: 660px;
        height: 674px;
        flex-shrink: 0;
        flex-grow: 0
    }
}

.fsp_experience_body_item_content_tab {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
    overflow: hidden
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_tab {
        width:100%;
        display: flex
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_tab {
        width:100%;
        display: flex
    }
}

.fsp_experience_body_item_content_tab_item {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: auto;
    flex-shrink: 0
}

.fsp_experience_body_item_content_tab_item--karte {
    z-index: 1;
    margin-left: 2.1333333333vw;
    margin-right: .8vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_tab_item--karte {
        margin-left:0;
        margin-right: 3px
    }
}

.fsp_experience_body_item_content_tab_item:after {
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: 0;
    margin-right: -5.8666666667vw;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    -webkit-mask-image: url("/skinpatch/img/experience_tab_tail.svg");
    mask-image: url("/skinpatch/img/experience_tab_tail.svg");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    content: "";
    display: block;
    background-color: #3373c4
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_tab_item:after {
        margin-right:-22px;
        width: 22px;
        height: 22px
    }
}

.fsp_experience_body_item_content_tab_item_inner {
    padding: 0;
    width: auto;
    height: 13.8666666667vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #3373c4;
    border-radius: 6.4vw 6.4vw 0 0;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_tab_item_inner {
        padding:0;
        width: 238px;
        height: 52px;
        border-radius: 32px 32px 0 0
    }
}

.fsp_experience_body_item_content_tab_item_inner span {
    font-size: 1.3333333333em;
    line-height: 2;
    color: #fff;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_tab_item_inner span {
        font-size:1em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_tab_item--karte .fsp_experience_body_item_content_tab_item_inner {
    padding: 0 5.3333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_tab_item--karte .fsp_experience_body_item_content_tab_item_inner {
        padding:0
    }
}

.fsp_experience_body_item_content_tab_item--pickup .fsp_experience_body_item_content_tab_item_inner {
    padding: 0 4.5333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_tab_item--pickup .fsp_experience_body_item_content_tab_item_inner {
        padding:0
    }
}

.fsp_experience_body_item_content_tab_item.is-active {
    pointer-events: none
}

.fsp_experience_body_item_content_tab_item.is-active:after {
    background-color: #1e4d9e
}

.fsp_experience_body_item_content_tab_item.is-active .fsp_experience_body_item_content_tab_item_inner {
    background-color: #1e4d9e
}

@media (hover: hover) and (pointer:fine) {
    .fsp_experience_body_item_content_tab_item:after,.fsp_experience_body_item_content_tab_item_inner {
        transition:background-color .1s linear
    }

    .fsp_experience_body_item_content_tab_item:hover:after {
        background-color: #b2cae9
    }

    .fsp_experience_body_item_content_tab_item:hover .fsp_experience_body_item_content_tab_item_inner {
        background-color: #b2cae9
    }
}

.fsp_experience_body_item_content_area {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    flex-grow: 1;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_area {
        border-radius:0 0 48px 0
    }
}

.fsp_experience_body_item_content_page {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 0;
    width: 78.6666666667vw;
    background-color: #fff;
    overflow: hidden;
    pointer-events: none
}

.fsp_experience_body_item_content_page.is-active {
    z-index: 10;
    pointer-events: auto
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_page {
        margin:0 auto 0;
        width: 95.7333333333vw;
        border-radius: 0 2.1333333333vw 2.1333333333vw 2.1333333333vw
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_page {
        position:absolute;
        z-index: 0;
        top: 0;
        left: 0;
        margin: 0 auto 0;
        width: 100%;
        height: 100%;
        border-radius: 0 8px 8px 8px
    }
}

.fsp_experience_body_item_content_page br.m-sp {
    display: inline
}

.fsp_experience_body_item_content_page br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_page br.m-sp {
        display:none
    }

    .fsp_experience_body_item_content_page br.m-pc {
        display: inline
    }
}

.fsp_experience_body_item_content_karte {
    display: block
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_karte {
        display:none
    }

    .is-detail .fsp_experience_body_item_content_karte.is-active {
        display: block
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte {
        display:none
    }

    .fsp_experience_body_item_content_karte.is-active {
        display: block
    }
}

.fsp_experience_body_item_content_pickup {
    display: none
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_pickup.is-active {
        display:block
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup.is-active {
        display:flex
    }
}

.fsp_experience_body_item_content_karte_title {
    margin: 6.4vw auto 4.2666666667vw;
    width: 83.2vw;
    font-size: 1.5em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: left;
    display: none
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_karte_title {
        display:block
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_title {
        margin:25px auto 25px;
        width: 615px;
        font-size: 1.25em;
        line-height: 1;
        display: block
    }
}

.fsp_experience_body_item_content_karte_data {
    margin: 0 auto 0;
    padding: 0;
    width: 78.6666666667vw;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_karte_data {
        padding:4.2666666667vw 0 0 0;
        width: 83.2vw;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        border-top: 1px solid #e5edf8
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data {
        margin:0 auto 0;
        padding: 0;
        width: 615px;
        height: 369px;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: stretch;
        border-top: 1px solid #e5edf8;
        border-bottom: 1px solid #e5edf8
    }
}

.fsp_experience_body_item_content_karte_data_graph {
    margin: 0 auto 0;
    width: 40.2666666667vw;
    height: auto;
    aspect-ratio: 1/1;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_karte_data_graph {
        width:83.2vw
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_graph {
        margin:0 0 0 auto;
        width: 330px;
        height: auto
    }
}

.fsp_experience_body_item_content_karte_data_graph img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.fsp_experience_body_item_content_karte_data_type {
    margin: 0 auto 0;
    padding: 0;
    width: 34.6666666667vw
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_karte_data_type {
        padding:4.2666666667vw 0 0 0;
        width: 83.2vw;
        border-top: 1px solid #e5edf8
    }

    .is-detail .fsp_experience_body_item_content_karte_data_type .m-sp {
        display: none
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type {
        margin:0 0 0;
        padding: 12px 10px 0 0;
        width: 280px;
        border-right: 1px solid #e5edf8;
        border-top: none
    }
}

.fsp_experience_body_item_content_karte_data_type_title {
    margin: 0 0 2.6666666667vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: left
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_title {
        margin:0 0 10px;
        font-size: .875em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_karte_data_type_title .m-icon {
    margin-right: 1.6vw;
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    background-image: url("/skinpatch/img/experience_ico_skin.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_title .m-icon {
        margin-right:6px;
        width: 32px;
        height: 32px
    }
}

.fsp_experience_body_item_content_karte_data_type_value {
    margin: 0 0 0;
    padding: 2.1333333333vw 0 2.1333333333vw;
    width: 100%;
    font-size: 1.5em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    border-bottom: 1px solid #e5edf8;
    border-top: 1px solid #e5edf8
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_karte_data_type_value {
        margin:0 0 4.2666666667vw;
        padding: 0;
        font-size: 2em;
        text-align: left;
        border-bottom: none;
        border-top: none
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_value {
        margin:0 0 16px;
        padding: 0;
        font-size: 1.375em;
        line-height: 1.5;
        white-space: nowrap;
        border-bottom: none;
        border-top: none;
        text-align: left
    }
}

.fsp_experience_body_item_content_karte_data_type_detail {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding-top: 6.9333333333vw;
    width: 100%;
    display: none
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_karte_data_type_detail {
        display:block
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_detail {
        padding-top:16px;
        display: block
    }
}

.fsp_experience_body_item_content_karte_data_type_detail:before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.6666666667vw;
    content: "";
    display: block;
    background-image: url("/skinpatch/img/experience_img_hr.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_detail:before {
        width:100%;
        height: 8px
    }
}

.fsp_experience_body_item_content_karte_data_type_detail_item {
    margin: 0 0 6.4vw;
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_detail_item {
        margin:0 0 24px
    }
}

.fsp_experience_body_item_content_karte_data_type_detail_item_title {
    margin: 0 0 2.6666666667vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.5em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: left
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_detail_item_title {
        margin:0 0 10px;
        font-size: 1.25em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_karte_data_type_detail_item_title .m-icon {
    margin-left: 2.1333333333vw;
    width: 17.0666666667vw;
    height: auto;
    aspect-ratio: 72/26;
    background-image: url("/skinpatch/img/experience_ico_good.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_detail_item_title .m-icon {
        margin-left:8px;
        width: 72px;
        height: auto
    }
}

.fsp_experience_body_item_content_karte_data_type_detail_item_value {
    margin: 0 0 0;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_data_type_detail_item_value {
        margin:0 0 0;
        font-size: .875em;
        line-height: 1.5
    }
}

.fsp_experience_body_item_content_karte_comment {
    margin: 0 auto 6.4vw;
    padding: 4.2666666667vw 0 0 0;
    width: 83.2vw;
    display: none
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_karte_comment {
        display:block;
        border-top: 1px solid #e5edf8
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_comment {
        margin:0 auto 0;
        padding: 12px 0 0 0;
        width: 615px;
        border-top: none;
        display: block
    }
}

.fsp_experience_body_item_content_karte_comment_title {
    margin: 0 0 2.6666666667vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: left
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_comment_title {
        margin:0 0 10px;
        font-size: .875em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_karte_comment_title .m-icon {
    margin-right: 1.6vw;
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    background-image: url("/skinpatch/img/experience_ico_comment.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_comment_title .m-icon {
        margin-right:6px;
        width: 32px;
        height: 32px
    }
}

.fsp_experience_body_item_content_karte_comment_text {
    margin: 0 0 0;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #3373c4;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_karte_comment_text {
        margin:0 0 0;
        font-size: .875em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_pickup {
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup {
        flex-direction:column;
        justify-content: center
    }
}

.fsp_experience_body_item_content_pickup_image {
    margin: 2.9333333333vw auto .8vw;
    width: 61.3333333333vw;
    height: 61.3333333333vw;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_image {
        margin:0 auto 0;
        width: 324px;
        height: 324px
    }
}

.fsp_experience_body_item_content_pickup_image img {
    width: 100%;
    height: auto;
    display: block
}

.fsp_experience_body_item_content_pickup_title {
    margin: 0 auto 0;
    width: 100%;
    font-size: 1.5em;
    line-height: 1.8;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_title {
        margin:0 auto 0;
        font-size: 1.5em;
        line-height: 1.8
    }
}

.fsp_experience_body_item_content_pickup_title+.fsp_experience_body_item_content_pickup_type {
    margin: 3.4666666667vw auto 0
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_title+.fsp_experience_body_item_content_pickup_type {
        margin:16px auto 0
    }
}

.fsp_experience_body_item_content_pickup_type {
    padding: .8vw 3.7333333333vw;
    font-size: .8333333333em;
    line-height: 1.5;
    font-weight: 500;
    font-style: normal;
    color: #000;
    border-radius: 1.0666666667vw;
    background-color: #d0e6e9;
    overflow: hidden;
    display: inline-block
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_type {
        padding:1px 14px;
        font-size: .75em;
        line-height: 2;
        border-radius: 4px
    }
}

.fsp_experience_body_item_content_pickup_desc {
    margin: 4.2666666667vw auto 2.6666666667vw;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal;
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_desc {
        margin:12px auto 16px;
        font-size: .875em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_pickup_cotion {
    margin: 0 auto 4.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_cotion {
        margin:0 auto 16px
    }
}

.fsp_experience_body_item_content_pickup_cotion_item {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    font-size: .8333333333em;
    line-height: 1.5;
    color: #565b60;
    font-weight: 500;
    font-style: normal;
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_cotion_item {
        font-size:.75em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_pickup_cotion_item span {
    padding-right: .5em
}

.fsp_experience_body_item_content_pickup_link {
    margin: 0 auto 10.6666666667vw;
    width: 43.2vw;
    height: 12.8vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 1px solid #b2cae9;
    border-radius: 21.3333333333vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_link {
        margin:0 auto 0;
        width: 162px;
        height: 48px;
        border-radius: 80px
    }
}

.fsp_experience_body_item_content_pickup_link .m-btn_text {
    margin: 0 auto;
    padding-left: .4em;
    font-size: 1.3333333333em;
    line-height: 2;
    font-weight: 700;
    font-style: normal;
    color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_link .m-btn_text {
        font-size:1em;
        line-height: 2
    }
}

.fsp_experience_body_item_content_pickup_link .m-icon {
    margin: 0 4.2666666667vw 0 0
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_pickup_link .m-icon {
        margin:0 16px 0 0
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_experience_body_item_content_pickup_link:hover {
        background-color:#f2f6fb
    }
}

.fsp_experience_body_item_content_more {
    margin: 0 auto 0;
    width: 39.4666666667vw;
    height: 10.6666666667vw
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_more {
        display:none
    }
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_more {
        display:none
    }
}

.fsp_experience_body_item_content_more.m-btn--primary {
    padding: 0;
    padding-left: 1em
}

.fsp_experience_body_item_content_more.m-btn--primary .m-btn_text {
    margin: 0 auto;
    font-size: 1.1666666667em
}

.fsp_experience_body_item_content_more.m-btn--primary .m-circle-small {
    margin: 0 2.1333333333vw 0 0;
    width: 6.4vw;
    height: 6.4vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_more.m-btn--primary .m-circle-small {
        width:24px;
        height: 24px
    }
}

.fsp_experience_body_item_content_more.m-btn--primary .m-circle-small:before {
    margin: -3.2vw 0 0 -3.2vw;
    width: 6.4vw;
    height: 6.4vw
}

.fsp_experience_body_item_content_more .m-icon {
    width: 2.4vw;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item_content_more .m-icon {
        width:11px;
        height: auto
    }
}

.fsp_experience_body_item_content_personal {
    clip-path: inset(0 100% 0% 0);
    transform: translateX(10%);
    opacity: 0;
    transition: transform .8s .1s cubic-bezier(.165, .84, .44, 1),clip-path .4s .1s cubic-bezier(.39, .575, .565, 1),opacity .3s .1s linear
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_personal {
        transform:translateX(0);
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transition: none
    }
}

.fsp_experience_body_item_content_body {
    transform: translateY(10%);
    opacity: 0;
    transition: transform .8s .2s cubic-bezier(.165, .84, .44, 1),opacity .2s .2s linear
}

@media screen and (max-width: 768px) {
    .is-detail .fsp_experience_body_item_content_body {
        transform:translateY(0);
        opacity: 1;
        transition: none
    }
}

.fsp_experience_body_item.layer-1 .fsp_experience_body_item_content_personal {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0)
}

.fsp_experience_body_item.layer-1 .fsp_experience_body_item_content_body {
    opacity: 1;
    transform: translateY(0)
}

.fsp_experience_body_item--1 .fsp_experience_body_item_content_personal_visual_message {
    margin: 0 0 2.1333333333vw 4.8vw;
    width: 26.6666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item--1 .fsp_experience_body_item_content_personal_visual_message {
        margin:0 0 27px 26px;
        padding: 0;
        width: 162px
    }
}

@media screen and (max-width: 768px) {
    .fsp_experience_body_item--1.is-detail .fsp_experience_body_item_content_personal_visual_message {
        margin:0 0 5.3333333333vw 3.4666666667vw;
        width: 32vw
    }
}

.fsp_experience_body_item--2 .fsp_experience_body_item_content_personal_visual_message {
    margin: 0 0 6.9333333333vw 1.6vw;
    width: 30.4vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item--2 .fsp_experience_body_item_content_personal_visual_message {
        margin:0 0 19px 14px;
        padding: 0;
        width: 166px
    }
}

@media screen and (max-width: 768px) {
    .fsp_experience_body_item--2.is-detail .fsp_experience_body_item_content_personal_visual_message {
        margin:0 0 11.4666666667vw 3.4666666667vw;
        width: 37.0666666667vw
    }
}

.fsp_experience_body_item--3 .fsp_experience_body_item_content_personal_visual_message {
    margin: 0 0 5.0666666667vw 4.8vw;
    width: 28.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item--3 .fsp_experience_body_item_content_personal_visual_message {
        margin:0 0 36px 32px;
        padding: 0;
        width: 165px
    }
}

@media screen and (max-width: 768px) {
    .fsp_experience_body_item--3.is-detail .fsp_experience_body_item_content_personal_visual_message {
        margin:0 0 13.0666666667vw 3.4666666667vw;
        width: 34.6666666667vw
    }
}

.fsp_experience_body_item--4 .fsp_experience_body_item_content_personal_visual_message {
    margin: 0 0 5.6vw 5.3333333333vw;
    width: 24.8vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_item--4 .fsp_experience_body_item_content_personal_visual_message {
        margin:0 0 39px 39px;
        padding: 0;
        width: 145px
    }
}

@media screen and (max-width: 768px) {
    .fsp_experience_body_item--4.is-detail .fsp_experience_body_item_content_personal_visual_message {
        margin:0 0 8vw 3.7333333333vw;
        width: 29.8666666667vw
    }
}

.fsp_experience_body_indicator {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    margin-top: 4.8vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.0666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_indicator {
        margin-top:36px;
        gap: 4px
    }
}

.fsp_experience_body_indicator_item {
    width: 3.2vw;
    height: 3.2vw;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_indicator_item {
        width:12px;
        height: 12px
    }
}

.fsp_experience_body_indicator_item:before {
    margin: 1.0666666667vw auto;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-color: #b2cae9;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    background-color: transparent;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_indicator_item:before {
        margin:4px auto;
        width: 8px;
        height: 8px
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_experience_body_indicator_item:hover:before {
        background-color:#1e4d9e;
        border-color: transparent
    }
}

@media screen and (hover: hover) and (pointer:fine) and (min-width:769px),print and (hover:hover) and (pointer:fine) {
    .fsp_experience_body_indicator_item:hover:before {
        background-color:#1e4d9e
    }
}

.fsp_experience_body_indicator_item.is-active:before {
    background-color: #1e4d9e;
    border-color: transparent
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_indicator_item.is-active:before {
        background-color:#1e4d9e
    }
}

.fsp_experience_body_ui {
    position: absolute;
    z-index: 10;
    top: 0;
    left: auto;
    margin-top: 196px
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_ui {
        margin-top:324px
    }
}

.fsp_experience_body_ui {
    transition: opacity .1s
}

.fsp_experience_body_ui.is-disabled {
    opacity: 0;
    pointer-events: none
}

.fsp_experience_body_ui--next {
    right: 50%;
    margin-right: -47.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_ui--next {
        margin-right:-620px
    }
}

.fsp_experience_body_ui--prev {
    left: 50%;
    margin-left: -47.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_experience_body_ui--prev {
        margin-left:-620px
    }
}

.fsp_reservation {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto;
    background-color: #f2f6fb
}

.fsp_reservation_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding: 0 0 8vw;
    margin: 0 auto;
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_inner {
        padding:0 0 130px;
        width: 100%;
        max-width: 1344px
    }
}

.fsp_reservation_inner {
    transition: opacity .3s,transform .8s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(21.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_inner {
        transform:translateY(120px)
    }
}

.fsp_reservation_inner.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_reservation_head {
    width: 100%;
    padding-top: 58.6666666667vw;
    border-radius: 10.6666666667vw 10.6666666667vw 0 0;
    overflow: hidden;
    background-image: url("/skinpatch/img/reservation_bg_sp.webp");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #eaeaea
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head {
        padding-top:0;
        height: auto;
        aspect-ratio: 2686/1100;
        border-radius: 64px 64px 0 0;
        background-image: url("/skinpatch/img/reservation_bg_pc.webp");
        background-color: transparent
    }
}

.fsp_reservation_head_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0 0 6.4vw;
    width: 82.6666666667vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_inner {
        position:absolute;
        z-index: 10;
        top: 0;
        right: 0;
        margin-top: 97px;
        margin-right: 2.9761904762%;
        padding: 0 0 0;
        width: 455px
    }
}

.fsp_reservation_head_code {
    margin: 0 0 2.1333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_code {
        margin:50px 0 4px
    }
}

.fsp_reservation_head_code.m-code {
    color: rgba(30,77,158,.7)
}

.fsp_reservation_head_title {
    margin: 0 auto 4.8vw;
    width: 100%;
    font-size: 2em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_title {
        margin:0 auto 40px;
        font-size: 2.25em;
        line-height: 1.5;
        letter-spacing: .1em
    }
}

.fsp_reservation_head_cotion {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    background-color: #b2cae9;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_cotion {
        width:118px;
        height: 118px
    }
}

.fsp_reservation_head_cotion {
    transition: opacity .1s .3s,transform .6s .3s cubic-bezier(.175, .885, .32, 1.275);
    opacity: 0;
    transform: scale(.8)
}

.fsp_reservation_head_cotion.is-act {
    opacity: 1;
    transform: scale(1)
}

.fsp_reservation_head_cotion span {
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    font-size: 1.3333333333em;
    font-weight: 700;
    font-style: normal;
    color: #fff
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_cotion span {
        font-size:1.5em
    }
}

.fsp_reservation_head_cotion:before {
    position: absolute;
    z-index: 0;
    top: 1.3333333333vw;
    left: 1.3333333333vw;
    width: 18.6666666667vw;
    height: 18.6666666667vw;
    content: "";
    display: block;
    border-radius: 50%;
    overflow: hidden;
    background-color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_cotion:before {
        top:8px;
        left: 8px;
        width: 102px;
        height: 102px
    }
}

.fsp_reservation_head_present {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 82.6666666667vw;
    height: 32vw;
    background-color: rgba(255,255,255,.4);
    border-radius: 4.2666666667vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #b2cae9;
    gap: 1.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_present {
        width:450px;
        height: 142px;
        border-radius: 16px;
        gap: 16px
    }
}

.fsp_reservation_head_present {
    transition: opacity .1s .5s,transform .8s .5s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(2.6666666667vw)
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_present {
        transform:translateY(20px)
    }
}

.fsp_reservation_head_present.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_reservation_head_present_image {
    width: 42.1333333333vw;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_present_image {
        width:154px;
        height: auto
    }
}

.fsp_reservation_head_present_image img {
    width: 100%;
    height: auto;
    display: block
}

.fsp_reservation_head_present_text {
    width: 32vw;
    font-size: 1.1666666667em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    line-height: 1.8
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_present_text {
        width:auto;
        font-size: 1em;
        line-height: 2
    }
}

.fsp_reservation_head_present_text br.m-sp {
    display: block
}

.fsp_reservation_head_present_text br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_head_present_text br.m-sp {
        display:none
    }

    .fsp_reservation_head_present_text br.m-pc {
        display: block
    }
}

.fsp_reservation_body {
    padding: 6.4vw 0 9.6vw;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0 0 10.6666666667vw 10.6666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_body {
        padding:40px 0 80px;
        border-radius: 0 0 64px 64px
    }
}

.fsp_reservation_body br.m-sp {
    display: inline
}

.fsp_reservation_body br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_body br.m-sp {
        display:none
    }

    .fsp_reservation_body br.m-pc {
        display: inline
    }
}

.fsp_reservation_shop {
    margin: 0 auto 4.2666666667vw;
    padding-top: 8.5333333333vw;
    padding-bottom: 0;
    width: 91.2vw;
    height: auto;
    background-color: #f2f6fb;
    border-radius: 24px;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop {
        margin:0 auto 40px;
        padding-top: 24px;
        padding-bottom: 24px;
        width: 1090px;
        height: auto;
        border-radius: 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template: "image head" auto "image links" 1fr/auto 1fr
    }
}

.fsp_reservation_shop {
    transition: opacity .3s,transform .8s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(21.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop {
        transform:translateY(120px)
    }
}

.fsp_reservation_shop.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_reservation_shop_head {
    margin: 0 auto 6.4vw;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_head {
        margin:0 0 38px;
        width: 364px;
        grid-area: head
    }
}

.fsp_reservation_shop_head_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 3.4666666667vw;
    width: 100%;
    font-size: 1.5em;
    line-height: 1;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_head_title {
        margin:0 0 37px;
        padding-top: 24px;
        font-size: 1.5em;
        line-height: 1
    }
}

.fsp_reservation_shop_head_title:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    content: "";
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_head_title:before {
        width:19px;
        height: 2px;
        display: block;
        background-color: #1e4d9e
    }
}

.fsp_reservation_shop_head_text {
    margin: 0 0 0;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #3373c4;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_head_text {
        margin:0 0 0;
        font-weight: 700;
        font-style: normal;
        font-size: 1.125em;
        line-height: 1.8
    }
}

.fsp_reservation_shop_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 6.4vw;
    width: 83.2vw;
    height: 56vw;
    border-radius: 4.2666666667vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_image {
        margin:0 48px 0 24px;
        width: 600px;
        height: 480px;
        border-radius: 16px;
        grid-area: image
    }
}

.fsp_reservation_shop_image img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover
}

.fsp_reservation_shop_image img.m-sp {
    display: block
}

.fsp_reservation_shop_image img.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_image img.m-sp {
        display:none
    }

    .fsp_reservation_shop_image img.m-pc {
        display: block
    }
}

.fsp_reservation_shop_image_label {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    margin: 0;
    width: 24.2666666667vw;
    height: 9.6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 4.2666666667vw 0;
    overflow: hidden;
    font-size: 1.1666666667em;
    line-height: 1;
    background-color: #1e4d9e;
    color: #fff;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_image_label {
        width:124px;
        height: 48px;
        border-radius: 0 0 16px 0;
        font-size: 1.125em;
        line-height: 1;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_reservation_shop_links {
    margin: 0 auto 8.5333333333vw;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_links {
        margin:0 0 0;
        width: 364px;
        grid-area: links
    }
}

.fsp_reservation_shop_links_btn {
    padding: 0;
    height: 14.9333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_links_btn {
        height:64px
    }
}

.fsp_reservation_shop_links_btn--reservation {
    margin: 0 auto 2.1333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_links_btn--reservation {
        margin:0 0 22px
    }
}

.fsp_reservation_shop_links_btn--search {
    margin: 0 auto 4.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_links_btn--search {
        margin:0 0 37px
    }
}

.fsp_reservation_shop_links_cotion {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 0;
    padding-left: 1.5em;
    width: 100%;
    font-size: .8333333333em;
    line-height: 1.5;
    color: #565b60;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_shop_links_cotion {
        margin:0 0 0;
        font-weight: 700;
        font-style: normal;
        font-size: .875em;
        line-height: 2;
        font-weight: 500;
        font-style: normal
    }
}

.fsp_reservation_shop_links_cotion span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_reservation_event {
    margin: 0 auto 4.2666666667vw;
    padding-top: 8.5333333333vw;
    width: 91.2vw;
    height: auto;
    background-color: #f2f6fb;
    border-radius: 6.4vw;
    overflow: hidden;
    background-image: url("/skinpatch/img/reservation_bg_area.webp");
    background-size: 66.6666666667vw auto;
    background-position: right top;
    background-repeat: no-repeat
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event {
        margin:0 auto 40px;
        padding-top: 24px;
        width: 1090px;
        height: auto;
        border-radius: 24px;
        background-size: 650px auto
    }
}

.fsp_reservation_event {
    transition: opacity .3s,transform .8s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(21.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event {
        transform:translateY(120px)
    }
}

.fsp_reservation_event.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_reservation_event_column {
    margin: 0 0 6.4vw;
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_column {
        margin:0 0 48px;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start
    }
}

.fsp_reservation_event_head {
    margin: 0 auto 6.4vw;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_head {
        margin:0 auto 38px 0;
        width: 364px
    }
}

.fsp_reservation_event_head_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 3.4666666667vw;
    width: 100%;
    font-size: 1.5em;
    line-height: 1;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_head_title {
        margin:0 0 37px;
        padding-top: 24px;
        font-size: 1.5em;
        line-height: 1
    }
}

.fsp_reservation_event_head_title:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    content: "";
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_head_title:before {
        width:19px;
        height: 2px;
        display: block;
        background-color: #1e4d9e
    }
}

.fsp_reservation_event_head_text {
    margin: 0 0 0;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #3373c4;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_head_text {
        margin:0 0 0;
        font-weight: 700;
        font-style: normal;
        font-size: 1.125em;
        line-height: 1.8
    }
}

.fsp_reservation_event_head_label {
    margin: 3.4666666667vw 0 0;
    width: 33.3333333333vw;
    height: 9.3333333333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2.1333333333vw;
    overflow: hidden;
    font-size: 1.1666666667em;
    line-height: 1;
    background-color: #fff;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_head_label {
        margin:16px 0 0;
        width: 140px;
        height: 40px;
        border-radius: 8px;
        font-size: 1em;
        line-height: 1;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_reservation_event_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 8.5333333333vw;
    width: 83.2vw;
    height: 56vw;
    border-radius: 4.2666666667vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_image {
        margin:0 48px 0 24px;
        width: 600px;
        height: 480px;
        border-radius: 16px
    }
}

.fsp_reservation_event_image img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center 0;
    object-position: center 0
}

.fsp_reservation_event_image img.m-sp {
    display: block
}

.fsp_reservation_event_image img.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_image img.m-sp {
        display:none
    }

    .fsp_reservation_event_image img.m-pc {
        display: block
    }
}

.fsp_reservation_event_image_label {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    margin: 0;
    width: 24.2666666667vw;
    height: 9.6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 4.2666666667vw 0;
    overflow: hidden;
    font-size: 1.1666666667em;
    line-height: 1;
    background-color: #1e4d9e;
    color: #fff;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_image_label {
        width:124px;
        height: 48px;
        border-radius: 0 0 16px 0;
        font-size: 1.125em;
        line-height: 1;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_reservation_event_list {
    margin: 0 auto 15.4666666667vw;
    width: 83.2vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8.5333333333vw 4.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list {
        margin:0 auto 58px;
        width: 992px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 32px 24px
    }
}

.fsp_reservation_event_list_item {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 38.4vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item {
        width:314px;
        gap: 16px
    }
}

.fsp_reservation_event_list_item:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block
}

.fsp_reservation_event_list_item_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 2.1333333333vw 0;
    width: 100%;
    height: 28.8vw;
    border-radius: 2.1333333333vw;
    overflow: hidden;
    background-color: #b2cae9
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_image {
        margin:0;
        height: 240px;
        border-radius: 16px
    }
}

.fsp_reservation_event_list_item_image img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover
}

.fsp_reservation_event_list_item_area {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    margin: 1.0666666667vw 0 0 1.0666666667vw;
    padding: 1.0666666667vw 2.1333333333vw;
    border-radius: 1.0666666667vw;
    font-size: 1em;
    line-height: 1;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal;
    background-color: #e5edf8
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_area {
        margin:8px 0 0 8px;
        padding: 2px 16px;
        border-radius: 8px;
        font-size: 1em;
        line-height: 1.5;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_reservation_event_list_item_mark.m-btn {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    padding: 1.0666666667vw 1.0666666667vw 1.0666666667vw 2.1333333333vw;
    border-radius: 2.1333333333vw 0 0 0
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_mark.m-btn {
        padding:4px 4px 4px 16px;
        height: 40px;
        border-radius: 16px 0 0 0
    }
}

.fsp_reservation_event_list_item_mark.m-btn>.m-btn_text {
    margin-right: .5333333333vw;
    font-size: 1em;
    line-height: 1;
    color: #fff;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_mark.m-btn>.m-btn_text {
        margin-right:2px;
        font-size: 1em;
        line-height: 1.5;
        font-weight: 500;
        font-style: normal
    }
}

.fsp_reservation_event_list_item_mark.m-btn>.m-circle-small {
    margin-right: auto;
    width: 4.2666666667vw;
    height: 4.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_mark.m-btn>.m-circle-small {
        width:28px;
        height: 28px
    }
}

.fsp_reservation_event_list_item_mark.m-btn>.m-circle-small:before {
    margin: -2.1333333333vw 0 0 -2.1333333333vw;
    width: 4.2666666667vw;
    height: 4.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_mark.m-btn>.m-circle-small:before {
        margin:-14px 0 0 -14px;
        width: 28px;
        height: 28px
    }
}

.fsp_reservation_event_list_item_mark.m-btn .m-icon--plus {
    width: 1.6vw;
    height: 1.6vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_mark.m-btn .m-icon--plus {
        width:10px;
        height: 10px
    }
}

.fsp_reservation_event_list_item_date {
    margin: 0 0 1.6vw 0;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 1;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: left
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_date {
        margin:0;
        font-size: 1.125em;
        line-height: 1;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_reservation_event_list_item_place {
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: left
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_list_item_place {
        font-size:1.125em;
        line-height: 1.5;
        font-weight: 700;
        font-style: normal
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_reservation_event_list_item:hover .m-btn--primary {
        background-color:#3373c4
    }

    .fsp_reservation_event_list_item_image img {
        transform: scale(1) rotate(.000001deg);
        transition: transform .8s cubic-bezier(.165, .84, .44, 1)
    }

    .fsp_reservation_event_list_item:hover .fsp_reservation_event_list_item_image img {
        transform: scale(1.05) rotate(.000001deg);
        transition: transform .6s cubic-bezier(.39, .575, .565, 1)
    }

    .fsp_reservation_event_list_item:hover .fsp_reservation_event_list_item_date,.fsp_reservation_event_list_item:hover .fsp_reservation_event_list_item_place {
        color: #3373c4
    }
}

.fsp_reservation_event_others {
    margin: 0 auto 12.8vw;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_others {
        margin:0 auto 40px;
        width: 992px
    }
}

.fsp_reservation_event_others_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 5.3333333333vw;
    padding-left: 5.3333333333vw;
    width: 100%;
    font-size: 1.5em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: left
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_others_title {
        margin:0 0 24px;
        padding-left: 20px;
        font-size: 1.125em;
        line-height: 1
    }
}

.fsp_reservation_event_others_title:before {
    position: absolute;
    z-index: 0;
    top: .8em;
    left: 0;
    margin-top: -1.6vw;
    width: 3.2vw;
    height: 3.2vw;
    background-color: #1e4d9e;
    border-radius: 50%;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_others_title:before {
        top:.5em;
        margin-top: -6px;
        width: 12px;
        height: 12px
    }
}

.fsp_reservation_event_others_list {
    width: 100%;
    border-top: 1px solid #b2cae9
}

.fsp_reservation_event_others_list_item {
    padding: 4.2666666667vw 0;
    width: 100%;
    border-bottom: 1px solid #b2cae9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_others_list_item {
        margin:0 0 0;
        padding: 20px 16px;
        flex-direction: row
    }
}

.fsp_reservation_event_others_list_item_date {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 2.1333333333vw;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_others_list_item_date {
        margin:0 0 0;
        width: auto;
        min-width: 186px;
        font-size: 1.125em;
        line-height: 1.8;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_reservation_event_others_list_item_date:after {
    position: absolute;
    z-index: 0;
    right: 0;
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_others_list_item_date:after {
        content:"";
        display: block;
        top: 50%;
        margin-top: -8px;
        width: 1px;
        height: 19px;
        background-color: #b2cae9
    }
}

.fsp_reservation_event_others_list_item_title {
    margin: 0;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_others_list_item_title {
        margin:0 0 0 32px;
        width: auto;
        font-size: 1.125em;
        font-weight: 700;
        font-style: normal;
        line-height: 1.8
    }
}

.fsp_reservation_event_cotion {
    margin: 0 auto 4.2666666667vw;
    padding: 8.5333333333vw 0;
    width: 83.2vw;
    background-color: rgba(255,255,255,.6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8.5333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion {
        margin:0 auto 48px;
        padding: 32px 0;
        width: 994px;
        gap: 40px
    }
}

.fsp_reservation_event_cotion_column {
    margin: 0 auto 0;
    width: 70.1333333333vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column {
        margin:0 auto 0;
        width: 930px;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start
    }
}

.fsp_reservation_event_cotion_column_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 7.2vw;
    padding-top: 5.0666666667vw;
    width: 100%;
    font-size: 1.5em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_title {
        margin:0 0 0;
        padding-top: 24px;
        width: 226px;
        font-size: 1.25em;
        line-height: 1.5
    }
}

.fsp_reservation_event_cotion_column_title:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 5.0666666667vw;
    height: 2px;
    background-color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_title:before {
        width:19px;
        height: 2px
    }
}

.fsp_reservation_event_cotion_column_content {
    width: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_content {
        margin-top:24px;
        width: 704px
    }
}

.fsp_reservation_event_cotion_column_content_line {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 0;
    padding-left: 1.5em;
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_content_line {
        margin:0 0 0;
        font-size: 1em;
        line-height: 2;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_reservation_event_cotion_column_content_line span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_reservation_event_cotion_column_content_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 3.7333333333vw;
    width: 100%;
    font-size: 1.5em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_content_title {
        margin:0 0 24px;
        font-size: 1.25em;
        line-height: 1
    }
}

.fsp_reservation_event_cotion_column_content_table {
    margin: 0 0 4.8vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_content_table {
        margin:0 0 8px
    }
}

.fsp_reservation_event_cotion_column_content_table_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 0;
    min-width: 19.7333333333vw;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_content_table_title {
        margin:0 0 0;
        min-width: 120px;
        font-size: 1em;
        line-height: 1.5;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_reservation_event_cotion_column_content_table_title:after {
    position: absolute;
    z-index: 0;
    top: 1.1em;
    right: 0;
    content: "";
    display: block;
    margin-top: -2.5333333333vw;
    width: 1px;
    height: 5.0666666667vw;
    background-color: #b2cae9
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_content_table_title:after {
        top:.75em;
        margin-top: -9.5px;
        width: 1px;
        height: 19px;
        background-color: #b2cae9
    }
}

.fsp_reservation_event_cotion_column_content_table_content {
    margin: 0 0 0 3.2vw;
    width: auto;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_content_table_content {
        margin:0 0 0 32px;
        font-size: .9375em;
        font-weight: 500;
        font-style: normal;
        line-height: 1.5
    }
}

.fsp_reservation_event_cotion_column_content_caption {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 0;
    padding-left: 1.5em;
    width: 100%;
    font-size: .8333333333em;
    line-height: 2;
    color: #565b60;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_event_cotion_column_content_caption {
        margin:0 0 2px;
        font-size: .75em;
        line-height: 2
    }
}

.fsp_reservation_event_cotion_column_content_caption span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_reservation_analysis {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 0;
    padding: 0 0 0;
    width: 91.2vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis {
        margin:0 auto 0;
        padding: 0 0 0;
        width: 836px;
        height: auto
    }
}

.fsp_reservation_analysis_attention {
    margin: 0 auto 5.8666666667vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 1.5em;
    line-height: 1.8;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_attention {
        margin:0 auto 16px;
        font-size: 1.5em;
        line-height: 1.8;
        align-items: center;
        justify-content: center
    }
}

.fsp_reservation_analysis_attention:after,.fsp_reservation_analysis_attention:before {
    content: "";
    display: block;
    margin: 0 1.8666666667vw;
    width: 8vw;
    height: 12.8vw;
    background-image: url("/skinpatch/img/experience_img_dots.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_attention:after,.fsp_reservation_analysis_attention:before {
        margin:0 18px;
        width: 30px;
        height: 48px
    }
}

.fsp_reservation_analysis_attention:before {
    margin-left: 0;
    transform: scaleX(-1)
}

.fsp_reservation_analysis_attention:after {
    margin-right: 0
}

.fsp_reservation_analysis_bnr {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding: 1.8666666667vw;
    width: 100%;
    height: auto;
    background-color: #1e4d9e;
    border-radius: 6.4vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_bnr {
        padding:12px;
        border-radius: 24px
    }
}

.fsp_reservation_analysis_bnr:before {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%
}

@media (hover: hover) and (pointer:fine) {
    .fsp_reservation_analysis_bnr {
        transition:background-color .3s linear
    }

    .fsp_reservation_analysis_bnr:hover {
        background-color: #3373c4
    }
}

.fsp_reservation_analysis_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 86.9333333333vw;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_image {
        width:812px
    }
}

.fsp_reservation_analysis_image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.fsp_reservation_analysis_image img.m-sp {
    display: block
}

.fsp_reservation_analysis_image img.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_image img.m-sp {
        display:none
    }

    .fsp_reservation_analysis_image img.m-pc {
        display: block
    }
}

.fsp_reservation_analysis_image {
    z-index: 10
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_image {
        z-index:3
    }
}

.fsp_reservation_analysis_btn {
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    margin: 0 .8vw 1.0666666667vw 0;
    padding: .2666666667vw 0 0 0;
    width: 29.0666666667vw;
    height: 7.7333333333vw;
    background-color: #1e4d9e;
    border-radius: 4.2666666667vw 0 4.2666666667vw 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_btn {
        margin:0 12px 12px 0;
        padding: 8px 0 0 0;
        width: 139px;
        height: 40px;
        border-radius: 24px 0 0 0
    }
}

.fsp_reservation_analysis_btn>.m-btn_text {
    margin: 0 0 0 auto;
    font-size: 1.1666666667em;
    line-height: 1;
    color: #fff;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_btn>.m-btn_text {
        font-size:1em
    }
}

.fsp_reservation_analysis_btn>.m-circle-small {
    margin: 0 2.6666666667vw 0 2.1333333333vw;
    width: 3.7333333333vw;
    height: 3.7333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_btn>.m-circle-small {
        margin:0 12px 0 8px;
        width: 28px;
        height: 28px
    }
}

.fsp_reservation_analysis_btn>.m-circle-small:before {
    margin: -1.8666666667vw 0 0 -1.8666666667vw;
    width: 3.7333333333vw;
    height: 3.7333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_btn>.m-circle-small:before {
        margin:-14px 0 0 -14px;
        width: 28px;
        height: 28px
    }
}

.fsp_reservation_analysis_btn>.m-circle-small .m-icon {
    width: 1.0666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_reservation_analysis_btn>.m-circle-small .m-icon {
        width:9px
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_reservation_analysis_bnr .fsp_reservation_analysis_btn {
        transition:background-color .3s linear
    }

    .fsp_reservation_analysis_bnr:hover .fsp_reservation_analysis_btn {
        background-color: #3373c4
    }
}

.fsp_researcher {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto;
    background-color: #f2f6fb
}

.fsp_researcher_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0 0 21.3333333333vw;
    width: 100%;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_inner {
        padding:0 0 80px;
        width: 1148px
    }
}

.fsp_researcher_inner {
    transition: opacity .3s,transform .8s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(21.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_inner {
        transform:translateY(120px)
    }
}

.fsp_researcher_inner.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_researcher_head {
    padding: 10.6666666667vw 0 6.4vw;
    margin: 0 auto;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_head {
        padding:64px 0 40px 0;
        margin: 0;
        width: 100%
    }
}

.fsp_researcher_head_code {
    margin-bottom: 2.1333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_head_code {
        margin-bottom:4px
    }
}

.fsp_researcher_head_code.m-code {
    color: rgba(30,77,158,.7)
}

.fsp_researcher_head_title {
    font-size: 2em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_head_title {
        font-size:2.25em;
        letter-spacing: .1em
    }
}

.fsp_researcher_body {
    width: 100%
}

.fsp_researcher_body_container {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_container {
        flex-direction:row;
        align-items: flex-start;
        justify-content: center
    }
}

.fsp_researcher_body_profile {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 3.7333333333vw;
    padding: 0 0 10.6666666667vw;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_profile {
        margin:0 auto 0 0;
        padding: 0 0 0;
        width: 416px
    }
}

.fsp_researcher_body_profile_image {
    width: 59.7333333333vw;
    border-radius: 4.2666666667vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_profile_image {
        margin:0 0 30px;
        width: 312px;
        border-radius: 16px
    }
}

.fsp_researcher_body_profile_image img {
    width: 100%;
    height: auto;
    display: block
}

.fsp_researcher_body_profile_info {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    padding: 3.2vw 4.2666666667vw 3.2vw 8.5333333333vw;
    width: 176px;
    height: auto;
    border-radius: 2.6666666667vw;
    background-color: #fff
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_profile_info {
        position:relative;
        right: auto;
        bottom: auto;
        padding: 0 0 0 20px;
        width: 100%;
        height: auto;
        border-radius: 0;
        background-color: transparent
    }
}

.fsp_researcher_body_profile_info_position {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 1.6vw;
    font-size: .8333333333em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_profile_info_position {
        margin:0 0 18px;
        font-size: 1.125em
    }
}

.fsp_researcher_body_profile_info_position:before {
    position: absolute;
    z-index: 1;
    top: .85em;
    left: 0;
    margin: -1.0666666667vw 0 0 -4.2666666667vw;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-radius: 50%;
    background-color: #1e4d9e;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_profile_info_position:before {
        top:.85em;
        margin: -6px 0 0 -20px;
        width: 12px;
        height: 12px
    }
}

.fsp_researcher_body_profile_info_name br.m-sp {
    display: inline
}

.fsp_researcher_body_profile_info_name br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_profile_info_name br.m-sp {
        display:none
    }

    .fsp_researcher_body_profile_info_name br.m-pc {
        display: inline
    }
}

.fsp_researcher_body_profile_info_name_ja {
    font-size: 1.3333333333em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_profile_info_name_ja {
        font-size:1.5em
    }
}

.fsp_researcher_body_profile_info_name_en {
    font-size: .8333333333em;
    font-weight: 500;
    font-style: normal;
    color: #80a7da
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_profile_info_name_en {
        padding-left:1em;
        font-size: 1em
    }
}

.fsp_researcher_body_message {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 83.2vw;
    overflow: hidden;
    flex-shrink: 0
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message {
        width:730px
    }
}

.fsp_researcher_body_message {
    height: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message {
        height:auto
    }
}

.fsp_researcher_body_message.is-open {
    height: auto
}

.fsp_researcher_body_message br.m-sp {
    display: inline
}

.fsp_researcher_body_message br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message br.m-sp {
        display:none
    }

    .fsp_researcher_body_message br.m-pc {
        display: inline
    }
}

.fsp_researcher_body_message_catch {
    margin: 0 0 6.4vw;
    font-size: 1.6666666667em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    line-height: 1.8
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message_catch {
        margin:0 0 32px;
        font-size: 1.5em
    }
}

.fsp_researcher_body_message_catch {
    transition: opacity .6s 0s linear;
    opacity: 0
}

.fsp_researcher_body_message_catch.is-act {
    opacity: 1
}

.fsp_researcher_body_message_text {
    margin: 0 0 0;
    font-size: 1.1666666667em;
    color: #3373c4;
    font-weight: 700;
    font-style: normal;
    line-height: 2
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message_text {
        margin:0 0 0;
        font-size: 1.25em
    }
}

.fsp_researcher_body_message_text {
    transition: opacity .6s 0s linear;
    opacity: 0
}

.fsp_researcher_body_message_text.is-act {
    opacity: 1
}

.fsp_researcher_body_message_more {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 53.3333333333vw;
    background-image: linear-gradient(to bottom,rgba(242,246,251,0),#f2f6fb);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message_more {
        height:200px
    }
}

.fsp_researcher_body_message_more_btn.m-btn--primary {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -22.4vw;
    padding: 0;
    width: 44.8vw;
    height: 12.8vw
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message_more_btn.m-btn--primary {
        margin:0 0 0 -84px;
        width: 168px;
        height: 48px
    }
}

.fsp_researcher_body_message_more_btn.m-btn--primary>.m-btn_text {
    margin: 0 auto;
    padding-left: 1em
}

.fsp_researcher_body_message_more_btn.m-btn--primary>.m-circle-small {
    margin-right: 2.1333333333vw;
    margin-left: 0;
    width: 8.5333333333vw;
    height: 8.5333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message_more_btn.m-btn--primary>.m-circle-small {
        width:32px;
        height: 32px
    }
}

.fsp_researcher_body_message_more_btn.m-btn--primary>.m-circle-small:before {
    margin: -4.2666666667vw 0 0 -4.2666666667vw;
    width: 8.5333333333vw;
    height: 8.5333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message_more_btn.m-btn--primary>.m-circle-small:before {
        margin:-16px 0 0 -16px;
        width: 32px;
        height: 32px
    }
}

@media screen and (min-width: 769px),print {
    .fsp_researcher_body_message_more {
        display:none
    }
}

.fsp_researcher_body_message.is-open .fsp_researcher_body_message_more {
    display: none
}

.fsp_movie {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto;
    background-color: #f2f6fb
}

.fsp_movie:before {
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10.6666666667vw;
    background-color: #fff;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_movie:before {
        display:none
    }
}

.fsp_movie_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0 0 5.3333333333vw;
    width: 100%;
    background-color: #1e4d9e;
    border-radius: 10.6666666667vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_movie_inner {
        padding:0 0 80px;
        border-radius: 64px 64px 0 0
    }
}

.fsp_movie_inner {
    transition: opacity .3s,transform .8s cubic-bezier(.165, .84, .44, 1);
    opacity: 0;
    transform: translateY(21.3333333333vw)
}

@media screen and (min-width: 769px),print {
    .fsp_movie_inner {
        transform:translateY(120px)
    }
}

.fsp_movie_inner.is-act {
    opacity: 1;
    transform: translateY(0)
}

.fsp_movie_head {
    padding: 10.6666666667vw 0 9.0666666667vw;
    margin: 0 auto;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_head {
        padding:64px 0 46px;
        width: 1080px
    }
}

.fsp_movie_head_code {
    margin-bottom: 2.1333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_head_code {
        margin-bottom:4px
    }
}

.fsp_movie_head_title {
    font-size: 2em;
    color: #fff;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_movie_head_title {
        font-size:2.25em;
        letter-spacing: .1em
    }
}

.fsp_movie_body {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_movie_body--tvcm {
    margin: 0 auto 10.6666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--tvcm {
        margin:0 auto 160px
    }
}

.fsp_movie_body--specialmovie {
    margin: 0 auto 0
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie {
        margin:0 auto 40px
    }
}

.fsp_movie_body_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 4.2666666667vw;
    padding-left: 4.2666666667vw;
    width: 83.2vw;
    font-size: 1.3333333333em;
    color: #fff;
    line-height: 1;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_title {
        margin:0 auto 24px;
        padding-left: 20px;
        width: 878px;
        font-size: 1.125em
    }
}

.fsp_movie_body_title:before {
    position: absolute;
    z-index: 0;
    top: .5em;
    left: 0;
    margin-top: -.8vw;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    background-color: #fff;
    border-radius: 50%;
    content: "";
    display: block
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_title:before {
        top:.5em;
        margin-top: -5px;
        width: 12px;
        height: 12px
    }
}

.fsp_movie_body_content {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%
}

.fsp_movie_body_container {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding: 0 8.5333333333vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6.4vw;
    transform: translateX(calc(var(--index,0) * -89.6vw))
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_container {
        padding:0 calc(50% - 439px);
        gap: 56px;
        transform: translateX(calc(var(--index,0) * -934px))
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_container {
    padding: 0 17.8666666667vw;
    gap: 8.5333333333vw;
    transform: translateX(calc(var(--index,0) * -68.2666666667vw))
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_container {
        padding:0 calc(50% - 200px);
        gap: 56px;
        transform: translateX(calc(var(--index,0) * -376px))
    }
}

.fsp_movie_body_item {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    flex-shrink: 0
}

.fsp_movie_body_item_thumb {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 83.2vw;
    height: 46.9333333333vw;
    border-radius: 4.8vw;
    overflow: hidden;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_thumb {
        width:878px;
        height: 494px;
        border-radius: 64px
    }
}

.fsp_movie_body_item_thumb:before {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%
}

.fsp_movie_body_item_thumb_img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    pointer-events: none
}

.fsp_movie_body_item_thumb_ui {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_thumb_ui {
        left:50%;
        margin-left: -406px;
        margin-bottom: 22px;
        width: 812px;
        height: 62px;
        background-color: rgba(255,255,255,.8);
        border-radius: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden
    }
}

.fsp_movie_body_item_thumb_ui_title {
    display: none;
    font-size: 1.3333333333em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_thumb_ui_title {
        position:relative;
        z-index: 0;
        top: 0;
        left: 0;
        margin-right: auto;
        margin-left: 12px;
        font-size: 1.125em;
        display: block
    }
}

.fsp_movie_body_item_thumb_ui_btn {
    position: absolute;
    z-index: 0;
    right: 2.6666666667vw;
    bottom: 2.6666666667vw;
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #b2cae9;
    background-color: #fff;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_thumb_ui_btn {
        position:relative;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        margin-right: 12px;
        margin-left: auto;
        width: 100px;
        height: 42px;
        justify-content: flex-start;
        border-radius: 80px
    }
}

.fsp_movie_body_item_thumb_ui_btn>.m-icon {
    margin-left: .8vw;
    width: 2.4vw;
    height: 2.4vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_thumb_ui_btn>.m-icon {
        margin-left:16px;
        margin-right: 16px;
        width: 9px;
        height: 9px
    }
}

.fsp_movie_body_item_thumb_ui_btn>.m-btn_text {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_thumb_ui_btn>.m-btn_text {
        display:inline;
        color: #1e4d9e;
        font-weight: 700;
        font-style: normal;
        font-size: 1em;
        letter-spacing: .1em;
        margin-bottom: .1em
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_movie_body_item_thumb .m-btn {
        transition:background-color .3s linear
    }

    .fsp_movie_body_item_thumb:hover .m-btn {
        background-color: #b2cae9
    }

    .fsp_movie_body_item_thumb_img {
        transform: scale(1) rotate(.000001deg);
        transition: transform .8s cubic-bezier(.165, .84, .44, 1)
    }

    .fsp_movie_body_item_thumb:hover .fsp_movie_body_item_thumb_img {
        transform: scale(1.04) rotate(.000001deg);
        transition: transform .6s cubic-bezier(.39, .575, .565, 1)
    }
}

.fsp_movie_body_item_thumb_ui {
    opacity: 0;
    transform: translateY(20%);
    transition: opacity .3s cubic-bezier(.165, .84, .44, 1),transform .5s cubic-bezier(.165, .84, .44, 1)
}

.fsp_movie_body_item.is-active .fsp_movie_body_item_thumb_ui {
    opacity: 1;
    transform: translateY(0)
}

.fsp_movie_body_item_info {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding: 5.3333333333vw 0;
    width: 83.2vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_info {
        padding:34px 0 0;
        width: 878px
    }
}

.fsp_movie_body_item_info_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin-bottom: 0;
    font-size: 1.3333333333em;
    color: #fff;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_info_title {
        padding-left:0;
        margin-bottom: 0;
        font-size: 1.125em;
        display: none
    }
}

.fsp_movie_body_item_info_text {
    margin-top: 4.2666666667vw;
    font-size: 1.1666666667em;
    color: #fff;
    line-height: 2;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_item_info_text {
        margin-top:0;
        line-height: 1.8;
        font-size: 1.125em
    }
}

.fsp_movie_body_item_info {
    opacity: 0;
    transition: opacity .3s cubic-bezier(.165, .84, .44, 1)
}

.fsp_movie_body_item.is-active .fsp_movie_body_item_info {
    opacity: 1
}

.fsp_movie_body--specialmovie .fsp_movie_body_item {
    width: 59.7333333333vw;
    min-height: 113.8666666667vw;
    transition: all .3s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item {
        width:320px;
        min-height: 712px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_item.is-active {
    width: 64vw;
    transition: all .3s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item.is-active {
        width:400px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_item.is-comingsoon {
    margin-bottom: 16vw;
    pointer-events: none
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item.is-comingsoon {
        margin-bottom:0
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_item_thumb {
    margin-top: 3.7333333333vw;
    margin-bottom: 3.7333333333vw;
    margin-left: 0;
    width: 59.7333333333vw;
    height: 106.4vw;
    border-radius: 4.2666666667vw;
    transition: all .3s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item_thumb {
        margin-top:71px;
        margin-bottom: 71px;
        margin-left: 0;
        width: 320px;
        height: 570px;
        border-radius: 16px
    }
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item_thumb_ui {
        margin-left:-182px;
        width: 364px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_item.is-active .fsp_movie_body_item_thumb {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    width: 64vw;
    height: 113.8666666667vw;
    border-radius: 6.4vw;
    transition: all .3s cubic-bezier(.165, .84, .44, 1)
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item.is-active .fsp_movie_body_item_thumb {
        margin-top:0;
        margin-bottom: 0;
        margin-left: 0;
        width: 400px;
        height: 711px;
        border-radius: 24px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_item.is-comingsoon .fsp_movie_body_item_thumb {
    border: 1px solid #fff;
    background-image: url(/skinpatch/img/movie_img_cs_sp.svg);
    background-size: 43.952vw 20.7253333333vw;
    background-position: center;
    background-repeat: no-repeat
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item.is-comingsoon .fsp_movie_body_item_thumb {
        background-image:url(/skinpatch/img/movie_img_cs_pc.svg);
        background-size: 164.82px 88.44px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_item.is-comingsoon.is-active .fsp_movie_body_item_thumb {
    background-size: 43.952vw 20.7253333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item.is-comingsoon.is-active .fsp_movie_body_item_thumb {
        background-size:246px 132px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_item_player {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s linear
}

.fsp_movie_body--specialmovie .fsp_movie_body_item_player .ytplayer,.fsp_movie_body--specialmovie .fsp_movie_body_item_player iframe {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.fsp_movie_body--specialmovie .fsp_movie_body_item.is-playing .fsp_movie_body_item_player {
    visibility: visible;
    pointer-events: auto;
    opacity: 1
}

.fsp_movie_body--specialmovie .fsp_movie_body_item_info {
    width: 59.7333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_item_info {
        display:none
    }
}

.fsp_movie_body_ui {
    position: absolute;
    z-index: 10;
    top: 0;
    left: auto;
    margin-top: 64px
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_ui {
        margin-top:205px
    }
}

.fsp_movie_body_ui {
    transition: opacity .1s
}

.fsp_movie_body_ui.is-disabled {
    opacity: 0;
    pointer-events: none
}

.fsp_movie_body_ui--next {
    right: 50%;
    margin-right: -47.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_ui--next {
        margin-right:-539px
    }
}

.fsp_movie_body_ui--prev {
    left: 50%;
    margin-left: -47.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body_ui--prev {
        margin-left:-539px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_ui {
    margin-top: 190px
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_ui {
        margin-top:320px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_ui--next {
    margin-right: -47.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_ui--next {
        margin-right:-294px
    }
}

.fsp_movie_body--specialmovie .fsp_movie_body_ui--prev {
    margin-left: -47.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_movie_body--specialmovie .fsp_movie_body_ui--prev {
        margin-left:-294px
    }
}

.fsp_banner {
    position: relative;
    z-index: 5;
    top: 0;
    left: 0;
    margin: 0 auto
}

.fsp_banner_inner {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 64px 0 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    gap: 6.4vw
}

@media screen and (min-width: 769px),print {
    .fsp_banner_inner {
        padding:80px 0 40px;
        width: 1088px;
        gap: 40px
    }
}

.fsp_banner_item {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 91.2vw;
    height: auto;
    border-radius: 6.4vw;
    overflow: hidden;
    background-color: #f2f6fb
}

@media screen and (min-width: 769px),print {
    .fsp_banner_item {
        width:1088px;
        border-radius: 40px
    }
}

.fsp_banner_item_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%
}

.fsp_banner_item_image img {
    width: 100%;
    height: auto;
    display: block
}

.fsp_banner_item_image img.m-sp {
    display: block
}

.fsp_banner_item_image img.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_banner_item_image img.m-sp {
        display:none
    }

    .fsp_banner_item_image img.m-pc {
        display: block
    }
}

.fsp_banner_item_btn {
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: 0;
    width: 42.4vw;
    height: 8.5333333333vw;
    border-radius: 6.4vw 0 6.4vw 0;
    background-color: #1e4d9e;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    transition: background-color .3s ease
}

@media screen and (min-width: 769px),print {
    .fsp_banner_item_btn {
        width:210px;
        height: 56px;
        border-radius: 40px 0 40px 0
    }
}

.fsp_banner_item_btn_text {
    margin-right: 2.1333333333vw;
    font-size: 3.7333333333vw;
    color: #fff;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_banner_item_btn_text {
        margin-right:8px;
        font-size: 16px
    }
}

.fsp_banner_item_btn .m-circle-small {
    margin-right: 4.8vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_banner_item_btn .m-circle-small {
        margin-right:32px;
        width: 32px;
        height: 32px
    }
}

.fsp_banner_item_btn .m-circle-small:before {
    margin: -2.6666666667vw 0 0 -2.6666666667vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_banner_item_btn .m-circle-small:before {
        margin:-16px 0 0 -16px;
        width: 32px;
        height: 32px
    }
}

.fsp_banner_item_btn_icon.m-icon--arw {
    width: 1.8666666667vw;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_banner_item_btn_icon.m-icon--arw {
        width:10px;
        height: auto
    }
}

@media (hover: hover) and (pointer:fine) {
    .fsp_banner_item:hover .fsp_banner_item_btn {
        background-color:#80a7da
    }
}

.fsp_banner_cotion {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 0;
    width: 91.2vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .5333333333vw
}

.fsp_banner_cotion.m-sp {
    display: flex
}

.fsp_banner_cotion.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_banner_cotion.m-sp {
        display:none
    }

    .fsp_banner_cotion.m-pc {
        display: flex
    }
}

@media screen and (min-width: 769px),print {
    .fsp_banner_cotion {
        margin:0 auto 0;
        width: 1088px;
        gap: 2px
    }
}

.fsp_banner_cotion_text {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding-left: 2em;
    color: #fff;
    font-size: 1.8666666667vw;
    line-height: 1.5;
    color: #3373c4;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_banner_cotion_text {
        font-size:8px;
        line-height: 1.5
    }
}

.fsp_banner_cotion_text span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_modal-howto_area {
    padding: 0 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_area {
        padding:80px 0
    }
}

.fsp_modal-howto_area br.m-sp {
    display: inline
}

.fsp_modal-howto_area br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_area br.m-sp {
        display:none
    }

    .fsp_modal-howto_area br.m-pc {
        display: inline
    }
}

.fsp_modal-howto_content {
    margin: 0 auto;
    width: 100%;
    border-radius: 10.6666666667vw 10.6666666667vw 0 0;
    overflow: hidden;
    background-color: #fff
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_content {
        width:1080px;
        border-radius: 64px
    }
}

.fsp_modal-howto_head {
    width: 100%;
    height: auto;
    aspect-ratio: 750/806;
    background-image: url("/skinpatch/img/modal-howto_img_header_sp.webp");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_head {
        height:auto;
        aspect-ratio: 2156/872;
        background-image: url("/skinpatch/img/modal-howto_img_header_pc.webp")
    }
}

.fsp_modal-howto_head_title {
    margin: 8.5333333333vw 0 8vw 8.5333333333vw;
    width: 100%;
    font-size: 2em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_head_title {
        margin:76px 0 45px 95px;
        font-size: 2.25em;
        line-height: 1.5
    }
}

.fsp_modal-howto_head_catch {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 5.8666666667vw 8.5333333333vw;
    padding-top: 5.0666666667vw;
    width: 100%;
    font-size: 1.5em;
    line-height: 1.5;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_head_catch {
        margin:0 0 22px 95px;
        padding-top: 30px;
        font-size: 1.5em;
        line-height: 1.5
    }
}

.fsp_modal-howto_head_catch:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 5.0666666667vw;
    height: 2px;
    background-color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_head_catch:before {
        width:36px;
        height: 2px
    }
}

.fsp_modal-howto_head_text {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 0 4.5333333333vw 8.5333333333vw;
    width: auto;
    font-size: 1.1666666667em;
    line-height: 1.5;
    color: #3373c4;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_head_text {
        margin:0 0 19px 95px;
        font-size: 1.125em;
        line-height: 1.5;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_modal-howto_head_cotion {
    margin: 0 0 0 8.5333333333vw;
    width: 73.0666666667vw;
    height: 21.3333333333vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 21.3333333333vw;
    overflow: hidden;
    border: 1px solid #ff1c77;
    gap: 2.6666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_head_cotion {
        margin:0 0 0 95px;
        width: 432px;
        height: 64px;
        border-radius: 80px;
        gap: 10px
    }
}

.fsp_modal-howto_head_cotion_text {
    width: auto;
    font-size: 1.3333333333em;
    line-height: 1.5;
    color: #ff1c77;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_head_cotion_text {
        font-size:1.125em;
        line-height: 1.5;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_modal-howto_body {
    padding: 6.4vw 0 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body {
        padding:40px 0 0
    }
}

.fsp_modal-howto_body_intro {
    margin: 0 auto 6.4vw;
    padding: 6.4vw 0;
    width: 83.2vw;
    border-radius: 6.4vw;
    background-color: #f7fafd;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_intro {
        margin:0 auto 40px;
        padding: 24px 0;
        width: 992px;
        border-radius: 24px
    }
}

.fsp_modal-howto_body_intro_text {
    margin: 0 auto 4.5333333333vw;
    width: 66.6666666667vw;
    font-size: 1.3333333333em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_intro_text {
        margin:0 auto 16px;
        width: 950px;
        font-size: 1.5em;
        line-height: 2;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_modal-howto_body_intro_line {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 0;
    padding-left: 1.5em;
    width: 66.6666666667vw;
    font-size: 1.1666666667em;
    line-height: 2;
    color: #3373c4;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_intro_line {
        margin:0 auto 0;
        width: 950px;
        font-size: 1.125em;
        line-height: 1.8;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_modal-howto_body_intro_line span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_modal-howto_body_step {
    margin: 0 auto 12.8vw;
    width: 83.2vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step {
        margin:0 auto 56px;
        width: 992px;
        flex-direction: row;
        gap: 0
    }
}

.fsp_modal-howto_body_step_item {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item {
        margin:0 auto;
        width: 264px;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start
    }
}

.fsp_modal-howto_body_step_item br.m-sp {
    display: inline
}

.fsp_modal-howto_body_step_item br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item br.m-sp {
        display:none
    }

    .fsp_modal-howto_body_step_item br.m-pc {
        display: inline
    }
}

.fsp_modal-howto_body_step_item {
    padding-bottom: 9.0666666667vw;
    margin-bottom: 6.4vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item {
        padding-bottom:0;
        margin-bottom: 0
    }
}

.fsp_modal-howto_body_step_item:last-child {
    padding-bottom: 0;
    margin-bottom: 0
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item:last-child {
        padding-bottom:0;
        margin-bottom: 0
    }
}

.fsp_modal-howto_body_step_item:after {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.9333333333vw;
    content: "";
    display: block;
    background-image: url("/skinpatch/img/flow_img_hr.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item:after {
        display:none
    }
}

.fsp_modal-howto_body_step_item:last-child:after {
    display: none
}

.fsp_modal-howto_body_step_item_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 29.3333333333vw;
    height: 29.3333333333vw;
    flex-shrink: 0;
    border-radius: 4.2666666667vw;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item_image {
        margin:0 0 24px;
        width: 264px;
        height: 264px;
        border-radius: 24px
    }
}

.fsp_modal-howto_body_step_item_image img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.fsp_modal-howto_body_step_item_image img.m-sp {
    display: block
}

.fsp_modal-howto_body_step_item_image img.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item_image img.m-sp {
        display:none
    }

    .fsp_modal-howto_body_step_item_image img.m-pc {
        display: block
    }
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item_image img {
        width:100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.fsp_modal-howto_body_step_item_image_num {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    padding-bottom: .2em;
    padding-left: .1em;
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    color: #fff;
    font-size: 1.3333333333em;
    line-height: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    font-style: normal;
    border-radius: 0 0 4.2666666667vw 0;
    background-color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item_image_num {
        width:48px;
        height: 48px;
        font-size: 1.5em;
        border-radius: 0 0 24px 0;
        display: flex
    }
}

.fsp_modal-howto_body_step_item_content {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 49.6vw;
    height: auto;
    flex-shrink: 0
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item_content {
        width:100%;
        height: auto
    }
}

.fsp_modal-howto_body_step_item_title {
    margin-bottom: 2.4vw;
    font-size: 1.5em;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item_title {
        margin-bottom:12px;
        font-size: 1.5em;
        font-weight: 700;
        font-style: normal;
        line-height: 2
    }
}

.fsp_modal-howto_body_step_item_text {
    font-size: 1.1666666667em;
    color: #3373c4;
    font-weight: 500;
    font-style: normal;
    line-height: 1.8
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item_text {
        color:#1e4d9e;
        font-size: 1em;
        font-weight: 500;
        font-style: normal;
        line-height: 2
    }
}

.fsp_modal-howto_body_step_item_cotion {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin-top: 2.4vw;
    padding-left: 1.5em;
    font-size: .8333333333em;
    color: #1e4d9e;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5
}

@media screen and (min-width: 769px),print {
    .fsp_modal-howto_body_step_item_cotion {
        margin-top:25px;
        font-size: 1em;
        line-height: 1.5
    }
}

.fsp_modal-howto_body_step_item_cotion span {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0
}

.fsp_modal-reservation_area {
    margin: auto 0;
    padding: 8vw 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_area {
        padding:60px 0
    }
}

.fsp_modal-reservation_area br.m-sp {
    display: inline
}

.fsp_modal-reservation_area br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_area br.m-sp {
        display:none
    }

    .fsp_modal-reservation_area br.m-pc {
        display: inline
    }
}

.fsp_modal-reservation_content {
    margin: 0 auto;
    width: 83.2vw;
    border-radius: 10.6666666667vw;
    overflow: hidden;
    background-color: #fff
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content {
        width:880px;
        border-radius: 24px
    }
}

.fsp_modal-reservation_content_name {
    margin: 8.5333333333vw auto 3.2vw;
    width: 69.0666666667vw;
    font-size: 1.6666666667em;
    line-height: 1.8;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_name {
        margin:32px auto 32px;
        width: 816px;
        font-size: 1.5em;
        line-height: 1.5
    }
}

.fsp_modal-reservation_content_data {
    margin: 0 auto 3.2vw;
    width: 69.0666666667vw;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data {
        margin:0 auto 32px;
        width: 816px;
        flex-direction: column
    }
}

.fsp_modal-reservation_content_data_info {
    width: 100%
}

.fsp_modal-reservation_content_data_item {
    margin: 0 auto 5.3333333333vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data_item {
        flex-direction:row;
        margin: 0 auto 16px
    }
}

.fsp_modal-reservation_content_data_item.hide {
    display: none
}

.fsp_modal-reservation_content_data_item_label {
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 1.6;
    color: #3373c4;
    font-weight: 700;
    font-style: normal;
    flex-shrink: 0
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data_item_label {
        width:auto;
        min-width: 112px;
        font-size: 1em;
        line-height: 1.5
    }
}

.fsp_modal-reservation_content_data_item_value {
    width: 100%;
    font-size: 1.1666666667em;
    line-height: 1.6;
    color: #3373c4;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data_item_value {
        width:auto;
        font-size: 1em;
        line-height: 1.5;
        font-weight: 700;
        font-style: normal;
        flex-grow: 1
    }
}

.fsp_modal-reservation_content_data_item_value iframe {
    margin: 4.2666666667vw auto 0;
    width: 100%;
    height: 38.4vw;
    display: block;
    background-color: #f2f6fb
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data_item_value iframe {
        margin:16px auto 0;
        height: 240px
    }
}

.fsp_modal-reservation_content_data_links {
    width: 100%
}

.fsp_modal-reservation_content_data_btn {
    margin: 0 auto 3.2vw;
    padding: 0;
    width: 64.8vw;
    height: 14.9333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data_btn {
        margin:16px auto 0;
        padding: 0;
        width: 364px;
        height: 64px
    }
}

.fsp_modal-reservation_content_data_btn.hide {
    display: none
}

.fsp_modal-reservation_content_data_btn.m-btn--primary>.m-btn_text {
    text-align: center;
    line-height: 1.5;
    font-size: 1.1666666667em
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data_btn.m-btn--primary>.m-btn_text {
        font-size:1.125em;
        line-height: 1.8
    }
}

.fsp_modal-reservation_content_data_cotion {
    margin: 0 auto 7.2vw;
    width: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data_cotion {
        margin:16px auto 0;
        text-align: center
    }
}

.fsp_modal-reservation_content_data_cotion {
    display: none
}

.fsp_modal-reservation_content_data_cotion.is-show {
    display: block
}

.fsp_modal-reservation_content_data_cotion p {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    text-align: center;
    /* padding-left: 1.5em; */
    font-size: 2.9vw;
    line-height: 1.5;
    color: #3373c4;
    font-weight: bold;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-reservation_content_data_cotion p {
        font-size: 1em;
        font-weight: bold;
        line-height: 2;
        display: inline-block
    }
}

.fsp_modal-reservation_content_data_cotion p span {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0
}

.fsp_modal-skin-analysis_area {
    padding: 0 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_area {
        padding:140px 0 80px
    }
}

.fsp_modal-skin-analysis_area br.m-sp {
    display: inline
}

.fsp_modal-skin-analysis_area br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_area br.m-sp {
        display:none
    }

    .fsp_modal-skin-analysis_area br.m-pc {
        display: inline
    }
}

.fsp_modal-skin-analysis_content {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    min-height: 100svh;
    border-radius: 10.6666666667vw 10.6666666667vw 0 0;
    overflow: visible;
    background-color: #fff
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_content {
        width:880px;
        min-height: auto;
        border-radius: 24px
    }
}

.fsp_modal-skin-analysis_content:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 62.9333333333vw;
    background-color: #f2f6fb;
    content: "";
    display: block;
    border-radius: 10.6666666667vw 10.6666666667vw 0 0
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_content:before {
        height:236px;
        border-radius: 24px 24px 0 0
    }
}

.fsp_modal-skin-analysis_head {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 62.9333333333vw;
    background-image: url("/skinpatch/img/modal-skin_analysis_bg_sp.webp");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_head {
        margin-top:-62px;
        width: 100%;
        height: 298px;
        background-image: url("/skinpatch/img/modal-skin_analysis_bg_pc.webp")
    }
}

.fsp_modal-skin-analysis_body {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    padding: 72.2666666667vw 0 0;
    margin: 0 auto;
    width: 91.2vw;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body {
        padding:276px 0 0;
        width: 610px
    }
}

.fsp_modal-skin-analysis_body br.m-sp {
    display: inline
}

.fsp_modal-skin-analysis_body br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body br.m-sp {
        display:none
    }

    .fsp_modal-skin-analysis_body br.m-pc {
        display: inline
    }
}

.fsp_modal-skin-analysis_body_intro {
    width: 100%;
    font-size: 1.3333333333em;
    line-height: 2;
    color: #000;
    font-weight: 500;
    font-style: normal;
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_intro {
        font-size:1.125em;
        line-height: 2
    }
}

.fsp_modal-skin-analysis_body_intro--1 {
    margin: 0 0 4.2666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_intro--1 {
        margin:0 0 16px
    }
}

.fsp_modal-skin-analysis_body_intro--2 {
    margin: 0 0 8.5333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_intro--2 {
        margin:0 0 24px
    }
}

.fsp_modal-skin-analysis_body_pict {
    margin: 0 auto 6.4vw;
    width: 87.4666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_pict {
        margin:0 auto 30px;
        width: 444px
    }
}

.fsp_modal-skin-analysis_body_pict img {
    width: 100%;
    height: auto;
    display: block
}

.fsp_modal-skin-analysis_body_pict img.m-sp {
    display: block
}

.fsp_modal-skin-analysis_body_pict img.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_pict img.m-sp {
        display:none
    }

    .fsp_modal-skin-analysis_body_pict img.m-pc {
        display: block
    }
}

.fsp_modal-skin-analysis_body_getapp {
    margin: 0 auto 0;
    padding: 0 0 10.6666666667vw;
    width: 100%;
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_getapp {
        margin:0 auto 0;
        padding: 0 0 50px;
        width: 424px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px
    }
}

.fsp_modal-skin-analysis_body_getapp_title {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto 4.2666666667vw;
    width: auto;
    font-size: 1em;
    line-height: 2;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    display: inline-block
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_getapp_title {
        margin:0 0 0;
        font-size: 1em;
        line-height: 2;
        text-align: left
    }
}

.fsp_modal-skin-analysis_body_getapp_title:after,.fsp_modal-skin-analysis_body_getapp_title:before {
    position: absolute;
    bottom: 0;
    content: "";
    display: inline-block;
    margin: 0 2.1333333333vw 1.0666666667vw;
    width: 1px;
    height: 8vw;
    background-color: #1e4d9e;
    transform-origin: center bottom
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_getapp_title:after,.fsp_modal-skin-analysis_body_getapp_title:before {
        position:relative;
        margin: 0 8px;
        width: 1px;
        height: 15px;
        display: none
    }
}

.fsp_modal-skin-analysis_body_getapp_title:before {
    left: 0;
    transform: rotate(-45deg)
}

.fsp_modal-skin-analysis_body_getapp_title:after {
    right: 0;
    transform: rotate(45deg)
}

.fsp_modal-skin-analysis_body_getapp_qr {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_getapp_qr {
        margin:0 12px 0 auto;
        width: 119px;
        display: block
    }
}

.fsp_modal-skin-analysis_body_getapp_qr img {
    width: 100%;
    height: auto;
    display: block
}

.fsp_modal-skin-analysis_body_getapp_apps {
    margin: 0 auto 0;
    width: 83.2vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

@media screen and (min-width: 769px),print {
    .fsp_modal-skin-analysis_body_getapp_apps {
        display:none
    }
}

.fsp_modal-skin-analysis_body_getapp_apps_apple {
    width: auto;
    height: 13.3333333333vw;
    display: block;
    flex-shrink: 0
}

.fsp_modal-skin-analysis_body_getapp_apps_google {
    width: auto;
    height: 13.3333333333vw;
    display: block;
    flex-shrink: 0
}

.fsp_modal-skin-analysis_body_getapp_apps img {
    width: auto;
    height: 100%;
    display: block
}

.fsp_modal-movie {
    background-color: #1e4d9e
}

.fsp_modal-movie_area {
    margin: auto;
    padding: 6.4vw 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-movie_area {
        padding:24px 0
    }
}

.fsp_modal-movie_area br.m-sp {
    display: inline
}

.fsp_modal-movie_area br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-movie_area br.m-sp {
        display:none
    }

    .fsp_modal-movie_area br.m-pc {
        display: inline
    }
}

.fsp_modal-movie_content {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #000
}

@media screen and (min-width: 769px),print {
    .fsp_modal-movie_content {
        width:1080px
    }
}

.fsp_modal-movie_content iframe {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%
}

.fsp_modal-event-attention_area {
    margin: auto 0;
    padding: 8vw 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_area {
        padding:60px 0
    }
}

.fsp_modal-event-attention_area br.m-sp {
    display: inline
}

.fsp_modal-event-attention_area br.m-pc {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_area br.m-sp {
        display:none
    }

    .fsp_modal-event-attention_area br.m-pc {
        display: inline
    }
}

.fsp_modal-event-attention_content {
    margin: 0 auto;
    width: 83.2vw;
    border-radius: 10.6666666667vw;
    overflow: hidden;
    background-color: #1e4d9e
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content {
        width:880px;
        border-radius: 40px
    }
}

.fsp_modal-event-attention_content_head {
    margin: 0 auto 6.4vw;
    padding: 6.4vw 0 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_head {
        margin:0 auto 24px;
        padding: 32px 0 0
    }
}

.fsp_modal-event-attention_content_head_name {
    margin: 0 auto 3.2vw;
    width: 66.4vw;
    height: 4.5333333333vw;
    -webkit-mask-image: url("/skinpatch/img/statement_ttl_skinpatch.svg");
    mask-image: url("/skinpatch/img/statement_ttl_skinpatch.svg");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: #fff
}

.fsp_modal-event-attention_content_head_name span {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_head_name {
        margin:0 auto 24px;
        width: 410px;
        height: 28px
    }
}

.fsp_modal-event-attention_content_head_title {
    margin: 0 auto 0;
    width: 100%;
    height: auto;
    font-size: 1.3333333333em;
    line-height: 1.5;
    color: #fff;
    font-weight: 700;
    font-style: normal;
    text-align: center
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_head_title {
        margin:0 auto 0;
        font-size: 1.5em;
        line-height: 1
    }
}

.fsp_modal-event-attention_content_body {
    margin: 0 auto 4.2666666667vw;
    width: 74.4vw;
    border-radius: 8.5333333333vw;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body {
        margin:0 auto 40px;
        width: 806px;
        border-radius: 24px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch
    }
}

.fsp_modal-event-attention_content_body_image {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 55.7333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_image {
        width:388px;
        height: 320px
    }
}

.fsp_modal-event-attention_content_body_image img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.fsp_modal-event-attention_content_body_data {
    margin: 0 auto 0;
    padding: 3.7333333333vw 0 5.3333333333vw;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_data {
        margin:0 auto 0;
        padding: 0 0 0;
        width: auto;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
}

.fsp_modal-event-attention_content_body_data_name {
    margin: 0 auto 0;
    width: 61.8666666667vw;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    color: #1e4d9e;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_data_name {
        margin:0 auto 8px;
        width: 344px;
        font-size: 1.25em;
        line-height: 1.8;
        color: #1e4d9e;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_modal-event-attention_content_body_data_date,.fsp_modal-event-attention_content_body_data_time {
    margin: 0 auto 0;
    width: 61.8666666667vw;
    height: auto;
    font-size: 1.3333333333em;
    line-height: 2;
    color: #3373c4;
    font-weight: 700;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_data_date,.fsp_modal-event-attention_content_body_data_time {
        margin:0 auto 0;
        width: 344px;
        font-size: 1.125em;
        line-height: 1.8;
        color: #1e4d9e;
        font-weight: 700;
        font-style: normal
    }
}

.fsp_modal-event-attention_content_body_data_date span,.fsp_modal-event-attention_content_body_data_time span {
    font-size: .75em
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_data_date span,.fsp_modal-event-attention_content_body_data_time span {
        font-size:.7777777778em
    }
}

.fsp_modal-event-attention_content_body_data_btn {
    margin: 3.2vw auto 0;
    padding: 0;
    width: 61.8666666667vw;
    height: 14.9333333333vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_data_btn {
        margin:16px auto 0;
        padding: 0;
        width: 344px;
        height: 64px
    }
}

.fsp_modal-event-attention_content_body_data_btn.m-btn--primary>.m-btn_text {
    text-align: center;
    line-height: 1.5;
    font-size: 1.1666666667em
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_data_btn.m-btn--primary>.m-btn_text {
        font-size:1em;
        line-height: 2
    }
}

.fsp_modal-event-attention_content_body_data_cotion {
    margin: 2.9333333333vw auto 0;
    width: 61.8666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_data_cotion {
        margin:8px auto 0;
        width: 344px
    }
}

.fsp_modal-event-attention_content_body_data_cotion {
    display: none
}

.fsp_modal-event-attention_content_body_data_cotion.is-show {
    display: block
}

.fsp_modal-event-attention_content_body_data_cotion p {
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    padding-left: 1.5em;
    font-size: .8333333333em;
    line-height: 1.5;
    color: #3373c4;
    font-weight: 500;
    font-style: normal
}

@media screen and (min-width: 769px),print {
    .fsp_modal-event-attention_content_body_data_cotion p {
        font-size:.75em;
        line-height: 2
    }
}

.fsp_modal-event-attention_content_body_data_cotion p span {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0
}

.fsp_modal-experience_area {
    padding: 0 0;
    width: 100%;
    height: auto
}

@media screen and (min-width: 769px),print {
    .fsp_modal-experience_area {
        padding:80px 0
    }
}

.fsp .fsp_fixed {
    position: sticky;
    z-index: 150;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding: 26.6666666667vw 0 0;
    pointer-events: none
}

@media screen and (min-width: 769px),print {
    .fsp .fsp_fixed {
        padding:125px 0 0
    }
}

.fsp .fsp_scroll-attention {
    position: absolute;
    z-index: 0;
    z-index: 150;
    bottom: 0;
    left: 0;
    margin: 0 0 0 5.3333333333vw;
    width: 5.3333333333vw;
    height: 33.3333333333vw;
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp .fsp_scroll-attention {
        margin:0 0 0 40px;
        width: 20px;
        height: 125px;
        display: block
    }
}

.fsp .fsp_scroll-attention {
    opacity: 0;
    transition: opacity .3s ease
}

.fsp .fsp_scroll-attention.is-show {
    opacity: 1
}

.fsp .fsp_scroll-attention_text {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: .5333333333vw 0 0 0;
    width: 4vw;
    height: 14.4vw;
    background-image: url("/skinpatch/img/scroll_attention_text.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    background-position: right 0
}

.fsp .fsp_scroll-attention_text span {
    display: none
}

@media screen and (min-width: 769px),print {
    .fsp .fsp_scroll-attention_text {
        margin:2px 0 0 0;
        width: 15px;
        height: 54px
    }
}

@keyframes scrollAttentionText {
    0% {
        transform: translateY(0);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.39,0.575,0.565,1)
    }

    9% {
        opacity: 0;
        transform: translateY(10%)
    }

    9.1% {
        opacity: 0;
        transform: translateY(-10%);
        animation-timing-function: cubic-bezier(0.47,0,0.745,0.715)
    }

    100%,18% {
        transform: translateY(0);
        opacity: 1
    }
}

.fsp .fsp_scroll-attention.is-show .fsp_scroll-attention_text {
    animation: scrollAttentionText 5s .5s linear infinite
}

.fsp .fsp_scroll-attention_line {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    margin-left: -1px;
    width: 0;
    height: 100%;
    border-left: 1px solid #80a7da
}

@media screen and (min-width: 769px),print {
    .fsp .fsp_scroll-attention_line {
        height:100%;
        border-color: #80a7da
    }
}

.fsp .fsp_scroll-attention_line:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    content: "";
    display: block;
    margin: 0 0 0 -2.5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #80a7da
}

.fsp .fsp_scroll-attention_effect {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    margin: -21.3333333333vw 0 0 -21.3333333333vw;
    width: 42.6666666667vw;
    height: 42.6666666667vw;
    background-image: url("/skinpatch/img/scroll_attention_effect.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0
}

@media screen and (min-width: 769px),print {
    .fsp .fsp_scroll-attention_effect {
        margin:-80px 0 0 -80px;
        width: 160px;
        height: 160px
    }
}

@keyframes scrollAttentionEffect {
    0% {
        transform: scale(0);
        opacity: 0;
        animation-timing-function: ease-in
    }

    15% {
        opacity: 1;
        animation-timing-function: ease-out
    }

    100%,25% {
        transform: scale(1.5);
        opacity: 0
    }
}

.fsp .fsp_scroll-attention.is-show .fsp_scroll-attention_effect {
    animation: scrollAttentionEffect 5s linear infinite
}

.fsp .fsp_btn-reservation {
    position: sticky;
    z-index: 150;
    bottom: 0;
    left: 0;
    margin: 0 0 0 20.6666666667vw;
    padding: 0;
    width: 56.5333333333vw;
    height: 14.9333333333vw;
    border: 1.0666666667vw solid rgba(255,255,255,.5);
    box-sizing: content-box;
    background-color: transparent;
    letter-spacing: .06em;
    transform: translateY(calc(-100% - 4vw))
}

@media screen and (min-width: 769px),print {
    .fsp .fsp_btn-reservation {
        bottom:0;
        left: calc(100vw - 271px);
        margin: 0 33px 0 0;
        padding: 0;
        width: 238px;
        height: 64px;
        border: 8px solid rgba(255,255,255,.5);
        transform: translateY(calc(-100% - 33px))
    }
}

.fsp .fsp_btn-reservation {
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none
}

.fsp .fsp_btn-reservation.is-show {
    opacity: 1;
    pointer-events: auto
}

.fsp .fsp_btn-reservation .m-circle-small {
    width: 7.4666666667vw;
    height: 7.4666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp .fsp_btn-reservation .m-circle-small {
        width:32px;
        height: 32px
    }
}

.fsp .fsp_btn-reservation .m-circle-small:before {
    margin: -3.7333333333vw 0 0 -3.7333333333vw;
    width: 7.4666666667vw;
    height: 7.4666666667vw
}

@media screen and (min-width: 769px),print {
    .fsp .fsp_btn-reservation .m-circle-small:before {
        margin:-16px 0 0 -16px;
        width: 32px;
        height: 32px
    }
}

.fsp .fsp_btn-reservation::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: #1e4d9e;
    transition: background-color .3s cubic-bezier(.165, .84, .44, 1)
}

@media (hover: hover) and (pointer:fine) {
    .fsp .fsp_btn-reservation:hover {
        background-color:transparent
    }

    .fsp .fsp_btn-reservation:hover:before {
        background-color: #3373c4
    }
}