@charset "utf-8";

/** ENTRY MODAL - INSURANCE STEP
  申込モーダルに挟む保険追加ステップ。パラメータなし流入時のみJSで表示される。
  modaal.css の「.modaal-wrapper * { text-align: center }」に負けないよう、
  左寄せは2クラス以上のセレクタで指定している。
==============================================*/
/* ステップ表示中は、モーダル共通の見出しと選択中カードを隠す */
.entry-modal.is-insurance-step > .c_title,
.entry-modal.is-insurance-step > .selected_card {
  display: none;
}

/* 見出しとリード文（共通incのクラスに、パールの .question と同じ見た目を当てる） */
.insurance-info__ttl {
  font-size: 22px;
  line-height: 1.5;
  padding: 0 0 20px;
  font-weight: 600;
}
.insurance-info__lead {
  font-size: 16px;
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .insurance-info__ttl {
    font-size: 18px;
    padding: 0 0 10px;
  }
  .insurance-info__lead {
    font-size: 14px;
  }
}

.insurance-info {
  border: 1px solid #333;
  margin-top: 20px;
  padding: 15px 30px;
}
.insurance-info > *:not(:first-child) {
  margin-top: 20px;
}
.insurance-info .insurance-info__cut > *:not(:first-child) {
  margin-top: 10px;
}
@media only screen and (max-width: 768px) {
  .insurance-info {
    margin-top: 15px;
    padding: 15px 10px;
  }
}

.insurance-info .insurance-info__txt {
  text-align: left;
  line-height: 1.4;
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  .insurance-info .insurance-info__txt {
    font-size: 14px;
  }
}

.insurance-info .insurance-info__check,
.insurance-info .insurance-info__square,
.insurance-info .insurance-info__notes {
  padding-top: 0 !important;
}
.insurance-info .insurance-info__check > li,
.insurance-info .insurance-info__square > li {
  position: relative;
  padding-left: 1.5em;
  text-align: left;
  line-height: 1.4;
  font-size: 16px;
}
.insurance-info .insurance-info__check > li:before,
.insurance-info .insurance-info__square > li:before {
  content: "";
  width: 1em;
  height: 1em; /* aspect-ratio未対応（iOS14以前など）でも高さが出るように */
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 0;
  top: 0.175em;
}
.insurance-info .insurance-info__check > li:before {
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M5.91111%208.08889L4.23889%206.41667C4.0963%206.27407%203.91481%206.20278%203.69444%206.20278C3.47407%206.20278%203.29259%206.27407%203.15%206.41667C3.00741%206.55926%202.93611%206.74074%202.93611%206.96111C2.93611%207.18148%203.00741%207.36296%203.15%207.50555L5.36667%209.72222C5.52222%209.87778%205.7037%209.95555%205.91111%209.95555C6.11852%209.95555%206.3%209.87778%206.45555%209.72222L10.85%205.32778C10.9926%205.18518%2011.0639%205.0037%2011.0639%204.78333C11.0639%204.56296%2010.9926%204.38148%2010.85%204.23889C10.7074%204.0963%2010.5259%204.025%2010.3056%204.025C10.0852%204.025%209.9037%204.0963%209.76111%204.23889L5.91111%208.08889ZM1.55556%2014C1.12778%2014%200.761704%2013.8478%200.457333%2013.5434C0.152963%2013.2391%200.000518518%2012.8727%200%2012.4444V1.55556C0%201.12778%200.152444%200.761704%200.457333%200.457333C0.762222%200.152963%201.1283%200.000518518%201.55556%200H12.4444C12.8722%200%2013.2386%200.152444%2013.5434%200.457333C13.8483%200.762222%2014.0005%201.1283%2014%201.55556V12.4444C14%2012.8722%2013.8478%2013.2386%2013.5434%2013.5434C13.2391%2013.8483%2012.8727%2014.0005%2012.4444%2014H1.55556ZM1.55556%2012.4444H12.4444V1.55556H1.55556V12.4444Z%22%20fill%3D%22%23e60012%22%2F%3E%3C%2Fsvg%3E);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.insurance-info .insurance-info__square > li:before {
  background-color: #e60012;
}
.insurance-info .insurance-info__check > li:not(:first-child),
.insurance-info .insurance-info__square > li:not(:first-child) {
  margin-top: 5px;
}
.insurance-info .insurance-info__notes > li {
  text-align: left;
  line-height: 1.4;
  font-size: 12px;
  padding-left: 1em;
  text-indent: -1em;
}
.insurance-info .insurance-info__notes > li:before {
  content: "※";
}
@media only screen and (max-width: 768px) {
  .insurance-info .insurance-info__check > li,
  .insurance-info .insurance-info__square > li {
    font-size: 14px;
  }
  .insurance-info .insurance-info__notes > li {
    font-size: 10px;
  }
}

/* 保険の有無を選ぶボタン（.question-own-card__btn のレイアウトを流用し、配色だけ指定する） */
/* 流用元は折り返し指定がないため、（月額300円）が横並びにならないよう折り返しを許可する */
.question-own-card__btn--insurance-yes,
.question-own-card__btn--insurance-no {
  flex-wrap: wrap;
}
.question-own-card__btn--insurance-yes {
  background: -webkit-linear-gradient(315deg, #e60012 0%, rgba(230, 255, 255, 1) 12.79%, #e60012 25.64%);
  background: linear-gradient(135deg, #e60012 0%, rgba(230, 255, 255, 1) 12.79%, #e60012 25.64%);
  color: #fff;
  font-size: 20px;
}
.question-own-card__btn--insurance-yes:hover {
  color: #fff;
}
.question-own-card__btn--insurance-no {
  background-color: #fff;
  color: #0080c3;
  font-size: 18px;
}
.question-own-card__btn--insurance-no:hover {
  color: #0080c3;
}
.question-own-card__btn--insurance-yes .small,
.question-own-card__btn--insurance-no .small {
  display: block;
  width: 100%;
  font-size: 14px;
}

/* PCは2つのボタンを横並び、SPは縦積みにする */
@media only screen and (min-width: 769px) {
  .question-own-card__a--insurance {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    align-items: stretch;
  }
  .question-own-card__a--insurance > li {
    display: -webkit-box;
    display: flex;
    width: 50%;
    max-width: 384px;
    padding: 0 10px;
  }
  .question-own-card__a--insurance .question-own-card__btn {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .insurance-entry__no {
    margin-top: 30px;
  }
  .question-own-card__btn--insurance-yes {
    font-size: 18px;
  }
  .question-own-card__btn--insurance-no {
    font-size: 16px;
  }
}