@charset "UTF-8";


/* fluid background */

#fluid-wrapper {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	overflow: hidden;
	opacity: 0;
}

#fluid-bg {
	position: absolute;
	left: -20px;
	top: -20px;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
}

body > .container {
	position: relative;
	z-index: 1;
}

.container-contents {
	position: relative;
}

.container-contents::before {
	content: "";
	display: block;
	position: absolute;
	left: 40px;
	right: 0;
	top: 0;
	bottom: -200px;
	z-index: -1;
	background-color: #fff;
}

.container-contents::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: -200px;
	z-index: -1;
	width: 40px;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 85%, rgba(255,255,255,1) 100%);
}

@media (max-width: 768.98px) {

	.container-contents {
		padding: 0 0 0 3vw;
		background-color: transparent;
	}

  .container-contents::before {
    left: 3vw;
		bottom: -100px;
  }

  .container-contents::after {
		bottom: -100px;
		width: 3vw;
		background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 3%, rgba(255,255,255,0) 98%, rgba(255,255,255,1) 100%);
  }

	.col-foot.isSP {
		background-color: #fff;
	}

}


/* alternate fluid background */

#fluid-bg div {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-size: cover;
	background-position: 30% 50%;
}

#fluid-bg div:nth-child(1) { background-image: url(../images/img_bg_1.jpg); opacity: 1; }
#fluid-bg div:nth-child(2) { background-image: url(../images/img_bg_2.jpg); }
#fluid-bg div:nth-child(3) { background-image: url(../images/img_bg_3.jpg); }

@keyframes alt-fluid-bg {
	0% { opacity: 0; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.2); }
	100% { opacity: 0; transform: scale(1); }
}


/* page header */

.header-contents {
	position: relative;
	opacity: 0;
}

.header-contents .img {
	position: absolute;
	left: 0;
	top: 140px;
	z-index: -1;
	width: 100%;
	height: calc(100% - 290px);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(.36,.04,.4,1);
}

.header-contents .img.show {
	opacity: 1;
}

@media (max-width: 768.98px) {

	.header-contents .img {
		top: 72px;
		height: calc(100% - 232px);
	}

}

.header-contents h1 {
	opacity: 0;
}

.header-contents h1.show {
	opacity: 1;
}

.header-contents h1 .l {
	display: inline-block;
	margin-right: .1em;
	opacity: 0;
	transform: translateX(70px);
	transition: opacity 1.6s ease-in, transform 1.6s cubic-bezier(.36,.04,.4,1);
}

.header-contents h1 .l.sp {
	width: .4em;
}

.header-contents h1 .l.sp + .sp {
	width: 0;
	margin-right: 0;
}

.header-contents h1.show .l {
	opacity: 1;
	transform: translateX(0);
}


/* top page first view */

.section-hero {
	position: relative;
	height: 100vh;
	margin-bottom: 0;
	overflow: hidden;
}

.section-hero + .nav-home + .container-contents {
	padding-top: 138px;
}

.section-hero + .nav-home + .container-contents::after {
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 75%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
}

@media (max-width: 768.98px) {

	.section-hero {
		height: auto;
		padding: 72px 0 15vw;
	}

  .section-hero + .nav-home + .container-contents {
		padding-top: 62px;
  }

}


/* top page first view: copy */

.section-hero .text {
	display: flex;
	align-items: center;
	position: absolute;
	left: 0;
	top: 140px;
	width: 45%;
	height: calc(100% - 140px);
}

.section-hero .text .copy {
	width: 100%;
	opacity: 0;
}

.section-hero .text .copy.show {
	opacity: 1;
}

.section-hero .text .copy p {
	position: relative;
	margin-bottom: 0;
	padding: 1.2vw 0;
	color: #283238;
	font-size: 2.4vw;
	font-weight: 600;
	font-feature-settings: "palt";
	letter-spacing: .05em;
	text-align: center;
}

.section-hero .text .copy p::after {
	content: "あした";
	display: block;
	position: absolute;
	left: calc(50% - 10.6vw);
	top: .5vw;
	color: #283238;
	font-size: 0.8vw;
	font-weight: 600;
	letter-spacing: .6em;
	opacity: 0;
	transition: opacity 1s 2.8s ease-out;
}

.section-hero .text .copy.show p::after  {
	opacity: 1;
}

.section-hero .text .copy p span {
	display: inline-block;
	opacity: 0;
	transform: translateX(150px);
	transition: opacity 1s ease-in, transform 1s cubic-bezier(.36,.04,.4,1);
}

