@charset "UTF-8";

/* =========================
変数 
============================*/
.lp-container {
    --s-val: 10px;
    --page-inline: calc(var(--s-val) * 6);
    --color-dark-gray: #333;
    --color-navy: #00306C;
    --color-red: #E51842;
}

@media screen and (max-width: 767px) {
    .lp-container {
        --s-val: 2.66vw;
        --page-inline: calc(var(--s-val) * 2.1);
    }
}


/* =========================
共通
============================*/
#header {
    display: none;
}

#block-breadcrumbs {
    display: none;
}

.lp-container {
    color: #000;
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size: calc(var(--s-val) * 1.6);
    letter-spacing: 0;
}

.lp-container::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/global-bg.webp) no-repeat;
    background-size: cover;
    background-position: top;
    position: fixed;
    z-index: -100;
}

.font-montserrat {
    font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
}

a {
    text-decoration: none;
    color: currentColor;
}

.hover-opacity {
    transition: all 0.3s;
}
  
.hover-opacity:hover {
    opacity: 0.7;
}

.page-width {
    max-width: calc(1320px + var(--page-inline) * 2);
    margin-inline: auto;
    padding-inline: var(--page-inline);
}

.image {
    display: block;
    max-width: 100%;
    width: 100%;
}

.image--sp {
    display: none;
}

.br--sp {
    display: none;
}

.br--pc {
    display: block;
}

.indent {
    text-indent: -1em;
    padding-left: 1em;
}

/* === レスポンシブ === */
@media screen and (max-width: 767px) {
    .lp-container::before {
        background: url(../images/global-bg_sp.webp) no-repeat;
        background-size: cover;
    }

    .image--pc {
        display: none;
    }
    
    .image--sp {
        display: block;
    }
    
    .br--sp {
        display: block;
    }
    .br--pc {
        display: none;
    }
}

/* =========================
 button共通
============================*/
.button {
    display: block;
    width: calc(var(--s-val) * 31.5);
    text-align: center;
    font-size: calc(var(--s-val) * 1.6);
    padding: calc(var(--s-val) * 1.5) calc(var(--s-val) * 3.5);
    box-sizing: border-box;
    border: 1px solid var(--color-navy);
    transition: all 0.2s;
    position: relative;
}

.button::after {
    content: "";
    display: block;
    width: calc(var(--s-val) * 0.8);
    aspect-ratio: 30/56;
    background: url(../images/button-arrow_black.webp) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: calc(var(--s-val) * 2.2);
    transform: translateY(-50%);
}

.button:hover {
    opacity: 1;
    color: #fff;
    background-color: var(--color-navy);
}

.button:hover::after {
    background: url(../images/button-arrow_white.webp) no-repeat;
    background-size: contain;
}


/* =========================
 トップロゴ
============================*/
.lp-logo {
    padding: calc(var(--s-val) * 5) var(--page-inline);
}

.lp-logo img {
    width: calc(var(--s-val) * 61.7);
    margin-inline: auto;
}

/* === レスポンシブ === */
@media screen and (max-width: 767px) {
    .lp-logo {
        padding: calc(var(--s-val)* 4.5) var(--page-inline);
    }

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


/* =========================
 動画
============================*/
.lp-movie {
    margin-block-end: calc(var(--s-val)* 8.5);
}

.lp-movie iframe {
    aspect-ratio: 560/315;
}

/* === レスポンシブ === */
@media screen and (max-width: 767px) {
    .lp-movie {
        padding-inline: 0;
        margin-block-end: calc(var(--s-val)* 7);
    }
}

/* =========================
 商品メニュー
============================*/
.product-nav {
    margin-block-end: calc(var(--s-val) * 16);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--s-val) * 2);
}

.product-nav.page-width {
    max-width: calc(660px + var(--page-inline)* 2);
}

.product-nav__button {
    display: block;
    padding: calc(var(--s-val) * 2.2) calc(var(--s-val) * 1) calc(var(--s-val) * 1.9);
    max-width: 315px;
    width: calc(50% - calc(var(--s-val) * 1.5));
    font-size: calc(var(--s-val) * 1.6);
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    color: #fff;
    background-color: var(--color-navy);
    position: relative;
}

