@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #005cac;
	--accent-color: #e95513;
	--dark-main-color: #000000;
	--text-bright-color: #ffffff;
}


/* ふわっと表示 */
#animation {

}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/* 基本設定　ページ全体 */
body {
font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
margin:0;
line-height: 1.9;
background-color:#ffffff;
color:#000000;
}

/* トップ　最初の写真 */
.TOPstart{
text-align:center;
margin:0 auto 0px auto;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-image:url(img/start-photo.png);
background-position:center;
background-size:cover;
}


.TOPstart{

}


.startlogo img{
width:70%;
height:70%;
margin-top:50px;
}

.scrool-btn{
margin-top:50px;

animation: img_box_9955 1s linear infinite;
transform-origin: 50% 50%;
}
@keyframes img_box_9955 {
0% { transform: translateY(0) }
33.33333% { transform: translateY(-10px) }
66.66667% { transform: translateY(0) }
100% { transform: translateY(0) }
}

/* 線画イラストをやめてグラデーション */
.lineillust{
text-align:center;
margin:0 auto 0px auto;
height:650px;

background: linear-gradient(0deg, rgb(255, 255, 255), rgb(0, 92, 175)) ;
}

/* 飛行機を移動アニメーション */
.animation_box {
  padding: 0px;
  animation-name: fadeIn;
  animation-duration: 8s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
}

@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateX(-1000px);
  }
  to {
    opacity: 1;
    transform: translateX(1000px);
  }
}

.animation_box img{margin-top: 320px;}

#maincontents{
color:#000000;
}


/* トップ　ロゴ */
.conA{

text-align:center;
width:90%;
margin:0 auto;
}
.conA h1{
padding:30px 0px 20px 0px;
font-size:7vw;
}
.conA p{
text-align:left;
margin:0px;
font-size:15px;
}

.conA img{
width:80%;
height:80%;
}


/* トップ　メインメニュー */
.conB{
text-align:center;
margin:30px auto 30px auto;
font-size:16px;
font-weight:bold;
font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif;

}
.conB a{
text-decoration:none;
color:#000000;
color:var(--dark-main-color);
display:inline-block;
border-radius:5px;
padding:10px 0px;
background-color:#ffffff;
background-color:var(--text-bright-color);
margin-bottom:10px;
width:90%;
border:#eaeaeb 1px solid;
}
.conB a:hover{
background-image:linear-gradient(
		rgba(0,0,0,1),
		rgba(0,0,0,1)
		);
color:#ffffff;
color:var(--text-bright-color);
border:1px #000000 solid;
}
.conB a img{
width:80px;
height:65px;
}


/* トップ　アクセス */
.conC{
text-align:center;
margin:0px 0px 30px 0px;
}
.conC img{
width:90%;
border:#eaeaeb 1px solid;
border-radius:5px;
}
.conC a{
display:inline-block;
border-radius:3px;
margin-top:0px;
padding:10px 30px;
line-height:100%;
background-color:#000000;
background-color:var(--dark-main-color);
color:#ffffff;
color:var(--text-bright-color);
font-size:14px;
text-decoration:none;
font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
}
.conC a:hover{
background-image:linear-gradient(
		rgba(238,238,238,1),
		rgba(238,238,238,1)
		);
color:#000000;
color:var(--dark-main-color);
}
.conC h2{
font-size:15px;
font-weight:bold;
display:inline-block;
line-height:100%;
padding:8px 30px;
border:3px #000000 solid;
background-color:#ffffff;
font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
margin-bottom:10px;
}


.bottom-info{
background-color:#005cac;
background-color:var(--main-color);
width:100%;
margin:50px 0px 0px 0px;
padding:15px 0px;
text-align:center;
font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
	color:#ffffff;
}
.bottom-info h3{
margin:0px;
font-size:17px;
}
.bottom-info p{
margin:0px;
font-size:15px;
}



/* フッター */
footer{
color:#ffffff;
color:var(--text-bright-color);
background-color:#000000;
background-color:var(--dark-main-color);
text-align:center;
font-size:11px;
padding:15px 0px;
margin:0px;
}



footer a{
color:#ffffff;
color:var(--text-bright-color);
text-decoration:none;
margin:0px 10px 0px 10px;
display:inline-block;
}
footer a:hover{
color:#005cac;
color:var(--main-color);
}



/* 問い合わせ先 */
.contact{

margin-top:20px;
margin-bottom:20px;
padding:20px;
background-color:#ffffff;
text-align:center;
border-radius:5px;

}
.contact h2{
margin-top:0;
margin-bottom:0;
font-size:12px;
color:#000000;
}
.contact-wrap{
margin:0 auto;
text-align:center;
width:65%;

}
/* 電話とメール　googleフォント */
.contact-eng{
font-family: 'Roboto Condensed', sans-serif;
font-size:20px;
margin:0;
padding:0;
line-height:100%;
}
.contact-eng a{color:#000000;text-decoration:none;}
.contact-eng a:hover{color:#000000;text-decoration:none;}




@media(min-width:768px){

					
/* 基本設定　ページ全体 */
body {
font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
margin:0;
line-height: 1.9;

font-size:15px;
}
					
					
.startlogo img{
width:550px;
}



/* 線画イラストをやめてグラデーション */
.lineillust{
text-align:center;
margin:0 auto 0px auto;
height:1200px;

background: linear-gradient(0deg, rgb(255, 255, 255), rgb(0, 92, 175)) ;
}

/* 飛行機を移動アニメーション */
.animation_box {
  padding: 0px;
  animation-name: fadeIn;
  animation-duration: 8s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
}
					
.animation_box img{margin-top: 520px;}

					
					
.conA .container{
text-align:center;
margin:0 auto;
width:90%;
max-width:780px;
}
.conA h1{
padding:50px 0px 30px 0px;
font-size:20px;
}
.conA img{
width:360px;
margin:0;
}
.conA p{
margin:0;

}
.conB{
text-align:center;
margin:50px auto 80px auto;
}
.conB .container{
margin:0 auto;
text-align:center;
display:flex;
width:90%;
max-width:1000px;
}
.conB .topmenu{
flex:1;
text-align:center;

}
.conB a{
text-decoration:none;
color:#000000;
color:var(--dark-main-color);
display:inline-block;
border-radius:5px;
padding:20px 0px;
background-color:#ffffff;
background-color:var(--text-bright-color);
margin-bottom:10px;
max-width:180px;width:90%;
border:1px #cccccc solid;
}
.conB a img{
width:124px;
height:100px;
}
.conC img{
max-width:700px;
width:80%;
}


.bottom-info .container{

}

.contact-wrap{
display:flex;
margin:0 auto;
text-align:center;
width:470px;
}
.contact{
flex:1;
}
.contact:first-child{
margin-right:20px;
}



}