@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&family=Poppins:wght@400;600&display=swap";
@layer foundation, layout, component, project, page, utilities;

:root {
    --sans-serif: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    --serif: "Noto Serif JP", serif;
    --en-sans: "Poppins", sans-serif;
    --en-js-sans: "Poppins", "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    --en-serif: "", serif;
    --base: #fff;
    --main: #212121;
    --accent: #3AAEAB;
    --sp-base-fs: 3.8vw;
    --sp-pad: 8vw
}

@layer foundation {
    body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, figure {
        all: unset;
        display: revert
    }

    body {
        line-height: 1
    }

    ol, ul {
        list-style: none
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    img {
        vertical-align: middle
    }
}

@layer foundation {
    html {
        font-size: 10px;
        height: 100%;
        --scroll-padding: 10em;
        scroll-padding-top: var(--scroll-padding)
    }

    @media screen and (max-width: 767px) {
        html {
            --scroll-padding: 16vw;
            scroll-padding-top: var(--scroll-padding)
        }
    }

    body {
        text-size-adjust: 100%;
        font-family: var(--sans-serif);
        font-size: 1.6rem;
        line-height: 1.8;
        min-width: 320px;
        color: var(--main);
        background: var(--base);
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "palt"
    }

    @media screen and (max-width: 1202px)and (min-width: 767px) {
        body {
            font-size: 1.3265306122vw
        }
    }

    @media screen and (max-width: 767px) {
        body {
            font-size: var(--sp-base-fs)
        }

        body.is-modal {
            overflow: hidden
        }
    }

    *, *::before, *::after {
        box-sizing: border-box
    }

    :focus-visible {
        outline: 2px solid blue
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.5;
        font-weight: 600
    }

    img, svg, iframe, video, picture {
        max-width: 100%
    }

    img, svg {
        vertical-align: top
    }

    img {
        letter-spacing: 0;
        font-size: 12px;
        height: auto
    }

    @media screen and (max-width: 1202px)and (min-width: 767px) {
        img {
            font-size: 1.2244897959vw
        }
    }

    a {
        word-break: break-all;
        color: currentColor
    }

    @media screen and (min-width: 768px) {
        a[href^="tel:"] {
            display: inline-block;
            pointer-events: none
        }
    }

    strong, b {
        font-weight: 600
    }

    small {
        font-size: 80%
    }

    summary::-webkit-details-marker {
        display: none
    }

    button, input[type=button], input[type=submit] {
        cursor: pointer;
        font: inherit
    }

    button, input, select, textarea {
        font: inherit;
        color: inherit
    }

    label {
        cursor: pointer;
        display: inline-block
    }
}

@layer layout {}

@layer layout {
    .l-footer {
        background: #edf2f6;
        padding: 7.5em 0
    }

    @media screen and (max-width: 767px) {
        .l-footer {
            padding: 21.3333333333vw 8vw 18.6666666667vw 8vw
        }
    }

    @media screen and (min-width: 768px) {
        .l-footer__row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start
        }
    }

    .l-footer__row:last-child {
        align-items: center;
        margin-top: 4.375em;
        padding-top: 4.375em;
        border-top: 1px solid rgba(156, 162, 163, .2)
    }

    @media screen and (max-width: 767px) {
        .l-footer__row:last-child {
            margin-top: 10.6666666667vw;
            padding-top: 10.6666666667vw;
            text-align: center
        }
    }

    @media screen and (min-width: 768px) {
        .l-footer__logo {
            width: 9.5625em
        }
    }

    @media screen and (max-width: 767px) {
        .l-footer__logo {
            width: 40.8vw
        }
    }

    .l-footer__logo img {
        width: 100%
    }

    .l-footer__list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between
    }

    @media screen and (min-width: 768px) {
        .l-footer__list {
            width: 39.375em;
            gap: 4.375em
        }
    }

    @media screen and (max-width: 767px) {
        .l-footer__list {
            margin-top: 10.6666666667vw
        }
    }

    .l-footer__list a {
        text-decoration: none;
        transition: .25s color
    }

    @media(hover: hover) {
        .l-footer__list a:hover {
            color: #00b4e1
        }
    }

    @media screen and (max-width: 767px) {
        .l-footer__items>li {
            font-size: 4.2666666667vw
        }
    }

    .l-footer__items>li:not(:first-child) {
        margin-top: 1.25em
    }

    @media screen and (max-width: 767px) {
        .l-footer__items>li:not(:first-child) {
            margin-top: 5.3333333333vw
        }
    }

    .l-footer__items .p-icon-blank {
        top: .45em;
        margin-left: .5em
    }

    @media screen and (max-width: 767px) {
        .l-footer__items .p-icon-blank {
            top: 2.5333333333vw;
            margin-left: 1.6vw
        }
    }

    .l-footer__children {
        font-size: 87.5%;
        margin-top: 1.4285714286em
    }

    @media screen and (max-width: 767px) {
        .l-footer__children {
            margin-top: 4.2666666667vw;
            font-size: 3.7333333333vw
        }
    }

    .l-footer__children li {
        position: relative;
        padding-left: 1em
    }

    .l-footer__children li:not(:first-child) {
        margin-top: 0.7142857143em
    }

    .l-footer__children li::before {
        position: absolute;
        left: 0;
        top: 50%;
        content: "";
        display: block;
        width: 0.5em;
        height: 1px;
        background: var(--accent)
    }

    @media screen and (max-width: 767px) {
        .l-footer__other {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 9.6vw
        }
    }

    .l-footer__other span {
        font-size: 75%
    }

    @media screen and (max-width: 767px) {
        .l-footer__other span {
            font-size: 3.2vw
        }
    }

    @media screen and (max-width: 767px) {
        .l-footer__other>li {
            width: 50%
        }
    }

    @media screen and (min-width: 768px) {
        .l-footer__other>li:not(:first-child) {
            margin-top: 1.25em
        }
    }

    @media screen and (min-width: 768px) {
        .l-footer__other .p-icon-blank {
            top: .9em;
            margin-left: .5em;
            font-size: 76%
        }
    }

    @media screen and (max-width: 767px) {
        .l-footer__other .p-icon-blank {
            top: 2.6666666667vw;
            margin-left: 2.1333333333vw
        }
    }

    @media screen and (min-width: 768px) {
        .l-footer__login {
            width: 20em
        }
    }

    @media screen and (max-width: 767px) {
        .l-footer__login {
            margin-top: 9.3333333333vw
        }
    }

    @media screen and (min-width: 768px) {
        .l-footer__kean {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 2.5em
        }
    }

    .l-footer__info {
        font-size: 75%
    }

    @media screen and (max-width: 767px) {
        .l-footer__info {
            font-size: 3.2vw;
            margin: 6.6666666667vw 0 8vw 0
        }
    }

    .l-footer__info a {
        color: #00b4e1
    }

    @media(hover: hover) {
        .l-footer__info a:hover {
            text-decoration: none
        }
    }

    .l-footer__info .p-icon-mail {
        top: .3em;
        font-size: 133.3333333333%;
        margin: 0 .3em 0 .1em
    }

    .l-footer__info .p-icon-blank {
        top: .4em;
        margin-left: .4em
    }

    @media screen and (max-width: 767px) {
        .l-footer__info .p-icon-blank {
            top: .6em
        }
    }

    @media screen and (min-width: 768px) {
        .l-footer__logo-kean {
            width: 4.25em
        }
    }

    @media screen and (max-width: 767px) {
        .l-footer__logo-kean {
            width: 18.1333333333vw;
            margin: 0 auto
        }
    }

    .l-footer__logo-kean img {
        width: 100%
    }

    .l-footer__copyright {
        font-family: var(--en-sans);
        color: #9ca2a3;
        font-size: 75%
    }

    @media screen and (max-width: 767px) {
        .l-footer__copyright {
            font-size: 3.2vw
        }
    }
}

@layer layout {
    @media screen and (min-width: 768px) {
        .l-header {
            position: sticky;
            left: 0;
            top: 0;
            z-index: 10;
            width: 100%;
            background: rgba(255, 255, 255, .8)
        }
    }

    @media screen and (max-width: 767px) {
        .l-header {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 10;
            width: 100%;
            background: rgba(255, 255, 255, .8);
            height: 16vw;
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px)
        }
    }

    @media screen and (min-width: 768px) {
        .l-header__inner {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between
        }
    }

    .l-header__logo {
        width: 9.5625em
    }

    @media screen and (min-width: 768px) {
        .l-header__logo {
            margin: 2.5em 0 0 2.5em
        }
    }

    @media screen and (max-width: 767px) {
        .l-header__logo {
            position: relative;
            z-index: 12;
            margin: 4.8vw 0 0 4.8vw
        }
    }
}

@layer layout {}

