@charset "UTF-8";

/* ==========================================
   リセット & 基本設定 (モバイルファースト)
========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #0a0a0a;
    color: #f0f0f0;
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
}

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

/* ==========================================
   ヘッダーエリア
========================================== */
.top-announce {
    background: #ffffff;
    color: #000000;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    letter-spacing: 0.15em;
}

.site-header {
    position: sticky;
    top: 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #222;
    z-index: 1000;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo a {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.logo span {
    color: #888;
    margin: 0 4px;
    font-weight: 300;
}
/* ==========================================
   ヘッダーロゴ（WadoWado / SEOUL × TOKYO）
========================================== */
.logo a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    line-height: 1.1;
}

.logo .logo-main {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.08em;
}

.logo .logo-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: #888888;
    letter-spacing: 0.25em;
    margin-top: 3px;
}
.cart-btn {
    position: relative;
    font-size: 20px;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #ffffff;
    color: #000000;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   ヒーロー & コンセプト
========================================== */
/* ==========================================
   ヒーローセクション（韓国ビューティー女性背景）
========================================== */
.hero {
    padding: 100px 20px 80px;
    background-color: #0a0a0a; /* ベースとなるWadoWadoの黒色 */
    position: relative;        /* 背景画像を配置するための基準 */
    overflow: hidden;          /* はみ出した画像をカット */
    text-align: center;
    border-bottom: 1px solid #222;
    z-index: 1;                /* 文字を前面に出す */
}

/* 修正1：女性の背景画像自体をハッキリさせる */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero-model.jpg'); /* 用意した画像のパス */
    background-size: cover;                 /* 画面いっぱいに綺麗に広げる */
    background-position: center 20%;        /* 女性の顔や上半身が綺麗に入る位置 */
    background-repeat: no-repeat;
    
    /* ★ベースの黒と混ぜず、画像の透明度を上げてくっきり表示 (1.0で完全に元の画像の色になります) */
    opacity: 0.95; 
    
    z-index: -2;
}

/* 修正2：上から重ねる「黒グラデーション」のフィルターを薄くする */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ★上部はほぼ透明(0.1)にし、下部も適度な暗さ(0.5)にとどめることで画像が劇的に見えやすくなります */
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0.5) 100%);
    z-index: -1;
}

/* ★追加修正：背景が明るくなった分、上の文字を読みやすくするための影(ドロップシャドウ)をつける */
.hero h2, 
.hero p,
.hero .hero-catch,
.hero .price-badge-hero {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}


.hero-content {
    position: relative;
    z-index: 2; /* テキストやボタンを一番手前に配置 */
}

.hero .sub-title {
    font-size: 12px;
    color: #888;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 15px;
}

.hero h2 {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero p {
    color: #aaa;
    font-size: 13px;
    margin-bottom: 35px;
}

.cta-button {
    display: inline-block;
    background: #ffffff;
    color: #000000;
    padding: 16px 40px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.15em;
    border-radius: 2px;
    transition: opacity 0.3s;
}

.cta-button:active {
    opacity: 0.8;
}

/* ==========================================
   セクション共通 & コンセプトカード
========================================== */
.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title span {
    font-size: 11px;
    color: #666;
    letter-spacing: 0.2em;
    display: block;
}

.section-title h3 {
    font-size: 20px;
    margin-top: 5px;
}

.concept-section, .products-section {
    padding: 60px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.concept-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.concept-card {
    background: #121212;
    border: 1px solid #222;
    padding: 30px 20px;
    border-radius: 4px;
}

.concept-card h4 {
    font-size: 14px;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
    border-left: 2px solid #fff;
    padding-left: 10px;
}

.concept-card p {
    color: #999;
    font-size: 13px;
}

/* ==========================================
   商品カード (スマホで押しやすい大きなボタン)
========================================== */
.product-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.product-card {
    background: #121212;
    border: 1px solid #222;
    overflow: hidden;
    border-radius: 4px;
}

.product-image {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 の比率 */
    background: #1a1a1a;
}

.product-image .tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0,0,0,0.8);
    border: 1px solid #444;
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    z-index: 2;
}

