@charset "UTF-8";
/* reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, address, em, img, small, strong, sup, dl, dt, dd, ol, ul, li, article, footer, header, menu, nav, section{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
h1,h2,h3,h4,h5,h6,p{font-size: 100%;}
html {font-size: 62.5%; background: #fff; scroll-behavior: smooth;}
body {font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; line-height:1; font-size: 1.4em; position:relative; top:0!important;}
footer, header,hgroup, nav, section{display:block;}
nav ul {list-style:none;}
a {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; transition: all .3s;}
* {margin: 0; padding:0; box-sizing: border-box;}
a:hover{opacity: .9;}

/* cording support */
.clear {clear: both;}
.clearfix {min-height:1px;}
.clearfix:after {content:".";display:block;clear:both;height:0;visibility:hidden;}
sup{font-size: 1.0rem;vertical-align: top;}
a{text-decoration:none;}
a:visited{}
small{font-size: 80%;margin-left: 3px;}

/* main */
main .inner{margin: 0 auto; padding: 0; max-width: 1440px;}
main section{position: relative;}
main h1,main h2,main p{position: absolute; display: block;}
main img{width: 100%;}

main #kv {margin: 0 0 -90px 0; z-index: 10;}
main #kv h1{width:17.152%; left:13.194%; top: 5.267%;}
main #kv .tel{width:19.583%; left:67.222%; top: 4.580%;}
main #kv .catch{width:73.611%; left:13.194%; top:19.459%;}
main #kv .btn{width:34.583%; left:18.125%; top:81.081%;}

main #thanks {margin: 0 0 -90px 0;padding-bottom: 110%;}
main #thanks h2{width:17.152%; left:13.194%; top:2.3%;}
main #thanks .thanks-header{background-image: url('../img/thanks-header-bar_bg.webp');background-position: center;background-repeat: no-repeat;background-size: cover;height:auto;padding: 4%;}
main #thanks .thanks-title{width:17.152%; left:41.194%; top:13.405%;}
main #thanks .tel{width:19.583%; left:67.222%; top:2%;}
main #thanks p.thanks-lead,main{ position: static; display: block;}
main #thanks p.thanks-lead,main #thanks p.btn { position: absolute;}
main #thanks p.thanks-lead{position: absolute; display: block; width: 68.65%; top: 18%; left: 15%;}
main #thanks .catch{width:73.611%; left:13.194%; top:19.459%;}
main #thanks .btn{width:34.583%; left:32.125%;  top: 80.349%;}

main #worries h2{width:45.208%; left:27.361%; top:6.403%;}
main #worries .catch{width:75.138%; left:12.430%; top:10.844%;}

main #solution h2{width:56.666%; left:21.666%; top:5.296%;}
main #solution .catch{width:52.638%; left:23.680%; top:15.370%;}
main #solution .sub{width:46.736%; left:26.666%; top:47.274%;}
main #solution .plan{width:75.138%; left:12.430%; top:63.237%;}

main #contact {margin: 174px 0 -2px 0;}
main #contact h2{width:75.208%; left:12.361%; top:14.5%; z-index: 10;}
main #contact .btn{width:34.583%; left:33.263%; top:59.5%; z-index: 10;}

main #reason {margin-top: -15%; z-index: -1;}
main #reason > picture.bg img{object-fit:cover; object-position:center top;clip-path: inset(0 0 2px 0);}
main #reason h2{width:45.972%; left:30%; top: 10.348%; z-index: 10;}
main #reason .graph{width:68.125%; left:15.972%; top: 22.011%; z-index: 10;}

main #service h2{width:68.055%; left:15.833%; top:4.849%;}
main #service .catch{width:68.75%; left:15.138%; top:13.482%;}
main #service .achievements{width:68.055%; left:15.833%;  top: 49.799%;}
main #service .sub{width:68.055%; left:15.833%; top: 66.579%;}
main #service .catch_sub{width:69.097%; left:15.833%;  top: 75.162%;}

main #flow h2{width:36.25%; left:31.944%; top:7.616%;}
main #flow .flow{width:68.125%; left:15.972%; top:17.745%;}

main #voice {margin-top: 28%;}
main #voice h2{width:23.263%; left:38.333%; top:7.892%}
main #voice .voice{width:76.388%; left:11.805%; top:18.295%;}

