@charset "utf-8";

.wrapper{ max-width: 1920px; margin: 0 auto; background: #fff; width: 100%;}
/*
body{ animation: noScl 6.5s linear 0s both;}
@keyframes noScl {
	0%,
	99%{ overflow-y: hidden;}
	100%{ overflow-y: scroll;}
}
*/

.mainVisual{ position: relative; overflow: hidden; background: #fff;}
.arrowBtn{ position: absolute; left: 40px; right: 40px; text-align: center; animation: arrowBtn 2.5s ease 0s infinite;}
@keyframes arrowBtn {
	0%{ bottom: 20px;}
	50%{ bottom: 10px;}
	100%{ bottom: 20px;}
}
.arrowBtn img{ max-width: 40px;}
.verBtnWrap{ width: 750px; display: flex; position: absolute; top: 65px; right: -675px; z-index: 1000; background: #000; transition: all .3s; -webkit-transition: all .3s; z-index: 10;}
.verBtnWrap.open{ right: 0;}
.verBtnWrap .txtBox{ padding: 30px 15px;}
.verBtnWrap .txtBox p{ color: #fff; font-size: 18px; line-height: 1.8em;}
.verBtnWrap .verBtn{ position: relative; flex-basis: 75px; cursor: pointer; /*height: 80vh;*/}
.verBtnWrap .verBtn:before{ content: ''; width: 30px; height: 32px; background-image: url(../img/arrow01.png); background-repeat: no-repeat; background-size: 100%; background-position: 0 0; position: absolute; bottom: 25px; left: 20px;}
.verBtnWrap.open .verBtn:before{ background-image: url(../img/arrow02.png);}
.verBtnWrap.open .verContent{ }
/*.main { background: #000;}*/
.btmWrap .inner{ position: relative; z-index: 10;}
.btmWrap .inner .labelBox,
.btmWrap .inner .txtBox{ position: absolute; z-index: 15;}
.btmWrap .inner .labelBox{ top: 40px; right: 40px; max-width: 250px; width: 30%;}
.btmWrap .inner .txtBox{ bottom: 10%; left: 150px; right: 150px;}
.btmWrap .inner .txtBox p{ color: #fff; text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 0.5px #000;font-weight: bold;}
.btmWrap .inner .txtBox.bk p{ color: #000; text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 0.5px #fff;}
.btmWrap .inner .txtBox .tit{ font-size: 50px; margin-bottom: 40px;}
.btmWrap .inner .txtBox .txt{ font-size: 18px; max-width: 700px; width: 60%;}

/* slider-setting */
.slick-prev, 
.slick-next{ z-index: 10; transition: all .3s; -webkit-transition: all .3s;}
.slick-prev, 
.slick-next,
.slick-prev:before,
.slick-next:before{ width: 100px; height: 50px;}
.slick-prev{ left: 20px;}
.slick-next{ right: 20px;}
.slick-prev:hover { left: 10px;}
.slick-next:hover { right: 10px;}
.slick-prev:before,
.slick-next:before { content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100%; display: block;}
.slick-prev:before { background-image: url(../img/arrow_prev.png);}
.slick-next:before { background-image: url(../img/arrow_next.png);}
.slick-dots { bottom: 10px;}
.slick-dotted.slick-slider { margin-bottom: 0;}
.slick-dots li button:before { font-size: 5px; width: 20px; height: 20px; opacity: .5; color: #fff;}
.slick-dots li.slick-active button:before { opacity: 1; color: #fff; font-size: 15px;}



/* 高さ調整 */
@media only screen and (min-height: 769px){
	.lowWin{ display: none;}
}
@media only screen and (max-height: 768px){
	.highWin{ display: none;}
	.verBtnWrap .verBtn img{ max-width: 55px; margin: 0 10px}
	.verBtnWrap .txtBox p { font-size: 16px;}
}
/* 幅調整 */
@media only screen and (max-width: 960px){
	.slick-prev, 
	.slick-next,
	.slick-prev:before,
	.slick-next:before{ width: 60px; height: 30px;}
	.btmWrap .inner .txtBox{ left: 70px; right: 70px;}
	.btmWrap .inner .txtBox .tit{ font-size: 34px; margin-bottom: 15px;}
	.btmWrap .inner .txtBox .txt{ font-size: 16px; max-width: none;}
}
@media only screen and (min-width: 768px){
	.mainVisual .layerBox{ height: calc(100vh - 60px); display: flex; padding: 60px 15% 10px; position: relative;}
	.mainVisual .layerBox>img{ width: 100%; background: url(../../image/top/seane04.png) no-repeat 50% 50% / contain;}
	.verBtnWrap{ height: calc(100vh - 70px);}
	.slick-prev.slick-disabled,
	.slick-next.slick-disabled,
	.slick-prev.slick-disabled:before,
	.slick-next.slick-disabled:before { opacity: 0;}
	#slick-slide02 .inner .txtBox,
/*	#slick-slide03 .inner .txtBox,*/
	#slick-slide05 .inner .txtBox{ top: 10%; bottom: auto;}
	#slick-slide06 .inner .txtBox{ left: 30%}
	#slick-slide07 .inner .txtBox{ left: 20%}
	.verBtnWrap .verContent{ flex-basis: calc(100% - 75px);}
}
@media only screen and (max-width: 767px){
	.slick-dots { bottom: 13px;}
	.slick-prev, 
	.slick-next,
	.slick-prev:before,
	.slick-next:before{ width: 17px; height: 34px;}
	.slick-prev{ left: 15px; bottom: 10px;}
	.slick-next{ right: 15px;}
	.slick-prev,
	.slick-next{ bottom: -10px; top: auto;}
	.slick-prev:before { background-image: url(../img/arrow_prev_sp.png);}
	.slick-next:before { background-image: url(../img/arrow_next_sp.png);}
	.slick-slider { padding-bottom: 50px;}
	.slick-dots li button:before,
	.slick-dots li.slick-active button:before { color: #000;}
	.arrowBtn img{ max-width: 30px;}
	.btmWrap .inner .labelBox{ top: 15px; right: 15px; width: 30%;}
	.btmWrap .inner .txtBox { bottom: 40px; left: 15px; right: 15px;}
	.btmWrap .inner .txtBox .tit { font-size: 22px; margin-bottom: 15px;}
	.btmWrap .inner .txtBox .txt { font-size: 14px;  width: 100%;}
	.slick-prev.slick-disabled,
	.slick-next.slick-disabled,
	.slick-prev.slick-disabled:before,
	.slick-next.slick-disabled:before { pointer-events: none;}
/*	*/
	.nextBtn{ }
	.nextBtn a{background: #000; padding: 15px 50px; display: block;}
	.verBtnWrap{ position: static; width: auto;}
	.verBtnWrap .verContent{ display: none;}
	
	.verBtnWrap .verContent img.highWin{ display: block;}
	.verBtnWrap .verContent img.lowWin{ display: none;}
/*	.verBtnWrap .verContent{ height: 0; overflow: hidden; transition: all .3s; -webkit-transition: all .3s;}*/
/*	#poh.open .verContent{ height: auto;}*/
	#slick-slide03 .inner .txtBox.bk p,
	#slick-slide05 .inner .txtBox.bk p{ color: #fff; text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 0.5px #000;font-weight: bold;}
}