@charset "utf-8";

/* ========================================================
	index.css => トップページ用CSS
======================================================== */

@media screen and (min-width: 769px), print {
	#header {
		display: none;
	}
	#container {
		padding-top: 0;
	}
	#footer {
		margin-top: 0;
		z-index: 100;
	}
	#pagetop {
		display: none;
	}
}


/* h100
============================================================================================================ */
.h100 {
	position: relative;
	height: 600px;
}
@media screen and (min-width: 769px) {
	.h100 {
		height: 100vh;
	}
	.tablet .h100 {
		height: 980px;
	}
}
@media screen and (max-width: 768px) {
	.h100 {
		height: auto;
	}
}


/* main
============================================================================================================ */
#main {
}
@media screen and (min-width: 769px) {
	#main {
		z-index: 20;
	}
}
@media screen and (max-width: 768px) {
	#main {
		display: none;
	}
}

/* mainLogo
============================================================================================================ */
#mainLogo {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
#mainLogo .logo {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
#mainLogo .logo h2 span {
	display: block;
	margin-top: 10px;
	font-size: 2rem;
}
#mainLogo .logo p {
	margin-top: 30px;
	font-size: 3.5rem;
	font-weight: bold;
	letter-spacing: 3px;
}
@media screen and (min-width: 769px) {
	#mainLogo .logo h2,
	#mainLogo .logo p {
		-webkit-transition: all 0.6s;
		-o-transition: all 0.6s;
		transition: all 0.6s;
		-webkit-transition-delay: 1.7s;
		-o-transition-delay: 1.7s;
		transition-delay: 1.7s;
		opacity: 0;
	}
	#mainLogo .logo h2 {
		-webkit-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		-o-transform: translateY(-10px);
		transform: translateY(-10px);
	}
	#mainLogo .logo p {
		-webkit-transition-delay: 2s;
		-o-transition-delay: 2s;
		transition-delay: 2s;
		-webkit-transform: translateY(10px);
		-ms-transform: translateY(10px);
		-o-transform: translateY(10px);
		transform: translateY(10px);
	}
	#main.show + #mainLogo .logo h2,
	#main.show + #mainLogo .logo p {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}

	.tablet #mainLogo {
		position: relative;
	}
	.tablet #mainLogo:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: url(../images/main_bg.jpg) no-repeat 50% 0;
		-webkit-background-size: cover;
		background-size: cover;
		opacity: .5;
	}
	.tablet #mainLogo .logo h2,
	.tablet #mainLogo .logo p {
		position: relative;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
		z-index: 3;
	}
}
@media screen and (max-width: 768px) {
	#mainLogo {
		position: relative;
		height: 400px;
	}
	#mainLogo:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: url(../images/main_bg.jpg) no-repeat 50% 0;
		-webkit-background-size: cover;
		background-size: cover;
		opacity: .5;
	}
	#mainLogo .logo h2 img {
		width: 190px;
	}
	#mainLogo .logo h2 span {
		margin-top: 10px;
		font-size: 1.5rem;
	}
	#mainLogo .logo p {
		margin-top: 20px;
		font-size: 2rem;
		letter-spacing: 1px;
	}
	#mainLogo .logo.has_news {
		padding-bottom: 40px;
	}
}

#mainLogo .news {
	position: absolute;
}
@media screen and (min-width: 769px) {
	#mainLogo .news {
		bottom: 60px;
		right: 60px;
		left: 230px;
		font-size: 1.4rem;
		opacity: 0;
		-webkit-transition: opacity 1s 1.8s;
		-o-transition: opacity 1s 1.8s;
		transition: opacity 1s 1.8s;
	}
	.show + #mainLogo .news {
		opacity: 1;
	}
	#mainLogo .news section {
		display: table;
		width: 100%;
		height: 80px;
		background-color: rgba(106,106,106,.8);
		color: #fff;
	}
	#mainLogo .news section > * {
		display: table-cell;
		vertical-align: middle;
	}
	#mainLogo .news section h3 {
		width: 150px;
		background-color: #007ec7;
		text-align: center;
		line-height: 1.3;
	}
	#mainLogo .news section h3 .ff_en {
		display: block;
		font-size: 2.4rem;
		letter-spacing: 2px;
	}
	#mainLogo .news section dl {
		padding: 0 30px;
	}
	#mainLogo .news section dl > * {
		display: inline-block;
		margin-right: 1em;
	}
}
@media (min-width: 769px) and (max-width: 1340px) {
	#mainLogo .news {
		bottom: 40px;
		right: 40px;
	}
}
@media screen and (max-width: 768px) {
	#mainLogo .news {
		bottom: 10px;
		right: 10px;
		left: 10px;
		font-size: 1.1rem;
	}
	#mainLogo .news section {
		display: table;
		width: 100%;
		background-color: rgba(106,106,106,.8);
		color: #fff;
	}
	#mainLogo .news section > * {
		display: table-cell;
		vertical-align: middle;
	}
	#mainLogo .news section h3 {
		width: 80px;
		background-color: #007ec7;
		text-align: center;
		line-height: 1.3;
	}
	#mainLogo .news section h3 .ff_en {
		display: block;
		font-size: 1.8rem;
		letter-spacing: 2px;
	}
	#mainLogo .news section dl {
		padding: 10px 15px;
	}
}

