@charset "utf-8";

html {
 height:100%;
 margin:0;
 -ms-text-size-adjust:100%;
 -moz-text-size-adjust:100%;
 -webkit-text-size-adjust:100%;
 box-sizing:border-box;
}

body {
 margin: 0;
 padding-bottom:24px;
 padding-top:144px;
 max-width:1280px;
 margin:0px auto;
font-family:sans-serif;
}
@media only screen and (min-device-width:641px){
	body {
	 padding-top: 120px;
	}
}

body, .item {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 height:100%;
 overflow:auto;
}

header{
	max-width:1280px;
	margin:0px auto;
	position:absolute;
	width:100%;
	height:96px;
	top:0px;
	color:black;
	background:#33ccff;
/* ヘッダー 空画像のアニメーション */
	background-image:url("../image/sun1280.jpg");
	animation: bgscroll 60s linear 0s infinite normal;
	-webkit-animation: bgscroll 60s linear 0s infinite normal;
}
@keyframes bgscroll{
	  0%{background-position:0px 0px;}
	 50%{background-position:640px -224px;}
	100%{background-position:1280px 0px;}
}
@-webkit-keyframes bgscroll{
	  0%{background-position:0px 0px;}
	 50%{background-position:640px -224px;}
	100%{background-position:1280px 0px;}
}

header #topflag{
 position:absolute;
 left:8px;
 top:24px;
}
header A{
 background-color:transparent;
}
header A:hover{
 background-color:transparent;
}

header h1{
 position:absolute;
 top:2px;
 left:120px;
 font-size:48px;
 line-height:48px;
 font-family:sans-serif;
}

header h2{
 position:absolute;
 top:-14px;
 left:124px;
 font-weight:normal;
 font-size:24px;
 line-height:24px;
 font-family:sans-serif;
}

header #mail{
 position:absolute;
 top:48px;
 left:540px;
}

#menu{
 max-width:1280px;
 margin:0px auto;
 position:absolute;
 width:100%;
 height:24px;
 top:96px;
 z-index:2;
 font-size:133%;
 font-family:sans-serif;
 border-top:solid 1px white;
 border-bottom:solid 1px white;
 background:-wbkit-linear-gradient(#993333,#660000);
 background:-moz-linear-gradient(#993333,#660000);
 background:linear-gradient(#993333,#660000);
}

#menu0{
 display:block;
 color:white;
 height:48px;
 padding-left:15px;
 border-bottom:1px solid white;
 background:-wbkit-linear-gradient(#993333,#660000);
 background:-moz-linear-gradient(#993333,#660000);
 background:linear-gradient(#993333,#660000);
}

#menu0:before{
 content: '≡ ';
 line-height:48px;
 font-size:48px;
}
#menu_bar:checked ~ #menu0:before{
 content: '× ';
 line-height:48px;
 font-size:48px;
}
#menu0:after{
 content: 'を開く';
 font-size:100%;
}
#menu_bar:checked ~ #menu0:after{
 content: 'を閉じる';
 font-size:100%;
}

#menu_bar:checked ~ #menu0{
 background:-wbkit-linear-gradient(#660000,#993333);
 background:-moz-linear-gradient(#660000,#993333);
 background:linear-gradient(#660000,#993333);
}

#menu input {
 display:none;
}

#menu_list {
 position:absolute;
 width:100%;
 top:27px;
 left:-40px;
 list-style-type: none;
 display:none;
}

#menu_bar:checked ~ #menu_list {
 height:72px;
 display:block;
}

@media only screen and (min-device-width:641px){
	#menu{
	 font-size:100%;
	}
	#menu label {
	 display:none;
	}
	#menu_list {
	 top:-16px;
	 display:block;
	}
	.menu_mobile{
	 display:none;
	}
}
#menu li {
 width:160px;
 float: left;
}

@media only screen and (min-device-width:641px){
	#menu li {
	 width:14.2%;
	 border-top:none;
	 border-left:none;
	 border-right:solid 1px white;
	 border-bottom:none;
	}
	#menu li:first-child{
	 border-left:none;
	}
	#menu li:nth-child(odd){
	 border-right:solid 1px white;
	 border-left:none;
	}
}

#menu a {
 display: block;
 color:white;
 line-height:72px;
 text-align:center;
 text-decoration:none;
 font-family:sans-serif;
 background:-wbkit-linear-gradient(#993333,#660000);
 background:-moz-linear-gradient(#993333,#660000);
 background:linear-gradient(#993333,#660000);
 border-top:solid 3px #ffffff;
 border-left:solid 3px #cccccc;
 border-right:solid 3px #999999;
 border-bottom:solid 3px #666666;
}
#menu a:hover {
 background:-wbkit-linear-gradient(#660000,#993333);
 background:-moz-linear-gradient(#660000,#993333);
 background:linear-gradient(#660000,#993333);
 text-decoration:none;
 border-top:solid 3px #666666;
 border-left:solid 3px #999999;
 border-right:solid 3px #cccccc;
 border-bottom:solid 3px #ffffff;
}
@media only screen and (min-device-width:641px){
	#menu a {
	 line-height:24px;
	 border:none;
	}
	#menu a:hover {
	 border:none;
	}
}

#middle {
 font-size:150%;
 line-height:200%;
 height:100%;
}

@media only screen and (min-device-width:641px){
	#middle {
	 font-size:100%;
	 line-height:200%;
	}
}

