@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;
 -webkit-box-sizing:border-box;
}

body {
 box-sizing:border-box;
 -webkit-box-sizing:border-box;
 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:168px;
 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:168px;
 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_fix{
	position:absolute;
	margin:0;
	bottom:82px;
	width:960px;
	display:flex;
	overflow:hidden;
}
@media only screen and (max-width:960px){
	#ad_fix{
		width:320px;
	}
}
#ad_fix A:hover{
	background-color:transparent;
}
#ad_fix UL{
	list-style:none;
	padding-left:0;
	display:flex;
}
#ad_fix LI{
	list-style:none;
	padding-left:0;
}
/* 広告画像枠 */
.slide{
	box-sizing:border-box;
	width:320px;
	border-right: 1px solid #003300;
	border-top: 1px solid #003300; 
}
/* 広告画像 */
.slide img{
	dsiplay:blcok;
	width:100%;
	will-change:transform;
}
#ad_slider1{
	display:none;
}
/* 広告枠 スライド 上段 */
@media only screen and (max-width:960px){
	#ad_slider1{
		position:absolute;
		margin:0;
		left:320px;
		bottom:82px;
		width:320px;
		display:flex;
		overflow:hidden;
	}
	#ad_slider1 A:hover{
	background-color:transparent;
	}
	#ad_slider1 UL{
		list-style:none;
		padding-left:0;
	}
	#ad_slider1 LI{
		list-style:none;
		padding-left:0;
	}
	/* スライド広告上段のアニメーション */
	.slider1{
		animation:scroll-1 10s infinite ease 1.0s both;
		-webkit-animation:scroll-1 10s infinite ease 1.0s both;
		display:flex;
	}
	/* CSSアニメーション */
	@keyframes scroll-1{
		0%		{transform:translateX(0);}
		25%		{transform:translateX(-320px);}
		50%		{transform:translateX(-320px);}
		75%		{transform:translateX(-640px);}
		100%	{transform:translateX(-640px);}
	}
	-webkit-@keyframes scroll-1{
		0%		{transform:translateX(0);}
		25%		{transform:translateX(-320px);}
		50%		{transform:translateX(-320px);}
		75%		{transform:translateX(-640px);}
		100%	{transform:translateX(-640px);}
	}
	/* マウスオーバーで一時停止 */
	#ad_slider1:hover .slider1{
		animation-play-state:paused;
		-webkit-animation-play-state:paused;
	}
}
/* 広告枠 スライド 下段 */
#ad_slider2{
	position:absolute;
	margin:0;
	bottom:2px;
	width:1280px;
	display:flex;
	overflow:hidden;
}
@media only screen and (max-width:960px){
	#ad_slider2{
		width:640px;
	}
}
#ad_slider2 A:hover{
	background-color:transparent;
}
#ad_slider2 UL{
	list-style:none;
	padding-left:0;
}
#ad_slider2 LI{
	list-style:none;
	padding-left:0;
}
/* スライド広告下段のアニメーション */
.slider2{
	animation:scroll-2 20s infinite ease 1.0s both;
	-webkit-animation:scroll-2 20s infinite ease 1.0s both;
	display:flex;
}
/* CSSアニメーション */
@keyframes scroll-2{
	   0% {transform:translateX(0);}
	12.5% {transform:translateX(-320px);}
	  25% {transform:translateX(-320px);}
	37.5% {transform:translateX(-640px);}
	  50% {transform:translateX(-640px);}
	62.5% {transform:translateX(-960px);}
	  75% {transform:translateX(-960px);}
	87.5% {transform:translateX(-1280px);}
	 100% {transform:translateX(-1280px);}
}
-webkit-@keyframes scroll-2{
	   0% {transform:translateX(0);}
	12.5% {transform:translateX(-320px);}
	  25% {transform:translateX(-320px);}
	37.5% {transform:translateX(-640px);}
	  50% {transform:translateX(-640px);}
	62.5% {transform:translateX(-960px);}
	  75% {transform:translateX(-960px);}
	87.5% {transform:translateX(-1280px);}
	 100% {transform:translateX(-1280px);}
}
/* マウスオーバーで一時停止 */
#ad_slider2:hover .slider2{
	animation-play-state:paused;
	-webkit-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_fix{
		display:none;
	}
	#ad_slider1{
		display:none;
	}
	#ad_slider2{
		display:none;
	}
}