/* ======================================================
	slider
====================================================== */

/* ======================================================
	frameSlider
====================================================== */
#frameSlider{
	overflow: hidden;
	height: 700px;
	position: relative;
	margin-top: 250px;
	margin-bottom: 150px;
}

.frameSlider{
	min-width: 1200px;
	margin: auto;
	margin-bottom: 0 !important;
	position: relative;
}
.frameSlider figure{
	margin:0 90px;
	width: 900px;
    height:560px;
}
.frameSlider figure img{
	width:900px;
/*
	height:560px;
*/
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
	color: #000;
}

.slick-dots li{
	margin: 0 5px 0 0;
}
#frameSlider .slick-dots li button:hover:before,
#frameSlider .slick-dots li button:focus:before{
    color: #b8bbc1; /* hover時の色を変更 */
}
#frameSlider .slick-dots li button:before{
	font-family: 'FontAwesome';
	font-size: 18px;
	width: 20px;
	height: 20px;
	content: "\f0c8";
	color: #adb2bf;
}

#frameSlider .slick-dots li.slick-active button:before{
	color: #333;
}





#frameSlider2{
	overflow: hidden;
	height: 700px;
	position: relative;
	margin-top: 250px;
	margin-bottom: 150px;
}

.frameSlider2{
	min-width: 1200px;
	margin: auto;
	margin-bottom: 0 !important;
	position: relative;
}
.frameSlider2 figure{
	margin:0 90px;
	width: 900px;
    height:560px;
}
.frameSlider2 figure img{
	width:900px;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
	color: #000;
}


#frameSlider2 .slick-dots li button:hover:before,
#frameSlider2 .slick-dots li button:focus:before{
    color: #b8bbc1; /* hover時の色を変更 */
}
#frameSlider2 .slick-dots li button:before{
	font-family: 'FontAwesome';
	font-size: 18px;
	width: 20px;
	height: 20px;
	content: "\f0c8";
	color: #adb2bf;
}

#frameSlider2 .slick-dots li.slick-active button:before{
	color: #333;
}








#frameSliderDots2{
	width:900px;
	margin:0 auto;
	position:relative;
}
#frameSliderDots2>.slick-dots{
	text-align: left;
}

#frameSlider2 .slick-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width:900px;
	cursor: pointer;
}
#frameSlider2 .prev-arrow {
	left: calc((100vw - 900px)*0.45);
	z-index: 10;
	width: 60px;
}
#frameSlider2 .next-arrow {
	right: calc((100vw - 900px)*0.45);
	width: 60px;
}
#frameSliderDescription2{
	position:relative;
	top: 20px;
}
#frameSliderDescription2 p{
	font-size:26px;
	padding-top: 30px;
}
#frameSliderDescription2 h3{
	/*font-size:36px;*/
	font-size: 56px;
	line-height: 1;
}
#frameSliderDescription2 h3>span{
	font-family: 'EB Garamond', serif;
	font-size:60px;
}
#frameSliderDescription2>div{
	position: absolute;
	bottom: 0;
	right: 10vw;
	width: 28vw;
	padding:2vw;
	background-color:#fff;
}
/* ディスプレイ */
#frameSliderDescription2.display>div{
	width: 37vw;
}




/* ラグジュアリー */
#frameSlider.luxury .slick-dots li button:before{color: #a7896f;}
#frameSlider.luxury .slick-dots li.slick-active button:before{color: #a08770;}

#frameSliderDots{
	width:900px;
	margin:0 auto;
	position:relative;
}
#frameSliderDots>.slick-dots{
	text-align: left;
}

