/* ==========================================================================
   複数モール誘導パーツ（スマホファースト）
   ========================================================================== */

.shop-banner-area {
    margin: 40px 0;
}

.section-lead {
    font-size: 0.85rem;
    color: #666666;
    margin-bottom: 20px;
}

/* 3つのボタンを囲む枠 */
.mall-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px; /* 下の案内枠との間にすき間を作る */
}

/* 各モール共通のボタン土台 */
.btn-mall {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s; /* 反応を速くするため 0.3s から 0.2s に変更 */
}

/* ★【追加】：スマホで指が触れた（タップした）瞬間の立体的な反応 */
.btn-mall:not(.is-preparing):active {
    transform: translateY(2px); /* 2px下に沈み込ませる */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を薄くして床に近づける */
    opacity: 0.85; /* ほんの少しだけ色を薄くする */
}

.btn-mall .mall-sub {
    display: block;
    font-size: 0.75rem;
    font-weight: normal;
    opacity: 0.85;
    margin-bottom: 4px;
}

/* 「〇〇店」と「ショップ名」の文字サイズを同じ大きさに統一 */
.btn-mall .mall-main,
.btn-mall .mall-shop-name {
    display: block;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.btn-mall .mall-shop-name {
    margin-top: 2px; /* 少しだけ上下の間隔をあける */
}

/* --- 各モールのカラー --- */
.btn-yahoo-shop { background-color: #ff0033; color: #ffffff; }
.btn-yahoo-auctions { background-color: #ffcc00; color: #222222; }
.btn-base-shop { background-color: #00b4aa; color: #ffffff; }

/* ★BASE：準備中はグレーアウト ＆ クリックなどの反応を完全に無効化する魔法の記述 */
.btn-base-shop.is-preparing {
    background-color: #6c757d !important;
    color: #ffffff !important;
    box-shadow: none;
    cursor: default;               /* 矢印カーソルのままにする */
    pointer-events: none;          /* ?? これを入れることで、PC・スマホ問わずクリックやタップを完全に禁止にします */
}

/* ★新設：未掲載商品の取り寄せ案内（シンプルなグレーの枠） */
.unlisted-parts-box {
    background-color: #ffffff;    /* すっきりした白背景 */
    border: 1px solid #ced4da;     /* シンプルな薄いグレーの枠線 */
    border-radius: 6px;
    padding: 20px;
    text-align: center;
}

.unlisted-parts-box .box-title {
    font-size: 1.05rem;
    font-weight: bold;
    color: #111111;
    margin-bottom: 10px;
}

.unlisted-parts-box .box-text {
    font-size: 0.85rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left; /* スマホで長文が読みやすいよう文章は左寄せ */
}

/* 枠内のお問い合わせボタン */
.btn-box-contact {
    display: block;
    background-color: #222222; /* 引き締まった黒ボタン */
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: bold;
    padding: 12px;
    border-radius: 4px;
    transition: all 0.2s;
}

/* ==========================================================================
   PC用の調整
   ========================================================================== */
@media (min-width: 768px) {
    .mall-grid {
        flex-direction: row;
    }
    
    .btn-mall {
        flex: 1;
        padding: 20px;
    }
    
  /* ★ヤフー・ヤフオク（通常のボタン）だけマウスをのせた時に浮き上がらせる */
    .btn-mall:not(.is-preparing):hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        opacity: 0.9;
    }


    /* PCでは案内枠の幅を少し絞って真ん中に寄せる */
    .unlisted-parts-box {
        padding: 30px;
    }
    
    .unlisted-parts-box .box-title {
        font-size: 1.25rem;
    }
    
    .unlisted-parts-box .box-text {
        text-align: center; /* PCでは中央寄せの方が見栄えが良い */
        margin-bottom: 20px;
    }
    
    .btn-box-contact {
        display: inline-block; /* 横幅いっぱいにせずボタンサイズにする */
        padding: 12px 40px;
    }
    
    .btn-box-contact:hover {
        background-color: #dc3545; /* マウスをのせたらショップカラーの赤になる */
    }
}