@charset "UTF-8";

/* =========================================

   TOPページ

   ========================================= */
/* =========================================
   ヒーロースライダー
   ========================================= */
.hero-slider-container {
    position: relative;
    height: 70vh; /* 画面の高さ */
    width: 100%;
    overflow: hidden; /* はみ出し防止 */
    background-color: var(--color-main);
}
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover !important; 
    background-repeat: no-repeat !important;
    height: 100% !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    
    /* フェードアニメーションの設定 */
    opacity: 0; /* 最初は透明 */
    transition: opacity 1.5s ease-in-out; /* 1.5秒かけてじわっと変化 */
    z-index: 1;
}
/* activeクラスがついているスライドだけ表示 */
.hero-slide.active {
    opacity: 1;
    z-index: 2;
}
/* スライド全体をクリック可能にするための透明リンク */
.slide-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 文字よりは下 */
}
/* 小さめの購入ボタン */
.btn-small {
    display: inline-block;
    padding: 8px 20px;
    font-size: 0.9rem;
    min-width: auto; /* 幅をなりゆきにする */
    margin-top: 10px;
}
.hero-text {
    text-align: center;
    background: rgba(0,0,0,0.4);
    padding: 40px;
}
.vertical-text {
    display: inline-block;
    writing-mode: vertical-rl;
    font-size: 1.5rem;
    margin: 0 auto 20px;
    letter-spacing: 0.3em;
    height: 150px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .hero-slider-container { height: 70svh; }

}
@media screen and (max-width: 900px) and (orientation: landscape) {
    .hero-slider-container { height: 100svh; }
    .vertical-text {
        writing-mode: horizontal-tb;
        height: auto;
        margin-bottom: 10px;
    }
}

/* =========================================
   こだわりセクション等
   ========================================= */
/* インラインスタイルをクラス化 */
.philosophy-text-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    line-height: 2;
}
.philosophy-heading {
    font-size: 1.4rem;
    color: var(--color-main);
    margin-bottom: 30px;
    font-family: var(--font-serif);
}
.philosophy-desc {
    text-align: left;
    display: inline-block;
}

/* 診断への誘導ボックス */
.diagnosis-banner {
    margin-top: 60px;
    background: #fdfae8;
    padding: 30px;
    border-radius: 8px;
}
.btn-diagnosis {
    background: var(--color-white);
    color: var(--color-main);
    border: 1px solid var(--color-main);
}

/* =========================================
   商品・ニュース
   ========================================= */