#frameSlider .slick-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width:900px;
	cursor: pointer;
}
#frameSlider .prev-arrow {
	left: calc((100vw - 900px)*0.45);
	z-index: 10;
	width: 60px;
}
@media only screen and (max-width: 1200px) { #frameSlider .prev-arrow{ left: 140px;} }

#frameSlider .next-arrow {
	right: calc((100vw - 900px)*0.45);
	width: 60px;
}
@media only screen and (max-width: 1200px) { #frameSlider .next-arrow{ right: 140px;} }

#frameSliderDescription{
	position:relative;
	top: 20px;
}
#frameSliderDescription p{
	font-size:26px;
	padding-top: 30px;
}
/* ラグジュアリー */
#frameSliderDescription.luxury section{
	color: #42210b;
}
#frameSliderDescription h3{
	/*font-size:36px;*/
	font-size: 56px;
	line-height: 1;
}
/* ディスプレイ */
#frameSliderDescription.display h3,
#frameSliderDescription2.display h3{
	padding-top: 40px;
}
#frameSliderDescription h3>span{
	font-family: 'EB Garamond', serif;
	font-size:60px;
}
#frameSliderDescription>div{
	position: absolute;
	bottom: 0;
	right: 10vw;
	width: 33vw;
	padding:2vw;
	background-color:#fff;
}
/* ラグジュアリー */
#frameSliderDescription.luxury>div{
	background-color: #f3f0ee;
}
.frameSliderDescription1{
	position: absolute;
	top: 0;
}
.frameSliderDescription2,
.frameSliderDescription3,
.frameSliderDescription4,
.frameSliderDescription5,
.frameSliderDescription6,
.frameSliderDescription7,
.frameSliderDescription8,
.frameSliderDescription9,
.frameSliderDescription10,
.frameSliderDescription11,
.frameSliderDescription12,
.frameSliderDescription13,
.frameSliderDescription14,
.frameSliderDescription15,
.frameSliderDescription16,
.frameSliderDescription17,
.frameSliderDescription18,
.frameSliderDescription19,
.frameSliderDescription20,
.frameSliderDescription21,
.frameSliderDescription22,
.frameSliderDescription23,
.frameSliderDescription24,
.frameSliderDescription25,
.frameSliderDescription26,
.frameSliderDescription27,
.frameSliderDescription28,
.frameSliderDescription29,
.frameSliderDescription30
{
	position: absolute;
	top: 0;
	opacity:0;
}

/* ======================================================
	fontSlider
====================================================== */
	#fontPattern{
		width:1100px;
		margin:50px auto;
		padding-bottom: 70px;
	}
	#fontPatternLeft {
		float:left;
		width:600px;
		position: relative;
		z-index: 11;
		margin:auto;
	}
	.fontSlider{
		margin:auto;
		width:500px;
		box-shadow : 0px 0px 30px rgba(188, 181, 170, 0.65);
	}
	.fontSlider figure img{
		width:100%;
	}
	.fontSlider .slick-arrow {
		position: absolute;
		top: 50%;
		height: 53px;
		margin-top: -26px;  /* 高さの半分だけネガティブマージン */
		cursor: pointer;
		z-index: 10;  /* 重要 */
	}
	.fontSlider .prev-arrow {
		left: -42px;
	}
	.fontSlider .next-arrow {
		right: -43px;
	}
	#fontPatternRight{
		float:right;
		width:450px;
		position: relative;
		margin:auto;
	}

	.fontPatternRightTop{
		width:450px;
		margin:auto;
		padding: 90px 0;
	}
	.fontPatternRightTop h3{
		font-size:40px;
		margin:20px 0; 
	}
	.fontPatternRightTop p{
		font-size:18px;
	}
	.fontPatternRightBottom{
		background-color:#f3f0ee;
		width:400px;
		height:160px;
		left:-100px;
		position: relative;
		z-index: 10;
	}
	/* ラグジュアリー */
	#fontPattern.luxury .fontPatternRightBottom{
		background-color: #dcd3ca;
	}

	.fontPatternRightBottom .fontPatternRightBottomCaption{
		font-size:31px;
	}
	.fontPatternRightBottom .fontPatternRightBottomCaption li{
		position: absolute;
		top:0;
		left: 0;
		margin-top: 40px;
		text-align:center;
		width: 100%;
	}
	.fontPatternRightBottom .fontPatternRightBottomDot{
		position: absolute;
		bottom: 70px;
		left: 0;
		width:78%;
	}
	/* ラグジュアリー */
	#fontPattern.luxury .fontPatternRightBottom .fontPatternRightBottomDot{
		left: 60px;
	}
	.fontPatternRightBottomCaption2,
	.fontPatternRightBottomCaption3,
	.fontPatternRightBottomCaption4{
		opacity: 0;
	}

