@charset "UTF-8";
/* ==========================================================================
  /life-ins/disability/index.html用CSS
========================================================================== */

/* 共通パーツ */
.d-body .h2Normal{
  font-size: 32px!important;
}
.d-body .h2Normal a{
  font-size: 32px!important;
}
.d-body .h2Normal a::after{
  border-left: 16px solid #125BF5!important;
  border-top: 16px solid transparent!important;
  border-bottom: 16px solid transparent!important;
  top: 48%!important;
  right: -12px;
}
.d-body .h3Normal{
  margin-top: 48px;
}
.d-body .sectionInner{
  max-width: 1200px;
  padding-bottom: 56px;
  margin: auto;
}

/* キービジュアル */
.d-body .keyvisualWrap{
  padding-top: 45px;
  position: relative;
  max-width: 1366px;
  margin: 0 auto;
}
.d-body .keyvisualImg{
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.d-body .keyvisualTxt{
  position: absolute;
  font-size: 96px;
  font-weight: bold;
  color: #125BF5;
  top: 54%;
  right: 8%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.d-body .keyvisualTxt .keyvisualSubTxtWrap{
  position: absolute;
  display: block;
  background: #fff;
  color: #125BF5;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border: 3px solid #125BF5;
  border-radius: 16px;
  padding: 12px 8px 6px;
  top: -72px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
}
.d-body .keyvisualTxt .keyvisualSubTxtWrap::before{
  content: "";
  border-top: 17px solid #125BF5;
  border-right: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 17px solid transparent;
  position: absolute;
  left: 44%;
  top: 100%;
}
.d-body .keyvisualTxt .keyvisualSubTxtWrap::after{
  content: "";
  border-top: 14px solid #fff;
  border-right: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid transparent;
  position: absolute;
  left: 45%;
  top: 100%;
}
.d-body .keyvisualTxt .keyvisualSubTxt{
  font-size: 32px;
  color: #125BF5;
}

/* アンカーリンク */
.d-body .anchorLinkList-item:nth-of-type(1) a::before{
  background-image: url(/common/images/icon_about_medical.svg);
}
/* .d-body .anchorLinkList-item:nth-of-type(2) a::before{
  background-image: url(/common/images/icon_detail.svg);
} */
.d-body .anchorLinkList-item:nth-of-type(2) a::before{
  background-image: url(/common/images/icon_ranking_crown.svg);
}
.d-body .anchorLinkList-item:nth-of-type(3) a::before{
  background-image: url(/common/images/icon_knowledge.svg);
}
.d-body .anchorLinkList-item{
  width: 33.3%;
  padding: 0;
}
.d-body .anchorLinkList-item a{
  padding: 58px 0 36px;
}

/* ボタン */
.disability--top .btn{
  background-color: #FFFFFF;
  border: solid 1px #125BF5;
  border-radius: 4px;
  box-shadow: 0px 4px 15px 0px #dedede;
  margin: auto;
  text-align: center;
  width: 368px;
}
.disability--top .btn a{
  display: block;
  font-size: 20px;
  padding: 18px 0;
  font-weight: bold;
  position: relative;
}

/* 就業不能保険とは */
.d-body #about{
  background-color: #EEF6FF;
  padding: 64px 0;
}
.d-body #about .sectionInner{
  padding-bottom: 0;
}
.d-body #about .h2Normal{
  margin-bottom: 20px;
}
.d-body #about .aboutListWrap{
  background-color: #fff;
  padding: 36px 60px;
}
.d-body #about .aboutListItem{
  position: relative;
  font-size: 20px;
  line-height: 1.4;
  padding-left: 32px;
}
.d-body #about .aboutListItem:not(:last-child){
  margin-bottom: 8px;
}
.d-body #about .aboutListItem::after{
  position: absolute;
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid #125BF5;
  border-bottom: 2px solid #125BF5;
  transform: rotate(-45deg);
  top: 9px;
  left: 7px;
}
.d-body #about .aboutListItem::before{
  position: absolute;
  content: "";
  width: 26px;
  height: 26px;
  background-color: #DEE6F9;
  left: 0;
  border-radius: 50%;
}

