@charset "UTF-8";
/* 
・ここに記載されているスタイルは「life」「life/●●」で共通使用。
・「/app-files/css/custom/life_index.css」などページ固有cssと区別するため先頭に「.diff__」が来るように記載。
 */
/* ------------------------------
▼ページ内で共通使用
------------------------------*/
.diff__cmn_nowrap {
  white-space: nowrap;
}
/* .diff__cmn_display_block {
  display: block;
} */

/* ------------------------------
▼死亡保険・生命共済の選び方　diff__select_section
------------------------------*/
.diff__select_section,
.diff__select_section *,
.diff__select_section *::before,
.diff__select_section *::after {
  box-sizing: border-box;
}
/* --------- */

.Main .life_index_heading3--diff__select + * {
  margin-top: 2.6em;
}

.diff__select__columns {
  display: flex;
}

.diff__select__columns .diff__select_column {
  width: 50%;
  min-width: 0;
  }
/* --------- */
.diff__select_cntr_expl {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 60px;
}

.diff__select__columns .diff__select_column:nth-child(odd) .diff__select_cntr_expl {
  padding: 0 20px 0 0;
  border-right: 1px solid #ddd;
}

.diff__select__columns .diff__select_column:nth-child(even) .diff__select_cntr_expl {
  padding: 0 0 0 20px;
}

.diff__select_cntr_expl::before,
.diff__select_cntr_expl::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  border-right: 4px solid #8d97b0;
  border-bottom: 4px solid #8d97b0;
  transform: translateX(-50%) rotate(45deg);
}

.diff__select__columns .diff__select_column:nth-child(odd) .diff__select_cntr_expl::before,
.diff__select__columns .diff__select_column:nth-child(odd) .diff__select_cntr_expl::after {
  left: calc(50% - 10px);
  /* 左カラム：padding-rightの半分だけ左へ */
}

.diff__select__columns .diff__select_column:nth-child(even) .diff__select_cntr_expl::before,
.diff__select__columns .diff__select_column:nth-child(even) .diff__select_cntr_expl::after {
  left: calc(50% + 10px);
  /* 右カラム：padding-leftの半分だけ右へ */
}

.diff__select_cntr_expl::before {
  bottom: -37px;
}

.diff__select_cntr_expl::after {
  bottom: -27px;
}

.diff__select_cntr_expl .diff___inner {
  margin: 0 30px;
}

.diff__select_cntr_expl .diff___balloon {
  position: relative;
  display: flex;
  align-items: center; 
  justify-content: center;
  width: 100%;
  margin: 0 auto 11px;
  padding: 14px 20px;
  background: #e5eeff;
  border-radius: 9999px;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 吹き出しが2行で左寄せにしたいときに必要
.diff__select_cntr_expl .diff___balloon span {
width: 100%;
text-align: left;
} */

.diff__select_cntr_expl .diff___balloon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 0;
  margin-left: -10px;
  border-style: solid;
  border-width: 10px 10px 0;
  border-color: #e5eeff transparent transparent;
}

.diff__select_cntr_expl .diff___mark {
  margin: 2.8rem 0 0;
}

.diff__select_cntr_expl .diff___mark_text {
  position: relative;
  margin: 1rem 0 0;
  padding-left: 40px;
  font-size: 2.2rem;
}

.diff__select_cntr_expl .diff___mark_text:first-of-type {
  margin: 0;
}

.diff__select_cntr_expl .diff___mark_text::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 26px;
  height: 26px;
  border: 2px solid #8595b2;
  border-radius: 4px;
}

.diff__select_cntr_expl .diff___mark_text::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px; 
  width: 24px;
  height: 24px;
  background: url("https://www.i-sedai.com/app-files/img/cmn_ico015_check_01_blue.svg")
    center / contain no-repeat;
    /* 白縁 */
  filter:
    drop-shadow(3px 0 0 #fff)
    drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 -3px 0 #fff);
}

/* --------- */
.diff__select_cntr_type {
  border: 1px solid #ddd;
}

.diff__select__columns .diff__select_column:nth-child(odd) .diff__select_cntr_type {
  margin: 0 40px 0 0 ;
}

.diff__select__columns .diff__select_column:nth-child(even) .diff__select_cntr_type {
  margin: 0 0 0 40px;
}

.diff__select_cntr_type .diff__select_cntr_type_heading {
  margin: 0;
  padding: 14px;
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  background: #e5eeff;
}

.diff__select_cntr_type .diff__select_cntr_type_heading span {
  padding-right: .5rem;
  font-size: 3rem;
  color:#295fcc;
}

.diff__select_cntr_type .diff___body {
  margin: 1.4rem 3rem;
}

.diff__select_cntr_type .diff___products {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 48px;
}

.diff__select_cntr_type .diff___products_group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1.4rem;
  text-align: center;
}

