@charset "utf-8";

body{
	margin: 0px;
	padding: 0px;
	background: #fff url(../img/bg1.jpg);	/*背景色、背景画像の読み込み*/
	-webkit-text-size-adjust: none;
}
/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目 */
@keyframes slide1 {
	0% {opacity: 1;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	20% {opacity: 0;}
	30% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	85% {opacity: 1;}
	95% {opacity: 0;}
	100% {opacity: 0;}
}
/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
.box00{
	margin: 0 auto;
	width:  960px;
	height: 316px;
}
.box0-imgsize{
	width: 320px;
	height: 316px;
}
.box01{
	width: 320px;
	background: linear-gradient(#105779 70%,#105779 30%);
	float: left;
	border-radius: 30px  0 0 0;
}
.box02{
	width: 320px;
	float: left;
}
.mainimgbox{
	position: relative;
	width: 320px;
	float: left;
	box-shadow:  0px 0px 20px #105779;
	opacity: 0.85;
}
/*
 #mainimg{
}
*/
/*３枚画像の共通設定*/
.slide1,.slide2,.slide3{
	width: 320px;
	animation-duration: 12s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;
	left:0px;
	top:0px;   
	animation-fill-mode: both;
	animation-delay: 1s;
	border-radius: 0 30px 0 0;
}
/*土台画像*/
.slide0{
	position: absolute; 
	left:0px;
	top:0px;   
	border-radius: 0 30px 0 0;
}
/*１枚目*/
.slide1 {
	animation-name: slide1;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
	animation-name: slide2;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*３枚目*/
.slide3 {
	animation-name: slide3;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*container。サイト全体を囲むブロック
---------------------------------------------------------------------------*/
#container{
	overflow: hidden;
	max-width: 1000px;		/*最大幅の制限。これ以上広がらない。*/
/*	min-width: 800px;*/
	hight: auto;
	margin: 20px auto 0;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態の事。*/
	border-radius: 30px;	/*角丸のサイズ*/
	padding: 40px;		/*ボックス内の余白*/
	background: #f8f8ff;	/*背景色*/
}
header{
	position: relative;
}
header #logo{
	position: absolute;
	z-index: 1;
	left: 4%; /*headerの左から5%の場所に配置*/
	top: 5%; /*headerの上から8%の場所に配置*/	
}
.explain{
/*	position: absolute;
	top: 8%;
	left: 35%; */
	margin: 0 auto;
	width: 600px;
	color: #ffffff;
  	padding: 20px;
	text-align: center;
}
.explain h1{
  	width: 550px;
 	font-size: 200%;
  	font-weight: bold;
	color:#c9171e;
 /* 	color: #ffffff;
	text-shadow: 2px 2px 10px #000,-2px 2px 10px #000,2px -2px 10px #000,-2px -2px 10px #000; */
  	text-align: center;
}
.explain h3{
  	width: 500px;
  	margin-top: -20px;
 	font-size: 150%;
  	font-weight: bold;
	color: #800080;
/*  	color: #ffffff;
	text-shadow: 2px 2px 10px #000,-2px 2px 10px #000,2px -2px 10px #000,-2px -2px 10px #000;*/	
}
.explain p{
  	width: 500px;
  	font-size: 120%;
  	font-weight: bold;
	color: #400080;
/*  	color: #ffffff;
	text-shadow: 2px 2px 10px #000,-2px 2px 10px #000,2px -2px 10px #000,-2px -2px 10px #000;*/
}
.navi{
	clear: both;
	display: block;
	margin: -10px auto 0 auto; 
	max-width: 960px;
/*	min-width: 800px;		最大幅の制限。これ以上広がらない。*/
	background: linear-gradient(#105779 70%,#105779 30%);
	border-radius: 0 0 30px 30px;	
}
nav ul{
	overflow: hidden;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
nav .line-l{
	box-sizing: border-box;
	float: left;
	border-right: 1px solid #000000;
	width: 16.7%;
}
nav .line{
	box-sizing: border-box;
	float: left;
	border-right: 1px solid #000000;
	width: 16.7%;
}
nav .line-r{
	box-sizing: border-box;
	float: left;
	width: 16.5%;
}
nav li a{
	display: block;
	padding: 20px 0;
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
}
nav a:hover{
	background: #34589e;	 
}
.counter{
	width: 100%;
	margin: 20px auto 20px auto;
	text-align: center;
}
footer p{
    clear: both;
	font-size: 16px;
	text-align: center;
	color: #dd1e53;
	margin-top: 20px;	
}
#sumaho{
	display: none;
}
/*********************************************/
@media(max-width:600px){
/*１枚目 */

@keyframes slide1 {
	0% {opacity: 1;}
	10% {opacity: 1;}
	20% {opacity: 1;}
	30% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	19% {opacity: 0;}
	20% {opacity: 1;}
	40% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	39% {opacity: 0;}
	40% {opacity: 1;}
	41% {opacity: 1;}
	60% {opacity: 1;}
	95% {opacity: 0;}
	100% {opacity: 0;}
}
/*４枚目*/
@keyframes slide4 {
	0% {opacity: 0;}
	59% {opacity: 0;}
	60% {opacity: 1;}
	61% {opacity: 1;}
	80% {opacity: 1;}
	95% {opacity: 0;}
	100% {opacity: 0;}
}
/*５枚目*/
@keyframes slide5 {
	0% {opacity: 0;}
	79% {opacity: 0;}
	80% {opacity: 1;}
	81% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 1;}
}
#pc{
	display: none;
}
#sumaho{
	display: block;
} 
.box00{
	margin: 0;
	width:  100%;
	height: 316px;
}

#container{
	overflow: hidden;
	max-width: 100%;		/*最大幅の制限。これ以上広がらない。*/
	margin: 20px auto ;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態の事。*/
	border-radius: 30px;	/*角丸のサイズ*/
	padding: 5px;		/*ボックス内の余白*/
	background: #f8f8ff;	/*背景色*/
}
.mainimgbox{
	position: relative;
	width: 100%;
	height: auto;
	float: none;
	box-shadow:  0px 0px 20px #105779;
	opacity: 0.85;
}
/*１枚目*/
.slide1 {
	animation-name: slide1;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
	animation-name: slide2;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*３枚目*/
.slide3 {
	animation-name: slide3;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*４枚目*/
.slide4 {
	animation-name: slide4;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*５枚目*/
.slide5 {
	animation-name: slide5;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*５枚画像の共通設定*/
.slide1,.slide2,.slide3,.slide4,.slide5{
	width: 100%;
	height: 316px;
	animation-duration: 10s;	/*実行する時間。「s」は秒の事。*/
	animation-iteration-count:infinite;		/*実行する回数。「infinite」は無限に繰り返す意味。*/
	position: absolute;
	left:0px;
	top:0px;   
	animation-fill-mode: both;
	animation-delay: 1s;
	border-radius: 30px 30px 0 0;
}
.slide1{
	background-color: #105779;
}
.navi{
	margin: 0;
	width: 100%;
	height: auto;
	/* margin: -10px auto 0 auto; */
	background: linear-gradient(#105779 70%,#105779 30%); 
	border-radius: 0 0 30px 30px;	
}
nav ul{
	overflow: hidden;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
nav .line-l{
	box-sizing: border-box;
	float: left;
	border-right: 1px solid #000000;
	width: 16.7%;
}
nav .line{
	box-sizing: border-box;
	float: left;
	border-right: 1px solid #000000;
	width: 16.7%;
}
nav .line-r{
	box-sizing: border-box;
	float: left;
	width: 16.5%;
}
nav li a{
	display: block;
	padding: 20px 0;
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
}
nav a:hover{
	background: #34589e;	 
}
.explain{
	margin: 0;
	width: 100%;
	color: #ffffff;
  	padding: 5px;
	text-align: left;
}
.explain h1{
  	width: 100%;
 	font-size: 18px;
  	font-weight: bold;
	color:#c9171e;
 /* 	color: #ffffff;
	text-shadow: 2px 2px 10px #000,-2px 2px 10px #000,2px -2px 10px #000,-2px -2px 10px #000; */
  	text-align: left;
}
.explain h3{
  	width: 100%;
	margin-top:2px;
  	font-size: 18px;
  	font-weight: bold;
	color: #800080;
/*  	color: #ffffff;
	text-shadow: 2px 2px 10px #000,-2px 2px 10px #000,2px -2px 10px #000,-2px -2px 10px #000; */	
  	text-align: left;
}
.explain p{
  	width: 100%;
  	font-size: 16px;
  	font-weight: bold;
	color: #400080;
/*  	color: #ffffff;
	text-shadow: 2px 2px 10px #000,-2px 2px 10px #000,2px -2px 10px #000,-2px -2px 10px #000;*/
}
.counter{
	width: 100%;
	hright; auto;
	margin: 0;
	padding: 20px;
	text-align:  left;
}
footer p{
	font-size: 16px;
	text-align: center;
	color: #dd1e53;
	margin-top: 20px;	
}

}