/*-------------------------------------------
    header
--------------------------------------------*/
.header {
    width: 100%;
    background: rgba(255,255,255,0.8);
    position: fixed;
    top:0;
    z-index: 10000000000;
    box-shadow:0px 0px 7px -3px #000000;
    min-height:70px;
    font-family: 'Anton', sans-serif;
    font-size: 150%;
    text-align: left;
}
.header-navi a:link, .header-navi a:visited, .header-navi a:active {color:#000;}
.header-logo {width: 20%; float: left;padding: 2% 0 0 3%;}
.header-navi {width: 70%; float: left;padding:2.5% 5% 0 5% ;}
.header-navi li { width:23%;display: inline-block;}
.header-contact {
    width: 10%;
    padding: 2.5% 0;
    min-height:70px;
    float: left;
    background: #dd600d ;
    text-align: center;
}
.header-contact a:link, .header-contact a:visited, .header-contact a:active {color:#fff;}

/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .header {
        max-height:70px;
        min-height:70px;
    }
    .header-logo {width: 50%; float: left;padding: 6% 0 0 5%;}
    .header-navi-sp {
        width: 100%;
        height:100vh;
        position: fixed;
        top:0;
        right: -100%;
        z-index: 100000000;
        background:rgba(0, 0, 0, 0.8);
        color: #fff;
        text-align: center;
        padding: 5% 0;
        transition-duration: 0.5s;
        overflow:scroll;
    }
    .header-navi-spAct {
        right: 0%;
    }
    .header-navi-sp li a{
        display: block;
        padding: 5% 0;
    }
    .header-navi-sp a:link, .header-navi-sp a:visited, .header-navi-sp a:active { color: #fff;}

    .header-navi-icon{
        position:fixed;
        right:20px;
        top:2.5%;
        width:35px;
        height:35px;
        background:#532512;
        z-index: 100000001;
        display: block;
    }
    .header-navi-icon span {
        display: inline-block;
        transition-duration: 0.3s;
        box-sizing: border-box;
        position: absolute;
        left: 10%;
        width: 80%;
        height: 2px;
        background-color: #fff;
    }
    .header-navi-icon span:nth-of-type(1) {top: 8px;}
    .header-navi-icon span:nth-of-type(2) {top: 16px;}
    .header-navi-icon span:nth-of-type(3) {top: 24px;}

    .header-navi-iconAct span:nth-of-type(1) {
        -webkit-transform: translateY(9px) rotate(-45deg);
        transform: translateY(9px) rotate(-45deg);
    }

    .header-navi-iconAct span:nth-of-type(2) {
        opacity: 0;
    }
    .header-navi-iconAct span:nth-of-type(3) {
        -webkit-transform: translateY(-7px) rotate(45deg);
        transform: translateY(-7px) rotate(45deg);
    }
}

/*-------------------------------------------
    main-imgArea 
--------------------------------------------*/

.main-imgArea {
    position: relative;
    padding: 0 0 5% 0;
}
.main-imgArea-phrase {
    position: absolute;
    bottom: -10px;
    width: 100%;
    font-size: 500%;
    z-index: 10000000;
    /*text-shadow: rgb(255, 255, 255) 1px 0px 2px, rgb(255, 255, 255) -1px 0px 20px;*/
}
.main-imgArea-img {
    background: url('../img/topbg5.jpg') no-repeat 50% 0;
    background-size:cover;
    height:100vh;
}
.main-imgArea-img-filer {
    background:#FFFFFF;
    position: absolute;
    width: 100%;
    height:100vh;
    transition-duration: 0.5s;
    z-index: 100000010;
}
.main-imgArea-logo {
    position: absolute;
    left: 0;
    top: 28%;
    width: 100%;
    text-align: center;
    opacity:0;
    transition-duration: 0.5s;
    z-index: 100000011;
}
.main-imgArea-logo img{width: 40%;}

.main-imgArea-item001 {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    opacity:0;
    transition-duration: 0.5s;
    z-index: 100000012;
}
.main-imgArea-item001 img{width: 14%;}
.main-imgArea-hashiru01 {
    position: absolute;
    top: 55%;
    left:0;
    width: 70%;
    text-align: center;
    opacity:0;
    transition-duration: 0.5s;
    z-index: 100000013;
}
.main-imgArea-hashiru01 img{width: 13%;}

.main-imgArea-hashiru02 {
    position: absolute;
    top: 55%;
    right:0;
    width: 70%;
    text-align: center;
    opacity:0;
    transition-duration: 0.5s;
    z-index: 100000014;
}
.main-imgArea-hashiru02 img{width: 11%;}

.main-imgArea-hashiru03 {
    position: absolute;
    top: 57%;
    left:0;
    width: 50%;
    text-align: center;
    opacity:0;
    transition-duration: 0.5s;
    z-index: 100000015;
}
.main-imgArea-hashiru03 img{width: 30%;}

.main-imgArea-hashiru04 {
    position: absolute;
    top: 57%;
    right:0;
    width: 50%;
    text-align: center;
    opacity:0;
    transition-duration: 0.5s;
    z-index: 100000016;
}
.main-imgArea-hashiru04 img{width: 10%;}

.main-imgArea-img-text {
    width: 100%;
    text-align: center;
    font-size: 150%;
    line-height: 220%;
    padding: 0 0 5% 0;
    color: #000000;
}
.main-imgArea-img-text p{
    padding: 0 0 5% 0;
}

.block-top {
    width:100%;
    z-index: 100000000;    
    position: absolute;
    top:0;
    margin:0;
    padding: 0;
}

.block-bottom {
    width:100%;
    z-index: 100000000;    
    position: absolute;
    bottom:0;
    margin:0;
    padding: 0;

}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .main-imgArea-img-filer {
        height:60vh;
    }
    .main-imgArea-img {
        background: url('../img/topbg5.jpg') no-repeat 50% 0;
        background-size:cover;
        height:60vh;
    }
    .main-imgArea {
        position: relative;
        padding: 0 0 10% 0;
    }
    .main-imgArea-img-text {
        font-size: 90%;
        line-height: 200%;
    }
    
    .main-imgArea-img-text p{
        padding: 0 0 5% 0;
    }
    .block-top {top:-5%; height: 60px;}
    .block-bottom {bottom:0%; height: 60px;}
    .main-imgArea-logo {
        position: absolute;
        left: 40;
        top: 28%;
        width: 100%;
        text-align: center;
        opacity:0;
        transition-duration: 0.5s;
    }
    .main-imgArea-logo img{width: 70%;}
    
    .main-imgArea-item001 {
        position: absolute;
        top: 50%;
        width: 100%;
        text-align: center;
        opacity:0;
        transition-duration: 0.5s;
    }
    .main-imgArea-item001 img{width: 20%;}

    .main-imgArea-hashiru01 {
        position: absolute;
        top: 55%;
        left:0;
        width: 70%;
        text-align: center;
        opacity:0;
        transition-duration: 0.5s;
    }
    .main-imgArea-hashiru01 img{width: 23%;}
    
    .main-imgArea-hashiru02 {
        position: absolute;
        top: 55%;
        right:0;
        width: 60%;
        text-align: center;
        opacity:0;
        transition-duration: 0.5s;
    }
    .main-imgArea-hashiru02 img{width: 21%;}
    
    .main-imgArea-hashiru03 {
        position: absolute;
        top: 66%;
        left:-5;
        width: 40%;
        text-align: center;
        opacity:0;
        transition-duration: 0.5s;
    }
    .main-imgArea-hashiru03 img{width: 60%;}
    
    .main-imgArea-hashiru04 {
        position: absolute;
        top: 65%;
        right:0%;
        width: 30%;
        text-align: center;
        opacity:0;
        transition-duration: 0.5s;
    }
    .main-imgArea-hashiru04 img{width: 30%;}
}
/*-------------------------------------------
    top-blockArea
--------------------------------------------*/

.top-blockArea {
    font-size: 180%;
    padding:10% 10% 3% 10%;
    background: #fff;
    position: relative;
    line-height: 170%;
}

.top-blockArea h2{
    margin: 5% 0;
}

.top-blockArea--part1 {
    z-index: 1000000000; 
    position: absolute;
    top:-13%;
    left: 3%;
}
.top-blockArea--part1 img{width: 60%;}

.top-blockArea2 {
    position: relative;
    font-size: 140%;
    padding:5% 0;
    line-height: 170%;
    background: url('/img/topbg2.jpg') no-repeat 50% 0;
    background-size:cover;
}

.top-blockArea2 h2{
    margin: 1% 0;
}

.top-blockArea2-text {
    padding:5% 5% 10% 5%;
}

.top-blockArea2-text p{
    padding:2% 0%;
}

.top-blockArea2 h2 img{
    width: 30%;
}
.blockArea2--part1 {
    position: absolute;
    top:-13%;
    left: 3%;FSHA
}

.blockArea2--part1 img{width: 50%;}

.top-blockArea3 {
    padding:5% 10% 10% 10%;
    background-size:100%;
    line-height: 170%;
}

.top-blockArea3 h2{
    padding: 5% 0;
    font-size: 200%;
}
.newsArea {
    text-align: left;
}
.newsArea li{
    margin: 4px 0;
}

/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .top-block {text-align: left;}
    .top-blockArea {font-size: 80%;padding:0 3% 20% 3%;}
    .top-blockArea2 {font-size: 80%;padding:5% 0;}
    .top-blockArea3 {font-size: 80%;padding:15% 3%;}
    .top-blockArea--part1 {top:-7%;}
    .top-blockArea--part1 img{width: 60%;}
    .top-blockArea2 h2 img{width: 70%;}
    .top-blockArea3 h2 img{ width: 60%;}

    .blockArea2--part1 {
        position: absolute;
        top:-10%;
        left: -9%;
    }  
    .blockArea2--part1 img{width: 30%;}

    .top-blockArea2 .block-bottom {bottom:-3%; height: 60px;}
    
}
/*-------------------------------------------
    footer
--------------------------------------------*/
.footerArea {
    background:#cc6f15;
    color: #fff;
}
.footerArea .footer__navi li{
    display:inline-block;
    margin: 3% 5%;
}

