/* -------------------------------------------------- */
/* 家電修理費用保険 */
/* -------------------------------------------------- */

/* 枠 */
.frame-yellow {
  background: #fff799;
  border-radius: 8px;
  margin-top: 32px;
  padding: 16px;
}

/* 2列 */
.col-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 24px;
}

/* 2列＞＞画像 */
.col-2>div>img {
  width: 100%;
}

/* テーブル注釈 */
.table_note {
  margin-top: 16px;
  font-size: 0.75em;
}

/* 枠内枠 */
.frame-tp {
  background: #fffde5;
  padding: 16px;
}

/* 枠内枠：間隔 */
.frame-tp+.frame-tp {
  margin-top: 16px;
}

/* 枠内枠＞段落 */
.frame-tp>p {
  color: var(--sub-bgcolor);
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
}

/* 枠内枠＞段落：間隔 */
.frame-tp>*+p {
  margin-top: 16px;
}

/* 枠内枠＞段落＞赤字 */
.frame-tp>p>span.red {
  color: var(--main-bgcolor);
}

/* 枠内枠＞段落＞注釈 */
.frame-tp>p>span.note {
  display: inline-block;
  margin-top: 8px;
  color: #000;
  font-size: 0.5em;
  font-weight: normal;
}

/* 枠内枠＞タイトル */
.frame-tp>.title {
  background: var(--sub-bgcolor);
  border-radius: 100px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

/* リンクボタン */
a.btn-link {
  display: inline-block;
  width: 100%;
  margin-top: 16px;
  padding: 8px 0;
  background: var(--sub-bgcolor);
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none !important;
  transition: all ease .2s;
}

/* リンクボタン：ホバー */
a.btn-link:hover {
  background-color: var(--sub-bgcolor-alpha80);
}

/* 下部コピー */
.bottom_copy {
  color: var(--sub-bgcolor);
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}

/* 下部コピー＞注釈 */
.bottom_copy>span.note {
  font-size: 0.75rem;
  vertical-align: middle;
}
/* popup */
.popup_button {
  cursor: pointer;
  border: none;
  padding: 0;
  border-radius: 0;
  margin: 0;
}
.light_box {
  position: fixed;
  max-width: 768px;
  /* height: auto; */
  inset: 0;
  margin: auto;
  padding: 16px;
  background: #fff;
  overflow: auto;
}
.light_box_button {
  cursor: pointer;
  display: block;
  width: fit-content;
  margin-inline: auto;
  margin-top: 16px;
  padding: 6px 32px;
  text-align: center;
  font-size: 16px;
  background: #fff;
  color: #333;
  border: 1px solid currentColor;
}
.light_box::backdrop {
  background: rgba(0, 0, 0, .2);
}
.popup_button {
  transition: opacity .2s;
}
.popup_button:hover {
  opacity: .8;
}
/* スマホ */
@media (max-width: 989px) {

  /* 枠 */
  .frame-yellow {
    padding: 8px;
  }

  /* 2列→1列 */
  .col-2 {
    grid-template-columns: 1fr;
  }

  /* 下部コピー */
  .bottom_copy {
    margin-top: 16px;
  }

  /* 下部コピー＞注釈 */
  .bottom_copy>span.note {
    display: block;
  }

}