/* ======================================================
	englishSlider
====================================================== */
	#englishPattern{
		width:1100px;
		margin:50px auto;
		position: relative;
		padding-top: 100px;
	}
	#englishPatternRight {
		float:right;
		width:600px;
		position: relative;
		z-index: 11;
		margin:auto;
	}
	.englishSlider{
		margin:auto;
		width:500px;
		box-shadow : 0px 0px 30px rgba(188, 181, 170, 0.65);
	}
	.englishSlider figure img{
		width:100%;
	}
	.englishSlider .slick-arrow {
		position: absolute;
		top: 50%;
		height: 53px;
		margin-top: -26px;  /* 高さの半分だけネガティブマージン */
		cursor: pointer;
		z-index: 10;  /* 重要 */
	}
	.englishSlider .prev-arrow {
		left: -42px;
	}
	.englishSlider .next-arrow {
		right: -43px;
	}
	#englishPatternLeft{
		float:left;
		width:500px;
		position: relative;
		margin:auto;
	}

	.englishPatternLeftTop{
		width:450px;
		margin:auto;
		/*padding: 90px 0;*/
		padding: 20px 0 40px 0;
		padding-left: 50px;
	}
	.englishPatternLeftTop h3{
		font-size:40px;
		margin:20px 0;
	}
	.englishPatternLeftTop p{
		font-size:18px;
	}
	.fontPatternRightTop p small,
	.englishPatternLeftTop p small{
		font-size: 80%;
		line-height: 1.7;
		display: block;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.englishPatternLeftBottom{
		background-color:#f3f0ee;
		width:400px;
		height:160px;
		right:-150px;
		position: relative;
		z-index: 10;
	}
	/* ラグジュアリー */
	#englishPattern.luxury .englishPatternLeftBottom{
		background-color: #dcd3ca;
	}
	.englishPatternLeftBottom .englishPatternLeftBottomCaption{
		font-size:31px;
	}
	.englishPatternLeftBottom .englishPatternLeftBottomCaption li{
		position: absolute;
		top:0;
		left: 0;
		margin-top: 40px;
		text-align:center;
		width: 100%;
	}
	.englishPatternLeftBottom .englishPatternLeftBottomDot{
		position: absolute;
		bottom: 70px;
		left: 0;
		width:78%;
	}
	/* ラグジュアリー */
	 #englishPattern.luxury .englishPatternLeftBottom .englishPatternLeftBottomDot{
		left: 60px;
	}
	.englishPatternLeftBottomCaption2,
	.englishPatternLeftBottomCaption3,
	.englishPatternLeftBottomCaption4{
		opacity: 0;
	}

/* ======================================================
	lineuphSlider
====================================================== */
	#lineupSlider { padding: 0;padding-top: 30px;width:1200px;margin:auto;}
	#lineupSlider a{display:block;}
	#lineupSlider figure>img { width: 228px;height:220px;cursor:pointer;}
	#lineupSlider figure { margin: 0 7px;position: relative;cursor: pointer;}
	#lineupSlider figure figcaption{
		position: absolute;
		top: 0;
		left: 0;
		width: 189px;
		padding: 20% 20px;
		height: 60%;
		background-color: rgba(0,0,0,0.5);
		color:#fff;
		text-align:center;
		outline: 1px solid #fff;
		outline-offset: -10px;
		opacity: 0;
		transition: opacity .3s;
	}
	#lineupSlider figure figcaption h4{
		font-size: 110%;
		margin-bottom: 10px;
		line-height: 1.5;
	}
	#lineupSlider figure figcaption p{
		text-align:center;
		font-size: 80%;
		line-height: 1.5;
	}

	#lineupSlider figure figcaption:hover{
		opacity: 1;
	}
	@keyframes fadeInDescription {
		0% { opacity: : 1; }
		100% { opacity: : 0; }
	}
	#lineupSlider .slick-arrow {
		position: absolute;
		top: 55%;
		height: 54px;
		margin-top: -27px;  /* 高さの半分だけネガティブマージン */
		cursor: pointer;
		z-index: 10;  /* 重要 */
	}
	#lineupSlider .next-arrow { right: -25px;　z-index: 100;}
	#lineupSlider .prev-arrow { left: -25px; z-index: 100;}