/* ページ全体 */


/* FAQ・Q&A全体 */
.faq-tab-switch_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:20px auto; /* 上下40pxの余白を付けて中央配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 全体の枠線 */
  border-radius:10px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f0f2eb; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 見出し */
.faq-tab-switch_title h1{
    font-family: ta-kouran, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    font-size: 4.5rem;
    letter-spacing: -0.1em;
    margin-top: 10px;
    margin-bottom: 10px;
}
.faq-tab-switch_title h1 span {
    text-align: center;
    display: block;
    font-family: ryo-display-plusn, serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
    margin-top: 5px;
}
/* 説明文 */
.faq-tab-switch_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 中央揃え */
}

/* 質問タブ全体 */
.faq-tab-switch_tabs{
  display:flex; /* タブを横並びにする */
  border-bottom:1px solid #d1d5db; /* タブ下部の枠線 */
}

/* 質問タブ */
.faq-tab-switch_tab{
  flex:1; /* 各タブを同じ横幅にする */
  min-height:52px; /* タブの最小高さ */
  padding:14px; /* タブ内側の余白 */
  border:1px solid #d1d5db; /* タブの枠線 */
  border-bottom:none; /* 下側の枠線を削除 */
  border-radius:8px 8px 0 0; /* 上側だけ角丸にする */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページと同じフォント */
  font-size:16px; /* タブの文字サイズ */
  font-weight:700; /* タブを太字にする */
  cursor:pointer; /* マウスカーソルを変更 */
  transition:
    background-color .3s ease,
    color .3s ease;
  /*
    0.3秒で背景色と文字色を切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* 2つ目以降のタブ */
.faq-tab-switch_tab + .faq-tab-switch_tab{
  margin-left:6px; /* タブ同士の間隔 */
}

/* 選択中のタブ */
.faq-tab-switch_tab.is-active{
  background:#B43300; /* 選択中の背景色 */
  color:#ffffff; /* 選択中の文字色 */
}

/* キーボード操作時 */
.faq-tab-switch_tab:focus-visible{
  position:relative;
  z-index:1;
  outline:3px solid rgba(11,107,255,.22); /* フォーカス時の強調 */
  outline-offset:2px; /* 強調線とタブの間隔 */
}

/* 回答 */
.faq-tab-switch_panel{
  display:none; /* 選択されていない回答を非表示 */
  padding:24px; /* 回答部分の内側余白 */
  border:1px solid #d1d5db; /* 回答部分の枠線 */
  border-top:none; /* 上側の枠線を削除 */
  background:#ffffff; /* 回答部分の背景色 */
  color:#4b5563; /* 回答の文字色 */
  font-size:16px; /* 回答の文字サイズ */
  line-height:1.8; /* 回答の行間 */
}

/* 選択中の回答 */
.faq-tab-switch_panel.is-active{
  display:block; /* 選択中の回答を表示 */
}

/* A.表記 */
.faq-tab-switch_answer-mark{
  margin-right:8px; /* 回答文との間隔 */
  color:#B43300; /* A.の文字色 */
  font-weight:700; /* A.を太字にする */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* FAQ・Q&A全体 */
  .faq-tab-switch_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }
.faq-tab-switch_title h2 {
    font-family: ta-kouran, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    font-size: 3.7rem;
    letter-spacing: -0.1em;
    margin-bottom: 5px;
}
.faq-tab-switch_title h2 span {
    text-align: center;
    display: block;
    font-family: ryo-display-plusn, serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    margin-top: 10px;
}
  /* 質問タブ */
  .faq-tab-switch_tab{
    min-height:48px; /* スマートフォンでのタブの最小高さ */
    padding:12px 8px; /* タブ内側の余白 */
    font-size:14px; /* タブの文字サイズ */
  }

  /* 2つ目以降のタブ */
  .faq-tab-switch_tab + .faq-tab-switch_tab{
    margin-left:4px; /* タブ同士の間隔を小さくする */
  }

  /* 回答 */
  .faq-tab-switch_panel{
    padding:20px 16px; /* 回答部分の内側余白を小さくする */
  }

}