.product-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.product-item {
    width: 300px;
    text-align: left;
    background: #fff;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.price { font-weight: bold; color: #556b2f; }
.news-list { text-align: left; margin-top: 30px; }
.news-list li { border-bottom: 1px solid #ddd; padding: 15px 0; }
.news-list .date { margin-right: 20px; font-family: sans-serif; color: #666; }



/* =========================================

   商品詳細ページ (Product Detail)

   ========================================= */
.detail-main-grid {
    display: grid;
    grid-template-columns: 100%;
}
.detail-container {
    grid-area: 1 / 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 120px;
    width: 100%;
}
.breadcrumb { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 15px; }
.breadcrumb a { color: var(--color-text-light); }
.detail-hero-img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px; }
.detail-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.detail-content { line-height: 1.8; font-size: 1rem; color: var(--color-text); margin-bottom: 40px; }
.detail-content img { max-width: 100%; height: auto; margin: 15px 0; }
.detail-content h2 {
    font-size: 1.4rem;
    border-left: 5px solid var(--color-main);
    padding-left: 10px;
    margin: 30px 0 15px;
    background: #f9f9f9;
    padding: 10px;
}

/* Sticky Purchase Bar */
.sticky-bar {
    grid-area: 1 / 1;
    position: sticky;
    top: calc(100vh - 90px); /* fallback */
    top: calc(100dvh - 90px);
    align-self: start;
    height: 90px;
    z-index: 100;
    width: 100%;
    pointer-events: none;
}
.sticky-bar-inner {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    pointer-events: auto;
}
.footer-price-area { display: flex; flex-direction: column; }
.footer-price-label { font-size: 0.8rem; color: var(--color-text-light); }
.footer-price { font-size: 1.5rem; font-weight: bold; color: var(--color-price); }
.footer-price span { font-size: 0.9rem; color: var(--color-text); font-weight: normal; }
.footer-btn {
    background-color: var(--color-main);
    color: var(--color-white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.footer-btn:hover { opacity: 0.9; color: var(--color-white); }

@media (max-width: 600px) {
    .detail-title { font-size: 1.4rem; }
    .footer-btn { padding: 10px 20px; font-size: 0.9rem; }
    .footer-price { font-size: 1.3rem; }
}

/* =========================================
   カルーセル（横スクロール）の装飾
   ========================================= */
/* ラッパー */
.carousel-wrap {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

/* --- 1. 横並びにする設定 --- */
.product-list.scrollable {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    
    /* ▼▼▼ 追加：これが重要です（必ず左端からスタートさせる） ▼▼▼ */
    justify-content: flex-start !important; 
    
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    padding-bottom: 25px;
    gap: 20px;
    
    scrollbar-color: #556b2f #eee;
    scrollbar-width: thin;
}

/* --- 2. アイテムの幅を固定する設定 --- */
.product-list.scrollable .product-item {
    flex: 0 0 auto !important;
    width: 280px !important;
    max-width: none !important;
    
    margin-bottom: 0 !important;
    margin-right: 0; /* 右マージンはgapで管理するので0にする */
    margin-left: 0 !important; /* 念のため左も0に */
    
    scroll-snap-align: start;
}

/* スマホ用調整 */
@media screen and (max-width: 768px) {
    .product-list.scrollable .product-item {
        width: 220px !important;
    }
    .scroll-arrow {
        /* display: none !important; */
    }
    .carousel-wrap {
        padding: 0 15px;
    }
}
/* --- 3. スクロールバーのデザイン（Webkit） --- */
.product-list.scrollable::-webkit-scrollbar {
    height: 6px;
}
.product-list.scrollable::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
    margin: 0 10px;
}
.product-list.scrollable::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.product-list.scrollable::-webkit-scrollbar-thumb:hover {
    background: #556b2f;
}
/* --- 4. 矢印ボタンのデザイン --- */
.scroll-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    color: #556b2f;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.scroll-arrow:hover {
    background: #556b2f;
    color: #fff;
}
.scroll-arrow.prev { left: -15px; }
.scroll-arrow.next { right: -15px; }
.scroll-arrow.hidden { opacity: 0; pointer-events: none; }



/* =========================================

   会社概要ページ (Company)

   ========================================= */
/* 下層ページ用のヘッダー画像エリア（シンプル版） */
.page-header-visual {
    background: #556b2f;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    /* margin-bottom: 40px; */
}
.page-header-visual h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}
.page-header-visual span {
    font-family: serif;
    font-style: italic;
    opacity: 0.8;
}
/* 会社情報のテーブル */
.company-table-wrapper {
    max-width: 800px;
    margin: 0 auto;
}
.company-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
}
.company-table th, 
.company-table td {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}
.company-table th {
    background: #f9f9f9;
    width: 30%;
    font-weight: normal;
    color: #556b2f;
}

/* 沿革（ヒストリー） */
.history-list {
    max-width: 800px;
    margin: 0 auto;
    border-left: 2px solid #ddd; /* タイムラインの線 */
    padding-left: 20px;
}
.history-item {
    margin-bottom: 30px;
    position: relative;
}
/* 丸い点 */
.history-item::before {
    content: "";
    position: absolute;
    left: -26px; /* 線の位置に合わせる */
    top: 5px;
    width: 10px;
    height: 10px;
    background: #556b2f;
    border-radius: 50%;
}
.history-year {
    font-weight: bold;
    color: #556b2f;
    margin-bottom: 5px;
}
/* 店舗アクセス */
.shop-access-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}
.shop-access-item {
    width: 100%;
    max-width: 450px; /* 2列に並ぶように */
}
.shop-access-item h4 {
    border-left: 5px solid #556b2f;
    padding-left: 10px;
    margin-bottom: 15px;
    font-size: 1.2rem;
}
.shop-info {
    margin-bottom: 15px;
    line-height: 1.8;
}
/* Googleマップのレスポンシブ対応 */
.google-map {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9の比率を維持 */
    height: 0;
    overflow: hidden;
    border: 1px solid #ddd;
}
.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 背景色 */
.bg-light {
    background-color: #fcfcfc;
}



