:root {
    --font-notojp: 'Noto Sans JP', sans-serif;
}

#sizen-miyagi {
    main#winter {
        /* Override theme color */
        div.container {
            background-color: #E7F4FC;
        }
        div.layer.layer-1, 
        div.outdoor-wrap {
            background-color: #A2D4E0;
        }
        div.main-miyagi-cuisine,
        div.top-section {
            &::before {
                background-color: #A2D4E0;
            }
        }
        aside.aside-right,
        button.accordion-toggle,
        div.bus-or-train {
            background-color: #A2D4E0;
        }
        div.hot-air-balloon {
            border-color: #A2D4E0;
        }
        h2.air-balloon-title {
            &::before {
                background-color: #A2D4E0;
            }
        }
        div.gourmet-matsushima,
        div.gourmet-feature,
        div.modal-gourmet {
            background-color: #FFECA0;
        }

        /* Common */
        .palt {
            font-feature-settings: "palt";
        }
        .mb-0 {
            margin-bottom: 0;
        }
        .mb-16 {
            margin-bottom: 16px;
        }
        .mb-24 {
            margin-bottom: 24px;
        }
        .mb-32 {
            margin-bottom: 32px;
        }
        .mb-40 {
            margin-bottom: 40PX;
        }
        .mb-48 {
            margin-bottom: 48px;
        }
        .mb-56 {
            margin-bottom: 56px;
        }
        .mb-64 {
            margin-bottom: 64px;
        }
        .mb-72 {
            margin-bottom: 72px;
        }
        .mb-80 {
            margin-bottom: 80px;
        }
        .plr-7 {
            padding-left: 7%;
            padding-right: 7%;
        }
        /* end Common */
        /* paragraph */
        p.base-desc {
            font-size: 15px;
            line-height: 27px;
            letter-spacing: 0.01em;
        }
        /* animation */
        .fukidashi {
            transform-origin: center;
            position: absolute;
            opacity: 0;
            &.animate {
                animation: fukidashi 2s ease-in-out forwards;
                animation-iteration-count: 1;
                opacity: 1;
            }
        }
        /* img */
        img {
            display: block;
            margin-inline: auto;
            height: auto;
            max-width: 100%;
            object-fit: cover;
        }
        .slider-image {
            height: 100%;
        }
        /* modal */
        .modal {
            h2 {
                font-size: 20px;
            }
        }
        /* button check-plus */
        .wrap-modal-p-1,
        .wrap-modal-p-2,
        .wrap-modal-p-3 {
            position: relative;
        }
        .modal-thumb-caption {
            position: absolute;
        }

        .check-plus {
            position: absolute;
            width: 60px;
            height: 60px;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 0;
            transition: transform 0.3s ease;
            transform-origin: center center;
            cursor: pointer;
            a {
                font-family: var(--font-notojp);
                font-size: 12.64px;
                font-weight: 900;
                color: #000;
                text-decoration: none;
                text-transform: uppercase;
                margin-top: -10px;
                padding: 25px 10px;
                span {
                    position: absolute;
                    top: 30px;
                    left: 26px;
                    font-size: 14px;
                    font-family: var(--font-notojp);
                    font-weight: 900;
                }
            }
            &:hover {
                transform: scale(1.1);
            }
        }
        /* button redemore */
        .readmore {
            a {
                text-decoration: none;
                font-size: 16px;
                display: block;
                width: 70%;
                margin: auto;
                padding: 20px 0;
                text-align: center;
                color: #000;
                font-weight: 700;
                border-radius: 30px;
                transition: 0.3s;
                &:hover {
                    transition: 0.3s;
                }
            }
        }
        /* image-wide */
        img.image-wide {
            width: 100%;
        }
        /* link buttons */
        /* pattern1 */
        div.readmore a {
            background-color: #A2D4E0;
            &:hover {
                background-color: #000;
                color: #FFF;
            }
        }
        /* pattern2 */
        div.group-link a,
        div.details-button {
            background-color: #A2D4E0;
            border-color: #A2D4E0;
            &:hover {
                background-color: #FFF;
            }
        }
        /* pattern3 */
        div.modal-gourmet {
            div.group-link a {
                background-color: #FFF;
                border-color: #FFF;
                &:hover {
                    background-color: #FFE060;
                    border-color: #FFE060;
                }
            }
        }
        /* banner horizontal scroll */
        div.h-scroll-left__wrap {
            display: flex;
            overflow: hidden;
        }
        img.h-scroll-left__item {
            animation: hScrollLeft 30s linear infinite;
            padding-left: 16px;
            width: auto;
            height: 50px;
            max-width: initial;
        }
        /* tag-texts */
        .three-scenic-spots {
            margin-bottom: initial;
        }
        ul.tag-texts {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(3px, 1.6vw, 8px);
            justify-content: center;
            &.gap-3 {
                gap: 3px;
            }
            li {
                width: auto;
                min-width: calc(90 / 500 * 100%);
                min-height: calc(35 / 500 * 100%);
                list-style: none;
                :is(.tag-texts.minw-66 &) {
                    min-width: calc(66 / 500 * 100%);
                }
                p {
                    font-size: clamp(12px, 3vw, 15px);
                    font-weight: 700;
                    border: 1px solid #000;
                    text-decoration: none;
                    padding: 8px;
                    white-space: nowrap;
                    border-radius: 20px;
                    display: block;
                    text-align: center;
                    color: #000;
                    font-family: var(--font-notojp);
                    cursor: default;
                }
            }
        }
        /* modal-pettern-1 */
        .wrap-modal-p-1 {
            img.fukidashi {
                top: 16.543%;
                right: 9.297%;
                width: 23.583%;
                :is(.section03 &) {
                    top: 15.543%;
                    right: 12.297%;
                }
            }
            .check-plus {
                bottom: 17.778%;
                right: 13.379%;
                :is(.section03 &) {
                    bottom: 17%;
                    right: 18.2%;
                }
            }
        }
        /* modal-pettern-2 */
        .wrap-modal-p-2 {
            .modal-thumb {
                &.left {
                    width: 76.463%;
                    margin-left: 0;
                    margin-right: auto;
                }
                &.right {
                    width: 85.752%;
                    margin-right: 0;
                    margin-left: auto;
                }
            }
            .modal-thumb-caption {
                width: 19.501%;
                &.right {
                    top: -8.846%;
                    right: 10.431%;
                }
                &.left {
                    top: 10.769%;
                    left: 6.803%;
                }
            }
            .check-plus {
                &.right-1 {
                    bottom: 3.846%;
                    right: 29.025%;
                }
                &.right {
                    bottom: 3.538%;
                    right: 9.524%;
                }
                &.left {
                    bottom: 3.846%;
                    left: 9.524%;
                }
            }
        }
        /* modal-pattern-3 */
        .wrap-modal-p-3 {
            img.modal-thumb{
                width: calc(460 / 500 * 100%);
                &.left {
                    margin-left: 0;
                    margin-right: auto;
                }
                &.right {
                    margin-right: 0;
                    margin-left: auto;
                }
            }
            .desc-thumb {
                font-size: clamp(12px, 3vw, 15px);
                position: absolute;
                font-weight: 600;
                line-height: 24px;
                &.right {
                    bottom: calc(49 / 239 * 100%);
                    right: calc(70 / 500 * 100%);
                }
                &.left {
                    bottom: calc(49 / 239 * 100%);
                    left: calc(70 / 500 * 100%);
                }

            }
            .check-plus {
                &.left {
                    bottom: calc(21 / 239 * 100%);
                    left: calc(48 / 500 * 100%);
                }
                &.right {
                    bottom: calc(21 / 239 * 100%);
                    right: calc(48 / 500 * 100%);
                }
            }
            .fukidashi {
                &.right {
                    top: calc(-15 / 239 * 100%);
                    right: calc(50.5 / 500 * 100%);
                }
                &.left {
                    top: calc(-15 / 239 * 100%);
                    left: calc(50.5 / 500 * 100%);
                }
            }
        }
        /* anim-block */
        .anim-block {
            margin-bottom: calc( 92 / 500 * 100%);   
        }
        img.train {
            bottom: calc(-57 /  290 * 100%);
        }
        /* activity-block */
        .activity-block {
            padding-top: 48px;
            padding-bottom: 48px;
            background-color: #A2D4E0;
            border-radius: 48.5px;
        }
        /* .float-contents */
        .float-contents {
            position: relative;
            width: 100%;
            height: auto;
            &.float-base-height-1 {
                aspect-ratio: 500 / 685;
            }
            &.float-base-height-2 {
                aspect-ratio: 500 / 413;
            }
            p, img {
                position: absolute;
            }
            p {
                width: calc(198 / 500 * 100%);
                top: calc(39 / 685 * 100%);
                left: calc(44 / 500 * 100%);
                font-size: clamp(12px, 3vw , 15px);
                letter-spacing: 0.005em;
                line-height: 27px;
                font-weight: 400;
            }
            .image-float-01 {
                width: calc(172 / 500 * 100%);
                top: calc(51 / 685 * 100%);
                right: calc(40 / 500 * 100%);
            }
            .image-float-02 {
                width: calc(218 / 500 * 100%);
                top: calc(173 / 685 * 100%);
                left: calc(30 / 500 * 100%);
            }
            .image-float-03 {
                width: calc(225 / 500 * 100%);
                top: calc(114 / 685 * 100%);
                right: calc(36 / 500 * 100%);
            }
            .image-float-04 {
                width: calc(164 / 500 * 100%);
                bottom: calc(65 / 685 * 100%);
                left: calc(27 / 500 * 100%);
            }
            .image-float-05 {
                width: calc(411 / 500 * 100%);
                bottom: calc(-42 / 685 * 100%);
                right: calc(-68 / 500 * 100%);
            }


            .image-float-06 {
                width: calc(287 / 500 * 100%);
                top: calc(49 / 413 * 100%);
                left: calc(49 / 500 * 100%);
            }
            .image-float-07 {
                width: calc(241 / 500 * 100%);
                top: calc(49 / 413 * 100%);
                right: calc(22 / 500 * 100%);
            }
            .image-float-08 {
                width: calc(165 / 500 * 100%);
                bottom: calc(3 / 413 * 100%);
                right: 0
            }
            .image-float-09 {
                width: calc(132 / 500 * 100%);
                bottom: calc(-32 / 413 * 100%);
                left: calc(39 / 500 * 100%);
            }
        }
        /* white block in gourmet */
        .wrap-gourmet.white-block {
            background-color: #FFF;
            padding: 5.2%;
            margin-top: 40px;
            margin-inline: auto;
            .content {
                display: flex;
                gap: 16px;
                p {
                    font-size: 13px;
                    margin-bottom: 13px;
                }
                .readmore {
                    a {
                        padding: 12px;
                        width: 168px;
                    }
                }
            }
        }
        /* First View */
        div.text-banner {
            display: block;
            width: 100%;
            max-width: 500px;
            margin-top: 25px;
            img {
                object-fit: scale-down;
            }
        }
        img.title-logo {
            animation-delay: 0.5s;
            margin-left: 19.2%;
            width: calc( 280 / 500 * 100%);
            min-height: 240px;
            opacity: 0;
            animation: outDoor 1s forwards cubic-bezier(0.17, 0.67, 0.48, 0.9);
            animation-delay: 1s;
        }
        ul.collection {
        img {
            margin-right: 10px;
        }
        }
        /* particle positions */
        div.wrap-particles {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-origin: center;
            backface-visibility: hidden;
            opacity: 0;
            animation: outDoor 1.5s ease-in-out forwards;
            &:nth-child(1) {
                animation-delay: 0s;
            }
            &:nth-child(2) {
                animation-delay: 1.5s;
            }
            &:nth-child(3) {
                animation-delay: 3.0s;
            }
            &:nth-child(4) {
                animation-delay: 4.5s;
            }
            img {
                position: absolute;
                z-index: -1;
                &.particle-move-1 {
                    animation: fluffy 3s infinite;
                    top: 1.5%;
                    right: 11%;
                    width: 22.84px;
                }
                &.particle-move-2 {
                    animation: fluffy3 4s infinite ease-in-out;
                    bottom: -0;
                    left: 23.5%;
                    width: 22.84px;
                }
                &.particle {
                    bottom: -10%;
                    left: 17%;
                    width: 26.29px;
                }
                &.image-person {
                    opacity: 0;
                    animation: outDoor 1s forwards cubic-bezier(0.17, 0.67, 0.48, 0.9);
                    animation-delay: 1.0s;
                    top: -3%;
                    right: 0;
                    width: 31.778%;
                    max-height: 309.72px;
                }
            }
        }
        /* special01 and special02*/
        div.cuisine-feature {
            padding-top: 0;
            padding-left: initial;
            padding-right: initial;
            padding-bottom: initial;
            width: 93.578%;
            margin-left: auto;
            margin-right: 0;
        }
        div.top-section {
            padding-top: 0;
            padding-left: initial;
            padding-right: initial;
            padding-bottom: initial;
            width: 93.578%;
            margin-left: 0;
            margin-right: auto;
            &::before {
                display: none;
            }
        }
        
        img.special01 {
            width: 12.745%;
            top: -11.409%;
            left: -7.353%;
            
        }
        img.special02 {
            width: 12.874%;
            top: -15.6%;
            right: -1.069%;
            
        }
        img.special01-title {
            width: 32.108%;
            bottom: -11.641%;
            right: -4.412%;
            max-height: initial;
            
        }
        img.special02-title {
            width: 65.615%;
            bottom: -7.441%;
            left: 8.588%;
            max-height: initial;
            
        }
        img.special01-main {
            width: 100%;
            
        }
        img.special02-main {
            width: 87.201%;
            
        }
        img.ganbaranai-spot-text-1 {
            width: 75%;
            
            display: block;
            margin-left: 20.183%;
        }
        img.ganbaranai-spot-text-2 {
            width: 74.222%;
            
            display: block;
            margin-left: 13.111%;
        }

        div.main-miyagi-cuisine {
            padding-top: 48px;
            padding-left: 0;
            padding-right: 0;
        }
        div.bus-or-train {
            margin-top: -140px;
            padding-top: 231px;
            padding-bottom: 56px;
            border-radius: 30px 30px 0 0;
            h2 {
                font-weight: 500;
                margin-left: 12%;
                width: 88%;
            }
            p {
                font-size: 17px;
                line-height: 1.86em;
                letter-spacing: 0.03em;
            }
        }
        div.section01 {
            padding-left: 6.4%;
            padding-right: 6.4%;
        }
        div.cuisine-block {
            width: 100%;
            h2 {
                font-size: 29px;
            }
            p {
                font-size: 17px;
            }
        }
        /* winter-spots */
        div.wrap-winter-spots {
            background-color: #FFECA0;
            padding-top: 28px;
            border-radius: 220.5px 220.5px 0 0;
            img {
                display: block;
            }
            img.winter-sopts-title {
                width: 100%;
                margin-bottom: 94px;
            }
            div.winter-spots {
                padding:0 7.339% 42px 7.339%;
                img {
                    width: 100%;
                }
                p {
                    line-height: 27px;
                    font-size: 15px;
                    letter-spacing: -0.2px;
                }
                .spot-1,
                .spot-2,
                .spot-3 {
                    position: relative;
                }
                img.spot-title-1 {
                    position: absolute;
                    top: -19%;
                    left: 4.2%;
                }
                img.spot-title-2 {
                    position: absolute;
                    top: -21%;
                    left: -5%;
                }
                img.spot-title-3 {
                    position: absolute;
                    top: -14.8%;
                    left: 2%;
                }              
            }
        }
        /* preparation */
        div.wrapper-preparation {
            text-align: center;
            h2 {
                font-size: 24px;
                line-height :1.5em;
            }
            img {
                
                &.curve-line {
                    width: 78.899%;
                }
                &.preparation {
                    width: 82.798%;
                }
            }
            p {
                font-size: 19px;
                font-weight: 500;
                line-height: 36px;
            }
        }
        /* card information */
        .card.infomation,
        .air-balloon-info {
            .col-left {
                min-width:  29px;
            }
        }
        /* section02 */
        div.section02 {
            width: 88.2%;
            padding: 48px 0 40px 0;
            margin-inline: auto;
            p.remarks {
                position: absolute;
                font-family: var(--font-notojp);
                font-size: 12px;
                right: 9.333%;
                bottom: -1.333%;
                &.left {
                    left: 6.7%;
                    bottom: -14.333%;
                }
            }
            img {
                display: block;
                margin-inline: auto;
                height: fit-content;
            }
            div.block-card-content {
                margin-top: initial;
            }
            .card:last-child {
                margin-bottom: initial;
            }
            .card-image {
                img.caption {
                    width: 201px;
                    position: absolute;
                    bottom: -7%;
                    right: -11%;
                    z-index: 3;
                }
            }
            .wrap-image-illust {
                position: relative;
                img {
                    margin-inline: revert;
                    &.base-image {
                        width: 79.1%;
                    }
                    &.person-illust {
                        width: 37.704%;
                        position: absolute;
                        top: 0;
                        right: 0;
                        backface-visibility: hidden;
                        opacity: 0;
                    }   
                }
            }
            .block-content {
                margin-top: initial;
            }
            .card.infomation {
                margin-top: initial;
            }
            img.activity-spot-text{
                width: 65.986%;
            }
            img.image-1,
            img.image-2 {
                width: calc(380 / 441 * 100%);
            }
        }
        /* section03 */
        div.section03 {
            .destination {
                padding: initial;
            }
            .air-balloon-contact {
                margin-top: initial;
            ;
            }
            .content {
                margin-top: initial;
                p {
                    line-height: 1.9em;
                    font-weight: 400;
                    letter-spacing: 0.01em;
                }
            }
            .main-miyagi-travel {
                overflow: visible;
                margin-top: initial;
            }
            img.anim-parts-1 {
                width: calc(436 / 500 * 100%);
            }
            img.where-acutivity-title-1 {
                width: calc(427 / 500 * 100%);
            }
            img.where-acutivity-title-2 {
                width: calc(444 / 500 * 100%);
            }
            img.particles-1 {
                width: calc(377 / 500 * 100%);
            }
            img.image-sanriku-02{
                width: calc(436 / 500 * 100%);
            }
            img.text-recommend {
                width: calc(427 / 500 * 100%);
            }
            .wrap-modal-p-1 {
                img.modal-thumb {
                    width: calc(441 / 500 * 100%);
                }
            }
            img.dontosai-title {
                width: calc(352 / 500 * 100%);
            }
            img.image-iwanuma-02 {
                width: calc(430 / 500 * 100%);
            }
            img.image-iwanuma-04 {
                width: calc(393 / 500 * 100%);
            }
        }
        /* miyagi-spots */
        div.miyagi-spots-container {
            &::before {
                bottom: ;
            }
            .h-scroll-left__wrap {
                margin-top: 75px;
            }
            img.winter-spots-title {
                display: block;
                width: 94%;
                height: auto;
                margin: 0 auto;
                padding-top: 24px;
            }
            div.matsushima-section:last-child {
                padding-bottom: 75px;
            }
            .layout-feature:has(.no-articles) {
                justify-content: space-around;
            }
            .no-articles {
                background-color: #EBF1E4;
                border: 1px solid #000;
                border-radius: 12px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                cursor: default;
                flex: 0 0 357.08px;
                max-width: 357.08px;
                height: 435px;
            }
        }
    /*END main#winter */
    }
}

