/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* ==================================================================
【Faq】ヘッダー下の文章
================================================================== */
.faq-intro-text-1 {
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 20px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  max-width: 1125px;       
  margin: 100px auto 60px;    
  font-size: 14px;
  line-height: 1.6;

  text-align: center; 

  opacity: 0;
  transition: opacity 2s ease;

}

/* 表示状態 */
.faq-intro-text-1.show {
  opacity: 1;
}

.faq-intro-text-1 h2 {
  font-size: 25px;
  margin: 10px 0px 20px 0px;
  color: #5C4433;
}

.faq-intro-text-1 p {
  margin: 6px 0;
}
@media (max-width: 768px) {
  .faq-intro-text-1 {
    position: relative;
    top: -90px;
    width: 90%; 
    margin: 130px auto 0px;
  }
  .faq-intro-text-1 h2 {
    font-size: 18px;
  }
}
@media (min-width: 769px) {
  .faq-intro-text-1 {
    position: relative;
    top: -30px;
    width: 800px;   /* ← 好きな幅に（これが線の長さ） */
  }
}


/* ==================================================================
【Faq】FAQ一覧のタイトル
================================================================== */
.faq-title-1 {
  max-width: 1125px;
  margin: 90px auto 65px;
  text-align: center;
  font-weight: bold;
}
.faq-title-1 p {
  font-size: 28px;  
}
@media (max-width: 768px) {
  .faq-title-1 {
    margin: 30px auto 65px;
  }
}




/* ==================================================================
【Faq】FAQグループ（大分類）
================================================================== */
.faq-group:first-of-type {
  border-top: 1px solid rgba(0,0,0,0.25);
}
.faq-group {
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding: 30px 0;
}
/* 大分類タイトル */
.faq-group-title {
  font-size: 21px;
  font-weight: 400;
  cursor: pointer;
  position: relative;
  padding-left: 28px;
  max-width: 600px;
  margin: 0 auto;
}
/* 横棒（常に表示） */
.faq-group-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 2px;
  background: #222;
  transform: translateY(-50%);
}
/* 縦棒（回転する部分） */
.faq-group-title::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 2px;
  height: 14px;
  background: #222;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
/* 開いた状態 */
.faq-group.open .faq-group-title::after {
  transform: translateY(-50%) rotate(90deg);
}
/* 中身は最初は非表示 */
.faq-group .faq-item {
  display: none;
}
/* 開いたら表示 */
.faq-group.open .faq-item {
  display: block;
  margin-top: 20px;
  max-width: 600px;
  margin: 20px auto 0;
}




/* ==================================================================
【Faq】FAQ中項目（Q&A）
================================================================== */
.faq-item {
  padding-left: 28px;
}
.faq-question {
  cursor: pointer;
  font-size: 1rem;
  margin: 0; 
  margin-bottom: 10px;
}



/* ==================================================================
【Faq】FAQ全体レイアウト
================================================================== */
.faq-main {
  max-width: 820px;      /* 横幅を制限 */
  margin: 0 auto;       /* 画面中央に配置 */
  padding: 0 20px;      /* スマホ用余白 */
  margin-top: 100px;  /* ← 好きな余白に */
}
/* 回答内の段落間 */
.faq-answer p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}




/* ==================================================================
【Faq】FAQ質問（Q.）
================================================================== */
.faq-question p:first-child {
  position: relative;
  padding-left: 30px;   /* Q. 分の余白 */
}
.faq-question p:first-child::before {
  content: "Q.";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: #222;
}
/* 2行目以降を本文開始位置に揃える */
.faq-question p:not(:first-child) {
  margin-left: 30px;
}


/* ==================================================================
【Faq】FAQ回答（A.）
================================================================== */
.faq-answer p:first-child {
  position: relative;
  padding-left: 30px;
}
.faq-answer p:first-child::before {
  content: "A.";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: #222;
}
.faq-answer p:not(:first-child) {
  margin-left: 30px;
}



/* ==================================================================
【Faq】FAQ文字サイズ調整
================================================================== */
.faq-question p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0; 
}
.faq-question p + p {
  margin-top: 4px;        /* ← 好きな小ささに */
}
.faq-answer p + p {
  margin-top: 4px;        /* Qより少し広めが読みやすい */
}



/* ==================================================================
【Faq】FAQ Q&A ボックス
================================================================== */
.faq-item {
  background: #f5f5f5;
  border: none;
  border-radius: 0;                  
  padding: 18px 20px;
  margin-bottom: 18px;




}
/* Q と A の間の区切り線 */
.faq-answer {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 12px;   /* 線と回答の距離 */
  margin-top: 12px;    /* Qとの距離 */
}





/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */