@charset "utf-8";

/* ==========================================
   ムアコックページ専用：タブ切り替えレイアウト
   ========================================== */

/* タブ全体を包む枠の設定 */
.tab-wrap {
    display: flex; /* 横並びと順序制御を有効にする */
    flex-wrap: wrap; /* ボタンと中身を上下に分けるために必要 */
    margin-top: 20px;
}

/* ラジオボタン本体は常に隠す */
.tab-switch {
    display: none !important;
}

/* --- 1. タブのラベル（ボタン部分） --- */
.tab-label {
    order: 1; /* 常に一番上に並ぶように「1」を指定 */
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f0f0f0;
    color: #666;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
    font-weight: bold;
    font-size: 1.4rem;
    transition: 0.3s;
}

/* 選択された（チェックが入った）タブの見た目 */
.tab-switch:checked + .tab-label {
    background-color: #7B68EE !important; /* 紫色 */
    color: #fff !important;
    border-color: #7B68EE;
}

/* --- 2. タブの中身（コンテンツ部分） --- */
.tab-content {
    order: 2; /* 常にボタンの下に並ぶように「2」を指定 */
    width: 100%; /* 横幅100%にして改行させる */
    display: none; /* 初期状態は非表示 */
    border: 1px solid #7B68EE;
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
}

/* チェックが入ったボタンの、さらに隣にある中身を表示する */
.tab-switch:checked + .tab-label + .tab-content {
    display: block !important;
}

/* --- スマホ表示の調整（画面幅が狭い時） --- */
@media screen and (max-width: 480px) {
    /* スマホでも Flexbox を維持（ここが重要！） */
    .tab-wrap {
        display: flex; 
    }
    
    .tab-label {
        flex: 1; /* ボタンが2つの場合、50%ずつ均等に広げる */
        text-align: center;
        padding: 10px 5px;
        font-size: 1.2rem;
        margin-right: 2px;
    }
}