/* ============================
   リライブウェアとは - Products Page
============================ */

/* ページ固有のpadding調整 */
#page-products.page-top-under {
  padding-bottom: 0;
}

/* 説明文エリア */
.products-description {
    display: flex;
    width: clamp(41.5rem, 19.118rem + 46.568vw, 75rem);
    margin: clamp(2.5rem, 2.18rem + 1.31vw, 3.75rem) auto 0 auto;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #050505;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.843rem + 0.13vw, 1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

/* 768px以下でのスタイル調整 */
@media (max-width: 768px) {
    .products-description {
        display: flex;
        width: clamp(19.375rem, 7.381rem + 49.206vw, 31rem);
        justify-content: center;
        flex-shrink: 0;
        color: #050505;
        text-align: left;
        font-family: "Noto Sans JP";
        font-size: clamp(0.875rem, 0.746rem + 0.529vw, 1rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
    }
}

/* SP専用改行（768px以下で表示） */
.sp-br {
    display: none;
}

@media (max-width: 768px) {
    .sp-br {
        display: block;
    }
}

/* 画像リンク */
.products-image-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: clamp(21.875rem, 1.961rem + 81.7vw, 100rem);
    margin: clamp(4.438rem, 3.816rem + 2.55vw, 6.875rem) auto 0;
}

/* リンクのホバー透過を無効化 */
.products-image-link:hover {
    opacity: 1;
}

/* 画像エリア */
.products-image {
    width: 100%;
    height: clamp(22.5rem, 18.963rem + 14.51vw, 36.375rem);
    margin: 0;
    position: relative;
    border-radius: clamp(1rem, 0.618rem + 1.569vw, 2.5rem);
    /* 390px: 16px、1920px: 40px */
    overflow: hidden;
    /* サブピクセルレンダリングのアーティファクト（黒い線）を防止 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 注: transform: translateZ(0) は子要素のアニメーションに干渉するため削除 */
    isolation: isolate;
    /* 隙間があっても背景色で隠す */
    background-color: #F5F5F5;
}

/* 391px～768px: SP画像の表示位置を上寄りに調整して顔が見えるようにする */
@media (min-width: 391px) and (max-width: 768px) {
    .products-image > img.sp {
        object-position: center 20%;
    }
}

/* 2つ目の画像リンク（リライブエンジン） */
.products-image-link + .products-image-link {
    margin-top: clamp(2.5rem, 2.181rem + 1.307vw, 4.375rem);
    /* 390px時: 40px、1920px時: 70px */
    margin-bottom: clamp(0rem, -0.048rem + 0.196vw, 0.1875rem);
    /* 390px時: 0px、1920px時: 3px */
}

/* 背景画像のみに適用（直下のimgタグとpicture内のimg） */
.products-image > img,
.products-image > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    /* インライン要素のベースライン隙間を防止 */
    vertical-align: bottom;
}
/* picture要素にも同様のスタイルを適用 */
.products-image > picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* PC画像にtransitionを適用（ホバー解除時のアニメーションも含む） */
.products-image > img.pc,
.products-image > picture.pc > img {
    transition: transform 0.5s ease !important;
}

/* ホバー時の画像ズーム（PC版のみ） */
@media (hover: hover) and (min-width: 769px) {
    .products-image-link:hover .products-image > img.pc,
    .products-image-link:hover .products-image > picture.pc > img {
        transform: scale(1.05);
        transition: transform 0.5s ease !important;
    }
}

/* ホバー時の透過を無効化（共通CSSのa imgの透過を上書き） */
.products-image-link .products-image > img:hover,
.products-image-link:hover .products-image > img,
.products-image-link .products-image > picture > img:hover,
.products-image-link:hover .products-image > picture > img {
    opacity: 1;
}

/* デスクトップ: PC画像を表示、SP画像を非表示 */
.products-image .sp {
    display: none;
}

/* タブレット・モバイル（768px以下）: SP画像を表示、PC画像を非表示 */
@media (max-width: 768px) {
    .products-image .pc {
        display: none;
    }
    .products-image .sp {
        display: block;
    }
}

