/************* 共通 *************/
/* サブタイトル */
.expiry-common .m-heading-type1__subTitle {
  color: var(--COLOR_FOREGROUND_DARK);
}

@media screen and (min-width: 768px) {
  .expiry-common .m-heading-type1__subTitle {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-common .m-heading-type1__subTitle {
    font-size: 18px;
  }
}

/* 大きいボタン */
.expiry-common .m-button-large {
  font-size: 16px;
  border-color: var(--COLOR_BRAND_SECONDARY);
}

.expiry-common .m-button-large::after {
  background-color: var(--COLOR_BRAND_SECONDARY);
}

/* 一部サイトコンテンツ幅 */
@media screen and (min-width: 768px) {
  .expiry-common .m-layout.m-layout--expiry-wrap {
    max-width: 1008px;
  }
}

/* 画像上のタイトル */
.expiry-common .m-text.m-text--image-title .m-text__item {
  font-size: 20px;
}

/* グラフ上のタイトル */
.expiry-common .m-text.m-text--graph-title .m-text__item {
  font-size: 16px;
}

/* 画像注釈 */
.expiry-common .m-media__caption {
  color: var(--COLOR_FOREGROUND_DARK);
}

/* 封入物関連のテキスト */
.expiry-common .m-text.m-text--inclusions,
.expiry-common .m-text-indent.m-text-indent--inclusions {
  color: var(--COLOR_FOREGROUND_LIGHT);
}

/* ご注意くださいのタイトルとアイコン */
.expiry-common .m-box--strong .m-box__title {
  color: var(--COLOR_BRAND_SECONDARY);
}

@media screen and (min-width: 768px) {
  .expiry-common .m-box--strong .m-box__title {
    font-size: 20px;
  }
}

.expiry-common .m-box--strong .m-box__title::before {
  display: inline-block;
  flex-shrink: 0;
  width: 25px;
  height: 40px;
  content: "";
  background-image: url("/shared/v2/images/icon/icon-lightbulb.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* リンクと赤線 */
.expiry-common .m-box--strong .m-card__content .m-text .m-text__item > a {
  text-decoration-color: var(--COLOR_ROLE_IMPORTANT);
}

/* 緑の点々カードレイアウト */
@media screen and (min-width: 768px) {
  .expiry-common .m-card__item::before {
    left: -18px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-common .m-card__item::before {
    left: -10px;
  }
}

@media screen and (min-width: 768px) {
  .expiry-common .m-box.m-box--strong .m-card__item::after {
    left: -18px;
  }
}

/* ステップリスト（アンカー） */
@media screen and (min-width: 768px) {
  .expiry-common .m-box-point.m-box-point--flow .m-button-anc {
    font-size: 18px;
    min-height: 88px;
  }
}

.expiry-common .m-box-point.m-box-point--flow .m-button-anc > span {
  color: var(--COLOR_BRAND_PRIMARY);
}

@media screen and (min-width: 768px) {
  .expiry-common .m-box-point.m-box-point--flow .m-button-anc > span {
    min-width: 88px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-common .m-box-point.m-box-point--flow .m-button-anc > span {
    min-width: 82px;
  }
}

/* ステップリスト（大枠） */
@media screen and (min-width: 768px) {
  .expiry-common
    .m-list-step.m-list-step--flow
    .m-list-step__item
    + .m-list-step__item {
    margin-top: 40px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-common
    .m-list-step.m-list-step--flow
    .m-list-step__item
    + .m-list-step__item {
    margin-top: 32px;
  }
}

.expiry-common
  .m-list-step.m-list-step--flow
  .m-list-step__title
  .m-list-step__labelText {
  color: var(--COLOR_FOREGROUND_LIGHT);
}

.expiry-common
  .m-list-step.m-list-step--flow
  .m-list-step__title
  .m-list-step__labelText::after {
  content: "";
}

.expiry-common
  .m-list-step.m-list-step--flow
  .m-list-step__item:last-child::before {
  content: "";
}

.expiry-common
  .m-list-step.m-list-step--flow
  .m-list-step__item:last-child::after {
  content: "";
}

/* ステップリスト（左側レイアウト） */
@media screen and (min-width: 768px) {
  .expiry-common .m-list-step .m-layout-media__media {
    width: 50%;
    max-width: 300px;
  }
}

/* ステップリストのSPテキスト等 */
@media screen and (max-width: 767px) {
  .expiry-common
    .m-list-step.m-list-step--flow
    .m-list-step__item
    .m-box__body
    .m-heading-type4__heading,
  .expiry-common
    .m-list-step.m-list-step--flow
    .m-list-step__item
    .m-box__body
    .m-list
    .m-list__item
    .m-list__text {
    font-size: 16px;
  }
}

/* お客さまにお願いしたいことのリスト */
.expiry-common
  .m-list-step.m-list-step--flow
  .m-layout-media__content
  .m-list
  .m-list__item {
  padding-left: 14px;
}

.expiry-common
  .m-list-step.m-list-step--flow
  .m-layout-media__content
  .m-link:first-of-type {
  margin-top: 26px;
}

/* 継続後の保険料、ここが気になる！のボタンレイアウト */
.expiry-common .m-layout--expiry--after-continuing .m-button {
  color: var(--COLOR_FOREGROUND_DARK);
}

.expiry-common .m-layout--expiry--after-continuing .m-button .m-media {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .expiry-common
    .m-layout--expiry--after-continuing
    .m-button
    .m-media
    .m-media__wrap {
    width: 100px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-common
    .m-layout--expiry--after-continuing
    .m-button
    .m-media
    .m-media__wrap {
    width: 80px;
  }
}

/* 火災保険の満期を迎える皆さまへボタン */
.expiry-common .m-link.m-link--back {
  color: var(--COLOR_FOREGROUND_LIGHT);
}

.expiry-common .m-link.m-link--back:visited {
  color: #920da2;
}

.expiry-common .m-link.m-link--back::before {
  background-color: var(--COLOR_FOREGROUND_LIGHT);
}

.expiry-common .m-link.m-link--back::after {
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 1px, 1px 1px, 1px 100%);
}

/* 関連資料 */
@media screen and (min-width: 768px) {
  .expiry-common .m-kasai-heading-type2 {
    margin-top: 96px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-common .m-kasai-heading-type2 {
    margin-top: 70px;
  }
}

/************* /expiry/index.html *************/

/* お手元に届いた書類はどちらですか？の緑枠 */
@media screen and (min-width: 768px) {
  .expiry-index .m-layout.m-layout--expiry-pattern .m-box .m-box__head {
    padding: 22px 31px 15px;
    margin-top: 6px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-index .m-layout.m-layout--expiry-pattern .m-box .m-box__head {
    padding: 23px 11px 11px;
  }
}

/* お手元に届いた書類はどちらですか？の枠の上の吹き出し */
.expiry-index
  .m-layout.m-layout--expiry-pattern
  .m-box
  .m-box__head
  .m-box__bubble {
  font-size: 14px;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .expiry-index
    .m-layout.m-layout--expiry-pattern
    .m-box
    .m-box__head
    .m-box__bubble {
    bottom: calc(100% - 8px);
  }
}

@media screen and (max-width: 767px) {
  .expiry-index
    .m-layout.m-layout--expiry-pattern
    .m-box
    .m-box__head
    .m-box__bubble {
    bottom: calc(100% - 12px);
  }
}

/* お手元に届いた書類はどちらですか？の枠のボディ */
@media screen and (min-width: 768px) {
  .expiry-index .m-layout.m-layout--expiry-pattern .m-box .m-box__body {
    flex: 1 1 0;
    padding: 24px 30px 30px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-index .m-layout.m-layout--expiry-pattern .m-box .m-box__body {
    padding: 16px 12px 22px;
  }
}

/* お手元に届いた書類はどちらですか？の画像 */
@media screen and (max-width: 767px) {
  .expiry-index
    .m-layout.m-layout--expiry-pattern
    .m-media__item.m-media__item--pattern01,
  .expiry-index
    .m-layout.m-layout--expiry-pattern
    .m-media__item.m-media__item--pattern02 {
    width: 312px;
  }
}

/* 三井住友海上が選ばれる理由をもっと見るボタン */
.expiry-index .m-button-large.m-button-large--reason {
  padding: 17px 58px 15px 38px;
}

.expiry-index .m-button-large.m-button-large--reason .m-button-large__subText {
  color: var(--COLOR_BRAND_SECONDARY);
}

@media screen and (min-width: 768px) {
  .expiry-index
    .m-button-large.m-button-large--reason
    .m-button-large__subText {
    margin-bottom: -4px;
    font-size: 13px;
  }
}

/* 保険料を見積りしてみる吹き出し */
.expiry-index .m-badge.m-badge--estimation {
  font-size: 14px;
  line-height: 1.5;
}

/* 保険料を見積りしてみるボタン */
.expiry-index .m-button.m-button--estimation {
  padding: 16px 26px 17px 6px;
  font-size: 18px;
  color: var(--COLOR_FOREGROUND_DARK);
  background: var(--COLOR_ROLE_ACCENT_2);
  box-shadow: 0 4px 4px 0 rgb(0, 0, 0, 25%);
  min-width: 344px;
}

.expiry-index .m-button.m-button--estimation::after {
  width: 22px;
  height: 22px;
  background-image: url("/personal/kasai/expiry/img/expiry_icon-common-button-right.svg");
}

.expiry-index .m-button--estimation:hover,
.expiry-index .m-button--estimation:focus {
  box-shadow: none;
}

/* 詳細はこちらボタン */
.expiry-index .m-button-large.m-button-large--detail {
  padding: 16px 58px 16px 38px;
}

/************* /expiry/01.html *************/
/* 書類のイメージの画像 */
@media screen and (max-width: 767px) {
  .expiry-01 .m-media.m-media--image {
    width: 344px;
  }
}

/* 書類のイメージの注釈 */
@media screen and (min-width: 768px) {
  .expiry-01 .m-text.m-text--inclusions,
  .expiry-01 .m-text-indent.m-text-indent--inclusions {
    max-width: 382px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01 .m-text.m-text--inclusions,
  .expiry-01 .m-text-indent.m-text-indent--inclusions {
    width: 344px;
  }
}

.expiry-01 .m-text.m-text--inclusions .m-text__item,
.expiry-01 .m-text-indent.m-text-indent--inclusions {
  font-size: 14px;
}

/* ご注意くださいエリア */
@media screen and (min-width: 768px) {
  .expiry-01 .m-box:has(h2.m-box__head) {
    margin-top: 48px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01 .m-box:has(h2.m-box__head) {
    margin-top: 32px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01 .m-box .m-box__head {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

@media screen and (min-width: 768px) {
  .expiry-01 .m-box .m-box__body {
    padding: 24px 31px 31px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01 .m-box .m-box__body {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}

/************* /expiry/01/howto.html *************/
/* 各項目の見方タイトル */

/* 緑色ボックス */
.expiry-01-howto .m-layout__item .m-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ボックス内の線 */
.expiry-01-howto .m-card .m-card__item::after {
  bottom: -28px;
}

/* 各項目の見方下のヘッド */
.expiry-01-howto .m-box .m-box__head,
.expiry-01-howto .m-box .m-box__body {
  border-color: var(--COLOR_BRAND_PRIMARY);
}

@media screen and (min-width: 768px) {
  .expiry-01-howto .m-box .m-box__head {
    padding: 24px 30px 16px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01-howto .m-box .m-box__head {
    padding: 24px 12px 21px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

/* 各項目の見方下のボックスタイトル */
@media screen and (min-width: 768px) {
  .expiry-01-howto .m-box .m-box__title {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01-howto .m-box .m-box__title {
    font-size: 16px;
  }
}

.expiry-01-howto .m-box .m-box__title .m-text-indent__mark{
  margin-right: 0.33em;
}

/* 各項目の見方下のヘッド */
@media screen and (min-width: 768px) {
  .expiry-01-howto .m-box .m-box__body {
    padding: 24px 30px 32px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01-howto .m-box .m-box__body {
    padding: 14px 12px 24px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}

/* 各項目の見方下のバッジ */
.expiry-01-howto .m-layout__item .m-box__head .m-badge {
  min-width: 53px;
}

/* 各項目の見方P1下の注釈 */
.expiry-01-howto .m-note.n-note--P1 .m-note__text {
  font-size: 13px;
}

/* こ注意くださいタイトル */
.expiry-01-howto
  .m-heading-type3.m-heading-type3--lightbulb
  .m-heading-type3__title {
  font-size: 2rem;
}

.expiry-01-howto
  .m-heading-type3.m-heading-type3--lightbulb
  .m-heading-type3__title
  > u {
  color: var(--COLOR_FOREGROUND_DARK);
}

.expiry-01-howto
  .m-heading-type3.m-heading-type3--lightbulb
  .m-heading-type3__title::before {
  display: inline-block;
  flex-shrink: 0;
  width: 25px;
  height: 40px;
  content: "";
  background-image: url("/shared/v2/images/icon/icon-lightbulb.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* レイアウト側（画像対） */
@media screen and (min-width: 768px) {
  .expiry-01-howto .m-layout__item.m-layout__item--information-dataP1 {
    flex: 1 1 0;
  }
}

/* P1下の緑ボックス */
.expiry-01-howto
  .m-layout__item.m-layout__item--information-dataP1
  .m-box:has(h2.m-box__head) {
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .expiry-01-howto
    .m-layout__item.m-layout__item--information-dataP1
    .m-box:has(h2.m-box__head)
    + .m-box {
    margin-top: 32px;
  }
}

/* P2〜P3下の緑線 */
.expiry-01-howto
  .m-layout__item
  .m-box__body
  .m-text
  .m-text__item
  > .m-text__item--green-under {
  font-weight: bold;
  color: var(--COLOR_BRAND_PRIMARY);
  text-decoration-line: underline;
  text-decoration-thickness: 8px;
  text-decoration-style: solid;
  text-decoration-color: var(--COLOR_ROLE_ACCENT_2);
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

/* P10下枠 */
@media screen and (max-width: 767px) {
  .expiry-01-howto
    .m-layout__item.m-layout__item--information-dataP10
    .m-box
    .m-box__body {
    padding: 26px 12px 24px;
    border-radius: 8px;
  }
}

/* 各画像サイズ */
@media screen and (min-width: 768px) {
  .expiry-01-howto .m-layout__item .m-media.m-media--P1 .m-media__wrap {
    width: 252px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01-howto .m-layout__item .m-media.m-media--P1 .m-media__wrap {
    width: 312px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01-howto .m-layout__item .m-media.m-media--P1 .m-media__wrap > img {
    width: 100%;
  }
}

.expiry-01-howto .m-layout__item .m-media.m-media--P1-1 .m-media__wrap,
.expiry-01-howto .m-layout__item .m-media.m-media--P10 .m-media__wrap {
  width: 312px;
}

@media screen and (min-width: 768px) {
  .expiry-01-howto .m-layout__item.m-layout__item--information-text-area-P10,
  .expiry-01-howto .m-layout__item.m-layout__item--information-dataP10 {
    flex: 1;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01-howto
    .m-table--scroll__hintContainer
    .m-media.m-media--P2-3
    .m-media__wrap,
  .expiry-01-howto
    .m-table--scroll__hintContainer
    .m-media.m-media--P4-5
    .m-media__wrap {
    width: 588px;
  }

  .expiry-01-howto
    .m-table--scroll__hintContainer
    .m-media.m-media--P2-3
    .m-media__wrap
    > img,
  .expiry-01-howto
    .m-table--scroll__hintContainer
    .m-media.m-media--P4-5
    .m-media__wrap
    > img {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01-howto
    .m-table--scroll__hintContainer
    .m-media.m-media--P6-9
    .m-media__wrap {
    width: 1192px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-01-howto
    .m-table--scroll__hintContainer
    .m-media.m-media--P6-9
    .m-media__wrap
    > img {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .expiry-01-howto .m-layout__item .m-media.m-media--P10 .m-media__wrap {
    width: 100%;
    max-width: 312px;
  }
}

/* SP画像スクロール */

.expiry-01-howto .m-table--scroll__hintContainer .m-media {
  max-width: calc(100vw - 12px * 2);
}

/************* /expiry/02.html *************/

/* サブタイトル */
@media screen and (max-width: 767px) {
  .expiry-common .m-heading-type1__subTitle {
    font-size: 20px;
  }
}

/* 書類2種類のwrap */
@media screen and (min-width: 768px) {
  .m-layout--about-image-wrap {
    max-width: 720px;
  }
}

@media screen and (max-width: 767px) {
  .m-layout--about-image-wrap .m-media--image,
  .m-layout--about-image-wrap .m-media--image ~ .m-text,
  .m-layout--about-image-wrap .m-media--image ~ .m-text-indent,
  .m-layout--about-image-wrap .m-media--image ~ .m-note {
    max-width: 313px;
  }
}

/* 封筒の場合の画像レイアウト */
@media screen and (min-width: 768px) {
  .expiry-02 .m-media--image.m-media--image--material01 .m-media__wrap {
    aspect-ratio: 1 / 1;
  }
}

/* 書類のイメージ下の注釈 */
@media screen and (min-width: 768px) {
  .expiry-02 .m-text.m-text--inclusions .m-text__item,
  .expiry-02 .m-text-indent.m-text-indent--inclusions {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-02 .m-text.m-text--inclusions .m-text__item,
  .expiry-02 .m-text-indent.m-text-indent--inclusions {
    font-size: 13px;
  }
}

@media screen and (min-width: 768px) {
  .expiry-02
    .m-text-indent.m-text-indent--inclusions
    + .m-note
    .m-note__item
    .m-note__mark,
  .expiry-02
    .m-text-indent.m-text-indent--inclusions
    + .m-note
    .m-note__item
    .m-note__text {
    font-size: 13px;
  }
}

/* ご注意くださいのマージン */
.expiry-02 .m-box:has(h2.m-box__head) {
  margin-top: 56px;
}

/* ご注意くださいのhead */
@media screen and (min-width: 768px) {
  .expiry-02 .m-box .m-box__head {
    padding-top: 16px;
  }
}

/* ご注意くださいのbody */
@media screen and (min-width: 768px) {
  .expiry-02 .m-box .m-box__head + .m-box__body {
    padding: 24px 30px 30px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-02 .m-box .m-box__head + .m-box__body {
    padding: 17px 12px 22px;
  }
}

/* お手続こ流れのリンク */

@media screen and (min-width: 768px) {
  .expiry-02 .m-box-point.m-box-point--flow .m-button-anc {
    padding: 14px 40px 16px 11px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-02 .m-box-point.m-box-point--flow .m-button-anc {
    padding: 18px 48px 15px 12px;
  }
}

/* ステップリスト（大枠） */
@media screen and (max-width: 767px) {
  .expiry-02
    .m-list-step.m-list-step--flow
    .m-list-step__item
    + .m-list-step__item {
    margin-top: 40px;
  }
}

/************* /expiry/03.html *************/
/* 「各損害保険会社で保険料が値上げ傾向！火災保険料値上がりの3つの理由」見出し */
.expiry-03 .m-heading-type2__heading.m-heading-type2__heading--no-gap {
  gap: 0;
}

.expiry-03 .m-heading-type2__subTitle {
  color: var(--COLOR_BRAND_SECONDARY);
}

/*.キャプション内ぶら下がりインデントテキスト */
.expiry-03 .m-media__caption .m-text-indent {
  color: var(--COLOR_FOREGROUND_LIGHT);
}

/* 火災保険料値上がりの3つの理由のボックス間 */
@media screen and (min-width: 768px) {
  .expiry-03 .m-box:has(> .m-box__head .m-box__bubble) {
    margin-top: 50px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03 .m-box:has(> .m-box__head .m-box__bubble) {
    margin-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  .expiry-03 .m-box:has(> .m-box__head .m-box__bubble) + .m-box {
    margin-top: 46px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03 .m-box:has(> .m-box__head .m-box__bubble) + .m-box {
    margin-top: 54px;
  }
}

/* 値上がり3つの理由の緑枠 */
@media screen and (min-width: 768px) {
  .expiry-03 .m-box.m-box--reason .m-box__head {
    padding: 23px 31px 16px;
  }
}

/* 値上がり3つの理由の緑枠（吹き出し） */
.expiry-03 .m-box.m-box--reason .m-box__bubble {
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .expiry-03 .m-box.m-box--reason .m-box__bubble {
    bottom: calc(100% - 8px);
    font-size: 14px;
  }
}

/* 値上がり3つの理由の緑枠（タイトル） */
@media screen and (max-width: 767px) {
  .expiry-03 .m-box.m-box--reason .m-box__title {
    font-size: 20px;
  }
}

/* 値上がり3つの理由の緑枠（吹き出し）ボディ */
@media screen and (min-width: 768px) {
  .expiry-03 .m-box.m-box--reason .m-box__head + .m-box__body {
    padding: 24px 29px 32px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03 .m-box.m-box--reason .m-box__head + .m-box__body {
    padding: 14px 12px 26px;
  }
}

/* 理由02注釈 */
.expiry-03 .m-media__caption.m-media__caption--reason02 {
  color: var(--COLOR_FOREGROUND_LIGHT);
}

/* 理由02の※注釈と（注）注釈の要素を別配置 */
.expiry-03 .m-box.m-box--reason .m-note + .m-note {
  margin-top: 0;
}

/*「おすまいの地域の水災等地（注）を確認する別ウィンドウで開く」リンクの上付き文字*/
.expiry-03 .m-link.m-link-with-annotation sup {
  top: 0;
  margin-left: 0;
  margin-right: 0;
  vertical-align: super;
}

/* 豪雨等による水災リスクは以下も含まれますエリア（大枠） */
.expiry-03 .m-card.m-card--disaster-risk {
  margin-right: 2px;
  margin-left: 2px;
}

@media screen and (min-width: 768px) {
  .expiry-03 .m-card.m-card--disaster-risk .m-card__content {
    margin-top: 0;
  }
}

/* 豪雨等による水災リスクは以下も含まれますエリア（バッジ） */
.expiry-03 .m-card.m-card--disaster-risk .m-badge {
  font-size: 14px;
  line-height: 1.5;
  color: var(--COLOR_BASE_LIGHT);
  background-color: var(--COLOR_BRAND_SECONDARY);
}

/* 豪雨等による水災リスクは以下も含まれますエリア（タイトル） */
.expiry-03 .m-card.m-card--disaster-risk .m-card__title {
  font-size: 16px;
}

/* 豪雨等による水災リスクは以下も含まれますエリア（画像） */
@media screen and (max-width: 767px) {
  .expiry-03 .m-card.m-card--disaster-risk .m-card__media .m-card__mediaItem {
    width: 136px;
  }
}

/* 豪雨等による水災リスクは以下も含まれますエリア（例） */
@media screen and (min-width: 768px) {
  .expiry-03
    .m-card.m-card--disaster-risk
    .m-card__media
    + .m-text
    .m-text__item {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03
    .m-card.m-card--disaster-risk
    .m-card__media
    + .m-text
    .m-text__item {
    font-size: 13px;
  }
}

/* 火災保険料がどのように決まるか知る（テーブル） */
@media screen and (max-width: 767px) {
  .expiry-03
    .m-table--scroll__hintContainer
    .m-table.m-table--know
    .m-table__table {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03 .m-table--scroll__hintContainer .m-table.m-table--know {
    max-width: calc(100vw - 12px * 2);
  }
}

@media screen and (min-width: 768px) {
  .expiry-03
    .m-table--scroll__hintContainer
    .m-table.m-table--know
    .m-table__table {
    min-width: 600px;
    max-width: 600px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03
    .m-table--scroll__hintContainer
    .m-table.m-table--know
    .m-table__table {
    min-width: 430px;
    max-width: 430px;
  }
}

/* 火災保険料がどのように決まるか知るのボックス */
@media screen and (min-width: 768px) {
  .expiry-03 .m-layout.m-layout--know .m-box .m-box__head {
    padding: 22px 31px 15px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03 .m-layout.m-layout--know .m-box .m-box__head {
    padding: 22px 11px 15px;
  }
}

@media screen and (min-width: 768px) {
  .expiry-03 .m-layout.m-layout--know .m-box .m-box__body {
    padding: 23px 28px 31px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03 .m-layout.m-layout--know .m-box .m-box__body {
    padding: 14px 12px 22px;
  }
}

/* 適切な保険金額で、火災保険を契約する */
@media screen and (max-width: 767px) {
  .expiry-03 .m-box.m-box--reason02-1:has(> .m-box__head .m-box__bubble) {
    margin-top: 46px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03
    .m-box.m-box--reason02-1:has(> .m-box__head .m-box__bubble)
    + .m-box--reason {
    margin-top: 38px;
  }
}

/* 注のアコーディオン内 */
.expiry-03
  .m-widget-disclosure--note-2
  > .m-widget-disclosure__body
  .m-widget-disclosure__bodyContainer {
  margin-top: 14px;
}

@media screen and (min-width: 768px) {
  .expiry-03
    .m-widget-disclosure--note-2
    > .m-widget-disclosure__body
    .m-widget-disclosure__bodyContainer
    .m-note__text
    > span {
    line-height: 1.8;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03
    .m-widget-disclosure--note-2
    > .m-widget-disclosure__body
    .m-widget-disclosure__bodyContainer
    .m-note__text
    > span {
    line-height: 2;
  }
}

.expiry-03
  .m-box.m-box--reason02-2
  .m-widget-disclosure__bodyContainer
  .m-note__text
  > span
  + span {
  position: relative;
}

.expiry-03
  .m-box.m-box--reason02-2
  .m-widget-disclosure__bodyContainer
  .m-note__text
  > span
  + span::before {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 240px;
  height: 2px;
  content: "";
  background-color: var(--COLOR_BASE_DARK);
  transform: translateX(-50%);
}

/* 灰色スライダー（タイトル） */
@media screen and (max-width: 767px) {
  .expiry-03
    .m-widget-disclosure.m-widget-disclosure--color2
    .m-widget-disclosure__head
    .m-widget-disclosure__title {
    font-size: 16px;
  }
}

/* 十分な補償をお受けいただくために下のボックス */
.expiry-03 .compensation-box {
  background-color: var(--COLOR_BACKGROUND_2);
  border: 1px solid var(--COLOR_BACKGROUND_3);
  border-radius: 4px;
}

@media screen and (min-width: 768px) {
  .expiry-03 .compensation-box {
    width: 348px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-03 .compensation-box {
    width: 314px;
  }
}

/* 下部追従CTAボタン */
.expiry-03 ._box-fixed ._btn-01.-em {
  text-decoration: none;
}

/************* /expiry/03.html（モーダル） *************/

.expiry03-estimate-modal ._modal_content ._estimate_inner {
  box-sizing: content-box;
}

.expiry03-estimate-modal ._modal_content ._hdg_3-01 {
  margin-bottom: 17px;
  font-size: 2rem;
}

.expiry03-estimate-modal ._modal_content .btn_close > button img {
  vertical-align: bottom;
}

.expiry03-estimate-modal ._modal_content ._btn-01 {
  line-height: 1.2;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .expiry03-estimate-modal ._modal_content ._btn-01 {
    line-height: 0.8;
  }
}

.expiry03-estimate-modal ._modal_content ._estimate_note {
  padding-top: 5px;
}

.expiry03-estimate-modal ._modal_content ._btn_lyt-01 ._btn-01 {
  font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
  .expiry03-estimate-modal ._modal_content ._btn_lyt-01 ._btn-01 {
    line-height: 1.2;
  }
}

/************* /expiry/web_service.html *************/

.expiry-web-service .m-box-emphasis {
  border-radius: 6px;
}

/* Ｗebでのご継続手続きの3つのおすすめポイント */
.expiry-web-service .m-layout--3points .m-box {
  position: relative;
}

.expiry-web-service .m-layout--3points .m-box .m-box__body {
  border-color: var(--COLOR_BRAND_PRIMARY);
  border-radius: 4px;
}

@media screen and (min-width: 768px) {
  .expiry-web-service .m-layout--3points .m-box .m-box__body {
    padding: 21px 12px 22px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-layout--3points .m-box .m-box__body {
    padding: 23px 11px;
  }
}

/* Ｗebでのご継続手続きの3つのおすすめポイント（バッジ） */
.expiry-web-service .m-layout--3points .m-box .m-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  font-size: 14px;
  color: var(--COLOR_BASE_LIGHT);
  background-color: var(--COLOR_BRAND_PRIMARY);
  transform: translateX(-50%);
}

/* Ｗebでのご継続手続きの3つのおすすめポイント（タイトル） */

.expiry-web-service .m-layout--3points .m-box .m-box__title {
  font-size: 17px;
  color: var(--COLOR_BRAND_SECONDARY);
}

/* お手元に届いた書類をお選びくださいテキスト */
@media screen and (min-width: 768px) {
  .expiry-web-service .m-text.m-text--procedural-flow .m-text__item {
    font-size: 22px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-text.m-text--procedural-flow .m-text__item {
    font-size: 17px;
  }
}

/* タブボタン（大枠） */
@media screen and (min-width: 768px) {
  .expiry-web-service .panel-button-area {
    max-width: 968px;
  }
}

/* タブボタン */
.expiry-web-service .panel-button-area .m-button-large {
  min-width: auto;
  border: 1px solid var(--COLOR_OUTLINE);
}

@media screen and (min-width: 768px) {
  .expiry-web-service .panel-button-area .m-button-large {
    padding: 23px;
    font-size: 18px;
    border-radius: 6px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .panel-button-area .m-button-large {
    padding: 21px 16px 18px;
  }
}

.expiry-web-service .panel-button-area .m-button-large[aria-selected="true"] {
  background-color: var(--COLOR_BACKGROUND_2);
}

@media screen and (min-width: 768px) {
  .expiry-web-service .panel-button-area .m-button-large[aria-selected="true"] {
    padding: 19px;
    border: 4px solid var(--COLOR_BRAND_PRIMARY);
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .panel-button-area .m-button-large[aria-selected="true"] {
    border: 2px solid var(--COLOR_BRAND_PRIMARY);
  }
}

.expiry-web-service .panel-button-area .m-button-large::after {
  content: none;
}

/* タブ下の吹き出しレイアウト */
.expiry-web-service .m-box.m-box-bubble {
  position: relative;
}

@media screen and (min-width: 768px) {
  .expiry-web-service .m-box.m-box-bubble {
    max-width: 970px;
  }
}

.expiry-web-service .m-box.m-box-bubble::before {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
  border-top: 0;
  border-right: 26px solid transparent;
  border-bottom: 32px solid var(--COLOR_BACKGROUND_2);
  border-left: 26px solid transparent;
}

/* 満期のご案内 */
@media screen and (min-width: 768px) {
  .expiry-web-service .m-box.m-box-bubble.m-box-bubble--expiration::before {
    top: -32px;
    left: 204px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-box.m-box-bubble.m-box-bubble--expiration::before {
    top: -22px;
    left: 60px;
  }
}

/* 自動継続のご案内 */
@media screen and (min-width: 768px) {
  .expiry-web-service
    .m-box.m-box-bubble.m-box-bubble--automatic-continuation::before {
    top: -32px;
    right: 204px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service
    .m-box.m-box-bubble.m-box-bubble--automatic-continuation::before {
    top: -22px;
    right: 60px;
  }
}

/* 吹き出し部分 */
.expiry-web-service .m-box.m-box-bubble .m-box__body {
  background-color: var(--COLOR_BACKGROUND_2);
  border: none;
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-box.m-box-bubble .m-box__body {
    border-radius: 6px;
  }
}

/* 吹き出し部分のタイトル */
.expiry-web-service .m-box.m-box-bubble .m-text.m-text-title .m-text__item {
  color: var(--COLOR_BRAND_SECONDARY);
}

@media screen and (min-width: 768px) {
  .expiry-web-service .m-box.m-box-bubble .m-text.m-text-title .m-text__item {
    font-size: 22px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-box.m-box-bubble .m-text.m-text-title .m-text__item {
    font-size: 17px;
  }
}

/* 吹き出し部分のテキスト */
.expiry-web-service
  .m-box.m-box-bubble
  .m-box__body
  .m-text-title
  + .m-text
  .m-text__item {
  font-size: 14px;
}

/* ステップリスト（大枠） */
@media screen and (min-width: 768px) {
  .expiry-web-service
    .m-list-step.m-list-step--flow02
    .m-list-step__item
    + .m-list-step__item {
    margin-top: 24px;
  }
}

/* ステップリストボックス */
@media screen and (max-width: 767px) {
  .expiry-web-service
    .m-list-step.m-list-step--flow
    .m-list-step__item
    .m-box__body {
    margin-right: 5px;
  }
}

/* タブを押す前にある注釈 */
@media screen and (min-width: 768px) {
  .expiry-web-service .m-note.m-note--tab-default {
    max-width: 968px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-note.m-note--tab-default .m-note__text {
    font-size: 14px;
  }
}

/************* /expiry/web_service.html（ポップアップ） *************/

@media screen and (min-width: 768px) {
  .expiry-web-service .m-kasai-widget-dialog--widthNarrow {
    max-width: 836px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-kasai-widget-dialog--widthNarrow {
    max-width: 364px;
  }
}

.expiry-web-service .m-kasai-widget-dialog__wrap {
  position: relative;
  min-height: 180px;
  max-height: 100%;
  padding-top: 55px;
  overflow-y: auto;
}

.expiry-web-service .m-kasai-widget-dialog__inner {
  overflow-y: visible;
  border: none;
  border-radius: 0;
}

@media screen and (min-width: 768px) {
  .expiry-web-service .m-kasai-widget-dialog__inner {
    padding: 34px 38px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-kasai-widget-dialog__inner {
    padding: 20px 16px;
  }
}

/*.破線仕切り線 */
.expiry-web-service .m-kasai-widget-dialog--widthNarrow .m-layout .m-layout__item:nth-child(2) {
  position: relative;
}

.expiry-web-service .m-kasai-widget-dialog--widthNarrow .m-layout .m-layout__item:nth-child(2)::before {
  content: "";
  position: absolute;
  mask-size: contain;
  --size: 3px;
  background-color: var(--COLOR_OUTLINE);
}

@media screen and (min-width: 768px) {
  .expiry-web-service .m-kasai-widget-dialog--widthNarrow .m-layout .m-layout__item:nth-child(2)::before {
    mask-image: url(data:image/svg+xml;charset=utf-8;base64,IDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMyA3IiBmaWxsPSIjMDA5Nzg2Ij48cGF0aCBmaWxsPSJ0cmFuc3BhcmVudCIgZD0iTTAgMGgzdjdoLTN6Ii8+PGNpcmNsZSBjeD0iMS41IiBjeT0iMS41IiByPSIxLjUiLz48L3N2Zz4=);
    mask-repeat: repeat-y;
    top: 0;
    left: -32px;
    width: var(--size);
    height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-kasai-widget-dialog--widthNarrow .m-layout .m-layout__item:nth-child(2)::before {
    mask-image: url(data:image/svg+xml;charset=utf-8;base64,IDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNyAzIiBmaWxsPSIjMDA5Nzg2Ij48cGF0aCBmaWxsPSJ0cmFuc3BhcmVudCIgZD0iTTAgMGg3djNoLTd6Ii8+PGNpcmNsZSBjeD0iMS41IiBjeT0iMS41IiByPSIxLjUiLz48L3N2Zz4=);
    mask-repeat: repeat-x;
    top: -24px;
    left: 0;
    width: 100%;
    height: var(--size);
  }
}

/* 閉じるボタン（丸） */
.expiry-web-service .m-kasai-widget-dialog__closeButton {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  padding: 13px;
  border-radius: 4px;
}

@media screen and (min-width: 768px) {
  .expiry-web-service .m-kasai-widget-dialog__closeButton {
    background-color: var(--COLOR_BRAND_PRIMARY);
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-kasai-widget-dialog__closeButton {
    background-color: var(--COLOR_BASE_LIGHT);
    border: 1px solid var(--COLOR_BRAND_PRIMARY);
  }
}

@media screen and (min-width: 768px) {
  .expiry-web-service .m-kasai-widget-dialog__closeButton::before,
  .expiry-web-service .m-kasai-widget-dialog__closeButton::after {
    background-color: var(--COLOR_BASE_LIGHT);
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-kasai-widget-dialog__closeButton::before,
  .expiry-web-service .m-kasai-widget-dialog__closeButton::after {
    background-color: var(--COLOR_BRAND_PRIMARY);
  }
}

/* 閉じるボタン（四角） */
.expiry-web-service
  .m-kasai-widget-dialog.m-kasai-widget-dialog--help-popup
  .m-button-large {
  border-radius: 4px;
}

@media screen and (min-width: 768px) {
  .expiry-web-service
    .m-kasai-widget-dialog.m-kasai-widget-dialog--help-popup
    .m-button-large {
    min-width: 350px;
    padding: 15px 22px 15px 30px;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service
    .m-kasai-widget-dialog.m-kasai-widget-dialog--help-popup
    .m-button-large {
    min-width: 312px;
    padding: 14px 22px 14px 30px;
  }
}

.expiry-web-service
  .m-kasai-widget-dialog.m-kasai-widget-dialog--help-popup
  .m-button-large::after {
  display: none;
}

/* h3見出し */
@media screen and (min-width: 768px) {
  .expiry-web-service .m-kasai-widget-dialog--widthNarrow .m-layout .m-heading-type3__title {
    font-size: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .expiry-web-service .m-kasai-widget-dialog--widthNarrow .m-layout .m-heading-type3__title {
    font-size: 1.6rem;
  }
}