/*CSSスライドショー（アニメーション設定）
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {0% {opacity: 0;}10% {opacity: 1;}30% {opacity: 1;}40% {opacity: 0;}100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {0% {opacity: 0;}30% {opacity: 0;}40% {opacity: 1;}60% {opacity: 1;}70% {opacity: 0;}100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {0% {opacity: 0;}60% {opacity: 0;}70% {opacity: 1;}90% {opacity: 1;}100% {opacity: 0;}
}
/*もみじ画像*/
@keyframes headerimg {0% {opacity: 0;}10% {opacity: 0;}60% {opacity: 1;}90% {opacity: 1;}100% {opacity: 0;}
}/*CSSスライドショー（画像設定）
---------------------------------------------------------------------------*/
/*スライドショーとメニューを囲むブロック*/
#menu-mainimg {
	position: relative;
	margin-bottom: 40px;
	background: #d6ccb6;
}/*スライドショー画像を囲むブロック*/
#mainimg {
	width: 980px;
	height: auto;
	margin: 0 auto;
}/*スマホ用スライドショーを表示させない設定*/
#mainimg-s {
	display: none;
}/*スライドショー画像を囲むブロック（※トップページ）*/
#top #mainimg,
#top #mainimg-s {
	width: 100%;	/*画面幅一杯になるよう設定*/
	height: auto;
}/*スライドショーの３枚画像の共通設定*/
#mainimg img,
#mainimg-s img {
	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 15s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	width: 100%;
	height: auto;
	vertical-align: bottom;
}/*１枚目*/
#slide1,
#slide1s {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
}/*２枚目*/
#slide2,
#slide2s {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
}/*３枚目*/
#slide3,
#slide3s {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
}/*もみじ画像*/
#headerimg {
	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 15s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	position:absolute;
	left:500px;
	top:-140px;
	width: 50%;
	-webkit-animation-name: headerimg;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: headerimg;				/*同上*/
}

/*画面幅800px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:800px){#mainimg {
	width: auto;
	padding-bottom: 140px;
	overflow: hidden;
}/*もみじ画像の場所*/
#headerimg {
	position:absolute;
	left:40%;
	top:-50px;
}

}



/*画面幅480px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*PC用スライドショーを表示させない設定*/
#top #mainimg {
	display: none;
}#mainimg {
	padding-bottom: 0;
}/*スマホ用スライドショーを表示させる設定*/
#mainimg-s {
	display: block;
}/*もみじ画像を表示させない*/
#headerimg {
	display: none;
}

}/*google口コミ
---------------------------------------------------------------------------*/
/* 1.親スタイルリセットとペース設定 ++++++++++ */
.slider-box p,
.slider-box div,
.loop-box ul,
.loop-box li {
  box-sizing: border-box; margin: 0 !important; padding: 0 !important;
}/* 2.ベースBOXの設定 +++++++++++++++++++++ */
.slider-box {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%; /* 画面又は親要素に対するサイズ - 変更可 */
  background: #333; /* 背景色 - 変更可・削除可 */
  border: solid 5px #ccc; /* 囲み線 - 変更可・削除可 */
  margin: 0 auto; /* Box外の余白 - 変更可 */
  padding: 0 0; /* 上端からスライダーまでの距離 - 変更可・削除可 */
}/* 3.チェックボックスを利用した停止・再生などの設定 +++++++++++++++++ */
.slider-check {
  display: none;
}.slider-check:checked ~ .loop-box > .loop {
  animation-play-state: paused;
}.slider-label {
  display: block;
  cursor: pointer;
  color: #fff; /* 文字色 - 変更可 */
  font-size: 24px; /* 文字サイズ - 変更可 */
  line-height: 2; /* ボタン部分の高さ - 変更可 */
  text-align: center;  
}.slider-label::before {
  content: "\025a0  STOP"; /* 停止テキスト - 変更可 */
  }.slider-check:checked ~ div > .slider-label::before {
  content: "\025b6  MOVE"; /* 再生テキスト - 変更可 */
}/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */
.loop-box {
  position: relative;
  width: 100%;
  overflow: hidden; 
}.loop-box,
.loop-box ul {
  height: 319px; /* スライダーの高さ - 変更注意 */
}.loop-box ul {
  position: absolute; left: 0; top: 0;
  display: flex; 
  justify-content: space-between;
  background: #fff; /* スライダーの背景色 - 変更可 */
  list-style: none;
  max-width: 10000%; 
  min-width: 100%;
  width: calc(319px * 2.35 * 9); /* 画像の横幅×枚数 - 変更注意・変更可・変更注意 */
  animation: 300s linear infinite; /* アニメーション設定 - 変更可 */
}.loop-box li {
  display: flex;
  align-items: center; 
  justify-content: center;
  color: #fff;
  width: calc(100% / 9); /* li の幅を均等にする - 削除可・変更注意 */
}.loop-box img {
  height: auto;
  width: 100%;
}/* 5.アニメーション個別設定 ++++++++++ */
.loop-box ul.loop1 {
  animation-name: loop1;
}.loop-box ul.loop2 {
  animation-name: loop2;
}
@keyframes loop1 {0% {transform: translateX(0); }49.99999% {transform: translateX(-100%); }50% {transform: translateX(100%); }
}
@keyframes loop2 {0% {transform: translateX(100%); }100% {transform: translateX(-100%); }
}