@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');


body,
h1,
h2,
h3,
h4,
p {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'MS Pゴシック', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: 0.05em;
}



/* page color */
:root {
  --page-white: #fff;
  --page-gray: #F0F0F0;
  --page-light-gray: #F8F8F8;

  --page-blue: #02b0eb;
  --page-light-blue: #E5F7FD;
  --page-dark-blue: #00AFEC;
  --page-border-blue: #74CEFD;

  --page-orange: #EC9900;
  --page-light-orange: #FFF2DD;
  --page-dark-orange: #E27900;
  --page-border-orange: #FFC466;

  --page-green: #85D21F;
  --page-light-green: #E7F9CF;
  --page-dark-green: #85D21F;
  --page-border-green: #85D21F;

}


.bgPageWht {
  background-color: var(--page-white);
}
.bgPageGry {
  background-color: var(--page-gray);
}
.bgPageLtGry {
  background-color: var(--page-light-gray);
}
.bgPageBlu {
  background-color: var(--page-blue);
}
.bgPageLtBlu {
  background-color: var(--page-light-blue);
}
.bgPageOrg {
  background-color: var(--page-orange);
}
.bgPageLtOrg {
  background-color: var(--page-light-orange);
}

.bgPageBluGrd {
  background: -webkit-linear-gradient(30deg, var(--page-dark-blue), #0083DB);
}
.bgPageOrgGrd {
  background: -webkit-linear-gradient(30deg, var(--page-orange), var(--page-dark-orange));
}




/* text font */
.altFontOswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.fz10 {
  font-size: 1.0rem!important;
}
.fz12 {
  font-size: 1.2rem!important;
}
.fz14 {
  font-size: 1.4rem!important;
}
.fz16 {
  font-size: 1.6rem!important;
}
.fz18 {
  font-size: 1.8rem!important;
}
.fz20 {
  font-size: 2.0rem!important;
}
.fz22 {
  font-size: 2.2rem!important;
}
.fz24 {
  font-size: 2.4rem!important;
}
.fz26 {
  font-size: 2.6rem!important;
}
.fz28 {
  font-size: 2.8rem!important;
}
.fz30 {
  font-size: 3.0rem!important;
}
.fz32 {
  font-size: 3.2rem!important;
}
.fz48 {
  font-size: 4.8rem!important;
}
.fz56 {
  font-size: 5.6rem!important;
}
.fz60 {
  font-size: 6.0rem!important;
}
@media screen and (min-width: 768px) {
  .fzMd10 {
    font-size: 1.0rem!important;
  }
  .fzMd12 {
    font-size: 1.2rem!important;
  }
  .fzMd14 {
    font-size: 1.4rem!important;
  }
  .fzMd16 {
    font-size: 1.6rem!important;
  }
  .fzMd18 {
    font-size: 1.8rem!important;
  }
  .fzMd20 {
    font-size: 2.0rem!important;
  }
  .fzMd22 {
    font-size: 2.2rem!important;
  }
  .fzMd24 {
    font-size: 2.4rem!important;
  }
  .fzMd26 {
    font-size: 2.6rem!important;
  }
  .fzMd28 {
    font-size: 2.8rem!important;
  }
  .fzMd30 {
    font-size: 3.0rem!important;
  }
  .fzMd32 {
    font-size: 3.2rem!important;
  }
  .fzMd48 {
    font-size: 4.8rem!important;
  }
  .fzMd56 {
    font-size: 5.6rem!important;
  }
  .fzMd60 {
    font-size: 6.0rem!important;
  }
}




/* layout */


main {
  /* margin-bottom: 64px; */
}

main#pageContent {
}

main#pageContent .container {
  padding: 0 calc(20 / 375 * 100%);
}

@media screen and (min-width: 768px) {
  main {
    /* margin-bottom: 104px; */
  }
  main#pageContent .container {
    padding: 0 15px;
  }
}

@media screen and (min-width: 992px) {
  main#pageContent .container {
  }
}
@media screen and (min-width: 1200px) {
  main#pageContent .container {
  }
}

