abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
        :root {
            --default-black: #333333;
            --default-blue: #03325e;
            --default-red: #c32a2a;
            --swing-angle: 18deg;
            /* 最大傾き */
            --swing-duration: 2.0s;
            /* 1往復にかかる時間（往復 = 2sの場合、左右へ1回ずつ） */
            --swing-ease: cubic-bezier(.35, .05, .15, .95);
        }

        * {
            touch-action: none;
            line-height: 1.6;
        }

        [v-cloak] {
            display: none;
        }

        .display-none {
            display: none;
        }

        .hide {
            opacity: 0;
        }

        html {
            background-position: center center;
            color: var(--default-black);
        }

        html,
        body {
            font-family: 'Noto Sans JP', sans-serif;
            touch-action: manipulation !important;
            /* ダブルタップズーム防止 */
            -ms-touch-action: manipulation !important;
            overscroll-behavior: none !important;
            /* スクロール・跳ね戻り無効 */
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            -webkit-overflow-scrolling: auto !important;
        }

        body {
            line-height: 1.6;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(to bottom, #03325e, #c8ccd0) !important;
        }

        #app {
            box-shadow: 0 0 155px rgba(19, 38, 59, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            max-width: 600px;
        }

        header {
            background: #ff6b00;
            color: #fff;
            text-align: center;
            padding: 4rem 1rem;
        }

        header h1 {
            margin: 0 0 1rem;
            font-size: 2.5rem;
        }

        section {
            padding: 4rem 1rem;
            text-align: center;
        }

        .translucent-cover {
            opacity: 0.7;
            display: block;
            width: 100%;
            height: 100%;
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            background: #ffffff;
            left: 0;
            z-index: 2;
        }

        .modal-bg {
            background: url(../images/first_modal.jpg) no-repeat center center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100vh;
            z-index: 2;
            max-width: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-bg .modal-bg-msg {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .modal-bg .modal-bg-msg .happy_holidays {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-bg .modal-bg-msg .happy_holidays>img {
            width: 309px;
            height: 110px;
        }

        .modal-bg+.msg {
            font-size: 36px;
            font-weight: bold;
            font-family: 'Kaisei Opti', serif;
            line-height: 1.3;
            z-index: 2;
            text-align: center;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s;
            z-index: 1000;
        }

        .modal.show {
            opacity: 1;
            visibility: visible;
        }

        .modal-content-wrap {
            position: relative;
            max-width: 500px;
        }

        .modal-content {
            background: #fff;
            padding: 32px 24px;
            border-radius: 16px;
            text-align: center;
            font-size: 1.2rem;
            margin: 0 48px;
            box-sizing: border-box;
            position: relative;
            box-shadow: 0px 0px 125px rgba(9, 36, 79, 0.5);
        }

        .modal-content.sful-full {
            overflow: hidden;
        }

        .modal-content.sful-full::before {
            font-family: 'Kaisei Opti', serif;
            content: 'New';
            display: block;
            width: 150px;
            height: 26px;
            background: var(--default-red);
            color: #fff;
            position: absolute;
            transform: rotate(-25deg);
            left: -46px;
            top: 3px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 35px 0 0;
        }

        .modal-content .modal-content-inner>img {
            width: 100%;
            vertical-align: middle;
        }

        .modal-content .modal-content-inner>div {
            padding: 24px 0;
            font-size: 14px;
            text-align: left;
        }

        .modal-content .close-btn,
        .modal-content+.close-btn {
            position: absolute;
            background: #bbb;
            border-radius: 50%;
        }

        .modal-content .close-btn {
            right: -17px;
            top: -19px;
        }

        .modal-content+.close-btn {
            right: 32px;
            top: -18px;
        }

        .modal-content .close-btn,
        .modal-content+.close-btn {
            width: 40px;
            height: 40px;
            cursor: pointer;
        }

        .modal-content .close-btn::before,
        .modal-content .close-btn::after,
        .modal-content+.close-btn::before,
        .modal-content+.close-btn::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 22px;
            height: 3px;
            background-color: #ffffff;
            transform-origin: center;
            transition: background-color 0.3s ease;
        }

        .modal-content .close-btn::before,
        .modal-content+.close-btn::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .modal-content .close-btn::after,
        .modal-content+.close-btn::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        .modal-content .close-btn:hover::before,
        .modal-content .close-btn:hover::after,
        .modal-content+.close-btn:hover::before,
        .modal-content+.close-btn:hover::after {
            background-color: #ff4d4d;
        }

        .modal-content>.link-btn {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            height: 48px;
            letter-spacing: 1px;
            background: var(--default-blue);
            width: 100%;
            text-decoration: none;
            color: #fff;
            font-size: 13px;
        }

        .modal-content>.link-btn.green-project {
            font-size: 12px;
        }

        .sticker_wrap {
            position: absolute;
            top: 0;
            width: 100%;
            overflow: visible;
            height: 100%;
            max-width: 400px;
        }

        .sticker,
        .sticker_wrap .sticker+.overlay,
        .sticker_wrap .sticker>span {
            width: 128px;
            height: 128px;
        }

        .sticker {
            display: inline-block;
            border-radius: 50%;
            cursor: pointer;
            user-select: none;
            touch-action: none;
            position: absolute;
            box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        .sticker_wrap .sticker:nth-of-type(1)+.overlay,
        .sticker_wrap .sticker:nth-of-type(1) {
            top: 140px;
            left: 47%;
        }

        .sticker_wrap .sticker:nth-of-type(3)+.overlay,
        .sticker_wrap .sticker:nth-of-type(3) {
            top: 210px;
            left: 8%;
        }

        .sticker_wrap .sticker:nth-of-type(5)+.overlay,
        .sticker_wrap .sticker:nth-of-type(5) {
            top: 294px;
            left: 60%;
        }

        .sticker_wrap .sticker:nth-of-type(7)+.overlay,
        .sticker_wrap .sticker:nth-of-type(7) {
            top: 369px;
            left: 8%;
        }

        .sticker_wrap .sticker:nth-of-type(9)+.overlay,
        .sticker_wrap .sticker:nth-of-type(9) {
            top: 454px;
            left: 44%;
        }

        .sticker_wrap .sticker+.overlay {
            position: absolute;
            background: rgba(100, 0, 0, 0);
            pointer-events: none;
            display: block;
            z-index: 2;
        }

        .sticker+.overlay .block-area:not(.pass) {
            fill: rgba(100, 0, 0, 0);
            pointer-events: auto;
        }

        .sticker+.overlay .block-area:nth-of-type(2):not(.pass) {
            width: 25px;
            height: 100px;
        }

        .sticker+.overlay .block-area.pass {
            fill: rgba(100, 0, 0, 0);
        }

        .sticker+.overlay .block-area:nth-of-type(1):not(.pass) {
            width: 25px;
            height: 100px;
        }

        .sticker+.overlay .block-area:nth-of-type(3):not(.pass) {
            width: 25px;
            height: 100px;
        }

        .sticker+.overlay .block-area:nth-of-type(4):not(.pass) {
            display: none;
        }

        .sticker_wrap .sticker>span {
            position: relative;
            display: none;
            height: 100%;
            border-radius: 50%;
        }

        .sticker_wrap .sticker>div {
            position: absolute !important;
            left: 0;
            top: 0;
        }

        .sticker-img {
            position: relative;
            background-color: #fff;
            background-size: contain;
            pointer-events: none;
        }

        .sticker_wrap .sticker:nth-of-type(1) .sticker-img {
            background: url('../images/S-01.jpg') no-repeat center center / contain;
        }

        .sticker_wrap .sticker:nth-of-type(3) .sticker-img {
            background: url('../images/E-01.jpg') no-repeat center center / contain;
        }

        .sticker_wrap .sticker:nth-of-type(5) .sticker-img {
            background: url('../images/I-01.jpg') no-repeat center center / contain;
        }

        .sticker_wrap .sticker:nth-of-type(7) .sticker-img {
            background: url('../images/J-01.jpg') no-repeat center center / contain;
        }

        .sticker_wrap .sticker:nth-of-type(9) .sticker-img {
            background: url('../images/O-01.jpg') no-repeat center center / contain;
        }

        .sticker_wrap .sticker:nth-of-type(1)>span {
            background: url('../images/S-03.jpg') no-repeat center center / contain;
            overflow: hidden;
        }

        .sticker_wrap .sticker:nth-of-type(1)>span::before {
            font-family: 'Kaisei Opti', serif;
            content: 'New';
            width: 100px;
            height: 61px;
            background-color: var(--default-red);
            display: block;
            position: absolute;
            bottom: -39px;
            left: 14px;
            font-size: 13px;
            color: #fff;
            display: flex;
            justify-content: center;
            padding: 1px 0 0 0;
        }

        .sticker_wrap .sticker:nth-of-type(3)>span {
            background: url('../images/E-02.jpg') no-repeat center center / contain;
        }

        .sticker_wrap .sticker:nth-of-type(5)>span {
            background: url('../images/I-02.jpg') no-repeat center center / contain;
        }

        .sticker_wrap .sticker:nth-of-type(7)>span {
            background: url('../images/J-02.jpg') no-repeat center center / contain;
        }

        .sticker_wrap .sticker:nth-of-type(9)>span {
            background: url('../images/O-02.jpg') no-repeat center center / contain;
        }

        .sticker-shadow {
            opacity: 1;
        }

        .fade-out {
            opacity: 0;
            transition: opacity 2s ease;
        }

        .fade-in {
            opacity: 1;
            transition: opacity 2s ease;
        }

        /* 雪エリア */
        .snow {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 600px !important;
            height: 100%;
            min-height: -webkit-fill-available;
            overflow: hidden;
            pointer-events: none;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 雪画像2枚 */
        .snow-layer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translate(-50%, -50%);
            animation: snowFade 2s infinite;
        }

        /* レイヤー2枚目に時間差 */
        .snow-layer.layer2 {
            animation-delay: 1s;
        }

        /* ライト */
        .light-layer {
            max-width: 370px;
            min-width: 369px;
            object-fit: contain;
        }

        .light-layer.show {
            animation: lightBlink 3s infinite;
        }

        @keyframes lightBlink {

            0% {
                opacity: 1;
            }

            25% {
                opacity: 0.3;
            }

            50% {
                opacity: 1;
            }

            75% {
                opacity: 0.3;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes snowFade {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        /* 一瞬プルルッと震える */
        @keyframes shake {
            0% {
                transform: translate(0%, 0);
            }

            15% {
                transform: translate(-5%, 0);
            }

            30% {
                transform: translate(0%, 0);
            }

            45% {
                transform: translate(-4%, 0);
            }

            60% {
                transform: translate(0%, 0);
            }

            75% {
                transform: translate(-2%, 0);
            }

            90% {
                transform: translate(-0%, 0);
            }

            100% {
                transform: translate(0%, 0);
            }
        }

        .shake {
            animation: shake 0.4s ease-in-out;
        }

        .bg-wrapper {
            position: fixed;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 600px;
            height: 100vh;
            overflow: hidden;
            z-index: -1;
        }

        .bg-wrapper img {
            box-shadow: 0 0 155px rgba(19, 38, 59, 0.5);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .modal-content {
            white-space: pre-line;
        }

        /* ------------------------------
        オーナメント
        ---------------------------------*/
        .ornament {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: flex-start;
            /* 上端を支点にするため要素の上端を合わせる */
            justify-content: center;
            position: absolute;
        }

        .ornament.one {
            top: 42px;
            left: 63%;
        }

        .ornament.two {
            top: 90px;
            left: 10%;
        }

        .ornament.three {
            top: 177px;
            left: 38%;
        }

        .ornament.four {
            top: 487px;
            left: 14%;
        }

        .ornament.five {
            top: 580px;
            left: 56%;
        }

        .ornament.three,
        .ornament.three .swing {
            width: 110px;
            height: 110px;
        }

        /* 揺れる対象 */
        .ornament .swing {
            transform-origin: center top;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #133;
            will-change: transform;
        }

        .ornament .swing.start {
            animation: swing var(--swing-duration) var(--swing-ease) forwards;
        }

        /* キーフレーム：左右へ往復（滑らかなスイング） */
        @keyframes swing {
            0% {
                transform: rotate(-18deg);
            }

            20% {
                transform: rotate(14deg);
            }

            40% {
                transform: rotate(-10deg);
            }

            60% {
                transform: rotate(6deg);
            }

            80% {
                transform: rotate(-2deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        /* アクセシビリティ：動的コンテンツを減らす設定に従う */
        @media (prefers-reduced-motion: reduce) {
            .ornament .swing {
                animation: none;
                transform: none;
            }
        }

        @media screen and (max-width: 600px) {
            .bg-wrapper img {
                object-fit: cover;
            }

            .bg-wrapper {
                max-width: initial;
            }
        }

        @media screen and (max-width: 680px) {

            .sticker+.overlay .block-area:nth-of-type(4):not(.pass) {
                display: block !important;
            }

        }

        @keyframes fadeOut {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                display: none;
            }
        }