/* 保険会社から選ぶ */
.d-body #detail{
  background-color: #EEF6FF;
  padding: 56px 0;
}
.d-body #detail .sectionInner{
  max-width: 1224px;
  padding: 0;
}
.detail01_accordion_opener_inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.example_listitem {
  background-color: #FFFFFF;
  box-shadow: 5px 5px 10px 0px rgba(3, 0, 0, 0.1);
  height: 86px;
  margin: 0 12px 78px;
  width: 129px;
  border-radius: 0.3vw;
}
.example_listitem_link {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.example_listitem_img {
  max-height: 100%;
}
#detail .example_listitem_text {
  line-height: 1.5;
  font-size: 12px;
  display: block;
  letter-spacing: 0;
  font-weight: bold;
  text-align: center;
}
.d-body #detail .accordion_closer,
.d-body #detail .example_listitem_sbilife{
  display: none;
}

/* 就業不能保険ランキング */
.d-body #ranking{
  background-color: #fff;
  padding-top: 56px;
  max-width: unset;
}
.d-body #ranking .sectionInner{
  padding-bottom: 0;
}
#ranking .lifeRankingList{
  display: flex;
  flex-wrap: wrap;
}
#ranking .rankingListItem{
  background-color: #fff;
  border-radius: 12px;
  margin: 0 12px 24px;
  padding: 24px;
  width: 376px;
  box-shadow: 8px 8px 20px 0px #0000001A;
  display: flex;
  flex-direction: column;
}
#ranking .rankingListItem:last-child{
  margin-right: auto;
}
#ranking .rankingListItem .logoArea{
  display: flex;
  height: 92px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  margin-bottom: 16px;
}
#ranking .rankingListItem .logoArea > div{
  display: flex;
  align-items: center;
  justify-content: center;
}
#ranking .rankingListItem .logoArea > img{
  max-width: 100%;
  height: auto;
}
#ranking .logoAreaCompany{
  width: 43%;
  border-right: 1px solid #E0E0E0;
  padding: 10px;
}
#ranking .logoAreaCompany img{
  max-height: 83px;
}
#ranking .logoAreaRanking{
  width: calc(100% - 43%);
}
#ranking .logoAreaRanking img{
  max-height: 83px;
}
#ranking .rankingArea{
  margin-bottom: 24px;
}
#ranking .rankingAreaTtl{
  font-weight: bold;
  font-size: 24px;
  padding: 0 0 0 72px;
  position: relative;
  line-height: 1.5;
}
#ranking .rankingListItem .rankingAreaTtl::before{
  content: "";
  background-size: contain!important;
  background-position: center!important;
  display: block;
  width: 56px;
  height: 48px;
  position: absolute;
  left: 0;
  top: 6px;
}
#ranking .rankingListItem.ranking_01 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank1.png) no-repeat;}
#ranking .rankingListItem.ranking_02 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank2.png) no-repeat;}
#ranking .rankingListItem.ranking_03 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank3.png) no-repeat;}
#ranking .rankingListItem.ranking_04 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank4.png) no-repeat;}
#ranking .rankingListItem.ranking_05 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank5.png) no-repeat;}
#ranking .rankingListItem.ranking_06 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank6.png) no-repeat;}
#ranking .rankingListItem.ranking_07 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank7.png) no-repeat;}
#ranking .rankingListItem.ranking_08 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank8.png) no-repeat;}
#ranking .rankingListItem.ranking_09 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank9.png) no-repeat;}
#ranking .rankingListItem.ranking_10 .rankingAreaTtl::before{background: url(/life-ins/assets/images/common/icon_rank10.png) no-repeat;}
#ranking .rankingAreaTtl .rankingAreaCompany{
  font-size: 18px;
  display: block;
}
#ranking .rankingAreaTxt{
  padding-left: 14px;
  font-size: 14px;
}
#ranking .rankingAreaTxt li{
  position: relative;
  line-height: 1.5;
  font-weight: bold;
}
#ranking .rankingAreaTxt li:not(:last-child){
  margin-bottom: 8px;
}
#ranking .rankingAreaTxt li::before{
  position: absolute;
  content: "●";
  color: #E8621C;
  top: 0;
  left: -14px;
}
#ranking .btnArea{
  margin-top: auto;
}
#ranking .btnDetail{
  width: 100%;
}
#ranking .btnDetailSubTxt{
  display: block;
  font-size: 14px;
  margin-top: 8px;
}
#ranking .lineup_list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: left;
  margin: 36px auto 0;
  width: 100%;
  max-width: 1200px;
}
#ranking .lineup_list_section {
  display: flex;
  align-items: center;
  align-self: center;
  width: 280px;
  height: 100px;
  margin: 0 2.2% 2.2% 0;
  border-radius: 8px;
  box-shadow: 5px 5px 10px 0px rgba(3, 0, 0, 0.1);
}
#ranking .lineup_list_section:nth-of-type(4n) {
  margin-right: 0;
}
#ranking .lineup_list_link {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 6%;
  height: 100%;
}
#ranking .lineup_list_img {
  margin: 0;
  width: 40px;
}
#ranking .lineup_list_h4 {
  font-size: 18px;
  line-height: 1.3;
  margin-left: 1vw;
  font-weight: bold;
}

