@charset "UTF-8";
/* CSS Document */



.sp {display: none;}
.pc {display: block;}

@media screen and (max-width:768px){
.sp {display: block;}
.pc {display: none;}
}






/* ----------------------------------------------
 ! base
 ---------------------------------------------- */
html, body { overflow-x: hidden;}


body { width:100%; overflow-x:hidden; height: auto; overflow: visible; font-family: "Noto Sans JP", sans-serif; color: #010101; font-weight: 400; }

#content {width: 100%; position: relative; padding-top: 43.1vw; margin: 6vw auto 0; background: url("/src/img/from40/mv_pc.webp") center top / 100% auto no-repeat;}

@media screen and (min-width:1366px){
body { min-width:1366px; }
#content {padding-top: 590px; margin: 80px auto 0; background: url("/src/img/from40/mv_pc.webp") center top / 100% auto no-repeat; width: 1366px;}
}

@media screen and (max-width:768px){
body { min-width:280px; }
#content {padding-top: 103vw; margin: 13vw auto 0; background: url("/src/img/from40/mv.webp") center top / 100% auto no-repeat;}
}


@media screen and (min-width:769px){
#from40-page-main {}
}

@media screen and (min-width:1366px){
#from40-page-main {width: 1366px; margin: auto;}
    
}








/* ----------------------------------------------
 ! header
 ---------------------------------------------- */





#header-nav { position: fixed; display: flex; align-items: center; height: 12.8vw; top: 0; left: 0; background-color: #fff; width: 100%; z-index: 999; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);}

#header-nav .header-txt {font-size: 4.1vw; margin-left: 6vw; color: 010101; font-weight: 600;}

#header-nav .header-txt em {font-size: 2.3vw; font-style: normal; display: block; font-weight: 500;}

#header-nav .contact-navi { display: flex; width: 100%;}

#header-nav .contact-navi a { display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; line-height: 2.3;}

#header-nav .contact-navi-item { height: 21.8vw; background-color: #D9D9D9; flex: 1; color: #676767; position: relative;}

#header-nav .contact-navi-item:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 1px; background: #676767;}

#header-nav .contact-navi-item:hover:after { opacity: 0.5;}

#header-nav .contact-navi-item:nth-of-type(2) { border-left: 1px solid #FFF;}

#header-nav .contact-navi-item span { text-align: center; font-size: 3.8vw; position: relative; margin-left: 3vw;}

#header-nav .tel_icon:before {content: ""; background: url("../img/from40/tel_icon.svg") center / cover no-repeat; position: absolute; display: inline-block; width: 4.1vw; height: 4.1vw; top: 50%; transform: translateY(-50%); left: -5vw;}

#header-nav .sp_icon:before {content: ""; background: url("../img/from40/sp_icon.svg") center / cover no-repeat; position: absolute; display: inline-block; width: 3.3vw; height: 5.1vw; top: 50%; transform: translateY(-50%); left: -4vw;}

#header-nav .contact-navi-item em {font-style: normal; font-size: 4.1vw; font-weight: 600; text-align: center;}

#header-nav .contact-navi-item i {text-align: center; font-size: 3.5vw; font-style: normal;}


#header-nav-ul { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; transform: translateX(-100%); transition: transform 0.5s ease; z-index: 1100; overflow-y: auto; padding: 7vw 0 0 8vw; text-indent: -1.5em;}

#header-nav .active { opacity: 1; transform: translateX(0%); z-index: 1100;}

#header-nav .nav-list-item {position: relative;}

#header-nav .nav-list-item:after {content: ""; position: absolute; left: -11.1vw; bottom: 0; width: 115%; height: 1px; background: #D9D9D9;}

#header-nav .nav-list-item a { display: table; width: 100%; padding: 3.9vw 0;}

#header-nav .nav-list-item a:before { content: ""; background: url("../img/from40/navi-arrow.svg") center / cover no-repeat; display: inline-block; width: 3.5vw; height: 3.5vw;}

#header-nav .nav-list-item a .txt { margin-left: 8px; font-size: 3.5vw;}

#header-nav .navs { height: 21.8vw; display: flex; justify-content: center; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1200;}


#header-nav .trigger-wrap { background: #31A0D1; display: block; width: 14.5%; cursor: pointer; position: relative;}

#header-nav .trigger-wrap .trigger { position: absolute; top: 3vw; left: 0; right: 0; margin: 0 auto;}

#header-nav .trigger span { display: block; position: absolute; width: 7vw; border-bottom: solid 2px #FFF; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 0; right: 0; margin: 0 auto}

#header-nav .trigger span:nth-child(1) { top: 3.5vw;}

#header-nav .trigger span:nth-child(2) { top: 5vw;}

#header-nav .trigger span:nth-child(3) { top: 6.5vw;}

#header-nav .trigger-wrap .menu ,
#header-nav .trigger-wrap .close { color: #FFF; font-size: 3.3vw; position: absolute; bottom: 4vw; left: 0; right: 0; text-align: center; font-style: normal;}


#header-nav .trigger-wrap .close { display: none;}

#header-nav .trigger-wrap.active .menu { display: none;}

#header-nav .trigger-wrap.active .close { display: block;}

#header-nav .trigger-wrap.active span:nth-child(1) { top: 5vw; left: 0; transform: rotate(45deg);}

#header-nav .trigger-wrap.active span:nth-child(2) {opacity: 0;}

#header-nav .trigger-wrap.active span:nth-child(3) { top: 5vw; left: 0; transform: rotate(-45deg);}


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

#header-nav { height: 5.8vw;}

#header-nav .header-txt {font-size: 1.6vw; margin-left: 3vw;}

#header-nav .header-txt em {font-size: 0.8vw; }

#header-nav .contact-navi { flex-direction: column; width: 100%; gap:0.3vw; height: 15vw;}

#header-nav .contact-navi a { justify-content: space-evenly;line-height: 1.2;}

#header-nav .contact-navi-item { height: 6.3vw;}

#header-nav .contact-navi-item:nth-of-type(2) { border:none;}

#header-nav .contact-navi-item:nth-of-type(2):after { top:58%;}

#header-nav .contact-navi-item span {font-size: 1.1vw; margin-left: 1vw;}

#header-nav .tel_icon:before {width: 1.1vw; height: 1.1vw; left: -1.5vw;}

#header-nav .sp_icon:before { width: 1vw; height: 1.6vw; left: -1.1vw;}

#header-nav .contact-navi-item em {font-size: 1.3vw; }

#header-nav .contact-navi-item i {font-size: 1vw; }


#header-nav-ul {padding: 5vw; text-indent: -1.5em; padding-left: 4.5em; width: 50vw;}

#header-nav .nav-list-item:after {left: -4vw;}

#header-nav .nav-list-item a { padding: 1vw 0;}

#header-nav .nav-list-item a .txt { margin-left: 0.8vw; font-size: 1.1vw;}

#header-nav .nav-list-item a:before {width: 1.1vw; height: 1.1vw;}


    
#header-nav .navs { display: block; top: 8.7vw; left: auto; right: 0; bottom: auto; width: 13.7vw; height: auto;}
    
#header-nav .trigger-wrap {width: 100%; height: 4.4vw; margin-bottom: 0.3vw;}
    
#header-nav .trigger-wrap .trigger { left: 2vw; top: 0.3vw; right: auto;}
    
#header-nav .trigger span { width: 3vw; }
    
#header-nav .trigger span:nth-child(1) { top: 1vw;}

#header-nav .trigger span:nth-child(2) { top: 1.8vw;}

#header-nav .trigger span:nth-child(3) { top: 2.6vw;}


#header-nav .trigger-wrap .menu ,
#header-nav .trigger-wrap .close { font-size: 1.5vw; top: 1vw; bottom: auto; left: auto; right: 3vw;}
    
#header-nav .trigger-wrap.active { width: 100%;}
    

#header-nav .trigger-wrap .close { display: none;}

#header-nav .trigger-wrap.active .menu { display: none;}

#header-nav .trigger-wrap.active .close { display: block;}

#header-nav .trigger-wrap.active span:nth-child(1) { top: 1.7vw; left: 0; transform: rotate(45deg);}

#header-nav .trigger-wrap.active span:nth-child(2) {opacity: 0;}

#header-nav .trigger-wrap.active span:nth-child(3) { top: 1.7vw; left: 0; transform: rotate(-45deg);}

}



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