.diff__select_cntr_type .diff___products_deco {
  position: absolute;
  top: 6px;
  left: 50%;
  display: inline-block;
  transform: translateX(-50%);
  padding: 0 1em;
  color: #d1002a;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.diff__select_cntr_type .diff___products_deco::before,
.diff__select_cntr_type .diff___products_deco::after {
  content: "";
  position: absolute;
  top: 45%;
  width: 2px;
  height: 1em;
  background: currentColor;
}

.diff__select_cntr_type .diff___products_deco::before {
  left: 0;
  transform: translateY(-50%) rotate(-30deg);
}

.diff__select_cntr_type .diff___products_deco::after {
  right: 0;
  transform: translateY(-50%) rotate(30deg);
}

.diff__select_cntr_type .diff___products_name {
  /* 商品名全体 */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  margin: 0;
  font-size: 1.8rem;
  line-height: 1;
  text-align: center;
}

.diff__select_cntr_type .diff___products_name_badge {
  /* 健康な方向け */
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 7px;
  background: #295fcc;
  font-size: 1.5rem;
  color: #fff;
  white-space: nowrap;
}

.diff__select_cntr_type .diff___products_name_text {
  /* 商品名の文字部分 */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.diff__select_cntr_type .diff___products_name_text_word {
  /* それぞれの単語内では改行しない */
  flex: 0 0 auto;
  white-space: nowrap;
}

.diff__select_cntr_type .diff___products_logo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: 0 30px;
}

.diff__select_cntr_type .diff___products_logo img {
  display: block;
  width: auto;
  max-height: 53px;
}

.diff__select_cntr_type .diff___premium {
  margin-top: 1.8rem;
}

.diff__select_cntr_type .diff___premium .diff___inner {
  display: flex;
  gap: 1.8rem;
}

.diff__select_cntr_type .diff___premium_list {
  width: calc((100% - 1.8rem) / 2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.diff__select_cntr_type .diff___premium_list li:first-child {
  padding: 1rem;
  color: #fff;
  font-size: 2.2rem;
}
.diff__select_cntr_type .diff___premium_list li:nth-child(n + 2) {
  padding: 1.4rem 1rem;
  font-size: 1.8rem;
}
.diff__select_cntr_type .diff___premium_list li:nth-child(n + 3) {
  border-top: 1px solid #ddd;
}

.diff__select_cntr_type .diff___premium_list--pink li:first-child {
  background: #c94477;
}

.diff__select_cntr_type .diff___premium_list--pink li:nth-child(n + 2) {
  background: #fff2f5;
}

.diff__select_cntr_type .diff___premium_list--blue li:first-child {
  background: #147cb8;
}

.diff__select_cntr_type .diff___premium_list--blue li:nth-child(n + 2) {
  background: #e7f2f8;
}

.diff__select_cntr_type .diff___premium_list li span:first-of-type {
  display: block;
  padding-bottom: .8rem;
}

.diff__select_cntr_type .diff___premium_list li strong {
  padding: 0 .2rem;
  font-size: 3.6rem;
}

.diff__select_cntr_type .diff___conversion {
  display: grid;
  place-items: center;
  gap: 1.6rem;
  margin-top: 2.7rem;
  padding-bottom: .9rem;
}

.diff__select_cntr_type .diff___conversion_btn {
  width: 80%;
}

.diff__select_cntr_type .diff___conversion_btn .button_v2 a,
.diff__select_cntr_type .diff___conversion_btn .button_v3 a {
  width: 100%;
  padding: 1.8rem calc(1.1rem + 24px + 1.8rem) 1.8rem 1.8rem;
}

/* ---ベージュ色に変更---- */
.diff__select_column--lv2_color .diff__select_cntr_expl .diff___balloon,
.diff__select_column--lv2_color .diff__select_cntr_type .diff__select_cntr_type_heading {
  background: #f8f4e9;
}

.diff__select_column--lv2_color .diff__select_cntr_expl .diff___balloon::before {
  border-color: #f8f4e9 transparent transparent;
}

/* ------- */
.diff__select_lead {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
}
/* /////////////////////////////////////////////////// */

@media only screen and (max-width: 767.98px) {
/* ------------------------------
▼死亡保険・生命共済の選び方　diff__select_section
------------------------------*/
  .Main .life_index_heading3--diff__select + * {
    margin-top: 2.2rem;
  }
  .diff__select__columns {
    margin: 2.2rem 0 0 0;
  }
/* --------- */
  .diff__select_cntr_expl {
   margin-bottom: 36px;
  }

  .diff__select__columns .diff__select_column:nth-child(odd) .diff__select_cntr_expl {
    padding-right: 6px;
  }

  .diff__select__columns .diff__select_column:nth-child(even) .diff__select_cntr_expl {
    padding-left: 7px;
  }

  .diff__select_cntr_expl::before,
  .diff__select_cntr_expl::after {
    width: 12px;
    height: 12px;
    border-right: 2px solid #8d97b0;
    border-bottom: 2px solid #8d97b0;
  }

  .diff__select__columns .diff__select_column:nth-child(odd) .diff__select_cntr_expl::before,
  .diff__select__columns .diff__select_column:nth-child(odd) .diff__select_cntr_expl::after,
  .diff__select__columns .diff__select_column:nth-child(even) .diff__select_cntr_expl::before,
  .diff__select__columns .diff__select_column:nth-child(even) .diff__select_cntr_expl::after {
    left: 50%;
  }

  .diff__select_cntr_expl::before {
    bottom: -22px;
  }

  .diff__select_cntr_expl::after {
    bottom: -14px;
  }

  .diff__select_cntr_expl .diff___inner {
    margin: 0;
  }

  .diff__select_cntr_expl .diff___balloon {
    padding: .8rem .4rem;
    border-radius: 26px;
    font-size: 1.5rem;
    line-height: 1.4;
  }

  .diff__select_cntr_expl .diff___mark {
    margin: 2rem 0 0;
  }

  .diff__select_cntr_expl .diff___mark_text {
    padding: 2px 0 0 30px;
    font-size: 1.5rem;
  }

  .diff__select_cntr_expl .diff___mark_text::before {
    width:18px;
    height: 18px;
  }

  .diff__select_cntr_expl .diff___mark_text::after {
    top: 4px;
    left: 4px;
    width: 15px;
    height: 15px;
    filter:
      /* 白縁 */
      drop-shadow(2px 0 0 #fff)
      drop-shadow(-2px 0 0 #fff)
      drop-shadow(0 2px 0 #fff)
      drop-shadow(0 -2px 0 #fff);
  }
  /* --------- */
  .diff__select__columns .diff__select_column:nth-child(odd) .diff__select_cntr_type {
    margin: 0 5px 0 0 ;
  }

  .diff__select__columns .diff__select_column:nth-child(even) .diff__select_cntr_type {
    margin: 0 0 0 5px;
  }

  .diff__select_cntr_type .diff__select_cntr_type_heading {
    padding: 1.1rem 1.2rem;
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .diff__select_cntr_type .diff__select_cntr_type_heading span {
    font-size: 2.2rem;
  }

  .diff__select_cntr_type .diff___body{
    margin: 1rem;
  }

  .diff__select_cntr_type .diff___products {
    padding-top: 32px;
  }

  .diff__select_cntr_type .diff___products_deco {
    top: 4px;
    font-size: 1.6rem;
  }

  .diff__select_cntr_type .diff___products_deco::before,
  .diff__select_cntr_type .diff___products_deco::after {
    top:48%
  }

  .diff__select_cntr_type .diff___products_group {
    gap: .8rem;
  }

  .diff__select_cntr_type .diff___products_name {
    /* 商品名全体 */
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-width: 0;
    font-size: 1.5rem;
  }

  .diff__select_cntr_type .diff___products_name_badge {
    /* ここはSP必ず1行 */
    flex: 0 0 auto;
    padding: .4rem .8rem .3rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .diff__select_cntr_type .diff___products_name_text {
    /* 商品名は横幅に余裕があれば横並び、入らなければ単語単位で折り返す */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem .5rem;
    width: 100%;
    min-width: 0;
  }

  .diff__select_cntr_type .diff___products_name_text_word {
  /* 各単語の途中では改行しない */
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .diff__select_cntr_type .diff___products_logo {
    padding: 0px;
  }

  .diff__select_cntr_type .diff___premium {
    margin-top: 1.2rem;
  }

  .diff__select_cntr_type .diff___premium .diff___inner {
    flex-direction: column;
    gap: 1.1rem;
  }

  .diff__select_cntr_type .diff___premium_list {
    width: 100%;
  }

  .diff__select_cntr_type .diff___products_logo img {
    max-height: 40px;
  }

  .diff__select_cntr_type .diff___premium_list li:first-child {
    padding: .7rem .4rem;
    font-size: 1.6rem;
  }

  .diff__select_cntr_type .diff___premium_list li:nth-child(n + 2) {
    padding: 1rem .2rem;
    font-size: 1.5rem;
  }

  .diff__select_cntr_type .diff___premium_list li strong {
    padding: 0 .1rem;
    font-size: 2.2rem;
    font-weight: 700;
  }

  .diff__select_cntr_type .diff___conversion {
    gap: .8rem;
    margin-top: 1.4rem;
  }

  .diff__select_cntr_type .diff___conversion_btn {
    width: 100%;
  }

  .diff__select_cntr_type .diff___conversion_btn .button_v2 a {
    padding: 1.5rem calc(.8rem + 18px + .8rem) 1.5rem 1.8rem;
    font-size: 1.6rem;
  }
  
  .diff__select_cntr_type .diff___conversion_btn .button_v3 a {
    padding: 1rem calc(.8rem + 18px + .8rem) .9rem 1.8rem;
    font-size: 1.6rem;
    line-height: 1.2;
  }

/* --------- */
  .diff__select_lead {
    font-size: 2.2rem;
  }
}