@charset "utf-8";



/* --- fa親枠 --- */
.fa-container {
  display: flex;
  align-items: flex-start; /* ボックス同士の縦の配置を「上」で揃える */
  justify-content: center; /* 画面全体に対して中央寄りに配置 */
  gap: 30px;               /* ボックスとボックスの間の隙間（お好みで調整） */
}

/* --- ② 個別のボックス（アイコンと文字の塊） --- */
.fa-box {
  display: flex;
  flex-direction: column;  
  align-items: center;     
  border-radius: 25px;
}

.fa-text {
  margin-top: 10px;   
}


/* --- ④ アイコンのスタイル --- */
.fa-icon-wrapper,
.fa-icon-wrapper-a {
  width: 80px; 
  height: 80px;
  background-color:#669b5d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top:30px;
}
.fa-icon-wrapper i,
.fa-icon-wrapper svg,
.fa-icon-wrapper-a i,
.fa-icon-wrapper-a svg  {
  color: #fff;
  font-size: 30px; 
}

.fa-icon-wrapper-a:hover {
  background-color: #ff9800 !important;
  color: #ffffff !important;
}

/* QA BoX調整 */
.qa-box {
  max-width: 1200px; /* 横幅をいっぱいに広げる */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 40px;
}

/* 吹き出しの基本設定 */
.balloon-box {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px; /* 余白を少し広く */
}

/* アイコン（QとA） */
.balloon-icon {
  width: 60px; /* アイコンを少し大きく */
  height: 60px;
  background-color: #c10505;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px; /* 文字を少し大きく */
  flex-shrink: 0;
}

.balloon-icon-a {
  width: 60px; /* アイコンを少し大きく */
  height: 60px;
  background-color:  #669b5d;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px; /* 文字を少し大きく */
  flex-shrink: 0;
}

/* 質問（左側）の配置 */
.balloon-box.left {
  justify-content: flex-start;
}
.balloon-box.left .balloon-icon {
  margin-right: 20px; /* 間隔を少し広く */
}

/* 回答（右側）の配置 */
.balloon-box.right {
  justify-content: flex-end;
}

.balloon-box.right .balloon-icon-a {
  margin-left: 20px; 
}
.balloon-box.right .balloon-text {
  background-color: #f0f0f0;
  margin-left: 15%; /* 左側の最低余白 */
  max-width: 85%;   /* マージン15%と合わせて100%になるよう調整 */
}

/* 吹き出しの中身 */
.balloon-text {
  background-color: #ffece7;
  border-radius: 12px;
  padding: 18px 24px; /* 内側の余白を広げて見やすく */
  position: relative;
  max-width: 80%; /* 吹き出しの最大横幅を70%から80%へ拡張 */
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

/* 吹き出しのしっぽ（三角形） */
.balloon-text::after {
  content: "";
  position: absolute;
  top: 16px;
  width: 0;
  height: 0;
  border-style: solid;
}

/* 左側のしっぽQ */
.balloon-box.left .balloon-text::after {
  left: auto;                      /* 一度リセット */
  right: 100%;                     /* 吹き出しの左端にぴったり合わせる */
  border-width: 8px 10px 8px 0;
  border-color: transparent #ffece7 transparent transparent;
}

/* 右側のしっぽA */
.balloon-box.right .balloon-text::after {
  left: 100%;                      /* 吹き出しの右端にぴったり合わせる */
  right: -10px; 
  border-width: 8px 0 8px 10px; 
  border-color: transparent transparent transparent #f0f0f0; 
}


/* ==========================================
   【修正】画面幅 740px 以下のスマホ向け設定
   ========================================== */
@media screen and (max-width: 740px) {
  .qa-box {
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding: 15px !important;
  }

  .balloon-icon,
  .balloon-icon-a {
    width: 45px !important;
    height: 45px !important;
    font-size: 16px !important;
  }

  .balloon-box.left .balloon-icon {
    margin-right: 15px !important;
  }
  .balloon-box.right .balloon-icon-a {
    margin-left: 15px !important;
  }

  /* 共通の最大幅を75%に固定 */
  .balloon-text {
    max-width: 75% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  /* 
     【最重要】右側（A）の吹き出しに効いていた
     PC用のマージン（15%）と最大幅（85%）を強制リセットします
  */
  .balloon-box.right .balloon-text {
    margin-left: 0 !important;
    max-width: 75% !important; 
  }
}


.icon:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f106';
}


/* ------------QAおりたたみ----------- */

.faq-list {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.faq-question {
  list-style: none; /* デフォルトの三角アイコンを非表示 */
  cursor: pointer;
  padding: 15px 20px;
  font-weight: 500;
  font-size: 1.1rem;
  background-color: #f7f7f7;
  position: relative;
  transition: background-color 0.3s;
}

.faq-question:hover {
  background-color: #e9e9e9;
}

/* 開閉用のプラス・マイナスアイコン */
.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;               /* 丸の横幅 */
  height: 28px;              /* 丸の縦幅 */
  background-color: #c10505;
  color: #fff; 
  border-radius: 50%;
  display: flex;  /* --- 丸の中で文字をど真ん中に配置する設定 --- */
  justify-content: center;
  align-items: center;
   font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;            /* 文字の縦ズレを防ぐ */
  transition: 0.3s;
}

.faq-item[open] .faq-question::after {
  content: "ー";
  font-size: 1.1rem;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-answer {
  padding: 20px;
  background-color: #fff;
  line-height: 1.6;
}