@media screen and (min-width: 1600px) {
  main#pageContent .container {
    max-width: 1290px;
  }
}


main#pageContent img {
  object-fit: contain;
}
main#pageContent .secConts {
  position: relative;
}

main#pageContent .grdBtn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  border-radius: 30px;
}
main#pageContent .grdBtn::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  background-size: contain;
  background-position: center;
  background-image: url('../img/welfare-dx/icon/icon_arrow2.svg');
  background-repeat: no-repeat;
}

main#pageContent .markerTextBlu {
  position: relative;
  z-index: 0;
}

main#pageContent .markerTextBlu::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 1.0em;
  left: 0;
  top: 0.6em;
  background-color: var(--page-light-blue);
  border-radius: 1em;
  z-index: -1;
}






/* mv */
#mvSec {
}

/* sec1 */
#sec1 {
}

#sec1 #sec1CardBase {
  position: relative;
  margin-top: 50px;
}

#sec1 #sec1CardBase > .col-12:first-of-type::after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  margin: 30px auto auto;
  background-size: contain;
  background-position: center;
  background-image: url('../img/welfare-dx/icon/icon_cross.svg');
  background-repeat: no-repeat;
}
#sec1 #sec1CardBase > .col-12:last-of-type {
  margin-top: 60px;
}


#sec1 .sec1Card {
  position: relative;
  display: grid;
  grid-template-rows:
    auto
    auto
    1fr;
  height: 100%;
  border-width: 2px;
}

#sec1 .sec1Card > .sec1CardCap {
  position: absolute;
  display: flex;
  width: 190px;
  height: 190px;
  margin: auto;
  top: -40px;
  bottom: auto;
  right: auto;
  left: -40px;
  padding: 30px;
  background-color: var(--page-white);
  border-radius: 50%;
  /* background-size: contain; */
  /* background-position: center; */
  /* background-image: url('../img/welfare-dx/picture/card_cap_bg.svg'); */
  /* background-repeat: no-repeat; */
}
#sec1 .sec1Card > .sec1CardCap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 95px;
  background: transparent;
  border: 2px solid #333;
  border-bottom: none;
  border-top-left-radius: 95px;
  border-top-right-radius: 95px;
  box-sizing: border-box;
  transform: rotate(135deg);
  transform-origin: 50% 100%;
}
#sec1 .sec1Card > .sec1CardCap p {
  letter-spacing: -0.0em;
}
#sec1 .sec1Card > .sec1CardCap img {
  width: auto;
  height: 66px;
  object-fit: contain;
}




#sec1 .sec1Card .card-header {
  border: none;
  padding-left: 40px;
}




.hashTagItem {
  position: relative;
}
.hashTagItem::before {
  content: "#";
  color: var(--page-blue);
}




/* sec2 */
#sec2 {
  margin-top: 50px;
  margin-bottom: 50px;
}
#sec2::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 50px;
  top: -50px;
  left: 0;
  background-color: var(--page-gray);
  border-radius: 60px 60px 0 0;
}
#sec2::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 50px;
  bottom: -50px;
  left: 0;
  background-color: var(--page-gray);
  border-radius: 0 0 60px 60px;
}

#sec2 #sec2Tit {
  display: flex;
  justify-content: center;
  align-items: center;
}

#sec2 .sec2capItem {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  font-weight: bold;
  min-height: 48px;
  padding: .2em .5em .25em 1em;
  background-size: contain;
  background-position: center;
  background-image: url('../img/welfare-dx/picture/sec2_bg1a.svg');
  background-repeat: no-repeat;
  letter-spacing: 0.4em;
}

#sec2 .sec2capItem.type2 {
  background-image: url('../img/welfare-dx/picture/sec2_bg2a.svg');
}


#sec2 #sec2Tit .sec2capItem {
  min-height: 65px;
  background-image: url('../img/welfare-dx/picture/sec2_bg1b.svg');
}
#sec2 #sec2Tit .sec2capItem.type2 {
  margin-top: 1.2em;
  margin-left: -0.7em;
  background-image: url('../img/welfare-dx/picture/sec2_bg2b.svg');
}


