@charset "UTF-8";

/*トップスライドテキスト*/
#animation {
	margin-top: 50px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 50px;
	width: 980px;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/*タイヤ*/

@keyframes slide1 {
	0% {opacity: 0;}
	5% {opacity: 1;}
	15% {opacity: 1;}
	20% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide2 {
	0% {opacity: 0;}
	15% {opacity: 0;}
	20% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	50% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide4 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	70% {opacity: 1;}
	80% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide5 {
	0% {opacity: 0;}
	70% {opacity: 0;}
	80% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}



/*画像ブロック*/
#mainimg {
	clear: left;
	height: auto;
	position: relative;
	/* [disabled]background-color: #000000; */
	margin-top: 20px;
	width: 980px;
}

/*３枚画像の共通設定*/
#slide1,#slide2,#slide3,#slide4,#slide5 {
	-webkit-animation-duration: 21s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 21s;			/*同上*/
	-webkit-animation-iteration-count: infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count: infinite;			/*同上*/
	width: 980px;
}

/*タイヤ1*/
#slide1 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
	height: auto;
	width: 980px;
}

/*タイヤ2*/
#slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
	height: auto;
	width: 980px;
}

/*タイヤ3*/
#slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
	height: auto;
	width: 980px;
}

/*タイヤ2*/
#slide4 {
	-webkit-animation-name: slide4;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide4;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
	height: auto;
	width: 980px;
}
/*タイヤ2*/
#slide5 {
	-webkit-animation-name: slide5;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
	height: auto;
	width: 980px;
}
h2 {
	text-align: center;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 100px;
	margin-top: 100px;
	margin-bottom: 10px;
}
.explain {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	text-align: center;
	margin-bottom: 100px;
	color: #A2A2A2;
	font-weight: bold;
}
h3 {
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 100px;
	margin-bottom: 10px;
	width: 900px;
	margin-left: 30px;
	text-align: center;
	margin-top: 100px;
}
h4 {
	font-weight: normal;
}
h5 {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 30px;
	width: 980px;
	text-align: center;
	margin-top: 100px;
	color: #D4B024;
	font-weight: normal;
	margin-bottom: 0px;
}
.copy {
	font-size: 80px;
	margin-bottom: 100px;
	margin-top: 100px;
	text-align: center;
}
section01 p {
	font-size: 30px;
	line-height: 70px;
	color: #A2A2A2;
	margin-bottom: 20px;
	width: 900px;
	margin-left: 30px;
}
.toiawase ul  {
	font-size: medium;
	display: block;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.toiawase li {
	background-color: #B68B2A;
	font-size: 40px;
	width: 980px;
	float: left;
	text-align: center;
	line-height: 250px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.toiawase li a {
	text-decoration: none;
	display: block;
	color: #FFFFFF;
	width: 980px;
}
.toiawase li a:hover {
	background-color: #785B22;
	transition: all 0.3s linear;
}
.panel {
	background-color: #666666;
}
section02 ul li {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 30px;
	text-align: left;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.day {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	color: #A2A2A2;
}
.text {
	margin-bottom: 50px;
	color: #A2A2A2;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 30px;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.dot {
	text-align: center;
	margin-top: 100px;
	padding-top: 70px;
}
section02 div p {
}
.facebook {
	width: 980px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 100px;
	background-repeat: repeat;
	background-image: url(../img/top/fb-art.png);
}
.facebook a {
	display: block;
	height: 500px;
	width: 900px;
}
.facebook a:hover {
	opacity: 0.5;
}
.instagram {
	width: 980px;
	background-color: #E6E5E3;
	margin-bottom: 100px;
	margin-top: 10px;
}
.instagram a {
	display: block;
}
.instagram a:hover {
	opacity: 0.5;
}
.readmore {
	text-align: center;
	font-size: 50px;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 200px;
	border: 1px solid #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
}
.readmore a {
	display: block;
	padding-top: 30px;
	padding-bottom: 30px;
	text-decoration: none;
	color: #FFFFFF;
}
.readmore a:hover {
	color: #000000;
	background-color: #414141;
	transition: all 0.2s linear;
}