#header-nav { height: 80px;}

#header-nav .header-txt {font-size: 22px; margin-left: 40px;}

#header-nav .header-txt em {font-size: 12px; }

#header-nav .contact-navi { gap:3px; height: 193px;}

#header-nav .contact-navi-item { height: 90px;}

#header-nav .contact-navi-item span {font-size: 16px; margin-left: 12px;}

#header-nav .tel_icon:before {width: 16px; height: 16px; left: -20px;}

#header-nav .sp_icon:before { width: 15px; height: 24px; left: -16px;}

#header-nav .contact-navi-item em {font-size: 18px; }

#header-nav .contact-navi-item i {font-size: 16px; }


#header-nav-ul {padding: 67px; width: 560px;}

#header-nav .nav-list-item:after {left: -33px;}

#header-nav .nav-list-item a { padding: 16px 0;}

#header-nav .nav-list-item a .txt { margin-left: 12px; font-size: 16px;}

#header-nav .nav-list-item a:before {width: 16px; height: 16px;}

    
#header-nav .navs { top: 100px; width: 200px;}
    
#header-nav .trigger-wrap {height: 55px; margin-bottom: 3px;}
    
#header-nav .trigger-wrap .trigger { left: 53px; top: 6px;}
    
#header-nav .trigger span { width: 27px; }
    
#header-nav .trigger span:nth-child(1) { top: 14px;}

#header-nav .trigger span:nth-child(2) { top: 22px;}

#header-nav .trigger span:nth-child(3) { top: 30px;}


#header-nav .trigger-wrap .menu ,
#header-nav .trigger-wrap .close { font-size: 18px; top: 14px; right: 50px;}
    

#header-nav .trigger-wrap.active span:nth-child(1) { top: 22px; }

#header-nav .trigger-wrap.active span:nth-child(3) { top: 22px; }
}


/* ----------------------------------------------
 ! mv
 ---------------------------------------------- */

