@charset "utf-8";

/* ==============================
  Layout
============================== */
main {
    position: relative;
    padding-top: 12.5%;
    padding-bottom: 3.2%;
}
@media print, screen and (max-width: 768px) {
    main {
        padding-top: 37.3vw; /*140/375*/
        padding-bottom: 13.4vw;
    }
}

/* ==============================
  Background decoration
============================== */
.products-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 63.8%;   /* 1225/1920 */
    aspect-ratio: 245 / 93;
    z-index: 0;
    pointer-events: none;
}

.products-bg--bottom {
    top: auto;
    bottom: 0;
    right: 0;
    left: auto;
    width: 65.7%;   /* 1263/1920 */
    aspect-ratio: 421 / 138;
}
@media print, screen and (max-width: 768px) {
    .products-bg {
        width: 100%;
        aspect-ratio: unset;
    }

    .products-bg--bottom {
        display: none;
    }
}

/* ==============================
  Hero
============================== */
.products-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.products-hero-subtitle {
    font-size: min(2.4rem, 1.25vw);
    color: #8d8d8d;
    letter-spacing: 0.15em;
    line-height: 1;
    margin-bottom: 0.6em;
}

.products-hero-title {
    font-size: min(4.8rem, 2.5vw);
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1;
    margin-bottom: 1.5em;
}
@media print, screen and (max-width: 768px) {
    .products-hero-subtitle {
        font-size: 3.7vw;
        margin-bottom: 0.35em;
    }

    .products-hero-title {
        font-size: 6.6vw;
        margin-bottom: 1.44em;
    }
}

/* ==============================
  Category Nav
============================== */
.nav-toggle,
.nav-label {
    display: none;
}

.products-category-nav ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: max-content;
    align-items: center;
    grid-auto-rows: 3em;
}

.products-category-nav ul li {
    width: 10em;
}

.products-category-nav a {
    font-size: min(2rem, 1.04vw);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #000;
    text-decoration: none;
}

.products-category-nav a.active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.products-category-nav a:hover {
    opacity: 0.65;
}
@media print, screen and (max-width: 768px) {
    /* チェックボックス自体は隠す */
    .nav-toggle {
        display: none;
    }

    .products-category-nav {
        position: relative;
        width: 90%; /* 横幅はデザインに合わせて調整 */
        margin: 0 auto;
    }

    /* 開いている時のスタイル */
    .products-category-nav.is-open ul {
        display: flex;
    }

    .nav-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1em;
        height: 3em;
        border: 1px solid #000;
        cursor: pointer;
        font-weight: 600;
        background: #fff;
        position: relative;
    }

    /* アイコン（＋マーク） */
   .nav-label::after {
        content: " ";
        background-image: url(../sp-images/products/menu-down.svg);
        position: absolute;
        right: 1em;
        width: 1.25em;
        height: 1.25em;
        transition: transform 0.3s;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* メニューの初期状態（非表示） */
    .products-category-nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        border-right: 1px solid #000;
        border-left: 1px solid #000;
        background: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10;
        padding: 0;
        margin: 0;
    }

    /* 【ここがポイント！】チェックされたら表示＆アイコン回転 */
    .nav-toggle:checked ~ ul {
        display: flex;
    }

    .nav-toggle:checked ~ .nav-label::after {
        transform: rotate(180deg);
    }

    /* リンクのスタイル（前回と同じ） */
    .products-category-nav ul li {
        width: 100%;
        list-style: none;
        border-bottom: 1px solid #000;
    }

    .products-category-nav a {
        display: block;
        padding: 1em;
        width: 100%;
        font-size: 1.6rem; /* SPで見やすいサイズ */
        text-align: center;
    }

    /* アクティブな項目の背景を黒にする（画像準拠） */
    .products-category-nav a.active {
        background: #000;
        color: #fff;
        text-decoration: none;
    }
}

/* ==============================
  Main: Left photo / Right text
============================== */
.products-main {
    display: flex;
    align-items: flex-start;
    padding-top: 5.3%;
    padding-bottom: 4.5%;
}

.products-main-img {
    width: 44.7%;
    position: relative;
    overflow: visible;
}

.products-main-img--masked {
    width: 100%;
    aspect-ratio: 43 / 31;
    position: relative;
}

.products-main-img--masked img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products-main-text {
    width: 27%;
    margin-left: 8.5%;
    padding-top: 5.1%;
}

.products-main-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-size: min(4rem, 2.08vw);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 4.6%;
}

.products-main-divider {
    width: 46%;
    overflow: hidden;
}

.products-main-divider img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.products-body-text {
    font-size: min(2rem, 1.04vw);
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.1em;
    text-align: justify;
}
@media print, screen and (max-width: 768px) {
    .products-main {
        flex-direction: column;
    }

    .products-main-img {
        width: 100%;
    }

    .products-main-img--masked {
        aspect-ratio: 187 / 135;
    }

    .products-main-text {
        width: 84.8vw;
        margin: 0 auto;
        padding-top: 14.4vw;
    }

    .products-main-heading {
        flex-direction: column;
        align-items: center;
        font-size: 6.6vw;
        letter-spacing: 0.15em;
        line-height: 1.2;
        margin-bottom: 8.6vw;
    }

    .products-main-divider {
        width: 51.2vw;
        margin-top: 3.1vw;
        overflow: hidden;
    }

    .products-body-text {
        font-size: 4.2vw;
    }
}