main #faq {margin-top: 10%;}
main #faq h2{width:27.430%; margin: 0 auto; padding: 6.944% 0 4.166% 0; position: relative;}
main #faq .accordion{margin: 0 auto; max-width: 1000px; width: 80%; padding-bottom: 6.944%; font: 16px / 1.6em "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
main #faq .accordion dl{filter: drop-shadow(0 10px 10px rgba(0, 95, 182, 0.3));}
main #faq .accordion dl:not(:first-child) {margin-top: 10px;}
main #faq .accordion dl dt{background-image: linear-gradient(90deg, #005fb6, #2d84d5); cursor: pointer; font-weight: 700; font-size: 20px; padding: 22px 87px; position: relative; color: #fff;}
main #faq .accordion dl dt::before{content: ""; display: inline-block; width: 38px; height: 38px; background-image: url(../img/faq_q.webp); background-size: contain; background-repeat: no-repeat; position: absolute; top: 14px; left: 24px;}
main #faq .accordion dl dt:after{content: ""; position: absolute; top: 45%; right: 20px; width: 0; height: 0; border: 10px solid transparent; border-top-color: #fff;}
main #faq .accordion dl dt.open:after{transform: rotate(-180deg); top: 28%;}
main #faq .accordion dl dd{padding: 20px 30px 30px 87px; display: none; background: #fff; margin: 0; position: relative; display: none; transition: all .3s;}
main #faq .accordion dl dt.open + dd{display: block;}
main #faq .accordion dl dd::before{content: ""; display: inline-block; width: 38px; height: 38px; background-image: url(../img/faq_a.webp); background-size: contain; background-repeat: no-repeat; position: absolute; top: 28px; left: 24px;}

main #inq{background: #f6f6f6; margin: 0 auto; font: 18px / 1.6em "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; padding-bottom: 6.944%;}
main #inq h2{width:19.583%; margin: 0 auto; padding: 6.944% 0 4.166% 0; position: relative;}
main #inq .catch{width:70.833%; margin: 0 auto; padding-bottom:4.166%; position: relative;}

main #inq table {width: 100%; margin: 0 auto; max-width: 1060px; padding: 0 30px;}
main #inq td,main #inq  th{padding: 0 0 25px 25px; text-align: left;font-size: 18px;}
main #inq th {padding: 18px 0 0 0; vertical-align: top;}
main #inq span{background: #005fb6; color: #fff; font-size: 16px; font-weight: 400; text-align: center; line-height: 1.5em; float: right; box-sizing: border-box; padding: 0 7px; margin-top: 5px;}
main #inq span.opt{background:#777;color:#fff;font-size:16px;font-weight:400;text-align:center;line-height:1.5em;float:right;box-sizing:border-box;padding:0 7px;margin-top:5px;}
main #inq input, main #inq textarea, main #inq select {padding: 20px; font-size: 1em; letter-spacing: 1px; border: none; width: 100%; border-radius: 5px; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-sizing: border-box;}
main #inq input[type="file"]{display:none;} 
main #inq .file-btn{display:inline-block;padding:6px 14px;border:1px solid #ccc;border-radius:4px;cursor:pointer;font-size:18px;background:#eee;color:#000;}
main #inq .tr--psefile td {padding-top: 14px;}
main #inq textarea {width: 100%; height: 150px; resize: vertical; }
main #inq textarea:focus {outline: 1px solid #86cbff;}
main #inq input:focus {outline: 1px solid #86cbff;}
main #inq input[type="checkbox"]{width: auto;}
main #inq input + input{margin-top: 30px;}
main #inq input + em{margin-left: .5em;}
main #inq em{font-style: normal; margin-right: .5em;}
main #inq input.--half{width:calc(50% - 1.75em);}
main #inq ::placeholder{color: #d0d0d0;}
main #inq a.button,main #inq .btn{width: 300px; height: 60px; color: #fff;font-weight: 700; cursor: pointer; background-image: linear-gradient(90deg, #fe9315, #ea6000); border-radius: 0px; border: none; letter-spacing: 1px; line-height: 0em; display: block; margin:50px  auto 0;}
main #inq.submit{margin-top: 30px;}
/* override: filename label should be plain text */
main #inq #attachment-name{background: transparent; color: #000; padding: 0; margin: 0 0 0 10px; float: none; display: inline-block;}

main #footer{background: #21293a; padding: 2.083% 0; font: 14px / 1.4em "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; text-align: center; color:#fff;}
main #footer a{text-decoration: underline; margin-bottom: 2.083%; color:#fff; display: block;}
main #footer credit{font: 12px / 1.2em "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; display: block;}