.mv-txt {position: absolute; left: 5.1vw; top: 5.1vw; font-size: 7vw; text-indent: -0.8em; padding-left: 1.6em; font-weight: 700; letter-spacing: 0.01em; background: linear-gradient(to bottom right, #0BB0E2, #0187CE); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.mv-txt span {display: inline-block; font-size: 9.2vw; line-height: 1.15;}

.mv-circle {position: absolute; top: 77.1vw; right: 22vw;}

.mv-circle li { width: 24.1vw; height: 21vw; background: linear-gradient(135deg,rgba(10, 174, 225, 0.9),rgba(1, 135, 206, 0.9)); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2.6vw;}

.mv-circle li:nth-of-type(2) {transform: translate(19vw, -32vw);}

.mv-circle li span {font-size: 3.5vw; line-height: 1.2;}

.mv-circle li span i {font-size: 3vw; font-style: normal;}

.mv-circle li strong {font-size: 6.6vw; font-weight: 700;}

.mv-circle li em {font-size: 4.1vw; font-weight: 700; font-style: normal;}

.banner-top {width: 89.7vw; margin: 8vw auto; box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.25);}

.banner-top img {width: 100%; height: auto;}



.top-txt {font-size: 5.6vw; font-weight: 700; text-align: center; margin: 8.2vw auto;}

.average-wrap {display: flex; justify-content: space-between; width: 89.7vw; margin: auto;}

.average-wrap dl {width: 44.3vw; background-color: #D6E6ED; padding: 1.5vw 0 3vw; position: relative;}

.average-wrap dt {font-size: 3vw; color: #fff; background-color: #000; text-align: center; width: 38.2vw; margin: auto;}

.average-wrap dd {font-size: 3.5vw; text-align: center;}

.average-wrap dl:first-of-type dd em {font-size: 2.5vw; font-style: normal; position: absolute; left: 10vw; bottom: 1vw;}

.average-wrap dl:nth-of-type(2) dd em {font-size: 2.5vw; font-style: normal; position: absolute; right: 9.5vw; bottom: 1vw;}

.average-wrap dd span {color: #31A0D1;}

.average-wrap dd strong {font-size: 8.2vw; font-weight: 700;}


@media screen and (min-width:769px){
  
.mv-txt {left: 54.9vw; top: 5.7vw; font-size: 3.6vw; text-indent: 0; padding-left: 0;}
    
.mv-txt span {font-size: 5.2vw;}

.mv-circle {top: 31.9vw; right: 25.1vw;}

.mv-circle li { width: 10.1vw; height: 8.3vw; }

.mv-circle li:nth-of-type(2) {transform: translate(8vw, -13vw);}

.mv-circle li span {font-size: 1.4vw;}

.mv-circle li span i {font-size: 1.1vw;}

.mv-circle li strong {font-size: 2.9vw; line-height: 1;}

.mv-circle li em {font-size: 1.4vw;}

.banner-top {width: 35.1vw; margin: 3.8vw auto;}

.top-txt {font-size: 2.1vw; margin: 6vw auto 4vw 14.8vw; display: inline-block;}

.average-wrap {width: 38.5vw; margin: -10vw 13.9vw 0 auto;}

.average-wrap dl {width: 18.8vw; padding: 0.8vw 0 1.5vw; }

.average-wrap dt {font-size: 1vw; width: 17.7vw;}

.average-wrap dd {font-size: 1.1vw; }
    
.average-wrap dl:first-of-type dd em {font-size: 1.1vw; left: 4.2vw; bottom: 0.6vw;}
    
.average-wrap dl:nth-of-type(2) dd {}

.average-wrap dl:nth-of-type(2) dd em {font-size: 1.1vw; right: 4vw; bottom: 0.6vw;}

.average-wrap dd strong {font-size: 3vw; }

}

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

.mv-txt {left: 750px; top: 79px; font-size: 50px; }
    
.mv-txt span {font-size: 72px;}

.mv-circle {top: 436px; right: 320px;}

.mv-circle li { width: 138px; height: 119px; }

.mv-circle li:nth-of-type(2) {transform: translate(108px, -182px);}

.mv-circle li span {font-size: 20px;}

.mv-circle li span i {font-size: 16px;}

.mv-circle li strong {font-size: 40px;}

.mv-circle li em {font-size: 20px;}

.banner-top {width: 480px; margin: 52px auto;}

.top-txt {font-size: 29px; margin: 74px auto 52px 216px; }

.average-wrap {width: 527px; margin: -130px 180px 0 auto;}

.average-wrap dl {width: 258px; padding: 7px 0 13px; }

.average-wrap dt {font-size: 14px; width: 242px;}

.average-wrap dd {font-size: 16px; }
    
.average-wrap dl:first-of-type dd em {font-size: 12px; left: 73px; bottom: 6px;}
    
.average-wrap dl:nth-of-type(2) dd {}

.average-wrap dl:nth-of-type(2) dd em {font-size: 12px; right: 68px; bottom: 6px;}

.average-wrap dd strong {font-size: 42px; }
}



/* ----------------------------------------------
 ! title
 ---------------------------------------------- */
 
.l-page__main-head01:before { content: ""; display: block; margin: 0 auto; background: url(../img/from40/title-icon.svg) no-repeat center top / contain;}

.l-page__main-head03:before, .l-page__main-head03:after { content: ""; background: url(../img/from40/title-icon2.svg) no-repeat center top / cover; display: block;}

.l-page__main-head03:after { transform: scale(-1, 1);}

.qa-head-title span {display: block; text-align: center; font-weight: 500; color: #31A0D1; font-size: 8.2vw; font-family: "Roboto", sans-serif; line-height: 1; margin: 0 0 6.4vw;}
 
.qa-head-title:after {content: ""; background: url(../img/from40/arrow-title.svg) no-repeat center top / cover; display: block; width: 4.6vw; height: 4.8vw; margin: 4.1vw auto 8.8vw;}

.title-line {content: ""; background: url(../img/from40/title-line.svg) no-repeat center 4vw / cover; background-size: 100%; width: 85.9vw; height: 10.4vw; margin: auto;}

.title-line2 { font-size: 5.6vw; position: relative; padding-bottom: 1vw; text-align: center; width: 79.4vw; margin: 0 auto 8.2vw;}

.title-line2:before {  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 3px;
background: linear-gradient( to right, transparent 0%, #31A0D1 15%, #31A0D1 85%, transparent 100% );}


.title-normal {font-size: 4.1vw; font-weight: 700; text-align: center; margin: 0 auto 7.1vw;}

.title-box {font-size: 4.1vw; font-weight: 600; text-align: center; border: 1px solid #010101; box-sizing: border-box; margin: 8.4vw auto;}

.l-page__main-txt01 {font-size: 4.1vw; line-height: 8.2vw; padding: 0;}

.l-page__main-space01 {margin-bottom: 1em;}

.u-text-center {text-align: center; font-size: 5.6vw; font-weight: 700; line-height: 8.2vw;}

.txt-wt {color: #fff;}



@media screen and (min-width:769px){
    
.qa-head-title {font-size: 1.9vw;}
    
.qa-head-title span {font-size: 3.5vw; margin: 0 0 2.3vw;}
 
.qa-head-title:after {width: 1.5vw; height: 1.7vw; margin: 1.8vw auto 3.4vw;}
    
.title-line {background: url(../img/from40/title-line.svg) no-repeat center 1.5vw / cover; background-size: 100%; width: 28.3vw; height: 3.4vw; font-size: 1.9vw;}

.title-line2 { font-size: 1.9vw; padding-bottom: 0.5vw; text-align: center; width: 39.5vw; margin: 0 auto 2.1vw;}

.title-line2:before {  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 2px;
background: linear-gradient( to right, transparent 0%, #31A0D1 15%, #31A0D1 85%, transparent 100% );}

.title-normal {font-size: 1.3vw; margin: 0 auto 2.3vw;}

.l-page__main-txt01 {font-size: 1.1vw; line-height: 2.3vw;}
    
.title-box {font-size: 1.6vw; padding: 0.7vw 0; margin: 2.6vw auto;}
    
.u-text-center {font-size: 1.9vw; line-height: 3.3vw;}

}

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

.qa-head-title {font-size: 26px;}
    
.qa-head-title span {font-size: 48px; margin: 0 0 32px;}
 
.qa-head-title:after {width: 25px; height: 26px; margin: 22px auto 62px;}
    
.title-line {background: url(../img/from40/title-line.svg) no-repeat center 20px / cover; width: 387px; height: 49px; font-size: 26px; background-size: 100%;}
    
.title-line2 { font-size: 26px; padding-bottom: 15px; width: 540px; margin: 0 auto 29px;}

.title-normal {font-size: 18px; margin: 0 auto 32px;}

.l-page__main-txt01 {font-size: 16px; line-height: 32px;}
    
.title-box {font-size: 23px; padding: 10px 0; margin: 48px auto;}
    
.u-text-center {font-size: 26px; line-height: 42px;}

}



/* ----------------------------------------------
 ! sec1
 ---------------------------------------------- */
 
#sec1 {width: 89.7vw; margin: 0 auto; padding: 10vw 0 17.4vw;}

#sec1 figure {width: 81.2vw; margin: auto;}

figure img {width: 100%; height: auto;}

figcaption {font-size: 2.8vw;}


.answer {background-color: #EDEFF4; width: 100%; padding: 12.3vw 0 8.2vw; position: relative; margin: 0 auto 8.2vw;}

.answer dt {background-color: #000; color: #fff; font-family: "Roboto", sans-serif; font-size: 4.6vw; position: absolute; top: -2.5vw; left: 50%; transform: translateX(-50%); width: 7.7vw; height: 7.7vw; text-align: center;}

.answer dd {line-height: 8.2vw; width: 79vw; margin: auto; font-size: 4.1vw;}


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

#sec1 {width: 45.3vw; padding: 2.9vw 0 6.4vw;}

#sec1 figure {width: 35.1vw;}

figcaption {font-size: 0.8vw;}
    
.answer { padding: 3.5vw 0; margin: 0 auto 2.3vw;}

.answer dt {font-size: 1.6vw; top: -1vw; width: 2.2vw; height: 2.2vw; line-height: 1.4;}

.answer dd {font-size: 1.1vw; line-height: 2.3vw; width: 38.5vw;}

}

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

#sec1 {width: 620px; padding: 32px 0 88px;}

#sec1 figure {width: 367px;}

figcaption {font-size: 12px;}
    
.answer { padding: 48px 0; margin: 0 auto 32px;}

.answer dt {font-size: 22px; top: -15px; width: 30px; height: 30px;}

.answer dd {font-size: 16px; line-height: 32px; width: 526px;}

}

/* ----------------------------------------------
 ! sec2
 ---------------------------------------------- */


#sec2 {width: 100%; content: ""; padding: 15.8vw 0; overflow: hidden; background: url("../img/from40/sec2_bg.webp") center top / 100% auto no-repeat;}

.sec2-txt {padding: 9.7vw 5.1vw; width: 89.7vw; font-size: 4.1vw; font-weight: 700; line-height: 7.1vw; background: rgba(255, 255, 255, 0.4); margin: 80.8vw auto 0;}

.sec2-txt2 {width: 89.7vw; margin: 0 auto 11.8vw;}

.dot-wrap {width: 89.7vw; margin: 27.6vw auto 12.3vw; padding: 8.2vw 10.2vw; border: 2px dotted #010101;}

.dot-wrap li {font-size: 4.1vw; margin-bottom: 4.1vw; font-weight: 600;}

.dot-wrap li:last-of-type {margin-bottom: 0;}

.dot-wrap li:before { content: ""; display: inline-block; background: url(../img/from40/check-icon.svg) no-repeat center center / cover; vertical-align: middle; width: 5.6vw; height: 5.1vw; margin-right: 3vw;}

.blue-bg {background-color: #31A0D1; width: 89.7vw; padding: 12.3vw 5.1vw; background: linear-gradient( to bottom right, #DBE8EE 0%, #E3EBEE 48%, #DCE5EB 100%); margin: auto;}

.before-line2 {position: relative; padding: 5.6vw 0;}

.before-line2:before {position: absolute; top: 0; left: -2vw; content: ""; display: inline-block; background: url(../img/from40/title-line2.svg) no-repeat center center / cover; background-size: 100%; width: 84.6vw; height: 1vw; }

.before-line2:after {position: absolute; bottom: 0; right: -2vw;; content: ""; display: inline-block; background: url(../img/from40/title-line2.svg) no-repeat center center / cover; background-size: 100%; width: 84.6vw; height: 1vw; transform: scaleX(-1);}

.sign-wrap { width: 76.6vw; margin: 0 auto 12.3vw;}

.sign-wrap li {display: flex; justify-content: space-between;}

.sign-wrap li:first-of-type {margin-bottom: 8.4vw;}

.sign-wrap li figure {width: 8.4vw;}

.speechBubble { position: relative; display: flex; align-items: center; justify-content: center; background-color: #31a0d1; text-align: left; font-size: 3.5vw; font-weight: 600;
  line-height: 1.5; color: #fff; width: 62.5vw;}

.speechBubble::after { content: ""; position: absolute; top: 50%; left: 0; border-style: solid; border-width: 2.8vw 3.1vw 0 0; border-color: transparent #31a0d1 transparent transparent; translate: -100% calc(-50% + 0.4px); transform: skew(0, 2deg); transform-origin: right;}




@media screen and (min-width:769px){
    
#sec2 {padding: 9.3vw 0; background: url("../img/from40/sec2_bg_pc.webp") center top / 100% auto no-repeat; position: relative;}
    
.sec2-wrap { width: 28.3vw; position: absolute; right: 24.2vw;}

.sec2-txt {padding: 0; width: 100%; font-size: 1.1vw; line-height: 2vw; background: none; margin: 3.1vw auto 0; }

.sec2-txt2 {width: 45.3vw; margin: 0 auto 3.5vw; }

.dot-wrap {width: 45.3vw; margin: 40.5vw auto 2.3vw; padding: 1.7vw 3.3vw; }
    
.dot-wrap ul {display: flex; justify-content: space-between; flex-wrap: wrap;}

.dot-wrap li {font-size: 1.1vw; margin-bottom: 0.5vw; width: 50%;}

.dot-wrap li:before { width: 1.6vw; height: 1.4vw; margin-right: 0.8vw;}
    
.blue-bg {width: 45.3vw; padding: 3.5vw 2.5vw;}

.before-line2 {padding: 1.6vw 0;}

.before-line2:before {left: 0; width: 40.2vw; height: 0.5vw; }

.before-line2:after {right: 0; width: 40.2vw; height: 0.5vw; }

.sign-wrap { width: 24.7vw; margin: 0 auto 3.5vw;}

.sign-wrap li:first-of-type {margin-bottom: 1.7vw;}

.sign-wrap li figure {width: 3.2vw;}

.speechBubble { font-size: 1.1vw; line-height: 1.5; width: 19.7vw;}

.speechBubble::after { border-width: 0.8vw 1.1vw 0 0;}

}

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

#sec2 {padding: 120px 0; }
    
.sec2-wrap { width: 387px; right: 331px;}

.sec2-txt {font-size: 16px; line-height: 28px; margin: 40px auto 0; }

.sec2-txt2 {width: 620px; margin: 0 auto 54px; }

.dot-wrap {width: 620px; margin: 590px auto 22px; padding: 32px; }

.dot-wrap li {font-size: 16px; margin-bottom: 8px; }

.dot-wrap li:before { width: 26px; height: 16px; margin-right: 8px;}
    
.blue-bg {width: 620px; padding: 40px 32px;}

.before-line2 {padding: 22px 0;}

.before-line2:before {width: 550px; height: 8px; }

.before-line2:after {width: 550px; height: 8px; }

.sign-wrap { width: 338px; margin: 0 auto 48px;}

.sign-wrap li:first-of-type {margin-bottom: 24px;}

.sign-wrap li figure {width: 46px;}

.speechBubble { font-size: 16px; width: 270px;}

.speechBubble::after { border-width: 12px 16px 0 0;}
}



/* ----------------------------------------------
 ! sec3
 ---------------------------------------------- */
 
#sec3 {width: 100%; margin: auto;}

.sec3-bg {background-color: #f1f1f1;}

.figure-wrap {position: relative; margin: 12.3vw 0 23.8vw; }

.figure-wrap dt {top: 0; left: 0;}

.figure-wrap dd {border: 2px solid #010101; box-sizing: border-box; box-shadow: 3px 3px 0 #010101; font-size: 4.1vw; text-align: center; font-weight: 700; padding: 6.1vw 0;
width: 89.7vw; margin: auto; background-color: #fff; position: absolute; bottom: -15vw; left: 50%; transform: translateX(-50%);}

.sec3-wrap {width: 89.7vw; margin: auto; padding: 12.3vw 0;}

.sec3-figure {width: 100%; margin: 0 auto;}



.point-ul {margin-bottom: 10.2vw;}

.point-ul li { display: flex; flex-direction: column; font-weight: 700; font-size: 5.1vw; line-height: 5.6vw; margin-bottom: 6.4vw; position: relative; color: #31A0D1; text-align: center; border: 1px solid #BDC1C3; box-sizing: border-box; padding: 5.3vw 0;}

.point-ul li:before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 9vw solid #f1f1f1; border-right: 9vw solid transparent;}

.point-ul li span {position: absolute; top: -2vw; left: -1vw; font-size: 9.2vw; font-weight: 300;}

.point-ul li em {font-style: normal; color: #010101; font-size: 3.8vw; font-weight: 400;}




#sec3 .blue-bg p {font-size: 4.1vw; line-height: 7.2vw;}

.sec3-txt {font-size: 4.1vw; line-height: 8.2vw; margin: 8vw auto;}


.bg-bl-txt {font-size: 4.1vw; color: #fff; background-color: #000; line-height: 6.4vw; padding: 6.6vw 0; text-align: center; font-weight: 700; margin-top: 10.2vw;}


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

.figure-wrap {margin: 4.6vw 0 7.4vw;}

.figure-wrap dt {width: 45.3vw; margin: auto;}

.figure-wrap dd { font-size: 1.3vw; padding: 2.1vw 0; width: 40.1vw;  bottom: -5.5vw; }

.sec3-wrap {width: 45.3vw; padding: 5.8vw 0;}

.sec3-figure {}
    
    
    
.point-ul {margin-bottom: 3.2vw;}

.point-ul li { flex-direction: row; justify-content: center; font-size: 1.4vw; line-height: 1.6vw; padding: 1.7vw 0; margin-bottom: 1.8vw;}

.point-ul li:before {top: 0; left: 0; border-top: 2vw solid #f1f1f1; border-right: 2vw solid transparent;}

.point-ul li span {top: -1vw; left: -0.3vw; font-size: 2.6vw;}
    
.point-ul li em {font-size: 1.1vw; margin-left: 0.4vw;}
    
    
    
#sec3 .blue-bg p {font-size: 1.1vw; line-height: 2.2vw;}

.sec3-txt {font-size: 1.1vw; line-height: 2.2vw; margin: 3vw auto;}

.bg-bl-txt {font-size: 1.3vw; line-height: 1.8vw; padding: 1.8vw 0; margin-top: 2.9vw;}

}

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

.figure-wrap {margin: 63px 0 102;}

.figure-wrap dt {width: 620px;}

.figure-wrap dd { font-size: 18px; padding: 29px 0; width: 546px;  bottom: -72px; }

.sec3-wrap {width: 620px; padding: 80px 0;}

.sec3-figure {}
    
    

.point-ul {margin-bottom: 40px;}

.point-ul li { font-size: 20px; padding: 24px 0; line-height: 22px; margin-bottom: 25px;}

.point-ul li:before {top: 0; left: 0; border-top: 24px solid #f1f1f1; border-right: 24px solid transparent;}

.point-ul li span {top: -10px; left: -4px; font-size: 36px;}
    
 .point-ul li em {font-size: 16px; margin-left: 6px;}
    
    
    
    
#sec3 .blue-bg p {font-size: 16px; line-height: 32px;}

.sec3-txt {font-size: 16px; line-height: 32px; margin: 40px auto;}

.bg-bl-txt {font-size: 18px; line-height: 25px; padding: 25px 0; margin-top: 40px;}

}

/* ----------------------------------------------
 ! sec4
 ---------------------------------------------- */
 
#sec4 {width: 100%; padding: 12.3vw 0; background-color: #f1f1f1;}

.sec4-wrap {width: 89.7vw; margin: 6.1vw auto 0;}

.sec4-txt {font-size: 3.3vw; margin-bottom: 8.2vw;}


/* 症例 */

.c-tab__item {border-radius: 10px 10px 0 0; border: 0.076rem solid #010101; color: #010101; position: relative;}

.c-tab__item.is-checked { background: #010101; color: #ffffff;}

.c-tab__item[data-target="for-case10-after"]::after { content: ""; position: absolute; top: -7vw; right: 15vw; width: 14vw; height: 5vw; background: url("../img/from40/icon-tap.svg") no-repeat center / contain;}

.c-tab__item.is-checked[data-target="for-case10-after"]::after { display: none;}

.c-tab__content {background: #f1f1f1; padding: 8.2vw 0 4.1vw;}

.js-table-readmore {margin: 8.2vw auto;}

.case-table,
.case-table td,
.case-table th { border: 1px solid #BDC1C3; border-collapse: collapse; background-color: #fff; font-size: 2.5vw; color: #000;}

.case-table td,
.case-table th {padding: 2.5vw;}

.case-table th {font-weight: 600; width: 32%;}

.js-table-readmore__inner { max-height: 51.2vw; overflow: hidden; position: relative;}

.js-table-readmore__inner::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 20.5vw; background: linear-gradient(rgba(241,241,241,0), rgba(241,241,241,1)); pointer-events: none;}

.js-table-readmore__inner.is-open { max-height: none;}

.js-table-readmore__inner.is-open::after { display: none;}

.l-footer__access-block:after {content: none;}

.js-table-readmore__btn {background-color: #010101; color: #fff; font-size: 3.5vw; position: absolute; left: 50%; transform: translateX(-50%); margin-top: 3vw; padding: 1vw;}

.js-table-readmore__btn:hover {cursor: pointer;}



@media screen and (min-width:769px){
    
#sec4 {padding: 5.8vw 0;}

.sec4-wrap {width: 45.3vw; margin: 1.7vw auto 0;}

.sec4-txt {font-size: 1vw; margin-bottom: 2.9vw; text-align: center;}


/* 症例 */

.c-tab__item[data-target="for-case10-after"]::after { top: -3vw; right: 8vw; width: 6vw; height: 3vw; }

.c-tab__content {padding: 2.9vw 0 0;}

.js-table-readmore {margin: 3.5vw auto 6.2vw;}

.case-table,
.case-table td,
.case-table th { font-size: 1vw;}

.case-table td,
.case-table th {padding: 1vw;}

.case-table th {width: 32%;}

.js-table-readmore__inner { max-height: 21.2vw;}

.js-table-readmore__inner::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 20.5vw; background: linear-gradient(rgba(241,241,241,0), rgba(241,241,241,1)); pointer-events: none;}

.js-table-readmore__btn {font-size: 1vw; margin-top: 1vw; padding: 0.5vw;}


}

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

#sec4 {padding: 80px 0;}

.sec4-wrap {width: 620px; margin: 40px auto 0;}

.sec4-txt {font-size: 15px; margin-bottom: 40px; }


/* 症例 */

.c-tab__item[data-target="for-case10-after"]::after { top: -35px; right: 100px; width: 80px; height: 26px; }

.c-tab__content {padding: 40px 0 0;}

.js-table-readmore {margin: 48px auto 80px;}

.case-table,
.case-table td,
.case-table th { font-size: 15px;}

.case-table td,
.case-table th {padding: 15px;}

.case-table th {width: 32%;}

.js-table-readmore__inner { max-height: 250px;}

.js-table-readmore__inner::after { height: 210px; }

.js-table-readmore__btn {font-size: 15px; margin-top: 15px; padding: 7px;}

}


/* ----------------------------------------------
 ! sec5
 ---------------------------------------------- */
 
#sec5 {width: 100%; padding: 12.3vw 0 20.5vw;}

.sec5-wrap {width: 89.7vw; margin: auto;}

#sec5 .l-page__main-txt01 {margin-top: 3.2vw;}

.price-list {width: 100%; margin: 8.2vw 0;}

.price-list,
.price-list td,
.price-list th {border: 1px solid #BDC1C3; border-collapse: collapse; font-size: 3vw;}

.price-list td,
.price-list th {padding: 4.1vw 2vw;}

.price-list th {background-color: #f1f1f1; width: 40%; font-weight: 500; color: #010101;}

.price-list td {vertical-align: middle; text-align: right;}


#sec5 .blue-bg {padding: 8.2vw 0 12.3vw;}

#sec5 .blue-bg p {font-size: 2.8vw; width: 84.6vw; margin: 3vw auto 0;}

.price-dl-wrap {display: flex; justify-content: space-between; width: 84.6vw; margin: auto; gap:3.5vw;}

.price-dl {font-size: 3.5vw; text-align: center; width: 100%;}

.price-dl dt {background-color: #fff; min-height: 26.1vw; display: flex; justify-content: center; align-items: center; flex-direction: column;}

.price-dl dd {background-color: #31A0D1; color: #fff;}


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

#sec5 {padding: 5.8vw 0; }

.sec5-wrap {width: 45.3vw;}

#sec5 .l-page__main-txt01 {margin-top: 2.9vw;}

.price-list { margin: 2.9vw 0;}

.price-list,
.price-list td,
.price-list th {font-size: 1.1vw;}

.price-list td,
.price-list th {padding: 1.3vw;}


#sec5 .blue-bg {padding: 2.3vw 2.1vw;}

#sec5 .blue-bg p {font-size: 0.8vw; width: 41.8vw; margin: 1.4vw auto 0;}

.price-dl-wrap {width: 40.9vw; gap:0.7vw;}

.price-dl {font-size: 1vw;}
    
.price-dl:first-of-type {width: 27.9vw}
    
.price-dl:nth-of-type(2) {width: 12.2vw}

.price-dl dt {min-height: auto; flex-direction: row; justify-content: space-evenly;}
    
.price-dl dt span {border-right: 1px solid #D9D9D9; padding: 2vw 1.8vw;}
    
.price-dl dt span:last-of-type {border: none;}

.price-dl dd {}


}

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

#sec5 {padding: 80px 0; }

.sec5-wrap {width: 620px;}

#sec5 .l-page__main-txt01 {margin-top: 40px;}

.price-list { margin: 40px 0;}

.price-list,
.price-list td,
.price-list th {font-size: 16px;}

.price-list td,
.price-list th {padding: 18px;}


#sec5 .blue-bg {padding: 36px 30px;}

#sec5 .blue-bg p {font-size: 12px; width: 571px; margin: 20px auto 0;}

.price-dl-wrap {width: 560px; gap: 10px;}

.price-dl {font-size: 15px;}
    
.price-dl:first-of-type {width: 382px;}
    
.price-dl:nth-of-type(2) {width: 168px}
    
.price-dl dt span {padding: 28px 21px;}

}



/* ----------------------------------------------
 ! sec6
 ---------------------------------------------- */
 
#sec6 {width: 100%; background-color: #f1f1f1; padding: 12.3vw 0 14.1vw;}

#qa-accordion { margin-inline: auto; margin-top: 8.2vw; position: relative; width: 89.7vw;}

#qa-accordion .accordion-title { color: #31A0D1; cursor: pointer; font-size: 4.1vw; font-weight: 700; padding: 5.1vw 4.1vw; text-indent: -1.1em; padding-left: 2.1em;}

#qa-accordion .accordion-content { display: none; padding: 0 4.1vw 6.4vw;}

#qa-accordion .accordion-content p { font-size: 4.1vw; line-height: 7.8vw;}

.accordion-item { background-color: #fff; border: 1px solid #BDC1C3; box-sizing: border-box; margin-bottom: 2vw;}

.accordion-title { position: relative;}

.accordion-title::before { background: #BDC1C3; content: ""; height: 1px; position: absolute; right: 3.4vw; top: 50%; transform: rotate(90deg); transition: transform .3s ease-in-out; width: 3.8vw;}

.accordion-title::after { background: #BDC1C3; content: ""; height: 1px; position: absolute; right: 3.4vw; top: 50%; transition: opacity .3s ease-in-out; width: 3.8vw;}

.accordion-title.open::before { transform: rotate(180deg);}

.accordion-title.open::after { opacity: 0;}




@media screen and (min-width:769px){
    
#sec6 {width: 100%; padding: 5.8vw 0;}

#qa-accordion { margin-top: 2.9vw; width: 45.3vw;}

#qa-accordion .accordion-title { font-size: 1.1vw; padding: 1.4vw 3.4vw;}

#qa-accordion .accordion-content {padding: 0 2.4vw 1.4vw;}

#qa-accordion .accordion-content p { font-size: 1.1vw; line-height: 2.1vw;}

.accordion-item { margin-bottom: 0.5vw;}

.accordion-title::before { right: 2.4vw; width: 1vw;}

.accordion-title::after { right: 2.4vw; width: 1vw;}

}

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

#sec6 {padding: 80px 0;}

#qa-accordion { margin-top: 40px; width: 620px;}

#qa-accordion .accordion-title { font-size: 16px; padding: 20px 34px;}

#qa-accordion .accordion-content {padding: 0 20px 20px;}

#qa-accordion .accordion-content p { font-size: 16px; line-height: 26px;}

.accordion-item { margin-bottom: 8px;}

.accordion-title::before { right: 20px; width: 15px;}

.accordion-title::after { right: 20px; width: 15px;}

}


/* ----------------------------------------------
 ! sec7
 ---------------------------------------------- */

#sec7 {padding: 12.3vw 0;}

.calendar-wrap {width: 89.7vw; margin: auto; position: relative;}

.calendar-table {margin: 8.2vw auto 0;}

.calendar-table tr {border-bottom: 1px solid #BDC1C3; }

.calendar-table tr:first-child {background-color: #D6E6ED; }

.calendar-table tr:last-child {border-bottom: none;}

.calendar-table th,
.calendar-table td {text-align: center; font-size: 3vw; line-height: 1.4; vertical-align: middle;}

.calendar-table th {font-weight: 500; color: #010101;}

.calendar-table td {padding: 3vw 0; width: 9.4vw;}

.calendar-table th:first-child { border-right: 1px solid #BDC1C3;}

.circle {color: #31A0D1;}

.triangle {color: #D8334E;}

.calendar-wrap p {font-size: 3vw; position: absolute; right: 0; bottom: -5vw;}

.time-table {margin: 13.5vw auto 0; width: 89.7vw;}

.time-table th {color: #010101; font-weight: 500; width: 33%;}


@media screen and (min-width:769px){
    
#sec7 {padding: 5.8vw 0;}

.calendar-wrap {width: 34.9vw;}

.calendar-table {margin: 2.9vw auto 0;}

.calendar-table th,
.calendar-table td {font-size: 1vw;}

.calendar-table td {padding: 0.8vw 0; width: 3.9vw;}

.calendar-wrap p {font-size: 0.9vw; bottom: -2vw;}

.time-table {margin: 3.5vw auto 0; width: 24.8vw; font-size: 1.1vw;}
    
.time-table th {width: 38%;}

}

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

#sec7 {padding: 80px 0;}

.calendar-wrap {width: 478px;}

.calendar-table {margin: 40px auto 0;}

.calendar-table th,
.calendar-table td {font-size: 15px;}

.calendar-table td {padding: 14px 0; width: 48px;}

.calendar-wrap p {font-size: 14px; bottom: -20px;}

.time-table {margin: 40px auto 0; width: 339px; font-size: 16px;}

}


/* ----------------------------------------------
 ! sec8
 ---------------------------------------------- */

#sec8 {background-color: #f1f1f1; padding: 12.3vw 0;}

.sec8-wrap {width: 89.7vw; margin: 8.2vw auto 0;}

.access-atttention {font-size: 4.1vw; font-weight: 700; background-color: #fff; text-align: center; border: 1px solid #BDC1C3; box-sizing: border-box; width: 73.3vw; margin: 6.1vw auto 4.1vw; padding: 4.1vw 0;}

.access-atttention span {color: #31A0D1;}

#sec8 figure {margin: 6.1vw auto 4.1vw;}

.sec8-txt {font-size: 4.1vw; line-height: 6.1vw; margin-bottom: 12.3vw;}

.access-dl { font-size: 4.1vw;}

.access-dl .car:before {content: ""; display: inline-block; background: url(../img/from40/car-icon.svg) no-repeat center center / cover; background-size: 100%; width: 5.6vw; height: 5.6vw; margin-right: 2.5vw; vertical-align: bottom;}

.access-dl .train:before {content: ""; display: inline-block; background: url(../img/from40/train-icon.svg) no-repeat center center / cover; background-size: 100%; width: 5.6vw; height: 5.6vw; margin-right: 2.5vw; vertical-align: bottom;}

.access-dl:last-of-type {margin-top: 8.2vw;}

.access-dl dd {padding-left: calc(5.6vw + 2.5vw);}

@media screen and (min-width:769px){
    
#sec8 {padding: 5.8vw 0;}

.sec8-wrap {width: 31.4vw; margin: 2.9vw auto 0;}

.access-atttention {font-size: 1.1vw; width: 45.3vw; margin: 2.9vw auto 1.1vw; padding: 1.1vw 0;}
    
.access-atttention span {margin-right: 2.5vw;}

#sec8 figure {margin: 2.9vw auto 2.5vw;}

.sec8-txt {font-size: 1.1vw; line-height: 1.7vw; margin-bottom: 2.5vw;}

.access-dl { font-size: 1.1vw;}

.access-dl .car:before { width: 1.6vw; height: 1.6vw; margin-right: 0.8vw;}

.access-dl .train:before {width: 1.6vw; height: 1.6vw; margin-right: 0.8vw; }

.access-dl:last-of-type {margin-top: 3.2vw;}
    
.access-dl dd {padding-left: calc(1.6vw + 0.8vw);}
    
}

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

#sec8 {padding: 80px 0;}

.sec8-wrap {width: 430px; margin: 40px auto 0;}

.access-atttention {font-size: 16px; width: 620px; margin: 40px auto 16px; padding: 16px 0;}
    
.access-atttention span {margin-right: 35px;}

#sec8 figure {margin: 30px auto 35px;}

.sec8-txt {font-size: 16px; line-height: 24px; margin-bottom: 30px;}

.access-dl { font-size: 16px;}

.access-dl .car:before { width: 22px; height: 22px; margin-right: 12px;}

.access-dl .train:before {width: 22px; height: 22px; margin-right: 12px; }

.access-dl:last-of-type {margin-top: 40px;}
    
.access-dl dd {padding-left: calc(22px + 12px);}

}

/* ----------------------------------------------
 ! sec9
 ---------------------------------------------- */
 
 
 #sec9 {padding: 12.3vw 0; background-color: #31A0D1; margin-bottom: 3vw;}
 
 .address-dl {border: 1px solid #BDC1C3; background-color: #fff; color: #31A0D1; box-sizing: border-box; width: 89.7vw; margin: 6.1vw auto 0; font-size: 4.1vw;}
 
 .address-dl dt,
 .address-dl dd {padding: 4.1vw 0 4.1vw 2.5vw;}
 
 .address-dl dt {border-bottom: 1px solid #BDC1C3; }
 
 .address-dl dd {border-bottom: 1px solid #BDC1C3;}
 
 .address-dl dd:last-of-type {border-bottom: none;}
 
.l-footer__copy {padding-bottom: 26vw; text-align: center;}



#toTop { position: fixed; bottom: 30vw; right: 1vw; border-radius: 50%; cursor: pointer; width: 14.7vw; height: 14.7vw; transition: opacity 0.3s ease; background: #010101 url("../img/from40/toTop.svg") no-repeat center / 45%;}

#toTop:hover {opacity: 0.5;}
 
@media screen and (min-width:769px){
#sec9 {padding: 3.5vw 0; margin-bottom: 0;}
 
 .address-dl {width: 45.3vw; margin: 1.7vw auto 0; font-size: 1.1vw;}
 
 .address-dl dt,
 .address-dl dd {padding: 1.1vw 0 1.1vw 0.7vw;}
 
.l-footer__copy {padding-bottom: 3vw;}

#toTop { bottom: 12vw; right: 4vw; width: 5.7vw; height: 5.7vw;}

}

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

#sec9 {padding: 48px 0; margin-bottom: 0;}
 
.address-dl {width: 620px; margin: 40px auto 0; font-size: 16px;}
 
.address-dl dt,
.address-dl dd {padding: 16px 0 16px 10px;}
 
.l-footer__copy {padding-bottom: 2.5rem;}

#toTop { bottom: 150px; right: 50px; width: 64px; height: 64px;}


}