.section-hero .text .copy.show p span  {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 768.98px) {

	.section-hero .text {
		position: static;
		width: auto;
		height: 60vw;
	}

	.section-hero .text .copy p {
		padding-left: .5em;
		font-size: 7vw;
	}

	.section-hero .text .copy p::after {
		left: calc(50% - 29.8vw);
		top: -1vw;
		font-size: 2.6vw;
	}

	.section-hero .text .copy p span {
		transform: translateX(70px);
	}

}


/* top page first view: scroll */

.section-hero .scroll {
	position: absolute;
	left: 50%;
	bottom: calc((50% - 8vw - 120px) / 2);
	width: 1px;
	height: 90px;
	opacity: 0;
	transition: opacity 2s 3s cubic-bezier(.36,.04,.4,1);
}

.section-hero .scroll.show {
	opacity: 1;
}

.section-hero .scroll .label {
	display: block;
	position: absolute;
	left: -20px;
	top: -30px;
	width: 40px;
	color: #000;
	font-size: 8px;
	font-weight: 600;
	text-align: center;
	transform: scale(.9);
}

.section-hero .scroll .bar {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: #fff;
	overflow: hidden;
}

.section-hero .scroll .bar span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: #000;
	animation: scroll-bar 2s ease-out infinite both;
}

.section-hero .scroll .dot {
	display: block;
	position: absolute;
	left: -3px;
	top: -3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #000;
	animation: scroll-dot-pc 2s ease-out infinite both;
}

@keyframes scroll-bar {
	0% { transform: translateY(-100%); }
	15% { transform: translateY(-100%); }
	60% { transform: translateY(0); }
	80% { transform: translateY(100%); }
	100% { transform: translateY(100%); }
}

@keyframes scroll-dot-pc {
	0% { transform: translateY(0) scale(0); opacity: 0; }
	15% { transform: translateY(0) scale(1); opacity: 1; }
	60% { transform: translateY(90px) scale(1); opacity: 1; }
	80% { transform: translateY(90px) scale(0); opacity: 0; }
	100% { transform: translateY(90px) scale(0); opacity: 0; }
}

@keyframes scroll-dot-sp {
	0% { transform: translateY(0) scale(0); opacity: 0; }
	15% { transform: translateY(0) scale(1); opacity: 1; }
	60% { transform: translateY(40px) scale(1); opacity: 1; }
	80% { transform: translateY(40px) scale(0); opacity: 0; }
	100% { transform: translateY(40px) scale(0); opacity: 0; }
}

@media (max-width: 768.98px) {

	.section-hero .scroll {
		left: 7.5%;
		bottom: 15vw;
		height: 40px;
	}

	.section-hero .scroll .label {
		left: -6px;
		top: -36px;
		width: 16px;
		transform: scale(.9) rotate(90deg);
	}

	.section-hero .scroll .dot {
		left: -2px;
		top: -2px;
		width: 5px;
		height: 5px;
		animation: scroll-dot-sp 2s ease-out infinite both;
	}

}


/* top page first view: photo sliders */

.section-hero .photo {
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 45%;
	top: 0;
	width: 57%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	transition: opacity 3s ease-out;
}

.section-hero .photo.slide {
	opacity: 1;
}

.section-hero .photo .slider {
	width: calc(50% - 10px);
}

.section-hero .photo.slide ul {
	animation: fv-slider-v linear infinite both;
}

.section-hero .photo li {
	padding-bottom: 20px;
}

.section-hero .photo img {
	display: block;
	width: 100%;
}

@keyframes fv-slider-v {
	0% { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}

@keyframes fv-slider-h {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@media (max-width: 768.98px) {

	.section-hero .photo {
		display: block;
		position: static;
		width: 85%;
		height: 50vw;
		margin-left: 15%;
	}

	.section-hero .photo .slider {
		width: auto;
		height: 50vw;
	}

	.section-hero .photo .slider:last-child {
		display: none;
	}

	.section-hero .photo ul {
		display: table;
		width: auto;
		height: 50vw;
	}

	.section-hero .photo.slide ul {
		animation: fv-slider-h linear infinite both;
	}

	.section-hero .photo li {
		display: table-cell;
		height: 50vw;
		padding: 0 10px 0 0;
	}

	.section-hero .photo img {
		width: auto;
		height: 50vw;
	}

}


/* top page: header */

body.top-page .header-common {
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 2s cubic-bezier(.36,.04,.4,1), transform 2s cubic-bezier(.36,.04,.4,1);
}

body.top-page .header-common.show {
	opacity: 1;
	transform: translateY(0);
}