#sec2 #sec2ItemBase {
  counter-reset: sec2-counter;
  margin-top: 50px;
}
#sec2 #sec2ItemBase .sec2Item {
  counter-increment: sec2-counter;
  margin-bottom: 60px;
}
#sec2 #sec2ItemBase .sec2Item:last-of-type {
  margin-bottom: 0px;
}

#sec2 .sec2Card {
  border: 0;
}
#sec2 .sec2Card .card-body .sec2capItem {
  position: absolute;
  top: -24px;
  left: -24px;
}

#sec2 .sec2Card > .sec2CardCap {
  position: absolute;
  display: block;
  width: 60px;
  height: 60px;
  margin: auto;
  top: -30px;
  bottom: auto;
  right: auto;
  left: -20px;
  background-color: var(--page-gray);
  border-radius: 50%;
/*   background-size: contain;
  background-position: center;
  background-image: url('../img/welfare-dx/picture/card_cap_bg.svg');
  background-repeat: no-repeat; */
}
#sec2 .sec2Card > .sec2CardCap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 30px;
  background: transparent;
  border: 2px solid #333;
  border-bottom: none;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  box-sizing: border-box;
  transform: rotate(135deg);
  transform-origin: 50% 100%;
}
#sec2 .sec2Card > .sec2CardCap .sec2CardNum {
  margin-top: -.2em;
}
#sec2 .sec2Card > .sec2CardCap .sec2CardNum::before {
  content: "0" counter(sec2-counter);
}



/* sec3 */
#sec3 #sec3ItemBase {
  counter-reset: sec3-counter;
  padding-top: 20px;
}
#sec3 #sec3ItemBase .sec3Item {
  position: relative;
  padding-left: 30px;
  padding-bottom: 30px;
  counter-increment: sec3-counter;
}

#sec3 #sec3ItemBase .sec3Item .sec3Card {
  position: relative;
  border-width: 1px;
}
#sec3 #sec3ItemBase .sec3Item .sec3Card::before {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: calc(100% + 64px);
  top: -30px;
  left: -30px;
  background-color: var(--page-gray);
}

#sec3 #sec3ItemBase .sec3Item:nth-of-type(1),
#sec3 #sec3ItemBase .sec3Item:nth-of-type(4),
#sec3 #sec3ItemBase .sec3Item:nth-of-type(6) {
  padding-top: 40px;
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(1)::after,
#sec3 #sec3ItemBase .sec3Item:nth-of-type(4)::after,
#sec3 #sec3ItemBase .sec3Item:nth-of-type(6)::after {
  content: "";
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  /* width: 112px; */
  width: 90px;
  height: 34px;
  top: -12px;
  left: -15px;
  background-color: var(--page-gray);
  font-size: 1.4rem;
  color: var(--page-white);
  font-weight: 700;
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(1) {
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(1)::after {
  content: "ご契約前";
  background-color: var(--page-dark-orange);
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(4) {
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(4)::after {
  content: "ご契約後";
  background-color: var(--page-dark-blue);
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(6) {
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(6)::after {
  content: "運用";
  background-color: var(--page-dark-green);
}

#sec3 #sec3ItemBase .sec3Item:nth-of-type(1) .sec3Card::before,
#sec3 #sec3ItemBase .sec3Item:nth-of-type(2) .sec3Card::before,
#sec3 #sec3ItemBase .sec3Item:nth-of-type(3) .sec3Card::before {
  background-color: var(--page-light-orange);
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(4) .sec3Card::before,
#sec3 #sec3ItemBase .sec3Item:nth-of-type(5) .sec3Card::before {
  background-color: var(--page-light-blue);
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(6) .sec3Card::before {
  background-color: var(--page-light-green);
}


#sec3 #sec3ItemBase .sec3Item .sec3Card .sec3CardNum {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid;
  margin-right: 10px;
}
#sec3 #sec3ItemBase .sec3Item .sec3Card .sec3CardNum::after {
  content: "step." counter(sec3-counter);
}

#sec3 #sec3ItemBase .sec3Item:nth-of-type(1) .sec3Card .sec3CardNum,
#sec3 #sec3ItemBase .sec3Item:nth-of-type(2) .sec3Card .sec3CardNum,
#sec3 #sec3ItemBase .sec3Item:nth-of-type(3) .sec3Card .sec3CardNum {
  background-color: var(--page-light-orange);
  border-color: var(--page-dark-orange);
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(4) .sec3Card .sec3CardNum,
#sec3 #sec3ItemBase .sec3Item:nth-of-type(5) .sec3Card .sec3CardNum {
  background-color: var(--page-light-blue);
  border-color: var(--page-dark-blue);
}
#sec3 #sec3ItemBase .sec3Item:nth-of-type(6) .sec3Card .sec3CardNum {
  background-color: var(--page-light-green);
  border-color: var(--page-dark-green);
}


/* sec4 */
#sec4 {
  margin-top: 50px;
  padding-bottom: 50px;
}
#sec4::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 50px;
  top: -50px;
  left: 0;
  background-color: var(--page-dark-blue);
  border-radius: 60px 60px 0 0;
}