/* Override screen.css */
@media (max-width: 500px) {
    #sizen-miyagi {
        main#winter {
            /* Common */
            .mb-0 {
                margin-bottom: 0;
            }
            .mb-16 {
                margin-bottom: 3.2vw;
            }
            .mb-24 {
                margin-bottom: 4.8vw;
            }
            .mb-32 {
                margin-bottom: 6.4vw;
            }
            .mb-40 {
                margin-bottom: 8vw;
            }
            .mb-48 {
                margin-bottom: 9.6vw;
            }
            .mb-56 {
                margin-bottom: 11.2vw;
            }
            .mb-64 {
                margin-bottom: 12.8vw;
            }
            .mb-72 {
                margin-bottom: 14.4vw;
            }
            .mb-80 {
                margin-bottom: 16vw;
            }
            /* tag-texts */
            .tag-texts.mb-48 {
                margin-bottom: 4.8vw;
            }
            /* white block in gourmet */
            .wrap-gourmet.white-block {
                width: 90%;
                .content {
                    flex-direction: column;
                }
            }
            .card-infomation,
            .air-balloon-info
            /* First View */
            div.text-banner {
                margin-bottom: 17%;
            }
            div.scroll-down {
                margin-top: 14%;
            }
            div.cuisine-block {
                h2 {
                    font-size: 5.8vw;
                }
            }
            div.wrapper-preparation {
                p {
                    font-size: 4.1vw;
                }
            }
            /* winter-spots */
            div.wrap-winter-spots {
                img.winter-sopts-title {
                    margin-bottom: 21.56%;
                }
                .mb-24 {
                    margin-bottom: 5.505%;
                }
            }
            /* section01 */
            .section01 {
                .mb-80 {
                    margin-bottom: 18.349%;
                }
                .mb-40 {
                    margin-bottom: 9.174%;
                }
                
            }
            /* section02 */
            div.section02 {
                img {
                    
                    width: 100%;
                }
                .card-image {
                    img.caption {
                    width: 61%;
                    bottom: 5%;
                    right: -7%;
                    }
                }
                .block-card-content.mb-24 {
                    margin-bottom: -12px;
                }
                p.remarks {
                    bottom: 8.667%;
                }
            }
            /* ,section03 */
            .main-miyagi-travel {
                margin-top: initial;
            }
            /* modal-pattern-3 */
            .wrap-modal-p-3 {
                .desc-thumb {
                    &.right {
                        bottom: calc(41 / 239 * 100%);
                        right: calc(67 / 500 * 100%);
                    }
                    &.left {
                        bottom: calc(41 / 239 * 100%);
                        left: calc(67 / 500 * 100%);
                    }

                }
                .fukidashi {
                    &.right {
                        top: calc(-39 / 239 * 100%);
                        right: calc(17.5 / 500 * 100%);;
                    }
                    &.left {
                        top: calc(-39 / 239 * 100%);
                        left: calc(17.5 / 500 * 100%);;
                    }
                }
            }
            /* gourmet thmub images */
            .gourmet-view {
                img {
                    object-fit: cover;
                }
            }
            /*END main#winter */
        }
    }
}

/* banner horizontal scroll */
@keyframes hScrollLeft {
    from {
    transform: translateX(0);
    }
    to {
    transform: translateX(-100%);
    }
}


@keyframes fukidashi {
  0%   { transform: scale(1); opacity: 0; }
  5%  { transform: scale(1.2); opacity: 1; }
  10%  { transform: scale(1); }
  20%  { transform: scale(1.1); }
  30%  { transform: scale(1); }
  100% { transform: scale(1); }
  to{
    opacity: 1;
  }
}