@charset "UTF-8";

/* =========================================================
   Variables & Reset
   PC/SPで別々に調整可能な余白・フォントサイズ変数を定義
========================================================= */
:root {
    /* Colors */
    --bg-pink: #F8E2DA;
    --main-teal: #2F9496;
    --main-red: #D24A3B;
    --text-yellow: #F0D33E;
    --text-dark: #221815;
    --text-brown: #653a2a;
    
    /* Font Families */
    --font-rounded: "Shuei MaruGo B", "Shuei MaruGo L", "Hiragino Maru Gothic ProN", "Yu Rounded", sans-serif;

    /* --- PC用 余白変数 --- */
    --padding-lp-wrapper: 40px 20px 80px;
    --margin-sec-mv: 50px;
    
    --margin-sec-product: 50px;
    --gap-sec-product: 30px;
    --margin-product-brand: 15px;
    --margin-product-title: 15px;
    --margin-product-kikin: 20px;
    --margin-product-price-box: 25px;
    
    --margin-sec-desc: 50px;
    
    --margin-sec-bag: 60px;
    --gap-sec-bag: 30px;
    --margin-bag-text: 15px;
    
    --margin-sec-items: 70px;
    --padding-items-box: 50px 30px 40px;
    --margin-items-main-img: 30px;
    --gap-item-list: 30px;
    --gap-item-row: 20px;
    
    --margin-bottom-catch: 40px;

    /* --- PC用 フォントサイズ・要素サイズ変数 --- */
    --fs-base: 22px;
    --fs-product-brand: 18px;
    --fs-product-title: 30px;
    --fs-price-old: 20px;
    --fs-price-new: 48px;
    --fs-price-new-span: 18px;
    --fs-price-note: 14px;
    --fs-btn-buy: 26px;
    
    --fs-bag-text: 20px;
    
    --fs-items-title: 36px;
    --fs-item-h3: 26px;
    --fs-item-num: 16px;
    --size-item-num: 26px; /* PC用 ナンバーボックスのサイズ */
    --fs-item-p: 18px;
    
    --fs-bottom-catch: clamp(24px, 4vw, 36px);
}

/* =========================================================
   Responsive Variables (SP)
========================================================= */
@media (max-width: 600px) {
    :root {
        /* --- SP用 余白変数 --- */
        --padding-lp-wrapper: 30px 15px 50px;
        --margin-sec-mv: 15px;
        
        --margin-sec-product: 40px;
        --gap-sec-product: 20px;
        --margin-product-brand: 10px;
        --margin-product-title: 10px;
        --margin-product-kikin: 15px;
        --margin-product-price-box: 20px;
        
        --margin-sec-desc: 10px;
        
        --margin-sec-bag: 40px;
        --gap-sec-bag: 20px;
        --margin-bag-text: 10px;
        
        --margin-sec-items: 50px;
        --padding-items-box: 40px 15px 30px;
        --margin-items-main-img: 20px;
        --gap-item-list: 25px; /* 余白を少し広げて見やすく */
        --gap-item-row: 15px;
        
        --margin-bottom-catch: 30px;

        /* --- SP用 フォントサイズ・要素サイズ変数 --- */
        --fs-base: 16px;
        --fs-product-brand: 16px;
        --fs-product-title: 24px;
        --fs-price-old: 16px;
        --fs-price-new: 40px;
        --fs-price-new-span: 16px;
        --fs-price-note: 14px;
        --fs-btn-buy: 22px;
        
        --fs-bag-text: 18px;
        
        --fs-items-title: 22px;
        --fs-item-h3: 17px; /* 1行に収まりやすいサイズに調整 */
        --fs-item-num: 14px;
        --size-item-num: 20px; /* SP用 ナンバーボックスのサイズを調整 */
        --fs-item-p: 14px;
        
        --fs-bottom-catch: clamp(20px, 7vw, 26px);
    }
}


/* =========================================================
   Base Styles
========================================================= */

/* 指定テキストを細くする（Shuei MaruGo L適用）クラス */
.font-light {
    font-family: "Shuei MaruGo L", "Hiragino Maru Gothic ProN", "Yu Rounded", sans-serif;
    font-weight: normal;
}

/* =========================================================
   スマホ用改行クラス（PCでは非表示）
========================================================= */
.sp-only {
    display: none;
}

/* スマホ表示時（600px以下）は改行を有効にする */
@media (max-width: 600px) {
    .sp-only {
        display: block;
    }
}


body {
    margin: 0;
    padding: 0;
}

.lp-bousai-main {
    font-family: var(--font-rounded);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-pink);
    overflow-x: hidden;
}

/* 修正点：h1 にもフォント設定を適用するように追加 */
.lp-bousai-main h1,
.lp-bousai-main h2,
.lp-bousai-main h3 {
    font-family: var(--font-rounded);
}

.lp-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--bg-pink);
    padding: var(--padding-lp-wrapper);
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 共通テキストカラー */
.text-red { color: var(--main-red); }
.text-teal { color: var(--main-teal); }
.text-yellow { color: var(--text-yellow); }
.text-brown { color: var(--text-brown); }

/* =========================================================
   1. メインビジュアル
========================================================= */
.sec-mv {
    margin-bottom: var(--margin-sec-mv);
    text-align: center;
}

.sec-mv img {
    width: 100%;
    height: auto;
    display: block;
}

.mv-img-sp {
    display: none !important;
}