@media screen and (min-width: 768px) {

  #mvSec {
    min-height: 622px;
  }


  #sec1 #sec1CardBase > .col-12:first-of-type::after {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: -30px;
  }
  #sec1 #sec1CardBase > .col-12:last-of-type {
    margin-top: 0px;
  }


  #sec2 {
    margin-top: 100px;
    margin-bottom: 100px;
  }
  #sec2::before {
    height: 100px;
    top: -100px;
    border-radius: 120px 120px 0 0;
  }
  #sec2::after {
    height: 100px;
    bottom: -100px;
    border-radius: 0 0 120px 120px;
  }

  #sec2 #sec2Tit .sec2capItem {
    min-height: 84px;
  }

  #sec2 #sec2ItemBase {
    margin-top: 100px;
  }

  #sec2 #sec2ItemBase .sec2Item {
    margin-bottom: 100px;
  }
  #sec2 .sec2Card .card-body {
    margin-left: 40px;
  }
  #sec2 .sec2Card > .sec2CardCap {
    width: 90px;
    height: 90px;
    top: -50px;
    left: -30px;
  }
  #sec2 .sec2Card > .sec2CardCap::after {
    width: 90px;
    height: 45px;
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
  }


  #sec4 {
    margin-top: 100px;
    padding-bottom: 100px;
  }
  #sec4::before {
    height: 100px;
    top: -100px;
    border-radius: 120px 120px 0 0;
  }

}


@media screen and (min-width: 992px) {
}



@media screen and (min-width: 1200px) {
  #sec2 #sec2ItemBase .sec2Item {
    margin-bottom: 140px;
  }
  #sec2 .sec2Card .card-body {
    margin-left: 50px;
  }
  #sec2 .sec2Card > .sec2CardCap {
    width: 120px;
    height: 120px;
    top: -50px;
    left: -60px;
  }
  #sec2 .sec2Card > .sec2CardCap::after {
    width: 120px;
    height: 60px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
  }

  #sec3 #sec3ItemBase .sec3Item:nth-of-type(1)::after,
  #sec3 #sec3ItemBase .sec3Item:nth-of-type(4)::after,
  #sec3 #sec3ItemBase .sec3Item:nth-of-type(6)::after {
    width: 112px;
    height: 34px;
    top: -12px;
    left: -50px;
    font-size: 1.6rem;
  }
}



/* form */
.formZone {
}

.formZone input[type="text"],
.formZone input[type="email"],
.formZone input[type="url"],
.formZone input[type="password"],
.formZone input[type="search"],
.formZone input[type="number"],
.formZone input[type="tel"],
.formZone input[type="range"],
.formZone input[type="date"],
.formZone input[type="month"],
.formZone input[type="week"],
.formZone input[type="time"],
.formZone input[type="datetime"],
.formZone input[type="datetime-local"],
.formZone input[type="color"],
.formZone textarea {
  display: block;
  width: 100%;
  height: auto;
  padding: 10px 5px;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #101010;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #101010;
  border-radius: 0.25rem;
}