@charset "utf-8";
/* CSS Document */

body,html{
	height:100%;
}
div#wrapper{
	height:100%;
}
#main_image{
    width: 100%;
	height:100%;
    background: #999;
}
/*インナー部分*/
.inner-content{
    width: 100%;
}
.navbar{
	max-width:1024px;
	margin:0 auto;
	z-index:20;
}
/* PC/共通：150px超えたらヘッダー本体に色 */
.navbar.scrolled {
  background-color: rgba(255,255,255,0.7) !important;
}

/* SP時：展開部分にも色（collapseは .show が付く） */
@media (max-width: 767.98px) {
  .navbar.scrolled .navbar-collapse,
  .navbar.scrolled .navbar-collapse.show {
    background-color: rgba(255,255,255,0.7) !important;
  }
}

h1{
	max-width:1024px;
	margin:0 auto;
	color:#003660;
	/* 文字の表示アニメーション */
	animation: fadeIn 10s ease 0s 1 normal;
	-webkit-animation: fadeIn 10s ease 0s 1 normal;
}
/*リクルートバナー*/
div.bnr_recruit a:hover img{
	opacity:0.8;
}
div.bnr_recruit a:hover{
	display:block;
	background:#fff;
}

.change-color{
	background:#fff;
}

@media (min-width: 576px) {
/*画面サイズが576px以上（タブレット）はここを読み込む*/

h1{
	position: relative;
	top:40%;
	left:20px;
	font-size:2rem;
}
/*リクルートバナー*/
div.bnr_recruit{
	position:fixed;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}
/*アライアンスバナー*/
div.bnr_alliance{
	text-align:right;
	position:absolute;
	right:70px;
	bottom:50px;
}
div.bnr_alliance a:hover{
	opacity:0.9;
}

}

@media (max-width:575px){ 
/*画面サイズが576px以下（スマホ）はここを読み込む*/
div#wrapper{
	height:100%;
	overflow-x:hidden;
}

h1{
	position: relative;
	top:40%;
	text-align:center;
	font-size:1.75rem;
}
/*リクルートバナー*/
.bnr_recruit_sp{
	position:fixed;
	bottom: 0;
}
/*アライアンスバナー*/
div.bnr_alliance_sp{
	width:100%;
	position:absolute;
	bottom:50px;
	text-align:center;
	z-index:1;
}
div.bnr_alliance_sp a:hover{
	opacity:0.9;
}

/*ページトップへ戻る*/
#page_top{
  bottom: 50px!important;
}

}

@media (max-width:768px){ 
/*画面サイズが768px以下はここを読み込む*/
.navbar-collapse{
	background:rgba(255,255,255,0.7);
}
ul.dropdown-menu{
	background:rgba(255,255,255,0.4);
}
}
	
/* 文字の表示アニメーション  */
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
 
/*古いブラウザ用*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