@layer layout {
    .l-nav__btn {
        background: linear-gradient(#03b4de 0%, #34d6ff 100%);
        padding: 0;
        border: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center
    }

    @media screen and (min-width: 768px) {
        .l-nav__btn {
            display: none
        }
    }

    @media screen and (max-width: 767px) {
        .l-nav__btn {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 10;
            width: 16vw;
            height: 16vw
        }

        .l-nav__btn svg {
            width: 6.4vw;
            height: 4.8vw
        }
    }

    .l-nav__btn .is-line-1, .l-nav__btn .is-line-4 {
        transform-origin: center;
        transition-property: opacity;
        transition-duration: .2s
    }

    .l-nav__btn .is-line-2, .l-nav__btn .is-line-3 {
        transform-origin: center;
        transition-property: transform;
        transition-duration: .2s
    }

    .l-nav__btn.is-active {
        transform: translateX(0)
    }

    .l-nav__btn.is-active .is-line-1, .l-nav__btn.is-active .is-line-4 {
        opacity: 0
    }

    .l-nav__btn.is-active .is-line-2 {
        transform: rotate(45deg) translate(-1px, -1px)
    }

    .l-nav__btn.is-active .is-line-3 {
        transform: rotate(-45deg)
    }

    .l-nav__line {
        fill: none;
        stroke: #fff;
        stroke-miterlimit: 10;
        stroke-width: 2px
    }

    @media screen and (max-width: 767px) {
        .l-nav__body {
            position: absolute;
            overflow: auto;
            overscroll-behavior: contain;
            z-index: 2;
            left: 0;
            top: 16vw;
            width: 100%;
            height: calc(100vh - 16vw);
            height: calc(100dvh - 16vw);
            background: rgba(255, 255, 255, .8);
            transition: .25s height
        }

        .l-nav__body[aria-hidden=true] {
            height: 0
        }
    }

    @media screen and (min-width: 768px) {
        .l-nav__list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center
        }
    }

    @media screen and (max-width: 767px) {
        .l-nav__list {
            font-size: 4.2666666667vw;
            padding: 8vw 8vw 9.0666666667vw 8vw
        }

        .l-nav__list>li {
            border-bottom: 1px solid #eaeff4
        }
    }

    .l-nav__item {
        color: #000;
        user-select: none
    }

    @media screen and (min-width: 768px) {
        .l-nav__item:not(.has-btn) {
            margin-right: 2.5em
        }
    }

    @media screen and (max-width: 1390px)and (min-width: 767px) {
        .l-nav__item:not(.has-btn) {
            margin-right: 1.875em
        }
    }

    @media screen and (min-width: 768px) {
        .l-nav__item.has-children .l-nav__link {
            gap: 1.125em
        }
    }

    .l-nav__item.has-children .p-icon-arr-btm {
        top: .2em
    }

    @media screen and (max-width: 767px) {
        .l-nav__item.has-children .p-icon-arr-btm {
            width: 0;
            height: 0;
            opacity: 0
        }
    }

    .l-nav__sm {
        display: block
    }

    .l-nav__link-btn {
        width: 11.25em;
        height: 6.25em;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        line-height: 1.4;
        text-align: center;
        text-decoration: none
    }

    @media screen and (max-width: 1390px)and (min-width: 767px) {
        .l-nav__link-btn {
            width: 7.5em
        }
    }

    .l-nav__link-btn.is-shopping {
        color: #fff;
        background: linear-gradient(45deg, #ff7644 0%, #ffa07d 100%);
        transition: filter .25s
    }

    @media(hover: hover) {
        .l-nav__link-btn.is-shopping:hover {
            filter: contrast(200%)
        }
    }

    .l-nav__link-btn.is-login {
        color: #00b4e1;
        transition-property: color, background;
        transition-duration: .25s
    }

    @media(hover: hover) {
        .l-nav__link-btn.is-login:hover {
            background-color: #00b4e1;
            color: #fff
        }
    }

    .l-nav__label {
        font-size: 81.25%;
        margin-top: .1em
    }

    .l-nav__link {
        position: relative;
        text-decoration: none;
        color: currentColor;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75em;
        transition: .25s color;
        font-size: 93.75%
    }

    @media screen and (min-width: 768px) {
        .l-nav__link {
            height: 6.25em
        }
    }

    @media screen and (max-width: 767px) {
        .l-nav__link {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding: 4vw 5.3333333333vw
        }
    }

    .l-nav__link .p-icon-blank {
        top: .1em
    }

    @media screen and (min-width: 768px) {
        .l-nav__link .p-icon-arr {
            opacity: 0;
            height: 0;
            width: 0
        }
    }

    @media(hover: hover) {
        .l-nav__link:hover {
            color: #00b4e1
        }
    }

    @media screen and (min-width: 768px) {
        .l-nav__children {
            position: absolute;
            left: 0;
            top: 6.25em;
            z-index: 1;
            width: 100%;
            background: #edf2f6;
            display: none;
            padding: 3.125em 6.25em
        }

        .l-nav__children.is-on {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap
        }

        .l-nav__children>li {
            margin-right: 3.125em
        }

        .l-nav__children>li.is-label {
            margin-right: 4.7916666667em;
            font-size: 150%;
            transform: translateY(-0.5em);
            letter-spacing: .1em
        }

        .l-nav__children>li a {
            width: 12.5em;
            border-bottom: 1px solid #d4dfe8;
            padding-bottom: 0.75em;
            transition: .25s color
        }
    }

    @media screen and (min-width: 768px)and (hover: hover) {
        .l-nav__children>li a:hover {
            color: #00b4e1
        }
    }

    @media screen and (max-width: 767px) {
        .l-nav__children {
            font-size: 3.7333333333vw;
            margin-left: 10.6666666667vw
        }

        .l-nav__children>li {
            border-bottom: 1px solid #eaeff4
        }
    }

    .l-nav__children a {
        position: relative;
        text-decoration: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center
    }

    @media screen and (max-width: 767px) {
        .l-nav__children a {
            padding: 2.6666666667vw 5.3333333333vw 2.6666666667vw 0
        }
    }

    .l-nav__login {
        text-align: center
    }

    @media screen and (max-width: 767px) {
        .l-nav__login {
            margin-top: 8vw;
            padding-bottom: 8vw
        }
    }

    .l-nav__login a {
        color: #00b4e1
    }

    @media screen and (max-width: 767px) {
        .l-nav__login-icon {
            width: 4.8vw;
            height: 4.8vw;
            fill: #00b4e1;
            margin-right: .4em;
            top: .2em
        }
    }

    .l-nav__buy {
        padding: 5.3333333333vw 8vw;
        text-align: center;
        background: linear-gradient(-25deg, #fbeeea 0%, #fff1ed 100%)
    }

    .l-nav__buy-label {
        color: #ff7644;
        font-size: 4.2666666667vw
    }

    @media screen and (max-width: 767px) {
        .l-nav__buy-icon {
            width: 6.4vw;
            height: 6.4vw;
            fill: #ff7644;
            margin-right: .4em;
            top: .2em
        }
    }

    .l-nav__buy-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center
    }

    @media screen and (max-width: 767px) {
        .l-nav__buy-row {
            margin-top: 3.7333333333vw
        }
    }

    .l-nav__buy-row .c-btn {
        width: 48%
    }

    .l-nav__buy a {
        text-decoration: none
    }
}

@layer layout {
    .l-page .redtxt {
        color: red
    }

    @media screen and (max-width: 767px) {
        .l-page__content {
            margin-top: 16vw
        }
    }

    @media screen and (min-width: 768px) {
        .l-page__col {
            margin-top: 2.5em;
            margin-bottom: 11.875em;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            flex-direction: row-reverse
        }
    }

    @media screen and (max-width: 767px) {
        .l-page__col {
            margin-bottom: 21.3333333333vw
        }
    }

    @media screen and (min-width: 768px) {
        .l-page__primary {
            width: 66.6666666667%
        }
    }

    @media screen and (min-width: 768px) {
        .l-page__sidebar {
            width: 26.6666666667%
        }
    }

    @media screen and (max-width: 767px) {
        .l-page__sidebar.is-SP-sticky {
            position: sticky;
            top: 16vw;
            z-index: 3
        }
    }

    .is-modal .l-page__content, .is-modal .l-page__footer {
        filter: blur(12px)
    }
}

@layer component {
    .c-btn {
        cursor: pointer;
        position: relative;
        display: inline-block;
        line-height: 1.1;
        text-decoration: none;
        user-select: none;
        border: 0
    }

    .c-btn:hover {
        text-decoration: none
    }
}

@layer component {
    .c-container {
        width: 1200px;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto
    }

    .c-container-s {
        width: 960px;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto
    }
}

@layer component {
    .c-icon {
        position: relative;
        display: inline-block;
        background: 50% 50% no-repeat;
        background-size: contain;
        vertical-align: top;
        line-height: 1;
        font-style: normal
    }
}

@layer project {
    .p-btn-totop {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 3.75em;
        opacity: 0;
        transition: .25s opacity
    }

    .p-btn-totop.is-scrolled {
        opacity: 1
    }

    .p-btn-close {
        width: 100%;
        border-radius: 32px;
        background: rgba(0, 0, 0, 0);
        padding: 1.625em 1.25em;
        text-align: center;
        transition-property: background, color;
        transition-duration: .25s;
        border: 1px solid #fff;
        color: #fff
    }

    @media screen and (max-width: 767px) {
        .p-btn-close {
            width: 68vw
        }
    }

    @media(hover: hover) {
        .p-btn-close:hover {
            background: var(--accent)
        }

        .p-btn-close:hover .p-btn-close__label {
            color: #fff
        }

        .p-btn-close:hover .p-icon-arr-b {
            fill: #fff
        }
    }

    .p-btn-close .p-icon-close {
        margin-right: .8em;
        margin-left: -0.8em
    }

    .p-cart-btn {
        display: block;
        text-align: right;
        height: 0;
        width: 100%;
        position: sticky;
        bottom: 0;
        z-index: 5;
        opacity: 0;
        transition: .25s opacity
    }

    .p-cart-btn.is-scrolled {
        opacity: 1
    }

    .p-cart-btn.is-over {
        opacity: 0;
        pointer-events: none
    }

    .p-cart-btn__cont {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 7.5em;
        height: 7.5em;
        background: linear-gradient(#ff7644 0%, #ffa07d 100%);
        box-shadow: 0px 10px 20px rgba(88, 97, 100, .2);
        border-radius: 100em;
        color: #fff;
        text-align: center;
        transition: .25s filter
    }

    @media screen and (max-width: 767px) {
        .p-cart-btn__cont {
            padding-top: 2.1333333333vw;
            width: 21.3333333333vw;
            height: 21.3333333333vw
        }
    }

    @media(hover: hover) {
        .p-cart-btn__cont:hover {
            filter: contrast(200%)
        }
    }

    .p-cart-btn__label {
        margin: 0.4375em 0 0.875em 0;
        font-size: 112.5%
    }

    @media screen and (max-width: 767px) {
        .p-cart-btn__label {
            margin: 0.4375em 0 0.625em 0;
            font-size: 3.2vw
        }
    }

    .p-btn-a {
        width: 100%;
        border-radius: 32px;
        background: linear-gradient(90deg, #ff7644 0%, #ffa07d 100%);
        box-shadow: 0px 10px 20px rgba(88, 97, 100, .2);
        padding: 1.375em 1.25em;
        text-align: center;
        transition: filter .25s
    }

    @media screen and (max-width: 767px) {
        .p-btn-a {
            padding: 1.25em 1.25em;
            font-size: 4.8vw
        }
    }

    @media(hover: hover) {
        .p-btn-a:hover {
            filter: brightness(110%)
        }
    }

    .p-btn-a__label {
        font-size: 112.5%;
        color: #fff
    }

    .p-btn-a .p-icon-cart {
        margin-right: .6em;
        top: .1em
    }

    .p-btn-a .p-icon-arr-btm-a, .p-btn-a .p-icon-arr-w {
        position: absolute;
        right: 1.125em;
        top: 50%;
        translate: 0 -40%
    }

    .p-btn-a .p-icon-arr-w {
        right: 1.375em
    }

    .p-btn-b {
        border-radius: 24px;
        background: linear-gradient(#03b4de 0%, #34d6ff 100%);
        box-shadow: 0px 10px 20px rgba(0, 180, 225, .2);
        color: #fff;
        padding: 1em 1.875em 0.9375em 1.875em;
        text-align: center;
        transition: filter .25s
    }

    @media screen and (max-width: 767px) {
        .p-btn-b {
            padding: 4.2666666667vw 8vw
        }
    }

    @media(hover: hover) {
        .p-btn-b:hover {
            filter: contrast(130%)
        }
    }

    .p-btn-b .c-icon {
        margin-right: 0.5em;
        top: -0.15em
    }

    .p-btn-c {
        background: linear-gradient(90deg, #3aaeab 20%, #6de5df 100%);
        box-shadow: 0px 10px 20px rgba(88, 97, 100, .2);
        border-radius: 6.25em;
        color: #fff
    }

    .p-btn-c.is-pro {
        background: linear-gradient(90deg, #c49a61 20%, #e6c495 100%)
    }

    @media screen and (max-width: 767px) {
        .p-btn-c {
            font-size: 3.7333333333vw;
            padding: 4.2666666667vw
        }
    }

    .p-btn-d {
        width: 100%;
        border-radius: 32px;
        background: #fff;
        padding: 1.375em 1.25em;
        text-align: center;
        transition-property: background, color;
        transition-duration: .25s;
        border: 1px solid var(--accent)
    }

    @media(hover: hover) {
        .p-btn-d:hover {
            background: var(--accent)
        }

        .p-btn-d:hover .p-btn-d__label {
            color: #fff
        }

        .p-btn-d:hover .p-icon-arr-b {
            fill: #fff
        }
    }

    .p-btn-d__label {
        font-size: 112.5%;
        color: var(--accent);
        transition-property: background, color;
        transition-duration: .25s
    }

    @media screen and (max-width: 767px) {
        .p-btn-d__label {
            font-size: 4.2666666667vw
        }
    }

    .p-btn-d .p-icon-arr-b {
        position: absolute;
        right: 1.375em;
        top: 50%;
        translate: 0 -40%
    }

    @media screen and (max-width: 767px) {
        .p-btn-d .p-icon-arr-b {
            right: 2.9333333333vw;
            width: 4.2666666667vw;
            height: 3.2vw
        }
    }

    .p-btn-e {
        width: 100%;
        border-radius: 32px;
        background: #fff;
        padding: 1.375em 1.25em;
        text-align: center;
        transition-property: background, color;
        transition-duration: .25s;
        border: 1px solid #00b4e1;
        color: #00b4e1
    }

    @media screen and (max-width: 767px) {
        .p-btn-e {
            padding: 5.3333333333vw 10.6666666667vw;
            font-size: 4.8vw;
            font-size: 4.2666666667vw;
            line-height: 1.4;
            border-radius: 100em
        }
    }

    .p-btn-e .p-icon-arr-b {
        position: absolute;
        right: 1.375em;
        top: 50%;
        translate: 0 -40%
    }

    @media screen and (max-width: 767px) {
        .p-btn-e .p-icon-arr-b {
            width: 4.2666666667vw;
            height: 3.2vw;
            right: 2.9333333333vw
        }
    }

    @media(hover: hover) {
        .p-btn-e:hover {
            background: #00b4e1;
            color: #fff
        }

        .p-btn-e:hover .p-icon-arr-b {
            fill: #fff
        }
    }
}

@layer project {
    .p-hdr-page {
        background: url("../img/content/hdr_bg.webp") 50% 50%/cover no-repeat;
        padding: 5.625em
    }

    .p-hdr-page.is-column {
        padding: 3.75em 0
    }

    @media screen and (max-width: 767px) {
        .p-hdr-page.is-column {
            padding: 1.875em 0 2.1875em 0
        }
    }

    @media screen and (max-width: 767px) {
        .p-hdr-page {
            background-image: url("../img/content/hdr_bg_sp.webp");
            padding: 13.3333333333vw 2.6666666667vw
        }
    }

    @media screen and (min-width: 768px) {
        .p-hdr-page__row {
            background-image: url("../img/content/hdr_bg_column.webp");
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center
        }
    }

    .p-hdr-page__img {
        line-height: 1.2
    }

    @media screen and (min-width: 768px) {
        .p-hdr-page__img {
            width: 46.6666666667%
        }
    }

    @media screen and (max-width: 767px) {
        .p-hdr-page__img {
            width: 68vw;
            margin-left: auto;
            margin-right: auto
        }
    }

    @media screen and (min-width: 768px) {
        .p-hdr-page__wtxt {
            width: 46.6666666667%
        }
    }

    .p-hdr-page__logo {
        display: block;
        font-size: 50%
    }

    .p-hdr-page__logo img {
        margin-right: 0.625em;
        vertical-align: middle;
        position: relative;
        width: 16.3333333333em
    }

    @media screen and (min-width: 768px) {
        .p-hdr-page__logo img {
            top: -0.2em
        }
    }

    @media screen and (max-width: 767px) {
        .p-hdr-page__logo img {
            width: 36.2666666667vw
        }
    }

    .p-hdr-page__inttl {
        line-height: 1.4;
        font-size: 375%
    }

    @media screen and (max-width: 767px) {
        .p-hdr-page__inttl {
            margin-top: 8vw;
            text-align: center;
            font-size: 8.5333333333vw
        }
    }

    .p-hdr-page__ttl {
        font-size: 300%;
        text-align: center
    }

    @media screen and (min-width: 768px) {
        .p-hdr-page__ttl {
            letter-spacing: .14em
        }
    }

    @media screen and (max-width: 767px) {
        .p-hdr-page__ttl {
            font-size: 8.5333333333vw
        }
    }

    .p-hdr-a {
        position: relative;
        text-align: center;
        margin-bottom: 5em
    }

    @media screen and (max-width: 767px) {
        .p-hdr-a {
            margin-bottom: 9.6vw
        }
    }

    @media screen and (max-width: 767px) {
        .p-hdr-a.is-lineup {
            margin-bottom: 6.9333333333vw
        }
    }

    .p-hdr-a::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 19px;
        background: url("../img/icon/baloon.svg") 0 0/contain no-repeat;
        margin-bottom: .2em;
        border-radius: 100em
    }

    @media screen and (max-width: 767px) {
        .p-hdr-a::before {
            width: 4.2666666667vw;
            height: 5.0666666667vw;
            margin-bottom: .1em
        }
    }

    .p-hdr-a__en {
        font-size: 112.5%;
        color: #00b4e1;
        font-family: var(--en-sans);
        font-weight: normal;
        line-height: 1.1
    }

    @media screen and (max-width: 767px) {
        .p-hdr-a__en {
            font-size: 4.2666666667vw;
            margin-bottom: .5em
        }
    }

    .p-hdr-a__ttl {
        font-size: 300%;
        margin: .1em 0 0 0;
        letter-spacing: .05em
    }

    @media screen and (max-width: 767px) {
        .p-hdr-a__ttl {
            line-height: 1.3;
            font-size: 9.6vw
        }
    }

    .p-hdr-b {
        text-align: center;
        margin-bottom: 2.5em
    }

    @media screen and (max-width: 767px) {
        .p-hdr-b {
            margin-bottom: 10.6666666667vw
        }
    }

    .p-hdr-b__ttl {
        position: relative;
        font-size: 200%;
        display: inline-block;
        padding-bottom: 0.8125em
    }

    @media screen and (max-width: 767px) {
        .p-hdr-b__ttl {
            font-size: 6.4vw
        }
    }

    .p-hdr-b__ttl::before {
        content: "";
        display: block;
        width: 1.25em;
        height: 1px;
        background: #00b4e1;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%)
    }

    @media screen and (max-width: 767px) {
        .p-hdr-b__ttl::before {
            width: 10.6666666667vw
        }
    }

    .p-hdr-c {
        margin-top: 4.375em;
        margin-bottom: 1.25em
    }

    .p-hdr-c.is-first {
        margin-top: 0
    }

    @media screen and (max-width: 767px) {
        .p-hdr-c {
            margin-top: 13.3333333333vw
        }
    }

    .p-hdr-c__ttl {
        position: relative;
        font-size: 150%;
        color: #00b4e1;
        padding-left: 0.7083333333em;
        font-weight: normal
    }

    @media screen and (max-width: 767px) {
        .p-hdr-c__ttl {
            font-size: 4.5333333333vw
        }
    }

    .p-hdr-c__ttl::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        display: block;
        background: #00b4e1;
        width: 2px;
        height: 100%
    }

    .p-hdr-d {
        position: relative;
        border-top: 2px solid #eaeff5;
        margin-top: 6.25em;
        padding: 5.625em 0
    }

    @media screen and (max-width: 767px) {
        .p-hdr-d {
            margin-top: 16vw;
            padding: 8vw 0
        }
    }

    .p-hdr-d::before {
        position: absolute;
        left: 0;
        top: -2px;
        content: "";
        display: block;
        background: #03b4de;
        height: 2px;
        width: 5em
    }

    .p-hdr-d__ttl {
        font-size: 225%
    }

    @media screen and (max-width: 767px) {
        .p-hdr-d__ttl {
            font-size: 6.4vw
        }
    }

    .p-hdr-d p {
        font-size: 112.5%
    }

    @media screen and (max-width: 767px) {
        .p-hdr-d p {
            font-size: 3.7333333333vw;
            margin-top: .6em
        }
    }
}

@layer project {
    .p-icon-close {
        background-image: url("../img/icon/close.svg")
    }

    @media screen and (max-width: 767px) {
        .p-icon-close {
            width: 4.8vw;
            height: 4.8vw
        }
    }

    .p-icon-cart {
        width: 1.125em;
        height: 1.125em;
        fill: #fff
    }

    @media screen and (max-width: 767px) {
        .p-icon-cart {
            width: 4.8vw;
            height: 4.8vw
        }
    }

    .p-icon-login {
        width: 1.125em;
        height: 1.125em;
        fill: #00b4e1;
        transition: fill .25s
    }

    @media(hover: hover) {
        a:hover .p-icon-login {
            fill: #fff
        }
    }

    .p-icon-blank-b {
        width: 0.6875em;
        height: 0.6875em;
        fill: #00b4e1;
        stroke: #00b4e1
    }

    @media screen and (max-width: 767px) {
        .p-icon-blank-b {
            width: 2.6666666667vw;
            height: 2.6666666667vw
        }
    }

    @media screen and (max-width: 767px) {
        .p-icon-blank-b.is-sp-sm {
            width: 2.4vw;
            height: 2.4vw
        }
    }

    .p-icon-arr {
        fill: #00b4e1;
        width: 1em;
        height: 0.75em
    }

    @media screen and (max-width: 767px) {
        .p-icon-arr {
            width: 3.4666666667vw;
            height: 2.6666666667vw
        }
    }

    .p-icon-arr-w {
        fill: #fff;
        width: 1em;
        height: 0.75em
    }

    .p-icon-arr-b {
        fill: var(--accent);
        width: 1em;
        height: 0.75em
    }

    @media screen and (max-width: 767px) {
        .p-icon-arr-b {
            width: 2.6666666667vw;
            height: 2.1333333333vw
        }
    }

    .p-icon-arr-lb {
        fill: #00b4e1;
        width: 1em;
        height: 0.75em
    }

    @media screen and (max-width: 767px) {
        .p-icon-arr-lb {
            width: 4.2666666667vw;
            height: 3.2vw
        }
    }

    .p-icon-arr-lb-btm {
        fill: #00b4e1;
        width: 1em;
        height: 0.75em;
        rotate: 90deg
    }

    @media screen and (max-width: 767px) {
        .p-icon-arr-lb-btm {
            width: 4.2666666667vw;
            height: 3.2vw
        }
    }

    .p-icon-arr-btm {
        fill: #00b4e1;
        width: 0.625em;
        height: 0.375em
    }

    .p-icon-arr-btm-a {
        fill: #fff;
        width: 1.125em;
        height: 0.875em
    }

    @media screen and (max-width: 767px) {
        .p-icon-arr-btm-a {
            width: 4.8vw;
            height: 3.7333333333vw
        }
    }

    .p-icon-carr {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.5em;
        height: 2.5em;
        background: linear-gradient(#3aaeab 0%, #6de5df 100%);
        filter: drop-shadow(0px 10px 20px rgba(143, 211, 209, 0.5));
        border-radius: 100em
    }

    @media screen and (max-width: 767px) {
        .p-icon-carr {
            width: 10.6666666667vw;
            height: 10.6666666667vw
        }
    }

    .p-icon-carr svg {
        width: 0.75em;
        height: 1em;
        fill: #fff
    }

    .p-icon-btm-arr {
        width: 1em;
        height: 0.75em;
        fill: #fff
    }

    @media screen and (max-width: 767px) {
        .p-icon-btm-arr {
            width: 2.6666666667vw;
            height: 2.1333333333vw
        }
    }

    .p-icon-result {
        width: 1.625em;
        height: 1.5em;
        fill: #00b4e1
    }

    @media screen and (max-width: 767px) {
        .p-icon-result {
            width: 6.9333333333vw;
            height: 6.4vw
        }
    }

    .p-icon-blank {
        width: 1em;
        height: 1em;
        fill: #fff;
        stroke: #fff
    }

    @media screen and (max-width: 767px) {
        .p-icon-blank {
            width: 4.2666666667vw;
            height: 4.2666666667vw
        }
    }

    .p-icon-blank-inline {
        top: .6em;
        margin-left: .4em;
        margin-right: .4em;
        width: 0.875em;
        height: 0.875em;
        fill: #00b4e1;
        stroke: #00b4e1
    }

    .l-header .p-icon-blank, .l-footer .p-icon-blank {
        fill: #00b4e1;
        stroke: #00b4e1
    }

    @media screen and (max-width: 767px) {
        .l-footer .p-icon-blank {
            width: 2.6666666667vw;
            height: 2.6666666667vw
        }
    }

    .p-icon-login-a {
        width: 1.125em;
        height: 1.125em;
        fill: #fff
    }

    @media screen and (max-width: 767px) {
        .p-icon-login-a {
            width: 4.8vw;
            height: 4.8vw
        }
    }

    .p-icon-mail {
        width: 0.9375em;
        height: 0.75em;
        fill: #00b4e1
    }

    .p-icon-check {
        fill: var(--accent);
        width: 1em;
        height: 1em
    }

    .p-icon-aps {
        fill: #00b4e1;
        width: 1.5em;
        height: 1.5em
    }

    @media screen and (max-width: 767px) {
        .p-icon-aps {
            width: 6.4vw;
            height: 6.4vw
        }
    }

    details[open] .p-icon-toggle::before {
        transform: rotate(0)
    }

    .p-icon-toggle {
        display: inline-block;
        position: relative;
        width: 1em;
        height: 1em
    }

    .p-icon-toggle::before, .p-icon-toggle::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background: #00b4e1;
        transform: translateY(50%);
        border-radius: 10px
    }

    .p-icon-toggle::before {
        transition: .25s transform;
        transform: rotate(90deg)
    }

    .p-icon-toggle::after {
        transform: rotate(0)
    }
}

@layer project {
    .p-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 4.375em
    }

    @media screen and (min-width: 768px) {
        .p-nav {
            gap: 0 2.5em
        }
    }

    @media screen and (max-width: 767px) {
        .p-nav {
            margin-bottom: 13.3333333333vw;
            justify-content: space-between
        }
    }

    @media screen and (min-width: 768px) {
        .p-nav.is-terms {
            margin-left: auto;
            margin-right: auto;
            max-width: 90%;
            gap: 1.25em 2.5em
        }
    }

    .p-nav.is-pt {
        padding-top: 2.5em
    }

    @media screen and (max-width: 767px) {
        .p-nav.is-pt {
            padding-top: 8vw;
            font-size: 3.4666666667vw
        }
    }

    .p-nav>li {
        border-bottom: 1px solid #d4d8dc
    }

    @media screen and (min-width: 768px) {
        .p-nav>li {
            width: 22.5%
        }
    }

    @media screen and (max-width: 1316px)and (min-width: 767px) {
        .p-nav>li {
            width: 26.6666666667%
        }
    }

    @media screen and (max-width: 767px) {
        .p-nav>li {
            width: 40vw
        }
    }

    .p-nav a {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        padding: 1em 0;
        transition: .25s color
    }

    @media screen and (max-width: 767px) {
        .p-nav a {
            height: 100%;
            align-items: center
        }
    }

    @media(hover: hover) {
        .p-nav a:hover {
            color: #00b4e1
        }
    }

    .p-nav a[aria-current=page] {
        color: #00b4e1
    }

    .p-nav p {
        line-height: 1.5
    }

    @media screen and (max-width: 767px) {
        .p-nav p {
            width: 84%
        }
    }
}

@layer project {
    .p-breadcrumb {
        padding: 1.57em 2.5075em;
        font-size: 75%;
        line-height: 1.5
    }

    @media screen and (max-width: 767px) {
        .p-breadcrumb {
            padding: 3.2vw 5.3333333333vw;
            font-size: 3.2vw
        }
    }

    .p-breadcrumb a {
        position: relative;
        color: #00b4e1;
        text-decoration: none
    }

    @media(hover: hover) {
        .p-breadcrumb a:hover {
            text-decoration: underline
        }
    }

    .p-breadcrumb a:not([aria-current=page]) {
        margin-right: 0.3333333333em;
        padding-right: 2.5em
    }

    .p-breadcrumb a:not([aria-current=page])::after {
        display: block;
        content: "";
        width: 2em;
        height: 1px;
        background: #9ca2a3;
        position: absolute;
        right: 0;
        top: 50%
    }

    .p-breadcrumb a[aria-current=page] {
        pointer-events: none;
        color: var(--main)
    }
}

@layer project {
    .p-contact {
        text-align: center
    }

    .p-contact a {
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../img/content/contact_bg.webp") 50% 50%/cover no-repeat;
        height: 12.5em;
        color: #fff;
        text-decoration: none;
        transition: .25s filter
    }

    @media(hover: hover) {
        .p-contact a:hover {
            filter: brightness(110%)
        }
    }

    @media screen and (max-width: 767px) {
        .p-contact a {
            height: 32vw
        }
    }

    .p-contact__wtxt::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 19px;
        background: url("../img/icon/baloon_white.svg") 0 0/contain no-repeat;
        margin-bottom: .2em;
        border-radius: 100em
    }

    @media screen and (max-width: 767px) {
        .p-contact__wtxt::before {
            width: 4.2666666667vw;
            height: 5.0666666667vw;
            margin-bottom: .1em
        }
    }

    .p-contact__label {
        font-size: 187.5%;
        letter-spacing: .08em
    }

    .p-contact__label .c-icon {
        top: 1.4em;
        margin-left: .4em;
        font-size: 53.3333333333%
    }

    @media screen and (max-width: 767px) {
        .p-contact__label {
            font-size: 5.3333333333vw
        }
    }

    .p-contact__en {
        position: relative;
        font-size: 112.5%;
        font-family: var(--en-sans);
        font-weight: normal;
        line-height: 1.1
    }

    @media screen and (max-width: 767px) {
        .p-contact__en {
            font-size: 3.2vw
        }
    }
}

@layer project {
    #flow .p-confirm__txt {
        font-size: 81.25%;
        line-height: 1.5
    }

    @media screen and (max-width: 767px) {
        #flow .p-confirm__txt {
            font-size: 93.75%
        }
    }

    .p-flow {
        padding-bottom: 1.25em
    }

    @media screen and (min-width: 768px) {
        .p-flow {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            background: url("../img/content/flow_line.svg") 0 3.4375em/60em auto no-repeat
        }
    }

    @media screen and (min-width: 768px)and (max-width: 1202px)and (min-width: 767px) {
        .p-flow {
            background-size: 58.75em auto
        }
    }

    @media screen and (max-width: 767px) {
        .p-flow {
            background: url("../img/content/flow_line_sp.svg") 10.6666666667vw 18.1333333333vw/37.8666666667vw auto no-repeat
        }
    }

    .p-flow>li {
        border-radius: 16px;
        background: #fff;
        box-shadow: 0px 10px 20px rgba(0, 96, 178, .1);
        padding: 1.875em;
        display: flex;
        justify-content: space-between
    }

    @media screen and (min-width: 768px) {
        .p-flow>li {
            flex-direction: column;
            width: 20%
        }
    }

    @media screen and (max-width: 767px) {
        .p-flow>li {
            padding: 6.6666666667vw 8vw;
            align-items: center
        }
    }

    @media screen and (max-width: 767px) {
        .p-flow>li.is-1 .p-flow__img img {
            width: 34.6666666667vw
        }
    }

    .p-flow>li.is-2 .p-flow__label {
        display: block
    }

    @media screen and (min-width: 768px) {
        .p-flow>li.is-2, .p-flow>li.is-3 {
            margin-left: 3.3333333333%
        }
    }

    @media screen and (max-width: 767px) {
        .p-flow>li.is-2, .p-flow>li.is-3 {
            margin-top: 5.3333333333vw
        }
    }

    .p-flow>li.is-2 .p-flow__img, .p-flow>li.is-3 .p-flow__img {
        text-align: center
    }

    @media screen and (min-width: 768px) {
        .p-flow>li.is-2 .p-flow__img img, .p-flow>li.is-3 .p-flow__img img {
            width: 11.3333333333em
        }
    }

    @media screen and (max-width: 767px) {
        .p-flow>li.is-2 .p-flow__img img, .p-flow>li.is-3 .p-flow__img img {
            width: 28.8vw
        }
    }

    @media screen and (min-width: 768px) {
        .p-flow>li.is-4 {
            margin-left: 13.3333333333%
        }
    }

    @media screen and (max-width: 767px) {
        .p-flow>li.is-4 {
            margin-top: 33.0666666667vw;
            padding-top: 0vw;
            padding-bottom: 3.7333333333vw
        }
    }

    .p-flow>li.is-4 .p-flow__img {
        text-align: center
    }

    @media screen and (min-width: 768px) {
        .p-flow>li.is-4 .p-flow__img img {
            width: 6.9166666667em
        }
    }

    @media screen and (max-width: 767px) {
        .p-flow>li.is-4 .p-flow__img img {
            width: 20vw
        }
    }

    @media screen and (min-width: 768px) {
        .p-flow__wtxt {
            text-align: center
        }
    }

    .p-flow__n {
        display: inline-block;
        font-family: var(--en-sans);
        font-size: 150%;
        color: #00b4e1;
        line-height: 1
    }

    @media screen and (max-width: 767px) {
        .p-flow__n {
            font-size: 6.4vw
        }
    }

    .p-flow__label {
        font-size: 112.5%;
        line-height: 1.5
    }

    .p-flow__label sup {
        font-size: 62.5%;
        vertical-align: super
    }

    @media screen and (min-width: 768px) {
        .p-flow__label {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            height: 3.2em;
            margin-top: 0.625em
        }
    }

    @media screen and (max-width: 767px) {
        .p-flow__label {
            font-size: 4.2666666667vw
        }
    }

    .p-flow__img {
        margin-top: 1.875em
    }
}

