@charset "UTF-8";
:root {
    --color-white: #fff;
    --color-brown: #A58768;
    --color-beige: #FFFCF1;
    --color-blue: #0EA0B9;
    --color-pink: #EB878B;
    --color-yellow-text: #FF8B36;
    --color-yellow-item: #FFCF2A;
    --color-gray: #333;
    --color-gray-line: #444;
    --color-green: #389A6E;
    --color-room-pink: #FFDFDD;
    --color-service-yellow: #FFE690;
    --color-event-blue: #88C6DB;
    --color-reservation-yellow: #F7F040;
    --color-welcome-brown: #6E3E19;

    --radius-size: min(calc(60 * var(--scale-ratio)),60px);
    --radius-size-large: min(calc(200 * var(--scale-ratio)),200px);
    --radius-size-small: min(calc(26 * var(--scale-ratio)),26px);
    --radius-button01: min(calc(36 * var(--scale-ratio)),36px);
    --radius-button02: min(calc(46 * var(--scale-ratio)),46px);

    --width-pc: 1920;
    --inner-width: 1500px;
    --cover-width: 1720px;

    --scale-ratio: calc(100vw / 1500);
    --scale-ratio-hd: calc(100vw / var(--width-pc));

    @media screen and (max-width: 787px) {
        --scale-ratio: calc(100vw / 750);
        --radius-button01: calc(48 * var(--scale-ratio));
        --scale-ratio-hd: calc(100vw / 750);

        --inner-width: calc(550 * var(--scale-ratio));
        --cover-width: calc(650 * var(--scale-ratio));
    }
}

/* lp-main common parts
-----------------------------------------------------------------------*/
.lp-main {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: min(calc(18 * var(--scale-ratio)),18px);
    line-height: 1.55;
    background: var(--color-beige);

    .-ff-zen {
        font-family: "Zen Maru Gothic", sans-serif;
    }

    .line-txt {
        line-height: 1.27;
        white-space: nowrap;
        display: inline-block;
        &.-txt-pink {
            color: var(--color-pink);
            &::after {
                --color: var(--color-pink);
            }
        }
        &.-txt-blue {
            color: var(--color-blue);
            &::after {
                --color: var(--color-blue);
            }
        }
        &.-txt-yellow {
            color: var(--color-yellow-text);
            &::after {
                --color: var(--color-yellow-text);
            }
        }
        &.-txt-green {
            color: var(--color-green);
            &::after {
                --color: var(--color-green);
            }
        }
        &::after {
            --dot: min(calc(6 * var(--scale-ratio)),6px);
            --gap: min(calc(18 * var(--scale-ratio)),18px);

            content: "";
            background: repeating-radial-gradient(
                            circle at calc(var(--gap) / 2) 50%,
                            var(--color) 0 calc(var(--dot) / 2),
                            transparent calc(var(--dot) / 2) var(--gap)
                        );
            background-size: var(--gap) 100%;
            background-repeat: repeat-x;
            background-position: 50% 100%;
            display: block;
            height: var(--dot);
        }
        &:nth-of-type(odd)::after {
            background-position-x: 100%;
        }
        &:nth-of-type(even)::after {
            background-position-x: 0;
        }
    }

    .contents-cover {
        margin: auto;
        max-width: min(calc(1720 * var(--scale-ratio)),1720px);
        .sec-block {
            padding-left: min(calc(110 * var(--scale-ratio)),110px);
            padding-right: min(calc(110 * var(--scale-ratio)),110px);
        }
    }
    .sec-inner {
        margin: auto;
        max-width: var(--inner-width);
    }

    .sec-ti {
        margin: 0 auto min(calc(100 * var(--scale-ratio)),100px);
    }

    .welcome-baby {
        margin: 0 auto min(calc(50 * var(--scale-ratio)),50px);
        padding: min(calc(20 * var(--scale-ratio)),20px) min(calc(56 * var(--scale-ratio)),56px) min(calc(30 * var(--scale-ratio)),30px) min(calc(44 * var(--scale-ratio)),56px);
        border-radius: var(--radius-size-small);
        background: var(--color-white);
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: min(calc(50 * var(--scale-ratio)),50px);
        width: min(calc(948 * var(--scale-ratio)),948px);
        .frame {
            pointer-events: none;
            position: absolute;
            top: max(calc(-9 * var(--scale-ratio)),-9px);
            right: min(calc(6 * var(--scale-ratio)),6px);
            width: 100%;
            height: 100%;
            .border-svg {
                inset: 0;
                width: 100%;
                height: 100%;
            }
        }
        .img {
            width: min(calc(160 * var(--scale-ratio)),156px);
        }
        .txt {
            margin-bottom: 0;
            color: var(--color-welcome-brown);
            flex: 1;
        }
    }

    .check-box {
        margin: min(calc(80 * var(--scale-ratio)),80px) auto 0;
        padding: min(calc(41 * var(--scale-ratio)),41px) min(calc(40 * var(--scale-ratio)),40px) min(calc(57 * var(--scale-ratio)),57px);
        border-radius: var(--radius-size-small);
        background: var(--color-white);
        text-align: center;
        position: relative;
        width: min(calc(948 * var(--scale-ratio)),948px);
        .frame {
            pointer-events: none;
            position: absolute;
            top: max(calc(-9 * var(--scale-ratio)),-9px);
            right: min(calc(6 * var(--scale-ratio)),6px);
            width: 100%;
            height: 100%;
            .border-svg {
                inset: 0;
                width: 100%;
                height: 100%;
            }
        }
        .check-ti {
            line-height: 1;
            position: absolute;
            top: max(calc(-27 * var(--scale-ratio)),-27px);
            left: min(calc(37 * var(--scale-ratio)),37px);
            width: min(calc(108 * var(--scale-ratio)),108px);
        }
        .check-list {
            list-style: none;
            display: inline-flex;
            flex-direction: column;
            gap: min(calc(20 * var(--scale-ratio)),20px);
            li {
                padding-left: min(calc(54 * var(--scale-ratio)),54px);
                background: no-repeat 0 0 / min(calc(29 * var(--scale-ratio)),29px) auto;
                text-align: left;
                font-weight: bold;
                font-size: min(calc(28 * var(--scale-ratio)),28px);
                line-height: 1.35;
            }
        }
    }

    .column-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        &.-column3 {
            gap: min(calc(50 * var(--scale-ratio)),50px) min(calc(60 * var(--scale-ratio)),60px);
            .column-item {
                width: min(calc(450 * var(--scale-ratio)),450px);
                flex-shrink: 0;
                figcaption {
                    padding: min(calc(25 * var(--scale-ratio)),25px) min(calc(25 * var(--scale-ratio)),25px) 0;
                    font-size: min(calc(18 * var(--scale-ratio)),18px);
                    font-weight: 500;
                    line-height: 1.55;
                }
            }
        }
    }
    p:last-child {
        margin-bottom: 0;
    }
    img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
        &.lazy {
            opacity: 0;
        }
        &:not(.initial) {
            transition: opacity 0.5s;
        }
        &.initial,
        &.loaded,
        &.error {
            opacity: 1;
        }
    }
    a {
        transition: opacity .25s;
        color: inherit;
        &:hover {
            opacity: .7;
        }
    }
    .em {
        font-style: normal;
    }
    .lp-main ul {
        list-style: none;
    }
    .-round {
        img {
            border-radius: var(--radius-size);
            overflow: hidden;
        }
    }
    .-block {
        display: block;
    }
    .ta-center {
        text-align: center;
    }
}