/* 就業不能保険の基礎知識 */
.d-body #knowledge{
  background-color: #EEF6FF;
  box-shadow: 0 0 0 100vmax #EEF6FF;
  clip-path: inset(0 -100vmax);
  line-height: 1.4;
  padding: 56px 83px;
}
.d-body .pickupList{
  margin-top: 32px;
}
.d-body .pickupList-item {
  margin-bottom: 16px;
}
.d-body .pickupList-item img{
  max-height: 142px;
  object-fit: cover;
}

/* よくあるご質問 */
.d-body #faq{
  padding: 56px 83px;
  background-color: #fff;
  box-shadow: none;
}
.d-body #faq .h2Normal{
  margin-bottom: 32px;
}
.d-body .faqList-head::before{
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

/* お見積もり・お申込みボタン */
#fancybox-left, #fancybox-right{display: none!important;}
.btn-modal .blankLink a{display: block;}
.btn-modal .default_section{
  padding: 40px 14% 0;
  text-align: center;
}
.btn-modal .link-next-dlogin{
  margin-top: 24px;
}
.btn-modal .link-next-dlogin img{
  width: 380px;
}
.btn-modal .link-next-asis{
  margin-top: 24px;
  font-weight: bold;
  font-size: 18px;
}
.btn-modal .link-next-asis:hover{
  text-decoration: underline;
}

/* 電話相談・メール */
.d-body #contact{
  padding: 40px 0;
  background-color: #fff;
  box-shadow: none;
  box-sizing: border-box;
  max-width: 640px;
  margin: auto;
}
#contact .contact-item-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#contact .contact-item-tel,
#contact .contact-item-mail{
  display: flex;
  justify-content: center;
  align-items: center;
}
#contact .contact-item-tel-img,
#contact .contact-item-mail-img{
  width: 36px;
  margin-right: 16px;
}
#contact .contact-item-tel-no,
#contact .contact-item-mail-address{
  font-weight: bold;
}
#contact .contact-item-mail-address{
  text-decoration: underline;
  text-decoration-color: #125BF5;
}
#contact .contact-item-tel-no span{
  font-weight: normal;
}

@media screen and (max-width: 1099px) {
  /* キービジュアル */
.d-body .keyvisualTxt{
  font-size: 7.6rem;
  top: 60%;
}
}