.product-nav__button::before {
    content: "";
    display: block;
    width: calc(var(--s-val) * 1.6);
    aspect-ratio: 64/36;
    background: url(../images/arrow-down_white.webp) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: calc(var(--s-val) * 2);
    transform: translateY(-50%);
}

/* === レスポンシブ === */
@media screen and (max-width: 990px) {
    .product-nav {
        justify-content: center;
    }

    .product-nav.page-width {
        max-width: calc(617px + var(--page-inline)* 2);
    }
}

@media screen and (max-width: 767px) {
    .product-nav {
        margin-block-end: calc(var(--s-val) * 10);
        flex-direction: column;
    }

    .product-nav__button {
        max-width: 100%;
        width: 100%;
    }
}



/* =========================
 キャッチ
============================*/
.lp-catch {
    margin-block-end: calc(var(--s-val) * 16);
}

.lp-catch__item {
    --w-img: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--s-val) * 5);
}

.lp-catch__image {
    max-width: 631px;
    width: var(--w-img);
}

.lp-catch__text {
    width: calc(100% - var(--w-img));
}

.lp-catch__heading {
    display: inline-block;
    margin-block-end: calc(var(--s-val) * 4.9);
    font-size: calc(var(--s-val) * 3.2);
    font-weight: bold;
    color: var(--color-navy);
    position: relative;
}

.lp-catch__heading::before {
    content: "";
    display: block;
    width: calc(100% - calc(var(--s-val) * 1));
    aspect-ratio: 1508/358;
    background: url(../images/catch_heading_bg.webp) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: calc(var(--s-val) * -0.2);
    transform: translateY(calc(-50% + calc(var(--s-val) * 1.1)));
    z-index: -1;
}

.lp-catch__detail p {
    line-height: 1.7em;
}

.lp-catch__detail p:not(:last-of-type) {
    margin-block-end: calc(var(--s-val) * 2.4);
}

/* === レスポンシブ === */
@media screen and (max-width: 1320px) {
    .lp-catch__detail .br--pc {
        display: none;
    }
}

@media screen and (max-width: 990px) {
    .lp-catch.page-width {
        max-width: calc(638px + var(--page-inline)* 2);
    }

    .lp-catch__item {
        flex-direction: column;
    }

    .lp-catch__image {
        max-width: 100%;
        width: 100%;
    }

    .lp-catch__text {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .lp-catch {
        margin-block-end: calc(var(--s-val)* 8);
    }

    .lp-catch__heading {
        display: block;
        margin-block-end: calc(var(--s-val)* 3);
        font-size: calc(var(--s-val) * 2.4);
        text-align: center;
    }

    .lp-catch__heading::before {
        width: calc(100% - calc(var(--s-val) * 2));
        left: 50%;
        transform: translate(calc(-50% - calc(var(--s-val) * 0.5)),-50%);
    }

    .campaign-overview__detail-item {
        align-items: flex-start;
    }

    .lp-catch__detail p:not(:last-of-type) {
        margin-block-end: calc(var(--s-val) * 1.8);
    }

    .lp-catch__item {
        gap: calc(var(--s-val)* 4);
    }
}


/* =========================
 キャンペーン
============================*/
.lp-campaign {
    margin-block-end: calc(var(--s-val) * 18.3);
}

.lp-campaign.page-width {
    max-width: calc(897px + var(--page-inline)* 2);
}

.lp-campaign__inner {
    padding: calc(var(--s-val) * 5.7) calc(var(--s-val) * 3) calc(var(--s-val) * 6);
    border-radius: calc(var(--s-val) * 0.6);
    background-color: #fff;
}

.lp-campaign__inner > * {
    max-width: 638px;
    margin-inline: auto;
}

.lp-campaign__detail {
    margin-block-end: calc(var(--s-val) * 4.6);
}

.lp-campaign__heading {
    margin-block-end: calc(var(--s-val) * 2.9);
    font-size: calc(var(--s-val) * 2.1);
    font-weight: bold;
}

.lp-campaign__description {
    margin-block-end: calc(var(--s-val) * 2);
}

.lp-campaign__description p {
    line-height: 1.62em;
}

.lp-campaign__note {
    font-size: calc(var(--s-val) * 1.2);
}

.lp-campaign__note p {
    line-height: 1.7em;
}

.campaign-overview__title {
    margin-block-end: calc(var(--s-val) * 1.6);
    font-size: calc(var(--s-val) * 1.8);
    font-weight: bold;
}

.campaign-overview__detail-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--s-val) * 1.6);
}