/* main_movie
------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
	#main_movie {
		position: fixed;
		z-index: -100;
		top: 0;
		width: 100%;
		left: 0;
		bottom: 0;
		background-size: cover;
	}
	#main_movie > * {
		position: absolute;
		left: 0;
		top: 0;
		width: auto;
		height: auto;
	}
	.tablet #main_movie {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	#main_movie {
		display: none;
	}
}


/* opening
============================================================================================================ */
@media screen and (min-width: 769px) {
	#opening {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		overflow: hidden;
	}
	#opening:before,
	#opening:after,
	#opening > div:before,
	#opening > div:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #008fd9;
	}
	#opening:before {
		bottom: 50%;
		left: 0;
		-webkit-transform: translateY(-64px);
		-ms-transform: translateY(-64px);
		-o-transform: translateY(-64px);
		transform: translateY(-64px);
	}
	#opening:after {
		top: 50%;
		left: 0;
		-webkit-transform: translateY(64px);
		-ms-transform: translateY(64px);
		-o-transform: translateY(64px);
		transform: translateY(64px);
	}
	#opening > div:before {
		left: 50%;
		top: 0;
		-webkit-transform: translateX(289px);
		-ms-transform: translateX(289px);
		-o-transform: translateX(289px);
		transform: translateX(289px);
	}
	#opening > div:after {
		right: 50%;
		top: 0;
		-webkit-transform: translateX(-289px);
		-ms-transform: translateX(-289px);
		-o-transform: translateX(-289px);
		transform: translateX(-289px);
	}
	#opening > div > div {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 580px;
		height: 130px;
		margin: -65px 0 0 -290px;
		background: #008fd9 url(../images/opening_logo.png) no-repeat;
		-webkit-transition: background 0.8s;
		-o-transition: background 0.8s;
		transition: background 0.8s;
	}
	#opening > div > div:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: url(../images/ajax-loader.gif) no-repeat 50%;
		opacity: 0.6;
	}

	#opening.non_load > div > div:after {
		display: none;
	}
	#main.show #opening > div > div {
		background-color: transparent;
	}


	#main .line {
		position: absolute;
		border: 0 solid #fff;
		-webkit-transition: -webkit-transform 1s;
		-o-transition: -o-transform 1s;
		transition: transform 1s;
		z-index: 100;
	}
	#main .line01 {
		top: 60px;
		right: 60px;
		left: 60px;
		border-top-width: 1px;
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-o-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0, 1);
		-ms-transform: scale(0, 1);
		-o-transform: scale(0, 1);
		transform: scale(0, 1);
	}
	#main .line02 {
		bottom: 60px;
		right: 60px;
		left: 60px;
		border-top-width: 1px;
		-webkit-transform-origin: 100% 0;
		-moz-transform-origin: 100% 0;
		-ms-transform-origin: 100% 0;
		-o-transform-origin: 100% 0;
		transform-origin: 100% 0;
		-webkit-transform: scale(0, 1);
		-ms-transform: scale(0, 1);
		-o-transform: scale(0, 1);
		transform: scale(0, 1);
	}
	#main .line03 {
		bottom: 60px;
		left: 60px;
		top: 60px;
		border-right-width: 1px;
		-webkit-transform-origin: 0 100%;
		-moz-transform-origin: 0 100%;
		-ms-transform-origin: 0 100%;
		-o-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scale(1, 0);
		-ms-transform: scale(1, 0);
		-o-transform: scale(1, 0);
		transform: scale(1, 0);
	}
	#main .line04 {
		bottom: 60px;
		right: 60px;
		top: 60px;
		border-right-width: 1px;
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-o-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(1, 0);
		-ms-transform: scale(1, 0);
		-o-transform: scale(1, 0);
		transform: scale(1, 0);
	}
	#main.show .line {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

	#main.show {
		-webkit-transition: opacity 1s;
		-o-transition: opacity 1s;
		transition: opacity 1s;
		-webkit-transition-delay: 1.3s;
		-o-transition-delay: 1.3s;
		transition-delay: 1.3s;
		opacity: 0;
	}
	.tablet #main {
		display: none;
	}
}