.img-placeholder {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.product-info {
    padding: 25px 20px;
}

.product-info h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.product-info .desc {
    color: #888;
    font-size: 13px;
    margin-bottom: 20px;
}

.product-info .price {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.product-info .price span {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

.buy-button {
    display: block;
    width: 100%;
    text-align: center;
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 2px;
    transition: all 0.2s;
}

.buy-button:active {
    background: #fff;
    color: #000;
}

/* ==========================================
   GMP信頼セクション & フッター
========================================== */
.gmp-trust-section {
    background: #111;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 50px 20px;
    text-align: center;
}

.trust-box {
    max-width: 600px;
    margin: 0 auto;
}

.trust-icon {
    font-size: 36px;
    margin-bottom: 15px;
}

.trust-box h3 {
    font-size: 18px;
    letter-spacing: 0.15em;
    margin-bottom: 15px;
    color: #fff;
}

.trust-box p {
    color: #999;
    font-size: 13px;
    line-height: 2;
}

.trust-box strong {
    color: #fff;
    border-bottom: 1px solid #fff;
}

.site-footer {
    padding: 60px 20px 40px;
    text-align: center;
}

.footer-brand .logo-small {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.footer-brand .brand-concept {
    color: #666;
    font-size: 12px;
    margin-bottom: 30px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 25px;
    margin-bottom: 40px;
}

.footer-links a {
    color: #aaa;
    font-size: 12px;
}

.copyright {
    color: #444;
    font-size: 11px;
}

/* ==========================================
   タブレット・PC向けレスポンシブ補正
========================================== */
@media (min-width: 768px) {
    .hero h2 { font-size: 36px; }
    .concept-grid, .product-grid {
        flex-direction: row;
    }
    .concept-card, .product-card {
        flex: 1;
    }
    .buy-button:hover {
        background: #fff;
        color: #000;
    }
}
/* ==========================================
   一律価格・商品詳細ページ追加スタイル
========================================== */

/* ヒーロー価格バッジ */
.price-badge-hero {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ffffff;
    padding: 10px 20px;
    margin-bottom: 25px;
    border-radius: 4px;
}
.price-badge-hero span {
    display: block;
    font-size: 10px;
    color: #aaa;
    letter-spacing: 0.15em;
}
.price-badge-hero strong {
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.05em;
}
.price-badge-hero strong span {
    display: inline;
    font-size: 12px;
}

/* 一覧ページ：価格と送料無料の横並び */
.price-wrap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 15px;
}
.free-shipping {
    background: #ffffff;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
}
.card-link-wrap {
    display: block;
}

/* ==========================================
   個別商品詳細ページ (item_detail.php)
========================================== */
.detail-page-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.breadcrumb {
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
}
.breadcrumb a {
    color: #aaa;
}
.detail-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}
.detail-image-box {
    position: relative;
    width: 100%;
    padding-top: 80%;
    background: #1a1a1a;
    border: 1px solid #222;
}
.detail-img {
    font-size: 20px;
}
.detail-sub-brand {
    font-size: 11px;
    color: #888;
    letter-spacing: 0.15em;
}
.detail-title {
    font-size: 22px;
    margin: 10px 0 15px;
    line-height: 1.4;
}
.detail-catch {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 25px;
}
.detail-price-box {
    background: #141414;
    border: 1px solid #222;
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-price {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}
.main-price span {
    font-size: 14px;
    font-weight: 400;
    color: #888;
}
.shipping-badge {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid #fff;
}
.add-to-cart-form {
    margin-bottom: 20px;
}
.quantity-select {
    margin-bottom: 15px;
    font-size: 14px;
}
.quantity-select select {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #444;
    padding: 8px 15px;
    margin-left: 10px;
    font-size: 14px;
    border-radius: 2px;
}
.cart-submit-btn {
    width: 100%;
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: opacity 0.2s;
    border-radius: 2px;
}
.cart-submit-btn:active {
    opacity: 0.8;
}
.secure-notice {
    text-align: center;
    font-size: 12px;
    color: #888;
}
.detail-content-section {
    background: #111;
    border: 1px solid #222;
    padding: 30px 20px;
    margin-bottom: 40px;
}
.detail-content-section h3 {
    font-size: 16px;
    border-left: 3px solid #fff;
    padding-left: 10px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}
.detail-content-section h3 span {
    font-size: 12px;
    color: #666;
    margin-left: 10px;
}
.long-desc {
    color: #ccc;
    font-size: 14px;
    line-height: 2;
    margin-bottom: 30px;
}
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.spec-table th, .spec-table td {
    padding: 15px 10px;
    border-top: 1px solid #222;
    text-align: left;
}
.spec-table th {
    width: 35%;
    color: #888;
    font-weight: 400;
}
.spec-table td {
    color: #ddd;
}
.back-link {
    text-align: center;
    margin-bottom: 40px;
}
.back-link a {
    color: #aaa;
    font-size: 14px;
    border-bottom: 1px solid #aaa;
    padding-bottom: 3px;
}

/* タブレット・PC環境用レスポンシブ */
@media (min-width: 768px) {
    .detail-grid {
        flex-direction: row;
    }
    .detail-image-box, .detail-info-box {
        flex: 1;
    }
}
/* 例：アイコンだけ色を変えたり大きくしたりしたい場合 */
.cart-icon i {
    font-size: 22px;
    color: #ffffff;
}
/* style.css の .trust-icon のスタイル変更例 */
.trust-icon {
    font-size: 42px;         /* スマホで見やすいように少し大きめに */
    color: #ffffff;          /* クリーンな純白 */
    margin-bottom: 15px;
    opacity: 0.9;            /* ほんの少しだけ透け感を出して上品に */
}

/* 盾アイコンの半分だけに少し色味の変化がつく fa-shield-halved の特徴を活かす */
.trust-icon i {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2); /* わずかに光るようなエフェクト */
}
/* ==========================================
   10周年記念＆実店舗トラストエリア追加スタイル
========================================== */

/* ヒーロー上部の10周年記念バッジ */
.anniversary-badge-top {
    display: inline-block;
    background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%);
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.anniversary-badge-top i {
    margin-right: 5px;
    font-size: 13px;
}

/* 10周年ストーリーセクション */
.trust-story-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, #0a0a0a 0%, #141310 50%, #0a0a0a 100%);
    border-top: 1px solid #2a2515;
    border-bottom: 1px solid #2a2515;
}
.story-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.story-header {
    margin-bottom: 40px;
}
.gold-sub {
    color: #e5c158;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.25em;
    display: block;
    margin-bottom: 10px;
}
.story-header h3 {
    font-size: 22px;
    line-height: 1.5;
    color: #ffffff;
}

/* ストーリーボックス（実店舗×低価格の理由） */
.story-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}
.story-box {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #332d1d;
    padding: 30px 20px;
    border-radius: 6px;
    text-align: left;
}
.story-icon {
    font-size: 28px;
    color: #e5c158;
    margin-bottom: 15px;
}
.story-box h4 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 12px;
    border-bottom: 1px solid #332d1d;
    padding-bottom: 8px;
}
.story-box p {
    color: #aaa;
    font-size: 13px;
    line-height: 1.9;
}