.campaign-overview__detail-item:not(:last-of-type) {
    margin-block-end: calc(var(--s-val) * 0.9);
}

.campaign-overview__detail-heading,
.campaign-overview__detail-content {
    line-height: 1.3em;
}

.campaign-overview__detail-heading {
    min-width: 90px;
    padding: calc(var(--s-val) * 0.5) calc(var(--s-val) * 1);
    text-align: center;
    color: #fff;
    background-color: var(--color-navy);
}

/* === レスポンシブ === */
@media screen and (max-width: 767px) {
    .lp-campaign {
        margin-block-end: calc(var(--s-val) * 9);
    }

    .lp-campaign__inner {
        border-radius: calc(var(--s-val) * 0.4);
        padding: calc(var(--s-val) * 4) calc(var(--s-val) * 2);
    }

    .lp-campaign__heading {
        margin-block-end: calc(var(--s-val)* 2);
        text-align: center;
    }

    .campaign-overview__title {
        text-align: center;
    }

    .campaign-overview__detail-item {
        align-items: flex-start;
    }

    .campaign-overview__detail-content {
        margin-block-start: calc(var(--s-val) * 0.35);
    }

    .campaign-overview__detail-item:last-of-type .campaign-overview__detail-content {
        margin-block-start: calc(var(--s-val) * -0.2);
    }

    .campaign-overview__detail-heading {
        min-width: calc(var(--s-val) * 9);
    }
}


/* =========================
 第二弾プロモーション
============================*/
.promo-second {
    margin-block-end: calc(var(--s-val) * 6.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.promo-second__heading {
    display: inline-block;
    margin-block-end: calc(var(--s-val) * 5.2);
    font-size: calc(var(--s-val) * 3.2);
    font-weight: bold;
    text-align: center;
    color: var(--color-navy);
    position: relative;
}

.promo-second__heading::before {
    content: "";
    display: block;
    width: calc(100% - calc(var(--s-val) * 5));
    aspect-ratio: 1317/207;
    background: url(../images/promo-second_heading_bg.webp) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: calc(var(--s-val) * 1.5);
    transform: translateY(-50%);
    z-index: -1;
}

.promo-second__detail {
    text-align: center;
}

.promo-second__detail p {
    line-height: 1.9em;
}

.promo-second__detail p:not(:last-of-type) {
    margin-block-end: calc(var(--s-val) * 2.4);
}


/* === レスポンシブ === */
@media screen and (max-width: 767px) {
    .promo-second__heading {
        display: block;
        margin-block-end: calc(var(--s-val)* 3);
        font-size: calc(var(--s-val) * 2.4);
        text-align: center;
    }

    .promo-second__heading::before {
        width: calc(100% - calc(var(--s-val) * 2));
        left: 50%;
        transform: translate(calc(-50% - calc(var(--s-val) * 0.5)),-50%);
    }

    .promo-second__detail {
        text-align: left;
    }

    .promo-second__detail p {
        line-height: 1.7em;
    }

    .lp-catch__detail p:not(:last-of-type) {
        margin-block-end: calc(var(--s-val) * 1.8);
    }
}


/* =========================
 商品
============================*/
.lp-product {
    margin-block-end: calc(var(--s-val) * 19.3);
}

.lp-product:last-of-type {
    margin-block-end: calc(var(--s-val) * 14);
}

.lp-product__title {
    margin-block-end: calc(var(--s-val) * 3.9);
    padding-block-end: calc(var(--s-val) * 2);
    border-bottom: 1px solid #B4B4B4;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.lp-product--ruote-low .lp-product__title {
    padding-block-end: calc(var(--s-val) * 3.2);
}

.lp-product__title-heading {
    font-size: calc(var(--s-val) * 6);
    font-weight: bold;
    color: var(--color-navy);
}

.lp-product--ruote-low .lp-product__title-heading {
    line-height: 0.8em;
}

.lp-product--echappe .lp-product__title-heading {
    line-height: 1.1em;
}

.lp-product__title-main {
    font-size: calc(var(--s-val) * 6);
    font-weight: bold;
    line-height: 1em;
    color: var(--color-navy);
}

.lp-product--ruote-low .lp-product__title-decor {
    width: calc(var(--s-val) * 33.3);
}

.lp-product--echappe .lp-product__title-decor {
    width: calc(var(--s-val) * 27);
}

.lp-product__detail {
    margin-block-end: calc(var(--s-val) * 9);
}

.lp-product__detail p {
    line-height: 1.94em;
}

.lp-product__coming-soon {
    font-size: calc(var(--s-val) * 6);
    font-weight: bold;
    line-height: 1.1em;
    text-align: center;
    color: var(--color-navy);
}

/* === スライダー === */
.product-slider-wrap {
    padding-inline: calc(var(--s-val) * 13);
    margin-block-end: calc(var(--s-val) * 14);
    margin-inline: auto;
}

.product-slider {
    max-width: 895px;
    margin-inline: auto;
    position: relative;
}

.product-slider__item-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-inline: auto;
    position: relative;
}

.product-slider__main {
    max-width: 545px;
    width: 61%;
}

.product-slider__detail img {
    max-width: 415px;
    width: 47%;
    position: absolute;
    top: calc(var(--s-val) * 3.3);
    right: 0;
}

.product-slider__heading {
    margin-block-start: calc(var(--s-val) * 32.4);
    padding-block-end: calc(var(--s-val) * 1.6);
    text-align: right;
    position: relative;
    z-index: 1;
    color: var(--color-dark-gray);
}

.product-slider__heading::before {
    content: "";
    display: block;
    max-width: 385px;
    width: 26.74vw;
    height: 1px;
    background-color: var(--color-dark-gray);
    position: absolute;
    bottom: 0;
    right: 0;
}

.product-slider__heading p {
    line-height: 1em;
}

.product-slider__name {
    margin-block-end: calc(var(--s-val) * 1.5);
    font-size: calc(var(--s-val) * 4.2);
    font-weight: bold;
}

.product-slider__with {
    font-size: calc(var(--s-val) * 2.4);
    font-weight: bold;
    color: var(--color-red);
}

.product-slider__with-small {
    font-size: calc(var(--s-val) * 1.8);
}

.slider-arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - calc(var(--s-val) * 2.7)));
    z-index: 1;
}

