@charset "UTF-8";
/* よくあるご質問
   下層（/faq＝body#faq）とTOPの掲載ブロック（#faq.faq-top）で共用
-------------------------------------------------------------- */

@media screen and (min-width: 768px),print {

  /* 一覧（下層） */
  body#faq .faq-wrap{ margin: 0 auto 100px auto; }
  body#faq .faq-empty{ text-align: center; font-size: 1rem; color: #111111; padding: 60px 0 40px; }

  /* アコーディオン（下層・TOP共用） */
  .faq-list{ list-style: none; }
  .faq-item{ background: #ffffff; border: 1px solid #dddddd; margin-bottom: 16px; }
  .faq-item:last-child{ margin-bottom: 0; }

  .faq-q{ position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 22px 66px 22px 24px; cursor: pointer; }
  .faq-q:hover{ background: #fafafb; }
  .faq-q:focus{ outline: 2px solid #043992; outline-offset: -2px; }

  .faq-badge{ -webkit-flex: 0 0 38px; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; text-align: center; line-height: 38px; font-size: 1.125rem; color: #ffffff; }
  .faq-badge-q{ background: #013162; }
  .faq-badge-a{ background: #043992; }

  .faq-q-text{ margin-left: 20px; font-size: 1.125rem; font-weight: 600; line-height: 1.6; letter-spacing: 1px; color: #013162; }

  .faq-toggle{ position: absolute; top: 50%; right: 24px; width: 18px; height: 18px; margin-top: -9px; }
  .faq-toggle::before,
  .faq-toggle::after{ content: ""; position: absolute; top: 50%; left: 0; width: 18px; height: 2px; margin-top: -1px; background: #013162; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
  .faq-toggle::after{ -webkit-transform: rotate(90deg); transform: rotate(90deg); }
  .faq-item.is-open .faq-toggle::after{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }

  .faq-a{ display: none; border-top: 1px dashed #cccccc; }
  .faq-a__inner{ display: -webkit-flex; display: flex; padding: 24px; }
  .faq-a-text{ min-width: 0; margin-left: 20px; margin-bottom: 0; font-size: 1rem; line-height: 1.9; letter-spacing: 0.5px; color: #111111; }

  /* TOP掲載ブロック */
  #faq.faq-top{ width: 900px; margin: 0 auto 120px; position: relative; z-index: 110; }
  #faq.faq-top .ttl{ font-size: 24px; color: #013162; font-weight: 600; letter-spacing: 7px; margin-bottom: 20px; }
  #faq.faq-top .btn{ position: absolute; top: 18px; right: 0; }

}

@media screen and (max-width: 767px) {

  /* 一覧（下層） */
  body#faq .faq-wrap{ margin: 0 4% 15%; }
  body#faq .faq-empty{ text-align: center; font-size: 3.4vw; color: #111111; padding: 10vw 0 6vw; }

  /* アコーディオン（下層・TOP共用） */
  .faq-list{ list-style: none; }
  .faq-item{ background: #ffffff; border: 1px solid #dddddd; margin-bottom: 3vw; }
  .faq-item:last-child{ margin-bottom: 0; }

  .faq-q{ position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 4vw 11vw 4vw 4vw; cursor: pointer; }

  .faq-badge{ -webkit-flex: 0 0 7.4vw; flex: 0 0 7.4vw; width: 7.4vw; height: 7.4vw; border-radius: 50%; text-align: center; line-height: 7.4vw; font-size: 3.6vw; color: #ffffff; }
  .faq-badge-q{ background: #013162; }
  .faq-badge-a{ background: #043992; }

  .faq-q-text{ margin-left: 3.2vw; font-size: 3.6vw; font-weight: 600; line-height: 1.6; letter-spacing: 0.2vw; color: #013162; }

  .faq-toggle{ position: absolute; top: 50%; right: 4vw; width: 3.6vw; height: 3.6vw; margin-top: -1.8vw; }
  .faq-toggle::before,
  .faq-toggle::after{ content: ""; position: absolute; top: 50%; left: 0; width: 3.6vw; height: 2px; margin-top: -1px; background: #013162; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
  .faq-toggle::after{ -webkit-transform: rotate(90deg); transform: rotate(90deg); }
  .faq-item.is-open .faq-toggle::after{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }

  .faq-a{ display: none; border-top: 1px dashed #cccccc; }
  .faq-a__inner{ display: -webkit-flex; display: flex; padding: 4vw; }
  .faq-a-text{ min-width: 0; margin-left: 3.2vw; margin-bottom: 0; font-size: 3.4vw; line-height: 1.9; color: #111111; }

  /* TOP掲載ブロック */
  #faq.faq-top{ width: 94%; margin: 0 auto 12vw; position: relative; z-index: 110; }
  #faq.faq-top .ttl{ font-size: 3.4vw; color: #013162; font-weight: 600; letter-spacing: 0.583vw; margin-bottom: 2.5vw; }
  /* 見出し1行（3.4vw × line-height1.6 ＝ 5.44vw）の上下中央にボタン画像（4.24vw）を合わせる */
  #faq.faq-top .btn{ position: absolute; top: 0.6vw; right: 0; width: 30%; }

}