@media screen and (max-width: 1500px) {
    .lp-main {
        overflow-x: hidden;
    }
}

@media screen and (max-width: 1500px) and (min-width: 788px) {
    .lp-main{
        .contents-cover {
            .sec-block {
                padding-left: 0;
                padding-right: 0;
            }
        }
        .sec-inner {
            padding: 0 min(50 * var(--scale-ratio), 50px);
        }
    }
}

@media screen and (min-width: 788px) {
    .sp {
        display: none;
    }
}

@media screen and (max-width: 787px) {
    .lp-main {
        font-size: 14px;

        .pc {
            display: none;
        }

        .contents-cover {
            width: calc(650 * var(--scale-ratio));
            .sec-block {
                padding-left: 0;
                padding-right: 0;
            }
            .sec-inner {
                width: var(--inner-width);
            }
        }
        .welcome-baby {
            padding: calc(44 * var(--scale-ratio)) calc(45 * var(--scale-ratio)) calc(50 * var(--scale-ratio));
            flex-direction: column;
            width: 100%;
        }
        .check-box {
            padding: min(calc(42 * var(--scale-ratio)),42px) min(calc(42 * var(--scale-ratio)),42px) min(calc(49 * var(--scale-ratio)),49px);
            width: 100%;
            .check-ti {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
            .check-list {
                display: flex;
                li {
                    font-size: 14px;
                }
            }
        }
        .column-list {
            margin: auto;
            flex-direction: column;
            align-items: center;
            &.-column3 {
                gap: calc(50 * var(--scale-ratio));
                .column-item {
                    figcaption {
                        font-size: 14px;
                        line-height: 1.35;
                    }
                }
            }
        }
    }
}


.lp-main .sec-txt h2, .lp-main .sec-txt h3, .lp-main .sec-txt h4, .lp-main .sec-txt h5, .lp-main .sec-txt h4, .lp-main .sec-txt p, .lp-main .sec-txt li, .lp-main .sec-txt dt, .lp-main .sec-txt dd, .lp-main table p {
    transform: rotate(-0.3deg);
}

/* fv-header
-----------------------------------------------------------------------*/
.fv-header {
    position: relative;
    max-height: calc(975 * var(--scale-ratio-hd));
    height: 100vh;
    .fv-img {
        position: absolute;
        right: 0;
        top: 0;
        width: min(calc(1577 * var(--scale-ratio-hd)),1577px);
        img {
            max-width: unset;
        }
        .parts {
            margin-top: 120px;
            position: absolute;
            pointer-events: none;
            &.-parts01 {
                top: calc(46 * var(--scale-ratio-hd));
                right: calc(18 * var(--scale-ratio-hd));
                width: calc(163 * var(--scale-ratio-hd));
            }
            &.-parts02 {
                top: calc(100 * var(--scale-ratio-hd));
                left: 0;
                width: calc(139 * var(--scale-ratio-hd));
                animation-delay: 0.2s;
            }
        }
    }
    .fv-ttl {
        margin-left: max(calc(-612 * var(--scale-ratio-hd)),-612px);
        position: absolute;
        top: min(calc(194 * var(--scale-ratio-hd)),194px);
        left: 50%;
        transform: translateX(-50%);
        width: min(calc(650 * var(--scale-ratio-hd)),650px);
        span {
            line-height: 1px;
        }
        .ttl01 {
            width: min(calc(253 * var(--scale-ratio-hd)),253px);
        }
        .ttl02 {
            margin-top: max(calc(-20 * var(--scale-ratio-hd)),-20px);
            margin-left: min(calc(87 * var(--scale-ratio-hd)),87px);
            margin-bottom: min(calc(28 * var(--scale-ratio-hd)),28px);
            width: min(calc(438 * var(--scale-ratio-hd)),438px);
        }
        .ttl03 {
            margin-left: min(calc(99 * var(--scale-ratio-hd)),99px);
            width: min(calc(550 * var(--scale-ratio-hd)),550px);
        }
    }
}

@media screen and (max-width: 1500px) and (min-width: 788px) {
    .fv-header {
        .fv-ttl {
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
}

@media screen and (max-width: 787px) {
    .fv-header {
        min-height: calc(1330 * var(--scale-ratio));
        .fv-img {
            width: 100%;
            .parts {
                margin-top: 60px;
                &.-parts01 {
                    right: auto;
                    top: calc(21 * var(--scale-ratio-hd));
                    left: calc(17 * var(--scale-ratio-hd));
                    width: calc(208 * var(--scale-ratio-hd));
                }
            }
        }
        .fv-ttl {
            margin-left: 0;
            position: absolute;
            transform: translateX(0);
            top: calc(589 * var(--scale-ratio-hd));
            left: calc(-15 * var(--scale-ratio-hd));
            width: calc(590 * var(--scale-ratio-hd));
            .ttl01 {
                width: min(calc(253 * var(--scale-ratio-hd)),253px);
            }
            .ttl02 {
                margin-top: calc(-16 * var(--scale-ratio-hd));
                margin-left: calc(39 * var(--scale-ratio-hd));
                margin-bottom: calc(28 * var(--scale-ratio-hd));
                width: calc(427 * var(--scale-ratio-hd));
            }
            .ttl03 {
                margin-left: calc(40 * var(--scale-ratio-hd));
                width: min(calc(550 * var(--scale-ratio-hd)),550px);
            }
        }
    }
}

/* scrollTrigger
-----------------------------------------------------------------------*/
.scrollTrigger {
    &.anime-popup.is-active {
        animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    &.anime-bounce.is-active {
        animation: bounce 2s linear;
    }
    &.anime-rotate.is-active {
        animation: rotate 1.5s;
    }
}

@keyframes popup {
    0% {
        transform: translateY(40px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1.0);
    }
    80%, 100% {
        opacity: 1;
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-10px);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
    40% {
        transform: translateY(0);
    }
}

@keyframes rotate {
    0%,100% {
        transform: rotate(0);
    }
    25%,75% {
        transform: rotate(-6deg);
    }
    50% {
        transform: rotate(6deg);
    }
}

/* art
-----------------------------------------------------------------------*/
.lp-main {
    .art {
        pointer-events: none;
        position: absolute;
        &.-intro {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: min(calc(1717 * var(--scale-ratio)),1717px);
            .parts.-parts01 {
                top: min(calc(513 * var(--scale-ratio)),513px);
                right: min(calc(210 * var(--scale-ratio)),210px);
                width: min(calc(129 * var(--scale-ratio)),129px);
            }
            .parts.-parts02 {
                bottom: min(calc(70 * var(--scale-ratio)),70px);
                right: min(calc(405 * var(--scale-ratio)),405px);
                width: min(calc(103 * var(--scale-ratio)),103px);
                animation-delay: 0.2s;
            }
            @media screen and (max-width: 787px) {
                bottom: calc(38 * var(--scale-ratio));
                width: calc(694 * var(--scale-ratio));
                .parts.-parts02 {
                    bottom: auto;
                    right: auto;
                    top: 0;
                    left: 0;
                    width: calc(103 * var(--scale-ratio-hd));
                }
            }
        }
        &.-chick {
            top: 0;
            left: max(calc(-77 * var(--scale-ratio)),-77px);
            width: min(calc(57 * var(--scale-ratio)),57px);
            @media screen and (max-width: 787px) {
                left: calc(-87 * var(--scale-ratio));
            }
        }
        &.-anchor01 {
            top: calc(134 * var(--scale-ratio));
            right: calc(-224 * var(--scale-ratio));
            width: calc(139 * var(--scale-ratio));
        }
        &.-anchor02 {
            top: calc(181 * var(--scale-ratio));
            left: calc(-247 * var(--scale-ratio));
            width: calc(157 * var(--scale-ratio));
        }
        &.-anchor03 {
            top: calc(170 * var(--scale-ratio));
            right: calc(-199 * var(--scale-ratio));
            width: calc(139 * var(--scale-ratio));
        }
        &.-room {
            margin-left: min(calc(8 * var(--scale-ratio)),8px);
            left: 50%;
            transform: translateX(-50%);
            bottom: 100%;
            width: min(calc(1425 * var(--scale-ratio)),1425px);
            .parts {
                bottom: 0;
                right: 0;
                width: min(calc(133 * var(--scale-ratio)),129px);
            }
            @media screen and (max-width: 787px) {
                margin-left: calc(-11 * var(--scale-ratio));
                width: calc(343 * var(--scale-ratio));
                .parts {
                    width: calc(114 * var(--scale-ratio));
                }
            }
        }
        &.-welcome {
            right: max(calc(-32 * var(--scale-ratio)),-32px);
            bottom: max(calc(-13 * var(--scale-ratio)),-13px);
            width: min(calc(70 * var(--scale-ratio)),70px);
            @media screen and (max-width: 787px) {
                bottom: auto;
                right: auto;
                left: 0;
                top: max(calc(-38 * var(--scale-ratio)),-38px);
                width: min(calc(90 * var(--scale-ratio)),90px);
            }
        }
        &.-room01 {
            right: 0;
            bottom: min(calc(38 * var(--scale-ratio)),39px);
            width: min(calc(178 * var(--scale-ratio)),178px);
        }
        &.-room02 {
            left: 0;
            bottom: min(calc(39 * var(--scale-ratio)),39px);
            width: min(calc(191 * var(--scale-ratio)),191px);
        }
        &.-service-top {
            left: min(calc(160 * var(--scale-ratio)),160px);
            bottom: 100%;
            width: min(calc(100 * var(--scale-ratio)),100px);
            @media screen and (max-width: 787px) {
                left: calc(110 * var(--scale-ratio));
                width: calc(100 * var(--scale-ratio));
            }
        }
        &.-service01 {
            right: min(calc(68 * var(--scale-ratio)),68px);
            bottom: min(calc(105 * var(--scale-ratio)),105px);
            width: min(calc(130 * var(--scale-ratio)),130px);
            @media screen and (max-width: 787px) {
                right: 0;
                bottom: calc(49 * var(--scale-ratio));
                width: calc(107 * var(--scale-ratio));
            }
        }
        &.-service02 {
            right: max(calc(-36 * var(--scale-ratio)),-36px);
            bottom: 0;
            width: min(calc(185 * var(--scale-ratio)),185px);
            @media screen and (max-width: 787px) {
                right: calc(-22 * var(--scale-ratio));
                bottom: calc(-31 * var(--scale-ratio));
            }
        }
        &.-service03 {
            left: min(calc(46 * var(--scale-ratio)),46px);
            top: min(calc(568 * var(--scale-ratio)),568px);
            width: min(calc(139 * var(--scale-ratio)),139px);
            @media screen and (max-width: 787px) {
                left: calc(-35 * var(--scale-ratio));
                top: calc(208 * var(--scale-ratio));
            }
        }
        &.-service04 {
            right: min(calc(-10 * var(--scale-ratio)),-10px);
            top: min(calc(152 * var(--scale-ratio)),152px);
            width: min(calc(180 * var(--scale-ratio)),180px);
            @media screen and (max-width: 787px) {
                right: calc(-94 * var(--scale-ratio));
                top: calc(40 * var(--scale-ratio));
            }
        }
        &.-event-top {
            margin-bottom: max(calc(-8 * var(--scale-ratio)),-8px);
            left: 50%;
            transform: translateX(-50%);
            bottom: 100%;
            width: min(calc(78 * var(--scale-ratio)),78px);
        }
        &.-event-foot {
            margin-left: max(calc(-42 * var(--scale-ratio)),-42px);
            left: 50%;
            transform: translateX(-50%);
            bottom: max(calc(-162 * var(--scale-ratio)),-162px);
            width: min(calc(1400 * var(--scale-ratio)),1400px);
            .parts {
                left: 0;
                bottom: 0;
                width: min(calc(208 * var(--scale-ratio)),208px);
            }
            @media screen and (max-width: 787px) {
                margin-left: calc(-91 * var(--scale-ratio));
                bottom: max(calc(-145 * var(--scale-ratio)),-145px);
                width: calc(444 * var(--scale-ratio));
            }
        }
        &.-reservation01 {
            z-index: 5;
            left: min(calc(12 * var(--scale-ratio)),12px);
            bottom: max(calc(-10 * var(--scale-ratio)),-10px);
            width: min(calc(616 * var(--scale-ratio)),616px);
        }
        &.-reservation02 {
            left: 50%;
            transform: translateX(-50%);
            bottom: max(calc(-28 * var(--scale-ratio)),-28px);
            width: min(calc(1503 * var(--scale-ratio)),1503px);
            .parts {
                left: min(calc(161 * var(--scale-ratio)),161px);
                top: 0;
                width: min(calc(104 * var(--scale-ratio)),104px);
            }
            @media screen and (max-width: 787px) {
                margin-left: calc(-18 * var(--scale-ratio));
                bottom: calc(33 * var(--scale-ratio));
                width: calc(615 * var(--scale-ratio));
                .parts {
                    left: auto;
                    right: 0;
                }
            }
        }
        .parts {
            position: absolute;
        }
    }
}

/* sec-intro
-----------------------------------------------------------------------*/
.sec-intro {
    padding: min(calc(240 * var(--scale-ratio)),240px) 0 min(calc(150 * var(--scale-ratio)),150px);
    .txt-intro {
        margin: auto;
        padding-bottom: min(calc(232 * var(--scale-ratio)),232px);
        position: relative;
        .txt-lead {
            color: var(--color-brown);
            font-weight: 500;
            font-size: min(calc(28 * var(--scale-ratio)),28px);
            line-height: 2.07;
            &:nth-of-type(n+2) {
                margin-top: min(calc(100 * var(--scale-ratio)),100px);
            }
            &.-lead01 {
                font-size: min(calc(48 * var(--scale-ratio)),48px);
            }
            &.-lead02 {
                .line-txt {
                    position: relative;
                };
            }
            .line-txt {
                --gap: min(calc(23 * var(--scale-ratio)),23px);
                &::after {
                    background-position-x: 0;
                }
            }
        }
    }
}

.anchor-list {
    margin-right: min(calc(18 * var(--scale-ratio)),18px);
    display: flex;
    justify-content: center;
    .anchor-item {
        &.-room {
            margin-right: min(calc(18 * var(--scale-ratio)),18px);
            width: min(calc(414 * var(--scale-ratio)),414px);
        }
        &.-service {
            margin-top: min(calc(76 * var(--scale-ratio)),76px);
            margin-right: min(calc(55 * var(--scale-ratio)),55px);
            width: min(calc(410 * var(--scale-ratio)),410px);
        }
        &.-event {
            margin-top: min(calc(15 * var(--scale-ratio)),15px);
            width: min(calc(372 * var(--scale-ratio)),372px);
        }
    }
}

@media screen and (max-width: 787px) {
    .sec-intro {
        padding: calc(120 * var(--scale-ratio)) 0 calc(200 * var(--scale-ratio));
        .sec-inner {
            position: relative;
            max-width: 100%;
        }
        .txt-intro {
            margin-bottom: calc(155 * var(--scale-ratio));
            padding-bottom: 0;
            position: relative;
            width: calc(624 * var(--scale-ratio));
            .txt-lead:nth-of-type(n+2) {
                margin-top: calc(80 * var(--scale-ratio));
            }
        }
    }

    .anchor-cover {
        margin: auto;
        width: calc(650 * var(--scale-ratio));
    }
    .anchor-list {
        margin-right: 0;
        flex-direction: column;
        gap: calc(50 * var(--scale-ratio));
        .anchor-item {
            position: relative;
            &.-room {
                margin-right: auto;
            }
            &.-service {
                margin: 0 0 0 auto;
            }
            &.-event {
                margin-top: 0;
            }
        }
    }
}

/* fixed-anchor
-----------------------------------------------------------------------*/
.fixed-anchor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform .5s linear;
    &.is-fixed {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .anchor-list {
        gap: min(calc(10 * var(--scale-ratio)),10px);
        transform: scale(0.9);
        .anchor-item {
            height: min(calc(135 * var(--scale-ratio)),135px);
            a {
                background: no-repeat 50% 100% / 100% auto;
                width: 100%;
                height: 100%;
            }
            figure {
                display: none;
            }
            &.-room {
                margin: 0;
                width: min(calc(402 * var(--scale-ratio)),402px);
                a {
                    background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/img_intro01_fixed.svg");
                }
            }
            &.-service {
                margin: 0;
                width: min(calc(374 * var(--scale-ratio)),374px);
                a {
                    background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/img_intro02_fixed.svg");
                }
            }
            &.-event {
                margin: 0;
                width: min(calc(391 * var(--scale-ratio)),391px);
                a {
                    background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/img_intro03_fixed.svg");
                }
            }
        }
    }
}
@media screen and (max-width: 787px) {
    .fixed-anchor {
        bottom: calc(10 * var(--scale-ratio));
        .sec-inner {
            width: 100%;
        }
        .anchor-list {
            transform: scale(1);
            flex-direction: row;
            gap: min(calc(20 * var(--scale-ratio)),10px);
            .anchor-item {
                height: min(calc(142 * var(--scale-ratio)),135px);
                &.-room {
                    margin: 0;
                    width: calc(236 * var(--scale-ratio));
                    a {
                        background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/img_intro01_fixed_sp.svg");
                    }
                }
                &.-service {
                    margin: 0;
                    width: calc(204 * var(--scale-ratio));
                    a {
                        background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/img_intro02_fixed_sp.svg");
                    }
                }
                &.-event {
                    margin: 0;
                    width: calc(204 * var(--scale-ratio));
                    a {
                        background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/img_intro03_fixed_sp.svg");
                    }
                }
            }
        }
    }
}

/* sec-room
-----------------------------------------------------------------------*/
.sec-room {
    padding: min(calc(150 * var(--scale-ratio)),150px) 0 min(calc(400 * var(--scale-ratio)),400px);
    border-radius: var(--radius-size-large) var(--radius-size-large) 0 0;
    background: var(--color-room-pink);
    color: var(--color-gray);
    position: relative;
    .room-name, .relieved-item .ttl {
        color: var(--color-yellow-text);
    }
    .sec-ti {
        position: relative;
        width: min(calc(809 * var(--scale-ratio)),809px);
        .parts {
            position: absolute;
            left: min(calc(35 * var(--scale-ratio)),35px);
            top: 0;
            width: min(calc(173 * var(--scale-ratio)),173px);
        }
    }
    .room-ti {
        margin-bottom: min(calc(50 * var(--scale-ratio)),50px);
        font-size: min(calc(48 * var(--scale-ratio)),48px);
    }
    .room-item {
        padding: min(calc(127 * var(--scale-ratio)),114px) 0 min(calc(100 * var(--scale-ratio)),100px);
        position: relative;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/line_wave.svg") no-repeat 50% 0 / auto 100%;
            max-width: min(calc(1500 * var(--scale-ratio)),1500px);
            width: 100%;
            height: min(calc(27 * var(--scale-ratio)),27px);
        }
        &.-room01 {
            padding-top: 0;
            &::before {
                display: none;
            }
        }
        &.-room03 {
            padding-bottom: 0;
            .room-slide-container {
                width: min(calc(600 * var(--scale-ratio)),600px);
            }
        }
    }
    .room-view-item {
        margin-bottom: min(calc(70 * var(--scale-ratio)),70px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: min(calc(80 * var(--scale-ratio)),80px);
        &.-reserve {
            flex-direction: row-reverse;
            .room-slide-container {
                margin: 0 min(calc(30 * var(--scale-ratio)),30px) 0 0;
            }
        }
        .room-slide-container {
            margin-left: min(calc(30 * var(--scale-ratio)),30px);
            position: relative;
            width: min(calc(750 * var(--scale-ratio)),750px);
            .swiper-button-prev,
            .swiper-button-next {
                margin: 0;
                border: none;
                background: transparent;
                color: transparent;
                font-size: 0;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                justify-content: center;
                align-items: center;
                width: min(calc(60 * var(--scale-ratio)),60px);
                height: min(calc(60 * var(--scale-ratio)),60px);
                &::before {
                    content: "";
                    pointer-events: none;
                    border-radius: 100%;
                    background: var(--color-yellow-item);
                    position: absolute;
                    top: min(calc(4 * var(--scale-ratio)),4px);
                    left: min(calc(4 * var(--scale-ratio)),4px);
                    display: block;
                    width: min(calc(58 * var(--scale-ratio)),58px);
                    height: min(calc(58 * var(--scale-ratio)),58px);
                }
                &::after {
                    content: "";
                    pointer-events: none;
                    border-radius: 100%;
                    border: 3px solid var(--color-gray-line);
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                .ico-arrow {
                    pointer-events: none;
                    background: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/ico_arrow.svg") no-repeat 50% 50% / contain;
                    position: relative;
                    display: block;
                    width: min(calc(16 * var(--scale-ratio)),16px);
                    height: min(calc(27 * var(--scale-ratio)),27px);
                }
            }
            .swiper-button-prev {
                left: max(calc(-30 * var(--scale-ratio)),-30px);
                .ico-arrow {
                    margin-right: min(calc(3 * var(--scale-ratio)),3px);
                    transform: scaleX(-1);
                }
            }
            .swiper-button-next {
                right: max(calc(-30 * var(--scale-ratio)),-30px);
                .ico-arrow {
                    margin-left: min(calc(3 * var(--scale-ratio)),3px);
                }
            }
        }
        .room-body {
            flex: 1;
            .room-name {
                margin-bottom: min(calc(25 * var(--scale-ratio)),25px);
                font-weight: bold;
                font-size: min(calc(38 * var(--scale-ratio)),38px);
                line-height: 1.26;
            }
            .list{
                list-style: none;
                li {
                text-indent: -1em;
                padding-left: 1em;
                font-size: min(calc(14 * var(--scale-ratio)),14px);
                line-height: 1.57;
                }
            }
        }
        .btn-detail {
            margin-top : min(calc(20 * var(--scale-ratio)),20px);
            width: min(calc(248 * var(--scale-ratio)),248px);
            height: min(calc(68 * var(--scale-ratio)),68px);
            a {
                padding: 0 min(calc(6 * var(--scale-ratio)),6px) min(calc(6 * var(--scale-ratio)),6px) 0;
                border-radius: var(--radius-button01);
                background: var(--color-yellow-item);
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                .btn-txt {
                    line-height: 1;
                    font-weight: bold;
                    font-size: min(calc(22 * var(--scale-ratio)),22px);
                }
                &::before {
                    content: "";
                    pointer-events: none;
                    border-radius: var(--radius-button01);
                    border: 3px solid var( --color-gray-line);
                    position: absolute;
                    top: max(calc(-3 * var(--scale-ratio)),-3px);
                    left: max(calc(-3 * var(--scale-ratio)),--color-event-blue);
                    width: min(calc(250 * var(--scale-ratio)),248px);
                    height: min(calc(70 * var(--scale-ratio)),68px);
                }
                &::after {
                    content: "";
                    pointer-events: none;
                    background: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/ico_arrow.svg") no-repeat 50% 50% / contain;
                    position: absolute;
                    top: 50%;
                    right: min(calc(26 * var(--scale-ratio)),26px);
                    transform: translateY(calc(-50% - 1px));
                    width: min(calc(10 * var(--scale-ratio)),10px);
                    height: min(calc(16 * var(--scale-ratio)),16px);
                }
            }
        }
    }
    .relieved-item {
        position: relative;
        .ttl {
            margin-bottom: min(calc(40 * var(--scale-ratio)),40px);
            text-align: center;
            &::before, &::after {
                content: "";
                border-radius: min(calc(3 * var(--scale-ratio)),3px);
                background: var(--color-yellow-text);
                vertical-align: middle;
                display: inline-block;
                width: min(calc(3 * var(--scale-ratio)),3px);
                height: min(calc(75 * var(--scale-ratio)),75px);
                transform: scaleY(-1) skewX(-17deg);
            }
            &::before {
                margin-right: min(calc(10 * var(--scale-ratio)),10px);
            }
            &::after {
                transform: scaleY(-1) skewX(17deg);
            }
        }
        .ttl-txt {
            font-weight: bold;
            font-size: min(calc(28 * var(--scale-ratio)),28px);
            line-height: 1.35;
            vertical-align: middle;
            display: inline-block;
        }
        .relieved-column {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: min(calc(50 * var(--scale-ratio)),50px);
            .img {
                position: relative;
                width: min(calc(388 * var(--scale-ratio)),334px);
                .parts {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: min(calc(133 * var(--scale-ratio)),133px);
                    pointer-events: none;
                }
            }
            .item-list {
                width: min(calc(610 * var(--scale-ratio)),610px);
                li{
                    padding-right: 0.8em;
                    font-weight: 500;
                    font-size: min(calc(23 * var(--scale-ratio)),23px);
                    line-height: 1.45;
                    display: inline-block;
                }
            }
        }
    }
    .check-box {
        margin-bottom: min(calc(100 * var(--scale-ratio)),100px);
        &:last-child {
            margin-bottom: 0;
        }
        .check-list {
            li {
                background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/ico_leaf01.svg");
            }
        }
    }
}

@media screen and (max-width: 787px) {
    .sec-room {
        padding-top: calc(75 * var(--scale-ratio));
        .sec-ti {
            width: calc(502 * var(--scale-ratio));
            .parts {
                left: calc(165 * var(--scale-ratio));
                top: 0;
            }
        }
        .room-ti {
            margin-left: -1em;
            margin-right: -1em;
        }
        .room-item {
            padding: calc(165 * var(--scale-ratio)) 0 calc(150 * var(--scale-ratio));
            &::before {
                background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/line_wave_sp.svg");
            }
            &.-room03 {
                .room-view-item .room-slide-container {
                    width: calc(450 * var(--scale-ratio));
                }
            }
        }
        .room-view-item {
            &, &.-reserve {
                flex-direction: column;
                gap: calc(50 * var(--scale-ratio));
                .room-slide-container {
                    margin: 0 auto;
                    width: 100%;
                    .swiper-button-prev,
                    .swiper-button-next {
                        &::after {
                            border-width: 2px;
                        }
                    }
                }
                .room-body {
                    flex-shrink: 0;
                    width: calc(450 * var(--scale-ratio));
                    .room-name {
                        font-size: 19px;
                    }
                    .txt {
                        line-height: 1.35;
                    }
                    .list{
                        li {
                            font-size: 9px;
                        }
                    }
                }
                .btn-detail {
                    margin-top: calc(55 * var(--scale-ratio));
                    width: 100%;
                    height: calc(95 * var(--scale-ratio));
                    a {
                        .btn-txt {
                            font-size: 14px;
                        }
                        &::before {
                            width: 100%;
                            height: calc(97 * var(--scale-ratio));
                        }
                        &::after {
                            width: calc(14 * var(--scale-ratio));
                            height: calc(22 * var(--scale-ratio));
                        }
                    }
                }
            }
        }
        .relieved-item {
            .ttl {
                margin-bottom: calc(50 * var(--scale-ratio));
            }
            .ttl-txt {
                font-size: 14px;
            }
            .relieved-column {
                flex-direction: column;
                .img {
                    margin-left: calc(-28 * var(--scale-ratio));
                }
                .item-list {
                    padding-left: calc(50 * var(--scale-ratio));
                    width: 100%;
                    li{
                        font-size: 14px;
                        line-height: 1.35;
                    }
                }
            }
        }
    }
}

/* sec-service
-----------------------------------------------------------------------*/
.sec-service {
    margin-top: max(calc(-200 * var(--scale-ratio)),-200px);
    padding: min(calc(150 * var(--scale-ratio)),150px) 0 min(calc(400 * var(--scale-ratio)),400px);
    border-radius: var(--radius-size-large) var(--radius-size-large) 0 0;
    background: var(--color-service-yellow);
    color: var(--color-gray);
    position: relative;
    .service-ti, .column-item .ttl {
        color: var(--color-green);
    }
    .sec-ti {
        position: relative;
        width: min(calc(684 * var(--scale-ratio)),684px);
        .parts {
            position: absolute;
            left: min(calc(84 * var(--scale-ratio)),84px);
            top: 0;
            width: min(calc(144 * var(--scale-ratio)),144px);
        }
    }
    .service-item {
        padding: min(calc(142 * var(--scale-ratio)),142px) 0 min(calc(100 * var(--scale-ratio)),100px);
        position: relative;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/line_wave.svg") no-repeat 50% 0 / auto 100%;
            max-width: min(calc(1500 * var(--scale-ratio)),1500px);
            width: 100%;
            height: min(calc(27 * var(--scale-ratio)),27px);
        }
        &.-service01 {
            padding-top: 0;
            &::before {
                display: none;
            }
        }
        &.-service04 {
            padding-bottom: 0;
        }
    }
    .service-ti {
        margin-bottom: min(calc(50 * var(--scale-ratio)),50px);
        font-size: min(calc(48 * var(--scale-ratio)),48px);
    }
    .column-list {
        .column-item {
            figcaption {
                .ttl {
                    margin-bottom: min(calc(10 * var(--scale-ratio)),10px);
                    font-weight: bold;
                    font-size: min(calc(28 * var(--scale-ratio)),28px);
                }
            }
        }
    }
    .check-box {
        .check-list {
            li {
                background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/ico_leaf02.svg");
            }
        }
    }
}
@media screen and (max-width: 787px) {
    .sec-service {
        margin-top: calc(-250 * var(--scale-ratio));
        .sec-ti {
            width: 100%;
            .parts {
                left: calc(203 * var(--scale-ratio));
                top: 0;
            }
        }
        .service-item {
            padding: calc(193 * var(--scale-ratio)) 0 calc(150 * var(--scale-ratio));
            &::before {
                background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/line_wave_sp.svg");
            }
            &.-service01 {
                padding-top: 0;
                .-sp-scroll {
                    margin-left: calc(-50 * var(--scale-ratio));
                    margin-right: calc(-50 * var(--scale-ratio));
                    padding-left: calc(50 * var(--scale-ratio));
                    overflow-x: scroll;
                    width: calc(650 * var(--scale-ratio));
                    .column-list {
                        flex-wrap: nowrap;
                        flex-direction: row;
                        justify-content: flex-start;
                        width: auto;
                        &::after {
                            content: "";
                            margin-left: calc(-50 * var(--scale-ratio));
                            width: calc(50 * var(--scale-ratio));
                            flex-shrink: 0;
                            height: calc(50 * var(--scale-ratio));
                            display: block;
                            pointer-events: none;
                        }
                    }
                }
            }
        }
        .column-list {
            .column-item {
                figcaption {
                    .ttl {
                        margin-bottom: min(calc(10 * var(--scale-ratio)),10px);
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

/* sec-event
-----------------------------------------------------------------------*/
.sec-event {
    margin-top: max(calc(-200 * var(--scale-ratio)),-200px);
    padding: min(calc(150 * var(--scale-ratio)),150px) 0 min(calc(250 * var(--scale-ratio)),250px);
    border-radius: var(--radius-size-large);
    background: var(--color-event-blue);
    color: var(--color-gray-line);
    position: relative;
    .sec-ti {
        position: relative;
        width: min(calc(748 * var(--scale-ratio)),748px);
        .parts {
            position: absolute;
            left: min(calc(102 * var(--scale-ratio)),102px);
            top: 0;
            width: min(calc(138 * var(--scale-ratio)),138px);
        }
    }
}

@media screen and (max-width: 787px) {
    .sec-event {
        margin-top: calc(-250 * var(--scale-ratio));
        padding-bottom: calc(150 * var(--scale-ratio));
        .sec-ti {
            width: 100%;
            .parts {
                left: calc(206 * var(--scale-ratio));
                top: 0;
            }
        }
    }
}

/* sec-reservation
-----------------------------------------------------------------------*/
.sec-reservation {
    padding: min(calc(200 * var(--scale-ratio)),200px) 0 min(calc(160 * var(--scale-ratio)),160px);
    position: relative;
    .btn {
        margin: auto;
        width: min(calc(650 * var(--scale-ratio)),650px);
        height: min(calc(200 * var(--scale-ratio)),200px);
        a {
            padding-left: min(calc(33* var(--scale-ratio)),33px);
            position: relative;
            display: grid;
            place-content: center;
            width: 100%;
            height: 100%;
            &::before {
                content: "";
                border-radius: var(--radius-button02);
                background: var(--color-reservation-yellow);
                pointer-events: none;
                position: absolute;
                top: min(calc(7 * var(--scale-ratio)),7px);
                left: min(calc(5.5 * var(--scale-ratio)),5.5px);
                display: block;
                width: calc(100% - 2px);
                height: calc(100% - 2px);
            }
            &::after {
                content: "";
                border-radius: var(--radius-button02);
                border: 3px solid var(--color-gray-line);
                pointer-events: none;
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 100%;
            }
            .btn-txt {
                font-size: min(calc(38 * var(--scale-ratio)),38px);
                line-height: 1.28;
                text-align: center;
                position: relative;
            }
            .ico-arrow {
                pointer-events: none;
                background: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/ico_arrow.svg") no-repeat 50% 50% / contain;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: min(calc(90 * var(--scale-ratio)),90px);
                display: block;
                width: min(calc(16 * var(--scale-ratio)),16px);
                height: min(calc(27 * var(--scale-ratio)),27px);
            }
        }
    }
}

@media screen and (max-width: 787px) {
    .sec-reservation {
         padding-bottom: calc(210 * var(--scale-ratio));
        .sec-inner {
            max-width: calc(650 * var(--scale-ratio));
        }
        .btn {
            width: 100%;
            a::after {
                border-width: 2px;
            }
        }
    }
}

/* sec-footer
-----------------------------------------------------------------------*/
.sec-footer {
    padding: min(calc(150 * var(--scale-ratio)),150px) 0 min(calc(120 * var(--scale-ratio)),120px);
    background: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/bg_footer.webp") no-repeat 50% 100% / auto 100%;
    color: var(--color-white);
    .logo {
        margin: 0 auto min(calc(25 * var(--scale-ratio)),25px);
        width: min(calc(325 * var(--scale-ratio)),325px);
    }
    .txt {
        font-weight: bold;
        font-size: min(calc(18 * var(--scale-ratio)),18px);
    }
    .instagram {
        margin: min(calc(50 * var(--scale-ratio)),50px) auto 0;
        width: min(calc(70 * var(--scale-ratio)),70px);
    }
}

@media screen and (min-width: 1921px) {
    .sec-footer {
        background-size: 100% 100%;
    }
}

@media screen and (max-width: 787px) {
    .sec-footer {
        padding-bottom: calc(200 * var(--scale-ratio));
        background-image: url("https://grand-mercure-wakayamaminabe-resortandspa.jp/ko/lp/kids-and-baby/assets/images/kids_and_baby/bg_footer_sp.webp");
        .logo {
            width: calc(450 * var(--scale-ratio));
        }
        .txt {
            font-size: 14px;
            line-height: 1.35;
        }
    }
}