@layer project {
    .p-faq__item {
        border-radius: 16px;
        background: #fff;
        box-shadow: 0px 10px 20px rgba(0, 96, 178, .1)
    }

    .p-faq__item+.p-faq__item {
        margin-top: 1.5625em
    }

    .p-faq__q {
        position: relative;
        cursor: pointer;
        display: block;
        font-size: 112.5%;
        user-select: none;
        padding: 1.6666666667em 4.7222222222em
    }

    @media screen and (max-width: 767px) {
        .p-faq__q {
            padding: 5.3333333333vw 18.6666666667vw 5.3333333333vw 8vw;
            padding-left: 13.3333333333vw
        }
    }

    .p-faq__q .p-icon-toggle {
        position: absolute;
        right: 2.5em;
        top: 50%;
        transform: translateY(-50%)
    }

    .p-faq__q::before {
        position: absolute;
        left: 1.875em;
        top: 1.4166666667em;
        content: "Q";
        font-family: var(--en-sans);
        font-size: 133.3333333333%;
        color: #00b4e1;
        line-height: 1
    }

    @media screen and (max-width: 767px) {
        .p-faq__q::before {
            top: 6.4vw;
            left: 5.3333333333vw
        }
    }

    .p-faq__a {
        position: relative;
        cursor: pointer;
        display: block;
        font-size: 87.5%;
        padding: 2.8571428571em 2.8571428571em;
        padding-left: 5.7142857143em;
        border-top: 1px solid #edf2f6;
        line-height: 2
    }

    .p-faq__a a {
        transition: color .25s
    }

    @media(hover: hover) {
        .p-faq__a a:hover {
            color: #00b4e1
        }
    }

    @media screen and (max-width: 767px) {
        .p-faq__a {
            font-size: 3.7333333333vw;
            padding-left: 13.3333333333vw
        }
    }

    .p-faq__a::before {
        position: absolute;
        left: 1.875em;
        top: 1.8571428571em;
        content: "A";
        font-family: var(--en-sans);
        font-size: 171.4285714286%;
        color: #00b4e1;
        line-height: 1
    }

    @media screen and (max-width: 767px) {
        .p-faq__a::before {
            left: 5.3333333333vw
        }
    }

    .p-faq__blank {
        top: .6em;
        margin-left: .4em;
        margin-right: .4em;
        width: 0.875em;
        height: 0.875em;
        fill: #00b4e1;
        stroke: #00b4e1
    }

    .p-faq__mt {
        margin-top: 1em
    }

    .p-faq__wbtn {
        text-align: center;
        margin-top: 4.0625em
    }

    .p-faq__wbtn .c-btn {
        --accent: #00B4E1;
        width: 20em
    }
}