/* オーバーレイコンテンツ */
.products-overlay {
    position: absolute;
    top: clamp(3.0625rem, 2.601rem + 1.895vw, 4.875rem);
    left: clamp(1.5625rem, -2.532rem + 16.797vw, 17.625rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ロゴ（1920px: 159×29px、390px: 100×19px） */
.products-logo {
    width: clamp(6.25rem, 5.31rem + 3.856vw, 9.9375rem);
    height: clamp(1.1875rem, 1.028rem + 0.654vw, 1.8125rem);
    object-fit: fill;
    display: block;
    margin-bottom: clamp(0.75rem, 0.433rem + 1.307vw, 2.5rem);
    margin-left: 0;
}

/* 日本語タイトル（1920px: 279px、390px: 25px） */
.products-title-ja {
    color: #000;
    font-family: "Noto Sans JP";
    font-size: clamp(1.25rem, 0.884rem + 1.503vw, 2.6875rem);
    font-weight: 500;
    line-height: clamp(2.25rem, 2.011rem + 0.98vw, 3.1875rem);
    letter-spacing: clamp(0.0625rem, 0.01rem + 0.216vw, 0.26875rem);
    margin: 0 0 clamp(0.5rem, 0.293rem + 0.85vw, 1.313rem) 0;
    margin-left: clamp(-0.1875rem, 0.048rem + -0.196vw, 0rem);
}

@media (max-width: 390px) {
    .products-title-ja {
        color: #1A1A1A;
        width: 290px;
        height: 35px;
    }
}

/* 英語タイトル（1920px: 287px、390px: 25px） */
.products-title-en {
    color: #858585;
    font-family: Raleway, sans-serif !important;
    font-size: clamp(0.875rem, 0.719rem + 0.654vw, 1.5rem);
    font-weight: 500;
    line-height: normal;
    letter-spacing: clamp(0.0875rem, 0.062rem + 0.105vw, 0.15rem);
    margin: 0 0 clamp(1.5rem, 1.245rem + 1.046vw, 2.0625rem) 0;
    margin-left: clamp(0rem, -0.08rem + 0.327vw, 0.3125rem);
}

@media (max-width: 390px) {
    .products-title-en {
        font-weight: 400;
    }

    .products-desc {
        width: 290px;
    }
}

/* 赤い線（1920px: 287px、390px: 29px） */
.products-line {
    width: clamp(4.9375rem, 4.575rem + 1.49vw, 6.25rem);
    height: clamp(0.25rem, 0.185rem + 0.261vw, 0.375rem);
    background-color: #C1272D;
    margin: 0 0 clamp(1rem, 0.745rem + 1.046vw, 2.0625rem) 0;
    margin-left: clamp(0.25rem, 0.234rem + 0.065vw, 0.3125rem);
}

/* 説明文（1920px: 282px、390px: 29px） */
.products-desc {
    color: #050505;
    font-family: "Noto Sans JP";
    font-size: clamp(0.875rem, 0.687rem + 0.784vw, 1.625rem);
    font-weight: 400;
    line-height: clamp(1.75rem, 1.505rem + 1.046vw, 2.625rem);
    letter-spacing: clamp(0.0875rem, 0.062rem + 0.105vw, 0.1625rem);
    margin: 0 0 clamp(1rem, 0.809rem + 0.784vw, 1.625rem) 0;
    margin-left: clamp(0rem, 0.314rem + -0.261vw, 0.25rem);
}

/* 詳しく見るリンク（製品ページ専用） */
/* 既存の.more-linkを使用、位置調整のみ */
.products-more-link {
    margin-left: 0;
    margin-top: 0;
    /* デフォルトのmargin-topをリセットして、説明文のmargin-bottomのみで間隔を制御 */
}

/* サイズ調整: 1920px時 68×68px、390px時 56×56px */
.products-more-link .circle-arrow {
    width: clamp(3.5rem, 3.276rem + 0.915vw, 4.25rem);
    height: clamp(3.5rem, 3.276rem + 0.915vw, 4.25rem);
}

/* テキストサイズ調整: 1920px時 20px、390px時 16px */
.products-more-link .more-text {
    font-size: clamp(1rem, 0.936rem + 0.261vw, 1.25rem);
    letter-spacing: clamp(0.1rem, 0.094rem + 0.026vw, 0.125rem);
    font-weight: 400;
}

/* 390px時のfont-weight調整 */
@media (max-width: 390px) {
    .products-more-link .more-text {
        font-weight: 500;
    }
}

/* リライブエンジンのボタン位置調整（769px以上） */
@media (min-width: 769px) {
    .products-image-2 .products-more-link {
        margin-top: clamp(0rem, -1.754rem + 3.649vw, 2.625rem);
        /* 769px時: 0px、1920px時: 42px */
    }
}