:root{--font-body:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Meiryo","Yu Gothic UI","Yu Gothic","YuGothic","Noto Sans CJK JP",system-ui,sans-serif;--font-display:"Zen Maru Gothic",var(--font-body);}
*{box-sizing:border-box}html{background:#fff}body{margin:0;color:#403522;font-family:var(--font-body);background:#fff url('../images/bg_pattern.webp') repeat left top;background-size:1400px 2098px}img{display:block;width:100%;height:100%;object-fit:contain}h1,h2,p{margin:0}a{color:inherit}a:focus-visible{outline:4px solid #8c4915;outline-offset:6px}.skip-link{position:fixed;top:8px;left:8px;z-index:100;background:white;padding:12px;transform:translateY(-160%)}.skip-link:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.page-shell{position:relative;overflow:hidden;height:calc(8987px * var(--page-scale,1))}.canvas{position:relative;width:1920px;height:8987px;left:50%;margin-left:-960px;transform:scale(var(--page-scale,1));transform-origin:center top}.layer{position:absolute;margin:0}.text{white-space:pre;font-weight:400}.bold{font-family:var(--font-display);font-weight:700}.regular{font-weight:400}.goods-panel:before{content:"";position:absolute;left:238px;top:347px;width:1443px;height:8241px;background:#f8f2df;border:6px solid #ccb67e}.footer{position:relative;height:140px;overflow:hidden;background:#202020 url('../images/img_footer_bg.webp') repeat-x left top;background-size:1920px 300px}.footer-art{position:relative;width:1920px;height:140px;left:50%;margin-left:-960px;transform:scale(var(--page-scale,1));transform-origin:center top}.footer .n-4-3{color:#c2a259}.art a:hover{opacity:.85}
.n-3-7{left:483px;top:-31px;width:912px;height:444px;opacity:0.20000000298023224;}
.n-4-12{left:11px;top:43px;width:432px;height:926px;opacity:1;}
.n-4-13{left:1408px;top:39px;width:445px;height:898px;opacity:1;}
.n-4-10{left:387px;top:82px;width:1146px;height:217px;opacity:1;}
.n-4-47{left:238px;top:403px;width:1443px;height:38px;opacity:1;}
.n-4-47{font-size:32px;line-height:38px;text-align:center;transform:scaleX(1);transform-origin:top left;}
.n-4-46{left:399px;top:495px;width:520px;height:190px;opacity:1;}
.n-4-46{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-44{left:453px;top:724px;width:447px;height:1334px;opacity:1;}
.n-4-43{left:1003px;top:723px;width:471px;height:1335px;opacity:1;}
.n-4-41{left:399px;top:2109px;width:663px;height:190px;opacity:1;}
.n-4-41{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-40{left:480px;top:2398px;width:447px;height:447px;opacity:1;}
.n-4-39{left:1021px;top:2398px;width:447px;height:447px;opacity:1;}
.n-4-37{left:399px;top:2887px;width:451px;height:190px;opacity:1;}
.n-4-37{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-36{left:448px;top:3168px;width:488px;height:488px;opacity:1;}
.n-4-35{left:985px;top:3168px;width:488px;height:488px;opacity:1;}
.n-4-33{left:399px;top:3697px;width:499px;height:190px;opacity:1;}
.n-4-33{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-32{left:445px;top:3933px;width:1035px;height:730px;opacity:1;}
.n-4-30{left:399px;top:4697px;width:498px;height:152px;opacity:1;}
.n-4-30{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-29{left:428px;top:4952px;width:520px;height:686px;opacity:1;}
.n-4-28{left:974px;top:4952px;width:520px;height:686px;opacity:1;}
.n-4-26{left:399px;top:5679px;width:470px;height:190px;opacity:1;}
.n-4-26{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-25{left:453px;top:5960px;width:1029px;height:709px;opacity:1;}
.n-4-23{left:399px;top:6728px;width:668px;height:152px;opacity:1;}
.n-4-23{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-22{left:422px;top:6958px;width:552px;height:479px;opacity:1;}
.n-4-21{left:1028px;top:6956px;width:432px;height:433px;opacity:1;}
.n-4-20{left:811px;top:7422px;width:268px;height:38px;opacity:1;}
.n-4-20{font-size:18px;line-height:38px;text-align:center;transform:scaleX(1);transform-origin:top left;}
.n-4-16{left:399px;top:7508px;width:112px;height:38px;opacity:1;}
.n-4-16{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-15{left:399px;top:7556px;width:1072px;height:266px;opacity:1;}
.n-4-15{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-18{left:399px;top:7906px;width:112px;height:38px;opacity:1;}
.n-4-18{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-17{left:399px;top:7954px;width:1204px;height:380px;opacity:1;}
.n-4-17{font-size:28px;line-height:38px;text-align:left;transform:scaleX(1);transform-origin:top left;}
.n-4-9{left:942px;top:8444px;width:123px;height:123px;opacity:1;}
.n-4-8{left:866px;top:8575px;width:277px;height:68px;opacity:1;}
.n-4-8{font-size:22px;line-height:34px;text-align:center;transform:scaleX(1);transform-origin:top left;}
.n-4-7{left:642px;top:8669px;width:227px;height:68px;opacity:1;}
.n-4-6{left:889px;top:8669px;width:226px;height:68px;opacity:1;}
.n-4-5{left:1134px;top:8670px;width:230px;height:66px;opacity:1;}
.n-3-11{left:21px;top:109px;width:288px;height:156px;opacity:1;}
.n-3-12{left:1566px;top:39px;width:340px;height:226px;opacity:1;}
.n-4-2{left:313px;top:39px;width:72px;height:72px;opacity:1;}
.n-4-3{left:825px;top:50px;width:360px;height:38px;opacity:1;}
.n-4-3{font-size:22px;line-height:38px;text-align:center;transform:scaleX(1);transform-origin:top left;}
@media(max-width:900px){.page-shell{height:auto;overflow:hidden}.canvas{width:100%;height:auto;left:auto;margin:0;transform:none;padding-bottom:32px}.hero{height:calc(14.4vw + 36px);position:relative;overflow:visible}.hero .n-4-10{width:76%;height:auto;left:12%;top:20px}.hero .n-4-10 img{height:auto}.hero .n-3-7{width:80%;height:auto;left:20%;top:-20px}.hero .n-4-12{width:23%;height:auto;left:-9%;top:0}.hero .n-4-13{width:24%;height:auto;left:auto;right:-9%;top:0}.goods-panel{position:relative;margin:0 16px;padding:28px 18px;background:#f8f2df;border:2px solid #ccb67e}.goods-panel:before{display:none}.goods-panel .layer,.downloads .layer{position:static;transform:none;width:auto;height:auto;opacity:1}.goods-panel .text{font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.goods-panel h2.text{font-size:17px}.intro h2{margin-bottom:24px}.product{margin-top:40px}.product-images{display:flex;align-items:center;justify-content:center;gap:16px}.product-images .art{min-width:0;flex:1}.product-images img{width:100%;height:auto}.product>.text{margin-top:24px}.benefits{margin-top:40px}.benefits .n-4-20{font-size:10px;text-align:center;margin:12px 0 24px}.benefits h2,.notice h2{margin-bottom:12px}.notice{margin-top:32px}.downloads{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:32px auto 0;max-width:600px;padding:0 20px}.downloads .n-4-9{width:88px;height:88px;flex:none}.downloads .text{width:100%;text-align:center;white-space:pre;font-size:16px;line-height:1.7;order:1}.downloads .n-4-7,.downloads .n-4-6,.downloads .n-4-5{width:calc((100% - 24px)/3);height:auto;order:2}.downloads img{height:auto}.footer-art{width:100%;left:auto;margin:0;transform:none}.footer .n-4-3{left:0;top:50px;width:100%;font-size:12px;transform:none;text-align:center}.footer .n-4-2{left:16px;top:20px;width:36px;height:36px}.footer .n-3-11{left:16px;top:auto;bottom:16px;width:72px;height:39px}.footer .n-3-12{left:auto;right:16px;top:auto;bottom:16px;width:85px;height:56.5px}}

@media (max-width: 900px) {
  .downloads .n-4-5 { display: none; }
}

/* 상품과 특전 이미지의 원래 배치를 유지하는 확대 버튼입니다. */
.zoom-trigger { display:block; padding:0; border:0; background:none; color:inherit; cursor:zoom-in; }
.zoom-trigger:focus-visible { outline:4px solid #8c4915; outline-offset:6px; }
body.image-modal-open { overflow:hidden; }
.image-modal { width:min(1440px,94vw); height:calc(100vh - 112px); height:calc(100dvh - 112px); max-width:none; max-height:none; padding:0; border:0; margin:auto; overflow:visible; background:transparent; }
.image-modal::backdrop { background:rgba(0,0,0,.9); }
.image-modal .modal-image { width:100%; height:100%; object-fit:scale-down; }
.modal-close { position:fixed; top:16px; right:16px; width:48px; height:48px; padding:0; border:1px solid #fff; border-radius:50%; background:#202020; color:#fff; font:36px/1 sans-serif; cursor:pointer; }
.modal-close:focus-visible { outline:3px solid #ccb67e; outline-offset:4px; }

.back-to-top { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); z-index:50; display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:#bb9b56; color:#fff; font:700 30px/1 "Noto Sans JP",sans-serif; cursor:pointer; box-shadow:0 2px 8px #0003; }
/* 숨김 처리를 전환 종료까지 늦춰 페이드아웃을 유지합니다. */
.back-to-top { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .6s ease-in-out, visibility 0s linear .6s; }
.back-to-top.is-visible { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .6s ease-in-out, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) {
  .back-to-top, .back-to-top.is-visible { transition:none; }
}
.back-to-top:focus-visible { outline:3px solid #000; outline-offset:4px; }

@media (max-width: 900px) {
  .hero .n-4-12, .hero .n-4-13 { z-index:2; pointer-events:none; }
  .intro { padding-inline:max(20px,calc(14vw - 24px)); }
}

.back-to-top svg { width:22px; height:22px; }

/* 위에서부터 헤더, 본문 패널, 캐릭터, 배경 순으로 표시합니다. */
.canvas { isolation:isolate; }
.hero .n-3-7 { z-index:0; }
.hero .n-4-12, .hero .n-4-13 { z-index:1; }
.goods-panel { position:relative; z-index:2; }
.hero .n-4-10 { z-index:3; }

/* 참고 이벤트와 같은 가는 닫기 기호를 사용합니다. */
.modal-close { top:18px; right:26px; border:0; border-radius:0; background:none; font-family:inherit; font-size:40px; font-weight:300; line-height:1; }
@keyframes modalFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalFadeOut { from { opacity:1; } to { opacity:0; } }
.image-modal[open], .image-modal[open]::backdrop { animation:modalFadeIn .35s ease-in-out both; }
.image-modal[open].is-closing, .image-modal[open].is-closing::backdrop { animation:modalFadeOut .35s ease-in-out both; }
@media (prefers-reduced-motion: reduce) {
  .image-modal[open], .image-modal[open]::backdrop,
  .image-modal[open].is-closing, .image-modal[open].is-closing::backdrop { animation:none; }
}



/* 이전 이벤트의 일본어 글꼴 렌더링 설정을 적용합니다. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-kerning:normal; line-break:strict; }
.footer .text span { font-family:var(--font-body); font-weight:400; }

/* 공식 사이트 문구는 Figma의 두 줄 비율을 모바일에서도 유지합니다. */
@media (max-width:900px) { .downloads .n-4-8 { font-size:16px; line-height:1.54545455; } }

/* PC는 154px 기준으로 캔버스와 함께 축소하고, 모바일은 화면 폭에 따라 최소 16px까지 줄입니다. */
@media (min-width:901px) {
  .goods-panel { --content-left:392px; --content-right:1527px; }
  .goods-panel .text { max-width:1128px; height:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
  .goods-panel .n-4-47 { left:var(--content-left); width:1135px; max-width:1135px; }
}
@media (max-width:900px) {
  .goods-panel { padding-inline:clamp(16px,calc(9.6875vw - 15px),72.1875px); }
  .goods-panel .intro { padding-inline:0; }
}

/* 최신 Figma 배치와 텍스트 크기를 PC 원안에 동기화합니다. */
@media(min-width:901px){
.n-3-7{left:483px;top:-31px;width:912px;height:444px;}
.n-3-11{left:21px;top:109px;width:288px;height:156px;}
.n-3-12{left:1566px;top:39px;width:340px;height:226px;}
.n-4-2{left:313px;top:39px;width:72px;height:72px;}
.n-4-3>span:nth-child(1){font-size:22px;line-height:38px;}
.n-4-3{left:835px;top:59px;width:341px;height:38px;}
.n-4-5{left:1134px;top:8820px;width:230px;height:66px;}
.n-4-6{left:889px;top:8819px;width:226px;height:68px;}
.n-4-7{left:642px;top:8819px;width:227px;height:68px;}
.n-4-8>span:nth-child(1){font-size:22px;line-height:34px;}
.n-4-8{left:866px;top:8725px;width:277px;height:68px;}
.n-4-9{left:942px;top:8594px;width:123px;height:123px;}
.n-4-12{left:11px;top:43px;width:432px;height:926px;}
.n-4-13{left:1408px;top:39px;width:445px;height:898px;}
.n-4-15>span:nth-child(1){font-size:24px;line-height:38px;}
.n-4-15{left:399px;top:7706px;width:919px;height:266px;}
.n-4-16>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-16{left:399px;top:7658px;width:112px;height:38px;}
.n-4-17>span:nth-child(1){font-size:24px;line-height:38px;}
.n-4-17{left:399px;top:8104px;width:1128px;height:380px;}
.n-4-18>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-18{left:399px;top:8056px;width:112px;height:38px;}
.n-4-20>span:nth-child(1){font-size:18px;line-height:38px;}
.n-4-20{left:811px;top:7572px;width:268px;height:38px;}
.n-4-21{left:1028px;top:7106px;width:432px;height:433px;}
.n-4-22{left:422px;top:7108px;width:552px;height:479px;}
.n-4-23>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-23>span:nth-child(2){font-size:24px;line-height:38px;}
.n-4-23{left:399px;top:6838px;width:595px;height:154px;}
.n-4-25{left:453px;top:6080px;width:1029px;height:709px;}
.n-4-26>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-26>span:nth-child(2){font-size:24px;line-height:38px;}
.n-4-26{left:399px;top:5759px;width:403px;height:192px;}
.n-4-28{left:974px;top:5032px;width:520px;height:686px;}
.n-4-29{left:428px;top:5032px;width:520px;height:686px;}
.n-4-30>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-30>span:nth-child(2){font-size:24px;line-height:38px;}
.n-4-30{left:399px;top:4777px;width:480px;height:154px;}
.n-4-32{left:445px;top:4013px;width:1035px;height:730px;}
.n-4-33>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-33>span:nth-child(2){font-size:24px;line-height:38px;}
.n-4-33{left:399px;top:3697px;width:489px;height:192px;}
.n-4-35{left:985px;top:3168px;width:488px;height:488px;}
.n-4-36{left:448px;top:3168px;width:488px;height:488px;}
.n-4-37>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-37>span:nth-child(2){font-size:24px;line-height:38px;}
.n-4-37{left:399px;top:2887px;width:439px;height:192px;}
.n-4-39{left:1021px;top:2398px;width:447px;height:447px;}
.n-4-40{left:480px;top:2398px;width:447px;height:447px;}
.n-4-41>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-41>span:nth-child(2){font-size:24px;line-height:38px;}
.n-4-41{left:399px;top:2109px;width:594px;height:192px;}
.n-4-43{left:1003px;top:723px;width:471px;height:1335px;}
.n-4-44{left:453px;top:724px;width:447px;height:1334px;}
.n-4-46>span:nth-child(1){font-size:28px;line-height:38px;}
.n-4-46{left:399px;top:495px;width:168px;height:38px;}
.n-40-7>span:nth-child(1){font-size:24px;line-height:38px;}
.n-40-7{left:412px;top:548px;width:446px;height:114px;}
.n-4-47>span:nth-child(1){font-size:29px;line-height:38px;}
.n-4-47{left:392px;top:403px;width:1135px;height:38px;}
.n-4-10{left:387px;top:82px;width:1146px;height:217px;}
}
@media(max-width:900px){.intro .n-40-7{margin-top:12px;}}

/* X 작성 화면에 문구를 전달하는 공유 버튼입니다. */
.share-x { position:absolute; left:1340px; top:380px; width:158px; min-height:44px; display:flex; align-items:center; justify-content:center; z-index:4; }
.share-x img { width:158px; height:42px; }
.share-x:hover { opacity:.8; }
@media(max-width:900px) { .share-x { position:static; width:96px; min-height:44px; margin:0 0 12px auto; } .share-x img { width:96px; height:auto; } }

/* Figma 공유 버튼의 이미지 Y=381px와 확장된 본문 배치를 반영합니다. */
@media(min-width:901px){
.n-4-5{top:8864px;}
.n-4-6{top:8863px;}
.n-4-7{top:8863px;}
.n-4-8{top:8769px;}
.n-4-9{top:8638px;}
.n-4-15{top:7750px;}
.n-4-16{top:7702px;}
.n-4-17{top:8148px;}
.n-4-18{top:8100px;}
.n-4-20{top:7616px;}
.n-4-21{top:7150px;}
.n-4-22{top:7152px;}
.n-4-23{top:6882px;}
.n-4-25{top:6124px;}
.n-4-26{top:5803px;}
.n-4-28{top:5076px;}
.n-4-29{top:5076px;}
.n-4-30{top:4821px;}
.n-4-32{top:4057px;}
.n-4-33{top:3741px;}
.n-4-35{top:3212px;}
.n-4-36{top:3212px;}
.n-4-37{top:2931px;}
.n-4-39{top:2442px;}
.n-4-40{top:2442px;}
.n-4-41{top:2153px;}
.n-4-43{top:767px;}
.n-4-44{top:768px;}
.n-4-46{top:539px;}
.n-40-7{top:592px;}
.n-4-47{top:447px;}
}

/* 모바일 공유 버튼 위쪽 여백을 줄입니다. */
@media(max-width:900px){.goods-panel{padding-top:8px;}}