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

		「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;
}

	/*slickMain ･････････････････････････････････････････････････*/
	#slickMain{
		position:relative;
		height:auto;
		width:100%;
		margin-top:0; /*gMenu高さ分下げる場合*/
		margin-bottom:0; /*下ドットをスライド範囲内に移して下余白をなくす場合*/
		overflow:hidden;
	}
		#slickMain>div li a{
														/*マウスイベント無効*/
														pointer-events:none;
			height:auto;
			width:100%;
		}
			#slickMain>div li a img{
				height:100vh;							/*slickMain（スライドショー）の縦サイズ*/
				min-height:400px;
				max-height:800px;
				width:100%;
				object-fit:cover;
				object-position:center center;			/*上に合わせる場合は「center top」*/
			}

		/*進む・戻るボタン*/
		#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;
			bottom:130px;
			width:100%;
			text-align:center;
			text-align-last:center;
		}
			.slickMain_txt>div{
				display:inline-block;
				max-width:1000px;
				text-align:center;
				text-align-last:center;
			}
				.slickMain_txt>div>h3{
					width:100%;
					color:white;
					font-size:3.7rem;
					text-align:center;
					text-align-last:center;
				}
				.slickMain_txt>div>p{
					display:inline-block;
					margin-top:25px;
					color:white;
					font-size:1.8rem;
				}
			.slickMain_txt_bg,
			.slickMain_txt_bg2{/*「キャッチコピー：テキストエリア」の背景（黒ぼかし）*/
				z-index:10;
				display:inline-block;
				position:absolute;
				top:auto;
				left:0;
				right:0;
				bottom:80px;
				margin:auto;
				height:250px;
				width:800px;
				background-color:black;
				filter:blur(200px) opacity(100%);/*ぼかし効果*/
				mix-blend-mode:multiply;/*乗算*/
			}
			.slickMain_txt_bg2{/*「キャッチコピー：テキストエリア」の背景（黒ぼかし）*/
				opacity:0.3;
			}


		/*下ドット･･･････････････････････････････････････････････････*/
		.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_txt{
		width:450px;
		margin-left:25px;
	}
		.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;
	}

}