/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition: 1.1s cubic-bezier(.86,0,.07,1);
  will-change: transform;
}
.fadein-pos0 { transform : translate(0, 0px);}
.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}
.fadein-1{ transition-delay: 0.5s }
.fadein-2{ transition-delay: 1s }
.fadein-3{ transition-delay: 1.05s ;}
.fadein-4{ transition-delay: 1.1s }
.fadein-5{ transition-delay: 1.15s}
.fadein-6{ transition-delay: 1.2s }
.fadein-7{ transition-delay: 1.25s ;}
.fadein-8{ transition-delay: 1.3s }

.mainsld-texts { position: absolute; bottom: 0; left: 0; width: 100%}
.mainsld-texts_transition { transform: translateX(0) translateZ(0); will-change: opacity, transform; animation: textOut cubic-bezier(.55, .085, .68, .53) .75s forwards; opacity: 1}
.mainsld-texts_transition-0 { animation-delay: 0s}
.mainsld-texts_transition-1 { animation-delay: .05s}
.mainsld-texts_transition-2 { animation-delay: .1s}
.mainsld-texts_transition-3 { animation-delay: .15s}
.mainsld-texts_transition-4 { animation-delay: .2s}
.mainsld-texts_transition-5 { animation-delay: .25s}
.mainsld-texts_transition-6 { animation-delay: .3s}

.swiper-slide-active .mainsld-texts .mainsld-texts_transition { animation: textIn cubic-bezier(.165, .84, .44, 1) .75s forwards; opacity: 0}
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-0 { animation-delay: 1s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-1 { animation-delay: 1.05s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-2 { animation-delay: 1.1s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-3 { animation-delay: 1.15s}
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-4 { animation-delay: 1.2s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-5 { animation-delay: 1.25s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-6 { animation-delay: 1.3s }

@keyframes textIn {
0% { transform: translateY(40px) translateZ(0); opacity: 0 }
to { transform: translateY(0) translateZ(0); opacity: 1}
}

@keyframes textOut {
0% { transform: translateY(0) translateZ(0); opacity: 1 }
to { transform: translateY(-40px) translateZ(0); opacity: 0}
}

@keyframes blink{
0%{ opacity:1 } 50%{ opacity:.2 } to { opacity:1 }
}







.js-loader { position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: visible; opacity: 1; background: #f0f0f0; transition: opacity .8s, visibility .8s; z-index: 10000;}

.is-loaded .js-loader{ visibility: hidden; opacity: 0;}

.js-loader-progress { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 1px;}
.js-loader-progress .is-loaded { visibility: hidden; opacity: 0;}
.js-loader-progress-bar { background: #000; height: 100%; width: 0; transition: width .4s;}
.js-loader-progress-bar.on{ width: 100%;}
.js-loader-progress-number { text-align: center; font-size: 10px; width: 100%; margin-top: 10px;}



.breadcrumb{display: none;}
.contents_wrapper{ width: 100%; }
#under_footer .contents_wrapper {
    width: 1020px;
    margin: 0 auto;
    box-sizing: border-box;
}
@media screen and (max-width: 640px){
  .contents_wrapper { width: auto;margin: 0;}
  #under_footer .contents_wrapper { width: auto; margin-left:15px; margin-right:15px;}
}
/***all***/
.pageArea{
  font-size: 4.266vw;
  font-family: 'Poppins', 游ゴシック, YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;;
  position: relative;
  line-height: 1.7;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  letter-spacing: 0.04em;
  letter-spacing: 0;
  background: #fff;
}
.fontNSerif{font-family: 'Noto Serif JP', serif;}
header{ font-size: 0;}
header img,
footer img,
.pageArea img{ width: 100%; height: auto;}
.pageArea a{ text-decoration: none; }

.pageArea P, .pageArea TD, .pageArea TH, .pageArea LI, .pageArea DIV, .pageArea INPUT, .pageArea TEXTAREA{ font-size: 4.266vw;}

.center{ text-align: center;}
.pc{ display: none;}
.bgWhite{ background: #fff;}
.bgGray{ background: #dfdfdf;}
.bold{ font-weight: bold;}
.blue{ color: #2254b9;}

.underLine{ text-decoration: underline;}




.section{ padding: 22vw 0 22vw; overflow: hidden; box-sizing: border-box;}
.pageArea .section h2{font-size: 1.875em; text-align: center; font-family: 'Noto Serif JP', serif; line-height: 1.4; padding-bottom: 1.1333em; position: relative;}
.sectionTl{}
.sectionTl:after{ content: ""; width: 2.666em; height: 1px; background: #000; bottom: 0.8em; left: 50%; position: absolute; transform: translate(-50%, 0%);}
.sectionTl:before{content: ""; width: 1px; height: 0.3333em; background: #000; bottom: 0.6444em; left: 50%; position: absolute; transform: translate(-50%, 0%);}

.sectionInner01{ padding: 0 2.6vw; box-sizing: border-box;}
.sectionInner02{ padding: 0 4vw; box-sizing: border-box;}

.figRadius{ border-radius: 4px; overflow: hidden;}


@media screen and (max-width: 900px) {
  @media (orientation: landscape) {
    .pageArea{ font-size: 2vw;}
    .pageArea P, .pageArea TD, .pageArea TH, .pageArea LI, .pageArea DIV, .pageArea INPUT, .pageArea TEXTAREA{ font-size: 2vw;}
  }
}

@media screen and (min-width: 900px) {
  .sp{ display: none;}
  .pc{ display: block;}
  .pageArea{ font-size : 1.111vw;}
  .pageArea P, .pageArea TD, .pageArea TH, .pageArea LI, .pageArea DIV, .pageArea INPUT, .pageArea TEXTAREA{ font-size : 1.111vw;}

  .pageArea .section h2{font-size: 2.625em; }

  .section{ padding: 6.7vw 0 6.7vw; overflow: hidden; position: relative;}
  .sectionInner01{ padding: 0 0; width: 87.5%; margin: 0 auto;}
  .sectionInner02 { padding: 0; width: 74vw; margin: 0 auto;}
  .sectionInner04{ margin: 0 6.25vw; box-sizing: border-box;}
}
@media screen and (min-width: 1400px) {
  .pageArea{ font-size : 1.111vw;}
  .pageArea P, .pageArea TD, .pageArea TH, .pageArea LI, .pageArea DIV, .pageArea INPUT, .pageArea TEXTAREA{ font-size : 1.111vw;}
  .sectionInner01{ padding: 0 12.5vw; width: 100%; margin: 0 auto;}
  .sectionInner02{ padding:0; margin: 0 14.58333vw;}
}



/****mianVisial***/
.mainVisial{padding: 55vw 2.6vw 0;;}
.mainVisial figure{ position: absolute; top: 0; font-size: 0; background: #efeffc; left: 0;}

.readTxt{ position: relative; font-size: 1.125em; line-height: 1.3;}
.readTxt01{ text-align: right;}
.readTxt .txtL{ font-size: 1.35em;}

.mainVisial h1{ width: 74.266%; position: relative; margin: 1.5vw 0 2.92vw auto; font-size: 0;}
.readTxt02{margin: 0 auto 8.8266vw 8vw}
.mainVisial p{ margin: 0 15.6vw 0 2.6vw;}

@media screen and (min-width: 900px) {
  .mainVisial {padding: 7.2vw 12.5vw 0;}
  .readTxt{ position: relative; font-size: 1.5em; line-height: 1.3;}
.readTxt .txtL{ font-size: 1.5em;}
  .mainVisial figure{ position: absolute; top: 0; font-size: 0; left: 0;}
  .mainVisial h1{
    width: 34%; position: relative; margin: 1.5vw 0 2.92vw auto; font-size: 0; padding-right: 20.22vw; box-sizing: content-box;
  }
  .mainVisial h1:after{ content: ""; display: block; position: absolute; top: 30%; right: 0; width: 18vw; height: 1px; background: #000;}
  .mainVisial p { margin: 9.8vw 15.6vw 0 2.6vw; margin: 10.4vw 15.6vw 0 2.6vw; position: relative; width: 72%;}
}

@media screen and (min-width: 1400px) {
  .pageArea DIV.readTxt01{ font-size: 1.5vw; }
  /*.readTxt .txtL{ font-size: 2em;}*/
}
/****section1***/
.section figure{ position: relative; font-size: 0;}
.s1-img01{ width: 41.12676%; margin: 0 0 0 auto; z-index: 10;}
.s1-img02{ width: 58.45%; margin: -29.6vw auto 0 8.45%; z-index: 1;}
.section01ContentsArea2{ margin: 1.2125em 0 2.5em 25%;}
.section01ContentsArea2 p{margin: 0 0 1.2125em 0;}
.s1-img03{width: 76.73%; }
.section01ContentsArea3{ text-align: center;}
.section01ContentsArea3 h3{
  font-size: 1.25em; text-align: center; display: inline-block;
  background: #ffc2c8; padding: 0 1.125em; margin: 0 auto 1.25em; border-radius: 1.125em;
}
.s1-img04{ margin: 0 -2.6vw 0 auto; width: 68.2%; height: 59.466vw; overflow: hidden;}
.s1-img04 img{ height: 100%; width: auto; right: 0; top: 0; position: absolute; max-width: none;}
.section01ContentsArea3 p{ text-align: left; font-size: 1.125em; padding: 0 4vw 0 2vw; margin-top: -2.5em; position: relative;}

@media screen and (min-width: 900px) {
  .section01ContentsArea1{ width: 49.5%; display: inline-block;  vertical-align: top;}
  .s1-img01{ width: 50%; margin: 0 0 0 auto; z-index: 10;}
  .s1-img02{ width: 77.777%; margin: -6.66vw auto 0 0; z-index: 1;}
  .section01ContentsArea2{ width: 49.5%; display: inline-block; margin: 0; padding-top: 30.2vw; vertical-align: top; position: relative;}
  .section figure.s1-img03{width: 63.8%; top: 9.7vw ;left: 18.5%; position: absolute; }

  .section figure.s1-img04{ position: relative; top: 0;right: 0; width: 65.74%; height: auto;}
  .s1-img04 img{position: relative; width: 100%;height: auto;}
  .section01ContentsArea3{ margin-top: 5.555vw;  position: relative; text-align: left;}
  .section01ContentsArea3 h3{top: 4.16vw; left: 5.555vw;position: absolute;}
  .section01ContentsArea3 p {
    padding: 0; margin-top: 0; line-height: 2;
    position: absolute; top: 0; left: 5.555vw; top: 8.555vw;
  }

}


/****contact***/
.sectionContact{ background: #cfdee6; padding: 12vw 0 12vw;}
.contactBox{ border-radius: 4px; overflow: hidden; background: #fff; position: relative;}
.contactBox a{ color: #000;}
.contactBox + .contactBox{ margin-top: 0.5em;}
.contactIconBox{ display: inline-block; vertical-align: middle; background: #5498cb; padding-top: 3.9em; text-align: center; height: 21.333vw; width: 24vw; position: relative; box-sizing: border-box;}  
.contactIconBox h3{ font-size: 0.5625em; color: #fff; line-height: 1;}
.contactContents{ display: inline-block; vertical-align: middle; text-align: center; margin: 0 0 0 3.2vw;}
.contactContents p{ font-size: 1.875em; font-family: 游ゴシック, YuGothic; font-weight: bold; line-height: 1; margin: 0 auto; color: #000;}
.contactContents time{ font-size:0.62em; text-align: right; line-height: 1.3; display: block;  margin: 0 auto;}
.contactIconTel:after{
  content: ""; width: 9.73vw; height: 9.73vw; display: block; position: absolute;
  background: url(../images/invisaligngo/icon-tel.png) center center / 100% auto no-repeat; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
}
.contactIconForm:after{
  content: ""; width: 11.4666vw; height: 11.4666vw; display: block; position: absolute;
  background: url(../images/invisaligngo/icon-form.png) center center / 100% auto no-repeat; top: 45%; left: 50%;
  transform: translate(-50%, -50%);
}
.pageArea .section h2.sectionTl2{ padding-bottom: 0.8em;}

@media screen and (min-width: 900px) {
  .sectionContact{ background: #cfdee6; padding: 6.7vw 0 6.7vw; text-align: center;}
  .contactContents time{ font-size:0.82em; }
  .contactBox { width: 47.8%; display: inline-block; vertical-align: top; margin: 0 0.7vw; text-align: left;}
  .contactBox + .contactBox{ margin-top: 0;}
  .contactIconBox{ padding-top: 5em; height: 7.63vw; width: 7.63vw;}  
  .contactIconBox h3{ font-size: 0.6875em; }
  .contactIconTel:after{
    content: ""; width: 3.125vw; height: 3.125vw; display: block; position: absolute;
    background: url(../images/invisaligngo/icon-tel.png) center center / 100% auto no-repeat; top: 46%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .contactIconForm:after{
    content: ""; width: 3.75vw; height: 3.75vw; display: block; position: absolute;
    background: url(../images/invisaligngo/icon-form.png) center center / 100% auto no-repeat; top: 45%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .contactContents p{ font-size: 2.5em;}
  .pageArea .section h2.sectionTl2 { padding-bottom: 0.6em;}
}


/****section2***/
.section02{ background: #edf5fe; text-align: center; padding: 24vw 0 0;}
.pageArea .section h2.sectionTl3{
  text-align: center; line-height: 1.6; position: relative;
}
.sectionTl3 .bgWhite{padding: 0 0.3em; display: inline;}
.sectionTl3:after{ content: ""; width: 2.666em; height: 1px; background: #000; bottom: 0.8em; left: 50%; position: absolute; transform: translate(-50%, 0%);}
.sectionTl3:before{content: ""; width: 1px; height: 0.3333em; background: #000; bottom: 0.6444em; left: 50%; position: absolute; transform: translate(-50%, 0%);}
.featuresBox{ padding: 0 0vw; text-align: left; position: relative; box-sizing: border-box;}

.featuresBox h3{ font-size: 1.5em; font-family: 'Noto Serif JP', serif; vertical-align: ; text-align: left; line-height: 1.2; letter-spacing: -0.03em;}
.featuresBox h3 span.nv{ font-size: 2.25em; vertical-align: middle; margin-top: -0.25em; margin-right: 2vw; display: inline-block;}
.featuresBox.featuresBox03 h3 span.nv{ margin-top: -0.1em;}
.tlTxt{ display: inline-block; vertical-align: middle;}
.note{ font-size: 0.8125em;}

.featuresBox01{background: url(../images/invisaligngo/s2-img01.jpg) top -5em center / 110% auto; height: 80vw;}
.featuresBoxTxt{ position: absolute; padding: 0 4vw; bottom: 8vw;}
.featuresBox01 .featuresBoxTxt{ }
.featuresBox02{ background: url(../images/invisaligngo/s2-img02.jpg) top 0 center / 110% auto; height: 104vw;}
.featuresBox03{ background: url(../images/invisaligngo/s2-img03.jpg) top 0 left -0.6em / auto 55% no-repeat, #c6ebf5; height: 102vw;}
.featuresBox04{ background: url(../images/invisaligngo/s2-img04sp.jpg) top 0 right / auto 100% no-repeat, #c3b9ae; height: 138vw;}
.txtS{ font-size: 0.66666em;}
.featuresBox04 .featuresBoxTxt{ bottom: 21.33vw;}

@media screen and (min-width: 900px) {
  .section02{ padding: 0;}
  .sectionTl3 .bgWhite{padding: 0 0 0 0.3em; display: inline;}
  .sectionTl3 .bgWhite + br + .bgWhite{padding: 0 0.3em 0 0.1em; margin-left: -0.1em;}
  .featuresBox01, .featuresBox02{ width: 49.6%; height: 45.6388vw; display: inline-block; vertical-align: middle; padding-top: 35.4vw;}
  .featuresBox01{background: url(../images/invisaligngo/s2-img01.jpg) top 0em center / 100% auto no-repeat;}
  .featuresBox02{background: url(../images/invisaligngo/s2-img02.jpg) top 0em center / 100% auto no-repeat;}
  .pageArea .section h2.sectionTl3{
    position: absolute; z-index: 10; left: 50%; top: 5.55vw;
    transform: translate(-49.7%, 0px);
  }
  .featuresBox h3 { font-size: 2em;}
  .featuresBox h3 span.nv{ margin-right: 0.2em; margin-top: 0; }
  .featuresBoxTxt { position: relative; padding: 0 4.16vw; bottom: auto;}

  .featuresBox03 { background: url(../images/invisaligngo/s2-img03.jpg) top 0 left -0.6em / 100% auto no-repeat, #c6ebf5; height: 33vw; padding-left: 59%; padding-top: 11.11vw;}
  .featuresBox04{height: 33vw; background: url(../images/invisaligngo/s2-img04.jpg) center center / 100% auto; padding-top: 11.34vw;}
  .featuresBox04 .featuresBoxTxt{ bottom: auto; color: #fff; width: 40.9444vw;}
}


/****section3***/
.section.section03{ background: url(../images/invisaligngo/s3bg.jpg) top 6em right / 80% no-repeat;}
.flowBox{ position: relative;}
.stepBox{
    background: rgba( 255, 255, 255, 0.6);
    border: 1px solid #000;
    border-radius: 4px;
    padding: 0.875em;
    position: relative;
    margin: 0 2.66vw 0 16vw;
    z-index: 10;
    box-sizing: border-box;
}
.stepBox h3{ font-size: 1.3125em; position: absolute; background: #fff; left: -1px; top: -0.5em; padding: 0 0.4em 0 0.4em; border-left: 0.2em solid #000; line-height: 1;}
.stepBox h3:after{ content: ""; display: block; background: #fff; width: 0.2em; height: 0.4em; position: absolute; left: -0.2em; bottom: -0.4em; }
.gaze{ background: #f4f4f4; padding: 0.575em 0.875em; font-weight: bold; margin: 0 0 0.5em;}
.step1{ margin-top: 45.33vw;}
.step1Img{ width: 87.2vw; margin-top: -5.333vw; z-index: 1;}

.flowBoxStep02{ padding-top: 64vw;}
.section figure.step2Img{ width: 70vw; position: absolute; top: 10.6vw; right: -10.6vw;}
.stepBox.step2{ margin: 0 2.66vw 0 24vw;}

.flowBoxStep03{ padding-top: 65.3vw;}
.stepBox.step3{ margin: 0 2.66vw 0 32vw;}
.section figure.step3Img1{ position: absolute; width: 77.333vw; top: 10.666vw; left: 5.333vw;}
.section figure.step3Img2{ position: absolute; width: 20.5vw; top: 66vw; left: 5.333vw;}

.flowBoxStep04{ padding-top: 89.33vw;}
.stepBox.step4{ margin: 0 22.666vw 0 9.33vw;}
.section figure.step4Img1{ width: 88vw; top: 10.666vw; left: 0; position:absolute;}
.section figure.step4Img2{ width: 45.33vw; top: 54vw; right: 2.66vw; position:absolute; border-top: 8px solid #fff; border-left: 8px solid #fff;}

@media screen and (min-width: 900px) {
  .section.section03 { background: url(../images/invisaligngo/s3bg.jpg) top -6.5em right / 34% no-repeat;}
  /*.section.section03 figure{ display: none;}*/
  .stepBox{ padding: 1.25em;}
  .gaze{ background: #f4f4f4; padding: 1em 1.25em; }
  .stepBox.step1{ margin: 7.638vw 9.52% 0 52.38%; width: 38.25%;  }
  .stepBox.step2{ margin: 0 43.4% 0 23%; width: 33.33%;  }
  .stepBox.step3{ margin: 0 59.12% 0 7.14%; width: 33.49%;  }
  .stepBox.step4{ margin: 0 0 0 66%; width: 33.49%;  }
  .flowBoxStep02 { padding-top:  23.33vw;}
  .flowBoxStep03 { padding-top:  23.33vw;}
  .flowBoxStep04{padding-top: 42vw;}
  .stepBox h3 { font-size: 2em;}

  .section figure.step1Img{ width: 45%; margin-top: 0; position: absolute; top: 3vw;}
  .section figure.step2Img{ width: 40.9%; right: 0; top: 8.88vw;}
  .section figure.step3Img1{ width: 46%; left: 30.9%; top: 5.952vw;}
  .section figure.step3Img2{width:12.69%; top: 15.11vw; left: auto; right: 0vw;}
  .section figure.step4Img1{
    width: 30.72%; left: 51%; top: 7.635vw; z-index: 10;
    
  }
  .step4Img1 > div{ border-bottom: 8px solid #fff; border-left: 8px solid #fff;}
  .section figure.step4Img2{width: 60%; top: 15.27vw; left: auto; right: auto; left: 0; z-index: 1;}
}


/****section4***/
.section.section04{
  background: url(../images/invisaligngo/s4-bg01.jpg) top 0 right / 100% no-repeat , #e4ebf1;
  padding: 34vw 0 22vw;
}
.pliceBox{ border: 1px solid #ccc; background: #fff; border-radius: 4px;}
.pliceBox dt, .pliceBox dd{ height: 14.4vw;  line-height: 14.4vw; display: inline-block; vertical-align: middle; box-sizing: border-box;}
.pliceBox dt{ width: 63%; padding-left: 2.4vw;}
.pliceBox dd{ width: 37%; text-align: right; padding-right: 2.4vw;}
.pliceBox dd span{ font-size: 1.5em; font-weight: bold;}
.inB {
    display: inline-block;
    line-height: 1.2;
    vertical-align: middle;
    margin-left: 0.5em;
}

.dloanArea{ background: #fff; margin-top: 10.666vw; padding: 10.666vw 0;}
.dloanArea p{padding: 0 4vw;}
.dloanArea .dloanFeaturesArea{padding: 0 4vw; margin-top: 10.666vw; text-align: center;}

.dloanFeaturesArea h3 {
    font-size: 1.25em;
    text-align: center;
    display: inline-block;
    background: #2254b9;
    padding: 0 1.125em;
    margin: 0 auto 1.25em;
    border-radius: 1.125em;
    color: #fff;
}
.dloanFeaturesBox{ padding-left: 40%; border-bottom: 1px solid #000; text-align: left; padding-bottom: 1em; box-sizing: border-box;}
.dloanFeaturesBox p{ padding: 0;}
.dloanFeaturesBox h4{ font-weight: bold;}
.dloanFeaturesBox + .dloanFeaturesBox{ margin-top: 1em;}
.dloanFeaturesBox1{background: url(../images/invisaligngo/s4-img01.png) top 35% left 5% / 30.95% auto no-repeat;}
.dloanFeaturesBox2{background: url(../images/invisaligngo/s4-img02.png) top 35% left 12% / 18.7% auto no-repeat;}
.dloanFeaturesBox3{background: url(../images/invisaligngo/s4-img03.png) top 35% left 16% / 11.58% auto no-repeat;}
.dloanFeaturesBox4{background: url(../images/invisaligngo/s4-img04.png) top 35% left 8.5% /  24.6% auto no-repeat;}
.dloanFeaturesBox5{background: url(../images/invisaligngo/s4-img05.png) top 35% left 11% /   19.36% auto no-repeat; border-bottom: 0;}

.dloanFeatureBox{background: #f4f4f4; padding: 4vw 0;}
.txtLL{ font-size: 1.1875em;}
.txtGaze{ display: inline-block; background: #2254b9; color: #fff; font-weight: bold; font-size: 1.684em; line-height: 1.1; padding: 0 0.4em 0 0.2em; font-style: italic;}

@media screen and (min-width: 900px) {
  .inB {
    display: inline;
    line-height: 3.75vw;
    vertical-align: middle;
    margin-left: 0;}
  .section.section04{ background: url(../images/invisaligngo/s4-bg01.jpg) top 0 right / 100% no-repeat , #e4ebf1; padding: 6.7vw 0 6.7vw;}
  .pliceBox{  /*min-width: 560px;*/ width: 54.9%; margin: 0 auto;}
  .pliceBox dt, .pliceBox dd{ height: 3.75vw;  line-height: 3.75vw; display: inline-block; vertical-align: middle;}
  .dloanArea{ background: #fff; margin-top: 6.25vw; padding: 6.25vw 0;}
  .dloanArea > p{max-width: 785px; margin: 0 auto;}
  .dloanArea .dloanFeaturesArea{ margin-top: 4.166vw; padding: 0;}

  .dloanFeaturesBox {
    text-align: center; padding-bottom: 1em;
    width: 33%; display: inline-block; padding: 0 5.88%; border: 0;
    vertical-align: top; padding-top: 7.638vw;
  }
  .dloanFeaturesBox + .dloanFeaturesBox { margin-top: 0; position: relative;}
  .dloanFeaturesBox + .dloanFeaturesBox:before{ content: ""; height: 60%; width: 1px; background: #000; position: absolute; left: 0; top: 30%;}
  .dloanFeaturesBox + .dloanFeaturesBox.dloanFeaturesBox4:before{ display: none;}
  .dloanFeaturesBox1{background: url(../images/invisaligngo/s4-img01.png) top 25% center/ 30.95% auto no-repeat;}
  .dloanFeaturesBox2{background: url(../images/invisaligngo/s4-img02.png) top 25% center / 18.7% auto no-repeat;}
  .dloanFeaturesBox3{background: url(../images/invisaligngo/s4-img03.png) top 25% center / 11.58% auto no-repeat;}
  .dloanFeaturesBox4{background: url(../images/invisaligngo/s4-img04.png) top 25% center /  24.6% auto no-repeat;}
  .dloanFeaturesBox5{background: url(../images/invisaligngo/s4-img05.png) top 25% center /   19.36% auto no-repeat; border-bottom: 0;}

  .dloanFeatureBox { padding: 2vw 0; width: 50.98%; margin: 0 auto; margin-top: 4.166vw;}
}

/****section4***/
.section05{ }
.section05 > div > p{ margin-bottom: 8vw;}

.deductionBox{
    background: #f4f4f4;
    border: 1px solid #ccc;
    padding: 2.66vw 4vw;
    border-radius: 4px;
    box-sizing: border-box;
}
.deductionBox + .deductionBox{ margin-top: 2.666vw;}
.deductionBox h3{ font-weight: bold;}

@media screen and (min-width: 900px) {
  .section05 > div > p{ text-align: center; max-width: 756px; margin: 0 auto 2.777vw;}
  .section05{ text-align: center;}
  .deductionBox { width: 47.7%; display: inline-block; padding: 1em; vertical-align: top; margin: 0 1.9% 0 0; text-align: left;}
  .deductionBox + .deductionBox { margin: 0 0 0 1.9%; padding-bottom: 1em;}
}




.sectionRecommended{ background: url(../images/invisaligngo/sRecommended-img02.jpg) right bottom 24vw / 80% auto no-repeat ,#edf5fe;}
.recommendedArea{ }
.recommendedArea figure{ margin: 2vw 8vw;}
.recommendedPoints{ background: #fff; margin: 8vw 2vw; padding: 1.2em; font-size: 1.125em;}
.recommendedPoints ul li{ display: block; }
.recommendedPoints ul li + li{ margin-top: 0.8em;}
.recommendedTxt{ padding: 0vw 2.4vw 48vw; }


.sectionChoose{ background: url(../images/invisaligngo/sChoose-bg.jpg) center center / auto 100%;}

.ChooseBox{ position: relative;}

.ChooseBox h3 {
  font-size: 1.3em;
  font-family: 'Noto Serif JP', serif;
  vertical-align: ;
  text-align: left;
  line-height: 1.3;
  letter-spacing: -0.03em;
  background: url(../images/invisaligngo/icon-reason.png) left center / auto 80% no-repeat;
  padding-left: 18%;
  margin-bottom: 0.5em;
}

.ChooseBox h3.line1 {
  line-height: 2.6;
  background: url(../images/invisaligngo/icon-reason.png) left center / auto 80% no-repeat;
}

.ChooseBox + .ChooseBox{ margin-top: 2em;}

.youtubeBox{ width: 100%; height: 0; padding-bottom: 56.25% ; display: block; position: relative;}
.youtubeBox iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.ChooseBox > .youtubeBox{ margin-top: 0.8rem;}
.ChooseBox figure.sideFig{ margin-top: 0.8rem; }

@media screen and (min-width: 900px) {
  .sectionRecommended { background: url(../images/invisaligngo/sRecommended-img02.jpg) right bottom 12vw / 37% auto no-repeat ,#edf5fe;}

  .recommendedArea figure { margin: 0; float: left; width: 37%;}
  .recommendedPoints { background: #fff; margin: 0 6% 0 40%; padding: 2em; font-size: 1.125em;}
  .recommendedTxt{ clear: both; margin-top: 4em; width: 60%; padding: 0 4% 16.7vw;}

  .sectionChoose { background: url(../images/invisaligngo/sChoose-bg.jpg) center center / cover; text-align: center;}
  .ChooseBox h3 { font-size: 2em; padding-left: 18.4%;}
  .ChooseBox + .ChooseBox{ margin-top: 0em;}
  .ChooseBox{ display: inline-block; width: 49.5%; text-align: left; padding: 0 2%; box-sizing: border-box; vertical-align: top;}

  .ChooseBox + .ChooseBox + .ChooseBox{width: 100%; margin-top: 2.4em; padding-right: 34%;}
  .ChooseBox + .ChooseBox + .ChooseBox h3{padding-left: 12.4%;}
  .ChooseBox:last-child{ padding-bottom: 6%; }
  .ChooseBox figure.sideFig{ width: 30%; position: absolute; right: 0; top: 0; margin-top:0;}

  .youtubeBtn{ width: 100%; background: url(../images/invisaligngo/iTero.jpg) center center / cover; height: 0; padding-bottom: 60%; position: relative; margin-top: 1rem;}

  
  .section figure.youtubeBtn{ width: 30%; background: url(../images/invisaligngo/iTero.jpg) center center / cover; height: 0; padding-bottom: 17%; position: absolute; right: 0; top: 0; margin: 0; cursor: pointer; box-shadow: 2px 2px 24px rgb(0 0 0 / 20%);}
  .section figure.youtubeBtn:hover{ background: url(../images/invisaligngo/iTero_.jpg) center center / cover;}
  .youtubeBtn:before{
    content: ""; width: 25%; padding-bottom: 25%; border-radius: 50%; border: 1px solid#fff; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
  }
  .youtubeBtn:after{
    content: ""; width: 0; padding-bottom: 0; background:none;
    border-top: 0.7rem solid transparent; border-bottom: 0.7rem solid transparent; border-right: none; border-left: 1rem solid #fff;
    position: absolute; top: 50%; left: 50%; transform: translate(-48%, -50%);
  }
  .youtubeBtn:hover:before,
  .youtubeBtn:hover:after{ opacity: 0.2; }

  .movPopupArea{ position: fixed; width: 100%; height: 100vh; background: rgba( 0, 0, 0, 0.84); top: 0; left: 0; z-index: 10000; display: none;}
  .movPopupArea.on{ display: block;}
  .movPopupAreaInner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; opacity: 0; transition: 0.3s;}
  .movPopupArea.on .movPopupAreaInner{ opacity: 1;}
  .youtubeBox{ width: 100%; height: 0; padding-bottom: 56.25% ; display: block; position: relative;}
  .youtubeBox.sp{ display: none;}
  .youtubeBox iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  .on .youtubeBox iframe{display: block;}
  
  .closeBtn{ position: absolute; width: 60px; height: 60px; top: 2vw; right: 2vw; cursor: pointer;}
  .closeBtn:after,
  .closeBtn:before{ content: ""; display: block; background: #fff; width: 100%; height: 1px; position: absolute;}

  .closeBtn:after{ transform: rotate(45deg);top: 50%;}
  .closeBtn:before{ transform: rotate(135deg); top: 50%;}
  
}



/*追記 220720*/
.sectionCase{

}
.sectionCase p{  
  margin: 1em auto;
  max-width: 780px;
}

.sectionCase .caseImgArea{
  margin: 0 auto;
  max-width: 980px;
}
.sectionCase .caseImgArea .caseImgBox{
  padding: 0.3em 0;
}

.caseTable{
  margin: 1em auto;
  max-width: calc(980px - 2em);
  display: flex;
  flex-wrap: wrap ;
  background: #f4f4f4;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;


}
.caseTable dt{ width: 25%; padding: 0.4em 0.8em; font-size: 0.8em; box-sizing: border-box; line-height: 1.6; border-bottom: 1px solid #fff; border-right: 1px solid #fff; }
.caseTable dd{ width: 75%; padding: 0.4em 0.8em; font-size: 0.8em; box-sizing: border-box; line-height: 1.6; border-bottom: 1px solid #fff; }


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

  .sectionCase .caseImgArea{
    display: flex;
    flex-wrap: wrap ;
  }
  .sectionCase .caseImgArea .caseImgBox{
    padding: 1em;
    width: 50%;
    box-sizing: border-box;
  }
  .caseTable dt{ width: 30%; padding: 0.8em 1em;}
  .caseTable dd{ width: 70%; padding: 0.8em 1em;}
}