@charset "utf-8";
/*------------------------------*/

/* 地球画像の大枠 */
.earth_frame_wrapper {
	width:800px;
	height:800px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	visibility:hidden;
}

/* 地球枠の背景画像 */
.earth_frame_background {
	position: relative;
	background-image:url('/image/top_background_image.jpg');
	background-size: cover;
	background-position: center;
	padding:30px 0px;
	opacity: 0;
	transition:3s;
}

/* 星空背景枠内上部の帯*/
.earth_frame_background_top {
	position:absolute;
	top:0px;
	width:100%;
	height:20%;
	background:linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 20%,rgba(255,255,255,0) 100%);
}
/* 星空背景枠下部の帯*/
.earth_frame_background_bottom {
	position:absolute;
	bottom:0px;
	width:100%;
	height:20%;
	background:linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 80%, rgba(255,255,255,1) 100%);
}

/* 地球の枠の画像 */
.earth_frame {
	width:800px;
	height:800px;
	position:absolute;
	left:-100%; /* アニメーション前 */
	opacity:0;
}

/* 追加用の回転アニメーション専用オプション */
.add_main_big_title_rotate {
	animation: earth_frame_rotate 240s linear infinite;
}
@keyframes earth_frame_rotate {
	0% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(540deg);
	}
}

/* 地球画像 */
.earth_image {
	width:800px;
	height:800px;
	position:absolute;
	right:-100%; /* アニメーション前 */
	opacity:0;
}

/* 地球内メインタイトル */
.main_big_title {
	position:absolute;
	text-align:center;
	color:#ffffff;
	z-index:1;
	font-weight:bold;
	width:100%;
	text-shadow: 0px 2px 5px #000000;
	opacity: 0;
	transform: translateY(10%);
	-webkit-transform: translateY(10%);
}

/* 地球の影 */
.shadow_below {
	width: 60%;
	height: 50px;
	background: radial-gradient(farthest-side at center,rgba(20,0,10,0.2) 25%, rgba(0,0,0,0) 100%);
	filter: blur(0.5px);
	border:none;
	margin-top:100px;
	margin-right:auto;
	margin-left:auto;
}
/* タブレット */
@media only screen and (max-width:767px) {
	.shadow_below {
		height: 35px;
		margin-top:80px;
	}
}
/* スマホ */
@media only screen and (max-width:550px) {
	.shadow_below {
		height: 20px;
	}
}

/* サブタイトル枠 */
.sub_title_flame {
	position:relative;
	text-align:center;
}
.sub_title_inner {
	text-align:center;
	z-index: -1;
}
/* サブタイトル上部 */
.sub_title_box_top {
	font-size:40px;
	font-weight:bold;
	color:#004093;
}
/* サブタイトル下部 */
.sub_title_box_bottom {
	font-size:16px;
	font-weight:bold;
	color:#4d4d4d;
}
/* サブタイトル背景ライン */
.sub_title_background {
	position:absolute;
	left:10%;
	width:80%;
	height:20px;
	top:25%;
	background: -webkit-repeating-linear-gradient(90deg,#12b8d7 0,#12b8d7 3px,rgba(255,255,255,0) 3px,rgba(255,255,255,0) 10px);
	background: -o-repeating-linear-gradient(90deg,#12b8d7 0,#12b8d7 3px,rgba(255,255,255,0) 3px,rgba(255,255,255,0) 10px);
	background: repeating-linear-gradient(90deg,#12b8d7 0,#12b8d7 3px,rgba(255,255,255,0) 3px,rgba(255,255,255,0) 10px);
	transform: skewX(45deg);
}

/* 縦書き文字 */
.index_vertical_rl {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
	display: inline-block;
}
/* タブレット */
@media only screen and (max-width:767px) {
	.index_vertical_rl {
		-ms-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
	}
}

/*------------------------------*/
.hidden_wrapper {
	height:800px;
}

/*------------------------------*/
/* ビデオ背景枠 */
#video {
	position:absolute;
	height:800px;
	width:100%;
}

/*------------------------------*/
/* 多重スクロールユンボ背景画像 */
.index_image_01 {
	height:600px;
}
.index_image_01::before {
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100vw;
	height:100vh;
	background:url('/image/index_image_01.jpg') left top no-repeat;
	background-size: cover;
	content:"";
}

/*------------------------------*/
/* 作業員画像 */
.worker_image {
	position:absolute;
	right:0px;
	bottom:0px;
	width:35%;
	filter: drop-shadow(15px 0px 0px rgba(0,0,0,0.5));
}

/*------------------------------*/
/* 縦線を作るボックス */
.vertical_line_box {
	background-color:#004093;
	width:2px;
	height:200px;
	margin-left:auto;
	margin-right:auto;
}

/* 青丸ボタン */
.circle_button {
	background-color:#004093;
	border-radius: 50px;
	width:50px;
	height:50px;
	color:#ffffff;
	font-weight:bold;
	text-align:center;
	font-size:18px;
	transition:0.3s;
}
/* READMORE ボタン*/
.readmore_button {
	transition:0.3s;
	text-decoration:underline;
}
.hover_01:hover .circle_button {
	background-color:#2f78d6;
}
.hover_01:hover .readmore_button {
	color:#cccccc;
}

/*------------------------------*/
/* 青帯本体 */
.sub_contents_box_01 {
	background-color:#004093;
	transition:1s;
	width:50%;
	opacity: 0;
}

/* サブコンテンツ 青帯要素枠 */
.sub_contents_box_wrapper {
	position:relative;
	-webkit-transform:translateY(-150px); /* Safari用 */
	transform:translateY(-150px);
}
/* タブレット */
@media only screen and (max-width:767px) {
	.sub_contents_box_wrapper {
		-webkit-transform:translateY(0px); /* Safari用 */
		transform:translateY(0px);
	}
}

/* サブコンテンツ 2段目 写真枠 */
.sub_contents_box_02 {
	width:100%;
	max-width:1000px;
	height:400px;
	margin-left:auto;
	margin-right:auto;
}
/* タブレット */
@media only screen and (max-width:767px) {
	.sub_contents_box_02 {
		height:300px;
	}
}

/* サブコンテンツ 3段目 コメント枠 */
.sub_contents_box_03 {
	position:absolute;
	width:100%;
	bottom:-50px;
	z-index:1;
	transition:1s;
}
/* タブレット */
@media only screen and (max-width:767px) {
	.sub_contents_box_03 {
		position:static;
		margin-left:auto;
		margin-right:auto;
		-webkit-transform:translateY(-50px); /* Safari用 */
		transform:translateY(-50px);
	}
}

/* コメント枠 */
.sub_contents_box_03_in_comment {
	background-color:#ffffff;
	box-shadow: 5px 5px 10px #000000;
	padding:40px;
	transition:1s;
}
.sub_contents_box_03_in_comment:hover {
	background-color:#f0f0f0;
	-webkit-transform:translateY(10px); /* Safari用 */
	transform:translateY(10px);
}

/*------------------------------*/
/* 右矢印 */
.right_arrow {
	border-right:1px solid #a11f24;
	border-bottom:1px solid #a11f24;
	height:10px;
	position:absolute;
	width:100%;
	bottom:0px;
	left:0px;
	-webkit-transform:skewX(45deg);
	transform:skewX(45deg);
	transform-origin:left bottom;
}

/*------------------------------*/
/* 写真フレーム */
.index_contents_photo_box_01 {
	background-image:url('/image/index_contents_photo_01.jpg');
	background-size:cover;
	background-position:center;
}

.index_contents_photo_box_02 {
	background-image:url('/image/index_contents_photo_02.jpg');
	background-size:cover;
	background-position:center;
}

/*------------------------------*/
/* 灰色背景 */
.gray_box {
	background-color:#e0e0e0;
}

/*------------------------------*/
/* 採用情報枠 */
.recruitment_info_box_01 {
	background-image: url('/image/index_background_01.jpg');
	background-size:cover;
	background-position: center;
	height:400px;
	position:relative;
}
/* 灰色の大文字 */
.bottom_big_font {
	color:#adadad;
	font-size:50px;
	font-weight:bold;
	position:absolute;
	bottom:10px;
	left:0px;
	width:100%;
}

/*------------------------------*/
/* 採用情報枠 */
.recruitment_info_box_02 {
	background-image: url('/image/index_background_02.jpg');
	background-size:cover;
	background-position: center;
	padding-top:200px;
	padding-bottom:200px;
}

/* 社員の声 */
.voice_employees {
	background-color: #004093;
	color:#ffffff;
	max-width:400px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding:20px 10px;
}

/*------------------------------*/
/* 青ストライプ */
.blue_stripe {
	height:20px;
	background: -webkit-repeating-linear-gradient(90deg,#12b8d7 0,#12b8d7 3px,rgba(255,255,255,0) 3px,rgba(255,255,255,0) 10px);
	background: -o-repeating-linear-gradient(90deg,#12b8d7 0,#12b8d7 3px,rgba(255,255,255,0) 3px,rgba(255,255,255,0) 10px);
	background: repeating-linear-gradient(90deg,#12b8d7 0,#12b8d7 3px,rgba(255,255,255,0) 3px,rgba(255,255,255,0) 10px);
	transform: skewX(45deg);
}

/* スタッフ写真枠 */
.staff_photo_box {
	max-width:80%;
	left:50%;
	-webkit-transform:translateX(-50%); /* Safari用 */
	transform:translateX(-50%);
	position:relative;
	box-shadow: 5px 5px 10px #004093;
}
/* スマホ */
@media only screen and (max-width:550px) {
	.staff_photo_box {
		max-width:90%;
	}
}

/* 写真左上の青三角 */
.triangular_label {
	position:absolute;
	top:0px;
	left:0px;
	width:30%;
	z-index:1;
}

/* 写真テロップ枠 */
.photo_info_box {
	position:absolute;
	bottom:10%;
	left:0px;
	width:100%;
	z-index:1;
	background-color:#004093;
	color:#ffffff;
	text-align:center;
	padding:10px 2px;
}

/*------------------------------*/
/* アニメーション文字 */
/*------------------------------*/
/* 変化前のスタイル */
.aw_character_01 {
	position: relative;
	opacity: 0;

	/* アニメーション設定 */
	--property: top, opacity;/* アニメーションに使用するプロパティ */
	--duration: 70ms;/* アニメーションタイム時間(AT) */
	--delay: -40ms;/* 遅延時間(DT) AT-DT=SP*/

	transition-property: var(--property);
	transition-timing-function: steps(20,end);
	transition-duration: var(--duration);
	transition-delay: calc((var(--duration) + var(--delay)) * var(--index,0) + var(--delay));
}
/* 変化後のスタイル */
.aw_character_01_after .aw_character_01 {
	opacity: 1;
	will-change: var(--property); /* 処理軽減 */
}