@charset "utf-8";
@media screen and (max-width:1440px){
    header .box01.wrapper02{
        width:90vw;
        max-width:inherit;
    }
}
@media screen and (max-width:1280px){
    .hero .hero01{
        width:800px;
    }
    .hero .man01{
        width:320px;
        bottom:-11px;
    }
    .hero .man02{
        width:280px;
        bottom:-52px;
    }
    .hero .link-box{
        top:400px;
        flex-flow: column;
        align-items: center;
        width:300px;
        height:200px;
    }
    .hero .anc-box{
        font-size:20px;
    }
    .hero .anc-box ul li a{
        padding: 25px 35px;
    }
    img.hl{
        height:30px;
    }
    .sc01 .wrapper02{
        width:90vw;
    }
    .sc06{
        height:400px;
    }
    .sc06 img{
        width:80vw;
    }
}
@media screen and (max-width:1024px){
    .wrapper02, .wrapper03{
        width:80vw;
    }
    header nav{
        display: none;
    }
    header .right{
        margin-right:50px;
    }
    .hero .man01{
        left:-40px;
    }
    .hero .anc-box ul li a{
        padding:10px 35px;
    }
    .flow span img{
        height:30px;
        margin:0 10px 0 0;
    }
    .sc01 .box01 .pic img{
        width:180px;
    }
    .sc01 .box01 .pic.ex img.lenz{
        left:90px;
        top:55px;
        width:100px;
    }
    .sc01 .box01 p{
        font-size:18px;
    }
    .icon-box{
        flex-flow: column;
    }
    .icon-box img{
        width:65%;
        margin-bottom:20px;
    }
    .sc06{
        height:320px;
    }
    .sc09{
        height:240px;
    }
    .sc09 img.top{
        width:100%;
    }
    section.contact .wrapper{
        width:80vw;
    }
}
@media screen and (max-width:768px) {
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    br.sp{
        display: none;
    }
    .link-box.sp {
        position: fixed;
        top: 90px;
        display: flex;
        flex-flow: row;
        width: 100%;
        margin: 0;
        z-index: 500;
    }
    .link-box.sp .btn-shadow {
        width: 31%;
        height: 40px;
        margin: 0;
        font-size: 12px;
        line-height: 1.3em;
    }
    .wrapper01, .wrapper02{
        width:90vw;
    }
    .page-top{
        bottom:3vh;
    }
    header .right{
        display: none;
    }
    .link-box{
/*        flex-flow: column;*/
/*        align-items: center;*/
/*        margin:20px auto 0;*/
    }
/*
    .link-box a{
        margin-bottom:15px;
    }
*/
    .link-box .btn-shadow{
        width:32%;
    }
    .hero{
        height:688px;
/*        height:768px;*/
    }
    .hero .wrapper01{
        height:420px;
/*        height:580px;*/
    }
    .hero .hero01{
        width:100%;
    }
    .hero .box01 img:nth-of-type(1) {
        width:80%;
        margin: 160px auto 20px;
/*        margin: 80px auto 20px;*/
        /*margin:20px auto;*//*org*/
    }
    .hero .box01 img:nth-of-type(2) {
        width: 25%;
        margin:auto;
    }
    .hero .man01{
        width:250px;
/*        width:280px;*/
        bottom:2px;
        left:5px;
/*        left:-60px;*/
    }
    .hero .man02{
        width:220px;
        right:-10px;
/*        right:-50px;*/
        bottom:-36px;
    }
    .hero .link-box{
        display: none;
/*        top:340px;*/
    }
    .hero .anc-box{
        height:120px;
/*        height:200px;*/
    }
    .hero .anc-box ul{
        flex-flow: column;
        width:90%;
    }
    .hero .anc-box ul li{
        border-right:none;
        width:100%;
    }
    .hero .anc-box ul li:not(:first-child){
        border-top:solid 3px #aec5f3;
    }
    .hero .anc-box ul li a{
        justify-content: center;
    }
    .flow{
        font-size:20px;
    }
    .flow span{
        font-size:26px;
    }
    .flow span img{
        height:26px;
    }
    .icon-box img{
        width:80%;
    }
    img.hl{
        height:35px;
    }
    .sc01 .scl{
        height:120px;
    }
    .sc01 img.hl{
        height:80px;
    }
    .sc01 .box01{
        flex-flow: row wrap;
        width:80%;
    }
    .sc01 .box01 .cont{
        margin-bottom:20px;
    }
    .sc03 .box01{
        display: flex;
        flex-flow: column;
        align-items: center;
    }
    .sc03 img:nth-of-type(1){
        width:30%;
        min-width:200px;
    }
    .sc03 img:nth-of-type(3){
        width:70%;
    }
    .sc04 img{
        width:80%;
        margin:auto;
    }
    .sc06{
        height:940px;
    }
    .sc06 img{
        
        width:50vw;
        min-width:300px;
    }
    footer{
        padding:35px 0 100px;
    }
    footer ul{
        font-size:80%;
    }
    /*contact*/
    section.contact .wrapper{
        width:90vw;
    }
    section.thanks .box01{
        text-align: left;
    }
}
@media screen and (max-width:500px){
    .wrapper03{
        width:90vw;
    }
    br.sp{
        display: block;
    }
    .btn-shadow{
        height:40px;
        font-size:14px;
    }
    header .box01 img{
        height:40px;
    }
    img.hl{
        height:20px;
    }
    .hero{
        height:590px;
/*        height:580px;*//*link-box sp*/
/*        height:780px;*//*org*/
    }
    .hero .wrapper01{
        height:398px
    }
    .hero .box01{
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        margin-top:100px;
    }
    .hero .box01 img:nth-of-type(1) {
        width:100%;
        margin: 80px auto 20px;
    }
    .hero .box01 img:nth-of-type(2){
        width:35%;
        min-width: 150px;
        margin:auto;
    }
    .hero .link-box{
        display: none;
/*        top:410px;*/
    }
    .hero .man01{
        width:185px;
        left:-60px;
        bottom:2px;
    }
    .hero .man02{
        width:150px;
        right:-50px;
        bottom:-25px;
    }
    .hero .anc-box{
        height:100px;
        font-size:16px;
    }
    .flow{
        font-size:14px;
    }
    .flow span{
        flex-flow: column;
        font-size:20px;
        line-height: 1.6em;
    }
    .link-box .btn-shadow{
        font-size:12px;
        line-height: 1.3em;
    }
    .sc01{
        padding:0 0 10px;
    }
    .sc01 .scl{
        height:90px;
    }
    .sc01 img.hl{
        height:50px;
    }
    .sc01 .box01{
        width:90%;
    }
    .sc01 .box01 .cont, .sc01 .box01 .pic img{
        width:130px;
    }
    .sc01 .box01 .pic.ex img.lenz{
        left:67px;
        top:38px;
        width:70px;
    }
    .sc01 .box01 p{
        font-size:14px;
    }
    .icon-box img{
        width:90%;
    }
    .sc03 img:nth-of-type(3){
        width:90%;
    }
    .sc04 img{
        width:100%;
    }
    .sc05{
        padding:0 0 50px;
    }
    .sc06{
        height:580px;
        margin-top:50px;
    }
    .sc06 img{
        top:-70px;
        width:60%;
        min-width:inherit;
    }
    .sc07{
        margin:30px auto;
    }
    .sc08{
        padding:20px 0 0;
    }
    .sc09{
        height:120px;
    }
    .sc09 img.top{
        bottom:-25px;
    }
    footer ul{
        flex-flow: column;
        width:80%;
    }
    footer ul li{
        width:100%;
    }
    footer ul li:not(:first-child) {
        border-left: none;
        border-top: solid 1px rgb(255,255,255,0.3);
    }
    footer ul li a{
        justify-content: center;
        display: flex;
        width:100%;
        padding:12px 0;
    }
    footer ul li a:hover{
        text-decoration: none;
    }
    /*contact*/
    section.contact h2{
        font-size:22px;
    }
    section.thanks h2{
        font-size:18px;
    }
    section.contact .wrapper{
        width:90vw;
    }
    form .box01{
        font-size:18px;
    }
    form .box01 p{
        align-items: flex-start;
    }
    form .box01 div{
        width:90%;
    }
    form .box01 span.req{
        margin:0 5px 0 0;
        white-space: nowrap;
    }
    form span.req{
        margin-right:5px;
    }
    form .box02{
        flex-flow: column;
        align-items: flex-start;
    }
    form .box02 label{
        align-items: center;
        margin-bottom:5px;
    }
    input#company, input#mail{
        width:100%;
    }
    input.w-sp{
        width:100%;
    }
    form .box02 input{
        padding:0;
        height:30px;
    }
    textarea{
        width:100%;
    }
    section.thanks .box01 a{
        font-size:18px;
    }
}