/* =========================================

   お問い合わせフォームページ

   ========================================= */
.contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    background: #fff;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.form-item { margin-bottom: 20px; }
.form-item label { display: block; font-weight: bold; margin-bottom: 8px; color: #556b2f; }
.required { font-size: 0.8rem; color: #fff; background: #cc0000; padding: 2px 5px; border-radius: 3px; margin-left: 5px; }
.form-item input, .form-item textarea {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; font-family: inherit; box-sizing: border-box;
}
.form-item input:focus, .form-item textarea:focus { border-color: #556b2f; outline: none; background-color: #fcfcf8; }



/* =========================================

   お茶診断（Recommendation）

   ========================================= */
.diagnosis-container {
    background: #fff;
    padding: 40px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    min-height: 400px; /* ガタつき防止 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.diagnosis-question {
    font-size: 1.4rem;
    margin-bottom: 30px;
    color: #556b2f;
}
.diagnosis-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 400px;
}
.btn-option {
    padding: 15px;
    background: #fcfcfc;
    border: 1px solid #ccc;
    border-radius: 50px; /* 丸みのあるボタン */
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    font-family: inherit;
    color: #333;
}

.btn-option:hover {
    background: #556b2f;
    color: #fff;
    border-color: #556b2f;
}

/* 結果表示エリア */
.result-box {
    text-align: center;
    max-width: 500px;
}
.result-badge {
    background: #cb4e4e; /* 赤っぽい色 */
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    font-size: 0.8rem;
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}
.result-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    line-height: 1.4;
}
.result-img {
    margin-bottom: 20px;
}
.result-desc {
    margin-bottom: 30px;
    text-align: left;
}
.btn-retry {
    background: none;
    border: none;
    text-decoration: underline;
    color: #888;
    margin-top: 20px;
    cursor: pointer;
}
/* 診断の戻るボタン */
.btn-back {
    background: none;
    border: none;
    border-bottom: 1px solid #999;
    color: #666;
    padding: 0 5px 2px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.3s;
}
.btn-back:hover {
    color: #556b2f;
    border-bottom-color: #556b2f;
}
/* ふわっと表示するアニメーション */
.fade-in {
    animation: fadeIn 0.5s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* =========================================

   受け取り予約ページ

   ========================================= */
/* ▼▼▼ 追加機能用CSS (店舗選択・在庫表示) ▼▼▼ */
.store-select-header {
    background: #fdfae8;
    border-bottom: 2px solid #556b2f;
    padding: 12px;
    text-align: center;
    position: -webkit-sticky; position: sticky;
    top: 0;
    z-index: 97; /* モーダルより手前、ヘッダーより奥 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.store-select-header>div {
    max-width: var(--width-header);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.store-select-header .container_right {
    width: 30%;
    display: flex;
    justify-content: space-between;
    vertical-align: center;
    text-align: right;
}
.store-select-header .container_right .vip_enter {
    display:block; 
    padding:15px 0 15px 0; 
    color: #556b2f; 
    text-decoration: underline;
    font-size: 1.1rem;
}
#storeMsg {
    position: absolute; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 165px;
    top: 0;
    left: 0;
    background-color: rgba(33, 32, 32, 0.8);
    width: 100vw;
    height: 70vh;
    padding: 0 30px;
    font-size:1.1em; 
    color: #fff; 
    font-weight:bold;
    z-index: 10;
}

/* 売り切れ時の表示制御 */
.sold-out-overlay {
    opacity: 0.6;
    pointer-events: none; /* クリック無効化 */
    filter: grayscale(80%);
}
.sold-out-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 5px;
    z-index: 10;
    display: none; /* JSで制御 */
    white-space: nowrap;
}

/* ▼▼▼ 既存デザイン (変更なし) ▼▼▼ */
.store-container {
    max-width: 1200px; margin: 0 auto; padding: 30px 15px; padding-bottom: 100px;
}
.category-section { margin-bottom: 60px; border-top: 1px solid #f0f0f0; padding-top: 40px; }
.category-section:first-of-type { border-top: none; padding-top: 0; }
.category-title { text-align: center; margin-bottom: 30px; }
.category-title h4 { font-size: 1.5rem; color: #556b2f; margin-bottom: 5px; font-family: 'Noto Serif JP', serif; font-weight: bold; }
.category-sub { color: #999; font-size: 0.9rem; letter-spacing: 0.1em; }

.store-product-grid { display: flex; flex-wrap: wrap; margin: -10px; }
.store-product-col { width: 50%; padding: 10px; box-sizing: border-box; }
@media (min-width: 768px) { 
    .store-product-col { width: 25%; }
}
@media (max-width: 980px) { 
    .store-select-header .container_right {
        width: 40%;
    }
}
@media (max-width: 767px) { 
    .store-select-header {
        justify-content: space-between;
        align-items: end;
    }
    .store-select-header .container {
        width: 50%;
        text-align: left;
    }
    .store-select-header .container_right {
        flex-wrap: wrap;
        justify-content: right;
        width: 48%;
    }
    .store-select-header .container_right .vip_enter {
        padding:0px 0 15px 0; 
    }
    .store-select-header .btn-main {
        padding: 10px 35px!important;
        margin-left: 5%;
    }
}

.store-product-item {
    border: 1px solid #eee; background: #fff; border-radius: 8px; overflow: hidden;
    cursor: pointer; height: 100%; display: flex; flex-direction: column; transition: box-shadow 0.2s;
    position: relative; /* バッジ配置用 */
}
.store-product-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-3px); }
.store-product-img { position: relative; width: 100%; padding-top: 100%; background: #fafafa; }
.store-product-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.store-product-info { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; }
.store-product-info h4 { font-size: 14px; margin: 0 0 5px; line-height: 1.4; height: 2.8em; overflow: hidden; font-weight: bold; }
.store-product-info .price { color: #d9534f; font-weight: bold; font-size: 16px; margin-top: auto; }

#customModalOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 9998; }
#customModal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; max-height: 90vh; background: #fff; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 999999; overflow-y: auto; padding: 20px; }
.close-btn { position: absolute; top: 15px; right: 15px; background: #f0f0f0; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 30px; text-align: center; cursor: pointer; }

.modal-flex { display: flex; flex-wrap: wrap; gap: 20px; }
.modal-left { width: 40%; }
.modal-right { width: 55%; flex-grow: 1; }
@media (max-width: 600px) { .modal-flex { flex-direction: column; } .modal-left, .modal-right { width: 100%; } }
.modal-img { width: 100%; border-radius: 5px; border: 1px solid #eee; }

.cart-bar-sticky { display: none; position: -webkit-sticky; position: sticky; bottom: 0px; text-align: center; z-index: 999; backdrop-filter: blur(5px); }
.cart-btn-link { display: inline-block; background: #5cb85c; color: #fff; padding: 10px 30px; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 15px; transition: 0.2s; margin-left:15px; }
/* =========================================
   受け取り予約ページ | カートページ
   ========================================= */
.cart-container { max-width: 800px; margin: 0 auto; padding: 40px 15px; min-height: 80vh; }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.cart-table th { background: #f9f9f9; padding: 10px; border-bottom: 2px solid #ddd; text-align: left; }
.cart-table td { padding: 15px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
.cart-img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; margin-right: 10px; }
.item-name { font-weight: bold; color: #555; }
.item-opt { font-size: 0.85em; color: #888; margin-top: 3px; line-height: 1.4; }

.total-area { text-align: right; font-size: 1.2em; margin-bottom: 40px; border-top: 2px solid #ddd; padding-top: 15px; }
.total-price { font-size: 1.8em; color: #d9534f; font-weight: bold; margin-left: 10px; }

.form-section { background: #fdfae8; padding: 30px; border-radius: 8px; border: 1px solid #faebcc; margin-bottom: 30px; }
.form-title { font-size: 1.3em; font-weight: bold; color: #8a6d3b; border-bottom: 1px dashed #8a6d3b; padding-bottom: 10px; margin-bottom: 20px; }

.btn-submit { display: block; width: auto; margin: 0 auto; background: #d9534f; color: #fff; padding: 15px 40px; font-size: 1.2em; font-weight: bold; border: none; border-radius: 50px; cursor: pointer; transition: 0.2s; box-shadow: 0 5px 15px rgba(217, 83, 79, 0.3); }
.btn-submit:hover { background: #c9302c; transform: translateY(-2px); }
.btn-submit:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; transform: none; }

.stock-alert { color: #d9534f; font-weight: bold; font-size: 0.85em; display: block; margin-top: 5px; background: #fff0f0; padding: 2px 5px; border-radius: 3px; border: 1px solid #ffcccc; }
.del-btn { color: #999; cursor: pointer; font-size: 1.2em; }
.qty-select { padding: 5px; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
select.input-lg { height: 50px; font-size: 16px; }

.info-box { background-color: #fff; border: 2px solid #f0ad4e; border-radius: 8px; padding: 15px; margin-bottom: 30px; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { margin-bottom: 8px; font-size: 0.95em; display: flex; align-items: flex-start; }
.info-label { display: inline-block; width: 50px; text-align: center; flex-shrink: 0; margin-right: 10px; font-size: 0.85em; padding: 2px 0; }

.store-display {
    font-size: 1.3em; font-weight: bold; color: #333;
    padding: 5px 0 10px; border-bottom: 1px dashed #ccc; margin-bottom: 10px;
}

/* ▼▼▼ 追加: レスポンシブ対応（スマホ用カード表示） ▼▼▼ */
@media screen and (max-width: 768px) {
    /* テーブル全体のレイアウト変更 */
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td {
        display: block;
        width: 100%;
    }

    /* PC用のヘッダーを非表示 */
    .cart-table thead {
        display: none;
    }

    /* 各行をカード風のデザインにする */
    .cart-table tr {
        margin-bottom: 20px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    /* 各セルの基本スタイル */
    .cart-table td {
        padding: 12px 15px;
        text-align: right; /* 値を右寄せ */
        border-bottom: 1px solid #f5f5f5;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 最後のセル（削除ボタン）の下線は消す */
    .cart-table td:last-child {
        border-bottom: none;
    }

    /* 商品情報（1列目） */
    .cart-table td:first-child {
        text-align: left;
        background: #fdfdfd;
        border-bottom: 1px solid #eee;
        display: block; /* 中身のflexを有効にするためblockに戻す */
    }
    
    /* 商品情報内のレイアウト調整 */
    .cart-table td:first-child > div {
        /* JSで直書きされている display:flex はそのままでOK */
    }

    /* 単価（2列目） */
    .cart-table td:nth-of-type(2)::before {
        content: "単価";
        font-weight: bold;
        color: #777;
    }

    /* 数量（3列目） */
    .cart-table td:nth-of-type(3)::before {
        content: "数量";
        font-weight: bold;
        color: #777;
    }
    /* セレクトボックスの右寄せ調整 */
    .cart-table td:nth-of-type(3) .qty-select {
        margin-left: auto;
    }

    /* 小計（4列目） */
    .cart-table td:nth-of-type(4) {
        font-weight: bold;
        color: #333;
        background-color: #fdfae8; /* 小計を目立たせる */
    }
    .cart-table td:nth-of-type(4)::before {
        content: "小計";
        font-weight: bold;
        color: #777;
    }

    /* 削除ボタン（5列目） */
    .cart-table td:nth-of-type(5) {
        display: block;
        text-align: center;
        padding: 0;
    }
    .del-btn {
        display: block;
        width: 100%;
        padding: 12px;
        background: #fff0f0;
        color: #d9534f;
        font-weight: bold;
        text-decoration: none;
        border-top: 1px solid #ffcccc;
        transition: background 0.2s;
    }
    .del-btn:hover {
        background: #ffe6e6;
    }
    .del-btn::after {
        content: " この商品を削除";
        font-size: 0.9em;
    }
    
    /* カート全体のパディング調整 */
    .cart-container {
        padding: 20px 10px;
    }
}