@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: 30%;   
    margin-left: 4%;
    
    
}

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





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




/*ナビメニューのスタイルを指定*/
nav.NavMenu {
	position: fixed; /*表示位置を固定*/
	z-index: 2; /*重ね順を変更*/
	top: 0; /*表示位置を指定*/
	left: 50%; /*表示位置を指定*/
	width: 50%; /*全幅表示*/
	transform: translateY(-100%); /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。*/
	transition: all 0.6s; /*アニメーションの時間を指定*/
}

nav.NavMenu ul {
	list-style-type: none;
	background-color: #f5f5f5; /*背景*/
}

nav.NavMenu ul li {
	width: 100%;
	border-bottom: 1px dotted #808080;
}

nav.NavMenu ul li:last-child {
	border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a {
	display: block; /*クリックできる領域を広げる*/
	text-align: center; /*テキストを中央揃え*/
	text-decoration: none;
	line-height: 3;
	color: #a9a9a9;
	font-size: 3vw;
}
/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active {
	transform: translateY(0%);/*上から出したい場合は、transform: translateYを使う。*/
}

/*トグルボタンのスタイルを指定*/
.Toggle {
	position: fixed;/* bodyに対しての絶対位置指定 */
	right: 13px;
	top: 12px;
	width: 42px;
	height: 42px;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 3;/*ボタンを一番上にしている(押せなくなるから)*/
}

.Toggle span {
	display: block;
	position: absolute;
	left: 6px;
	width: 30px;
	border-bottom: solid 3px #a9a9a9;
	transition: .35s ease-in-out;/*変化の速度を指定*/
}

.Toggle span:nth-child(1) {
	top: 9px;
}

.Toggle span:nth-child(2) {
	top: 18px;
}

.Toggle span:nth-child(3) {
	top: 27px;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 18px;
	transform: rotate(45deg);
}




main section .heroarea {
    position: relative;
    width:100%;
    background-image: url(../images/17379.jpg);
    background-size: 100% 100%;

}

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

.main-ul .main-li {
    position: absolute;
    top: 25vw;
    font-size: 5vw;
    margin-left: 5%;
    color: #808080; 
    font-family: Train_One;  
}

.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
    
}

@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: 5%;
}

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


.mission2 {
    padding-top: 40vw;
    left: 0vw;
    width: 90%;
    font-size: 5vw;
    color: #808080; 
   
}

.mission {
    width: 90%;
    margin-top: 3vw;
    left: 0vw;
    font-size: 5vw;
    color: #808080; 
    padding-bottom: 10vw;
}




.service-flex {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    
}

.service-flex .flex-l {
    margin-top: 30vw;
}

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

.service-flex .flex-l .left-down {
    font-size: 3.5vw;
    color: #808080;
    margin-top: 1vw;
}

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

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



.service-flex .flex-r {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10vw;
    margin-top: 10vw;
   
}

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



.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: 30vw;
}


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

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


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

}

tr {
    color: #808080;
}

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



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

}

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

.contact-eria .down {
    font-size: 3.5vw;
    color: #808080;
    margin-top: 1vw;
}

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

.flexbox {
    display: flex;
    flex-direction: column;
    padding-bottom: 3vw;
    margin-left: auto;
    margin-right: auto;
}

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

input {
    width: 100%;
}

textarea {
    width: 100%;
    height: 20vh;
}

.send {
    display: block;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    background-color: #808080;
    padding-top: 1vw;
    padding-bottom: 1vw;
    font-size: 2.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: 20vh;
    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: 80%;
}
    

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

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


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

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

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

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


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