body{
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 3px solid #0071e3;
    outline-offset: 2px;
    border-radius: 4px;
}


.circle-buy-btn { width: 80px; height: 80px; border-radius: 50%; background-color: #0071e3; color: #ffffff; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: bold; letter-spacing: 0.1em; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 113, 227, 0.3); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, box-shadow 0.3s ease; }
.circle-buy-btn:hover { background-color: #0077ed; transform: scale(1.08) translateY(-3px); box-shadow: 0 15px 25px rgba(0, 113, 227, 0.4); }
.circle-buy-btn:active { transform: scale(0.95); box-shadow: 0 5px 10px rgba(0, 113, 227, 0.3); }


.category-swiper { padding: 10px 0 30px 0 !important; }
.category-item { width: 120px !important; text-align: center; }
.category-item a { text-decoration: none; color: #1d1d1f; display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease; }
.category-item a:hover { transform: translateY(-5px); }
.category-item img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.category-item p { font-size: 1rem; font-weight: 600; margin: 0; }


.category-arrow, .card-arrow, .prod-arrow, .buy-arrow { width: 44px !important; height: 44px !important; background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 50% !important; color: #1d1d1f !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 50% !important; margin-top: -22px !important; transform: none !important; transition: all 0.3s ease !important; }
.category-arrow::after, .card-arrow::after, .prod-arrow::after, .buy-arrow::after { font-size: 16px !important; font-weight: 600 !important; }
.category-arrow:hover, .card-arrow:hover, .prod-arrow:hover, .buy-arrow:hover { background: rgba(255, 255, 255, 1) !important; transform: scale(1.05) !important; }
.category-arrow.swiper-button-disabled, .card-arrow.swiper-button-disabled, .prod-arrow.swiper-button-disabled, .buy-arrow.swiper-button-disabled { opacity: 0 !important; pointer-events: none !important; transform: scale(0.8) !important; }


.card-swiper { padding-bottom: 40px !important; }
.store-card { width: 400px !important; background: #f5f5f7; border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.store-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translateY(-5px); }
.store-card a { text-decoration: none; color: inherit; display: block; height: 500px; }
.card-image-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.card-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-text-top { position: relative; z-index: 2; padding: 30px; }
.dark-text { color: #1d1d1f; } .light-text { color: #ffffff; }
.card-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; margin: 0 0 10px 0; opacity: 0.8; }
.card-title { font-size: 1.8rem; font-weight: 700; margin: 0 0 5px 0; }
.card-desc { font-size: 1.1rem; margin: 0 0 15px 0; }
.card-price { font-size: 1rem; opacity: 0.9; margin: 0; }
.card-arrow { color: #1d1d1f !important; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); width: 44px !important; height: 44px !important; border-radius: 50%; transform: scale(0.8); }


.feature-flex-container { display: flex; gap: 40px; justify-content: space-between; flex-wrap: wrap; }
.feature-flex-item { flex: 1; min-width: 280px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #f5f5f7; border-radius: 24px; padding: 40px 30px; box-sizing: border-box; width: 100%; }
.feature-icon { color: #1d1d1f; margin-bottom: 20px; }
.feature-flex-item h3 { font-size: 1.5rem; font-weight: 700; color: #1d1d1f; margin: 0 0 15px 0; }
.feature-flex-item p { font-size: 1.1rem; line-height: 1.6; color: #86868b; margin: 0 0 20px 0; flex-grow: 1; }
.feature-link { color: #06c; text-decoration: none; font-weight: 500; font-size: 1.05rem; transition: text-decoration 0.3s; }
.feature-link:hover { text-decoration: underline; }
button.feature-link { background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; text-align: left; }


.custom-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.custom-modal.is-active { opacity: 1; visibility: visible; }
.modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; }
.modal-content { position: relative; background: #ffffff; box-sizing: border-box; width: calc(100% - 40px); max-width: 600px; border-radius: 24px; padding: 40px; z-index: 1; transform: scale(0.95) translateY(20px); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.custom-modal.is-active .modal-content { transform: scale(1) translateY(0); }
.modal-close-btn { position: absolute; top: 20px; right: 20px; background: #f5f5f7; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 20px; color: #86868b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.modal-close-btn:hover { background: #e5e5ea; color: #1d1d1f; }
.modal-title { font-size: 2rem; font-weight: 700; margin: 0 0 20px 0; color: #1d1d1f; padding-right: 50px; line-height: 1.3; }
.modal-body p { font-size: 1.1rem; line-height: 1.6; color: #86868b; margin: 0 0 15px 0; }
.icon-modal-btn { width: 44px; height: 44px; border-radius: 50%; background-color: #1d1d1f; color: #ffffff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; align-self: flex-end; margin-top: 10px; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease; }
.icon-modal-btn:hover { background-color: #000000; transform: scale(1.1); }
.icon-modal-btn:active { transform: scale(0.95); }


.store-header-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 30px;
    padding: 0 40px;
    box-sizing: border-box;
}

.store-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 0;
    margin-bottom: 16px;
}
.store-sec-title {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.store-sec-title-main {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.02em;
}

.store-sec-title-sub {
    font-size: 1.4rem;
    font-weight: 500;
    color: #86868b;
    margin: 0;
}

.store-help {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
}

.store-help p {
    margin: 0;
    color: #1d1d1f;
    font-size: 0.95rem;
    font-weight: 500;
}

.store-help .help-link {
    font-size: 0.95rem;
    color: #0071e3;
    text-decoration: none;
    font-weight: 600;
}

.store-help .help-link:hover {
    text-decoration: underline;
}


.universal-scroller-section { max-width: 1200px; margin: 60px auto; padding: 0 20px; position: relative; }
.scroller-title { font-size: 2rem; font-weight: 700; margin-bottom: 30px; letter-spacing: -0.02em; }
.universal-scroller { padding-bottom: 60px; overflow: visible; }
.scroller-card { width: 320px; height: 420px; border-radius: 24px; background: #f5f5f7; overflow: hidden; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; }
.scroller-card:hover { transform: translateY(-4px); }
.type-product .card-link-wrap { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.type-product .card-img-wrap { height: 60%; padding: 20px; }
.type-product .card-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.type-product .card-text-wrap { padding: 0 20px 30px; text-align: left; }
.type-product h3 { font-size: 1.5rem; margin: 0 0 5px 0; }
.type-product p { font-size: 0.9rem; color: #86868b; margin: 0 0 15px 0; }
.type-product .card-link-text { color: #06c; font-weight: bold; font-size: 0.95rem; }
.type-feature-bg .bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.type-feature-bg .card-overlay-text { position: absolute; top: 30px; left: 30px; right: 30px; color: #1d1d1f; z-index: 2; }
.type-feature-bg h3 { font-size: 1.5rem; margin: 0 0 10px 0; }
.type-feature-split { display: flex; flex-direction: column; }
.type-feature-split .card-top-text { padding: 30px; }
.type-feature-split h3 { font-size: 1.5rem; margin: 0 0 10px 0; }
.type-feature-split p { font-size: 1rem; color: #86868b; margin: 0; }
.type-feature-split .card-bottom-img { flex: 1; padding: 0 20px 20px; }
.type-feature-split .card-bottom-img img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.plus-modal-btn { position: absolute; bottom: 20px; right: 20px; width: 36px; height: 36px; background: #1d1d1f; color: #fff; border: none; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; transition: transform 0.2s, background 0.2s; }
.plus-modal-btn:hover { transform: scale(1.1); background: #444; }
.scroller-controls { position: absolute; bottom: 0; right: 20px; display: flex; gap: 15px; z-index: 10; }
.scroller-arrow { position: static; width: 40px; height: 40px; background: rgba(200, 200, 200, 0.5); border-radius: 50%; margin: 0; }
.scroller-arrow::after { font-size: 14px; color: #1d1d1f; font-weight: bold; }
.scroller-arrow:hover { background: rgba(200, 200, 200, 0.8); }


.gradient-text { background: linear-gradient(90deg, var(--grad-start, #ffb6ff), var(--grad-end, #b344ff)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.grad-blue { --grad-start: #2997ff; --grad-end: #43b9ff; }
.grad-gold { --grad-start: #bf953f; --grad-end: #fcf6ba; }
.grad-dark { --grad-start: #434344; --grad-end: #86868b; }
.grad-sunset { --grad-start: #ff7e5f; --grad-end: #feb47b; }
.grad-ocean { --grad-start: #00c6ff; --grad-end: #0072ff; }

.grad-titanium { --grad-start: #8e8e93; --grad-end: #e5e5ea; }
.grad-midnight { --grad-start: #1e293b; --grad-end: #475569; }
.grad-rosegold { --grad-start: #e6a8d7; --grad-end: #f2c6e1; }
.grad-silver   { --grad-start: #d2d2d7; --grad-end: #f5f5f7; }

.grad-aurora   { --grad-start: #00e5ff; --grad-end: #1200ff; }
.grad-cosmic   { --grad-start: #8e2de2; --grad-end: #4a00e0; }
.grad-berry    { --grad-start: #ff0844; --grad-end: #ffb199; }
.grad-mint     { --grad-start: #00b09b; --grad-end: #96c93d; }
.grad-peach    { --grad-start: #ffedbc; --grad-end: #ed4264; }


.cta-section { padding: 120px 20px; background-color: #ffffff; text-align: center; box-sizing: border-box; }
.cta-box { max-width: 800px; margin: 0 auto; padding: 70px 40px; background: #1d1d1f; border-radius: 32px; color: #ffffff; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.cta-title { font-size: 3rem; font-weight: 800; margin-bottom: 15px; }
.cta-price { font-size: 1.3rem; color: #a1a1a6; margin-bottom: 40px; }
.cta-btn-wrap { display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; }
.btn-buy-large { display: inline-block; background: #ffffff; color: #1d1d1f; padding: 16px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 1.2rem; transition: transform 0.3s ease, background 0.3s ease; }
.btn-buy-large:hover { transform: scale(1.05); background: #f5f5f7; }
.btn-link-light { color: #2997ff; text-decoration: none; font-weight: bold; font-size: 1.2rem; transition: 0.3s; }
.btn-link-light:hover { text-decoration: underline; color: #71b8ff; }


.hero-section {
    height: 100vh;
    height: 100dvh;
    
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    box-sizing: border-box;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-section.has-bg {
    background-image: var(--bg-pc);
}

.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 1; }
.hero-container.relative-z { position: relative; z-index: 2; width: 100%; padding: 0 20px; box-sizing: border-box; }
.hero-container { max-width: 1200px; margin: 0 auto; }
.theme-light .hero-title { color: #1d1d1f; }
.theme-light .sec-desc { color: #86868b; }
.theme-dark .hero-title { color: #ffffff; text-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.theme-dark .sec-desc { color: #e5e5ea; text-shadow: 0 2px 10px rgba(0,0,0,0.5); font-size: 1.8rem; font-weight: 600;}
.hero-title { font-size: 6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 30px; }

.scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0.8; transition: opacity 0.3s ease; }
.scroll-indicator:hover { opacity: 1; }
.scroll-indicator a { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; color: inherit; text-decoration: none; animation: floatArrow 2.5s ease-in-out infinite; }
@keyframes floatArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
.theme-light .scroll-indicator { color: #1d1d1f; }
.theme-dark .scroll-indicator { color: #ffffff; }


.hint-section { padding: 100px 20px; background-color: #ffffff; box-sizing: border-box; }
.hint-container { max-width: 1200px; margin: 0 auto; width: 100%; }
.hint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.hint-card { background-color: #f5f5f7; padding: 40px; border-radius: 24px; display: flex; flex-direction: column; text-align: left; height: 100%; box-sizing: border-box; transition: transform 0.3s ease; }
.hint-card:hover { transform: translateY(-5px); }
.hint-icon { font-size: 2.5rem; margin-bottom: 20px; display: inline-block; }
.hint-card h3 { font-size: 1.4rem; margin-bottom: 15px; color: #1d1d1f; font-weight: 700; }
.hint-card p { font-size: 1.1rem; line-height: 1.6; color: #86868b; }
.hint-link { margin-top: auto; padding-top: 20px; color: #0071e3; font-weight: bold; text-decoration: none; font-size: 1.1rem; }


.picker-section { padding: 100px 20px; background: #fff; text-align: center; }
.picker-container { max-width: 1200px; margin: 0 auto; }
.product-image-stack { position: relative; max-width: 900px; margin: 40px auto; aspect-ratio: 16 / 9; }
.picker-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.picker-image.active { opacity: 1; z-index: 2; }
.color-name-display { font-size: 1.2rem; font-weight: 600; margin-top: 20px; color: #1d1d1f; }
.color-swatches { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
.swatch-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; background-color: var(--swatch-color); cursor: pointer; position: relative; padding: 3px; background-clip: content-box; transition: transform 0.2s ease; }
.swatch-btn:hover { transform: scale(1.1); }
.swatch-btn.active { border-color: #0071e3; }


.scroll-sequence { position: relative; width: 100%; height: 150vh; background-color: #000000; z-index: 5; }
.scroll-sequence-sticky { position: sticky; top: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scroll-sequence-content { text-align: center; padding: 0 20px; width: 100%; }
.sequence-text { font-size: 5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; color: #ffffff; margin: 10px 0; opacity: 0.15; filter: blur(8px); transform: translateY(20px); transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease; }
.sequence-text.active { opacity: 1; filter: blur(0); transform: translateY(0); }


.faq-section { padding: 100px 20px; background-color: #ffffff; }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-title { text-align: center; font-size: 2.5rem; font-weight: 700; margin-bottom: 50px; color: #1d1d1f; }
.faq-item { border-bottom: 1px solid #d2d2d7; }
.faq-question { width: 100%; text-align: left; background: none; border: none; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 1.2rem; font-weight: 600; color: #1d1d1f; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.faq-icon { position: relative; width: 32px; height: 32px; border-radius: 50%; background-color: #f5f5f7; flex-shrink: 0; margin-left: 20px; transition: background-color 0.2s ease; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background-color: currentColor; transform: translate(-50%, -50%); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.faq-icon::before { width: 14px; height: 2px; border-radius: 2px; }
.faq-icon::after { width: 2px; height: 14px; border-radius: 2px; }
.faq-item.active .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.active .faq-icon { background-color: #e5e5ea; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { padding-bottom: 24px; font-size: 1.1rem; line-height: 1.6; color: #86868b; margin: 0; white-space: pre-wrap;}
.faq-item.active .faq-answer { grid-template-rows: 1fr; opacity: 1; }


.bento-section { max-width: 1200px; margin: 0 auto; }
.bento-header { text-align: center; margin-bottom: 50px; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 20px; }
.bento-card { border-radius: 30px; padding: 35px; display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none; transition: transform 0.3s ease; }
.bento-card:hover { transform: scale(0.98); }
.bento-card.light { background-color: #f5f5f7; color: #1d1d1f; }
.bento-card.dark { background-color: #000000; color: #ffffff; }
.bento-card.dark p { color: #a1a1a6; }
.bento-large { grid-column: span 2; grid-row: span 2; }
.bento-wide  { grid-column: span 2; grid-row: span 1; }
.bento-tall  { grid-column: span 1; grid-row: span 2; }
.bento-small { grid-column: span 1; grid-row: span 1; }
.bento-content { position: relative; z-index: 2; }
.bento-content h3 { font-size: 1.8rem; font-weight: 700; margin: 0 0 10px 0; line-height: 1.2; letter-spacing: -0.02em; }
.bento-large .bento-content h3 { font-size: 2.8rem; }
.bento-content p { font-size: 1.1rem; color: #86868b; margin: 0; font-weight: 500; line-height: 1.5; }
.bento-image { flex: 1; display: flex; align-items: flex-end; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; z-index: 1; }
.bento-tall .bento-image, .bento-large .bento-image { height: 75%; }
.bento-wide .bento-image { height: 100%; align-items: center; justify-content: flex-end; padding-right: 20px; }
.bento-image img { max-width: 90%; max-height: 90%; object-fit: contain; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.bento-card:hover .bento-image img { transform: scale(1.05); }


.in-the-box-section { max-width: 1200px; margin: 0 auto; text-align: center; border-top: 1px solid #d2d2d7; padding-top: 80px; }
.in-the-box-header { margin-bottom: 70px; }
.in-the-box-grid { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 60px; }
.box-item { display: flex; flex-direction: column; align-items: center; max-width: 300px; }
.box-item-img { height: 250px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 30px; }
.box-item-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.05)); transition: transform 0.4s ease; }
.box-item:hover .box-item-img img { transform: translateY(-10px); }
.box-item-name { font-size: 1.1rem; font-weight: 600; color: #1d1d1f; margin: 0; line-height: 1.5; }


.scroll-highlight-section { padding: 250px 20px; text-align: center; display: flex; justify-content: center; align-items: center; }
.scroll-highlight-section.theme-dark { background-color: #000000; }
.scroll-highlight-section.theme-light { background-color: #f5f5f7; }
.scroll-highlight-container { max-width: 900px; margin: 0 auto; }
.highlight-line { font-size: 5rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.04em; margin: 0; opacity: 0.15; transition: opacity 0.5s ease-out, transform 0.5s ease-out; transform: translateY(10px); }
.highlight-line.is-highlighted { opacity: 1; transform: translateY(0); }
.theme-dark .highlight-line.is-highlighted { color: #ffffff; }
.theme-light .highlight-line.is-highlighted { color: #1d1d1f; }


.compare-section { max-width: 1000px; margin: 0 auto; padding-top: 100px; padding-bottom: 100px; }
.compare-header { text-align: center; margin-bottom: 70px; }

.compare-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  
    gap: 32px;
}

.compare-card { 
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.compare-product-info { 
    text-align: center; 
    padding-bottom: 40px; 
    margin-bottom: 40px; 
    border-bottom: 1px solid #d2d2d7; 
}
.compare-image { height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.compare-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.compare-product-info h3 { font-size: 1.5rem;}
.compare-chip { font-size: 1rem;}
.compare-price { font-size: 0.9rem;}
.compare-actions .btn-buy-blue { width: auto; padding: 10px 20px; font-size: 1rem;}

.compare-specs { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: grid;
    grid-auto-rows: 1fr; 
    gap: 32px;
    flex-grow: 1;
}

.compare-specs li { 
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0; 
}

.spec-icon { font-size: 2.5rem; margin-bottom: 10px; color: #1d1d1f; }

.spec-text { 
    font-size: 1rem; 
    line-height: 1.5; 
    color: #1d1d1f; 
    white-space: pre-line; 
}


.local-nav-wrapper { position: sticky; top: 44px; z-index: 900; width: 100%; height: 52px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); }
.local-nav-wrapper.is-sticky { background-color: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(0, 0, 0, 0.15); }
.local-nav-container { max-width: 1000px; margin: 0 auto; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.local-nav-title { font-size: 1.3rem; font-weight: 600; color: #1d1d1f; text-decoration: none; letter-spacing: -0.01em; }
.local-nav-right { display: flex; align-items: center; gap: 25px; }
.local-nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; }
.local-nav-menu a { text-decoration: none; color: rgba(0, 0, 0, 0.7); font-size: 0.8rem; transition: color 0.2s; }
.local-nav-menu a:hover { color: #0066cc; }
.local-nav-toggle { display: none; background: none; border: none; width: 30px; height: 30px; position: relative; cursor: pointer; margin-left: 5px; }
.local-nav-toggle::after { content: "〉"; display: block; font-size: 10px; transform: rotate(90deg); transition: transform 0.3s ease; color: #1d1d1f; }
.local-nav-wrapper.is-open .local-nav-toggle::after { transform: rotate(-90deg); }
.local-nav-mobile-menu { display: none; }
.btn-buy-small { background-color: #0071e3; color: #fff; font-size: 0.75rem; font-weight: 400; padding: 4px 11px; border-radius: 980px; text-decoration: none; transition: background-color 0.2s; }
.btn-buy-small:hover { background-color: #0077ed; }


.hotspot-section { max-width: 1200px; margin: 0 auto; }
.hotspot-header { text-align: center; margin-bottom: 60px; }
.hotspot-container { position: relative; max-width: 1000px; margin: 0 auto; }
.hotspot-image-wrapper { position: relative; width: 100%; }
.hotspot-image-wrapper img { width: 100%; height: auto; display: block; border-radius: 24px; }
.hotspot-item { position: absolute; z-index: 10; transform: translate(-50%, -50%); }
.hotspot-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); border: none; color: #1d1d1f; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.15); position: relative; transition: transform 0.3s ease, background 0.3s ease; }
.hotspot-icon { font-size: 20px; font-weight: 400; transition: transform 0.3s ease; }
.hotspot-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); animation: ripple 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); z-index: -1; }
@keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
.hotspot-btn:hover { transform: scale(1.1); background: #ffffff; }
.hotspot-item.is-active .hotspot-icon { transform: rotate(45deg); }
.hotspot-item.is-active .hotspot-btn::after { animation: none; display: none; }
.hotspot-tooltip { position: absolute; top: 50%; width: 260px; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); padding: 20px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid rgba(255, 255, 255, 0.5); opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(20px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; text-align: left; z-index: 100; }
.hotspot-item.is-active .hotspot-tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.hotspot-tooltip.align-right { left: 100%; margin-left: 15px; }
.hotspot-tooltip.align-left { right: 100%; margin-right: 15px; transform: translateY(-50%) translateX(-20px); }
.hotspot-item.is-active .hotspot-tooltip.align-left { transform: translateY(-50%) translateX(0); }
.hotspot-tooltip h4 { margin: 0 0 8px 0; font-size: 1.1rem; color: #1d1d1f; font-weight: 700; }
.hotspot-tooltip p { margin: 0; font-size: 0.9rem; color: #86868b; line-height: 1.5; }

.ecosystem-section { background-color: #f5f5f7; padding: 120px 20px; overflow: hidden; }
.ecosystem-container { max-width: 1400px; margin: 0 auto; }
.ecosystem-header { margin-bottom: 80px; }
.ecosystem-content { display: flex; align-items: center; justify-content: center; gap: 40px; }
.ecosystem-text-col { flex: 1; max-width: 320px; display: flex; flex-direction: column; gap: 60px; }
.ecosystem-text-col.left-col { text-align: right; }
.ecosystem-text-col.right-col { text-align: left; }
.ecosystem-feature h3 { font-size: 1.5rem; font-weight: 700; color: #1d1d1f; margin: 0 0 10px 0; }
.ecosystem-feature p { font-size: 1.1rem; color: #86868b; line-height: 1.6; margin: 0; }
.ecosystem-image-col { flex: 2; max-width: 800px; display: flex; justify-content: center; position: relative; }
.ecosystem-image-col img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1)); }
.ecosystem-mobile-text { display: none; }


html, body, .explain-main { overflow-x: clip !important; }


.floating-cta-wrapper {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 999;
    background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 98px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); border: 1px solid rgba(255, 255, 255, 0.5);
    -webkit-clip-path: inset(0 50% 0 50% round 50px); clip-path: inset(0 50% 0 50% round 50px);
    opacity: 0; visibility: hidden;
    transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, visibility 0.7s;
}
.floating-cta-wrapper.is-visible { -webkit-clip-path: inset(0 0% 0 0% round 50px); clip-path: inset(0 0% 0 0% round 50px); opacity: 1; visibility: visible; }
.floating-cta-content { display: flex; align-items: center; gap: 20px; padding: 12px 16px 12px 24px; white-space: nowrap; opacity: 0; transform: scale(0.95); transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s; }
.floating-cta-wrapper.is-visible .floating-cta-content { opacity: 1; transform: scale(1); }
.floating-cta-text { font-size: 0.95rem; font-weight: 600; color: #1d1d1f; }
.floating-cta-btn { background-color: #0071e3; color: #fff; padding: 8px 18px; border-radius: 98px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background-color 0.2s, transform 0.2s; }
.floating-cta-btn:hover { background-color: #0077ed; transform: scale(1.05); }


.category-header-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.category-hero-title { text-align: left; font-size: 4.5rem; font-weight: 800; margin: 60px 0 30px; letter-spacing: -0.02em; color: #1d1d1f; }
.page-jump-nav { display: flex; justify-content: flex-start; gap: 35px; margin-bottom: 50px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.page-jump-nav::-webkit-scrollbar { display: none; }
.page-jump-link { font-size: 1.2rem; font-weight: 600; color: #1d1d1f; text-decoration: none; white-space: nowrap; transition: color 0.3s ease; }
.page-jump-link:hover { color: #86868b; }

.models-bg-wrapper { background-color: #f5f5f7; padding: 80px 0; }
.models-section { max-width: 1200px; margin: 0 auto 100px; padding: 0 20px; }
.models-category-name { font-size: 2.2rem; font-weight: 700; margin: 0 0 10px 0; color: #1d1d1f; text-align: left; }
.models-header-desc { font-size: 1.2rem; font-weight: 600; color: #86868b; margin: 0 0 40px 0; text-align: left; }

.model-swiper-wrapper { position: relative; padding-bottom: 40px; }
.model-card { width: 320px !important; background: #ffffff; border-radius: 24px; padding: 30px 20px; box-sizing: border-box; text-align: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; border: 1px solid rgba(0,0,0,0.05); transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.model-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); background: #e5e5ea; }
.model-img-wrap { width: 100%; height: 200px; position: relative; margin-bottom: 30px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; }
.model-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.model-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.4); backdrop-filter: saturate(180%) blur(5px); -webkit-backdrop-filter: saturate(180%) blur(5px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.model-hover-text { background: #1d1d1f; color: #ffffff; padding: 10px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (pointer: fine) { .model-card:hover .model-hover-overlay { opacity: 1; } .model-card:hover .model-hover-text { transform: scale(1); } }
.model-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px 0; color: #1d1d1f; }
.model-subd { font-size: 0.9rem; color: #86868b; margin: 0 0 15px 0; font-weight: 600; }
.model-price { font-size: 1.1rem; color: #1d1d1f; margin: 0 0 25px 0; flex-grow: 1; }
.model-buy-btn { display: inline-block; background: #0071e3; color: #fff; text-decoration: none; padding: 10px 28px; border-radius: 30px; font-size: 0.95rem; font-weight: bold; transition: background 0.2s, transform 0.2s; position: relative; z-index: 2; }
.model-buy-btn:hover { background: #0077ed; transform: scale(1.05); }


.modal-content.modal-wide { max-width: 1000px; padding: 0; overflow: hidden; }
.modal-split-layout { display: flex; width: 100%; min-height: 550px; }
.modal-left { flex: 1; background: #f5f5f7; display: flex; align-items: center; justify-content: center; position: relative; }
.modal-swiper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.modal-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box; }
.modal-swiper img { max-width: 100%; max-height: 100%; object-fit: contain; }
.modal-right { flex: 1; padding: 50px 40px; display: flex; flex-direction: column; background: #ffffff; overflow-y: auto; max-height: 80vh; }

.modal-right-header { 
    display: grid; 
    grid-template-columns: 1fr auto;
    gap: 12px 24px;
    margin-bottom: 25px; 
}

.modal-header-text { 
    display: contents; 
}

.modal-product-title { 
    grid-column: 1 / -1;
    font-size: 2.2rem; 
    font-weight: 700; 
    margin: 0;
    color: #1d1d1f; 
    line-height: 1.25; 
    letter-spacing: -0.02em; 
}

.modal-product-desc { 
    grid-column: 1 / 2;
    font-size: 1.1rem; 
    color: #86868b; 
    margin: 0; 
    line-height: 1.5; 
    white-space: pre-line !important; 
    text-align: left !important;
}

.modal-buy-button { 
    grid-column: 2 / 3;
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    align-items: flex-end; 
}

.modal-buy-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background: #0071e3; 
    color: #fff; 
    padding: 12px 28px; 
    border-radius: 30px; 
    font-size: 1rem; 
    font-weight: bold; 
    text-decoration: none; 
    transition: background 0.2s, transform 0.2s; 
    white-space: nowrap; 
}
.modal-buy-btn:hover { background: #0077ed; transform: scale(1.05); }

.modal-feature-list { list-style: none; padding: 0; margin: 0 0 40px 0; border-top: 1px solid #d2d2d7; }
.modal-feature-list li { display: flex !important; align-items: center !important; padding: 20px 0; border-bottom: 1px solid #d2d2d7; }
.feat-icon { font-size: 1.6rem; width: 60px !important; flex-shrink: 0; text-align: left; margin-top: 0 !important; display: flex; align-items: center; color: #1d1d1f; }
.feat-icon svg { width: 28px; height: 28px; }
.feat-text { font-size: 1rem; color: #1d1d1f; font-weight: 600; line-height: 1.4; white-space: pre-line !important; text-align: left !important; word-break: break-all; margin-top: 0; }
.modal-right-footer { margin-top: auto; }
.modal-learn-more { color: #0066cc; text-decoration: none; font-weight: 600; font-size: 1.05rem; display: inline-block; transition: text-decoration 0.2s; }
.modal-learn-more:hover { text-decoration: underline; }


.video-controls { position: absolute; bottom: 40px; right: 40px; display: flex; gap: 15px; z-index: 10; }
.video-control-btn, .video-control-btn-play {margin-left: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.video-control-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.video-control-btn:active { transform: scale(0.95); }

.video-controls {
    position: absolute !important;
    bottom: 40px !important;
    right: 40px !important;
    display: flex !important;
    gap: 15px !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

.video-control-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10000 !important;
}
.video-control-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); animation: ripple 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); z-index: -1; }


.acc-arrow {
    position: absolute;
    top: 64%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex !important; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.2s ease;
}
.acc-arrow:hover { 
    background: rgba(255, 255, 255, 1); 
    transform: translateY(-50%) scale(1.05); 
}
.acc-arrow.swiper-button-disabled { 
    opacity: 0 !important; 
    pointer-events: none; 
}

.acc-prev { left: 10px; }
.acc-next { right: 10px; }

.acc-prev::after { 
    content: ''; 
    display: block;
    width: 10px; 
    height: 10px; 
    border-top: 2px solid #1d1d1f; 
    border-left: 2px solid #1d1d1f; 
    transform: rotate(-45deg);
    margin-left: 4px;
}
.acc-next::after { 
    content: ''; 
    display: block;
    width: 10px; 
    height: 10px; 
    border-top: 2px solid #1d1d1f; 
    border-right: 2px solid #1d1d1f; 
    transform: rotate(45deg);
    margin-right: 4px;
}

.newsroom-cta-section {
    background-color: #f5f5f7;
    padding: 60px 20px;
    text-align: center;
    border-top: 1px solid #d2d2d7;
}

.newsroom-cta-inner {
    max-width: 600px;
    margin: 0 auto;
}

.newsroom-cta-title {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d1d1f;
    margin: 0 0 15px 0;
}

.newsroom-cta-desc {
    font-size: 1.15rem;
    color: #86868b;
    margin: 0 0 25px 0;
    line-height: 1.5;
}

.newsroom-cta-btn {
    display: inline-block;
    background-color: #1d1d1f;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    padding: 12px 32px;
    border-radius: 980px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.newsroom-cta-btn:hover {
    background-color: #424245;
    transform: scale(1.02);
    text-decoration: none;
}


.pr-contact-section {
    background-color: #ffffff;
    padding: 20px 20px 60px;
    text-align: center;
}

.pr-contact-inner {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid #d2d2d7;
    padding-top: 40px;
}

.pr-contact-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}

.pr-contact-desc {
    font-size: 1rem;
    color: #86868b;
    margin: 0 0 12px 0;
}

.pr-contact-email {
    font-size: 1.05rem;
    color: #06c;
    text-decoration: none;
    font-weight: 500;
}

.pr-contact-email:hover {
    text-decoration: underline;
}


.accessories-section { padding: 120px 20px; background-color: #f5f5f7; overflow: hidden; }
.accessories-container { max-width: 1200px; margin: 0 auto; position: relative; }
.acc-header { text-align: center; margin-bottom: 60px; }
.acc-main-desc { font-size: 1.2rem; color: #86868b; margin-top: 15px; }

.acc-swiper { padding-bottom: 40px !important; overflow: visible !important; }
.acc-swiper .swiper-wrapper { 
    display: flex !important;
    align-items: stretch !important; 
}

.acc-swiper .swiper-slide,
.acc-swiper .swiper-slide.swiper-backface-hidden { 
    width: 340px !important; 
    height: auto !important;
    display: flex !important; 
    flex-direction: column !important;
}

.acc-card { 
    width: 100% !important; 
    height: 100% !important; 
    display: flex !important; 
    flex-direction: column !important; 
    background: #ffffff; 
    border-radius: 24px; 
    text-decoration: none; 
    color: inherit; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.04); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    overflow: hidden;
    position: relative !important;
}
.acc-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.acc-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #bf4800;
    text-transform: uppercase;
}

.acc-img-wrap { height: 240px; padding: 30px; background: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-img-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.acc-card:hover .acc-img-wrap img { transform: scale(1.05); }

.acc-text-wrap { 
    padding: 0 30px 40px 30px; 
    text-align: center; 
    flex-grow: 1 !important; 
    display: flex !important; 
    flex-direction: column !important; 
}
.acc-text-wrap h3 { font-size: 1.6rem; font-weight: 700; margin: 0 0 10px 0; color: #1d1d1f; }
.acc-desc { font-size: 1rem; color: #86868b; line-height: 1.5; margin: 0 0 20px 0; }

.acc-price { 
    margin-top: auto !important;
    margin-bottom: 15px !important; 
    font-size: 1.1rem; 
    font-weight: 600; 
    color: #1d1d1f; 
}


.modal-arrow {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 50% !important;
    color: #1d1d1f !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 50% !important;
    margin-top: -22px !important;
    z-index: 10 !important;
    transition: background 0.3s, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.modal-arrow:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: scale(1.04) !important;
}

.modal-arrow:active {
    transform: scale(0.96) !important;
}

.modal-arrow::after {
    display: none !important;
}

.modal-arrow::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid #1d1d1f;
    border-right: 2px solid #1d1d1f;
}

.swiper-button-prev.modal-arrow::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.swiper-button-next.modal-arrow::before {
    transform: rotate(45deg);
    margin-right: 3px;
}

.modal-arrow.swiper-button-disabled {
    opacity: 0 !important;
    pointer-events: none;
    transform: scale(0.8) !important;
}


.feat-text {
    white-space: pre-line !important; 
    
    text-align: left !important;
    word-break: break-all;
    margin-top: 0;
}

.modal-product-desc {
    white-space: pre-line !important;
    text-align: left !important;
}


.modal-feature-list li { 
    display: flex !important; 
    align-items: center !important;
    padding: 20px 0; 
    border-bottom: 1px solid #d2d2d7; 
}

.feat-icon { 
    font-size: 1.6rem; 
    width: 60px !important; 
    flex-shrink: 0; 
    text-align: left; 
    margin-top: 0 !important; 
    display: flex;
    align-items: center;
    color: #1d1d1f;
}
.feat-icon svg {
    width: 28px;
    height: 28px;
}


.modal-close-btn {
    z-index: 9999 !important;
    
    background: rgba(245, 245, 247, 0.85) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.modal-buy-btn-mp { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background: #0071e3; 
    color: #fff; padding: 12px 28px; 
    border-radius: 30px; 
    font-size: 1rem; 
    font-weight: bold; 
    text-decoration: none; 
    transition: background 0.2s, transform 0.2s; 
    white-space: nowrap; 
    margin: 12px 0;
    width: 120px;
    height: 16px;
}

body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.custom-modal {
    overscroll-behavior: contain !important; 
}

.modal-overlay {
    touch-action: none !important; 
}


.model-swiper-wrapper .swiper-wrapper {
    align-items: stretch !important;
}

.model-swiper-wrapper .swiper-slide {
    height: auto !important;
    display: flex !important;
}

.model-card {
    height: 100% !important;
}

.model-price {
    margin-top: auto !important;
    flex-grow: 0 !important;
}


@media (max-width: 768px) {
    .hero-title { font-size: 3.2rem; } 
    
    .store-card { width: 300px !important; }
    .store-card a { height: 400px; }
    .card-title { font-size: 1.4rem; }
    .prod-bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .box1, .box2, .box3, .box4 { grid-column: span 1; grid-row: span 1; height: 200px; }
    .feature-flex-container { gap: 30px; }
    .feature-flex-item { padding: 30px 20px; }
    .modal-content { padding: 40px 24px 30px 24px; }
    .modal-title { font-size: 1.6rem; padding-right: 40px; }
    .category-arrow, .card-arrow, .prod-arrow, .buy-arrow, .modal-arrow { width: 36px !important; height: 36px !important; margin-top: -18px !important; }
    .category-arrow::after, .card-arrow::after, .prod-arrow::after, .buy-arrow::after, .modal-arrow::after { font-size: 14px !important; }
    .cta-box { padding: 50px 20px; }
    .cta-title { font-size: 2.2rem; }
    .cta-btn-wrap { flex-direction: column; gap: 20px; }
    .btn-buy-large { width: 100%; box-sizing: border-box; }
    .video-controls { bottom: 20px; right: 20px; gap: 10px; }
    .video-control-btn { width: 44px; height: 44px; font-size: 1.2rem; }
    .hero-title { font-size: 3.2rem; }
    .hero-section { padding: 100px 20px 50px; }
    .hero-section.has-bg {background-image: var(--bg-sp);}
    .hint-card { padding: 30px; }
    .hint-grid { grid-template-columns: 1fr; }
    .sequence-text { font-size: 2.4rem; margin: 8px 0; }
    .scroll-sequence { height: 300vh; }
    .accessories-section { padding: 80px 20px; }
    .acc-slide { width: 280px !important; } 
    .acc-img-wrap { height: 200px; padding: 20px; }
    .acc-arrow { display: none; } 
    .faq-section { padding: 80px 20px; }
    .faq-title { font-size: 2rem; margin-bottom: 40px; }
    .faq-question { font-size: 1.1rem; padding: 20px 0; }
    
    .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .bento-large, .bento-wide, .bento-tall, .bento-small { grid-column: span 1; grid-row: span 1; min-height: 350px; }
    .bento-content h3, .bento-large .bento-content h3 { font-size: 1.8rem; }
    .bento-image { height: 60%; align-items: flex-end; justify-content: center; padding: 0;}
    
    .in-the-box-grid { flex-direction: column; align-items: center; gap: 50px; }
    .box-item-img { height: 200px; }
    .scroll-highlight-section { padding: 150px 20px; }
    .highlight-line { font-size: 2.5rem; }
    
    .compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .compare-card { text-align: center; padding: 16px 8px; }
    .compare-image img { max-width: 100%; height: auto; margin-bottom: 12px;}
    .compare-product-info h3 { font-size: 1.1rem; margin-bottom: 4px;}
    .compare-chip { font-size: 0.9rem; font-weight: bold; margin-bottom: 4px;}
    .compare-price { font-size: 0.8rem; color: #86868b; margin-bottom: 16px;}
    .compare-actions .btn-buy-blue { display: inline-block; padding: 8px 16px; font-size: 0.85rem; width: 100%; box-sizing: border-box; white-space: nowrap;}
    
    .compare-product-info { padding-bottom: 24px; margin-bottom: 24px; } 

    .compare-specs { 
        margin-top: 0; 
        padding-top: 0; 
        border-top: none; 
        gap: 24px;
        display: grid;
        grid-auto-rows: 1fr;
    }
    
    .compare-specs li { 
        font-size: 0.8rem; 
        margin: 0; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: flex-start;
        gap: 8px;
    }
    
    .compare-specs .spec-text {
        font-size: 0.85rem; 
    }
    
    .local-nav-menu { display: none; }
    .local-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .local-nav-mobile-menu { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, visibility 0.5s; padding: 0 20px; border-top: 1px solid transparent; }
    .local-nav-wrapper.is-open .local-nav-mobile-menu { grid-template-rows: 1fr; opacity: 1; visibility: visible; border-top-color: rgba(0,0,0,0.1); }
    .local-nav-mobile-menu ul { list-style: none; padding: 0; margin: 0; overflow: hidden; }
    .local-nav-mobile-menu ul::before { content: ''; display: block; height: 10px; }
    .local-nav-mobile-menu ul::after { content: ''; display: block; height: 20px; }
    .local-nav-mobile-menu li { border-bottom: 1px solid rgba(0,0,0,0.05); }
    .local-nav-mobile-menu li:last-child { border-bottom: none; }
    .local-nav-mobile-menu a { display: block; padding: 15px 0; text-decoration: none; color: #1d1d1f; font-size: 0.9rem; }

    .hotspot-item { transform: none !important; margin-left: -18px; margin-top: -18px; }
    .hotspot-tooltip, .hotspot-tooltip.align-right, .hotspot-tooltip.align-left { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 30px 20px 40px !important; border-radius: 24px 24px 0 0 !important; border: none !important; border-top: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 -10px 40px rgba(0,0,0,0.2) !important; transform: translateY(100%) !important; visibility: hidden !important; opacity: 0 !important; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; box-sizing: border-box !important; word-break: break-all !important; overflow-wrap: break-word !important; }
    .hotspot-item.is-active .hotspot-tooltip, .hotspot-item.is-active .hotspot-tooltip.align-right, .hotspot-item.is-active .hotspot-tooltip.align-left { transform: translateY(0) !important; visibility: visible !important; opacity: 1 !important; }
    .hotspot-tooltip h4 { font-size: 1.2rem !important; margin-bottom: 10px !important; white-space: normal !important; }
    .hotspot-tooltip p { font-size: 1rem !important; line-height: 1.6 !important; white-space: normal !important; }

    .ecosystem-content { flex-direction: column; gap: 50px; }
    .ecosystem-text-col { display: none; }
    .ecosystem-image-col { width: 100%; max-width: 600px; }
    .ecosystem-mobile-text { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 500px; text-align: center; }
    .ecosystem-mobile-text .ecosystem-feature h3 { font-size: 1.4rem; }
    .ecosystem-mobile-text .ecosystem-feature p { font-size: 1rem; }

    .floating-cta-wrapper { bottom: 20px; width: calc(100% - 40px); max-width: 380px; }
    .floating-cta-content { padding: 10px 12px 10px 20px; gap: 15px; justify-content: space-between; width: 100%; box-sizing: border-box; }
    .floating-cta-text { font-size: 0.85rem; }
    .floating-cta-btn { font-size: 0.8rem; padding: 8px 14px;}

    .category-hero-title { font-size: 3rem; margin: 40px auto 20px; padding: 0 20px;}
    .page-jump-nav { gap: 10px; margin-bottom: 30px; padding: 0 20px;}
    .page-jump-link { font-size: 0.95rem; padding: 8px 16px;}
    .models-bg-wrapper { padding: 50px 0; }
    .models-category-name { font-size: 1.8rem; }
    .models-header-desc { font-size: 1.1rem; margin-bottom: 30px; }
    .model-card { width: 280px !important; padding: 25px 15px; }
    .model-img-wrap { height: 160px; margin-bottom: 20px; }
    .model-title { font-size: 1.4rem; }
    .model-price { font-size: 1rem; margin-bottom: 20px; }
    .model-buy-btn { padding: 8px 24px; font-size: 0.9rem; }
    
    .modal-split-layout { flex-direction: column; min-height: auto; }
    .modal-left { min-height: 300px; flex: none; }
    .modal-right { padding: 30px 20px; flex: none; overflow-y: visible; max-height: none; }
    
    .modal-right-header { 
        display: flex;
        flex-direction: column; 
        align-items: flex-start; 
        gap: 16px; 
        margin-bottom: 20px; 
    }
    .modal-header-text { 
        display: block;
        width: 100%; 
    }
    .modal-product-title { font-size: 1.8rem; margin: 0 0 8px 0; }
    
    .modal-buy-button { width: 100%; align-items: stretch; margin-top: 0; }
    .modal-buy-btn { width: 100%; box-sizing: border-box; padding: 14px 20px; text-align: center; }
    .modal-content.modal-wide { padding: 0 !important; width: 95% !important; max-height: 90vh !important; overflow-y: auto !important; }

    .cinematic-section {
        height: 100vh !important;
        width: 100vw !important;
        position: relative;
        overflow: hidden;
        margin-left: calc(50% - 50vw); 
        margin-right: calc(50% - 50vw);
    }
    
    .cinematic-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .newsroom-cta-section { padding: 40px 20px; }
    .newsroom-cta-title { font-size: 1.8rem; margin-bottom: 10px; }
    .newsroom-cta-desc { font-size: 1.05rem; margin-bottom: 20px; }
    .newsroom-cta-btn {
        padding: 10px 28px;
        font-size: 1rem;
    }

    .store-header-box {
        padding: 0 20px;
    }

    .store-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .store-sec-title-main {
        font-size: 1.8rem;
    }
    
    .store-sec-title-sub {
        font-size: 1.1rem;
        text-align: left;
    }
    
    .store-help {
        justify-content: flex-start;
        align-items: flex-start;
        gap: 6px;
        margin-top: 12px;
    }

    .modal-arrow {
        display: flex !important;
        width: 32px !important;
        height: 32px !important;
        margin-top: -16px !important;
    }
    
    .modal-arrow::before {
        width: 7px;
        height: 7px;
    }
    
    .swiper-button-prev.modal-arrow { left: 10px !important; }
    .swiper-button-next.modal-arrow { right: 10px !important; }
    .modal-close-btn {
        top: 12px !important;
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 24px !important;
    }
    .os-desc {
        text-align: left;
    }
}


@media (hover: hover) and (pointer: fine) {
    .bento-item img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .bento-item:hover img { transform: scale(1.03); }
    .feature-flex-item { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
    .feature-flex-item:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
    .faq-question:hover { color: #0071e3; }

    .acc-arrow {
        width: 36px;
        height: 36px;
    }
    .acc-prev { left: -5px; }
    .acc-next { right: -5px; }
    
    .acc-prev::after, .acc-next::after {
        width: 8px;
        height: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}