@charset "UTF-8";

/* Indexページ 特長
--------------------------------------------------------*/
.feature-icon{
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-icon__img{
  margin-right: 10px;
}


/* simulationページ
--------------------------------------------------------*/

.m-renewal-listRadioButton:has(> li:nth-child(3):last-child) {
   grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 480px) {
   .m-renewal-listRadioButton[class] label {
      padding-left: 13px;
      padding-right: 13px;
   }
}

label.is-disabled {
   color: #ccc;
   opacity: 0.6;
}

.m-renewal-radio label.is-disabled:has(input[type=radio]) {
   cursor: default;
}

.m-renewal-listRadioButton.col-keep-3 {
   grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px) {
   .m-renewal-listRadioButton.col-keep-3 {
      column-gap: 12px;
   }
}

.m-renewal-listRadioButton.col-keep-3:has(> li:nth-child(3):last-child) {
   grid-template-columns: repeat(3, 1fr);
}


/* 特長1・2【気になるデータ】の2カラム
--------------------------------------------------------*/
/* 枠線(.m-renewal-cFeature__img)を見出しごとカラム自体に付けたことで、
   テーブルセル同士が隣接して枠線が密着する。該当の2カラムだけ flex + gap にして
   カラム間だけに余白を作る（外側は詰めたまま＝見出しと左端がズレない）。 */
.m-coltbl:has(> .m-coltbl__col.m-renewal-cFeature__img) {
   display: flex;
   gap: 30px;
}
.m-coltbl:has(> .m-coltbl__col.m-renewal-cFeature__img) > .m-coltbl__col {
   flex: 1;
}
.m-coltbl:has(> .m-coltbl__col.m-renewal-cFeature__img) > .m-coltbl__col.g-width-pc-40 {
   flex: 0 0 40%;
}
/* 2個目の箱は共通CSSの .m-coltbl__col:last-child{padding-left:30px} で左paddingがズレる
   （旧レイアウトのカラム間隙間用の指定）。gap で隙間を作る新レイアウトでは不要なので、
   箱本来のpadding(24px)に戻して1個目と左右対称にする。 */
.m-coltbl:has(> .m-coltbl__col.m-renewal-cFeature__img) > .m-coltbl__col:last-child {
   padding-left: 24px;
}

@media screen and (max-width: 767px) {
   /* SPは従来どおり縦積みに戻す（:has の詳細度が共通ルールより高いため明示的に戻す） */
   .m-coltbl:has(> .m-coltbl__col.m-renewal-cFeature__img) {
      display: block;
   }
   /* 縦積み時のカラム間余白（共通の10pxだと枠線付きの箱が窮屈なので広げる。数値はここで調整可） */
   .m-coltbl:has(> .m-coltbl__col.m-renewal-cFeature__img) > .m-coltbl__col + .m-coltbl__col {
      margin-top: 24px;
   }
   /* SPでは共通CSSが last-child の padding-left を 0 にしてしまい、2個目だけ中身が
      左の枠線に張り付く（左寄り）。箱本来のSP padding(16px)に戻して左右対称にする。 */
   .m-coltbl:has(> .m-coltbl__col.m-renewal-cFeature__img) > .m-coltbl__col:last-child {
      padding-left: 16px;
   }
}


/* ============================
   ネスト子アコーディオン（見た目は親 .m-renewal-acc と同一）
   ============================ */
.m-renewal-subAcc {
  border-bottom: solid 2px #005BAC;
}
.m-renewal-subAcc__ttl {
  display: flex;
  font-size: 20px;
  font-weight: bold;
  padding-block: 24px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.m-renewal-subAcc__ttl > * {
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.m-renewal-subAcc__ttl::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: 4px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url('data:image/svg+xml;utf8,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 12.2651C3.5 11.9881 3.59733 11.7522 3.792 11.5576C3.99414 11.3554 4.22998 11.2544 4.49952 11.2544H11.7656V3.99952C11.7656 3.72999 11.8629 3.49789 12.0576 3.30323C12.2522 3.10108 12.4881 3 12.7651 3C13.0421 3 13.278 3.10108 13.4726 3.30323C13.6748 3.49789 13.7758 3.72999 13.7758 3.99952V11.2544H21.0307C21.3003 11.2544 21.5324 11.3554 21.727 11.5576C21.9292 11.7522 22.0302 11.9881 22.0302 12.2651C22.0302 12.5421 21.9292 12.778 21.727 12.9726C21.5324 13.1673 21.3003 13.2646 21.0307 13.2646H13.7758V20.5307C13.7758 20.8003 13.6748 21.0324 13.4726 21.227C13.278 21.4292 13.0421 21.5302 12.7651 21.5302C12.4881 21.5302 12.2522 21.4292 12.0576 21.227C11.8629 21.0324 11.7656 20.8003 11.7656 20.5307V13.2646H4.49952C4.22998 13.2646 3.99414 13.1673 3.792 12.9726C3.59733 12.778 3.5 12.5421 3.5 12.2651Z" fill="%23009CE5"/></svg>');
}
.m-renewal-subAcc.is-open .m-renewal-subAcc__ttl::after {
  background-image: url('data:image/svg+xml;utf8,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.23438 13.5803C4.05469 13.5803 3.88997 13.5354 3.74023 13.4456C3.59049 13.3557 3.46696 13.2359 3.36963 13.0862C3.27979 12.929 3.23486 12.7568 3.23486 12.5696C3.23486 12.3899 3.27979 12.2252 3.36963 12.0754C3.46696 11.9182 3.59049 11.7947 3.74023 11.7048C3.88997 11.615 4.05469 11.5701 4.23438 11.5701H20.7656C20.9453 11.5701 21.11 11.615 21.2598 11.7048C21.417 11.7947 21.5405 11.9182 21.6304 12.0754C21.7202 12.2252 21.7651 12.3899 21.7651 12.5696C21.7651 12.7568 21.7202 12.929 21.6304 13.0862C21.5405 13.2359 21.417 13.3557 21.2598 13.4456C21.11 13.5354 20.9453 13.5803 20.7656 13.5803H4.23438Z" fill="%23009CE5"/></svg>');
}
.m-renewal-subAcc__cnt {
  display: grid;
  transition: grid-template-rows 0.5s;
  grid-template-rows: 0fr;
  font-size: 18px;
}
.m-renewal-subAcc__cnt > * {
  overflow: hidden;
}
.m-renewal-subAcc__cnt > * > *:last-child {
  margin-bottom: 24px;
}
.m-renewal-subAcc.is-open .m-renewal-subAcc__cnt {
  grid-template-rows: 1fr;
}
@media screen and (max-width: 767px) {
  .m-renewal-subAcc__ttl {
    font-size: 16px;
    padding-block: 16px;
  }
  .m-renewal-subAcc__ttl > * {
    column-gap: 8px;
  }
  .m-renewal-subAcc__cnt {
    font-size: 14px;
  }
  .m-renewal-subAcc__cnt > * > *:last-child {
    margin-bottom: 16px;
  }
}