/* ==============================
  Detail: Left text / Right photo
============================== */
.products-detail {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 57.29%; /* 1100/1920 */
    margin: 0 auto;
}

.products-detail-text {
    width: 41.4%; /* 456/1100 */
    margin-right: 11.4%; /* 126/1100 */
    box-sizing: border-box;
    padding-top: clamp(10px, 2vw, 40px);
}

.products-detail-img {
    width: 47.3%; /* 518/1100 */
}

.products-detail-img--masked {
    width: 100%;
    aspect-ratio: 518 / 358;
    position: relative;
}

.products-detail-img--masked img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products-detail-img--placeholder {
    width: 100%;
    aspect-ratio: 518 / 358;
    background-color: #d9d9d9;
}
@media print, screen and (max-width: 768px) {
    .products-detail {
        flex-direction: column;
        width: 100%;
        margin: 14.6vw auto 0;
    }

    .products-detail-text {
        order: 2;
        width: 84.8vw; /* 318/375 */
        margin: 0 auto;
        padding-top: 16.4vw;
    }

    .products-detail-img {
        width: 100%
    }

    .products-detail-img--masked {
        aspect-ratio: 375 / 259;
    }

    .products-detail-img--masked img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .products-detail-img--placeholder {
        width: 100%;
        aspect-ratio: 518 / 358;
        background-color: #d9d9d9;
    }
}

/* ==============================
  Recommend
============================== */
.products-recommend {
    padding: 8.1% 0;
    width: 57.2%; /* 1100/1920 */
    text-align: center;
    margin: 0 auto;
}

.products-recommend-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 7.3%;
}

.products-recommend-line {
    width: 30.1%; /* 331/1100 */
}

.products-recommend-line img {
    width: 100%;
}

.products-recommend-line--right img {
    object-position: left center;
    transform: scaleX(-1);
}

.products-recommend-title {
    font-size: min(4rem, 2.08vw);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    white-space: nowrap;
}

.products-recommend-grid {
    display: flex;
    justify-content: center;
    gap: 4.5%;
    flex-wrap: wrap;
}

.products-recommend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 21.2%; /* 231/1100 */
}

.products-recommend-item-img {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
}

.products-recommend-item-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products-recommend-item-name {
    font-size: min(2rem, 1.04vw);
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-align: center;
    margin-top: 0.8em;
}
@media print, screen and (max-width: 768px) {
    .products-recommend {
        padding: 25vw 0;
        width: 89.3vw; /* 335/375 */
    }

    .products-recommend-heading {
        margin: 0 auto 9.6vw;
    }

    .products-recommend-line {
        width:14.6vw; /* 55/375 */
    }

    .products-recommend-title {
        font-size: 6.6vw;
    }

    .products-recommend-grid {
        width: 84.5vw;
        gap: 0;
        justify-content: flex-start;
        margin: 0 auto;
    }

    .products-recommend-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 39.2vw; /* 147/375 */
    }
    .products-recommend-item:nth-of-type(even) {
        margin-left: 6.1vw;
    }
    .products-recommend-item:nth-of-type(n + 3) {
        margin-top: 11.2vw;
    }

    .products-recommend-item-name {
        font-size: 4.2vw;
        letter-spacing: 0.15em;
        line-height: 1.5;
        text-align: center;
        margin-top: 0.8em;
    }
}

/* ==============================
  Online Shop Banner
============================== */
.products-shop-banner {
    position: relative;
    width: 59.32%; /* 1139/1920 */
    margin: 0 auto;
    aspect-ratio: 1139 / 261;
}

.products-shop-banner-bg {
    position: absolute;
    inset: 0;
}

.products-shop-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

.products-shop-banner-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(187, 187, 187, 0.7);
    mix-blend-mode: multiply;
}

.products-shop-banner-link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    text-decoration: none;
    font-size: min(3.2rem, 1.67vw);
}

.products-shop-banner-link span:first-child {
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #fff;
}

.products-shop-banner-link .more-arrow {
    width: 1.625em;
    height: 1.812em;
}

.products-shop-banner-link .more-arrow::before {
    width: 2.343em;
}
@media print, screen and (max-width: 768px) {
    .products-shop-banner {
        width: 100%;
        aspect-ratio: 15 / 8;
    }


    .products-shop-banner-link {
        gap: 1.36em;
        font-size: 4.8vw;
    }

    .products-shop-banner-link span:first-child {
        letter-spacing: 0.25em;
    }

    .products-shop-banner-link .more-arrow {
        width: 1.21em;
        height: 1.366em;
    }

    .products-shop-banner-link .more-arrow::before {
        width: 1.745em;
    }
}

/* ==============================
  Back to top
============================== */
.back-to-top {
    text-align: center;
    margin-top: 8.5%;
}

.back-to-top-link {
    display: inline-flex;
    align-items: center;
    gap: 2em;
    font-size: min(2.4rem, 1.25vw);
    font-weight: 500;
    letter-spacing: 0.2em;
}

.back-to-top .more-arrow::before {
    right: auto;
    left: 35%;
    transform: translateY(-50%) rotate(180deg);
    transition: left .3s;
}

.back-to-top-link:hover .more-arrow::before {
    left: 5%;
}
@media print, screen and (max-width: 768px) {
    .back-to-top {
        margin-top: 12.5vw;
    }

    .back-to-top-link {
        gap: 1.81em;
        font-size: 4.2vw;
        letter-spacing: 0.25em;
    }
}