@charset "utf-8";

/*ウィンドウ背景色の設定
--------------------------------------------*/
body{

	background: linear-gradient(to right,#ffb6c1,#FFF,#9acd32);
	font-family:メイリオ;
	font-size:15px ;
	line-height:1.7 ;
	padding:0 ;
	margin:0 ;
}

/*メインブロックの設定
--------------------------------------------*/
#main{
	width:960px ;
	margin-left:auto ;
	margin-right:auto ;
}


/*リンク色の設定
--------------------------------------------*/
a{
	color:#00bfff ;
}
a:hover{
	color:#FA8072 ;
}

/*ページタイトル（大見出し）の設定
--------------------------------------------*/
h4{
	background: linear-gradient(to right,#00000000,#ffffff,#ffffff,#00000000);
	color:#0000ff ;
	font-size:80% ;
	padding:5px 20px ;
	margin:0 ;
	text-align:center ;
}
h4 img{
	width:300px ;
}


/*フッターの設定
--------------------------------------------*/
footer{
	background-color:#6b8e23 ;
	color:#FFF ;
	text-align:center ;
	clear:both ;
}


/*中見出しの設定
--------------------------------------------*/
h2{
	background: linear-gradient(to right,#ffa500,#00000000,#00000000);
	color:#FFF ;
	font-size:110% ;
	padding:5px 0 5px 10px ;
	clear:both ;
}


/*小見出しの設定
--------------------------------------------*/
h3{
	color:#808080 ;
	font-size:100% ;
	border-left:3px solid #808080 ;
	border-bottom:1px solid #808080 ;
	padding:5px 0 2px 10px ;
	clear:both ;
}


/*段落の設定
--------------------------------------------*/
p{
	padding:5px 10px 15px;
}


/*定義リストの設定
--------------------------------------------*/
dl{
	padding:5px 10px 15px ;
}
dt{
	font-weight:bold ;
	color:#630 ;
}
dd{
	margin-left:0 ;
	margin-bottom:20px ;
}

/*写真の設定
--------------------------------------------*/
section img{
	width:350px ;
	height:auto ;
	border:1px solid #ddd ;
	padding:5px ;
	background-color:#FFF ;
}

img#mainimg{
	width:960px ;
}

/*左寄せ写真のブロック
--------------------------------------------*/
section.left img{
	float:left ;
	margin:0 10px 10px 0 ;
}

/*右寄せ写真のブロック
--------------------------------------------*/
section.right img{
	float:right ;
	margin:0 0 10px 10px ;
}

/*その他
--------------------------------------------*/
span.color{
	color:#f85949 ;
}

/*表の設定
--------------------------------------------*/
table{
	border:1px solid #555 ;
	border-collapse:collapse ;
	margin-bottom:20px ;
	width:650px ;
}
table td,
table th{
	border:1px solid #555 ;
	padding:5px ;
}
table th{
	background-color:#b5d277 ;
	color:#FFF ;
}
table td{
	background-color:#FFF ;
}
table td.cost{
	/*width:250px ;
	text-align:right ;*/
}

/*メニューの設定
--------------------------------------------*/
nav{
	width:980px ;
	
}
ul{
	margin-left:0 ;
	padding-left:0 ;
}
li{
	list-style:none ;
	float: left;
	margin-right:30px ;
	margin-bottom:10px ;

}
li a{
	color:#b3e5e0 ;
	width: 216px;	/*幅*/
	padding:10px 0;
	text-decoration: none;
	display: block;
	font-size: 14px;	/*文字サイズ*/
	font-weight: bold;	/*文字を太字にする設定。通常がいいならこの１行削除。*/
	text-align: center;	/*文字をセンタリング*/
	background-color: #69cfff;	/*背景色*/
	border: 1px solid #9d9ded;		/*線の幅、線種、色*/
}
li:last-child{
	margin-right:0 ;
}


.text{
  animation: color-change 100s linear infinite;
}

@keyframes color-change {
  0%,100%{
	color:#ff0000;
  }

  25%{
	color:#ffb6c1;
  }
  
  50%{
	color:#00bfff;
  }
  
  75%{
	color:#0000ff;
  }
}

.text2{
  animation: color-change 70s linear infinite;
}

@keyframes color-change {
  0%,100%{
	color:#fffc61;
  }

  25%{
	color:#ffffff;
  }
  
  50%{
	color:#c1ffa6;
  }
    75%{
	color:#ffffff;
  }
}


.fadeIn {
animation-name: fadeInAnime;/*1で解説*/
animation-fill-mode:backwards;/*2で解説*/
animation-duration:1s;/*3で解説*/
animation-iteration-count:1;/*4で解説*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 0.8s;/*6で解説*/
animation-direction:normal;/*7で解説*/
}

/*1で解説*/
@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }