@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap');


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, hgroup,menu,nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body {line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}nav ul {list-style:none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration: none;}ins {background-color:#ff9;color:#000;text-decoration:none;}mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del {text-decoration: line-through;}abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}table {border-collapse:collapse;border-spacing:0;}hr {display:block;height:1px;border:0;  border-top:1px solid #cccccc;margin:1em 0;padding:0;}input, select {vertical-align:middle;}li {list-style: none;}input[type="submit"],input[type="button"] {border-radius: 0;-webkit-box-sizing: content-box;-webkit-appearance: button;appearance: button;border: none;box-sizing: border-box;cursor: pointer;}input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration {display: none;}input[type="submit"]::focus,input[type="button"]::focus {outline-offset: -2px;}*, *::before, *::after{box-sizing: content-box;}

*{
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
    font-family: 'Noto Serif JP', serif;
    color: #3a3a3a;
  }
body {
    -webkit-text-size-adjust: 100%;
}
html{overflow: auto;}
html.hidden{overflow: hidden;}
body{overflow: hidden;}
section{position: relative;}
h2, p, span, a, li, th, td, small, label{line-height: 1;letter-spacing: 0.1em;font-feature-settings: "palt";}
p{font-size: 18px;}
a:hover{opacity: .7;}
img, video{ width: 100%;vertical-align: bottom;}




/* ------------COMMON---------------------- */

header{
    width: 100%;
    position: fixed;
    z-index: 9999;
    height: 75px;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
header .header{
    width: 100%;
    max-width: 1200px;
    position: relative;
}
header .header h1{
    position: absolute;
    top: -37%;
    left: 0px;
    width: 110px;
    height: 100%;
    transform: translateY(-37%);
}
header .header h1 a{
    display: block;
}
header .hmenu{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
header .hmenu li{
    font-size: 16px;
    text-align: center;
    position: relative;
}
header .hmenu li.active::after{
    border-bottom: 4px solid #009de3;
    position: absolute;
    content: "";
    bottom: -10px;
    height: 4px;
    width: 120%;
    left: -10%;
}
nav{
    display: none;
}
._pc{
    display: block !important;
}
._sp{
    display: none !important;
}

footer{
    width: 100%;
    margin: 0px auto;
    text-align: center;
    padding: 50px 0 50px;
}
footer p{
    font-size: 14px;
}


@media screen and (max-width: 768px){
    header{
        /* width: 100%; */
        /* position: fixed; */
        /* z-index: 9999; */
        height: 70px;
        /* background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center; */
    }
    header .header{
        width: 100%;
        /* max-width: 1200px; */
        /* position: relative; */
    }
    header .header h1{
        /* position: absolute; */
        top: 0px;
        left: 15px;
        width: 90px;
        height: 40px;
        transform: translateY(0%);
    }
    header .hmenu{
        display: none;
    }
    nav{
        display: block;
        width: 100%;
        z-index: 1;
    }
    nav .nav{
        width: 100%;
        text-align: center;
        background-color: #fff;
        display: none;
        transition: all 2s ease-in-out;
    }
    nav .nav.show{
        display: block;
        z-index: 1;
        padding: 10px 0;
    }
    nav .nav li{
        padding: 20px 0;
    }
    nav .nav li.active p{
        position: relative;
        display: inline-block;
    }
    nav .nav li.active p::after{
        border-bottom: 4px solid #009de3;
        position: absolute;
        content: "";
        bottom: -10px;
        height: 4px;
        width: 120%;
        left: -10%;
    }     
    .hamburger{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    width: 35px;
    outline: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border: none;
    background-color: transparent;
    }
    .hamburger_line {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100%;
        height: 2px;
        background-color: #3a3a3a;
        -webkit-transition: inherit;
        transition: inherit;
    }
    .hamburger_line::before,
    .hamburger_line::after {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background-color: inherit;
        content: '';
        -webkit-transition: inherit;
        transition: inherit;
    }
    .hamburger_line::before {
        top: -10px;
    }
    .hamburger_line::after {
        top: 10px;
    }
    .hamburger[aria-expanded="true"] .hamburger_line {
        background-color: transparent;
    }
    .hamburger[aria-expanded="true"] .hamburger_line::before,
    .hamburger[aria-expanded="true"] .hamburger_line::after {
    top: 0;
    background-color: #3a3a3a;
    }
    .hamburger[aria-expanded="true"] .hamburger_line::before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    }
    .hamburger[aria-expanded="true"] .hamburger_line::after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    }

      
      
    ._pc{
        display: none !important;
    }
    ._sp{
        display: block !important;
    }

    footer{
        padding: 20px 0;
    }
    footer p{
        /* font-size: 14px; */
    }

/*@media screen end*/}
/* ______________________________________ */
/*  ______________________________________ */
/* ______________________________________ */


#top .mainImg_wrap{
    width: 100%;
    position: relative;
    height: auto;
}
.mainImg_wrap{
    width: 100%;
    position: relative;
    height: 600px;
    overflow: hidden;
}
.mainImg_box{
    position: relative;
}
.txt_box{
    position: absolute;
    top: 20%;
    left: 10%;
    transform: translate(-10%, -20%);
}
.txt_box p{
    font-size: 28px;
    color: #fff;
    line-height: 2;
    font-weight: 600;
}
.content{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

@media screen and (max-width: 768px){
    .mainImg_wrap{
        /* width: 100%; */
        /* position: relative; */
        top: 70px;
        height: auto;
    }
    .mainImg_box{
        border-radius: 0 0 35px 35px;
        /* overflow: hidden; */
    }
    .txt_box{
        /* position: absolute; */
        /* top: 20%; */
        /* left: 10%; */
        /* transform: translate(-10%, -20%); */
    }
    .txt_box p{
        font-size: 4vw;
        /* color: #fff; */
        /* line-height: 2; */
    }
    .content{
        width: 96%;
        margin: 0 auto;
    }
/*@media screen end*/}
/* ______________________________________ */
/*  ______________________________________ *
/* ______________________________________ */




/* ------------TOP---------------------- */


.lead_wrap{
    width: 100%;
    margin: 100px auto 120px;
    padding: 100px 0 0;
    text-align: center;
    position: relative;
}
.lead_wrap p{
    font-size: 21px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.18em;
    line-height: 2;
    margin-bottom: 60px;
}
.lead_wrap:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 280px 100vw;
    border-color: transparent transparent #009de3 transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}
.lead_wrap figure{
    width: 55%;
    margin-left: 44%;
    max-width: 620px;
}

@media screen and (max-width: 768px){

    .lead_wrap{
        /* width: 100%; */
        margin: 100px auto 0px;
        padding: 0;
        /* text-align: center; */
        /* position: relative; */
    }
    .lead_wrap p{
        font-size: 3vw;
        /* font-weight: 600; */
        /* text-align: left; */
        /* letter-spacing: 0.18em; */
        line-height: 1.6;
        margin-left: 5%;
        margin-bottom: 0px;
    }
    .lead_wrap:before {
        /* content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid; */
        border-width: 0 0 16vw 100vw;
        /* border-color: transparent transparent #009de3 transparent; */
        /* position: absolute; */
        /* bottom: 0; */
        /* right: 0; */
        /* z-index: -1; */
    }
    .lead_wrap figure{
        width: 70%;
        margin-left: 30%;
        /* max-width: 620px; */
    }

/*@media screen end*/}
/* ______________________________________ */
/*  ______________________________________ */
/* ______________________________________ */

.vision_wrap{
    width: 100%;
    margin: 0 auto;
    position: relative;
    background-image: url(../img/top/i02.png);
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
    padding: 50px 0 100px;
}
.vision_wrap:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 280px 0 0 100vw;
    border-color: transparent transparent transparent #009de3;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.vision_box{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: center;
}
.vision_wrap .vision_lead span{
    font-size: 24px;
}
.vision_wrap .vision_lead{
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.18em;
    margin: 70px 0;
    font-weight: 600;
}
@media screen and (max-width: 768px){
    .vision_wrap{
        /* width: 100%; */
        /* margin: 0 auto;
        position: relative;
        background-image: url(../img/top/i02.png); */
        background-size: contain;
        /* background-position: left bottom; */
        /* background-repeat: no-repeat; */
        padding: 80px 0;
    }
    .vision_wrap:before {
        /* content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid; */
        border-width: 16vw 0 0 100vw;
        /* border-color: transparent transparent transparent #009de3;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1; */
    }
    .vision_box{
        /* display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        text-align: center; */
    }
    .vision_wrap .vision_lead span{
        font-size: 4.5vw;
    }
    .vision_wrap .vision_lead{
        font-size: 3vw;
        /* line-height: 1.6;
        letter-spacing: 0.18em; */
        margin: 0 auto 80px;
    }
/*@media screen end*/}
/* ______________________________________ */
/*  ______________________________________ */
/* ______________________________________ */