/* page_cover
============================================================================================================ */
@media screen and (min-width: 769px) {
	.page_cover {
		position: fixed;
		background-color: #daedff;
		z-index: 10;
	}
	.page_cover.cover01 {
		top: 0;
		right: 0;
		left: 0;
		height: 60px;
	}
	.page_cover.cover02 {
		bottom: 0;
		right: 0;
		left: 0;
		height: 60px;
	}
	.page_cover.cover01:before,
	.page_cover.cover01:after,
	.page_cover.cover02:before,
	.page_cover.cover02:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
	}
	.page_cover.cover01:before,
	.page_cover.cover02:before {
		width: 35%;
		background-color: #b7e0ff;
	}
	.page_cover.cover01:after,
	.page_cover.cover02:after {
		width: 15%;
		background-color: #a8d9ff;
	}
	.page_cover.cover03 {
		top: 0;
		bottom: 0;
		left: 0;
		width: 60px;
		background-color: #a8d9ff;
	}
	.page_cover.cover04 {
		top: 0;
		bottom: 0;
		right: 0;
		width: 60px;
	}
}


@media (min-width: 769px) and (max-width: 1340px) {
	#main .line01 {
		top: 40px;
		right: 40px;
		left: 40px;
	}
	#main .line02 {
		bottom: 40px;
		right: 40px;
		left: 40px;
	}
	#main .line03 {
		bottom: 40px;
		left: 40px;
		top: 40px;
	}
	#main .line04 {
		bottom: 40px;
		right: 40px;
		top: 40px;
	}
	.page_cover.cover01,
	.page_cover.cover02 {
		height: 40px;
	}
	.page_cover.cover03,
	.page_cover.cover04 {
		width: 40px;
	}
}




