@charset "utf-8";
/*=========================================================
   基本スタイルシート
   ※トップイメージ画像
   現在の場所表示用
   見出し要素 h1 h2
   隙間調整
   footer調整
   《色指定》
   文字カラー： #333333;
   ＦＣＪカラー： #008FD4
   スゴイぞカラー： #2891F6
=========================================================*/

/*====================================
   基本スタイルシート
====================================*/
body {
	font-family: "メイリオ", Meiryo, sans-serif;
	font-size: 32px;
	color: #333333;
	font-weight: normal;
	letter-spacing: 0.01em;
	line-height: 1.5em;
	width: 100%;
	margin: 0 auto;
	background-color: #FFFFFF;
	min-width: 350px; /* 最小画面サイズ */
	-webkit-text-size-adjust: 100%;
	position: relative;
}

@media screen and (max-width: 3200px) {
	body {
		font-size: 26px;
	}
}

@media screen and (max-width: 2560px) {
	body {
		font-size: 24px;
	}
}

@media screen and (max-width: 1920px) {
	body {
		font-size: 16px;
	}
}

@media screen and (max-width: 1110px) {
	body {
		font-size: 14px;
	}
}

@media screen and (max-width: 750px) {
	body {
		font-size: 12px;
	}
}


a {
	text-decoration:none;
	color:#323232;
	transition:opacity 0.2s linear;
	-webkit-transition:opacity 0.2s linear;
	-moz-transition:opacity 0.2s linear;
	}

a:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	}



/*====================================
　　ヘッダー
====================================*/

header {
	width: 100%;
	background-color: #2891F6;
	padding: 0.7em 1em;
	margin: 0;
}

header .logo {
	width: 33%;
	color: #FFFFFF;
	letter-spacing: 0px;
	line-height: 1em;
	font-size: 12px;
	margin: 0;
}


@media screen and (max-width: 900px) {
	header .logo {
		width: 300px;
	}
}



/*====================================
    ※トップイメージ画像
====================================*/
.top-img {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 0px;
	position: relative;
	border: 1px solid #0ff;
}



/*=========================================================
   画像ボックス、画像に影をつける
=========================================================*/
.imgbox {
	width: 90%;
	margin: 1em auto;
	padding: 0em;
	text-align: center;
}


.imgbox img {
	filter: drop-shadow(5px 5px 5px #666);
}

.photo-no {
	margin: 1em auto 2.5em auto;
	padding: 0em;
	text-align: center;
}



/*=========================================================
   基本ＢＯＸ設定
=========================================================*/
.kihonbox {
	width: 1100px;
	padding: 1em;
	margin: 1.5em auto;
	text-align: left;
	background-color: #FFFFFF;
	border: 3px solid #2891F6;
	border-radius: 20px;
}

@media screen and (max-width: 1200px) {
	.kihonbox {
		width: 92%;
	}
}

@media screen and (max-width: 700px) {
	.kihonbox {
		width: 96%;
	}
}

.textbox {
	width: 35em;
	padding: 0em;
	margin: 0.8em auto;
	text-align: left;
	background-color: #FFFFFF;
	border: 0px solid #2891F6;
}

@media screen and (max-width: 1920px) {
	.textbox {
		width: 92%;
	}
}

@media screen and (max-width: 1200px) {
	.textbox {
		width: 92%;
	}
}

@media screen and (max-width: 700px) {
	.textbox {
		width: 96%;
	}
}


.textbox-riyou {
	width: 40em;
	padding: 0em;
	margin: 0.8em auto;
	text-align: left;
	letter-spacing: 0.05em;
	line-height: 1.7em;
	background-color: #FFFFFF;
	border: 0px solid #2891F6;
}

@media screen and (max-width: 1920px) {
	.textbox-riyou {
		width: 92%;
	}
}

@media screen and (max-width: 1200px) {
	.textbox-riyou {
		width: 92%;
	}
}

@media screen and (max-width: 700px) {
	.textbox-riyou {
		width: 96%;
	}
}



/*=========================================================
　　table
=========================================================*/
td {
	padding: 0.25em 0em;
}



/*=========================================================
　　見出し要素 h1 h2
=========================================================*/
h1 {
	width: 95%;
	margin: 1em auto;
	padding: 0px 0px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	line-height: 1.2em; /* 行間調整 */
	color: #008FD4;
}

@media screen and (max-width: 1110px) {
	h1 {
		font-size: 26px;
	}
}

@media screen and (max-width: 750px) {
	h1 {
		font-size: 20px;
	}
}

h2 {
	width: 95%;
	margin: 1em auto;
	padding: 0px 0px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	line-height: 1.2em; /* 行間調整 */
	color: ;
}

@media screen and (max-width: 1110px) {
	h2 {
		font-size: 26px;
	}
}

@media screen and (max-width: 750px) {
	h2 {
		font-size: 20px;
	}
}

h3 {
	width: 95%;
	margin: 1em auto;
	padding: 0px 0px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.2em; /* 行間調整 */
	color: ;
}

@media screen and (max-width: 1110px) {
	h3 {
		font-size: 24px;
	}
}

@media screen and (max-width: 750px) {
	h3 {
		font-size: 20px;
	}
}



/*=========================================================
　　ビデオボックス
=========================================================*/
.video-box {
	width: 100%;
	height: 100%;
	font-size: 100%;
	line-height: 1;
	text-align: center;
	padding: 0px;
	margin: 0px auto;
	border: 0px solid #3b8ce7;
	}

.video-box video {
	width: 1300px;
	border: 0px solid #3bffe7;
	}

@media screen and (max-width: 1450px) {
	.video-box video {
		width: 90%;
	}
}

@media screen and (max-width: 1300px) {
	.video-box video {
		width: 95%;
	}
}

@media screen and (max-width: 800px) {
	.video-box video {
		width: 100%;
	}
}



/*====================================
　　ボーダー調整
====================================*/
.border-ud {
	border-top: 5px solid #008FD4;
	border-bottom: 5px solid #008FD4;
}



/*====================================
　　隙間調整
====================================*/
.space05 {
	width: 100%;
	margin-top: 5px;
}

.space10 {
	width: 100%;
	margin-top: 10px;
}

.space20 {
	width: 100%;
	margin-top: 20px;
}

.space30 {
	width: 100%;
	margin-top: 30px;
}

.space40 {
	width: 100%;
	margin-top: 40px;
}

.space50 {
	width: 100%;
	margin-top: 50px;
}



/*====================================
　　footer
====================================*/

footer {
	background-color: #2891F6;
	color: #FFFFFF;
	text-align: center;
	padding: 1em 0px;
	position: relative;
}

footer a {
	color: #FFFFFF;
	text-decoration: none;
	transition-duration: 0.3s;
}

footer a:hover {
	opacity: .9;
}