@charset "utf-8";
#footer {  position: fixed;  z-index: 100; left: 0; right: 0; bottom: 0; opacity: 0; filter: alpha(opacity=0); transition: all 1s; bottom: -80px; }
#footer:hover { opacity: 1; filter: alpha(opacity=100); bottom: 0px; }
.mega {
	background: url(../r_images/bg01.jpg) center center;
	background-size: cover;
	position: relative;
}
.drop2 {
	background-image: url(../r_images/bg02.jpg);
}
.drop3 {
	background-image: url(../r_images/bg03.jpg);
}
.drop4 {
	background-image: url(../r_images/bg04.jpg);
}
.drop5 {
	background-image: url(../r_images/bg05.jpg);
}
.mega .inner {
	width: 1200px;
	text-align: center;
	position: absolute;
	padding-top: 100px;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
a.btn_enter {
	border: 3px solid #063156;
	font-family: meiryo;
	font-size: 19px;
	font-weight: bold;
	color: #063156;
	display: inline-block;
	width: 250px;
	padding: 10px;
	text-decoration: none;
	position: relative;
}
a.btn_enter:before {
	content: "≫";
	right: 60px;
	top: 50%;
	margin-top: -13px;
	position: absolute;
}
a.btn_enter:hover {
	background: #063156;
	color: #fff;
}
.mega h2 strong {
	display: block;
	margin-top: 30px;
}
/* 見出しを実テキスト（本文と同じゴシック）に統一 */
.mega h2 .h_en { display: block; font-family: YuGothic, '游ゴシック', sans-serif; font-weight: normal; font-size: 22px; letter-spacing: 0.1em; color: #fff; opacity: 0.92; margin-bottom: 2px; }
.mega h2 strong { font-family: YuGothic, '游ゴシック', sans-serif; font-weight: bold; font-size: 32px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.active.mega h2 strong {
	-webkit-animation: move-left 2s ease-in-out 0.5s;
	-moz-animation: move-left 2s ease-in-out 0.5s;
	-ms-animation: move-left 2s ease-in-out 0.5s;
	-o-animation: move-left 2s ease-in-out 0.5s;
	animation: move-left 2s ease-in-out;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	position: relative;
	z-index: 10;
}

/* drop1 */
.drop1 h1 {
	margin: 95px 0 0;
}
.active.drop1 h1 {
	-webkit-animation: fade-in 1s ease-in-out 1.2s;
	-moz-animation: fade-in 1s ease-in-out 1.2s;
	-ms-animation: fade-in 1s ease-in-out 1.2s;
	-o-animation: fade-in 1s ease-in-out 1.2s;
	animation: fade-in 1s ease-in-out 1.2s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;	
}
.active.drop1 p{
	-webkit-animation: fade-in 0.8s ease-in-out 1s;
	-moz-animation: fade-in 0.8s ease-in-out 1s;
	-ms-animation: fade-in 0.8s ease-in-out 1s;
	-o-animation: fade-in 0.8s ease-in-out 1s;
	animation: fade-in 0.8s ease-in-out 1s;	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;	
}
.btn_scroll {
	position: fixed;
	bottom: 120px;
	right: 3%;
	-webkit-animation: fade-out 1s ease-in-out infinite;
	-webkit-animation-direction: alternate;
	-moz-animation: fade-out 1s ease-in-out infinite;
	-moz-animation-direction: alternate;
	-ms-animation: fade-out 1s ease-in-out infinite;
	-ms-animation-direction: alternate;
	-o-animation: fade-out 1s ease-in-out infinite;
	-o-animation-direction: alternate;
	animation: fade-out 1s ease-in-out infinite;
	animation-direction: alternate;
	z-index: 99;
	cursor: pointer;
}

/* drop2 */
.drop2 p {
	font-size: 18px;
	color: #063156;
	padding: 45px 0;
}
.drop2 .inner {
	padding-bottom: 60px;
}

/* drop3 */
.t_wanted {
	float: left;
	width: 640px;
}
.t_wanted h2 {
	margin: 15px 0 25px;
}
.t_wanted p {
	color: #000;
	font-size: 16px;
	margin-bottom: 30px;
	line-height: 2;
}
.t_wanted .image {
	margin-left: 25px;
}
.t_wanted .btn_enter {
	color: #000;
	border-color: #000;
}
.t_wanted .btn_enter:hover {
	background: #000;
}
.t_message {
	float: right;
	width: 520px;
	padding: 100px 20px 0 0;
}

/* drop4 */
.drop4 .image {
	float: left;
	margin: 0 0 0 60px;
}
.drop4 .text_drop4 {
	float: right;
	width: 535px;
	color: #fff;
	padding-top: 150px;
	margin-right: 55px;
}
.drop4 .text_drop4 p {
	font-size: 16px;
	line-height: 2;
}
.drop4 .btn_enter {
	color: #fff;
	border-color: #fff;
}
.drop4 .btn_enter:hover {
	background: #fff;
	color: #446389;
}

/* drop5 */
.drop5 p {
	color: #fff;
	font-size: 16px;
	line-height: 2;
	text-shadow: 0 0 1px #000; background: rgba(26,49,78,0.6); display: inline-block; padding: 10px; margin-bottom: 15px;
}
.drop5 ul {
	padding-top: 55px;
}
.drop5 li {
	display: inline-block;
	width: 220px;
	margin: 0 18px;
}
.drop5 li a {
	background: #1a314e;
	color: #fff;
	display: block;
	text-decoration: none;
	position: relative;
}
.drop5 li a:hover {
	background: #fff;
	color: #1a314e;
}
.drop5 li a:before {
	content: "";
	background: url(../r_images/shadow.png) no-repeat;
	width: 220px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 100%;
}
.drop5 li a span {
	display: inline-block;
	position: relative;
	font-size: 15px;
	font-weight: bold;
	padding: 20px 25px;
}
.drop5 li a span:before {
	content: "≫";
	position: absolute;
	right: 0;
	top: 19px;
	font-size: 17px;
	font-weight: normal;
}
.btn_up {
	position: absolute;
	bottom: 140px;
	right: 50%;
	margin-right: -600px;
	z-index: 100;
	-webkit-animation: fade-out 1s ease-in-out infinite;
	-webkit-animation-direction: alternate;
	-moz-animation: fade-out 1s ease-in-out infinite;
	-moz-animation-direction: alternate;
	-ms-animation: fade-out 1s ease-in-out infinite;
	-ms-animation-direction: alternate;
	-o-animation: fade-out 1s ease-in-out infinite;
	-o-animation-direction: alternate;
	animation: fade-out 1s ease-in-out infinite;
	animation-direction: alternate;
}


@media (max-width: 1370px) {
	a.btn_enter { padding: 3px; font-size: 17px; }
	.mega h2 strong { margin-top: 15px; }
	.drop1 h1 { margin-top: 30px; }
	.drop2 p { padding: 15px 0; }
	.drop2 .inner { padding-bottom: 0; }
	.t_wanted > img { width: 200px; }
	.t_wanted p { font-size: 14px; }
	.t_message { padding-top: 0px; }
	.t_message a img { width: 350px; }
	.t_wanted h2 { margin: 10px 0 15px; }
	.t_wanted p { margin-bottom: 15px; line-height: 1.6; }
	.drop4 .image img { height: 405px; margin: 30px 0 0 180px; }
	.drop4 .text_drop4 { padding-top: 70px; }
	.drop5 h2 { margin-bottom: 15px !important; }
	.drop5 p { font-size: 14px;  }
	.drop5 ul { padding-top: 5px; }
	.drop5 li { width: 180px; margin: 0 10px; }
	.drop5 li img { max-width: 100%; }
	.drop5 li a span { padding: 5px 10px; }
	.drop5 li a span::before { font-size: 15px; right: -5px; top: 5px; }
	.btn_up { bottom: 45px; margin-right: -500px; }
}


/******************** move-left ******************************/
@-moz-keyframes move-left {
	0% {
		opacity: 0;
		left: 200px;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}
@-webkit-keyframes move-left {
	0% {
		opacity: 0;
		left: 200px;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}
@-o-keyframes move-left {
	0% {
		opacity: 0;
		left: 200px;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}
@-ms-keyframes move-left {
	0% {
		opacity: 0;
		left: 200px;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}
@keyframes move-left {
	0% {
		opacity: 0;
		left: 200px;
	}
	100% {
		opacity: 1;
		left: 0;
	}
}

/******************** fade-in ******************************/
@-moz-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/******************** fade-out ******************************/
@-moz-keyframes fade-out {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes fade-out {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes fade-out {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes fade-out {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-out {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

/* 採用TOP: 差し替え写真の表示枠を元画像と同じサイズに固定（img01=418x279 / img02=534x653）。
   各セクションの .inner は画面中央に絶対配置のため、写真が元より縦に高いと中身が
   画面高を超えて上下が見切れる。object-fit: cover で枠を固定し元の高さに戻す（歪みなし）。
   ≤1370px は既存のメディアクエリ側で制約済み。 */
@media (min-width: 1371px) {
	/* drop3(求める人物像): セクションが画面高を超えて上下が見切れるため、写真と本文をやや詰めて画面内に収める */
	.t_wanted .image { width: 360px; height: 240px; object-fit: cover; margin-bottom: 6px; }
	.t_wanted h2 { margin: 10px 0 15px; }
	.t_wanted p { line-height: 1.8; margin-bottom: 20px; }
	/* drop4(社員紹介): 写真枠を元画像サイズに固定 */
	.drop4 .image img { width: 534px; height: 653px; object-fit: cover; }
	/* drop5(採用情報): 中身が表示領域を超え上下が見切れるため、中央配置のまま余白・画像を詰めて高さを圧縮し上下とも収める */
	.drop5 ul { padding-top: 20px; }
	.drop5 li img { height: 130px; width: auto; object-fit: cover; }
	.drop5 p { line-height: 1.6; }
}