/* .index_nav
============================================================================================================ */
.index_nav,
.index_bottom_tel {
	display: none;
}
@media screen and (min-width: 769px) {
	.index_nav {
		display: block;
		position: fixed;
		left: 0;
		top: 50%;
		width: 230px;
		margin-top: -240px;
		padding-bottom: 30px;
		background-color: #008fd9;
		text-align: center;
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
		z-index: 29;
	}
	.index_nav dt {
		display: table;
		width: 100%;
		height: 90px;
		background-color: #7f7f7f;
		color: #fff;
		font-size: 2.2rem;
		letter-spacing: 2px;
	}
	.index_nav dt > * {
		display: table-cell;
		vertical-align: middle;
	}
	.index_nav a {
		display: table;
		width: 100%;
		height: 60px;
		background-color: #008fd9;
		color: #fff;
		font-size: 1.8rem;
		text-decoration: none;
		font-weight: bold;
	}
	.index_nav a > * {
		display: table-cell;
		vertical-align: middle;
	}
	.index_nav a.current,
	body[data-contents-name=main] .index_nav a.main,
	body[data-contents-name=maintenance] .index_nav a.maintenance,
	body[data-contents-name=company] .index_nav a.company,
	.index_nav a:hover {
		background-color: #007ec7;
	}


	.index_bottom_tel {
		display: block;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 230px;
		height: 220px;
		padding-top: 30px;
		background-color: #a8d9ff;
		text-align: center;
		color: #7f7f7f;
		font-size: 1.8rem;
		line-height: 1.6;
		font-weight: bold;
		letter-spacing: 1px;
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
		z-index: 29;
	}
	.index_bottom_tel dt {
		margin-bottom: 5px;
		font-size: 2rem;
		letter-spacing: 2px;
	}

	.index_nav,
	.index_bottom_tel {
		-webkit-transition: -webkit-transform .7s 1.5s;
		-o-transition: -o-transform .7s 1.5s;
		transition: transform .7s 1.5s;
	}
	.nav_show .index_nav {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
	.nav_show .index_bottom_tel {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	.tablet .index_nav,
	.tablet .index_bottom_tel {
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
		-webkit-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}
}
@media screen and (orientation: portrait) {
	.tablet .index_nav {
		top: 490px !important;
		bottom: auto !important;
	}
}
@media screen and (min-width: 769px) and (max-height: 700px) {
	.index_nav {
		top: auto;
		bottom: 160px;
	}
}
@media screen and (min-width: 769px) and (max-height: 860px) {
	.index_bottom_tel {
		height: 160px;
	}
}


/* .index_contents
============================================================================================================ */
.index_contents {
	background-color: #fff;
}
.index_contents .box {
	position: relative;
	padding-top: 50px;
	background-color: #fff;
	text-align: center;
	z-index: 3;
}
.index_contents .box h3 {
	margin-bottom: 20px;
	font-size: 2.5rem;
	line-height: 1.4;
}
.index_contents .box h3:after {
	content: "";
	display: block;
	width: 40px;
	height: 20px;
	margin: 12px auto 0;
	background: url(../common/images/parts/title_point_g.png) no-repeat;
	-webkit-background-size: 100%;
	background-size: 100%;
}
.index_contents .box h3 .ff_en {
	display: block;
	margin-bottom: 20px;
	letter-spacing: 5px;
	text-indent: 5px;
}
.index_contents .box ul {
	margin-top: 50px;
}
.index_contents .box ul li {
	margin-top: 15px;
}
#maintenance,
#maintenance .box {
	background-color: #007ec7;
	color: #fff;
}
#maintenance .box h3:after {
	background-image: url(../common/images/parts/title_point_w.png);
}
@media screen and (min-width: 769px), print {
	.index_contents:after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 54%;
		background-position: 50%;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}
	#maintenance:after {
		background-image: url(../images/maintenance_bg.jpg);
	}
	#company:after {
		background-image: url(../images/company_bg.jpg);
	}

	.index_contents .box {
		position: absolute;
		top: 50%;
		left: 230px;
		width: 35%;
		min-width: 490px;
		height: 480px;
		margin-top: -240px;
	}
}
@media screen and (max-width: 768px) {
	.index_contents .box {
		padding: 40px 0 20px;
		font-size: 1.3rem;
	}
	.index_contents .box h3 {
		font-size: 1.8rem;
	}
	.index_contents .box h3 .ff_en {
		margin-bottom: 5px;
		font-size: 2.5rem;
	}
	.index_contents .box ul {
		margin-top: 30px;
	}
	.index_contents .box:after {
		content: "";
		display: block;
		height: 120px;
		margin: 30px 12px 0;
		background-position: 50%;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}
	#maintenance .box:after {
		background-image: url(../images/maintenance_bg.jpg);
	}
	#company .box:after {
		background-image: url(../images/company_bg.jpg);
	}
}






/* .bottom_nav
============================================================================================================ */
.bottom_nav {
	position: relative;
	padding: 110px 0;
	background-color: #fff;
	z-index: 30;
}
.bottom_nav a {
	display: block;
	padding: 130px 0 70px;
	background-color: #008fd9;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: bold;
}
.bottom_nav a span {
	display: block;
}
.bottom_nav a .ff_en {
	margin-bottom: 10px;
	font-size: 2.5rem;
	letter-spacing: 4px;
}
.bottom_nav a .box_btn {
	margin-top: 70px;
}
@media screen and (min-width: 769px), print {
	.bottom_nav .xw {
		padding: 0 5px;
		display: flex;
		justify-content: center;
	}
	.bottom_nav li {
		width: 33.33%;
		padding: 0 15px;
	}
}
@media screen and (max-width: 768px) {
	.bottom_nav {
		padding: 0;
	}
	.bottom_nav li + li {
		margin-top: 20px;
	}
	.bottom_nav a {
		padding: 40px 0;
		font-size: 1.5rem;
	}
	.bottom_nav a .ff_en {
		margin-bottom: 5px;
	}
	.bottom_nav a .box_btn {
		margin-top: 25px;
	}
}