@media screen and (max-width: 500px) {
  /* 共通パーツ */
  .d-body .h2Normal{
    font-size: 24px!important;
    margin-top: 24px;
    line-height: 1.2;
  }
  .d-body .h2Normal a{
    font-size: 24px!important;
  }
  .d-body .h2Normal a::after{
    border-left: 13px solid #125BF5!important;
    border-top: 13px solid transparent!important;
    border-bottom: 13px solid transparent!important;
  }
  .d-body .h3Normal{
    font-size: 22px!important;
    margin-top: 32px;
  }
  .d-body .sectionInner{
    width: 100%;
    padding: 0 4% 40px;
  }

  /* キービジュアル */
  .d-body .keyvisualWrap{
    padding-top: 0;
  }
  .d-body .keyvisualImgWrap{
    position: relative;
  }
  .d-body .keyvisualTxt{
    width: 100%;
    font-size: 56px;
    top: 88px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  .d-body .keyvisualTxt .keyvisualSubTxtWrap{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #125BF5;
    border-radius: 8px;
    padding: 8px 24px 4px;
    top: -44px;
    max-width: 328px;
  }
  .d-body .keyvisualTxt .keyvisualSubTxtWrap::before{
    border-top: 10px solid #125BF5;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    top: 100%;
  }
  .d-body .keyvisualTxt .keyvisualSubTxtWrap::after{
    border-top: 8px solid #fff;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    top: 98%;
  }
  .d-body .keyvisualTxt .keyvisualSubTxt{
    font-size: 20px;
  }

  /* アンカーリンク */
  .d-body #anchorLink{
    padding: 0;
  }
  .d-body .anchorLinkList{
    justify-content: normal;
  }
  .d-body .anchorLinkList-item{
    height: 122px;
    border-bottom: none!important;
  }
  .d-body .anchorLinkList-item:nth-of-type(2)::after{
    display: block;
    content: '';
    width: 1px;
    height: 72.5%;
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
  .d-body .anchorLinkList-item a{
    font-size: 12px;
    line-height: 1.2;
  }
  .d-body .anchorLinkList-item:nth-of-type(3)::after{
    content: none;
  }

  /* ボタン */
  .disability--top .btn{
    width: 315px;
  }
  .disability--top .btn a{
    font-size: 18px;
    padding: 16px 0;
  }  

  /* 就業不能保険とは */
  .d-body #about{
    padding: 40px 0;
  }
  .d-body #about .h2Normal{
    margin: 0 0 16px;
  }
  .d-body #about .aboutListWrap{
    padding: 28px 16px;
  }
  .d-body #about .aboutListItem{
    font-size: 15px;
    padding-left: 26px;
  }
  .d-body #about .aboutListItem::after{
    width: 9px;
    height: 5px;
    top: 7px;
    left: 6px;
  }
  .d-body #about .aboutListItem::before{
    width: 20px;
    height: 20px;
  }
  
  /* 保険会社から選ぶ */
  .d-body #detail{
    padding: 16px 0;
  }
  .d-body #detail .sectionInner{
    padding: 0 4% 40px;
  }
  .example_listitem {
    height: 51px;
    margin: 0 16px 42px 0;
    width: calc(100% / 3 - 12px);
  }
  .example_listitem:nth-of-type(4),
  .example_listitem:nth-of-type(7),
  .example_listitem:nth-of-type(10),
  .example_listitem:nth-of-type(13){
    margin-right: 0;
  }
  .example_listitem_link {
    margin-bottom: 8px;
  }
  #detail .example_listitem_text {
    font-size: 10px;
  }

  /* 就業不能保険ランキング */
  .d-body #ranking{
    padding-top: 16px;
  }
  .d-body #ranking .sectionInner{
    padding: 0;
  }
  #ranking .lifeRankingListWrap{
    margin-left: 0;
  }
  #ranking .rankingList{
    margin-right: 0;
    width: 100%;
  }
  #ranking .rankingListItem{
    border-radius: 12px;
    margin: 0 0 12px;
    padding: 24px 15px;
    width: 100%;
  }
  #ranking .logoAreaCompany{
    width: 40%;
  }
  #ranking .logoAreaRanking{
    width: calc(100% - 40%);
  }
  #ranking .rankingAreaTtl{
    font-size: 20px;
  }
  #ranking .rankingAreaTtl .rankingAreaCompany{
    font-size: 16px;
  }
  #ranking .lineup_list {
    margin: 0;
  }
  #ranking .lineup_list_section {
    width: 48%;
    margin: 0 4% 5% 0;
    height: auto;
  }
  #ranking .lineup_list_section:nth-of-type(2n) {
    margin-right: 0;
  }
  #ranking .lineup_list_link {
    padding: 3vw;
    min-height: 20vw;
  }
  #ranking .lineup_list_img {
    margin: 0 3vw 0 0;
    width: 7vw;
  }
  #ranking .lineup_list_h4 {
    font-size: 4vw;
    line-height: 1.2;
    margin-left: 0;
  }

  /* 就業不能保険の基礎知識 */
  .d-body #knowledge{
    padding: 16px 4% 40px;
  }
  .d-body .pickupList{
    margin-top: 0;
  }
  .d-body .pickupList-item {
    padding: 32px 0;
    margin-bottom: 0;
  }
  .d-body .pickupList-item:first-of-type {
    padding-top: 0;
  }

  /* よくあるご質問 */
  .d-body #faq{
    padding: 16px 4% 40px;
  }

  /* お見積もり・お申込みボタン */
  .btn-modal .default_section{
    padding: 0 4%;
    text-align: left;
  }
  .btn-modal .link-next-dlogin{
    margin-top: 32px;
  }
  .btn-modal .link-next-asis{
    font-size: 14px;
    text-decoration: underline;
  }

  /* 電話相談・メール */
  .d-body #contact{
    padding: 32px 4%;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #contact .contact-item-wrap{
    display: block
  }
  #contact .contact-item-tel,
  #contact .contact-item-mail{
    width: 100%;
    justify-content: flex-start;
  }
  #contact .contact-item-tel{
    margin-bottom: 16px;
  }
  #contact .contact-item-tel-img,
  #contact .contact-item-mail-img{
    width: 28px;
  }
}