/* 記念リボンバナー */
.anniversary-ribbon {
    display: inline-block;
    background: #181611;
    border: 1px solid #d4af37;
    color: #e5c158;
    font-size: 12px;
    padding: 12px 25px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.anniversary-ribbon strong {
    color: #ffffff;
    font-weight: 700;
    border-bottom: 1px solid #d4af37;
}
.anniversary-ribbon i {
    font-size: 16px;
    margin-right: 6px;
}

/* PC・タブレット環境用レスポンシブ */
@media (min-width: 768px) {
    .story-grid {
        flex-direction: row;
    }
    .story-box {
        flex: 1;
    }
}
/* ==========================================
   実際の画像表示用スタイル（歪み防止）
========================================== */
.product-image, .detail-image-box {
    position: relative;
    overflow: hidden; /* 枠からはみ出た部分を綺麗にカット */
    background-color: #1a1a1a;
}

.product-img-real {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ★魔法のプロパティ：画像の縦横比を保ったまま、枠いっぱいに綺麗にトリミングして敷き詰める */
    object-fit: cover; 
    
    /* ホバー時（タッチ時）に少しズームさせる演出用 */
    transition: transform 0.4s ease;
}

/* スマホでのスクロール中やPCでマウスを重ねた時に、少しだけ画像をズームして高級感を出す */
.product-card:hover .product-img-real,
.detail-image-box:hover .product-img-real {
    transform: scale(1.05);
}
/* ==========================================
   商品詳細：LP風入れ子レイアウト (モバイルファースト)
========================================== */
.desc-blocks-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px; /* ブロックどうしの余白 */
    margin: 40px 0 60px;
    padding-top: 30px;
    border-top: 1px dashed #333;
}

