/* スマホだけタブ表示、PCは従来レイアウトを優先 */
  .gid-tabs {
    margin: 16px 0;
  }
  
  /* ラジオボタンは非表示 */
  .gid-tab-radio {
    display: none;
  }
  
  /* タブ見出しの並び */
  .gid-tab-labels {
    display: flex;
    width: 100%;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    border: 1px solid #c2a67b; /* 枠線：サイトのゴールド系に寄せる */
    box-sizing: border-box;
  }
  
  /* タブボタン */
  .gid-tab-label {
    flex: 0 0 50%;          /* 2つで100%を等分 */
    text-align: center;
    padding: 12px 4px;
    font-size: 14px;
    line-height: 1.4;
    background: #f5f0e7;    /* 薄いベージュ（非アクティブ） */
    color: #5c4a33;         /* ブラウン */
    cursor: pointer;
    box-sizing: border-box;
  background: #f3eaea;  /* ほんのり赤系に寄せる */
  color: #6b4b4b;
  }
  
  
  
  /* タブ中身の箱 */
  .gid-tab-contents {
    border: 1px solid #c2a67b;
    border-top: none;
    padding: 12px 10px;
    background: #fff;
  }
  
  /* パネル共通：デフォルト非表示 */
  .gid-tab-pane {
    display: none;
  }
  
  /* アクティブ時のタブ見出し（色を変える） */
  #gid-tab-mtf:checked ~ .gid-tab-labels label[for="gid-tab-mtf"],
  #gid-tab-ftm:checked ~ .gid-tab-labels label[for="gid-tab-ftm"] {
    background: #ad4343;
    color: #ffffff;
    font-weight: bold;
  }
  
  /* アクティブ時の中身を表示 */
  #gid-tab-mtf:checked ~ .gid-tab-contents #gid-tab-content-mtf,
  #gid-tab-ftm:checked ~ .gid-tab-contents #gid-tab-content-ftm {
    display: block;
  }
  
  /* スマホ用の出し分け（幅は適宜） */
  @media screen and (max-width: 768px) {
    .gid-tabs {
      display: block;
    }
    /* もしPC用のMTF/FTMブロックが別にあるなら、ここで非表示にする */
    .gid-pc-only { display: none; }
  }