@charset "utf-8"; /* CSS Document */
/* 1. アコーディオン全体を横幅いっぱいにする */
.accordion-container{  width: 100%;margin: 0;/* 中央寄せを解除 */ box-shadow: none;/* 横幅いっぱいのためシャドウを削除 */ border-radius: 0;overflow: hidden;padding-bottom: 10%;background: #36749D;box-sizing: border-box}
/* 質問バーの共通スタイル */
.accordion-header{  width: 100%;/* 横幅いっぱい */ cursor: pointer;display: block;color: white;font-weight: 600;box-sizing: border-box;transition: background-color 0.3s ease;user-select: none;}
/* 2. コンテンツの中央寄せと最大幅の制限 */
.header-content-wrapper{  width: 95%;max-width: 980px;margin: 0 auto;/* 中央寄せ */ padding: 1.25rem 0.5rem 1.5rem 0;display: flex;/* Flexboxを設定 */ align-items: center;box-sizing: border-box;font-size: 18px;}
.question-number{  font-size: 1.125rem;/* text-lg */ margin-right: 10px;}
.question-text{  flex-grow: 1;line-height: 1.2em;}
/* --- トグルアイコンのスタイル変更 (::afterを使用) --- */

.toggle-icon{  position: relative;/* ::after の基点 */ display: block;width: 25px;/* 矢印と余白を合わせた幅 */ height: 15px;/* 矢印の高さ */ margin-left: 15px;/* 左側に余白 */ transition: transform 0.3s ease;}
/* 矢印の形状と閉じた状態の回転 (横向き > ) */
.toggle-icon::after{  content: '';position: absolute;right: 0px;top: 50%;width: 8px;/* 参照元に合わせる */ height: 8px;/* 参照元に合わせる */ border-bottom: 2px solid;/* 色は後述の設定を参照 */ border-right: 2px solid;/* 色は後述の設定を参照 */ /* 参照元の閉じている状態の回転: -45deg */ transform: translateY(-50%) rotate(-45deg);transition: transform 0.3s ease;}
/* 開いた状態の回転 (下向き v ) */
.accordion-header.active .toggle-icon::after{  /* 参照元の開いている状態の回転: 45deg (Y軸の移動は -50% に統一して中央を維持) */ transform: translateY(-50%) rotate(45deg);}
/* --- ここまでがトグルアイコンのスタイル変更 --- */
/* --- 互い違いの色の設定 --- */
/* 奇数番目: #36749D (濃い青) */
.accordion-item:nth-child(odd) .accordion-header{  background-color: #36749D;color: #ffffff;}
/* 奇数番目 (青背景): 白い矢印 */
.accordion-item:nth-child(odd) .accordion-header .toggle-icon::after{  border-color: #ffffff;}
.accordion-item:nth-child(odd) .accordion-header + .accordion-content{ background-color: #36749D;color: #ffffff;}
.accordion-item:nth-child(odd) .accordion-header + .image-wrapper + .accordion-content{ background-color: #36749D;color: #ffffff;}
.accordion-item:nth-child(odd) .image-closed{  background-color: #36749D;}
/* 偶数番目: #ffffff (白) */
.accordion-item:nth-child(even) .accordion-header{  background-color: #ffffff;color: #00243F;}
/* 偶数番目 (白背景): 濃い矢印 */
.accordion-item:nth-child(even) .accordion-header .toggle-icon::after{  border-color: #00243F;}
/* 3. 画像を中央に保つためのラッパー */
.content-wrapper{  width: 100%;max-width: 980px;margin: 0 auto;/* 左右のパディングを適用 */ padding: 0 0 25px;}
.accordion-item:nth-child(odd) .content-wrapper{ background: #36749D}
.accordion-content-inner div.visible, .visible .content-wrapper{  margin-bottom: 0}
/* 画像ラッパーの共通スタイル */
.image-wrapper{  width: 100%;display: block;background: #fff;}
.image-wrapper img{  width: 100%;height: auto;display: block;}
/* 閉じているときに表示する画像 (質問バーの直下) */
.image-closed{  /*border-bottom: 1px solid #e5e7eb; */}
.image-closed.hidden{  display: none;}
/* 開いているときに表示する画像 (回答コンテンツ内) */
.image-open{  display: none;margin-top: 20px;}
.image-open.visible{  display: block;}
/* 回答コンテンツのスタイル */
.accordion-content{  background-color: #ffffff;padding: 0;max-height: 0;overflow: hidden;transition: max-height 0.3s ease, padding 0.3s ease;}
/* 回答コンテンツ内部も中央寄せラッパーを使用 */
.accordion-content-inner{  width: 100%;max-width: 980px;margin: 0 auto;padding: 20px 1.5rem;line-height: 1.7;color: #00243F;/* text-gray-600 を代替 */ font-weight: bold;box-sizing: border-box;}
.accordion-content-inner div{  display: flex;align-items: flex-start;margin-bottom: 3%}
.accordion-content-inner div>img{  width: 15.3%;}
.accordion-content-inner div p{  width: 65.3%;margin: 0%;background: #fff;border-radius : 20px;font-size: 18px;box-sizing: border-box;padding: 1em;position: relative}

.accordion-content-inner div p.singleline{ margin-top: 1em}
.accordion-content-inner div p span{  color: #E5554F}
.accordion-content-inner img.tx30tboxLj{  width: 1.8%;margin-right: -2px;margin-left: 1.5%;margin-top: 4%}
.accordion-content-inner div:nth-child(even){  display: flex;align-items: flex-start;flex-direction: row-reverse;}
.accordion-item:nth-child(even) .accordion-content-inner div p{  background: #fcf9e3}
.accordion-content-inner img.tx30tboxRj{  width: 1.8%;margin-left: -2px;margin-right: 1.5%;margin-top: 4.5%}
.accordion-content-inner .content-wrapper img{  width: 100%}
/* --- レスポンシブ対応 (958px以下) --- */
@media (max-width: 958px){  .accordion-container{ padding-bottom: 15%}
.header-content-wrapper{  font-size: 14px;padding: 0.75rem 0.5rem 1.0rem 0;width: 90%}
.accordion-content-inner{ padding: 5px 4% 20px;}
.accordion-content-inner div{  margin-bottom: 4.5%}
.accordion-content-inner div p{  font-size: 14px;width: 80%;line-height: 1.5em;}
.accordion-content-inner img.tx30tboxRj , .accordion-content-inner img.tx30tboxLj{  width: 3.2%;}
    .accordion-content-inner div p.singleline{ margin-top: 0}
}