@charset "UTF-8";
/* CSS Document */
#page-design{
CSS内容
}
    /* =========================================
       ベースリセット・共通設定
       ========================================= */
    #page-design * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    #page-design {
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        color: #333;
        line-height: 1.5;
        background-color: #f4f4f4; /* 背景色を追加 */
    }

    #page-design img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    /* ユーティリティクラス（PC/SP切り替え） */
    #page-design ._sp { display: none; }
    #page-design ._pc { display: block; }

    /* 共通カラー */
    #page-design .bg-pink { background-color: #d6336c; }
    #page-design .color-pink { color: #d6336c; }

    /* =========================================
       レイアウト設定（PCファースト）
       ========================================= */
    /* メインコンテナ（幅770px固定） */
    #page-design .container {
        width: 100%;
        max-width: 770px;
        margin: 0 auto;
        background-color: #fff;
        padding-bottom: 50px;
    }

    /* ヘッダーエリア */
    #page-design .header-logo-area {
        display: flex;
        align-items: center;
        padding: 15px 0px;
        border-bottom: 1px solid #ccc;
    }
    
    #page-design .header-logo {
        height: 30px;
        width: auto;
        margin-right: 15px;
    }
    #page-design .header-text {
        font-size: 14px;
        font-weight: bold;
    }

    /* ピンクリボンバー */
    #page-design .top-banner h3{
        color: #fff;
        text-align: center;
        padding: 8px 0;
        font-size: 18px;
        font-weight: bold;
    }

    /* 商品メインセクション */
    #page-design .product-hero {
        display: flex;
        padding: 20px 20px 0 20px;
        justify-content: space-between;
    }

    #page-design .hero-info {
        width: 60%;
    }

    #page-design .hero-figure {
        width: 38%;
        text-align: right;
        margin: 0;
    }

    /* 商品名 */
    #page-design .product-title {
        font-size: 36px;
        margin-bottom: 15px;
        line-height: 1.2;
    }

    /* バッジエリア */
    #page-design .badges {
        display: flex;
        gap: 0;
        margin-bottom: 10px;
        list-style: none; /* ulリセット */
    }
    #page-design .badge-item {
        flex: 1;
        text-align: center;
        padding: 5px;
        font-size: 18px;
        font-weight: bold;
        display: flex;       /* 文字垂直中央揃え用 */
        align-items: center; /* 文字垂直中央揃え用 */
        justify-content: center;
    }
    #page-design .badge-capacity {
        border: 2px solid #d6336c;
        color: #d6336c;
        background: #fff;
        margin-right: 10px;
    }
    #page-design .badge-shipping {
        background: #000;
        color: #fff;
    }

    /* 機能タグ（グレー） */
    #page-design .feature-tags {
        display: flex;
        gap: 5px;
        margin-bottom: 10px;
        list-style: none; /* ulリセット */
    }
    #page-design .feature-tag {
        flex: 1;
        background-color: #666;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        font-size: 14px;
        display: flex;       /* 文字垂直中央揃え用 */
        align-items: center; /* 文字垂直中央揃え用 */
        justify-content: center;
    }

    /* サイズバー */
    #page-design .size-bar {
        background-color: #666;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        font-size: 16px;
    }

    /* 中段のキャッチコピーバー */
    #page-design .mid-banner h3{
        background-color: #d6336c;
        color: #fff;
        text-align: center;
        padding: 10px 0;
        font-size: 20px;
        font-weight: bold;
        margin: 20px 0;
    }

    /* 特徴セクション */
    #page-design .features-section {
        padding: 0 20px;
    }

    #page-design .feature-header {
        text-align: center;
        margin-bottom: 20px;
        position: relative;
    }
    #page-design .feature-label {
        display: inline-block;
        background-color: #eee;
        color: #d6336c;
        padding: 2px 10px;
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        left: 0;
        top: -10px;
    }
    #page-design .feature-title {
        color: #d6336c;
        font-size: 22px;
        font-weight: bold;
        margin-top: 15px;
    }

    /* 3カラムグリッド */
    #page-design .grid-3 {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 30px;
    }
    #page-design .grid-figure {
        width: 32%;
        margin: 0;
    }
    #page-design .grid-figure img {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }
    #page-design .grid-caption {
        font-size: 13px;
        line-height: 1.4;
    }

    /* 下部セクション */
    #page-design .bottom-section {
        display: flex;
        gap: 20px;
        margin-top: 20px;
    }
    #page-design .bottom-left {
        width: 40%;
        margin: 0;
    }
    #page-design .bottom-left img {
        margin-bottom: 10px;
    }
    #page-design .bottom-left p {
        font-size: 13px;
        line-height: 1.4;
    }

    #page-design .bottom-right {
        width: 58%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #page-design .bottom-description {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
        line-height: 1.4;
    }
    #page-design .bottom-logo {
        margin-bottom: 10px;
        width: 200px;
        max-width: 100%;
    }
    #page-design .lineup-img {
        align-self: flex-end;
        width: 200px;
        max-width: 100%;
    }

    /* =========================================
       スマホ対応（メディアクエリ）
       ========================================= */
    @media screen and (max-width: 640px) {
        /* スマホ用表示切り替え */
        #page-design ._sp { display: inline; } /* 文中改行用にinline推奨、ブロック要素ならblock */
        div#page-design ._sp { display: block; } /* divなどのブロック要素用 */
        br#page-design ._sp { display: inline; } 
        #page-design ._pc { display: none; }

        /* 商品メインセクション */
        #page-design .product-hero {
            display: block; /* 縦並び */
        }
        #page-design .hero-info {
            width: 100%;
        }
        #page-design .hero-figure {
            width: 70%;
            margin: 5% auto; /* 中央寄せ */
            text-align: center;
        }

        /* タイトル中央寄せ */
        #page-design .product-title {
            text-align: center;
            font-size: 28px; /* スマホ用に少し小さく */
        }

        /* バッジやタグの調整 */
        #page-design .badge-item {
            font-size: 14px;
        }
        #page-design .feature-tags {
            flex-wrap: wrap;
        }
        
        /* 特徴タイトル */
        #page-design .feature-title {
            padding-top: 20px;
            font-size: 20px;
        }

        /* 3カラムグリッド → 1カラム */
        #page-design .grid-3 {
            display: block;
        }
        #page-design .grid-figure {
            width: 100%;
            margin-bottom: 20px;
        }

        /* 下部セクション → 縦並び */
        #page-design .bottom-section {
            display: block;
            padding: 0;
        }
        #page-design .bottom-left {
            width: 100%;
            margin-bottom: 20px;
        }
        #page-design .bottom-right {
            width: 100%;
        }
        #page-design .lineup-img {
            align-self: center; /* 中央寄せに変更 */
            margin-top: 10px;
        }
    }