@charset "utf-8";

* { padding: 0; margin: 0; box-sizing: border-box; }
html, body { color: #000; font-size: 16px; width: 100%; height: 100%; background: #f0f0f0; }
ul { list-style: none; }
a { text-decoration: none; }

#wrapper { width: 100%; margin: 0 auto; }
.img_responsive { max-width: 100%; height: auto; }

/* ------------------------------
ヘッダー
------------------------------ */
header { position: fixed; top: 0; left: 0; width: 100%; background: #666; z-index: 9999; }
header::after { content: ""; display: block; clear: both; }
#logo { float: left; width: 10%; height: 50px; margin: 10px 0 0 50px; }
#logo img { max-width: 100%; height: auto;}
nav { float: left; width: 60%; margin-left: 10%; }

/* ------------------------------
動画
------------------------------ */
#video { position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 999; }
#catch { text-shadow: 0 0 5px #000; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-size: 3em; text-align: center; width: 1200px; height: 1em; color: #fff; line-height: 1.6; }
#catch span { color: #888; }
#catch br { display: none; }

section h2 { font-size: 1em; text-align: center; padding: 10px 0 8px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; }

/* ------------------------------
サービス画像
------------------------------ */
#content_wrap { width: 1280px; margin: 100px auto; }
ul#service { overflow: hidden; width: 80%; margin: 0 auto; }
ul#service li { float: left; width: 33%; margin-bottom: 0.5%; overflow: hidden; background: #000; }
ul#service li:nth-child(3n+2) { margin: 0 0.5% 0.5%; }
ul#service li img { display: block; width: 100%; max-width: 100%; height: auto; transition: .6s; }
ul#service li:hover img { transform: scale(1.2); opacity: 0.6; }

/* ------------------------------
理念
------------------------------ */
#philosophy { width: 80%; margin: 100px auto; }
#philosophy h2 { font-size: 2em; border: none; }
#philosophy div { font-size: 1.3em; padding: 10px; border-radius: 6px; background: #e0e0e0; }

/* ------------------------------
NEWS
------------------------------ */
#news { width: 80%; margin: 100px auto; }
#news .newsBox { width: 100%; height: 300px; overflow: auto; }
#news table { width: 100%; margin: 0 auto; border-collapse: collapse; margin-top: 20px; }
#news th, #news td { line-height: 2; border-bottom: 1px dotted #aaa; }
#news th { font-weight: normal; text-align: left; width: 150px; }
.newsBox th { vertical-align: top; }
/* .newsBox td p { margin-top: -10px; } */

/* ------------------------------
フッター
------------------------------ */
footer { color: #fff; font-size: 0.8em; padding: 20px 0; background: #000; }
footer a { color: #fff; transition: .6s; }
footer a:hover { color: #f00; }
footer #footerMenu { overflow: hidden; width: 65%; margin: 0 auto; }
footer #footerMenu ul { float: left; width: 16.66666%; }
footer #footerMenu li { line-height: 2; }
footer #footerMenu li.lineHeight { line-height: 1.2; }
footer #footerMenu li a { font-size: 0.95em; }
footer p { text-align: center; margin-top: 50px; }


@media screen and (max-width: 1280px) {
	/* ------------------------------
	ヘッダー
	------------------------------ */
	header { z-index: 2; }
	nav { width: 72%; }
	#logo { width: 15%; margin: 10px 0 0 20px; }
	/* ------------------------------
	動画
	------------------------------ */
	#video { position: relative; padding-bottom: 56.25%; height: auto; z-index: 1; }
	#video video { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
	/* ------------------------------
	理念
	------------------------------ */
	#philosophy h2 { font-size: 1.8em; }
	/* ------------------------------
	フッター
	------------------------------ */
	footer #footerMenu { width: 80%; }
}
@media screen and (max-width: 1024px) {
	/* ------------------------------
	ヘッダー
	------------------------------ */
	header { position: static; width: 100%; margin: 0; background: #666; }
	#logo { float: none; width: 20%; height: auto; margin: 0; padding: 10px 0 0 20px; }
	/* ------------------------------
	バナー_G-training
	------------------------------ */
	.bn_g-training {
		width: 60%;
	}
	/* ------------------------------
	動画
	------------------------------ */
	#catch { font-size: 2em; width: 800px; }
	/* ------------------------------
	サービス画像
	------------------------------ */
	#content_wrap { width: 1024px; }
	/* ------------------------------
	フッター
	------------------------------ */
	footer #footerMenu { width: 96%; }
	footer #footerMenu li a { font-size: 0.9em; }
}
@media screen and (max-width: 812px) {
	/* ------------------------------
	動画
	------------------------------ */
	#catch { width: 700px; }
	/* ------------------------------
	サービス画像
	------------------------------ */
	#content_wrap { width: 100%; margin: 50px auto; }
	ul#service li { width: 49.5%; margin-bottom: 0.5%; }
	ul#service li:nth-child(3n+2) { margin: 0 0 1%; }
	ul#service li:nth-child(odd) { margin-right: 1%; }
	/* ------------------------------
	理念
	------------------------------ */
	#philosophy { width: 90%; margin: 50px auto; }
	#philosophy h2 { font-size: 1.3em; }
	#philosophy div { font-size: 1.1em; }

	/* ------------------------------
	NEWS
	------------------------------ */
	#news { width: 90%; margin: 50px auto; }
	#news th { width: 100px; }
	/* ------------------------------
	フッター
	------------------------------ */
	footer #footerMenu { display: none; }
	footer p { margin-top: 0; }
}
@media screen and (max-width: 768px) {
	/* ------------------------------
	ヘッダー
	------------------------------ */
	#logo { width: 200px; }
	/* ------------------------------
	動画
	------------------------------ */
	#catch { font-size: 1.6em; width: 600px; }
	/* ------------------------------
	NEWS
	------------------------------ */
	#news th, #news td { line-height: 1.3; padding: 6px 0 4px; }
}
@media screen and (max-width: 414px) {
	/* ------------------------------
	動画
	------------------------------ */
	#catch { font-size: 1.3em; text-align: center; width: 220px; height: 5em; border-radius: 6px; }
	#catch span { color: #fff; }
	#catch br { display: block; }
	section h2 { font-size: 0.9em; }
	/* ------------------------------
	バナー_G-training
	------------------------------ */
	.bn_g-training {
		width: 100%;
	}
	/* ------------------------------
	サービス画像
	------------------------------ */
	#content_wrap { width: 100%; }
	ul#service { width: 94%; }
	ul#service li { width: 100%; margin-bottom: 0; }
	ul#service li:nth-child(3n+2) { margin: 0 0 3%; }
	ul#service li:nth-child(odd) { margin-right: 0; }
	ul#service li { margin-bottom: 3%; }
	/* ------------------------------
	理念
	------------------------------ */
	#philosophy { width: 96%; }
	/* ------------------------------
	NEWS
	------------------------------ */
	#news { width: 96%; }
	#news th, #news td { display: block; width: 100%; padding: 3px 10px; }
	#news td { border: none; padding-bottom: 20px; }
	#news th { background: #e0e0e0; }
}