@charset 'utf-8';

/*----------------------------------------------------
 base
----------------------------------------------------*/
html, body {
    height: 100%;
}

/*----------------------------------------------------
 reset
----------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,
ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;padding:0;border:0;outline:0;
    font-size:inherit;font-weight:inherit;
    vertical-align:baseline;background:transparent;
}
article,aside,details,figcaption,figure,footer,header,
hgroup,menu,nav,section,main,summary{
    display:block;
}

/*----------------------------------------------------
 base
----------------------------------------------------*/
html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;    
}
body {
    font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic Pro",
    "メイリオ","Meiryo",Meiryo,YuGothic,"游ゴシック",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    line-height: 1.6;
    color: #444; 
    width: 100%;
    min-width: 320px;
    margin:0;
    padding:0;
    text-align:center;
    letter-spacing: 0;
    font-size:20px;
    word-break:word;
    overflow-wrap : break-word;
}
.mincho{
    font-family: ヒラギノ明朝 Pro W3,Hiragino Mincho Pro,HiraMinProN-W3,游明朝,
    Yu Mincho,游明朝体,YuMincho,HGS明朝E,HG明朝E,ＭＳ Ｐ明朝,MS PMincho,
    "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","游明朝",
    "Yu Mincho","游明朝体","YuMincho","HGS明朝E","HG明朝E",    
    "Hiragino Mincho Pro W3", "Hiragino Mincho Pro",
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.clear { clear: both; }
.clearfix { *zoom: 1; }
.clearfix:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    overflow: hidden;
}
img {
    outline: 0;
    max-width: 100%;
    vertical-align: top;
    -ms-interpolation-mode: bicubic;
}
a{ 
    cursor: pointer; 
    text-decoration: none; 
    outline: 0;
    border:0;
    opacity: 1;
    -webkit-transition: opacity 1s ease-out 0s;
    -moz-transition: opacity 1s ease-out 0s;
    transition: opacity 1s ease-out 0s;
}
a:hover { opacity: 0.6; }

@media screen and (max-width:768px) {
    .pc{display: none;}
    body {
        line-height: 2.0;
        font-size:18px;
        font-size:3.4vw;
    }
}

@media screen and (min-width:769px) {
    .sp{display: none;}
}
/*----------------------------------------------------
common
----------------------------------------------------*/
.container{
    width:94%;
    max-width: 1400px;
    margin:0 auto;
}
.fbolder{ font-weight: 700; }
.tacenter{ text-align: center;}
.taleft{ text-align: left;}
.taright{ text-align: right;}
.uline{text-decoration: underline;}
.hidden{ display: none; }
.full{ width:100%; }
.yline{background: linear-gradient(transparent 60%, #ffff00 0%);}


#top{
    width:100%;
    background: url(../img/fv_bg.jpg) no-repeat;
    background-position: top center;
    background-size: auto 100%;
    background-size: cover;
}
#top .top_menu{
    background: rgba(255,255,255,0.7);
    text-align: center;
    width:100%;
    height: 117px;
}
#top .top_menu .container{
    text-align: left;
}
#top .top_menu .container .top_logo{
    width:297px;
    margin:17px 0 0 23px;
}
#fv_area{
    position: relative;
    height: 550px;
}
#fv_area .fv_1{
    position: absolute;
    top:131px;
    left:100px;
    width:481px;
    width:40%;
    max-width: 481px;
}
#fv_area .fv_2{
    position: absolute;
    bottom:0;
    right:0;
    width:50%;
    max-width: 681px;
}
#fv_area .fv_btn{
    position: absolute;
    top:380px;
    left:215px;
    width:250px;
}
#sec1{
    width:100%;
    background: url(../img/sec1_bg.jpg) no-repeat;
    background-position: top center;
    background-size: auto 100%;
    background-size: cover;
    position: relative;
}
#sec1:after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 35px;
    z-index: 1;
    background: url(../img/wave1.png) bottom left no-repeat;
    background-size:100% auto;
}
.sec_ttl{
    text-align: center;
}
.sec_ttl img{
    width:650px;
    margin:0 auto;
}
#sec1 .container{
    text-align: center;
}
#sec1 .sec_ttl{
    padding:120px 0 60px;
}
#sec1 .sec1_txt{
    text-align: left;
    padding:0 0 180px;
    color: white;
    width:100%;
    max-width: 1020px;
    letter-spacing: 0.6px;
    line-height: 2.0;
    margin:0 auto;
}
#sec2{
    width:100%;
    padding-bottom: 160px;
}
#sec2 .sec_ttl{
    padding:120px 0 70px;
}
.sec2_contain{
    display: flex;
    justify-content:space-between;
}
.sec2_area{
    width:48%;
    max-width: 670px;
    background: url(../img/sec2_bg.png) repeat;
    position: relative;
    height: 510px;
}
.sec2_areapart{
    padding: 30px 40px 0;
    text-align: left;
    color:white;
    letter-spacing: 0.1px;
    line-height: 1.6;
}
.sec2_areapart h3{
    font-weight: bold;
    font-size: 150%;
    padding: 15px 0 10px;
}
.sec2_21{
    position: absolute;
    bottom: -40px;
    left:70px;
    width: 562px;
    z-index: 1;
}
.sec2_22{
    position: absolute;
    bottom: -45px;
    left:45px;
    width: 562px;
    z-index: 1;
}
#sec3{
    width:100%;
    background: #f39a00;
    position: relative;
    padding-bottom: 120px;
}
#sec3:before {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    top: -1px;
    height: 35px;
    z-index: 1;
    background: url(../img/wave2.png) top left no-repeat;
    background-size:100% auto;
}
#sec3:after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 35px;
    z-index: 1;
    background: url(../img/wave3.png) bottom left no-repeat;
    background-size:100% auto;
}
#sec3 .sec3_area{
    width:550px;
    color: white;
    text-align: left;
    line-height: 2.0;
    letter-spacing: 0.1px;
}
#sec3 .sec_ttl{
    padding:130px 0 20px;
    margin: 0 auto 35px 0;
    border-bottom: 1px solid #fff;
    text-align: left;
}
#sec3 .sec_ttl img{
    width:435px;
    margin:0 auto 0 0;
}
#sec3 .sec3_txt1{
    padding:0 0 25px;
    font-size: 110%;
    font-weight: bold;
}
#sec3_1{
    position: relative;
}
#sec3 .sec3_1{
    width: 730px;
    position: absolute;
    right: 0;
    top: calc(50% - 320px);
    z-index: 2;
}
#sec4{
    width:100%;
    background: #f8f8f8;
    padding-bottom: 100px;
}
#sec4 .sec_ttl{
    padding:130px 0 70px;
}
#sec4 .sec4_txt{
    width:100%;
    max-width: 1200px;
    margin:0 auto;
}
.sec5_txt {
  width:100%;
  max-width: 1200px;
  margin:0 auto;
  padding-top: 15px;
}
#footer{
    padding: 60px 0;
    background: #fff;
}
#footer .fcontain{
    display: flex;
    justify-content:space-between;
}
#footer .footer_larea{
    width:500px;
}
#footer .fv_logo1 img{
    width:67px;
}
#footer .fv_logo2 img{
    width:253px;
    margin-left: 60px;
}
#footer .footer_link{
    width:500px;
    padding: 25px 0;
}
#footer .footer_link a{
    font-size: 18px;
    color: #000;    
    margin:0 30px;
}
#footer .footer_link a:hover{
    color: #000;
}



@media screen and (max-width:1400px) {
    body {
        font-size:18px;
        min-width: 1200px;
    }
    #fv_area{
        height: 520px;
    }
    #fv_area .fv_1{
        position: absolute;
        top:111px;
        left:80px;
        width:481px;
        width:40%;
        max-width: 481px;
    }
    #fv_area .fv_btn{
        position: absolute;
        top:340px;
        left:195px;
        width:250px;
    }
    .sec2_21{
        position: absolute;
        bottom: -40px;
        left:40px;
        width: 520px;
        z-index: 1;
    }
    .sec2_22{
        position: absolute;
        bottom: -45px;
        left:40px;
        width: 520px;
        z-index: 1;
    }
    #sec3 .sec3_1{
        width: 650px;
        position: absolute;
        right: 0;
        top: calc(50% - 290px);
        z-index: 2;
    }
}
@media screen and (max-width:768px) {
    body {
        font-size:14px;
        min-width: 320px;
    }
    .container{
        width:94%;
        min-width: 320px;
        margin:0 auto;
    }
    #top{
        width:100%;
        background: #fff;
    }
    #top .top_menu{
        background: #fff;
        text-align: center;
        width:100%;
        height: auto;
    }
    #top #fv_area{
        width:100%;
    }
    #top .top_menu .container .top_logo{
        width:30vw;
        margin:2vw 10px;
    }
    #fv_area{
        position: relative;
        height: auto;
    }
    #fv_area .fv_btn{
        position: absolute;
        top:45vw;
        left:24vw;
        width:50vw;
    }
    #sec1:after,
    #sec3:before,
    #sec3:after {
        height: 5vw;
    }
    .sec_ttl img{
        width:100%;
        max-width: 650px;
        margin:0 auto;
    }
    #sec1 .sec_ttl,
    #sec2 .sec_ttl{
        padding:15vw 0 10vw;
    }
    #sec1 .sec1_txt{
        padding:0 0 15vw;
    }
    #sec2{
        padding-bottom: 15vw;
    }
    .sec2_contain{
        display: block;
    }
    .sec2_area{
        width:96%;
        max-width: 670px;
        background: #0B80AC;
        height: auto;
        margin: 0 auto 5vw;
    }
    .sec2_areapart{
        padding: 5vw;
    }
    .sec2_21,
    .sec2_22{
        position: static;
    }
    #sec3{
        padding-bottom: 15vw;
    }
    #sec3 .sec3_area{
        width:100%;
    }
    #sec3 .sec_ttl{
        padding:15vw 0 3vw;
        margin: 0 auto 5vw 0;
    }
    #sec3 .sec_ttl img{
        width:100%;
        max-width: 650px;
        margin:0 auto;
    }
    #sec3 .sec3_txt1{
        padding:0 0 5vw;
        font-size: 105%;
    }
    #sec3 .sec3_1{
        width: 90%;
        margin:0 5%;
        position: static;
    }
    #sec4{
        padding-bottom: 15vw;
    }
    #sec4 .sec_ttl{
        padding:15vw 0 5vw;
    }
    #footer{
        padding: 15vw 0;
    }
    #footer .fcontain{
        display: block;
    }
    #footer .footer_larea{
        width:100%;
    }
    #footer .fv_logo1 img{
        height: 15vw;
        width: auto;
    }
    #footer .fv_logo2 img{
        height: 15vw;
        width: auto;
        margin-left: 8vw;
    }
    #footer .footer_link{
        width:100%;
        padding: 10vw 0 3vw;
    }
    #footer .footer_link a{
        font-size: 14px;
        margin:0 5vw;
    }
}