@charset "utf-8";
/* アコーディオン全体 */
.accordion {
  display: grid;
  gap: 60px;
  margin-bottom: 120px;
}
@media only screen and (max-width: 767px) {
  .accordion {
    gap: 30px;
  }
}
.accordion-container {
  max-width: 800px;
  margin: 0 auto;
}
.accordion-item {
  -webkit-box-shadow: 0px 2px 4px 0px rgba(198, 198, 198, .3);
  box-shadow: 0 2px 4px #c6c6c64d;
}
/* ヘッダー部分 */
.accordion-header {
  cursor: pointer;
  padding: 20px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
  position: relative;
  font-weight: bold;
  display: flex;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
.accordion-header {
  cursor: pointer;
  padding: 20px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
  position: relative;
  font-weight: bold;
  display: flex;
  gap: 20px;
}	
}
.accordion-header h3 {
  color: #383838;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 39.9px */
  letter-spacing: 1.71px;
    display: flex;
    gap: 20px;
}
@media only screen and (max-width: 767px) {
	.accordion-header h3 {
  
        font-size: 1.7rem;
        line-height: 1.8;
        letter-spacing: .06em;
}
}
.accordion-header h3 span {
  margin-top: 10px;
}
.accordion-header::before{
	background-image: none !important;
}
.accordion-header h3::before {
  content: "Q";
	    font-family: Jost, sans-serif;
  display: inline-block;
  color: #74DB9F;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
	.accordion-header h3 span {
  margin-top: 0;
}
	.accordion-header h3::before {
  font-size: 2.4rem;
}
}
/* コンテンツ部分（最初は非表示） */
.accordion-content {
  display: none;
  background-color: #FAFAFA;
  padding: 20px;
}
.accordion-content span {
  display: flex;
  gap: 20px;
  margin-left: -28px;
}
.accordion-content span b {
  margin-top: 10px;
  font-weight: normal;
}
.accordion-content span::before {
  content: "A";
	    font-family: Jost, sans-serif;
  display: inline-block;
  color: #74DB9F;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
		.accordion-content h3 span {
  margin-top: 0;
}
	.accordion-content span::before {
  font-size: 2.4rem;
}
}
.accordion-content .txt__box {
  padding-left: 30px;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 30.6px */
  letter-spacing: 1.02px;
}
@media only screen and (max-width: 767px) {
  .accordion-content .txt__box {
    font-size: 1.5rem;
  }
}
.content-inner {
  padding: 20px;
}
/* アクティブ（開いている）時のヘッダー装飾（任意） */
.accordion-item {
  border-bottom: 1px solid #EDEDED;
}

/* ADD CSS 2025.12.24 */
/* ======================================================
   アコーディオンヘッダー（黒丸＋ボタン実装）
   ====================================================== */

.accordion-header {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px 65px 20px 20px; /* 右側にボタン用の余白を確保 */
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

		@media only screen and (max-width: 767px) {
			.accordion-header {
  padding: 20px 50px 20px 20px; /* 右側にボタン用の余白を確保 */
}
		}
		
/* 1. 背景の黒丸 (::before) */
.accordion-header::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;         /* 右端からの距離 */
  transform: translateY(-50%);
  width: 32px;         /* 丸の直径 */
  height: 32px;        /* 丸の直径 */
    background: #74DB9F url(/_demo/toyopeteng25/mockup/assets/img/common/icon/ic_plus-white.svg);
  border-radius: 50%;  /* 正円にする */
  transition: all 0.3s ease;
}

@media only screen and (max-width: 767px) {
    .accordion-header::before  {
        width: 25px;
        height: 25px;
    }
}
/* 2. 中の「＋」マーク (::after) */
/* 2つのグラデーションを組み合わせて、1つの疑似要素で十字を作ります */
.accordion-header::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;         /* 丸の中央に配置 (20px + 丸の半径16px - 線の半分4px) */
  width: 16px;         /* 十字の横幅 */
  height: 16px;        /* 十字の縦幅 */
  transform: translateY(-50%);
  
  /* backgroundで「横棒」と「縦棒」を描画 */
  background-image: 
    linear-gradient(#fff, #fff), /* 横棒用 */
    linear-gradient(#fff, #fff); /* 縦棒用 */
  background-size: 100% 1px, 1px 100%; /* 横棒は幅100%×高さ2px、縦棒は幅2px×高さ100% */
  background-position: center, center;
  background-repeat: no-repeat;
  
  transition: all 0.3s ease;
}
		@media only screen and (max-width: 767px) {
			.accordion-header::after  {
  width: 12px;         /* 十字の横幅 */
  height: 12px;        /* 十字の縦幅 */
				right: 27px;
}
		}
/* -------------------------------------------
   開いている状態 (.is-active)
   ------------------------------------------- */

/* 縦棒のサイズだけを 0 にすることで「－」にする */
.accordion-header.is-active::after {
  background-size: 100% 2px, 2px 0%; /* 縦棒の高さ(100%→0%)にして消す */
  transform: translateY(-50%) rotate(180deg); /* 180度回転させて動きを出す */
}

/* (任意) 開いた時に丸の色を赤などに変えたい場合 */
/* .accordion-header.is-active::before {
  background-color: #e60012; 
}
*/

/* アコーディオンの中身 */
.accordion-content {
  display: none;
  padding: 20px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ddd;
}