/* 各ブロックの基本デザイン */
.desc-block {
    display: flex;
    flex-direction: column; /* スマホではまず縦並び */
    gap: 20px;
    background: #151515;
    border: 1px solid #252525;
    border-radius: 6px;
    overflow: hidden;
    padding: 20px;
}

/* 画像ラッパー */
.block-img-wrap {
    width: 100%;
    position: relative;
    padding-top: 60%; /* 16:9 ~ 4:3 の間の美しい比率 */
    background: #1f1f1f;
    border-radius: 4px;
    overflow: hidden;
}

.block-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を歪ませず綺麗に敷き詰める */
}

/* テキストラッパー */
.block-text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 5px;
}

.block-text-wrap h4 {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.5;
    border-left: 3px solid #e5c158; /* ゴールドのアクセントライン */
    padding-left: 10px;
}

.block-text-wrap p {
    font-size: 13px;
    color: #aaaaaa;
    line-height: 1.9;
}

/* サンドイッチ型専用の調整 */
.layout-sandwich {
    gap: 25px;
}
.sandwich-text {
    text-align: center;
    padding: 15px 10px;
}
.sandwich-text h4 {
    border-left: none;
    border-bottom: 1px solid #333;
    padding-left: 0;
    padding-bottom: 10px;
    display: inline-block;
}

/* ==========================================
   タブレット・PC環境用のジグザグ（交互）レイアウト
========================================== */
@media (min-width: 768px) {
    .desc-block {
        padding: 30px;
        gap: 40px;
    }
    
    /* パターン：画像 → 説明文 (横並び) */
    .layout-img-text {
        flex-direction: row;
        align-items: center;
    }
    .layout-img-text .block-img-wrap {
        flex: 1;
        padding-top: 40%; /* PCでの高さ調整 */
    }
    .layout-img-text .block-text-wrap {
        flex: 1;
        padding: 20px;
    }

    /* パターン：説明文 → 画像 (横並び：左に文字、右に画像) */
    .layout-text-img {
        flex-direction: row; /* 横並びに */
        align-items: center;
    }
    .layout-text-img .block-text-wrap {
        flex: 1;
        padding: 20px;
    }
    .layout-text-img .block-img-wrap {
        flex: 1;
        padding-top: 40%;
    }

    /* パターン：画像 → 説明文 → 画像 (サンドイッチ・3カラムまたは縦長強調) */
    .layout-sandwich {
        flex-direction: column; /* サンドイッチは迫力を出すため縦並びを維持 */
        max-width: 800px;
        margin: 0 auto;
        width: 100%;
    }
    .layout-sandwich .block-img-wrap {
        padding-top: 50%;
    }
}
/* ==========================================
   カート・決済・注文完了画面専用スタイル
========================================== */
.cart-page-wrapper {
    max-width: 1000px;
    margin: 40px auto 80px;
    padding: 0 20px;
}
.page-main-title {
    font-size: 24px;
    color: #fff;
    border-bottom: 2px solid #222;
    padding-bottom: 15px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}
.page-main-title span {
    font-size: 13px;
    color: #888;
    margin-left: 10px;
}