.link_wrap{
    width: 100%;
    margin: 120px auto;
}

.link_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.link_box a{
    width: 32%;
    height: 360px;
    display: block;
    position: relative;
}
.link_box a:nth-of-type(1){
    background-image: url(../img/top/i03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.link_box a:nth-of-type(2){
    background-image: url(../img/top/i04.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.link_box a:nth-of-type(3){
    background-image: url(../img/top/i05.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.link_box a span{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 24px;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.link_box a::after{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    content:"";
    background-color:rgba(0, 158, 227, 1);
    opacity:0;
    transition:opacity 0.3s;
    mix-blend-mode: color-burn;
}
.link_box a:hover::after{
    opacity: 1;
}
.link_box a:hover img{
    filter:invert(25%);
}

@media screen and (max-width: 768px){

    .link_wrap{
        /* width: 100%; */
        margin: 100px auto 80px;
    }
    
    .link_box{
        /* display: flex;
        flex-wrap: wrap;
        justify-content: space-between; */
    }
    .link_box a{
        width: 80%;
        height: 175px;
        /* display: block; */
        /* position: relative; */
        margin: 0 auto  20px;
    }
    .link_box a:nth-of-type(1){
        /* background-image: url(../img/top/i03.jpg); */
        /* background-repeat: no-repeat; */
        /* background-size: cover; */
        background-position: center;
    }
    .link_box a:nth-of-type(2){
        /* background-image: url(../img/top/i04.jpg); */
        /* background-repeat: no-repeat; */
        /* background-size: cover; */
        background-position: center;
    }
    .link_box a:nth-of-type(3){
        /* background-image: url(../img/top/i05.jpg); */
        /* background-repeat: no-repeat; */
        /* background-size: cover; */
        background-position: center;
    }
    .link_box a span{
        /* position: absolute;
        top: 50%;
        left: 50%;
        color: #fff; */
        font-size: 5vw;
        /* transform: translate(-50%, -50%);
        z-index: 2; */
    }
    .link_box a::after{
        position:absolute;
        top:0;
        left:0;
        z-index:1;
        display:block;
        width:100%;
        height:100%;
        content:"";
        background-color:rgba(0, 158, 227, .5);
        transition:opacity 0.3s;
        mix-blend-mode: color-burn;
        opacity: 1;
    }
    .link_box a:hover::after{
        /* opacity: 1; */
    }
    .link_box a img{
        /* filter:invert(25%); */
    }

/*@media screen end*/}
/* ______________________________________ */
/*  ______________________________________ */
/* ______________________________________ */


/* ------------BUSINNESS---------------------- */

#business .txt_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#business .txt_box p{
    font-size: 36px;
    color: #fff;
    line-height: 2;
}

.business_wrap{
    width: 100%;
    padding: 100px 0;
    margin: 100px auto;
}
.business_box{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 100px;
}
.business_box:nth-of-type(odd){
    flex-direction: row-reverse;
}
.business_box figure{
    width: 45%;
    position: relative;
}
.business_box figure::after{
    content: "";
    width: 100%;
    height: 100%;
    background-color: #009de3;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: -1;
}
.business_box:nth-of-type(even) figure::after{
    left: -20px;
}
.business_box ul{
    width: 45%;
}
.business_box .name{
    font-size: 18px;
    font-weight: 600;
    margin: 30px auto 20px;
    line-height: 1.2;
}
.business_box .txt{
    font-size: 16px;
    text-align: left;
    margin: 0 auto;
    line-height: 1.6
}

@media screen and (max-width: 768px){
    
    #business .txt_box{
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
    }
    #business .txt_box p{
        font-size: 6vw;
        /* color: #fff; */
        /* line-height: 2; */
    }
    
    .business_wrap{
        width: 90%;
        padding: 0px 0;
        margin: 120px auto;
    }
    .business_box{
        /* display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center; */
        margin: 0 0 40px;
    }
    .business_box:nth-of-type(odd){
        flex-direction: row-reverse;
    }
    .business_box figure{
        width: 100%;
        /* position: relative; */
    }
    .business_box figure::after{
        /* content: "";
        width: 100%;
        height: 100%;
        background-color: #009de3;
        position: absolute; */
        top: 2vw;
        left: 2vw;
        /* z-index: -1; */
    }
    .business_box:nth-of-type(even) figure::after{
        left: -2vw;
    }
    .business_box ul{
        width: 100%;
    }
    .business_box .name{
        font-size: 4.5vw;
        /* font-weight: 600; */
        margin: 5vw auto 3vw;
        /* line-height: 1.2; */
    }
    .business_box .txt{
        font-size: 4vw;
        /* text-align: left; */
        /* margin: 0 auto; */
        /* line-height: 1.6 */
    }

/*@media screen end*/}


/* ______________________________________ */
/*  ______________________________________ */
/* ______________________________________ */


/* ------------INFO---------------------- */

#info .txt_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#info .txt_box p{
    font-size: 36px;
    color: #fff;
    line-height: 2;
}

.info_wrap{
    width: 100%;
    margin: 100px auto;
}
.info_box{
    width: 100%;
    padding: 40px 94px;
    margin: 0 auto 60px;
    text-align: center;
    box-sizing: border-box;
}
.info_box .ttl{
    font-size: 21px;
    position: relative;
    margin-bottom: 30px;
}
.info_box .ttl::after{
    border-bottom: 2px solid #009de3;
    position: absolute;
    content: "";
    bottom: -10px;
    height: 4px;
    width: 100%;
    left: 0%;
}
.info_box .txt{
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.05em;
}
.info_box .center{
    text-align: center;
}


@media screen and (max-width: 768px){

    #info .txt_box p{
        font-size: 6vw;
        /* color: #fff; */
        /* line-height: 2; */
    }
    .info_wrap{
        padding: 60px 0;
        margin: 100px auto 0;
    }
    .info_box{
        padding: 40px 20px;
        margin: 0 auto 30px;
    }
    .info_box .ttl{
        font-size: 4.7vw;
        margin-bottom: 20px;
    }
    .info_box .txt{
        font-size: 3.5vw;
    }



/*@media screen end*/}


/* ______________________________________ */
/*  ______________________________________ */
/* ______________________________________ */


/* ------------OUTLINE---------------------- */

#outline .txt_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#outline .txt_box p{
    font-size: 36px;
    color: #fff;
    line-height: 2;
}

.outline_wrap{
    width: 100%;
    margin: 100px auto;
}
.outline_box table{
    margin: 0 auto;
    width: 80%;
    max-width: 1000px;
}
.outline_box tr{
    border-bottom: 1px solid #009de3;
}
.outline_box tr:last-of-type{
    border: none;
}
.outline_box td{
    padding: 30px 0;
    line-height: 1.6;
    font-size: 18px;
    vertical-align: middle;
}
.outline_box td:first-of-type{
    width: 40%;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
}

.map_box{
    width: 100%;
    max-width: 1000px;
    margin: 50px auto 0;
}
.map_box iframe{
    width: 100%;
    height: 456px;
}

@media screen and (max-width: 768px){

    .outline_wrap{
        margin: 100px auto 0;
    }
    #outline .txt_box p{
        font-size: 6vw;
        /* color: #fff; */
        /* line-height: 2; */
    }
    .outline_box table{
        /* margin: 0 auto; */
        width: 100%;
        /* max-width: 1000px; */
    }
    .outline_box td{
        padding: 20px 0;
        font-size: 4vw;
    }
    .outline_box td:first-of-type{
        /* width: 40%; */
        /* text-align: center; */
        /* font-weight: 600; */
        font-size: 4vw;
    }
    .map_box{
        /* width: 100%; */
        /* max-width: 1000px; */
        margin: 40px auto 80px;
    }
    .map_box iframe{
        /* width: 100%; */
        height: 100vw;
    }

}

/* ______________________________________ */
/*  ______________________________________ */
/* ______________________________________ */


/* ------------CONTACT---------------------- */
#contact .contact_wrap{
    width: 100%;
    margin: 100px auto 0;
    text-align: center;
}
#contact .txt_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#contact .txt_box p{
    font-size: 36px;
    color: #fff;
    line-height: 2;
}

@media screen and (max-width: 768px){

    #contact .contact_wrap{
        width: 100%;
        margin: 100px auto 0;
        /* text-align: center; */
    }
    #contact .txt_box{
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
    }
    #contact .txt_box p{
        font-size: 6vw;
        /* color: #fff; */
        /* line-height: 2; */
    }
    #contact iframe{
        width: 100%;
    }

    
}