/*********************************************************************************************************************************

		「slick-theme」デフォルト設定

*********************************************************************************************************************************/
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list{
	background:#fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face{
	font-family:'slick';
	font-weight:normal;
	font-style:normal;
	src:url('./fonts/slick.eot');
	src:url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next{
	font-size:0;
	line-height:0;
	position:absolute;
	top:50%;
	display:block;
	width:20px;
	height:20px;
	padding:0;
	-webkit-transform:translate(0, -50%);
	-ms-transform:translate(0, -50%);
	transform:translate(0, -50%);
	cursor:pointer;
	color:transparent;
	border:none;
	outline:none;
	background:transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus{
	color:transparent;
	outline:none;
	background:transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before{
	opacity:1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before{
	opacity:.25;
}

.slick-prev:before,
.slick-next:before{
	font-family:'slick';
	font-size:20px;
	line-height:1;
	opacity:.75;
	color:white;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.slick-prev{
	left:-25px;
}
[dir='rtl'] .slick-prev{
	right:-25px;
	left:auto;
}
.slick-prev:before{
	content:'←';
}
[dir='rtl'] .slick-prev:before{
	content:'→';
}

.slick-next{
	right:-25px;
}
[dir='rtl'] .slick-next{
	right:auto;
	left:-25px;
}
.slick-next:before{
	content:'→';
}
[dir='rtl'] .slick-next:before{
	content:'←';
}

/* Dots */
.slick-dotted.slick-slider{
	margin-bottom:30px;
}

.slick-dots{
	position:absolute;
	bottom:-25px;
	display:block;
	width:100%;
	padding:0;
	margin:0;
	list-style:none;
	text-align:center;
}
.slick-dots li{
	position:relative;
	display:inline-block;
	width:20px;
	height:20px;
	margin:0 5px;
	padding:0;
	cursor:pointer;
}
.slick-dots li button{
	font-size:0;
	line-height:0;
	display:block;
	width:20px;
	height:20px;
	padding:5px;
	cursor:pointer;
	color:transparent;
	border:0;
	outline:none;
	background:transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus{
	outline:none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{
	/*opacity:1;*/
}
.slick-dots li button:before{
	font-family:'slick';
	font-size:6px;
	line-height:20px;
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	content:'•';
	text-align:center;
	opacity:.25;
	color:black;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.slick-dots li.slick-active button:before{
	opacity:.75;
	color:black;
}




/*********************************************************************************************************************************

		「slick-theme」デフォルト設定

*********************************************************************************************************************************/

/*「mainImage.php」･･････････････････････････････････････････*/
#slickMainArea{
	position:relative;
	top:0;
	left:0;
	background-color:#dadada;
}

	/*slickMain ･････････････････････････････････････････････････*/
	#slickMain{
		position:relative;
		height:auto;
		width:100%;
		margin-top:0; /*gMenu高さ分下げる場合*/
		margin-bottom:0; /*下ドットをスライド範囲内に移して下余白をなくす場合*/
		overflow:hidden;
	}
		#slickMain>div li{
		}
			#slickMain>div li div{
				height:auto;
				/* width:100%; */
			}
				#slickMain>div li div img{
					height:100vh;							/*slickMain（スライドショー）の縦サイズ*/
					min-height:680px;
					max-height:680px;
					width:100%;
					object-fit:cover;
					object-position:center center;			/*上に合わせる場合は「center top」*/
					opacity:0;								/*アニメーションのデフォルト設定*/
				}
			/*進む・戻るボタン*/
			#slickMain .slick-prev,
			#slickMain .slick-next{
				pointer-events:none;						/*マウスイベント無効 ＆ 非表示*/
				opacity:0;									/*マウスイベント無効 ＆ 非表示*/
				z-index:9;									/*手前に*/
				width:64px;									/*ボタン画像の幅*/
				height:100px;								/*ボタン画像の高さ*/
				margin-top:-50px;							/*ボタンを上下中央に配置する為、高さの半分上げる*/
				-webkit-transform:translate(0, 0);
				-ms-transform:translate(0, 0);
				transform:translate(0, 0);
			}
			#slickMain .slick-prev{
				left:0;										/*左ボタン（戻る） 端からの距離*/
			}
			#slickMain .slick-next{
				right:0;									/*右ボタン（進む） 端からの距離*/
				transform:scale(-1,1);
			}
				#slickMain .slick-prev:before,
				#slickMain .slick-next:before{
					content:url(../images/btn_slider_l.png);/*左右ボタンの画像url*/
				}


			/*slickMain（キャッチコピー：テキストエリア）････････････････*/
			.slickMain_txt{
				z-index:99;
				display:inline-block;
				position:absolute;
				height:680px;
				width:100%;
				display:flex;
				place-items:center;
			}
				.slickMain_txt>div{
					display:inline-block;
					height:calc(100% - 200px);
					width:1100px;
					/*max-width:1008px;1200 * 0.84*/
					margin:0 auto;
					padding-top:200px;
					padding-left: 50px;
					padding-right: 50px;
				}
				.slickMain_txt>div *{
					display:inline-block;
					width:100%;
					color:white;
					text-align:left;
					text-align-last:left;
				}
					.slickMain_txt>div>h3{/*キャッチコピー*/
						font-size:5.0rem;
						line-height:1.6em;
					}
					.slickMain_txt>div>p{/*補足テキスト*/
						margin-top:30px;
						font-size:2.0rem;
						line-height:1.85em;
					}
					.slickMain_txt>div>a{/*私たちについて*/
						margin-top:37px;
					}
					.slickMain_txt>div>a:hover{/*私たちについて*/
						opacity:1;
					}

					/*マウスオーバー時に、左からスライドインするオブジェクト（台形）････*/
					.slickMain_txt>div>a::before{
						z-index:-1;							/*テキストの裏側に配置*/
						content:"";
						position:absolute;
						top:0;
						left:-100%;							/*最初は左側に完全に隠しておく*/
						width:100%;
						height:680px;
						min-height:680px;
						max-height:680px;
						background-color:rgba(28, 115, 73, 0.92);
						clip-path:polygon(0% 0%, 50% 0, calc(50% - 340px) 100%, 0% 100%);/*台形にカット*/
						transition:left 0.3s ease;			/*アニメーション設定*/
					}
					.slickMain_txt>div>a:hover::before{
						left:0;								/*背景を初期位置（左端 0）に戻す*/
					}

						.slickMain_txt>div>a>em{/*私たちについて*/
						}
							.slickMain_txt>div>a>em>span{
								text-decoration:underline;
							}
															/*キャッチコピーのスライド・アニメーション用初期設定*/
															.slickMain_txt>div>h3,/*キャッチコピー*/
															.slickMain_txt>div>p,/*補足テキスト*/
															.slickMain_txt>div>a>em{/*私たちについて*/
																opacity:0;
															}

				.slickMain_txt_bg{/*「キャッチコピー：テキストエリア」の背景（黒ぼかし）*/
					z-index:10;
					display:inline-block;
					position:absolute;
					top:0;
					left:calc((100% - 1200px)/2);
					right:auto;
					bottom:0;
					margin:auto;
					height:250px;
					width:800px;
					background-color:black;
					filter:blur(200px) opacity(100%);/*ぼかし効果*/
					mix-blend-mode:multiply;/*乗算*/
				}

															/*背景（黒ぼかし）のアニメーション････････････*/
															.slickBG_fadeIn{
																animation:slickBG_fadeIn 7.0s linear forwards;/*動作時間はSlickの切り替え時間（タイミング）と揃える*/
															}
															/*設定内容は「@keyframes img_zoomIn」に準拠*/
															@keyframes slickBG_fadeIn{
																0%{/*デフォルト*/
																	opacity:0;
																}
																6%{
																	opacity:1;
																}
																94%{
																	opacity:1;
																}					
																100%{
																	opacity:0;
																}
															}


			/*下ドット･･･････････････････････････････････････････････････*/
			.slick-dots{/*●●●●●*/
				z-index:199;
				text-align:center;
				text-align-last:center;
				pointer-events:none;
				bottom:22px; /*スライド範囲内に移す場合*/
			}
				.slick-dots li{
					margin:0 2px;/*左右の間隔*/
					pointer-events:auto;
				}
					.slick-dots li button:before{/*通常の●*/
						font-size:29px;/*大きさ*/
						opacity:0.5;/*透過率*/
						color:dimgray;/*色*/
					}
					.slick-dots li.slick-active button:before{/*アクティブの●*/
						opacity:0.75;/*透過率*/
						color:lightgray;/*色*/
					}


	/*「コート予約はこちら」ボタン（Slickの手前に表示）･･････････*/
	#btn_rservationCoat{
		z-index:299;
		display:flex;/*子要素を中央配置*/
		place-items:center;
		position:absolute;
		top:auto;
		left:auto;
		right:40px;
		bottom:32px;
		height:58px;
		width:246px;
		border:solid 2px var(--Cyan_01);
		background:var(--Cyan_03);
		/*background:#196f2a url(../images/btn_rservationCoat.png) center center /cover no-repeat;*/
	}
		#btn_rservationCoat>p{/*テキスト*/
			display:inline-block;
			width:100%;
			font-size:1.7rem;
			font-weight:bold;
			text-align:center;
			text-align-last:center;
			color:white;
		}
			#btn_rservationCoat>p>span{/*▲*/
				display:inline-block;
				margin:6px auto auto 6px;
				font-size:70%;
				transform:rotate(90deg);
			}




/*********************************************************************************************************************************

		メディアクエリ（ ～500px以下：モバイル対応 ）

*********************************************************************************************************************************/
@media(max-width:500px){


	/*slickMain ･････････････････････････････････････････････････*/
	#slickMain{
	}
		#slickMain>div li{
		}
			#slickMain>div li div{
			}
				#slickMain>div li div img{
					object-position: calc(50% - 170px) center;
				}
	/*slickMain（キャッチコピー：テキストエリア）････････････････*/
	.slickMain_txt{
		width:450px!important;
		left: 0;
		right: 0;
		top: 0;
        bottom: 0;
		margin: auto;
	}
		.slickMain_txt>div{
			padding-top:84px;
			padding-left: 0;
			padding-right: 0;
		}
			.slickMain_txt>div>p{
				line-height:1.75em;
			}
				.slickMain_txt>div>p br{
					display:none;
				}

	/*下ドット･･･････････････････････････････････････････････････*/
	.slick-dots{/*●●●●●*/
		opacity:0;
	}

	/*「コート予約はこちら」ボタン（Slickの手前に表示）･･････････*/
	#btn_rservationCoat{
		left:0;
		right:0;
		margin:auto;
	}

}