main .bnr{text-align: center; z-index: 100; position: fixed; padding: 0;filter: drop-shadow(0 0 7px #aaa); transition: 0.3s ease-in-out; width: 352px; bottom: 20px; right: 20px;}
main .bnr p{position: relative; margin: 0 auto;}
main .bnr .mail{width:93.75%;}
main .bnr button{cursor: pointer; width: 30px; height: 30px; background: url(../img/close.webp) no-repeat center center/30px 30px; position: absolute; top: -10px; left: -5px; margin: 0; padding: 0; border: none; letter-spacing: 1px; line-height: 0em; z-index: +1;}

@media screen and (min-width: 769px) {
main .inner{box-shadow: 10px 0px 10px -10px #f1adad1a, -10px 0px 10px -10px rgba(0, 0, 0, .1);}
main #kv .tel a,main .bnr .tel a{pointer-events: none;}
}

@media screen and (max-width: 768px) {
a {transition: none;}

main #kv {margin: 0 0 -90px 0;}
main #kv h1,h2{width:37.066%; left:4.266%; top: 2.578%;}
main #kv .tel{width:47.6%; left:48.933%; top: 2.062%;}
main #kv .catch{width:92.133%; left:4.266%; top:11.075%;}
main #kv .btn{width:82.933%; left:8.533%; top:90.349%;}

main #thanks {margin: 0 0 -90px 0;padding-bottom: 250%;}
main #thanks .thanks-header{background-image: url('../img/thanks-header-bar_bg.webp');background-position: center;background-repeat: no-repeat;background-size: cover;height:auto;padding: 8%;}
main #thanks h2{width:37.066%; left:4.266%; top:2%;}
main #thanks .tel{width:47.6%; left:48.933%; top:1.6%;}
main #thanks .thanks-title{width:47.152%; left:28.194%; top: 13.405%;}
main #thanks p.thanks-lead,main{ position: static; display: block;}
main #thanks p.thanks-lead,main #thanks p.btn { position: absolute;}
main #thanks p.thanks-lead{position: absolute; display: block; width: 95%; top: 19%; left: 3%;}
main #thanks .catch{width:92.133%; left:4.266%; top:11.075%;}
main #thanks .btn{width:82.933%; left:8.533%;  top: 78.349%;}

main #worries{margin: -68% 0 -5% 0; z-index: -1;}
main #worries h2{width:86.8%; left:6.666%; top:13.129%;}
main #worries .catch{width:92.266%; left:3.466%; top: 16.296%;}

main #solution h2{width:93.333%; left:3.333%; top:5.872%;}
main #solution .catch{width:92%; left:4%; top:10.377%;}
main #solution .sub{width:89.733%; left:5.2%; top:31.393%;}
main #solution .plan{width:75.466%; left:12.266%; top:40.237%;}


main #contact {margin: 138px 0 -2px 0; z-index: 10;}
main #contact h2{width:92.266%; left:3.866%; top:14.709%;}
main #contact .btn{width:82.933%; left:9.733%; top:60.593%;}

main #reason  {margin-top: -19%}
main #reason  > picture.bg img{object-fit:cover;object-position:center top;background-repeat: repeat;}
main #reason h2{width:86.4%; left:11.466%; top: 2.209%;}
main #reason .graph{width:92%; left:4%; top: 6.46%;}

main #service h2{width:92%; left:4%; top:4.918%;}
main #service .catch{width:93.333%; left:4%; top:11.803%;}
main #service .achievements{width:94.666%; left:4%; top: 66.049%;}
main #service .sub{width:92%; left:4%;  top: 96.579%;}
main #service .catch_sub{width:92%; left:4%;  top: 102.162%;}

main #flow h2{width:69.6%; left:15.2%; top:6.332%;}
main #flow .flow{width:92%; left:4%; top:13.456%;}

main #voice {margin-top: 163%;}
main #voice h2{width:44.666%; left:27.733%; top:5.17%;}
main #voice .voice{width:85%; left:8%; top:9.667%;}

main #faq {margin-top: 55%;}
main #faq h2{width:52.666%; padding: 14.666% 0 6.666% 0;}
main #faq .accordion{width: 92%; padding-bottom: 14.666%;}
main #faq .accordion dl dt{font-size: 16px; padding: 4% 10% 4% 14%; line-height: 1.5; }
main #faq .accordion dl dt::before,main #faq .accordion dl dd::before{width: 20px; height: 20px; top: 34%; left: 5%;}
main #faq .accordion dl dt:after{right: 4%; border: 8px solid transparent; border-top-color: #fff;}
main #faq .accordion dl dd{padding: 4% 5% 4% 14%; font-size: 14px; line-height: 1.7;}
main #faq .accordion dl dd::before{top: 20px;}

main #inq{background: #f6f6f6; padding-bottom: 6.666%;}
main #inq h2{width:37.6%; padding: 14.666% 0 6.666% 0;}
main #inq .catch{width:86.666%; padding-bottom:6.666%;}
main #inq  td,main #inq  th{display: block; padding: 0 0 2%; font-size: 14px;}
main #inq td{padding-bottom: 3%;}
main #inq span{float: none; font-size: 12px; padding: 1px 7px 2px;margin: 5px;}
main #inq span.opt{float:none;font-size:12px;padding:1px 7px 2px;margin:5px;}
main #inq input,main #inq textarea,main #inq select{padding: 4%;}
main #inq input + input{margin-top: 3%;}
main #inq a.button,main #inq .btn{width: 300px; height: 60px; color: #fff;font-weight: 700; cursor: pointer; background-image: linear-gradient(90deg, #fe9315, #ea6000); border-radius: 0px; border: none; letter-spacing: 1px; line-height: 0em; display: block; margin:30px  auto 0;}

main #footer{padding: 8% 0 calc(8% + 52px) 0;}
main #footer a{text-decoration: underline; margin-bottom: 8%;}

main .bnr{width:100%; bottom: 0; right: 0; background: #fff; padding-top: 2px;}
main .bnr .tel{margin-right: .25em;}
main .bnr .tel,
main .bnr .mail{width:48%; display: inline-block;}
main .bnr button{top: -20px; left: 0;}
}