@charset "UTF-8";

/* =======================================================
   よくあるご質問（Q&A）  #faq
   ブランド配色：ダーク #231815 / ベージュ #E8E3D2 / アクセント #bca87d
   ======================================================= */

/* ---------- 共通（SP / PC） ---------- */
#faq h1.main-title {
  text-align: center;
  background: #E8E3D2;
}
#faq h1.main-title .en {
  display: block;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #bca87d;
}
#faq h1.main-title .jp {
  display: block;
  font-weight: 700;
  color: #231815;
}

#faq .faq-lead {
  text-align: center;
  line-height: 1.9;
  color: #333;
}
#faq .faq-lead a {
  color: #bca87d;
  text-decoration: underline;
}

#faq .faq-item {
  background: #fff;
  border: 1px solid #e3ded0;
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}

/* 質問（Q） */
#faq .faq-q {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.6;
  color: #231815;
  background: #fff;
  -webkit-transition: background .2s;
  transition: background .2s;
}
#faq .faq-q:hover { background: #faf8f3; }

#faq .faq-q__badge,
#faq .faq-a__badge {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #fff;
}
#faq .faq-q__badge { background: #231815; }
#faq .faq-a__badge { background: #bca87d; }

#faq .faq-q__text { -webkit-flex: 1 1 auto; flex: 1 1 auto; }

/* 開閉トグル（＋ / −）CSSのみで描画 */
#faq .faq-q__toggle {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#faq .faq-q__toggle::before,
#faq .faq-q__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #bca87d;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* 横棒 */
#faq .faq-q__toggle::before { width: 100%; height: 2px; }
/* 縦棒（開いている時は消して「−」に） */
#faq .faq-q__toggle::after { width: 2px; height: 100%; }
#faq .faq-item.is-open .faq-q__toggle::after { opacity: 0; }

/* 回答（A）
   開閉アニメ（slideToggle）は外側 .faq-a が display:block ⇔ none で受け持ち、
   バッジと本文の横並びは内側 .faq-a__inner（常に flex）が受け持つ。
   ※ flex を .faq-a 自身に持たせると slideToggle のインライン display:block に
     上書きされ、閉じる際に本文が A バッジの下へ回り込む不具合になる。 */
#faq .faq-a {
  display: none;
  border-top: 1px dashed #e3ded0;
  background: #faf9f5;
}
#faq .faq-a__inner {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
#faq .faq-a__text { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; line-height: 1.9; color: #333; }
#faq .faq-a__text p { margin: 0 0 .8em; }
#faq .faq-a__text p:last-child { margin-bottom: 0; }
#faq .faq-a__text a { color: #bca87d; text-decoration: underline; }

#faq .faq-empty { text-align: center; color: #888; padding: 40px 0; }


/* ---------- SP（〜767px） ---------- */
@media screen and (max-width: 767px) {
  #faq h1.main-title { padding: 32px 15px; }
  #faq h1.main-title .en { font-size: 14px; margin-bottom: 6px; }
  #faq h1.main-title .jp { font-size: 22px; }

  #faq main { width: auto; margin: 0 auto 50px; padding: 0 15px; }
  #faq .seo_bread_list { margin: 16px 0 24px; }

  #faq .faq-lead { font-size: 14px; margin-bottom: 28px; }

  #faq .faq-q { gap: 12px; padding: 16px 44px 16px 14px; font-size: 15px; }
  #faq .faq-q__badge,
  #faq .faq-a__badge { width: 30px; height: 30px; font-size: 16px; }
  #faq .faq-q__toggle { right: 16px; width: 14px; height: 14px; }

  #faq .faq-a__inner { gap: 12px; padding: 16px 14px; }
  #faq .faq-a__text { font-size: 14px; }
}


/* ---------- PC（768px〜） ---------- */
@media screen and (min-width: 768px), print {
  #faq main { width: 1100px; margin: 0 auto 60px; }

  #faq h1.main-title { min-height: 220px; padding: 70px 0; }
  #faq h1.main-title .en { font-size: 18px; margin-bottom: 10px; }
  #faq h1.main-title .jp { font-size: 36px; }

  #faq .seo_bread_list { margin-bottom: 40px; }

  #faq .faq-lead { font-size: 16px; margin-bottom: 50px; }

  #faq .faq-list { max-width: 900px; margin: 0 auto; }

  #faq .faq-q { gap: 20px; padding: 26px 64px 26px 26px; font-size: 18px; }
  #faq .faq-q__badge,
  #faq .faq-a__badge { width: 40px; height: 40px; font-size: 20px; }
  #faq .faq-q__toggle { right: 26px; width: 18px; height: 18px; }

  #faq .faq-a__inner { gap: 20px; padding: 26px; }
  #faq .faq-a__text { font-size: 16px; }
}


/* =======================================================
   TOPページ抜粋掲載（#faq-sec ＝セクション / #faq.faq-top ＝中身）
   ※ .ttl 見出しは page-top.css がセクションID単位（#voice .ttl 等）で
     定義しているため、新設の #faq-sec には自前で当てる必要がある。
     #voice .ttl 相当のスタイルを踏襲。
   ======================================================= */
#faq.faq-top .faq-list { margin-bottom: 30px; }
#faq.faq-top .faq-more-wrap { text-align: center; }
#faq.faq-top .faq-more {
  display: inline-block;
  background: #231815;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  -webkit-transition: background .2s;
  transition: background .2s;
}
#faq.faq-top .faq-more:hover { background: #bca87d; text-decoration: none; }

/* ---------- SP（〜767px） ---------- */
@media screen and (max-width: 767px) {
  #faq-sec { width: 100vw; margin: 0 auto; padding: 12vw 0 22vw; background: #fff; }
  #faq-sec .inner-Box { width: 90vw; margin: 0 auto; }
  #faq-sec .ttl { text-align: center; font-size: 8vw; letter-spacing: 0.5vw; font-weight: 500; margin-bottom: 10vw; line-height: 0.9; }
  #faq-sec .ttl span { font-size: 4.2vw; font-weight: 600; letter-spacing: 0.1vw; position: relative; top: 3vw; }
  #faq.faq-top .faq-more { padding: 12px 28px; font-size: 14px; }
}
/* ---------- PC（768px〜） ---------- */
@media screen and (min-width: 768px), print {
  #faq-sec { width: 100%; margin: 0 auto; padding: 40px 0 100px; background: #fff; }
  #faq-sec .inner-Box { width: 100%; max-width: 1100px; margin: 0 auto; }
  #faq-sec .ttl { text-align: center; font-size: 28px; letter-spacing: 3px; font-weight: 500; margin-bottom: 43px; line-height: 1.55; }
  #faq-sec .ttl span { font-size: 18px; font-weight: 600; letter-spacing: 1px; }
  #faq.faq-top .faq-more { padding: 14px 44px; font-size: 15px; }
}