#main_frame{
 padding-left:8px;
 padding-right:8px;
 padding-bottom:8px;
 color:white;
 background: #003300;
 -moz-animation: back_ani 60s linear 0s infinite normal;
 -webkit-animation: back_ani 60s linear 0s infinite normal;
 animation: back_ani 60s linear 0s infinite normal;
}
@-moz-keyframes back_ani {
   0%{background:#002200;}
  25%{background:#003300;}
  50%{background:#005500;}
  25%{background:#003300;}
 100%{background:#002200;}
}
@-webkit-keyframes back_ani {
   0%{background:#002200;}
  25%{background:#003300;}
  50%{background:#005500;}
  25%{background:#003300;}
 100%{background:#002200;}
}
@keyframes back_ani {
   0%{background:#002200;}
  25%{background:#003300;}
  50%{background:#005500;}
  25%{background:#003300;}
 100%{background:#002200;}
}

#left_frame {
 padding-left:8px;
 padding-right:8px;
 padding-bottom:88px;
 color:white;
 background: #003300;
 -moz-animation: back_ani 60s linear 0s infinite normal;
 -webkit-animation: back_ani 60s linear 0s infinite normal;
 animation: back_ani 60s linear 0s infinite normal;
}
@media only screen and (min-device-width:641px){
	#left_frame {
	 float:left;
	 width:60%;
	 border-right:solid 1px white;
	}
}

#right_frame {
 padding-left:8px;
 padding-right:8px;
 padding-bottom:88px;
 color:white;
 border-top:solid 1px white;
 background: #003300;
 -moz-animation: back_ani 60s linear 0s infinite normal;
 -webkit-animation: back_ani 60s linear 0s infinite normal;
 animation: back_ani 60s linear 0s infinite normal;
}
@media only screen and (min-device-width:641px){
	#right_frame {
	 border:none;
	}
}

#middle UL {
 list-style-type:none;
 margin:0;
 padding:0;
}
#middle LI{
 padding-bottom:0.5em;
}

#news{
 font-size:125%;
 line-height:100%;
}

#right_frame H3{
 line-height:250%;
}
@media only screen and (min-device-width:641px){
	#right_frame H3{
	 line-height:100%;
	}
}

EM{
 color:yellow;
 font-weight:bold;
 font-style:normal;
}

A{
 color:white;
}

A:hover{
 color:white;
 background-color:#990000;
}

footer{
 max-width:1280px;
 margin:0px auto;
 bottom:0px;
 height:24px;
 overflow:hidden;
 position:absolute;
 width: 100%;
 background-color: #660000;
 text-align:center;
 font-size:90%;
 color:white;
 border-top: solid 1px #ffffff;
 line-height:24px;
}

/* リンクページのリスト（画面幅に応じてカラム数を変える） */
h3{
 clear:both;
}
/* 最大２列　スマホは１列 */
.max_2column li{
 display:block;
 float:left;
 width:100%;
}
@media only screen and (min-width:641px){
	.max_2column li{
	 width:50%;
	}
}
/* 最大４列　スマホは２列 */
.max_4column li{
 display:block;
 float:left;
 width:50%;
}
@media only screen and (min-width:641px){
	.max_4column li{
	 width:25%;
	}
}

/* 広告枠 */
#ad_container{
	position:absolute;
	margin:0;
	bottom:1px;
	width:1280px;
	display:flex;
	overflow:hidden;
}
@media only screen and (max-device-width:768px){
	#ad_container{
		width:640px;
	}
}
#ad_container A:hover{
	background-color:transparent;
}
#ad_container UL{
	list-style:none;
	padding-left:0;
}
#ad_container LI{
	list-style:none;
	padding-left:0;
}
/* 広告画像のグループ */
.slider{
	animation:scroll-left 30s infinite linear 0.5s both;
	-webkit-animation:scroll-left 30s infinite linear 0.5s both;
	display:flex;
}
/* スライド */
.slide{
	width:320px;
}
/* スライド画像 */
.slide img{
	dsiplay:blcok;
	width:100%;
}
/* CSSアニメーション */
@keyframes scroll-left{
	from{
		transform:translateX(0);
		}
	to{
		transform:translateX(-100%);
	}
}
@-webkit-keyframes scroll-left{
	from{
		transform:translateX(0);
		}
	to{
		transform:translateX(-100%);
	}
}
/* マウスオーバーで一時停止 */
#ad_container:hover .slider{
	animation-play-state:paused;
}

/* 端末の向きが横向きの場合 */
#Land_Alert{
	dislpay:none;
}
@media (orientation:landscape) and (max-height:450px){
	#Land_Alert{
		dislpay:block;
		position:absolute;
		z-index:3;
		top:92px;
		left:0px;
		width:632px;
		height:48px;
		background:white;
		border:4px solid red;
		border-radius:16px;
		color:red;
		font-family:sans-serif;
		font-weight:bold;
		font-size:120%;
		line-height:48px;
		text-align:center;
		vertical-align:middle;
		opacity:0.8;
	}
	#ad_container{
		display:none;
	}
}