/* =========================================================
   2 & 6. 商品情報セクション
========================================================= */
.sec-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sec-product);
    margin-bottom: var(--margin-sec-product);
}
.product-info {
    width: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-image {
    width: 50%;
}
.product-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--fs-product-brand);
    font-weight: bold;
    margin-bottom: var(--margin-product-brand);
    white-space: nowrap;
}

.icon-new {
    height: 22px; 
    width: auto;
}

.product-title {
    font-size: var(--fs-product-title);
    line-height: 1.5;
    margin: 0 0 var(--margin-product-title) 0;
}

.product-kikin {
    margin-bottom: var(--margin-product-kikin);
    display: flex;
    justify-content: center;
}
.icon-kikin {
    height: 24px;
    width: auto;
}

.product-price-box {
    margin-bottom: var(--margin-product-price-box);
}
.price-old {
    font-size: var(--fs-price-old);
    margin: 0 0 5px 0;
}
.price-old .strike {
    position: relative;
    display: inline-block;
}
.price-old .strike::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -5%;
    width: 110%;
    height: 2px;
    background-color: var(--main-red);
}
.price-new {
    font-size: var(--fs-price-new);
    color: var(--main-red);
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1;
}
.price-new span {
    font-size: var(--fs-price-new-span);
}
.price-note {
    font-size: var(--fs-price-note);
    color: var(--main-red);
    line-height: 1.4;
    margin: 0;
}
.btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-teal);
    color: #fff;
    font-size: var(--fs-btn-buy);
    font-weight: bold;
    text-decoration: none;
    padding: 16px 40px;
    border-radius: 50px;
    position: relative;
    width: 90%;
    max-width: 320px;
    transition: opacity 0.3s;
    line-height: 1;
}
.btn-buy:hover { 
    opacity: 0.8;
    color: #fff !important; 
    text-decoration: none !important;
}
.btn-arrow {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
}
.btn-arrow svg { 
    display: block;
    width: 100%; 
    height: 100%; 
}

/* =========================================================
   3. 説明テキスト
========================================================= */
.sec-description {
    margin-bottom: var(--margin-sec-desc);
}
.sec-description p {
    font-size: var(--fs-base);
    line-height: 2;
    margin: 0;
}

/* =========================================================
   4. バッグ・後姿エリア
========================================================= */
.sec-bag-style {
    margin-bottom: var(--margin-sec-bag);
    text-align: center;
}
.sec-bag-style img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.bag-img-sp {
    display: none !important;
}

/* =========================================================
   5. 4つのアイテム入り
========================================================= */
.sec-items {
    margin-bottom: var(--margin-sec-items);
}
.items-box {
    border: 3px solid var(--main-teal);
    background-color: #fff;
    border-radius: 0;
    padding: var(--padding-items-box);
    position: relative;
}
.items-title {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--main-teal);
    color: #fff;
    margin: 0;
    padding: 10px 40px;
    border-radius: 50px;
    font-size: var(--fs-items-title);
    white-space: nowrap;
}

.items-main-img {
    margin-bottom: var(--margin-items-main-img);
    text-align: center;
}
.items-main-img img {
    max-width: 80%;
}

.item-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-item-list);
}
.item-row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-item-row);
}
.item-img {
    width: 35%;
}
.item-text {
    width: 65%;
}
.item-text h3 {
    font-size: var(--fs-item-h3);
    color: var(--main-teal);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.item-num {
    background-color: var(--main-teal);
    color: #fff;
    width: var(--size-item-num); /* 変数を利用してPC/SP別サイズを反映 */
    height: var(--size-item-num); /* 変数を利用してPC/SP別サイズを反映 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--fs-item-num);
    font-weight: bold;
    flex-shrink: 0;
}
.item-text p {
    font-size: var(--fs-item-p);
    margin: 0;
    line-height: 1.6;
}
.item-sub-img {
    margin-top: 15px;
    text-align: center;
}
.item-sub-img img {
    max-width: 90%;
    height: auto;
}

/* =========================================================
   6. 商品情報 (下部) キャッチコピー
========================================================= */
.sec-product-bottom .bottom-catch {
    text-align: center;
    font-size: var(--fs-bottom-catch);
    margin: 0 0 var(--margin-bottom-catch) 0;
    line-height: 1.6;
}

/* =========================================================
   Responsive Layout Overrides (SP)
========================================================= */
@media (max-width: 600px) {
    .mv-img-pc { display: none !important; }
    .mv-img-sp { display: block !important; }
    
    .bag-img-pc { display: none !important; }
    .bag-img-sp { display: block !important; }
    
    .sec-product { flex-direction: column-reverse; }
    .product-info, .product-image { width: 90%; }
    
    .items-title {
        padding: 10px 20px;
        width: 85%;
        text-align: center;
    }

    /* ==== スマホでも画像とテキストを横並びに維持する修正 ==== */
    .item-row { 
        flex-direction: row; /* 縦並び(column)を解除して横並びに */
        align-items: flex-start;
    }
    
    /* 左側の画像エリアと右側のテキストエリアの比率を調整 */
    .item-img { 
        width: 40%; 
    }
    .item-text { 
        width: 60%; 
    }
    
    .item-text h3 {
        gap: 6px; /* アイコンと文字の隙間を少し詰める */
        line-height: 1.3;
        align-items: flex-start; /* 文字が折り返した際にアイコンを上揃えにする */
    }

    /* はみ出さないように修正 */
    .item-sub-img {
        margin-left: 0; /* はみ出しの原因となるネガティブマージンを解除 */
    }
    .item-sub-img img {
        max-width: 100%; /* ボックス内に綺麗に収める */
    }
    /* ============================================ */

    .items-main-img img {
        max-width: 90%;
    }
}