@charset "utf-8";

/** ENTRY MODAL - INSURANCE STEP
  申込モーダルに挟む保険追加ステップ。パラメータなし流入時のみJSで表示される。
==============================================*/
.entry-modal [hidden] {
  display: none !important;
}

/* 見出しとリード文（共通incのクラスに、ローズの entry-modal__ttl / __txt と同じ見た目を当てる） */
.entry-modal .insurance-info__ttl {
  font-size: var(--pixel16);
  color: #ae4c61;
  display: inline-block;
  border-bottom: var(--pixel01) solid #ae4c61;
}
@media only screen and (min-width: 641px) {
  .entry-modal .insurance-info__ttl {
    margin-bottom: 1.74vw;
  }
  .entry-modal .insurance-info__lead {
    font-size: var(--pixel18);
  }
}
@media only screen and (max-width: 640px) {
  .entry-modal .insurance-info__ttl {
    margin-bottom: 6.67vw;
  }
  .entry-modal .insurance-info__lead {
    font-size: var(--pixel15);
  }
}

.entry-modal .insurance-info {
  border: var(--pixel01) solid #ae4c61;
}
.entry-modal .insurance-info > *:not(:first-child) {
  margin-top: 1.39vw;
}
.entry-modal .insurance-info__cut > *:not(:first-child) {
  margin-top: 0.69vw;
}
.entry-modal .insurance-info__txt {
  text-align: left;
  line-height: 1.4;
  font-size: var(--pixel16);
}
@media only screen and (min-width: 641px) {
  .entry-modal .insurance-info {
    margin-top: 1.39vw;
    padding: 1.04vw 2.08vw;
  }
}
@media only screen and (max-width: 640px) {
  .entry-modal .insurance-info {
    margin-top: 4vw;
    padding: 4vw 2.67vw;
  }
  .entry-modal .insurance-info > *:not(:first-child) {
    margin-top: 5.33vw;
  }
  .entry-modal .insurance-info__cut > *:not(:first-child) {
    margin-top: 2.67vw;
  }
  .entry-modal .insurance-info__txt {
    font-size: var(--pixel14);
  }
}

.entry-modal .insurance-info__check,
.entry-modal .insurance-info__square,
.entry-modal .insurance-info__notes {
  padding-top: 0 !important;
}
.entry-modal .insurance-info__check > li,
.entry-modal .insurance-info__square > li {
  position: relative;
  padding-left: 1.5em;
  text-align: left;
  line-height: 1.4;
  font-size: var(--pixel16);
}
.entry-modal .insurance-info__check > li:before,
.entry-modal .insurance-info__square > li:before {
  content: "";
  width: 1em;
  height: 1em; /* aspect-ratio未対応（iOS14以前など）でも高さが出るように */
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 0;
  top: 0.175em;
}
.entry-modal .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%23ae4c61%22%2F%3E%3C%2Fsvg%3E);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.entry-modal .insurance-info__square > li:before {
  background-color: #ae4c61;
}
.entry-modal .insurance-info__check > li:not(:first-child),
.entry-modal .insurance-info__square > li:not(:first-child) {
  margin-top: 0.35vw;
}
.entry-modal .insurance-info__notes > li {
  text-align: left;
  line-height: 1.4;
  font-size: var(--pixel12);
  padding-left: 1em;
  text-indent: -1em;
}
.entry-modal .insurance-info__notes > li:before {
  content: "※";
}
@media only screen and (max-width: 640px) {
  .entry-modal .insurance-info__check > li,
  .entry-modal .insurance-info__square > li {
    font-size: var(--pixel14);
    letter-spacing: 0;
  }
  .entry-modal .insurance-info__check > li:not(:first-child),
  .entry-modal .insurance-info__square > li:not(:first-child) {
    margin-top: 1.33vw;
  }
  .entry-modal .insurance-info__notes > li {
    font-size: var(--pixel10);
  }
}

/* 保険も申し込む（yes）ボタン */
.entry-modal .card-entry__button--yes {
  background-color: #fff;
  color: #ae4c61;
}
.entry-modal .card-entry__button--yes:hover {
  color: #ae4c61;
}
.entry-modal .card-entry__button--yes:after {
  border-color: transparent transparent transparent rgba(174, 76, 97, 0.6);
}

/* 戻る */
.entry-modal .prev-btn {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  text-align: left;
  font-weight: 700;
  font-size: var(--pixel14);
  padding-left: 3.47vw;
  min-height: 2.78vw;
}
.entry-modal .prev-btn:before,
.entry-modal .prev-btn:after {
  content: "";
  position: absolute;
}
.entry-modal .prev-btn:before {
  width: 2.78vw;
  height: 2.78vw;
  border-radius: 50%;
  background-color: #ae4c61;
  left: 0;
  top: calc(50% - 1.39vw);
}
.entry-modal .prev-btn:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.31vw 0.56vw 0.31vw 0;
  border-color: transparent #fff transparent transparent;
  left: 1.11vw;
  top: calc(50% - 0.31vw);
}
@media only screen and (min-width: 641px) {
  .entry-modal .prev-btn {
    margin-top: 3.47vw;
    margin-left: -5.56vw;
  }
}
@media only screen and (max-width: 640px) {
  .entry-modal .prev-btn {
    margin-top: 5.33vw;
    padding-left: 13.33vw;
    min-height: 10.67vw;
  }
  .entry-modal .prev-btn:before {
    width: 10.67vw;
    height: 10.67vw;
    top: calc(50% - 5.33vw);
  }
  .entry-modal .prev-btn:after {
    border-width: 1.2vw 2.13vw 1.2vw 0;
    left: 4.27vw;
    top: calc(50% - 1.2vw);
  }
}