/* ヘッダー全体の設定 */
.hero-header {
  width: 100vw;                /* window幅いっぱい */
  height: 382px;               /* window高さいっぱい（お好みでvh, px等に調整可） */
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)), url('../img/ankensearch.png'); /* 背景画像のURL */
  background-size: cover;      /* 画像をエリア全体に表示 */
  background-position: center; /* 画像を中央に配置 */
  background-repeat: no-repeat;
  
  /* テキストを中央に配置する設定 */
  display: flex;
  justify-content: center;     /* 水平方向の中央揃え */
  align-items: center;         /* 垂直方向の中央揃え */
  
  /* 文字色とフォント設定 */
  color: #fff;
  text-align: center;
}

/* テキストのスタイル */
.header-content h1 {
  font-size: 3rem;
  margin: 0 0 -6px 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 画像が明るい場合に文字を見やすくする */
}

.header-content p {
  font-size: 1.2rem;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* --- 全体共通設定 --- */
.cp_tab *, .cp_tab *:before, .cp_tab *:after { box-sizing: border-box; }

.cp_tab {
    margin: 1em auto;
    width: 100%;
    display: block;
}

/* ラジオボタンは完全に非表示 */
.cp_tab input[type='radio'] { display: none !important; }

/* --- PCレイアウト（タブを左、コンテンツを右に固定） --- */
@media (min-width: 769px) {
    .cp_tab {
        display: flex;       /* 横並びにする */
        align-items: flex-start; /* 上端を揃える（重要） */
    }

    /* 左側のメニューエリア */
    .cp_tab_menu_list {
        width: 15em;         /* メニューの幅 */
        flex-shrink: 0;      /* 幅を固定 */
        display: flex;
        flex-direction: column; /* 縦に並べる */
    }

    .cp_tab_menu_list label {
        display: block;
        padding: 15px;
        cursor: pointer;
        border: 1px solid #cccccc;
        border-right: none;
        border-radius: 6px 0 0 6px;
        background-color: #ffffff;
        margin-bottom: -1px;
        transition: 0.2s;
    }

    /* 右側のコンテンツエリア */
    .cp_tab .cp_tabpanels {
        flex-grow: 1;        /* 残りの幅をすべて使用 */
        background-color: #f0f8ff;
        border: 1px solid #cccccc;
        min-height: 500px;   /* 最低限の高さを確保 */
        padding: 15px;
    }

    /* アクティブなタブの装飾 */
    /* ※jQueryでクラス 'is-active' を制御します */
    .cp_tab_menu_list label.is-active {
        background-color: #f0f8ff;
        border-right: 1px solid #f0f8ff;
        margin-right: -1px; /* 境界線を重ねて消す */
        font-weight: bold;
    }
}

/* --- スマホレイアウト（768px以下） --- */
@media (max-width: 768px) {
    /* 大カテゴリータブを縦並びにする */
    .tab-menu {
        float: none!important;;         /* 横並びを解除 */
        width: 100%!important;         /* 幅をいっぱいにする */
        display: block!important;;      /* ブロック要素にして縦に積む */
        border-bottom: none; /* 下の境界線を調整（お好みで） */
        text-align: left;    /* 左寄せ（中央がよければ center） */
        padding-left: 20px;  /* 左寄せ時の余白 */
    }

    /* 最後の大カテゴリータブに下の線を復活させる */
    .tab-menu:last-of-type {
        border-bottom: 1px solid #ddd;
    }
    .cp_tab_menu_list {
        display: flex;
        flex-wrap: wrap; /* 折り返しを許可 */
        margin-bottom: -1px;
    }

    .cp_tab_menu_list label {
        padding: 10px;
        border: 1px solid #cccccc;
        border-radius: 5px 5px 0 0;
        margin-right: 2px;
        font-size: 0.8em;
    }

    .cp_tab_menu_list label.is-active {
        background-color: #f0f8ff;
        border-bottom: 1px solid #f0f8ff;
    }

    .cp_tab .cp_tabpanels {
        border: 1px solid #cccccc;
        background-color: #f0f8ff;
        padding: 10px;
    }
}

/* --- iframeと装飾 --- */
.clWrap { width: 100%; margin-bottom: 15px; border: solid 1px #999999; overflow: hidden; }
iframe { width: 100%; border: none; display: block; }

/* 上部大カテゴリータブ */
.tab-area { width: 95%; margin: 20px auto; }
.tab-radio { display: none; }
.tab-menu {
    display: block; float: left; width: 20%; text-align: center;
    padding: 1em 0; background-color: #f2f2f2; cursor: pointer; border: 1px solid #ddd;
}
.tab-content-item { display: none; clear: both; padding: 20px 0; }
#tab01:checked ~ #tabContent01, #tab02:checked ~ #tabContent02 { display: block; }
#tab01:checked ~ #tabMenu01, #tab02:checked ~ #tabMenu02 { background-color: #3498db; color: white; }