@charset "utf-8";
img{
    display: block;
    width:100%;
    height:auto;
    object-fit: cover;
}
a.anchor{
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}
body{
    font-family: 'Noto Sans JP', sans-serif;
}
.pc{
    display: block;
}
.ip{
    display: none;
}
.sp{
    display: none;
}
.page-top{
    position: fixed;
    right:0px;
    bottom:0px;
    z-index: 99;
    cursor: pointer;
}
.link-box.sp{
    display: none;
}
.wrapper01{
    width:80vw;
    max-width:1280px;
    margin:auto;
}
.wrapper02{
    width:70vw;
    max-width:1024px;
    margin:auto;
}
.wrapper03{
    width:70vw;
    max-width:768px;
    margin:auto;
}
.btn-radius{
    display: flex;
    justify-content: center;
    align-items: center;
/*    padding:10px 1.6em;*/
    font-size:14px;
    font-weight: bold;
    text-align: center;
    color:#fff;
    border-radius: 50px;
    letter-spacing: 1px;
}
.btn-radius:active{
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}
.btn-shadow{
    width:220px;
    height:50px;
    font-size:16px;
    box-shadow: 3px 5px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden; 
}
.btn-shadow:active {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.btn-red{
    background:linear-gradient(to bottom, #FFF 0%, #FC726A 30%, #E55554);
    border:solid 1px #F9856F;
}
.btn-yellow{
    background:linear-gradient(to bottom, #FFF 0%, #F7D322 30%, #E5BD1E);
    border:solid 1px #F9E83B;
}
.btn-orange{
    background:linear-gradient(to bottom, #FFF 0%, #FF9221 30%, #E5791E);
    border:solid 1px #f6a742;
}
img.hl{
    width:auto;
    height:43px;
    margin:30px auto;
}
.page-top{
    position: fixed;
    right:3vw;
    bottom:5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width:70px;
    height:70px;
    font-size:24px;
    color: #fff;
    background-color: #4194d8;
    border:solid 2px;
    border-radius: 50%;
}
header{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:80px;
    background-color:#fff;
    box-shadow:0px 0px 15px #999;
    position: fixed;
    z-index: 9999;
}
header .box01{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .box01 img{
    width:auto;
    height:50px;
}
header nav ul{
    display: flex;
}
header nav ul li{
    margin:0 1px;
}
header nav ul li a{
    display:flex;
    justify-content: center;
    align-items: center;
    padding:10px 18px;
    font-size:14px;
    font-weight: bold;
    color:#fff;
}
header nav ul li:nth-of-type(1) a{
    background-color:#5574BC;
}
header nav ul li:nth-of-type(2) a{
    background-color:#7F9EE5;
}
header nav ul li:nth-of-type(3) a{
    background-color:#9EBAF2;
}
header nav ul li:nth-of-type(4) a{
    background-color:#C0D7FF;
}
header .right{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
header .right .btn-radius{
    width:140px;
    height:35px;
}
header .right .btn-radius:nth-of-type(1){
    margin-right:15px;
}
.hero{
    width:100%;
    height:768px;
    background-image: url(../img/hero_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.hero .wrapper01{
    height:648px;
    position: relative;
    z-index: 5;
}
.hero .hero01{
    width:1024px;
    margin:auto;
    padding-top:150px;
    position: relative;
    z-index: 2;
}
.hero .link-box{
    position: absolute;
    top:550px;
    left:0;
    right:0;
    width:800px;
    margin:auto;
    z-index: 50;
}
.hero .man01, .hero .man02{
    position: absolute;
}
.hero .man01{
    width:360px;
    bottom:-13px;
    left:-0px;
    z-index: 1;
}
.hero .man02{
    width:300px;
    bottom:-58px;
    right:-80px;
    z-index: 3;
}
.hero .anc-box{
    position: absolute;
    bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:120px;
    font-size:24px;
    font-weight: bold;
    color:#4f6b8e;
    background-color: #fff;
}
.hero .anc-box ul{
    display: flex;
    align-items: center;
}
.hero .anc-box ul li{
    border-right:solid 5px #aec5f3;
}
.hero .anc-box ul li:nth-last-of-type(1){
    border-right:none;
}
.hero .anc-box ul li a{
    display: flex;
    height:100%;
    padding:30px 50px;
}
.hero .anc-box ul li a:hover{
    opacity: 0.7;
    transition: .3s;
}
.flow{
    width:100%;
    padding:3% 0;
    font-size:24px;
    text-align: center;
    line-height: 2.2em;
    color:#fff;
    background-color:#4194d8;
}
.flow span{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:30px;
    font-weight: bold;
    letter-spacing: 1px;
}
.flow span img{
    display: inline-flex;
    width:auto;
    height:38px;
    margin:0 10px 8px 0;
}
.link-box{
    display: flex;
    justify-content: space-around;
    margin:20px auto;
}
.sc01{
    padding:0 0 80px;
}
.sc01 .scl{
    max-width:1920px;
    margin:0 auto 70px;
}
.sc01 .box01{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin:40px auto 20px;
}
.sc01 .box01 .cont{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width:240px;
}
.sc01 .box01 .pic img{
    width:240px;
    margin-bottom:8px;
}
.sc01 .box01 .pic.ex{
    position: relative;
}
.sc01 .box01 .pic.ex img.lenz{
    position: absolute;
    left:110px;
    top:70px;
    width:140px;
}
.sc01 .box01 p{
    text-align: center;
    font-size:20px;
    font-weight: bold;
    line-height: 1.3em;
    white-space: nowrap;
    color:#808080;
}
.sc02{
    width:100%;
    padding:20px 0 60px;
    background-color:#d7efff;
}
.icon-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icon-box img{
    width:48%;
}
.sc03{
    padding:70px 0;
}
.sc04{
    padding:60px 0 50px;
    background-color:#f0f0f0;
}
.sc05{
    padding:70px 0;
}
.sc05 img{
    margin:30px auto;
}
.sc06{
    width:100%;
    height:430px;
    margin-top:120px;
    background-color:#d7efff;
    position: relative;
}
.sc06 img{
    position: absolute;
    top:-130px;
    left:0;
    right:0;
    width:1000px;
    margin:auto;
}
.sc07{
    margin:100px auto;
}
.sc08{
    padding:50px 0 0;
    background-color:#b3e0ff;
    background-image: url(../img/s08_bgp.png);
    background-repeat: no-repeat;
    background-size:10%;
    background-position: 100% 90%;
}
.sc09{
    position: relative;
    height:360px;
}
.sc09 img.top{
    position: absolute;
    left:0;
    right:0;
    bottom:-55px;
    width:1000px;
    margin:auto;
    z-index: 5;
}
.sc10{
    padding:70px 0;
    background-color: #d7efff;
}
aside.faq{
    padding:70px 0;
    line-height: 1.3em;
}
aside.faq h2{
    margin-bottom:50px;
    font-size:32px;
    text-align: center;
    color:#4f6b8e;
}
aside.faq .box01{
    border-top:solid 2px #cacaca;
}
aside.faq .box01:nth-last-of-type(1){
    border-bottom:solid 2px #cacaca;
}
.faq-ques {
    display: flex;
    align-items: center;
    margin-top:15px;
    padding: 17px 10px;
    font-size:18px;
    color:#7d7d7d;
    cursor: pointer;
    z-index: 1;
}
.faq-ques img{
    width:30px;
    margin-right:20px;
}
.faq-ques::after{
    content:"\2b";
    font-family:"Font Awesome 6 Free";
    font-weight: 900;
    margin-left:auto;
    color:#cacaca;
}
.faq-ans {
    height: 0;
    overflow: hidden;
    transition: 0.4s;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding: 0 3% 0 5%;
    color:#7d7d7d;
}
.js-ques.is-active + .faq-ans {
    height: 70px;
}
.is-active.faq-ques::after{
    content:"\f102";
}
footer{
    padding:35px 0 60px;
    color:#fff;
    background-color:#4c4948;
}
footer .wrapper02{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
footer img{
    width:auto;
    height:40px;
}
footer ul{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:20px auto 30px;
    font-size:90%;
}
footer ul li:not(:first-child){
    border-left:solid 1px;
}
footer ul li a{
    padding:2px 8px;
}
footer ul li a:hover{
    text-decoration: underline;
}
footer small{
    font-size:80%;
    font-weight: 300;
}
/*contact*/
section.contact h2{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100px;
    text-align: center;
    font-size:32px;
    color:#fff;
    background-color: #4194d8;
}
.type03 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom:10px;
    text-align: center;
    font-size: 24px;
    color: #4194d8;
}
section.contact .wrapper{
    width:70vw;
    max-width:800px;
    margin:3em auto;
    background-color:#d7efff;
}
.btn-radius label, .link-box label{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}
form{
    padding:2em;
    color:#4f6b8e;
}
form .box01, form .box02{
    border-bottom:solid 2px #aec5f3;
}
form .box01{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size:20px;
    font-weight: bold;
}
form .box01 div{
    display: flex;
    justify-content: space-between;
    text-align: center;
    width:50%;
}
form span.req{
    margin-right:10px;
    padding:3px 5px;
    font-size:14px;
    color:#fff;
    background-color:#FC726A;
    border-radius: 3px;
}
form .box01 span{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:1em 0;
}
form .box01 span.req{
    font-weight: 500;
    margin-right:10px;
}
form .box01 p{
    display: flex;
    align-items: center;
}
form .box01 input{
    width:20px;
    height:20px;
}
form .box02{
    display: flex;
    align-items: center;
    padding:2em 1em;
    font-weight: 500;
}
form .box02 label{
    display: flex;
    width:14em;
}
form .box02 input{
    padding:5px;
}
form .jusyo label{
    margin:10px 0 5px;
}
form .jusyo div:first-child label{
    margin:0 0 5px;
}
input#company, input#mail{
    width:20em;
}
textarea{
    width:30em;
    height:10em;
}
.confirm-btn{
    display:  block;
    margin:2em auto 0;
    padding:8px 20px;
    text-align: center;
    font-size:18px;
    font-weight: bold;
    color:#fff;
    background-color:#4194d8;
    border:none;
}
div.thanks{
    display: flex;
    flex-direction: column;
    min-height:100vh;
}
div.thanks footer{
    margin-top:auto;
}
section.thanks{
    padding-top:80px;
}
section.thanks .box01{
    margin:3em auto;
    text-align: center;
    line-height: 1.6em;
    width:90%;
    max-width:1024px;
}
section.thanks .box01 a{
    display: block;
    margin-top: 3em;
    font-size:24px;
    font-weight: bold;
    color:#4f6b8e;
}
section.thanks .box01 a:hover{
    text-decoration: underline;
}
/*animation*/
.fadeUp_T{
    opacity: 0;
}
.fadeUp {
    animation-name: fadein-up;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadein-up {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeDown_T{
    opacity: 0;
}
.fadeDown {
    animation-name: fadein-down;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadein-down {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeRight_T{
    opacity: 0;
}
.fadeRight {
    animation-name: fadein-right;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadein-right {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeRight_T{
    opacity: 0;
}
.fadeRight {
    animation-name: fadein-right;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadein-right {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeLeft_T{
    opacity: 0;
}
.fadeLeft {
    animation-name: fadein-left;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadein-left {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.blur_T{
    opacity: 0;
}
.blur {
    opacity: 0;
    animation-name: blur;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes blur {
    from {
        filter: blur(10px);
        opacity: 0;
    }
    to {
        filter: blur(0);
        opacity: 1;
    }
}
.f-box{
    opacity: 0;
}
.fadeText span{
    opacity: 0;
}
.fadeText.appear span{
    animation:fadeText 0.5s ease-out forwards;
}
@keyframes fadeText {
	0% {
        opacity:0;
    }
	100% {
        opacity:1;
    }
}
.delay01 {
    animation-delay: 0.2s;
}
.delay02 {
    animation-delay: 0.4s;
}
.delay03 {
    animation-delay: 0.6s;
}
.delay04 {
    animation-delay: 0.8s;
}
.delay05 {
    animation-delay: 1s;
}