@charset "UTF-8";

/*------------------------------------------------------------------------------------
          
UNIQ / PHOTO-TOUR / フォトツアー
									
------------------------------------------------------------------------------------*/

#tourContents {
	width: 100%;
	position: relative;
	z-index: 10;
	background-color: #001e3f;
}

/*------------------------------------------------------ SLIDE */

#slide {
}

#slide .slideInner {
	padding-bottom: 30vw;
	background-color: #001e3f;
}

#slide .slideInner .slideImg {
	width: 100%;
	position: relative;	
}

#slide .slideInner .slideImg picture {
	width: 100%;
	position: relative;
}

#slide .slideInner .slideImg picture:after {
    content: "";
    display: block;
    width: 100%;
    height: 15%;
    position: absolute;
    left: 0;
    bottom: -1px;
    background: linear-gradient(rgba(0,30,63,0) 0, rgba(0,30,63,1) 99%, rgba(0,30,63,1) 100%);
}

#slide .slideInner .slideImg img {
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

#slide .slideInner.in .slideImg img {
	opacity: 1;
	transition: opacity 1200ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

#slide .slideInner .slideImg figcaption {
	line-height: 1;
    margin-left: 10vw;
    margin-top: 30px;
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

#slide .slideInner.in .slideImg figcaption {
	opacity: 1;
    transition: opacity 1200ms cubic-bezier(0.32, 0.08, 0.24, 1) 200ms;
}

#slide .slideInner .slideImg figcaption span {
    display: inline-block;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: .1rem;
    line-height: 1;
    padding-right: 10px;
    border-right: 1px solid #fff;
}

#slide .slideInner .slideTxt {
	width: 100%;
    text-align: left;
    padding: 0 10vw;
    margin-top: 20px;
}

#slide .slideInner .slideTxt h2 {
	width: 100%;
    font-size: 2rem;
    line-height: 1.5;
    color: #fff;
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

#slide .slideInner.in .slideTxt h2 {
	opacity: 1;
    transition: opacity 1200ms cubic-bezier(0.32, 0.08, 0.24, 1) 400ms;
}


/*------------------------------------------------------------------------------------

以下 TAB 用
									
------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 500px) {
	
/*------------------------------------------------------ SLIDE */

#slide .slideInner {
    padding-bottom: 20vw;
}

#slide .slideInner .slideImg img {
	width: 100%;
	height: 50vw;
}

/*------------------------------------------------------ LINK-BOX */

/*#photo .linkBox .linkBoxInner ul li {
	width: 100%;
}*/

}


/*------------------------------------------------------------------------------------

以下 PC 用
									
------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 900px) {
	
/*------------------------------------------------------ SLIDE */

#slide {
	cursor:grab;
}

#slide:active {
	cursor:grabbing;
}

#slide .slideInner {
    position: relative;
    padding-bottom: 0;
}

#slide .slideInner .slideTxt {
	width: 100%;
	padding: 50vh 10% 50px;
    margin-top: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(rgba(0,30,63,0) 40%, rgba(0,30,63,.8) 100%);
    text-align: center;
}

#slide .slideInner .slideTxt h2 {
    font-size: 2.2rem;
    color: #fff;
	overflow: hidden;
}

#slide .slideInner .slideTxt span {
	display: inline-block;
	transform: translate(0,110%);
	transition: all 300ms cubic-bezier(0.32, 0.08, 0.24, 1) 500ms;
}

#slide .slideInner.slick-active .slideTxt span {
	transform: translate(0,0);
}

#slide .slideInner .slideImg picture:after {
	content: none;
}

#slide .slideInner .slideImg img,
#slide .slideInner.in .slideImg img {
	width: 100%;
	height: 100vh;
	min-height: 600px;
	opacity: .3;
	transform: scale(0.75);
	transition: all 500ms cubic-bezier(0.32, 0.08, 0.24, 1);
}

#slide .slideInner.slick-active .slideImg img,
#slide .slideInner.in.slick-active .slideImg img {
	opacity: 1;
	transform: scale(1)
}

#slide .slideInner .slideImg figcaption {
	position: absolute;
	top: 10%;
	left: 10%;
	margin: 0;
	overflow: hidden;
}

#slide .slideInner .slideImg figcaption span {
	font-size: 1.2rem;
	transform: translate(0,110%);
	transition: all 300ms cubic-bezier(0.32, 0.08, 0.24, 1) 400ms;
}

#slide .slideInner.slick-active .slideImg figcaption span {
	transform: translate(0,0);
}

/*DOTS*/

#slide .slick-dots {
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translate(0,-50%);
}

#slide .slick-dots li {
	display: block;
	width: 15px;
    height: 6px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

#slide .slick-dots li:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	background-color: #fff;
}

#slide .slick-dots li.slick-active:before {
	background-color: #1cc0e2;
}

#slide .slick-dots li:not(:last-child) {
	margin-bottom: 10px;
}

#slide .slick-dots li button {
	visibility: hidden;
    opacity: 0;
}



}