.footerArea a:link, .footerArea a:visited, .footerArea a:active {text-decoration:none;color:#FFFFFF;}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .footerArea {
        padding: 5% 0;
    }
    .footer .footer__navi li{
        display:inline-block;
        width: 20%;
    }
}

/*-------------------------------------------
    nextArea
--------------------------------------------*/
.nextArea {
    padding: 15% 0 0 0 ;
    background: url('/img/next-top.jpg') no-repeat;
    background-size:100%;
}
.nextAreaBlock {
    padding: 5% 15%;
    background: #FFFFFF;
}
/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .nextArea {
        padding: 150px 0 0 0 ;
        background-size:140%;
    }
    .nextAreaBlock {
        padding: 10% 2% 3% 2%;
    }
}

/*-------------------------------------------
    accessArea
--------------------------------------------*/

.accessArea {
    padding: 5% 10% 10% 10%;
    background: #FFFFFF;
}

.accessArea h2{
    font-size: 260%;
    padding: 0 0 3% 0;
}

.accessArea h3{
    font-size: 200%;
    padding: 3% 0;
}

/*----Responsive ----*/
@media screen and (max-width: 768px) {
    .accessArea {
        margin-top: 3%;
        padding: 2% ;
        background: #FFFFFF;
    }  
}
/*-------------------------------------------
   contact
--------------------------------------------*/
.contactArea {
    background: #fff;
    padding: 5% 20%;
    font-size: 120%;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .contactArea {
        background: #fff;
        padding: 2% 2% 5% 2%;
    }
}
/*--------------------------------------------
     Contact
-------------------------------------------*/

.contact_erea {
    width:70%;
    margin:auto;
}

.form-group{
    width:100%;
    text-align:left;
}

.form-control{
    width:90%;
    /* box-shadow */
    box-shadow:0px 0px 6px -7px #dee3e1;

    /* border-radius */
    border-radius:6px;

    /* border */
    border:2px solid #d9d9d9;

    /* react native */
    
    shadowColor:"#dee3e1",
    shadowOffset:{width:0,height:0},
    shadowOpacity:1,
    shadowRadius:6,
    borderWidth:2,
    borderColor:#d9d9d9,
    borderRadius:6
    
}