.slider-arrow--prev {
    left: calc(var(--s-val) * -10.5);
}

.slider-arrow--next {
    right: calc(var(--s-val) * -11.6);
}

.slider-arrow img {
    width: calc(var(--s-val) * 3.8);
    aspect-ratio: 38/71;
}

.slider-arrow--prev img {
    transform: rotate(180deg);
}

.slick-dots {
    margin-block-start: calc(var(--s-val) * 4);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--s-val) * 1.6);
}

.slider-dot {
    --s-dots: calc(var(--s-val) * 1.4);
    width: var(--s-dots);
    aspect-ratio: 1/1;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid var(--color-navy);
    display: inline-block;
    cursor: pointer;
}

.slick-dots li {
    line-height: 0;
}

.slick-dots li.slick-active .slider-dot {
    background-color: var(--color-navy);
}


/* === 商品詳細 === */
.product-info {
    max-width: 1151px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(var(--s-val) * 6) calc(var(--s-val) * 10.3);
    margin-inline: auto;
}

.product-info__item {
    width: calc(33.33% - calc(var(--s-val) * 6.87));
}

.product-info__image {
    margin-block-end: calc(var(--s-val) * 2.4);
}

.product-info__detail {
    margin-block-end: calc(var(--s-val) * 2.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-info__name {
    color: #626262;
}

.product-info__price {
    font-size: calc(var(--s-val) * 1.4);
    line-height: 1em;
}

.product-info__item .button {
    width: 100%;
}



/* === レスポンシブ === */
@media screen and (max-width: 1080px) {
    .product-slider__heading {
        margin-block-start: calc(var(--s-val) * 25);
        padding-block-end: calc(var(--s-val) * 1.1);
    }

    .product-slider__name {
        margin-block-end: calc(var(--s-val) * 1);
        font-size: calc(var(--s-val) * 3.5);
    }

    .product-slider__with {
        font-size: calc(var(--s-val)* 2);
    }
    
    .product-slider__with-small {
        font-size: calc(var(--s-val)* 1.5);
    }
}

@media screen and (max-width: 990px) {
    .lp-product__title-heading {
        font-size: calc(var(--s-val)* 5);
    }

    .product-slider__heading::before {
        max-width: 277px;
        width: 32.5vw;
    }

    .lp-product--ruote-low .lp-product__title-decor {
        width: calc(var(--s-val)* 28.6);
    }

    .lp-product__coming-soon {
        font-size: calc(var(--s-val)* 5);
    }

    /* === スライダー === */
    .product-slider-wrap {
        --p-slider: calc(var(--s-val) * 3);
        padding-inline: var(--p-slider);
        max-width: calc(638px + var(--p-slider)* 2);
    }

    .slider-arrow--prev {
        left: calc(var(--s-val)* -6);
    }

    .slider-arrow--next {
        right: calc(var(--s-val)* -6.4);
    }

    .slider-arrow img {
        width: calc(var(--s-val)* 3);
    }
    
    /* === 商品詳細 === */
    .product-info {
        gap: calc(var(--s-val) * 5) calc(var(--s-val) * 6);
    }

    .product-info__item {
        width: calc(50% - calc(var(--s-val) * 3));
    }
}

@media screen and (max-width: 767px) {
    .lp-product {
        margin-block-end: calc(var(--s-val) * 11);
    }

    .lp-product:last-of-type {
        margin-block-end: calc(var(--s-val)* 11);
    }

    .lp-product__title {
        margin-block-end: calc(var(--s-val)* 3);
    }

    .lp-product__title-heading {
        font-size: calc(var(--s-val)* 2.8);
    }

    .lp-product--ruote-low .lp-product__title {
        padding-block-end: calc(var(--s-val)* 2);
    }

    .lp-product--ruote-low .lp-product__title-decor {
        width: calc(var(--s-val) * 15.5);
    }

    .lp-product--echappe .lp-product__title-decor {
        width: calc(var(--s-val) * 13);
    }

    .lp-product__detail {
        margin-block-end: calc(var(--s-val)* 3);
    }

    .lp-product__coming-soon {
        font-size: calc(var(--s-val) * 2.8);
    }


    /* === スライダー === */
    .product-slider-wrap {
        --p-slider: 0;
        margin-block-end: calc(var(--s-val)* 9);
    }

    .product-slider__item-flex {
        flex-direction: column;
        gap: calc(var(--s-val)* 25.4);
    }
    
    .product-slider__main {
        max-width: 100%;
        width: calc(var(--s-val) * 30.4);
        aspect-ratio: 1089/1452;
    }

    .product-slider__detail img {
        max-width: 100%;
        width: calc(var(--s-val) * 26);
        aspect-ratio: 1/1;
        top: auto;
        bottom: calc(var(--s-val) * 8.8);
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .product-slider__heading {
        margin-block-start: 0;
        padding-block-end: 0;
        text-align: center;
    }

    .product-slider__heading::before {
        display: none;
    }

    .product-slider__name {
        margin-block-end: calc(var(--s-val)* 1.6);
        font-size: calc(var(--s-val)* 3.2);
    }

    .product-slider__with {
        font-size: calc(var(--s-val)* 1.8);
    }
    
    .product-slider__with-small {
        font-size: calc(var(--s-val)* 1.4);
    }

    .slider-arrow {
        top: calc(var(--s-val) * 19);
        transform: none;
    }

    .slider-arrow--prev {
        left: calc(var(--s-val)* -1);
    }

    .slider-arrow--next {
        right: calc(var(--s-val)* -1);
    }

    .slider-arrow img {
        width: calc(var(--s-val)* 1.3);
    }

    .slick-dots {
        margin-block-start: calc(var(--s-val) * 3.7);
        gap: calc(var(--s-val)* 1.2);
    }

    .slider-dot {
        --s-dots: calc(var(--s-val) * 0.8);
    }


    /* === 商品詳細 === */
    .product-info {
        flex-direction: column;
        gap: calc(var(--s-val) * 7.5);
    }

    .product-info__item {
        width: 100%;
    }
}