@charset "UTF-8";

/* ==================================================
  01. Animation keyframes
  埋め込み先との名前衝突を避けるため、keyframes名は lp- 接頭辞で統一。
================================================== */
/* Fade / movement */
@keyframes lp-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lp-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes lp-fade-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lp-fade-up-sm {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lp-fade-down {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lp-fade-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lp-fade-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lp-blur-in {
    0% {
        opacity: 0;
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }

    99% {
        opacity: 1;
        -webkit-filter: blur(0);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        -webkit-filter: none;
        filter: none;
    }
}

/* Mask / brush reveal */
@keyframes lp-slide-up {
    from {
        opacity: 0;
        transform: translateY(24px);
        -webkit-clip-path: inset(100% 0 0);
        clip-path: inset(100% 0 0);
        -webkit-mask-size: 100% 300%;
        mask-size: 100% 300%;
        -webkit-mask-position: 60% -40%;
        mask-position: 60% -40%;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
        -webkit-mask-size: 100% 190%;
        mask-size: 100% 190%;
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
    }
}

@keyframes lp-brushdraw-left {
    from {
        opacity: 0;
        -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    to {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes lp-brushdraw-right {
    from {
        opacity: 0;
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }

    to {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes lp-brushdraw-up {
    from {
        opacity: 0;
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }

    to {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes lp-brushdraw-down {
    from {
        opacity: 0;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    to {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* Accent motion */
@keyframes lp-loading-pulse {

    0%,
    40%,
    60%,
    80%,
    100% {
        transform: scale(1);
    }

    50%,
    70% {
        transform: scale(.95);
    }
}

@keyframes lp-bounce {
    0% {
        opacity: 0;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes lp-badge-pop {
    0% {
        opacity: 0;
        transform: scale(2) rotate(-10deg);
    }

    60% {
        opacity: 1;
        transform: scale(.92) rotate(2deg);
    }

    80% {
        opacity: 1;
        transform: scale(1.04) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes lp-peron {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotate(-2deg) rotateX(-6deg) scale(.99);
    }

    60% {
        opacity: 1;
        transform: perspective(1000px) rotate(.8deg) rotateX(1.5deg) scale(1);
    }

    100% {
        opacity: 1;
        transform: perspective(1000px) rotate(0) rotateX(0) scale(1);
    }
}

/* Modal-specific */
@keyframes modal-video {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-video-inner {
    from {
        transform: translateY(20px);
    }

    to {
        transform: translateY(0);
    }
}

/* ==================================================
  02. Global base / shared visibility helpers
  共通ヘッダー読み込み時の点滅防止を含むページ全体の基礎設定
================================================== */
body {
    font-family: 'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    padding: 0;
    visibility: visible !important;
}

img {
    max-width: 100%;
    vertical-align: bottom;
    -webkit-backface-visibility: hidden;
}

section {
    display: block !important;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 767px) {
    .pc_only {
        display: none !important
    }
}

@media screen and (min-width: 768px) {
    .sp_only {
        display: none !important
    }
}

/* ==================================================
  03. LP foundation / layout frame
================================================== */
.lp-marugame {
    --lp-container-width: 1020px;
    --lp-content-width: 510px;
    --lp-menu-width: 380px;
    --lp-page-bg: #ead8c1;
    --lp-ease: cubic-bezier(.22, 1, .36, 1);
    --lp-shadow: 0 0 34px rgb(0 0 0 / 16%);
}

html {
    scroll-behavior: auto;
}

body.lp-is-loading {
    overflow: hidden;
}

.lp-marugame,
.lp-marugame * {
    box-sizing: border-box;
}

.lp-marugame {
    position: relative;
    min-height: 100vh;
    overflow: clip;
    background: var(--lp-page-bg);
    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    isolation: isolate;
}

.lp-marugame img,
.lp-marugame video {
    display: block;
    max-width: none;
}

.lp-marugame img {
    height: auto;
}

.lp-marugame button,
.lp-marugame a {
    -webkit-tap-highlight-color: transparent;
}

.lp-marugame button {
    font: inherit;
}

.lp-marugame [hidden] {
    display: none !important;
}

.lp-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* ==================================================
  04. Loading
================================================== */
.lp-loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #f8f2eb;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lp-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s, visibility 0s .5s;
}

.lp-loading__text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    padding-top: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.lp-loading__text #loading-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.lp-loading__text #loading-text span {
    display: block;
    width: auto;
    padding: 0;
    line-height: 0;
}

.lp-loading__text #loading-text img {
    display: block;
    width: auto;
    max-width: none;
    height: 32px;
}

.lp-loading__video {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 1;
}

.lp-loading__media {
    display: block;
    width: 101%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: #f8f2eb;
}

.lp-loading__video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .6) .5px, transparent 1.5px);
    background-size: 3px 3px;
    opacity: 1;
}

/* ===== Page background / content frame ===== */
.lp-marugame__page-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--lp-page-bg);
    pointer-events: none;
    z-index: 1;
}

.lp-marugame__page-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/*
 * Required DOM:
 * .lp-marugame__container > .lp-marugame__menu + .lp-marugame__contents
 */
.lp-marugame__container {
    position: relative;
    z-index: 2;
    display: grid;
    opacity: 1;
    visibility: visible;
    transition: opacity .65s var(--lp-ease), visibility 0s linear 0s;
    grid-template-columns: minmax(180px, var(--lp-menu-width)) minmax(320px, var(--lp-content-width));
    justify-content: space-between;
    align-items: start;
    gap: clamp(32px, 5vw, 120px);
    width: 100%;
    max-width: var(--lp-container-width);
    min-height: 100vh;
    margin-inline: auto;
}

.lp-marugame.is-preparing .lp-marugame__container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

.lp-marugame.is-content-ready .lp-marugame__container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lp-marugame__contents {
    position: relative;
    width: 100%;
    max-width: var(--lp-content-width);
    min-width: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #f7f5f0 url("/synced-assets/menu_butatsukejiru/assets/img/common_bg.jpg") repeat-y center top / 100% auto;
    box-shadow: var(--lp-shadow);
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
}

.lp-marugame__contents-inner {
    position: relative;
    z-index: 1;
}

/* ==================================================
  05. PC navigation
================================================== */
.lp-marugame__menu {
    min-width: 0;
}

.lp-pc-nav {
    position: sticky;
    top: 50vh;
    z-index: 30;
    width: 100%;
    max-width: var(--lp-menu-width);
    transform: translateY(-50%);
}

.lp-pc-nav__title {
    width: 100%;
}

.lp-pc-nav__list {
    display: grid;
    padding: 0;
    margin: 0;
    list-style: none;
}

.lp-pc-nav__list a {
    position: relative;
}

.lp-pc-nav__list li:nth-of-type(2) img {
    position: relative;
    top: -10px;
}

.lp-pc-nav__list li:nth-of-type(3) img {
    position: relative;
    top: -10px;
}

.lp-pc-nav__list li:nth-of-type(4) img {
    position: relative;
    top: -10px;
}

.lp-pc-nav__list img {
    width: 100%;
}

.lp-pc-nav a {
    display: block;
    transition: transform .25s ease, filter .25s ease;
}

.lp-pc-nav a:hover {
    transform: translateX(5px);
    filter: brightness(1.04);
}

/* ==================================================
  06. Shared components
================================================== */
.lp-heading-layer,
.lp-video-frame {
    position: absolute;
}

.lp-tvcm__open,
.lp-diagnosis__start,
.lp-diagnosis-choice {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.lp-heading-layer>img,
.lp-video-frame>img,
.lp-video-frame>video {
    position: absolute;
}

.lp-heading-layer__bg,
.lp-heading-layer__title {
    inset: 0;
    width: 100%;
}

.lp-video-frame {
    width: 93.0667%;
    /* 698 / 750 */
    aspect-ratio: 698 / 387;
    overflow: hidden;
    mask-image: url(/synced-assets/menu_butatsukejiru/assets/img/common_movie_frame.webp);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
}

.lp-video-frame__media {
    z-index: 0;
    inset: 0;
    width: 101%;
    height: auto;
    object-fit: cover;
}

/* Shared description reveal */
.lp-marugame [class*="desc"].js-reveal {
    /* opacity: 0; */
    /* transform: translateY(16px); */
}

.lp-marugame [class*="desc"].js-reveal.is-visible {
    /* animation: lp-fade-up-sm .45s var(--lp-ease) both; */
}

/* ===== Splide base ===== */
.splide {
    position: relative;
    visibility: visible;
}

.splide__list {
    display: flex;
    align-items: stretch;
    padding: 0;
    margin: 0;
    list-style: none;
    will-change: transform;
}

.splide__slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
}

.splide__arrows {
    pointer-events: none;
}

.splide__arrow,
.lp-mv__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: auto;
}

.splide__arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* Shared slider navigation button base */
.lp-mv__nav,
.lp-season-slider .splide__arrow {
    z-index: 30;
    width: 44px;
    height: 44px;
    border: 0;
    opacity: 1;
}

/* ==================================================
  07. Main visual (750 × 850)
================================================== */
.lp-mv {
    position: relative;
    aspect-ratio: 750 / 849;
}

.lp-mv__slider,
.lp-mv__slider>.splide__track {
    height: 100%;
}

.lp-mv__slider .splide__list,
.lp-mv__slider .splide__slide {
    height: 100%;
}

.lp-mv__slider .splide__list {
    display: flex;
}

.lp-mv__slider .splide__pagination {
    display: none;
}

.lp-mv__slider .splide__slide {
    flex: 0 0 100%;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity .9s ease;
}

.lp-mv__slider .splide__slide.is-active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

.lp-mv__link {
    position: relative;
    inset: 0;
    z-index: 1;
    display: block;
    aspect-ratio: 750 / 740;
    width: 100%;
    height: 100%;
}

/* 再度アンカー復活の可能性があるためa構造は維持。
   inlineのままだとMac Safariで絶対配置要素の描画が崩れるためdisplay:block必須。 */
.lp-mv__link[href="javascript:void(0)"] {
    cursor: default;
}

.lp-mv__link>div {
    position: absolute;
}

.lp-mv__slider img {
    width: 100%;
}

.lp-mv__announcement {
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
}

.lp-mv__product {
    z-index: 1;
    width: 100%;
}

.lp-mv__info {
    z-index: 4;
}

.lp-mv__badge {
    z-index: 8;
    top: 1%;
    left: 1%;
    width: 21.4667%;
}

.lp-mv__title-bg,
.lp-mv__title {
    width: 37.3333%;
}

.lp-mv__title-bg {
    z-index: 4;
}

.lp-mv__title {
    z-index: 5;
}

.lp-mv__slide--00 .lp-mv__badge {
    z-index: 8;
    top: 38%;
    left: 3.3%;
    width: 19.5%;
}

.lp-mv__slide--00.is-animated .lp-mv__badge {
    animation-delay: 1.5s !important;
}

.lp-mv__slide--00 .lp-mv__title {
    width: 76%;
    left: 21.5%;
    top: 38.8%;
}

.lp-mv__slide--00.is-animated .lp-mv__title {
    animation-delay: 0.3s !important;
}

.lp-mv__slide--01 .lp-mv__title-bg,
.lp-mv__slide--01 .lp-mv__title {
    left: 62.8%;
}

.lp-mv__slide--01 .lp-mv__lead--01 {
    z-index: 7;
    bottom: 4.8%;
    left: 29.5%;
    width: 13.6%;
}

.lp-mv__slide--02 .lp-mv__title-bg,
.lp-mv__slide--02 .lp-mv__title {
    left: 0;
    bottom: 0;
    width: 35.2%;
}

.lp-mv__slide--02 .lp-mv__lead--01 {
    z-index: 7;
    top: 2%;
    right: 1.5%;
    left: auto;
    width: 16.8%;
}

.lp-mv__slide--02 .lp-mv__lead--02 {
    z-index: 7;
    top: 27%;
    left: 40%;
    width: 15.3333%;
}



body[data-release-phase="main"] .lp-mv__slide--00 .lp-mv__link,
body[data-release-phase="main"] .lp-mv__slide--01 .lp-mv__link {
    aspect-ratio: 750 / 849;
}

body[data-release-phase="main"] .lp-mv__slide--00 .lp-mv__announcement,
body[data-release-phase="main"] .lp-mv__slide--01 .lp-mv__announcement {
    display: none;
}

body[data-release-phase="main"] .lp-mv__slide--00 .lp-mv__badge {
    top: 40%;
}

body[data-release-phase="main"] .lp-mv__slide--00 .lp-mv__title {
    top: 40.8%;
}

body[data-release-phase="main"] .lp-mv__slide--01 .lp-mv__title-bg,
body[data-release-phase="main"] .lp-mv__slide--01 .lp-mv__title {
    width: 42.4%;
    right: 0.5%;
    left: auto;
}

body[data-release-phase="main"] .lp-mv__slide--01 .lp-mv__badge {
    width: 23.733%;
}

body[data-release-phase="main"] .lp-mv__slide--01 .lp-mv__lead {
    width: 15.466%;
    left: 27.4%;
}

/* MV entrance sequence: reveal copy layers after the slide becomes active. */
.lp-mv__slide {
    --lp-mv-reveal-duration: 1s;
}

.lp-mv__title-bg,
.lp-mv__lead {
    opacity: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.lp-mv__title {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.lp-mv__badge {
    opacity: 0;
    transform: scale(2) rotate(-10deg);
}

.lp-mv__slide.is-animated .lp-mv__title-bg {
    animation: lp-brushdraw-down .4s var(--lp-ease) .6s both;
}

.lp-mv__slide.is-animated .lp-mv__title {
    animation: lp-blur-in var(--lp-mv-reveal-duration) var(--lp-ease) .8s both;
}

.lp-mv__slide.is-animated .lp-mv__lead {
    animation: lp-brushdraw-down var(--lp-mv-reveal-duration) var(--lp-ease) 1.5s both;
}

.lp-mv__slide.is-animated .lp-mv__lead--02 {
    animation-delay: 1.8s;
}

.lp-mv__slide.is-animated .lp-mv__badge {
    animation: lp-badge-pop var(--lp-mv-reveal-duration) cubic-bezier(.4, .05, .1, 1) 2s both;
}

.lp-mv__nav {
    background: transparent;
    top: 50%;
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 80%));
}

.lp-mv__nav::before {
    content: "";
    position: absolute;
    right: 20%;
    width: 30%;
    height: 30%;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
}

.lp-mv__nav--prev {
    left: 0;
}

.lp-mv__nav--next {
    right: 0;
}

.lp-mv__nav--prev::before {
    right: auto;
    left: 20%;
    transform: rotate(-135deg);
}

/* ==================================================
  08. Introduction
================================================== */
.lp-intro {
    position: relative;
    overflow: hidden;
}

.lp-intro>* {
    position: relative;
    left: 0;
    width: 100%;
    margin-top: 3%;
}

.lp-intro>section:last-of-type {
    margin-bottom: 14%;
}

.lp-intro>.lp-sizeup:last-of-type {
    margin-bottom: 0%;
}

.lp-intro-soup .lp-heading-layer,
.lp-intro-material .lp-heading-layer {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}

.lp-intro-soup .lp-video-frame,
.lp-intro-material .lp-video-frame {
    left: 0;
    right: 0;
    margin: auto;
}

.lp-intro-soup .lp-intro-block__desc,
.lp-intro-material .lp-intro-block__desc {
    position: absolute;
    left: 0;
    width: 100%;
}

/* Intro entrance sequence */
.lp-intro-block.js-reveal {
    --lp-intro-reveal-duration: 1s;
}

.lp-intro-material.js-reveal .lp-heading-layer__bg {
    /* opacity: 0; */
    /* -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); */
    /* clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); */
}

.lp-intro-material.js-reveal .lp-heading-layer__title {
    /* opacity: 0; */
    /* transform: scale(.8); */
}

.lp-intro-material.js-reveal .lp-video-frame {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.lp-tvcm.js-reveal {
    /* opacity: 0; */
    /* transform: translateY(40px); */
}

.lp-intro-material.js-reveal.is-visible .lp-heading-layer__bg {
    /* animation: lp-brushdraw-left .5s var(--lp-ease)
    .3s both; */
}

.lp-intro-material.js-reveal.is-visible .lp-heading-layer__title {
    /* animation: lp-bounce var(--lp-intro-reveal-duration) var(--lp-ease)
    .6s both; */
}

.lp-intro-material.js-reveal.is-visible .lp-video-frame {
    animation: lp-blur-in var(--lp-intro-reveal-duration) var(--lp-ease) both;
}


.lp-tvcm.js-reveal.is-visible {
    /* animation: lp-fade-up var(--lp-intro-reveal-duration) var(--lp-ease)
    .3s both; */
}

/* ----- 08-1. Soup ----- */
.lp-intro-soup {
    top: 0;
    aspect-ratio: 750 / 425;
    margin-top: 2%;
}

.lp-intro-soup .lp-heading-layer__title {
    z-index: 1;
    position: relative;
}

.lp-intro-soup__title-line {
    position: absolute;
    top: -2%;
    z-index: 1;
}


.lp-intro-soup .lp-video-frame {
    top: 3.5%;
    width: 38.7%;
    aspect-ratio: 295 / 465;
    mask-size: cover;
    z-index: 0;
}

.lp-intro-soup .lp-intro-soup__video--01 {
    right: auto;
    left: 0;
}

.lp-intro-soup .lp-intro-soup__video--01 .lp-video-frame__media {
    transform: translateX(-5%);
}

.lp-intro-soup .lp-intro-soup__video--02 {
    left: auto;
    right: 0;
}

.lp-intro-soup .lp-intro-soup__video--02 .lp-video-frame__media {
    transform: translateX(-55%);
}

.lp-intro-soup .lp-video-frame .lp-video-frame__media {
    width: auto;
    height: 100%;
}

.lp-intro-soup .lp-intro-block__desc {
    bottom: 0;
}


/* ----- 08-2. Material ----- */
.lp-intro-material {
    aspect-ratio: 750 / 805;
}

.lp-intro-material .lp-heading-layer {
    /* height: 29.615%; */
}

.lp-intro-material .lp-video-frame {
    top: 14.3%;
}

.lp-intro-material .lp-intro-block__desc {
    bottom: 0;
}

/* ----- 08-3. Intro anchor ----- */
.lp-intro-anchor {
    margin-top: 0;
}

.lp-intro-anchor .lp-heading-layer {
    position: relative;
    z-index: 0;
    width: 100%;
    aspect-ratio: 750 / 170;
}

.lp-anchor-nav {
    position: relative;
    width: 100%;
    aspect-ratio: 750 / 454;
}

/* ------------------------------
  Layout
------------------------------ */
.lp-anchor-nav__item,
.lp-anchor-nav__desc {
    position: absolute;
}

.lp-anchor-nav__item {
    display: block;
}

.lp-anchor-nav__item img {
    transition: .3s;
}

.lp-anchor-nav__item:hover {
    z-index: 3;
}

.lp-anchor-nav__item:hover img {
    transform: scale(1.05);
    filter: brightness(1.08);
}

.lp-anchor-nav__item img,
.lp-anchor-nav__desc {
    display: block;
    width: 100%;
}

/* メイン商品 */
.lp-anchor-nav__item--main01 {
    top: 0;
    left: 2%;
    width: 48%;
}

.lp-anchor-nav__item--main01 img {
    transform-origin: left;
}

.lp-anchor-nav__item--main02 {
    top: 0;
    right: 2%;
    width: 48%;
}

.lp-anchor-nav__item--main02 img {
    transform-origin: right;
}

/* 説明 */
.lp-anchor-nav__desc {
    bottom: 0;
    left: 0;
    width: 100%;
}

/* 診断（現行HTMLでは未使用。復活修正に備えて保持） */
.lp-anchor-nav__item--diagnosis {
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

/* Anchor reveal animation */
.lp-anchor-nav.js-reveal .lp-anchor-nav__item--main01 {
    opacity: 0;
    transform: translateX(-40px);
}

.lp-anchor-nav.js-reveal .lp-anchor-nav__item--main02 {
    opacity: 0;
    transform: translateX(40px);
}

.lp-anchor-nav.js-reveal .lp-anchor-nav__desc {
    opacity: 0;
    transform: translateY(20px);
}

.lp-anchor-nav.js-reveal .lp-anchor-nav__item--diagnosis {
    opacity: 0;
    transform: scale(.8);
}

/* 商品1 */
.lp-anchor-nav.js-reveal.is-visible .lp-anchor-nav__item--main01 {
    animation:
        lp-fade-left .4s var(--lp-ease) both;
}

/* 商品2 */
.lp-anchor-nav.js-reveal.is-visible .lp-anchor-nav__item--main02 {
    animation:
        lp-fade-right .4s var(--lp-ease) .2s both;
}

/* 説明文 */
.lp-anchor-nav.js-reveal.is-visible .lp-anchor-nav__desc {
    animation:
        lp-fade-up .4s var(--lp-ease) .4s both;
}

/* 診断 */
.lp-anchor-nav.js-reveal.is-visible .lp-anchor-nav__item--diagnosis {
    animation:
        lp-bounce .4s var(--lp-ease) .6s both;
}

/* ----- 08-4. Size-up ----- */
.lp-sizeup.js-reveal {
    --lp-sizeup-reveal-duration: .8s;
}

.lp-sizeup.js-reveal .lp-sizeup__title,
.lp-sizeup.js-reveal .lp-sizeup__product--02,
.lp-sizeup.js-reveal .lp-sizeup__product--03 {
    opacity: 0;
    transform: scale(.8);
}

.lp-sizeup.js-reveal .lp-sizeup__products {
    opacity: 0;
    transform: translateY(40px);
}

.lp-sizeup.js-reveal .lp-sizeup__arrow {
    opacity: 0;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.lp-sizeup.js-reveal .lp-sizeup__badge {
    opacity: 0;
    transform: scale(2) rotate(-10deg);
}

.lp-sizeup.js-reveal.is-visible .lp-sizeup__title {
    animation: lp-bounce var(--lp-sizeup-reveal-duration) var(--lp-ease) .2s both;
}

.lp-sizeup.js-reveal.is-visible .lp-sizeup__products {
    animation: lp-fade-up var(--lp-sizeup-reveal-duration) var(--lp-ease) .3s both;
}

.lp-sizeup.js-reveal.is-visible .lp-sizeup__arrow--01 {
    animation: lp-brushdraw-left .3s var(--lp-ease) .7s both;
}

.lp-sizeup.js-reveal.is-visible .lp-sizeup__product--02 {
    animation: lp-bounce var(--lp-sizeup-reveal-duration) var(--lp-ease) 1s both;
}

.lp-sizeup.js-reveal.is-visible .lp-sizeup__arrow--02 {
    animation: lp-brushdraw-left .3s var(--lp-ease) 1.4s both;
}

.lp-sizeup.js-reveal.is-visible .lp-sizeup__product--03 {
    animation: lp-bounce var(--lp-sizeup-reveal-duration) var(--lp-ease) 1.7s both;
}

.lp-sizeup.js-reveal.is-visible .lp-sizeup__badge {
    animation: lp-badge-pop var(--lp-sizeup-reveal-duration) cubic-bezier(.4, .05, .1, 1) 2.4s both;
}

.lp-sizeup {
    position: relative;
    aspect-ratio: 750 / 1345;
}

.lp-sizeup__stage {
    position: relative;
    z-index: 1;
    aspect-ratio: 750 / 575;
}

.lp-sizeup__stage .lp-heading-layer {
    position: absolute;
    z-index: 2;
    width: 100%;
    aspect-ratio: 750 / 230;
    top: -4%;
}

.lp-sizeup__stage>img {
    position: absolute;
}

.lp-sizeup__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 12.9%;
}

.lp-sizeup__title {
    z-index: 3;
    top: 9%;
    left: 0;
    width: 100%;
}

.lp-sizeup__products {
    position: absolute;
    z-index: 2;
    top: 30.7%;
    left: 2.4%;
    display: flex;
    width: 95.2%;
}

.lp-sizeup__products img {
    width: 33.3333%;
}

.lp-sizeup__products .lp-sizeup__arrow {
    width: 9.3%;
    position: absolute;
    top: 6.5%;
    left: 29%;
}

.lp-sizeup__products .lp-sizeup__arrow--02 {
    left: 62%;
}

.lp-sizeup__badge {
    z-index: 4;
    top: 18%;
    right: 3%;
    width: 14.9333%;
}

.lp-sizeup__desc {
    z-index: 4;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* ----- 08-4a. Topping ----- */
/* Topping entrance sequence
   NOTE: current HTML has no js-reveal on .lp-topping; keep for possible revival. */
.lp-topping.js-reveal {
    --lp-topping-reveal-duration: .8s;
}

.lp-topping.js-reveal .lp-topping__img {
    /* opacity: 0; */
    /* -webkit-filter: blur(10px); */
    /* filter: blur(10px); */
}

.lp-topping.js-reveal.is-visible .lp-topping__img {
    /* animation: lp-blur-in var(--lp-topping-reveal-duration) var(--lp-ease)
    .3s both; */
}

.lp-topping {
    aspect-ratio: 750 / 755;
    position: relative;
}

.lp-topping>img {
    position: absolute;
}

/* title/descは現行HTMLでは未使用。再変更に備えて保持。 */
.lp-topping__title {
    z-index: 2;
    top: 0;
    /* left: 1.5%; */
    /* width: 46.4%; */
}

.lp-topping__img {
    z-index: 3;
    top: 29.5%;
    right: 0;
    left: 0;
    margin: auto;
    width: 84%;
}

.lp-topping__desc {
    z-index: 4;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* ----- 08-5. TVCM ----- */
.lp-tvcm {
    aspect-ratio: 750 / 460;
}

.lp-tvcm__bg {
    position: absolute;
    inset: 0;
    width: 100%;
}

.lp-tvcm__inner {
    position: absolute;
    inset: 0;
}

.lp-tvcm__title {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 30.9333%;
}

.lp-tvcm__open {
    position: absolute;
    z-index: 2;
    top: 14%;
    left: 6.7333%;
    width: 86.9333%;
    outline: none;
    container-type: inline-size;
    overflow: hidden;
}

.lp-tvcm__open img {
    transition: .4s;
}

.lp-tvcm__open:hover img {
    transform: scale(1.04);
    filter: brightness(1.04);
}

.lp-tvcm__thumb {
    width: 100%;
}

.lp-tvcm__play {
    position: absolute;
    left: 4%;
    bottom: 5%;
    width: 13cqw;
    height: 13cqw;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.lp-tvcm__play::after {
    content: "";
    position: absolute;
    left: 54%;
    top: 50%;
    transform: translate(-45%, -50%);
    border-top: 3cqw solid transparent;
    border-bottom: 3cqw solid transparent;
    border-left: 5cqw solid #111;
}

/* ==================================================
  09. Product sections
================================================== */
/* Product section / hero layout */
.lp-product-section {
    position: relative;
    overflow: hidden;
}

.lp-product-section__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lp-product-section__inner {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.lp-product-section__inner > * {
    position: relative;
    overflow: hidden;
}

.lp-product-hero__stage {
    aspect-ratio: 750 / 694;
    position: relative;
}

.lp-product-hero__stage img {
    position: absolute;
}

.lp-product-hero__product {
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    mask-image: url(/synced-assets/menu_butatsukejiru/assets/img/product_mask.webp);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
}

.lp-product-hero__title-bg,
.lp-product-hero__title,
.lp-product-hero__price {
    top: 0;
    right: 0;
    width: 46.6667%;

}

.lp-product-hero__title-bg {

    z-index: 3;
}

.lp-product-hero__title {
    z-index: 4;
}

.lp-product-hero__lead {
    z-index: 5;
}

.lp-product-hero__price {
    z-index: 5;
}

/* Availability */
.lp-product-availability {
    margin: 3% 0 0 0;
}

.lp-product-availability__link {
    display: block;
    width: 90%;
    margin: 0 auto;
}

/* Product menu */
.lp-product-menu .lp-heading-layer {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 230;
}

.lp-product-menu .lp-video-frame {
    top: 21%;
    right: 0;
    left: 0;
    z-index: 0;
    margin: auto;
}

.lp-product-menu__desc {
    position: absolute;
    bottom: 1.5%;
    left: 0;
    width: 100%;
}

/* Product point */
.lp-product-point {
    width: 95%;
    margin: 0 auto;
}

.lp-product-point__info {
    z-index: 1;
}

.lp-product-point__product {
    position: absolute;
    left: 5.9667%;
    z-index: 2;
    width: 68.5333%;
}

/* Product reveal animations */
.lp-product-hero.js-reveal,
.lp-product-menu.js-reveal,
.lp-product-point.js-reveal {
    --lp-product-reveal-duration: 1s;
}

/* Product hero: product image and price remain visible from the start. */
.lp-product-hero.js-reveal .lp-product-hero__title-bg,
.lp-product-hero.js-reveal .lp-product-hero__lead {
    opacity: 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.lp-product-hero.js-reveal .lp-product-hero__title {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.lp-product-hero.js-reveal.is-visible .lp-product-hero__title-bg {
    animation: lp-brushdraw-down .4s var(--lp-ease) .6s both;
}

.lp-product-hero.js-reveal.is-visible .lp-product-hero__title {
    animation: lp-blur-in var(--lp-product-reveal-duration) var(--lp-ease) 1s both;
}

.lp-product-hero.js-reveal.is-visible .lp-product-hero__lead {
    animation: lp-brushdraw-down var(--lp-product-reveal-duration) var(--lp-ease) 1.5s both;
}

.lp-product-hero.js-reveal.is-visible .lp-product-hero__lead--02 {
    animation-delay: 1.8s;
}

/* Product menu: same heading and video motion as the introduction. */
.lp-product-menu.js-reveal .lp-heading-layer__bg {
    /* opacity: 0; */
    /* -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); */
    /* clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); */
}

.lp-product-menu.js-reveal .lp-heading-layer__title {
    /* opacity: 0; */
    /* transform: scale(.8); */
}

.lp-product-menu.js-reveal .lp-video-frame {
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.lp-product-menu.js-reveal.is-visible .lp-heading-layer__bg {
    /* animation: lp-brushdraw-left .5s var(--lp-ease)
    .3s both; */
}

.lp-product-menu.js-reveal.is-visible .lp-heading-layer__title {
    /* animation: lp-bounce var(--lp-product-reveal-duration) var(--lp-ease)
    .6s both; */
}

.lp-product-menu.js-reveal.is-visible .lp-video-frame {
    animation: lp-blur-in var(--lp-product-reveal-duration) var(--lp-ease) both;
}

/* Product point */
.lp-product-point.js-reveal .lp-product-point__stage {
    /* opacity: 0; */
    /* transform: translateY(40px); */
}

.lp-product-point.js-reveal .lp-product-point__product {
    /* opacity: 0; */
    /* -webkit-filter: blur(10px); */
    /* filter: blur(10px); */
}

.lp-product-point.js-reveal.is-visible .lp-product-point__stage {
    /* animation: lp-fade-up var(--lp-product-reveal-duration) var(--lp-ease)
    .3s both; */
}

.lp-product-point.js-reveal.is-visible .lp-product-point__product {
    /* animation: lp-blur-in var(--lp-product-reveal-duration) var(--lp-ease)
    .8s both; */
}

/* product 1 coordinates (750 × 2487) */
[data-section-key="main01"] {
    aspect-ratio: 750 / 2390;
    margin-top: -9.5%;
}

[data-section-key="main01"] .lp-product-hero__lead--01 {
    bottom: 7.7%;
    left: 24.5%;
    width: 13.6%;
}

[data-section-key="main01"] .lp-product-hero__lead--02 {
    bottom: 4%;
    left: 2.8%;
    width: 17.0%;
}

[data-section-key="main01"] .lp-product-menu {
    aspect-ratio: 750 / 770;
}

[data-section-key="main01"] .lp-product-point {
    aspect-ratio: 694 / 674;
}

[data-section-key="main01"] .lp-product-point__product {
    top: 17.25%;
}

/* product 2 coordinates (750 × 2558) */
[data-section-key="main02"] {
    aspect-ratio: 750 / 2522;
    margin-top: -10%;
}

[data-section-key="main02"] .lp-product-hero__title-bg,
[data-section-key="main02"] .lp-product-hero__title,
[data-section-key="main02"] .lp-product-hero__price {
    top: auto;
    bottom: 0;
    left: 0;
    width: 46.6667%;
}

[data-section-key="main02"] .lp-product-hero__lead--01 {
    top: 5.9%;
    right: 2%;
    left: auto;
    width: 16.8%;
}

[data-section-key="main02"] .lp-product-hero__lead--02 {
    top: 32.8%;
    left: 41.6%;
    width: 12%;
}

[data-section-key="main02"] .lp-product-availability {
    
margin: 0;
}

[data-section-key="main02"] .lp-product-menu {
    aspect-ratio: 750 / 750;
}

[data-section-key="main02"] .lp-product-menu .lp-video-frame {
    top: 19%;
}

[data-section-key="main02"] .lp-product-point {
    aspect-ratio: 694 / 763;
}

[data-section-key="main02"] .lp-product-point__product {
    top: 15.15%;
}

/* ==================================================
  10. Diagnosis
================================================== */
.lp-diagnosis {
    position: relative;
    container-type: inline-size;
    padding: 3% 0 0;
}

/* Diagnosis section background */
.lp-diagnosis__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: calc(100% - 20cqw) !important;
    top: 20cqw;
}

.lp-diagnosis__title-stage {
    position: relative;
    aspect-ratio: 750 / 890;
}

.lp-diagnosis__title-stage>img,
.lp-diagnosis__title-stage>button {
    position: absolute;
}

.lp-diagnosis__title-bg {
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
}

.lp-diagnosis__title01 {
    z-index: 2;
    top: 29.5%;
    left: 23.9%;
    width: 20.5%;
}

.lp-diagnosis__title02 {
    z-index: 2;
    top: 30.7%;
    left: 49.3333%;
    width: 37.033%;
}

.lp-diagnosis__start {
    z-index: 3;
    top: 80%;
    left: 19.6%;
    width: 62.8%;
}

.lp-diagnosis__start img {
    width: 100%;
}

.lp-diagnosis__restart img {
    width: 100%;
}

/* Diagnosis intro / start animation */
.lp-diagnosis__title-stage.js-reveal {
    --lp-diagnosis-intro-duration: .8s;
    opacity: 0;
    transform: translateY(40px);
}

.lp-diagnosis__title-stage.js-reveal .lp-diagnosis__title01 {
    opacity: 0;
    transform: translateX(-40px);
}

.lp-diagnosis__title-stage.js-reveal .lp-diagnosis__title02 {
    opacity: 0;
    transform: translateX(40px);
}

.lp-diagnosis__title-stage.js-reveal .lp-diagnosis__start {
    opacity: 0;
    transform: scale(.8);
}

.lp-diagnosis__title-stage.js-reveal.is-visible {
    animation: lp-fade-up var(--lp-diagnosis-intro-duration) var(--lp-ease) .3s both;
}

.lp-diagnosis__title-stage.js-reveal.is-visible .lp-diagnosis__title01 {
    animation: lp-fade-left .5s var(--lp-ease) .4s both;
}

.lp-diagnosis__title-stage.js-reveal.is-visible .lp-diagnosis__title02 {
    animation: lp-fade-right .5s var(--lp-ease) .8s both;
}

.lp-diagnosis__title-stage.js-reveal.is-visible .lp-diagnosis__start {
    animation: lp-bounce var(--lp-diagnosis-intro-duration) var(--lp-ease) 1s both;
}

.lp-diagnosis.is-starting .lp-diagnosis__title-stage.js-reveal.is-visible .lp-diagnosis__start {
    transform: scale(1);
    animation: lp-fade-out .2s ease both;
    pointer-events: none;
}

.lp-diagnosis.is-running .lp-diagnosis__title-stage.js-reveal.is-visible .lp-diagnosis__start,
.lp-diagnosis.is-result .lp-diagnosis__title-stage.js-reveal.is-visible .lp-diagnosis__start {
    opacity: 0;
    transform: scale(1);
    animation: none;
    pointer-events: none;
}

.lp-diagnosis.is-running .lp-diagnosis__title-bg,
.lp-diagnosis.is-result .lp-diagnosis__title-bg {
    aspect-ratio: 750 / 630;
    object-fit: cover;
    object-position: left top;
}

/* Quiz */
.lp-diagnosis__quiz {
    position: relative;
    width: 93%;
    margin: -31% auto 0;
}

.lp-diagnosis__form {
    margin: 0;
}

.lp-diagnosis-question {
    position: relative;
    width: 100%;
    aspect-ratio: 723 / 702;
    padding: 0;
    margin: 0;
    border: 0;
}

.lp-diagnosis-question.is-leaving {
    animation: lp-fade-out .2s ease both;
    pointer-events: none;
}

.lp-diagnosis-question__question {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 2.9333%;
    width: 96.4%;
}

.lp-diagnosis-question__choices {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.lp-diagnosis-choice {
    position: absolute;
    left: 8.6%;
    width: 84.6667%;
    transition: transform .2s ease, filter .2s ease;
}

.lp-diagnosis-choice:nth-child(1) {
    top: 21.25%;
}

.lp-diagnosis-choice:nth-child(2) {
    top: 54.1%;
}

.lp-diagnosis-choice img {
    width: 100%;
}

.lp-diagnosis-question.is-entering .lp-diagnosis-question__question {
    animation: lp-blur-in .4s var(--lp-ease) both;
}

.lp-diagnosis-question.is-entering .lp-diagnosis-choice:nth-child(1) img {
    animation: lp-fade-up .4s var(--lp-ease) .1s both;
}

.lp-diagnosis-question.is-entering .lp-diagnosis-choice:nth-child(2) img {
    animation: lp-fade-up .4s var(--lp-ease) .2s both;
}

.lp-diagnosis-choice:hover {
    transform: translateY(-3px);
}

.lp-diagnosis-choice.is-selected {
    transform: scale(1.04);
}

.lp-diagnosis-choice:disabled {
    cursor: default;
}

/* Results */
.lp-diagnosis__results {
    position: relative;
    width: 93%;
    margin: -32% auto 0;
    aspect-ratio: 750 / 1190;
}

.lp-diagnosis__results.is-leaving {
    animation: lp-fade-out .2s ease both;
    pointer-events: none;
}

.lp-diagnosis__result-title {
    width: 62.8%;
    margin: 0 auto;
}

.lp-diagnosis__result-list {
    position: relative;
    width: 97.0667%;
    margin-inline: auto;
    margin-top: -4%;
    margin-left: 2.5%;
}

.lp-diagnosis-result {
    position: relative;
    aspect-ratio: 728 / 910;
}

.lp-diagnosis-result__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
}

.lp-diagnosis-result__product {
    position: absolute;
    z-index: 1;
    top: 35.2%;
    left: 0;
    width: 100%;
}

/* Result reveal animation */
.lp-diagnosis-result.is-entering .lp-diagnosis-result__bg {
    animation: lp-blur-in .4s var(--lp-ease) both;
}

.lp-diagnosis-result.is-entering .lp-diagnosis-result__product {
    animation: lp-fade-up .4s var(--lp-ease) .4s both;
}

/* Result actions */
.lp-diagnosis__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96%;
    margin: -2% 1.5% 0 auto;
}

.lp-diagnosis__restart,
.lp-diagnosis__share {
    display: block;
    width: 50%;
    padding: 0;
    border: 0;
    background: transparent;
}

.lp-diagnosis__restart img,
.lp-diagnosis__share img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==================================================
  11. Seasonal / secondary slider content
================================================== */
/* Season section base */
.lp-season {
    position: relative;
}

.lp-season__title {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 0;
}

.lp-season__title img {
    width: 100%;
}

/* Pickup */
.lp-season-pickup {
    margin: 2% auto 5% auto;
}

/* Pickup reveal */
.lp-season-pickup.js-reveal .lp-season-pickup__product {
    /* opacity: 0; */
    /* transform: translateY(40px); */
}

.lp-season-pickup.js-reveal .lp-season-pickup__badge,
.lp-season-pickup__point.js-reveal .lp-season-pickup__point-img {
    /* opacity: 0; */
    /* -webkit-filter: blur(10px); */
    /* filter: blur(10px); */
}

.lp-season-pickup.js-reveal.is-visible .lp-season-pickup__product {
    /* animation: lp-fade-up .4s var(--lp-ease) both; */
}

.lp-season-pickup.js-reveal.is-visible .lp-season-pickup__badge {
    /* animation: lp-blur-in .3s var(--lp-ease) .3s both; */
}

.lp-season-pickup__point.js-reveal.is-visible .lp-season-pickup__point-img {
    /* animation: lp-blur-in 1s var(--lp-ease) .8s both; */
}

.lp-season-pickup__card,
.lp-season-pickup__point {
    position: relative;
    width: 89.5%;
    margin: 0 auto;
}

/* 商品一式を重ねる場所 */
.lp-season-pickup__card {
    aspect-ratio: 672 / 1075;
    /* 実際の使用範囲に合わせて調整 */
}

.lp-season-pickup__card>img,
.lp-season-pickup__card>a {
    position: absolute;
}

.lp-season-pickup__bg {
    position: absolute;
    inset: 0;
    width: 100%;
}

.lp-season-pickup__product,
.lp-season-pickup__badge {
    top: 0;
}

.lp-season-pickup__info {
    top: 3%;
}

.lp-season-pickup__sales {
    bottom: 7.8%;
    width: 90%;
    left: 5%;
}

/* おすすめポイントを配置する場所 */
.lp-season-pickup__point {
    aspect-ratio: 672 / 670;
    /* 下半分だけの高さへ調整 */
}

.lp-season-pickup__point>img {
    position: absolute;
}

.lp-season-pickup__point-title {
    top: 0;
    z-index: 1;
}

.lp-season-pickup__point-img {
    top: 16%;
    left: 5%;
    width: 90%;
}

.lp-season-pickup__point-desc {
    bottom: 0;
}

/* Secondary slider */
.lp-season-slider,
.lp-season-item__stage {
    aspect-ratio: 751 / 1070;
}

.lp-season-slider {
    position: relative;
    margin-bottom: 10%;
}

/* Season slider navigation */
.lp-season-slider .splide__arrow {
    border-radius: 50%;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

.lp-season-slider .splide__arrow::before {
    content: "";
    position: absolute;
    right: 40%;
    width: 30%;
    height: 30%;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
}

.lp-season-slider .splide__arrow--prev::before {
    right: auto;
    left: 40%;
    transform: rotate(-135deg);
}

.lp-season-slider .splide__arrow--prev {
    left: 12px;
}

.lp-season-slider .splide__arrow--next {
    right: 12px;
}

.lp-season-item__stage {
    position: relative;
}

.lp-season-item__stage>img,
.lp-season-item__stage>a {
    position: absolute;
}

.lp-season-item__bg {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lp-season-item__product,
.lp-season-item__badge,
.lp-season-item__info {
    left: 5.2%;
    width: 89.6%;
}

.lp-season-item__product {
    z-index: 2;
    top: 2.3%;
}

.lp-season-item__badge {
    z-index: 4;
    top: 2.3%;
}

.lp-season-item__info {
    z-index: 3;
    top: 2.3%;
}

.lp-season-item__sales {
    z-index: 6;
    bottom: 8.5%;
    left: 9.85%;
    width: 80.3%;
}

.lp-season-item__sales img {
    width: 100%;
}

.lp-season-slider .splide__arrow svg {
    display: none;
}

.lp-season-slider .lp-season-item {
    position: relative;
    opacity: 0.8;
    transform: scale(0.8);
    transition: .8s;
}

.lp-season-slider .splide__slide.is-active .lp-season-item {
    opacity: 1;
    z-index: 1;
    transform: scale(1);
}

/* Season slider pagination */
.splide__pagination {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    pointer-events: none
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
    display: none
}

.splide__pagination {
    bottom: -3%;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1;
}

.splide__pagination__page {
    background: #b3b3b3;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin: 8px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: .2s;
    width: 10px;
}

.splide__pagination__page.is-active {
    background: #ffffff;
    z-index: 1;
    box-shadow: 1px 1px 10px #00000030;
}

.splide__pagination__page:hover {
    cursor: pointer;
    opacity: .9
}

.splide__pagination__page:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
    outline: 3px solid #0bf;
    outline-offset: 3px
}

/* ==================================================
  12. Statement / footer overrides
  LP用に共通コンポーネントの表示を上書き
================================================== */
.o-statement {
    line-height: normal;
    background-color: #fff !important
}

#component-statement {
    background-color: #fbf7ef;
    margin: 0;
    position: relative;
    width: 100%;
    max-width: none;
    z-index: 2
}

#component-footer {
    position: relative;
    z-index: 1
}

#component-statement * {
    white-space: pre-line
}

.o-statement__content-wrapper {
    margin-bottom: 0;
    background-image: linear-gradient(180deg, #fbf7ef 120px, #fcefce 0, #fcefce)
}

.o-statement-top {
    align-items: center;
    flex-direction: row;
    margin: 0 auto auto !important;
    padding-top: 80px !important
}

.o-statement-top__heading {
    font-size: 26px
}

.o-statement-top__sentence-wrapper {
    margin-top: 0 !important
}

.o-statement-bottom__background:before {
    content: "";
    display: block;
    padding-top: 106.6666666667%
}

.o-statement-bottom__background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.o-statement-bottom__content {
    flex-direction: column;
    padding: 40px 30px
}

.o-statement-bottom__heading {
    font-size: 32px;
    line-height: 50px
}

.o-statement-bottom__button {
    justify-content: center
}

@media screen and (min-width: 768px) {
    .only--mobile {
        display: none !important
    }
}

/* ==================================================
  13. Video modal
================================================== */
.modal-video {
    position: fixed;
    top: -1vh;
    left: -1vw;
    z-index: 1000000;
    width: 102vw;
    height: 102vh;
    height: 102dvh;
    background-color: rgb(0 0 0 / 80%);
    cursor: pointer;
    opacity: 1;
    animation: modal-video .3s ease-out both;
    transition: opacity .3s ease-out;
    overscroll-behavior: contain;
}

.modal-video-close {
    opacity: 0;
}

.modal-video-close .modal-video-movie-wrap {
    transform: translateY(20px);
}

.modal-video-body {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 960px;
    height: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

.modal-video-inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.modal-video-movie-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background-color: #333;
    cursor: default;
    animation: modal-video-inner .3s ease-out both;
    transform: translateY(0);
    transition: transform .3s ease-out;
}

.modal-video-movie-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.modal-video-close-btn {
    position: absolute;
    z-index: 2;
    top: -45px;
    right: 0;
    display: inline-block;
    width: 35px;
    height: 35px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.modal-video-close-btn::before,
.modal-video-close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    border-radius: 5px;
    background: #fff;
}

.modal-video-close-btn::before {
    transform: rotate(45deg);
}

.modal-video-close-btn::after {

    transform: rotate(-45deg);
}

.modal-video-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    color: #fff;
    text-align: center;
    cursor: default;
}

@media (orientation: landscape) {
    .modal-video-inner {
        padding: 10px 60px;
    }

    .modal-video-close-btn {
        top: 0;
        right: -45px;
    }
}

/* ==================================================
  14. Floating menu
================================================== */
.lp-marugame-floatmenu {
    display: none;
}

@media screen and (max-width: 767px) {
    .lp-marugame-floatmenu {
        display: block;
        position: fixed;
        right: 0;
        bottom: calc(54px + env(safe-area-inset-bottom));
        z-index: 50;
        width: 51%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(0, 16px);
        transition:
            opacity .4s ease,
            transform .4s ease,
            visibility .4s ease;
        background: rgb(255 255 255 / 70%);
        padding: 6px 5px 2px 5px;
    }

    .lp-marugame-floatmenu.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(0, 0);
    }

    .lp-marugame-floatmenu__close {
        position: absolute;
        top: -0.5em;
        left: -0.5em;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 1.1em;
        height: 1.1em;
        padding: 0;
        border: none;
        appearance: none;
        background: transparent;
        color: #ffffff;
        font-family: Arial, sans-serif;
        font-size: 27px;
        line-height: 1;
        cursor: pointer;
        background: #575757;
        border-radius: 50%;
        box-shadow: 0 0 4px rgb(0 0 0 / 40%);
    }

    .lp-marugame-floatmenu__close span {
        /* width: 100%; */
        height: 100%;
        align-items: center;
        justify-content: center;
        line-height: 1;
        display: flex;
    }
}

.lp-marugame-floatmenu__list {
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.lp-marugame-floatmenu__item {
    width: 100%;
}

.lp-marugame-floatmenu__link {
    display: block;
    width: 100%;
}

.lp-marugame-floatmenu__link img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==================================================
  15. Responsive / accessibility
================================================== */
@media (max-width: 767px) {
    .lp-marugame {
        --lp-content-width: 100vw;
        --lp-shadow: none;
    }

    .lp-marugame__container {
        display: block;
        max-width: var(--lp-content-width);
    }

    .lp-marugame__menu {
        display: none;
    }

    .lp-marugame__page-bg {
        display: none;
    }

    .lp-marugame__contents {
        width: 100%;
        max-width: none;
        box-shadow: none;
        border: none;
    }

    .lp-mv__slider .splide__track {
        overflow: hidden;
    }

    .lp-tvcm__play {
        width: 48px;
        height: 48px;
    }

    .lp-tvcm__play::after {
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 14px;
    }

    .lp-season {
        padding-bottom: 13vw;
    }

    .lp-mv__nav,
    .lp-season-slider .splide__arrow {
        width: 36px;
        height: 36px;
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .lp-marugame *,
    .lp-marugame *::before,
    .lp-marugame *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .lp-mv__title-bg,
    .lp-mv__title,
    .lp-mv__lead,
    .lp-mv__badge {
        opacity: 1;
        transform: none;
        -webkit-filter: none;
        filter: none;
        -webkit-clip-path: none;
        clip-path: none;
        animation: none !important;
    }

    .lp-intro-block.js-reveal,
    .lp-intro-block.js-reveal .lp-heading-layer__bg,
    .lp-intro-block.js-reveal .lp-heading-layer__title,
    .lp-intro-block.js-reveal .lp-video-frame,
    .lp-anchor-nav.js-reveal a:nth-child(1),
    .lp-anchor-nav.js-reveal a:nth-child(2),
    .lp-anchor-nav.js-reveal a:nth-child(3),
    .lp-marugame [class*="desc"].js-reveal,
    .lp-sizeup.js-reveal .lp-sizeup__title,
    .lp-sizeup.js-reveal .lp-sizeup__products,
    .lp-sizeup.js-reveal .lp-sizeup__product,
    .lp-sizeup.js-reveal .lp-sizeup__arrow,
    .lp-sizeup.js-reveal .lp-sizeup__badge,
    .lp-topping.js-reveal .lp-topping__img,
    .lp-product-hero.js-reveal .lp-product-hero__title-bg,
    .lp-product-hero.js-reveal .lp-product-hero__title,
    .lp-product-hero.js-reveal .lp-product-hero__lead,
    .lp-product-menu.js-reveal .lp-heading-layer__bg,
    .lp-product-menu.js-reveal .lp-heading-layer__title,
    .lp-product-menu.js-reveal .lp-video-frame,
    .lp-product-point.js-reveal .lp-product-point__stage,
    .lp-product-point.js-reveal .lp-product-point__product,
    .lp-diagnosis__title-stage.js-reveal,
    .lp-diagnosis__title-stage.js-reveal .lp-diagnosis__title01,
    .lp-diagnosis__title-stage.js-reveal .lp-diagnosis__title02,
    .lp-diagnosis__title-stage.js-reveal .lp-diagnosis__start,
    .lp-diagnosis-question,
    .lp-diagnosis-question__question,
    .lp-diagnosis-choice,
    .lp-diagnosis-choice img,
    .lp-diagnosis__results,
    .lp-diagnosis-result__bg,
    .lp-diagnosis-result__product {
        opacity: 1;
        transform: none;
        -webkit-filter: none;
        filter: none;
        -webkit-clip-path: none;
        clip-path: none;
        animation: none !important;
    }
}