@layer project {
    @media screen and (min-width: 768px) {
        .p-lineup {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup.is-lonly {
            padding-bottom: 4.375em
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup.is-lonly .p-lineup__item {
            width: 50.625em;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 0.625em
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup.is-lonly .p-lineup__fig {
            width: 20em
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup.is-lonly .p-lineup__wtxt {
            width: calc(100% - 21.875em)
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup.is-lonly .p-lineup__ttl {
            padding-top: 6.6666666667vw
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup.is-lonly .p-lineup__points {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.875em
        }

        .p-lineup.is-lonly .p-lineup__points>li {
            margin: 0
        }
    }

    .p-lineup__link {
        display: block;
        text-decoration: none
    }

    @media(hover: hover) {
        .p-lineup__link:hover .p-lineup__inbtn {
            filter: brightness(120%)
        }
    }

    .p-lineup__item {
        position: relative;
        background: #fff;
        box-shadow: 0px 20px 40px rgba(0, 96, 178, .2);
        border-radius: 18px;
        overflow: hidden
    }

    @media screen and (min-width: 768px) {
        .p-lineup__item {
            width: 56.6666666667%
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup__item+.p-lineup__item {
            margin-top: 8vw
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup__row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center
        }
    }

    .p-lineup__wbtn {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
    }

    @media screen and (min-width: 768px) {
        .p-lineup__wbtn {
            justify-content: center;
            align-items: center;
            gap: 0 1.25em;
            padding-bottom: 1.5em;
            margin-top: -1.25em
        }

        .p-lineup__wbtn>* {
            width: 41.3793103448%
        }
    }

    @media screen and (max-width: 1202px)and (min-width: 767px) {
        .p-lineup__wbtn {
            margin-top: 0em
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup__wbtn {
            justify-content: space-between;
            padding: 2.6666666667vw 5.3333333333vw 5.3333333333vw 5.3333333333vw
        }

        .p-lineup__wbtn .p-btn-a .p-icon-cart {
            position: absolute;
            left: 50%;
            top: 2.4vw;
            transform: translateX(-50%);
            width: 3.7333333333vw;
            height: 3.7333333333vw
        }

        .p-lineup__wbtn .p-btn-a .p-icon-arr-w {
            position: absolute;
            right: 3.7333333333vw;
            top: 50%;
            translate: 0 -40%
        }

        .p-lineup__wbtn .p-btn-a__label {
            display: block;
            line-height: 1.3;
            padding-top: 5.0666666667vw
        }

        .p-lineup__wbtn .p-btn-d__label {
            display: inline-block;
            padding-top: 4.8vw
        }
    }

    .p-lineup__inbtn {
        width: 100%;
        display: block;
        padding: 0.625em;
        background: var(--accent);
        color: #fff;
        text-align: center;
        text-decoration: none;
        transition: .25s filter
    }

    @media screen and (min-width: 768px) {
        .p-lineup__inbtn {
            position: absolute;
            bottom: 0;
            left: 0
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup__inbtn {
            margin-top: 2.6666666667vw;
            font-size: 3.2vw;
            border-radius: 0 0 12px 12px
        }
    }

    .p-lineup__inbtn .p-icon-arr-b {
        fill: #fff;
        top: .6em;
        margin-left: .6em
    }

    .p-lineup__note {
        font-size: 62.5%;
        margin-top: 1.5em
    }

    @media screen and (min-width: 768px) {
        .p-lineup__note {
            padding-right: 1em
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup__note {
            margin-top: 1em;
            margin-bottom: 1.2em;
            text-align: center
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup__fig {
            width: 55.5172413793%
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup__fig {
            position: absolute;
            left: 0;
            top: 0;
            width: 33.6vw
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup__wtxt {
            width: 40.5172413793%
        }
    }

    .p-lineup__lead {
        color: var(--accent);
        font-size: 81.25%;
        line-height: 1.5
    }

    @media screen and (max-width: 767px) {
        .p-lineup__lead {
            padding-left: 37.3333333333vw;
            padding-top: 5.8666666667vw;
            font-size: 3.2vw
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup__hdr {
            min-height: 29.8666666667vw
        }
    }

    .p-lineup__ttl {
        font-family: var(--en-sans);
        font-size: 175%;
        font-weight: 600
    }

    @media screen and (max-width: 767px) {
        .p-lineup__ttl {
            padding-left: 37.3333333333vw;
            font-size: 5.8666666667vw;
            line-height: 1.5
        }
    }

    .p-lineup__price {
        font-weight: 600;
        color: var(--accent);
        font-family: var(--en-js-sans);
        font-size: 87.5%
    }

    @media screen and (min-width: 768px) {
        .p-lineup__price {
            margin-top: .2em
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup__price {
            padding-left: 37.3333333333vw;
            font-size: 3.7333333333vw
        }

        .p-lineup__price small {
            font-size: 3.2vw
        }
    }

    .p-lineup__points {
        margin-top: 1.1538461538em;
        font-size: 81.25%
    }

    @media screen and (max-width: 767px) {
        .p-lineup__points {
            text-align: center;
            font-size: 3.2vw
        }

        .p-lineup__points li {
            display: inline-block;
            margin: 0 .4em .2em 0
        }
    }

    @media screen and (min-width: 768px) {
        .p-lineup__points li+li {
            margin-top: .4em
        }
    }

    .p-lineup__points .c-icon {
        top: .3em;
        font-size: 123.0769230769%;
        margin-right: 0.5em
    }

    @media screen and (max-width: 767px) {
        .p-lineup .p-btn-a, .p-lineup .p-btn-d {
            padding: 2.1333333333vw 5.3333333333vw 2.4vw 5.3333333333vw;
            font-size: 4.8vw;
            border-radius: 2.1333333333vw;
            width: 34.6666666667vw
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup .p-btn-a__label, .p-lineup .p-btn-d__label {
            font-size: 3.2vw
        }
    }

    @media screen and (max-width: 767px) {
        .p-lineup .p-icon-arr-b, .p-lineup .p-icon-arr-w {
            width: 2.6666666667vw;
            height: 2.1333333333vw
        }
    }
}

@layer project {
    .p-list-disc {
        list-style: disc;
        margin-left: 1.5em
    }

    .p-list-col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .4em 1%
    }

    .p-list-col.is-block {
        display: block
    }

    .p-list-col.is-block>li {
        width: auto
    }

    .p-list-col.is-block+ul {
        margin-top: .4em
    }

    @media screen and (max-width: 767px) {
        .p-list-col {
            gap: .4em 2%;
            font-size: 3.7333333333vw
        }
    }

    .p-list-col>li {
        position: relative;
        padding-left: 1em
    }

    @media screen and (min-width: 768px) {
        .p-list-col>li {
            width: 24%
        }
    }

    @media screen and (max-width: 767px) {
        .p-list-col>li {
            width: 48%
        }
    }

    .p-list-col>li::before {
        position: absolute;
        left: 0;
        top: .7em;
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        background: #00b4e1;
        border-radius: 100px
    }

    p+.p-list-order {
        margin-top: 1em
    }

    .p-list-order>li {
        position: relative;
        counter-increment: title;
        padding-left: 1.8em
    }

    .p-list-order>li+li {
        margin-top: .6em
    }

    .p-list-order>li .p-icon-blank-b {
        top: .6em;
        margin: 0 .3em
    }

    .p-list-order>li::before {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        margin-right: .2em;
        color: #00b4e1;
        content: counter(title) ".";
        font-weight: bold
    }

    .p-list-order ol {
        margin: .4em 0
    }

    @media screen and (min-width: 768px) {
        .p-list-order ol {
            font-size: 87.5%
        }
    }

    .p-list-order ol>li {
        text-indent: -1em;
        margin-left: 1em;
        margin-top: .2em
    }

    .p-list-order ol>li:nth-child(1)::before {
        content: "①"
    }

    .p-list-order ol>li:nth-child(2)::before {
        content: "②"
    }

    .p-list-order ol>li:nth-child(3)::before {
        content: "③"
    }

    .p-list-order ol>li:nth-child(4)::before {
        content: "④"
    }

    .p-list-order ol>li:nth-child(5)::before {
        content: "⑤"
    }

    .p-list-order ol>li:nth-child(6)::before {
        content: "⑥"
    }

    .p-list-order ol>li:nth-child(7)::before {
        content: "⑦"
    }

    .p-list-order ol>li:nth-child(8)::before {
        content: "⑧"
    }

    .p-list-order ol>li:nth-child(9)::before {
        content: "⑨"
    }

    .p-list-order ol>li:nth-child(10)::before {
        content: "⑩"
    }

    .p-list-order ol>li:nth-child(11)::before {
        content: "⑪"
    }

    .p-list-order ol>li:nth-child(12)::before {
        content: "⑫"
    }

    .p-list-order ol ol {
        font-size: 100%
    }

    .p-list-order ol ol>li {
        text-indent: 0
    }

    .p-list-order ol ol>li:nth-child(1)::before {
        content: "ⅰ"
    }

    .p-list-order ol ol>li:nth-child(2)::before {
        content: "ⅱ"
    }

    .p-list-order ol ol>li:nth-child(3)::before {
        content: "ⅲ"
    }

    .p-list-order ol ol>li:nth-child(4)::before {
        content: "ⅳ"
    }

    .p-list-order ol ol>li:nth-child(5)::before {
        content: "ⅴ"
    }

    .p-list-order ol ol>li:nth-child(6)::before {
        content: "ⅵ"
    }

    .p-list-order ol ol>li:nth-child(7)::before {
        content: "ⅶ"
    }

    .p-list-order ol ol>li:nth-child(8)::before {
        content: "ⅷ"
    }

    .p-list-order ol ol>li:nth-child(9)::before {
        content: "ⅸ"
    }

    *+.p-list-kv, *+.p-list-kv-a {
        margin-top: 1em
    }

    .p-list-kv dt {
        font-weight: bold
    }

    .p-list-kv dd+dt {
        margin-top: 1em
    }

    .p-list-kv-a dd+dt {
        margin-top: 1em
    }
}

@layer project {
    .p-login {
        text-align: center;
        padding: 1.25em;
        border-radius: 8px;
        background: #fff
    }

    @media screen and (max-width: 767px) {
        .p-login {
            padding: 5.3333333333vw;
            border-radius: 2.1333333333vw
        }
    }

    .p-login__txt {
        margin: 0.875em 0;
        font-size: 75%
    }

    @media screen and (max-width: 767px) {
        .p-login__txt {
            margin: 3.2vw 0;
            font-size: 3.2vw
        }
    }
}

@layer project {
    .p-lineup+.p-note {
        margin-top: 5em
    }

    @media screen and (max-width: 767px) {
        .p-lineup+.p-note {
            margin-top: 8vw
        }
    }

    .p-note {
        border: 1px solid var(--accent);
        padding: 2.5em;
        border-radius: 8px
    }

    @media screen and (max-width: 767px) {
        .p-note {
            padding: 8vw 6.9333333333vw
        }
    }

    .p-note__ttl {
        text-align: center;
        font-weight: 600;
        font-size: 112.5%;
        margin-bottom: 1.1111111111em;
        line-height: 1.5;
        letter-spacing: .1em
    }

    @media screen and (max-width: 767px) {
        .p-note__ttl {
            font-size: 4.2666666667vw
        }
    }

    .p-note__ttl .c-icon {
        font-size: 88.8888888889%;
        margin-right: 0.5em;
        top: .15em
    }

    @media screen and (max-width: 767px) {
        .p-note__ttl .c-icon {
            top: .2666666667vw;
            margin-right: 2.1333333333vw
        }
    }

    .p-note__list {
        font-size: 87.5%;
        letter-spacing: .1em
    }

    .p-note__list li {
        position: relative;
        padding-left: 1.2142857143em
    }

    .p-note__list li::before {
        position: absolute;
        left: 0;
        top: .7em;
        content: "";
        display: block;
        width: 0.5714285714em;
        height: 0.5714285714em;
        background: #00b4e1;
        border-radius: 100em
    }

    .p-note__list li+li {
        margin-top: .4em
    }
}

@layer project {
    @media screen and (min-width: 768px) {
        .l-page__sidebar .p-side-nav {
            position: sticky;
            top: 6.25em
        }
    }

    .p-side-nav {
        background: linear-gradient(#ddf8ff 0%, #f4fdff 100%);
        box-shadow: 0px 5px 10px rgba(0, 96, 178, .1)
    }

    @media screen and (min-width: 768px) {
        .p-side-nav {
            border-radius: 16px;
            padding: 0.875em 2.5em
        }
    }

    @media screen and (max-width: 767px) {
        .p-side-nav {
            background: linear-gradient(45deg, #ddf8ff 80%, #f4fdff 100%);
            box-shadow: 0px 5px 10px rgba(0, 96, 178, .1);
            overflow: auto
        }
    }

    @media screen and (max-width: 767px) {
        .p-side-nav__list {
            width: 317.3333333333vw;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            padding: 1.25em 0
        }
    }

    @media screen and (min-width: 768px) {
        .p-side-nav__list>li {
            border-top: 1px solid #d6ebf4
        }
    }

    @media screen and (max-width: 767px) {
        .p-side-nav__list>li {
            border-right: 1px solid #d6ebf4;
            white-space: nowrap
        }
    }

    .p-side-nav__list a {
        text-decoration: none;
        display: flex;
        flex-direction: row;
        gap: 0 0.625em
    }

    @media screen and (min-width: 768px) {
        .p-side-nav__list a {
            padding: 1.125em 0
        }

        .p-side-nav__list a.is-current {
            font-weight: bold;
            color: #00b4e1
        }
    }

    @media screen and (max-width: 767px) {
        .p-side-nav__list a {
            align-items: center;
            padding: 0 5.3333333333vw;
            line-height: 1.5
        }
    }

    .p-side-nav__list span {
        font-family: var(--en-sans);
        color: #03b4de;
        font-weight: normal;
        font-size: 112.5%
    }

    .p-side-nav__list span+p {
        width: calc(100% - 3.2em)
    }

    @media screen and (max-width: 767px) {
        .p-side-nav__list .c-icon {
            width: 3.2vw;
            height: 4.2666666667vw;
            fill: #00b4e1;
            margin-left: 1.0666666667vw
        }
    }
}

@layer project {
    .p-series {
        margin-top: 7.5em;
        position: relative;
        background: linear-gradient(90deg, #cbf5ff 0%, #f4fdff 100%)
    }

    @media screen and (min-width: 768px) {
        .p-series {
            padding: 7.5em 0
        }
    }

    @media screen and (max-width: 767px) {
        .p-series {
            background: linear-gradient(180deg, #cbf5ff 0%, #f4fdff 100%);
            margin-top: 0;
            padding: 16vw 0
        }
    }

    .p-series::after {
        pointer-events: none;
        content: "";
        display: block;
        position: absolute;
        background: 0 0/contain no-repeat;
        mix-blend-mode: multiply
    }

    @media screen and (max-width: 767px) {
        .p-series::before {
            content: "";
            display: block;
            position: absolute;
            background: 0 0/contain no-repeat;
            mix-blend-mode: multiply
        }
    }

    @media screen and (max-width: 767px)and (max-width: 767px) {
        .p-series::before {
            background-image: url("../img/content/lineup_r_sp.webp");
            right: -6.9333333333vw;
            top: 5.3333333333vw;
            width: 22.6666666667vw;
            height: 17.6vw
        }
    }

    .p-series::after {
        width: 92.25em;
        height: 67.1875em;
        background-image: url("../img/content/lineup.webp")
    }

    @media screen and (min-width: 768px) {
        .p-series::after {
            transform: translateX(-46.25em);
            top: 1.875em;
            left: 50%
        }
    }

    @media screen and (max-width: 767px) {
        .p-series::after {
            background-image: url("../img/content/lineup_l_sp.webp");
            left: -8vw;
            bottom: -4.2666666667vw;
            width: 20.8vw;
            height: 17.8666666667vw
        }
    }

    @media screen and (max-width: 767px) {
        .p-series .p-hdr-a__ttl {
            font-size: 8vw
        }
    }
}

@layer project {
    .p-tab {
        margin-top: 5.625em
    }

    @media screen and (max-width: 767px) {
        .p-tab {
            margin-top: 5.3333333333vw
        }
    }

    @media screen and (min-width: 768px) {
        .p-tab__panel {
            padding-top: 3.4375em
        }
    }

    .p-tab__list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%
    }

    .p-tab__list button {
        outline: none;
        border: 0;
        width: 50%;
        height: 5em;
        font-size: 150%;
        border: 1px solid #00b4e1;
        color: #00b4e1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 8px 0px 0px 8px
    }

    @media screen and (max-width: 767px) {
        .p-tab__list button {
            font-size: 4.2666666667vw;
            height: 16vw
        }
    }

    .p-tab__list button:nth-child(2) {
        border-radius: 0 8px 8px 0
    }

    .p-tab__list button[aria-selected=true] {
        color: #fff;
        background: linear-gradient(#03b4de 0%, #34d6ff 100%)
    }
}

@layer project {
    *+.p-txt {
        margin-top: 1em
    }

    .p-txt-SP-indent {
        margin-left: 1em
    }

    .p-txt-note {
        text-indent: -1em;
        margin-left: 1em
    }

    .p-txt-small {
        font-size: 90%
    }

    .p-txt-note-small {
        margin-top: .8em;
        text-indent: -1em;
        margin-left: 1em;
        font-size: 90%
    }

    .p-txt-content a {
        text-decoration: underline;
        transition: .25s color
    }

    @media(hover: hover) {
        .p-txt-content a:hover {
            color: #00b4e1
        }
    }

    .p-txt-content a[href*="tel:"] {
        text-decoration: none
    }
}

@layer project {
    .p-modal {
        overflow: auto;
        display: none;
        opacity: 0;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: rgba(0, 0, 0, .8);
        transition-property: opacity;
        transition-duration: .4s;
        box-sizing: border-box;
        text-align: center;
        padding-top: 16vw;
        padding-bottom: 50px
    }

    .p-modal img {
        width: 84vw
    }

    .p-modal__wbtn {
        text-align: center;
        margin-top: 10.6666666667vw
    }

    .p-modal__wrap {
        margin-top: 20px;
        transition-property: margin;
        transition-duration: .4s
    }

    @media screen and (min-width: 768px) {
        .p-modal__wrap {
            max-width: 60%
        }
    }

    @media screen and (max-width: 767px) {
        .p-modal__wrap {
            width: 84vw;
            margin-left: auto;
            margin-right: auto
        }
    }

    .p-modal__content {
        overscroll-behavior: contain;
        overflow: auto;
        position: relative;
        background: #fff;
        padding: 2em;
        width: 100%;
        max-height: 50vh;
        box-sizing: border-box;
        border: 2px solid #fff
    }

    .p-modal.is-show {
        opacity: 1
    }

    .p-modal.is-show .p-modal__content {
        margin-top: 0
    }

    .p-modal__close-btn {
        cursor: pointer;
        background: rgba(0, 0, 0, 0);
        position: fixed;
        right: 0;
        top: 0;
        border: 0;
        width: 46px;
        height: 46px;
        padding: 0
    }

    .p-modal__close-btn::before, .p-modal__close-btn::after {
        content: "";
        display: block;
        width: 70%;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 15%
    }

    .p-modal__close-btn::before {
        transform: rotate(-45deg)
    }

    .p-modal__close-btn::after {
        transform: rotate(45deg)
    }
}

@layer project {
    .p-confirm {
        margin: 3.125em 0 6.25em 0
    }

    .p-confirm__ttl {
        margin-bottom: 0.3125em;
        line-height: 1.5
    }

    @media screen and (min-width: 768px) {
        .p-confirm__list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 1em;
            font-size: 96%
        }

        .p-confirm__list>li {
            min-width: 20%
        }
    }

    @media screen and (max-width: 767px) {
        .p-confirm__list li+li {
            margin-top: .4em
        }
    }

    .p-confirm__list small {
        display: block;
        text-indent: -1em;
        margin-left: 1em
    }

    .p-confirm__list+.p-confirm__ttl {
        margin-top: 1.875em
    }
}

@layer utilities {
    .u-hide {
        display: none
    }
}

@layer utilities {
    @media screen and (max-width: 767px) {
        .u-hidden-ltSP {
            display: none
        }
    }

    @media screen and (max-width: 991px) {
        .u-hidden-ltTAB {
            display: none
        }
    }

    @media screen and (min-width: 768px) {
        .u-hidden-gtTAB {
            display: none
        }
    }

    @media screen and (min-width: 992px) {
        .u-hidden-gtPC {
            display: none
        }
    }
}

.u-g2-wrap, .u-g-wrap {
    position: relative
}

.u-g2 {
    position: absolute;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background-position: 50% 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 27.5em
}

@media screen and (max-width: 1316px)and (min-width: 767px) {
    .u-g2 {
        background-size: 106% auto !important
    }
}

.u-g2.is-2-1 {
    background-image: url("../img/content/g2_1.webp");
    background-size: 96.25em auto;
    top: 0
}

.u-g2.is-2-2 {
    background-image: url("../img/content/g2_2.webp");
    background-size: 96.25em auto;
    top: 66.25em
}

.u-g2.is-2-3 {
    background-image: url("../img/content/g2_3.webp");
    background-size: 100em auto;
    top: 150em
}

.u-g2.is-2-4 {
    background-image: url("../img/content/g2_4.webp");
    background-size: 93.75em auto;
    top: 228.75em
}

.u-g2.is-2-5 {
    background-image: url("../img/content/g2_5.webp");
    background-size: 96.25em auto;
    top: 310em
}

.u-g2.is-2-6 {
    background-image: url("../img/content/g2_6.webp");
    background-size: 96.25em auto;
    top: 372.5em
}

.u-g2.is-2-7 {
    background-image: url("../img/content/g2_7.webp");
    background-size: 96.25em auto;
    top: 441.25em
}

.u-g2.is-2-8 {
    background-image: url("../img/content/g2_8.webp");
    background-size: 100em auto;
    top: 525em
}

.u-g2.is-2-9 {
    background-image: url("../img/content/g2_9.webp");
    background-size: 91.25em auto;
    top: 603.125em
}

.u-g2.is-2-10 {
    background-image: url("../img/content/g2_10.webp");
    background-size: 97.5em auto;
    top: 690.625em
}

.u-g2.is-2-11 {
    background-image: url("../img/content/g2_11.webp");
    background-size: 97.5em auto;
    top: 738.75em
}

.u-g {
    position: absolute;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background-position: 50% 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 27.5em
}

.u-g.is-1 {
    background-size: 92.5em auto;
    background-image: url("../img/content/g_1.webp")
}

.u-g.is-2 {
    top: 105em;
    background-size: 92.5em auto;
    background-image: url("../img/content/g_2.webp")
}

.u-g.is-3 {
    top: 205em;
    background-size: 99.375em auto;
    background-image: url("../img/content/g_3.webp")
}

.u-g.is-4 {
    top: 305em;
    background-size: 92.5em auto;
    background-image: url("../img/content/g_4.webp")
}

.u-g.is-5 {
    top: 367.5em;
    background-size: 92.5em auto;
    background-image: url("../img/content/g_5.webp")
}

@layer utilities {
    @media screen and (max-width: 1316px)and (min-width: 767px) {
        .u-PC-pad {
            padding-right: 8%;
            padding-left: 8%
        }
    }

    @media screen and (max-width: 767px) {
        .u-SP-pad {
            padding-right: var(--sp-pad);
            padding-left: var(--sp-pad)
        }

        .u-SP-pt {
            padding-top: 6.6666666667vw
        }
    }

    @media screen and (min-width: 768px) {
        .u-pb {
            padding-bottom: 13.75em
        }
    }

    @media screen and (max-width: 767px) {
        .u-pb {
            padding-bottom: 21.3333333333vw
        }
    }

    @media screen and (max-width: 767px) {
        .u-pb.is-sp-gt {
            position: relative;
            background: url("../img/content/g2_sp2.webp") calc(100% + 6vw) 0/22.4vw 16.8vw no-repeat
        }
    }

    @media screen and (max-width: 767px) {
        .u-pb.is-sp-g {
            position: relative
        }

        .u-pb.is-sp-g::after {
            pointer-events: none;
            content: "";
            display: block;
            position: absolute;
            bottom: -8vw;
            left: -2.6666666667vw;
            background: 0 0/contain no-repeat;
            background-image: url("../img/content/g2_sp.webp");
            width: 28.2666666667vw;
            height: 23.7333333333vw
        }
    }
}

@layer utilities {
    .u-ovflow-hidden {
        overflow: hidden
    }

    @media screen and (min-width: 768px) {
        .u-ovflow-PC-hidden {
            overflow: hidden
        }
    }

    @media screen and (max-width: 767px) {
        .u-ovflow-SP-hidden {
            overflow: hidden
        }
    }
}

@layer utilities {
    .screen-reader-text, .u-screen-reader {
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        overflow: hidden;
        position: absolute !important;
        width: 1px;
        word-wrap: normal !important
    }
}

@layer utilities {
    .u-ta-left {
        text-align: left
    }

    .u-ta-center {
        text-align: center
    }

    .u-ta-right {
        text-align: right
    }

    @media screen and (max-width: 767px) {
        .u-SP-ta-left {
            text-align: left
        }

        .u-SP-ta-center {
            text-align: center
        }

        .u-SP-ta-right {
            text-align: right
        }
    }
}

@layer utilities {
    .u-ff-en {
        font-family: var(--en-sans)
    }
}
/*2024/05/01 KH追記*/
.is-right{
    text-align: right;
}