/* 空カート・アラート */
.empty-cart-box {
    text-align: center;
    padding: 60px 20px;
    background: #111;
    border: 1px solid #222;
    border-radius: 6px;
}
.empty-icon {
    font-size: 50px;
    color: #444;
    margin-bottom: 20px;
}
.cod-alert {
    padding: 15px 20px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 25px;
    line-height: 1.6;
}
.cod-warning {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid #d4af37;
    color: #e5c158;
}
.cod-success {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

/* カートグリッドレイアウト */
.cart-layout-grid, .checkout-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* カートテーブル */
.cart-items-list {
    flex: 1;
    overflow-x: auto;
}
.cart-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}
.cart-table th {
    background: #181818;
    color: #888;
    font-size: 12px;
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #333;
}
.cart-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #222;
    vertical-align: middle;
}
.td-img { width: 70px; }
.td-img img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.td-name a { color: #fff; font-weight: bold; font-size: 14px; display: block; margin-bottom: 5px; }
.free-shipping-tag { font-size: 10px; background: #fff; color: #000; padding: 2px 6px; border-radius: 2px; }
.td-price, .td-subtotal { font-size: 15px; color: #eee; font-weight: bold; }
.qty-form select { background: #111; color: #fff; border: 1px solid #444; padding: 6px 10px; border-radius: 4px; }
.delete-btn { color: #666; font-size: 18px; }
.delete-btn:hover { color: #ff4444; }

.cart-list-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 13px;
}
.continue-shop-link { color: #aaa; }
.clear-cart-link { color: #ff6666; }

/* パネル（右側・合計） */
.cart-summary-box, .order-summary-side {
    background: #121212;
    border: 1px solid #252525;
    padding: 25px;
    border-radius: 6px;
}
.summary-title, .side-title { font-size: 16px; color: #fff; margin-bottom: 20px; border-left: 3px solid #e5c158; padding-left: 10px; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 14px; color: #ccc; }
.summary-hr { border: none; border-top: 1px solid #2a2a2a; margin: 15px 0; }
.summary-total { font-size: 16px; color: #fff; align-items: baseline; }
.total-amount { font-size: 24px; color: #e5c158; font-weight: bold; }
.text-free { color: #2ecc71; }

.checkout-btn, .order-submit-btn {
    display: block;
    width: 100%;
    background: #ffffff;
    color: #000000;
    text-align: center;
    padding: 16px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    margin-top: 25px;
    letter-spacing: 0.1em;
    transition: opacity 0.2s;
}
.checkout-btn:hover, .order-submit-btn:hover { opacity: 0.85; }

.accepted-payments { margin-top: 25px; text-align: center; font-size: 11px; color: #666; }
.pay-icons { display: flex; justify-content: center; gap: 15px; margin-top: 8px; font-size: 12px; color: #aaa; }

/* チェックアウトフォーム */
.form-section { flex: 1; }
.form-title { font-size: 16px; color: #fff; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; color: #ccc; margin-bottom: 8px; }
.req { background: #ff4444; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 2px; margin-left: 5px; }
.form-group input {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 12px 15px;
    font-size: 14px;
    border-radius: 4px;
}
.form-group input:focus { border-color: #e5c158; outline: none; }

/* 支払い方法ラジオボタン */
.payment-methods-list { display: flex; flex-direction: column; gap: 15px; }
.payment-label {
    display: flex;
    align-items: flex-start;
    background: #151515;
    border: 1px solid #333;
    padding: 18px 15px;
    border-radius: 4px;
    cursor: pointer;
}
.payment-label input[type="radio"] { margin-top: 3px; margin-right: 15px; accent-color: #e5c158; }
.pay-info strong { display: block; font-size: 14px; color: #fff; margin-bottom: 5px; }
.pay-info p { font-size: 12px; color: #888; line-height: 1.5; margin: 0; }
.disabled-label { opacity: 0.5; background: #0c0c0c; border-color: #1a1a1a; cursor: not-allowed; }
.alert-text { color: #d4af37 !important; margin-top: 5px !important; }

.side-cart-list { list-style: none; font-size: 13px; color: #bbb; margin-bottom: 20px; }
.side-cart-list li { display: flex; justify-content: space-between; margin-bottom: 10px; }
.secure-note { text-align: center; font-size: 11px; color: #666; margin-top: 15px; }

/* 完了画面 */
.order-complete-box { background: #121212; border: 1px solid #222; padding: 50px 20px; border-radius: 8px; }
.complete-icon { font-size: 60px; color: #2ecc71; margin-bottom: 20px; }
.order-complete-box h2 { font-size: 24px; color: #fff; margin-bottom: 15px; }
.complete-sub { color: #aaa; font-size: 14px; line-height: 1.8; margin-bottom: 30px; }
.order-number-box { background: #1a1a1a; border: 1px dashed #444; padding: 15px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #e5c158; margin-bottom: 30px; }
.action-box { background: #161616; border: 1px solid #333; padding: 25px; border-radius: 6px; text-align: left; }
.action-box h3 { font-size: 16px; color: #fff; margin-bottom: 10px; border-bottom: 1px solid #2a2a2a; padding-bottom: 10px; }
.action-box p { font-size: 13px; color: #ccc; line-height: 1.8; }
.pay-action-btn { display: inline-block; padding: 12px 30px; font-weight: bold; font-size: 14px; border-radius: 4px; margin-top: 15px; }
.paypal-btn { background: #003087; color: #fff; }
.paypay-btn { background: #ff0033; color: #fff; }
.bank-info-panel { background: #0c0c0c; padding: 15px; margin-top: 15px; border-left: 3px solid #e5c158; font-size: 13px; color: #fff; }

@media (min-width: 768px) {
    .cart-layout-grid { flex-direction: row; align-items: flex-start; }
    .cart-summary-box { width: 320px; flex-shrink: 0; position: sticky; top: 100px; }
    .checkout-grid { flex-direction: row; align-items: flex-start; }
    .order-summary-side { width: 350px; flex-shrink: 0; position: sticky; top: 100px; }
}
/* ==========================================
   住所自動入力ボタン (zip-search-btn)
========================================== */
.zip-search-btn {
    background: #1f1f1f;
    color: #e5c158;
    border: 1px solid #444;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.zip-search-btn:hover {
    background: #e5c158;
    color: #000000;
    border-color: #e5c158;
}
/* ==========================================
   PayPay 支払いガイドUI専用スタイル
========================================== */
.pp-guide-container {
    text-align: center;
}
.pp-container {
    background: #ffffff; /* ここだけアプリ風に白背景 */
    color: #333333;
    border-radius: 12px;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    text-align: left;
}

.pp-header {
    background: #ff0033; /* PayPayレッド */
    color: #ffffff;
    text-align: center;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
}
.pp-logo-text {
    font-family: Arial, sans-serif;
    font-style: italic;
    font-size: 18px;
    margin-right: 5px;
}

.pp-body {
    padding: 25px 20px;
    text-align: center;
}

.pp-amount-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}
.pp-amount {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.pp-qr-box {
    background: #f8f8f8;
    border: 1px dashed #ccc;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.pp-save-hint {
    font-size: 12px;
    color: #ff0033;
    font-weight: bold;
    margin-bottom: 10px;
}
.pp-qr-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin: 0 auto;
}

.pp-btn-launch {
    display: block;
    background: #ff0033;
    color: #ffffff !important;
    text-decoration: none;
    padding: 16px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    margin-bottom: 30px;
    transition: opacity 0.2s;
}
.pp-btn-launch:active {
    opacity: 0.8;
}

/* 手順ステップ表示 */
.pp-steps-box {
    text-align: left;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}
.pp-steps-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #000;
    text-align: center;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}
.pp-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.6;
}
.pp-step:last-child {
    margin-bottom: 0;
}
.step-num {
    background: #000;
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}
.step-desc {
    color: #333;
}
.step-desc strong {
    color: #ff0033;
}
.step-small {
    font-size: 11px;
    color: #888;
}

/* UIモック（ボタンの再現） */
.pp-icon-mock {
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 5px;
    color: #555;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.pp-icon-mock i {
    color: #000;
}

.pp-footer-note {
    background: #f0f0f0;
    color: #666;
    font-size: 11px;
    padding: 12px;
    text-align: center;
}
/* ==========================================
   PayPal 決済ボタンコンテナ専用スタイル (視認性向上)
========================================== */
#paypal-button-container {
    background-color: #ffffff; /* クリーンな純白背景で規約文やロゴをくっきり見せる */
    color: #333333;            /* コンテナ内の基本文字色は読みやすいダークグレー */
    padding: 25px 20px 15px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    border: 2px solid #e5c158; /* WadoWadoのシャンパンゴールド枠で高級感を演出 */
    text-align: center;
}

/* PayPalエリア上の専用案内ラベル */
.paypal-secure-header {
    font-size: 13px;
    font-weight: 700;
    color: #003087; /* PayPal公式のブルーカラー */
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.paypal-secure-header i {
    font-size: 16px;
}
/* ==========================================
   よりどり・まとめ買い割引バナー専用スタイル
========================================== */
.bulk-discount-banner {
    background: #151515;
    border: 1px solid #332d1d;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
}
.bulk-title {
    font-size: 15px;
    font-weight: bold;
    color: #e5c158;
    margin-bottom: 15px;
}
.bulk-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-bottom: 15px;
}
.bulk-steps span {
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 8px 4px;
    font-size: 11px;
    color: #888;
    border-radius: 4px;
    line-height: 1.4;
}
.bulk-steps span strong {
    color: #aaa;
    font-size: 12px;
}
/* カートに入っている箱数に応じたアクティブ（達成）ステップの装飾 */
.bulk-steps span.active-step {
    background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%);
    color: #000000 !important;
    font-weight: bold;
    border-color: #ffffff;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    transform: scale(1.05);
}
.bulk-steps span.active-step strong {
    color: #000000;
    font-size: 13px;
}
.bulk-next-alert {
    background: rgba(212, 175, 55, 0.15);
    border: 1px dashed #e5c158;
    color: #ffffff;
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 4px;
    display: inline-block;
}
.bulk-next-alert strong {
    color: #e5c158;
    font-size: 15px;
}

@media (max-width: 600px) {
    .bulk-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}
/* ==========================================
   商品詳細：カスタマーレビュー
========================================== */
.review-section {
    background: #111111;
    border: 1px solid #222222;
    padding: 30px 20px;
    margin-bottom: 40px;
}
.review-section h3 {
    font-size: 16px;
    border-left: 3px solid #e5c158;
    padding-left: 10px;
    margin-bottom: 25px;
    letter-spacing: 0.1em;
    color: #ffffff;
}
.review-section h3 span {
    font-size: 12px;
    color: #666666;
    margin-left: 10px;
}

/* 評価サマリー（平均点） */
.review-summary {
    text-align: center;
    background: #1a1a1a;
    padding: 25px 20px;
    border-radius: 6px;
    margin-bottom: 30px;
}
.avg-score {
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1;
}
.avg-score span {
    font-size: 16px;
    color: #888888;
    font-weight: 400;
}
.avg-stars {
    color: #e5c158; /* ゴールド */
    font-size: 20px;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.review-count {
    font-size: 12px;
    color: #aaaaaa;
}

/* 個別レビューリスト */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.review-item {
    border-bottom: 1px dashed #333333;
    padding-bottom: 20px;
}
.review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.review-stars {
    color: #e5c158;
    font-size: 14px;
    letter-spacing: 1px;
}
.review-user {
    font-size: 11px;
    color: #aaaaaa;
    background: #222222;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}
.review-comment {
    font-size: 13px;
    color: #cccccc;
    line-height: 1.8;
}
.no-review {
    color: #888888;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}
/* 口コミの日付表示用スタイル */
.review-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.review-date {
    font-size: 11px;
    color: #666666;
    letter-spacing: 0.05em;
}
/* ==========================================
   ページネーション (口コミのページ切り替え)
========================================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px dashed #333333;
}

.pagination .page-link,
.pagination .current-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

/* クリックできるページリンク */
.pagination .page-link {
    background: #1a1a1a;
    color: #aaaaaa;
    border: 1px solid #333333;
}

.pagination .page-link:hover {
    background: #333333;
    color: #ffffff;
    border-color: #555555;
}

/* 現在表示しているページ番号（ゴールドで強調） */
.pagination .current-page {
    background: #e5c158;
    color: #000000;
    border: 1px solid #e5c158;
    font-weight: 700;
}

/* ==========================================
   ビフォーアフター実証効果 セクション（完全修復版）
========================================== */
.ba-section { 
    margin-top: 50px; 
    margin-bottom: 50px; 
    border-top: 1px dashed #332d1d; 
    padding-top: 40px; 
}
.ba-section h3 { 
    font-size: 20px; 
    color: #fff; 
    margin-bottom: 30px; 
    border-left: 3px solid #e5c158; 
    padding-left: 15px; 
    font-family: 'Montserrat', sans-serif; 
}
.ba-section h3 span { 
    display: block; 
    font-size: 12px; 
    color: #e5c158; 
    font-family: 'Noto Sans JP', sans-serif; 
    margin-top: 5px; 
    font-weight: normal; 
    letter-spacing: 0.1em; 
}

.ba-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
}
.ba-card { 
    background: #111; 
    border: 1px solid #332d1d; 
    border-radius: 8px; 
    padding: 20px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); 
    box-sizing: border-box;
    overflow: hidden; 
}

/* ★画像を横並びにし、はみ出しを防ぐ要の部分 */
.ba-images { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    margin-bottom: 20px; 
    width: 100%;
}

.ba-img-box { 
    position: relative; 
    flex: 1; 
    min-width: 0; /* フレックスアイテムのはみ出し・縦並び崩れを防ぐ必須プロパティ */
    text-align: center; 
    background: #181818;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 画像サイズを枠内に綺麗に収める */
.ba-img-box img { 
    width: 100%; 
    height: auto; 
    max-height: 280px; 
    display: block;
    object-fit: contain; 
}

.ba-label { 
    position: absolute; 
    top: 8px; 
    left: 8px; 
    padding: 3px 8px; 
    font-size: 10px; 
    font-weight: bold; 
    border-radius: 3px; 
    font-family: 'Montserrat', sans-serif; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); 
    z-index: 5;
}
.before-label { background: #333; color: #fff; }
.after-label { background: #e5c158; color: #000; }

.ba-arrow { 
    color: #e5c158; 
    font-size: 20px; 
    flex-shrink: 0; 
}

.ba-info { 
    background: #0a0a0a; 
    padding: 15px; 
    border-radius: 6px; 
    border: 1px solid #222; 
}
.ba-meta { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 12px; 
    border-bottom: 1px dashed #332d1d; 
    padding-bottom: 12px; 
}
.meta-item { 
    font-size: 12px; 
    color: #ccc; 
    background: #151515; 
    padding: 4px 12px; 
    border-radius: 50px; 
    border: 1px solid #332d1d; 
}
.meta-item i { color: #e5c158; margin-right: 5px; }

.ba-comment { 
    font-size: 13px; 
    color: #ddd; 
    line-height: 1.7; 
    margin: 0; 
    font-style: italic; 
}

/* タブレット・PC向け表示設定 */
@media(min-width: 768px) {
    .ba-card { padding: 25px; }
    .ba-images { gap: 15px; }
    .ba-img-box img { max-height: 350px; }
    .ba-arrow { font-size: 28px; }
    .ba-label { top: 10px; left: 10px; font-size: 11px; padding: 4px 12px; }
    .ba-info { padding: 20px; }
    .ba-comment { font-size: 14px; }
}
/* ==========================================
   商品説明ブロック（LP風レイアウト）の画像見切れ完全修正
========================================== */

/* 枠の固定比率（padding-top）を解除し、画像の高さに自動で合わせる */
.block-img-wrap {
    padding-top: 0 !important;
    height: auto !important;
    background: transparent !important;
}

/* 画像を絶対配置から相対配置に戻し、切り抜き（cover）を無効化 */
.block-img-wrap img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}
/* ==========================================
   いいねボタン専用スタイル & アニメーション
========================================== */
.insta-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    font-size: 22px;
    color: #fff;
}
.like-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    outline: none;
    transition: transform 0.2s;
}
.like-count {
    font-size: 14px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}
.like-btn:active {
    transform: scale(1.1); /* タップした瞬間に少し縮む */
}
.like-btn.liked i {
    color: #ff3040; /* タップ後に赤色へ */
    animation: heartBeat 0.4s ease-in-out; /* ドクンと弾むアニメーション */
}

/* ハートが弾むキーフレーム */
@keyframes heartBeat {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}