@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}


@font-face{
    src: url(../font/Train_One/TrainOne-Regular.ttf);
    font-family: Train_One;
}

@font-face {
    src: url(../font/Noto_Sans_JP\,Train_One/);
    font-family: Noto_Sans_JP;
}

@font-face {
    src: url(../font/M_PLUS_Rounded_1c/);
    font-family: M_PLUS_Rounded_1c;
}





header {
    width: 100%;
    height: 10vh;
    display: flex;
    background-color: rgba(245,245,245,0.7);
    position: fixed;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10; 
    padding-top: 1vw;   
    padding-bottom: 1vw;   
}

h1 {
    width: 15%;   
    margin-left: 4%;
    
    
}

h1 a {   
    text-decoration: none; 
    font-size: 0.8vw;
}





h1 .logo img {
    display: block;
    width: 90%;
    
}



nav {
    width: 40%;
    margin-left: auto;
    
}

nav .two {
    display: flex;
}

nav .two .two-risuto {
    width: calc( 100% / 3 );
    list-style-type: none;
}

nav .two .two-risuto a {
    display: block;
    margin-left: 3vw;
    color: #808080;
    font-size: 1.1vw;
    text-decoration: none;
    transition: 1s;
}

nav .two .two-risuto a:hover {
    color: #101010;
    transition: 1s;
}

nav .two .two-risuto a:hover::before {
    width: 7%;
    transition: 0.5s;
}

nav .two .two-risuto a::before {
    position: absolute;
    bottom: 1vw;
    display: block;
    width: 0%;
    height: 0.05vw;
    content: "";
    background-color:#808080;
    transition: 0.5s;
    margin-bottom: 1.5vw;
}

main section .heroarea {
    width: 100%;
    position: relative;
    height: 100vh;
    background-image: url(../images/mountain-view-5024904_1280.jpg);
    background-size: 100% 100%;
}

.main-ul {
    
    display: block;
    list-style-type: none;
}

.main-ul .main-li {
    position: absolute;
    top: 8vw;
    font-size: 4vw;
    margin-left: 10vw;
    color: #fff; 
    font-family: Train_One;  
}

.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
    font-size: 2vw;
    color: #808080;
    margin-top: 5vw;
    margin-left: 16vw;
}

@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fadeIn1s {
    animation-name: fadeIn1s;
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0;
    margin-left: 10%;
}

@keyframes fadeIn1s {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.mission2 {
    position: absolute;
    top: 25vw;
    left: 15vw;
    width: 70%;
    font-size: 1.5vw;
    color: #fff; 
   
    font-family: ;
    letter-spacing: 0.1em;
}

.mission {
    position: absolute;
    top: 40vw;
    left: 15vw;
    font-size: 1.5vw;
    color: #fff; 
    white-space: pre-wrap;
    font-family: ;
    letter-spacing: 0.1em;
}




.service-flex {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
    width: 90%;
}

.service-flex .flex-l {
    width: 50%;
    margin-top: 6.5vw;
}

.service-flex .flex-l .left-up {
    font-size: 2.5vw;
    color: #808080;
    border-bottom: 1px solid #808080;
}

.service-flex .flex-l .left-down {
    font-size: 2.5vw;
    color: #808080;

}

.service-flex .flex-l .setumei2 {
    margin-top: 2vw;
    font-size: 1.3vw;
    color: #808080;
    text-indent: 0.5em;
    text-align: justify;
    
}

.service-flex .flex-l .setumei{
    margin-top: 1vw;
    font-size: 1.3vw;
    color: #808080;
    text-indent: 1em;
    text-align: justify;
    line-height: 1.7;
}



.service-flex .flex-r {
    width: 45%;
    margin-left: 5%;
    padding-bottom: 10vw;
    margin-top: 18vw;
   
}

.service-flex .flex-r img {
    width: 100%;
    border-radius: 10%;
}



.about-eria {
    width: 100%;
    display: block;
    background-image: url(../images/hikouki.jpg);
    background-size: 100% 100%;
    background-color:rgba(255,255,255,0.8);/*background-imageのみ透過*/
    background-blend-mode:lighten;
    padding-bottom: 10vw;
}


.about-eria .up {
    margin-left: 5vw;
    width: 40%;
    font-size: 2.5vw;
    color: #808080;
    border-bottom: 1px solid #808080;
    padding-top: 6.5vw;
}

.about-eria .down {
    margin-left: 5vw;
    font-size: 2.5vw;
    color: #808080;
}


table {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #808080;
    border-collapse: collapse;
    padding-bottom: 10vw;

}

tr {
    color: #808080;
}

th {
    text-align: left;
    padding: 2vw;
    border: 1px solid #808080;
    font-size: 1.3vw;
}



.contact-eria {
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
    padding-top: 6.5vw;
}

.contact-eria .up {
    width: 50%;
    font-size: 2.5vw;
    color: #808080;
    border-bottom: 1px solid #808080;
    
}

.contact-eria .down {
    font-size: 2.5vw;
    color: #808080;
    
}

form {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vw;
}

.flexbox {
    display: flex;
    padding-bottom: 3vw;
}

.leftbox {
    width: 20%;
    font-size: 2vw;
    color: #808080;
}

input {
    width: 70%;
}

textarea {
    width: 70%;
    height: 30vh;
}

.send {
    display: block;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    background-color: #808080;
    padding-top: 1vw;
    padding-bottom: 1vw;
    font-size: 1.8vw;
    font-weight: 700;
    border: 1px solid #101010;
    cursor: pointer;
    transition: 1s;
    opacity: 0.7;
}

.send:hover {
    opacity: 1;
    transition: 1s;
}

.photo {
    width: 100%;
    
    
}

.photo img {
    width: 100%;
    height: 40vh;
    vertical-align: bottom;
    margin-bottom: 5vw;
    opacity: 0.6;
}



footer {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    
    
}

footer .footerflex {
    display: flex;
    margin-bottom: 5vw;
}

footer .footerflex .footer-l {
    width: 60%;
}




.f-logo {
    border-bottom: 1px dotted #808080;
    width: 50%;

}

.f-logo a {
    display: block;
}

.f-logo a img {
    width: 60%;
}
    


footer .footerflex .footer-l h3 a:hover {
    color: #101010;
    transition: 1s;
}

address {
    font-size: 1.3vw;
    color: #808080;
    margin-top: 1vw;
}

footer .footerflex .footer-r {
    width: 40%;
}

footer .footerflex .footer-r ul {
    list-style-type: none;
}

footer .footerflex .footer-r ul li {
    width: 100%;
    margin-top: 2vw;
    
}

footer .footerflex .footer-r ul li a {
    display: block;
    text-decoration: none;
    font-size: 1.3vw;
    color: #808080;
    transition: 1s;
}

footer .footerflex .footer-r ul li a:hover {
    color: #101010;
    transition: 1s;
}


.copyright {
    text-align: center;
    font-size: 1vw;
    color: #808080;
    padding-bottom: 5vw;
}

.elem {
    opacity: 0;
    transition: 1s;
    transform: translateY(50px);
}

.isAnimate {
    opacity: 1;
    transform: translateY(0px);
}