@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP:wght@200;400;600&display=swap');
html,body {
	padding: 0;
	margin: 0;
	font-family:'Noto Serif JP', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
	letter-spacing: 1px;
	color: #222;
}
*:focus {
outline: none;
}
ul,li {
	list-style: none;
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
	color: #222;
}
img,video {
	border: none;
	width: 100%;
}
.clear {
	clear: both;
}
#ez_wrap {
	width: 100%;
	min-width: 1200px;
	margin: 0 auto;
}
@media only screen and (max-width: 750px)  {
	#ez_wrap {
		min-width: 100%;
	}	
}

/*=====main_visual=====*/

#main_visual {
	position: relative;
	width: 100vw;
	height: 120vh;
}
#main_visual h1 {
	width: 12%;
	position: absolute;
	top: 34%;
	left: 50%;
	margin-left: -6%;
	opacity: 0;
	transition: 2s all 0s ease;
}
#main_visual h1.ac {
	opacity: 1;
}
#main_visual .scroll {
	width: 1px;
	height: 40%;
	position: absolute;
	top: 55%;
	left: 50%;
	margin-left: -.5px;
	opacity: 0;
	transition: 1s all 3.5s ease;
	overflow: hidden;
}
#main_visual .scroll .icon {
	width: 100%;
	height: 100%;
	background: #000;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	position: absolute;
	top: 0;
	left: 0;
}
@-webkit-keyframes sdb {
  0% {
	  top: -100%;
  }
  30% {
	  top: 0;
  }
  60% {
	  top: 0;
  }
  100% {
	  top: 100%;
  }
}
#main_visual .scroll.ac {
	opacity: 1;
}
#main_visual li {
	position: absolute;
	opacity: 0;
	transition: 2s all 1.5s ease;
	transform: scale(0.7) translate(5%, 5%);
}

#main_visual li:nth-of-type(1) {
	top: 6%;
	left: 5%;
	width: 16%;
	transition: 1.5s all 1s ease;
}
#main_visual li:nth-of-type(2) {
	top: 15%;
	right: 5%;
	width: 16%;
	transition: 1.5s all 1.5s ease;
}
#main_visual li:nth-of-type(3) {
	top: 62%;
	left: 55%;
	width: 15%;
	transition: 1.5s all 1.3s ease;
}
#main_visual li:nth-of-type(4) {
	top: 60%;
	left: 20%;
	width: 13%;
	transition: 1.5s all 1.7s ease;
}
#main_visual li:nth-of-type(5) {
	top: 1%;
	left: 42%;
	width: 20%;
	transition: 1.5s all 1.9s ease;
}
#main_visual li:nth-of-type(6) {
	top: 74%;
	right: 5%;
	width: 16%;
	transition: 1.5s all 2s ease;
}
#main_visual li.ac {
	opacity: 1;
	transform: scale(1) translate(0);
}

@media only screen and (max-width: 750px)  {
	#main_visual h1 {
		width: 28%;
		position: absolute;
		top: 32%;
		left: 50%;
		margin-left: -14%;
	}
	#main_visual li:nth-of-type(1) {
		top: 5vw;
		left: 2vw;
		width: 32%;
	}
	#main_visual li:nth-of-type(2) {
		top: 30vw;
		right: 2vw;
		width: 26%;
	}
	#main_visual li:nth-of-type(3) {
		top: 62%;
		left: 20%;
		width: 25%;
	}
	#main_visual li:nth-of-type(4) {
		top: 40%;
		left: 5vw;
		width: 20%;
	}
	#main_visual li:nth-of-type(5) {
		top: 1%;
		left: 48%;
		width: 28%;
	}
	#main_visual li:nth-of-type(6) {
		top: 54%;
		right: 5%;
		width: 36%;
	}
}


/*==========*/
#look_wrap {
	padding: 5%;
}
#look_wrap .section {
	position: relative;
	margin: 20% auto;
}
#look_wrap .section .img1,#look_wrap .section .img2,#look_wrap .section .img3 {
	line-height: 0;
}
#look_wrap .section .credit {
	position: absolute;
	width: 18%;
}
#look_wrap .section .credit .tit {
	font-size: 1.2vw;
	margin-bottom: 1vw;
}
#look_wrap .section .credit li {
	font-size: .8vw;
	padding: 5px 0;
}
#look_wrap .section .credit li a {
	position: relative;
	padding: 0 0 5px;
	transition: .5s all 0s ease;
}
#look_wrap .section .credit li a:hover {
	opacity: 0.8;
}
#look_wrap .section .credit li a::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 1px;
	background: #000;
	transition: .5s all 0s ease;
}
#look_wrap .section .credit li a:hover::before {
	width: 100%;
}

@media only screen and (max-width: 750px)  {
	#look_wrap {
		padding: 0;
		overflow: hidden;
	}
	#look_wrap .section {
		position: relative;
		margin: 40% auto;
	}
	#look_wrap .section .credit {
		width: 30%;
	}	
	#look_wrap .section .credit .tit {
		font-size: 3.4vw;
		margin-bottom: 2vw;
	}
	#look_wrap .section .credit li {
		font-size: 2.2vw;
	}
}
/*=====no1=====*/

#look_wrap .section.no1 h2 {
	position: absolute;
	top: 15%;
	left: 5%;
	width: 24%;
}
#look_wrap .section.no1 h2 img {
	opacity: 0;
	transition: 2s all 0s ease;
}
#look_wrap .section.no1 h2 img.ac {
	opacity: 1;
}
#look_wrap .section.no1 .img1 {
	width: 45%;
	margin-left: 34%;
}
#look_wrap .section.no1 .credit {
	bottom: 5%;
	right: 0;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no1 h2 {
		position: relative;
		top: auto;
		left: auto;
		width: 56%;
		margin: 0 auto 15%;
	}	
	#look_wrap .section.no1 .img1 {
		width:90%;
		margin: 0 auto;
	}
	#look_wrap .section.no1 .credit {
		position: relative;
		bottom: auto;
		right: auto;
		margin: 5% 5% 0;
	}
}


/*=====no2=====*/
#look_wrap .section.no2 .img1 {
	width: 40%;
}
#look_wrap .section.no2 .img2 {
	width: 30%;
	position: absolute;
	top: 0;
	right: 0;
}
#look_wrap .section.no2 .video {
	width: 20%;
	position: absolute;
	bottom: 0;
	left: 50%;
}
#look_wrap .section.no2 .credit {
	top: 5%;
	left: 50%;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no2 .img1 {
		width: 80%;
	}	
	#look_wrap .section.no2 .img2 {
		width:62%;
		position: relative;
		top: auto;
		right: auto;
		margin: 10% 0 10% 38%;
	}
	#look_wrap .section.no2 .video {
		width: 55%;
		position: relative;
		bottom: auto;
		left: auto;
		margin-left: 5%;
	}
	#look_wrap .section.no2 .credit {
		top: 46%;
		left: 5%;
	}
}


/*=====no3=====*/
#look_wrap .section.no3 .img1 {
	width: 40%;
	margin-left: 60%;
}
#look_wrap .section.no3 .img2 {
	width: 22%;
	position: absolute;
	top: 0;
	left: 0;
}
#look_wrap .section.no3 .img3 {
	width: 22%;
	position: absolute;
	bottom: 0;
	left: 28%;
}
#look_wrap .section.no3 .credit {
	top: 5%;
	left: 28%;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no3 .img1 {
		width: 65%;
		margin-left: 35%;
	}
	#look_wrap .section.no3 .img2 {
		width: 45%;
		position: relative;
		top: auto;
		left: auto;
		margin: 10% 5%;
	}
	#look_wrap .section.no3 .img3 {
		width: 25%;
		position: absolute;
		bottom: auto;
		top: 15%;
		left: 0%;
	}
	#look_wrap .section.no3 .credit {
		top: 62%;
		left: 55%;
	}
}


/*=====no4=====*/
#look_wrap .section.no4 .img1 {
	width: 40%;
	margin: 0 auto;
}
#look_wrap .section.no4 .img2 {
	width: 22%;
	position: absolute;
	top: 0;
	left: 0;
}
#look_wrap .section.no4 .img3 {
	width: 22%;
	position: absolute;
	bottom: 0;
	right: 0%;
}
#look_wrap .section.no4 .credit {
	top: 5%;
	left: 78%;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no4 .img1 {
		width: 65%;
		margin: 0;
	}
	#look_wrap .section.no4 .img2 {
		width: 40%;
		position: relative;
		top: auto;
		left: auto;
		margin:10% 5%;
		float: left;
	}
	#look_wrap .section.no4 .img3 {
		width: 40%;
		position: relative;
		bottom: auto;
		right: auto;
		margin:10% 5%;
		float: right;
	}
	#look_wrap .section.no4 .credit {
		top: 0;
		left: 70%;
	}
}



/*=====no5=====*/
#look_wrap .section.no5 .img1 {
	width: 46%;
	margin: 0 auto;
}
#look_wrap .section.no5 .img2 {
	width: 22%;
	position: absolute;
	bottom: 0;
	right: 0;
}
#look_wrap .section.no5 .credit {
	top: 5%;
	left: 10%;
}
@media only screen and (max-width: 750px)  {
#look_wrap .section.no5 .img1 {
	width: 75%;
	margin-left: 20%;
}
#look_wrap .section.no5 .img2 {
	width: 45%;
	position: relative;
	bottom: auto;
	right: auto;
	margin: 10% 5%;
}	
#look_wrap .section.no5 .credit {
	top: 68%;
	left: 60%;
}
}


/*=====no6=====*/
#look_wrap .section.no6 .img1 {
	width: 40%;
	margin-left: 35%;
}
#look_wrap .section.no6 .img2 {
	position: absolute;
	left: 0;
	top:0;
	width: 30%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#look_wrap .section.no6 .credit {
	top: 5%;
	right: 0;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no6 .img1 {
		width: 65%;
		margin-left: 0;
	}
	#look_wrap .section.no6 .img2 {
		position: absolute;
		left: auto;
		right: 0;
		top:25%;
		width: 30%;
		height: 75%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
#look_wrap .section.no6 .credit {
	position: relative;
	top: auto;
	right: auto;
	margin: 5% 5%;
}
	
}


/*=====no7=====*/
#look_wrap .section.no7 .img1 {
	width: 40%;
	margin-left: 60%;
}
#look_wrap .section.no7 .img2 {
	width: 22%;
	position: absolute;
	top: 0;
	left: 0;
}
#look_wrap .section.no7 .img3 {
	width: 34%;
	position: absolute;
	bottom: 0;
	left: 18%;
}
#look_wrap .section.no7 .credit {
	top: 5%;
	left: 30%;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no7 .img1 {
		width: 65%;
		margin-left: 35%;
	}
	#look_wrap .section.no7 .img2 {
		width: 28%;
		position: absolute;
		top: 38%;
		left: 0;
	}
	#look_wrap .section.no7 .img3 {
		width: 50%;
		position: relative;
		bottom: auto;
		left: auto;
		margin:10% 0 0 45%;
	}
	#look_wrap .section.no7 .credit {
		top: 76%;
		left: 5%;
	}
	
}



/*=====no8=====*/
#look_wrap .section.no8 .img1 {
	width: 40%;
}
#look_wrap .section.no8 .img2 {
	width: 22%;
	position: absolute;
	top: 0;
	right: 0%;
}
#look_wrap .section.no8 .img3 {
	width: 32%;
	position: absolute;
	bottom: 0;
	left: 48%;
}
#look_wrap .section.no8 .credit {
	top: 5%;
	left: 50%;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no8 .img1 {
		width: 65%;
	}	
	#look_wrap .section.no8 .img2 {
		width: 28%;
		position: absolute;
		top: 38%;
		right: 0%;
	}
	#look_wrap .section.no8 .img3 {
		width: 50%;
		position: relative;
		bottom: auto;
		left: auto;
		margin: 10% 5% 0;
	}
	#look_wrap .section.no8 .credit {
		top: 76%;
		left: 64%;
	}
}


/*=====no9=====*/
#look_wrap .section.no9 .img1 {
	width: 40%;
	margin-left: 53%;
}
#look_wrap .section.no9 .img2 {
	width: 22%;
	position: absolute;
	bottom: 0;
	left: 5%;
}
#look_wrap .section.no9 .credit {
	top: 48%;
	left: 34%;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no9 .img1 {
		width: 75%;
		margin-left: 25%;
	}
	#look_wrap .section.no9 .img2 {
		width: 45%;
		position: relative;
		bottom: auto;
		left: auto;
		margin: 10% 5% 0;
	}
	#look_wrap .section.no9 .credit {
		top: 65%;
		left: 60%;
	}
}


/*=====no10=====*/
#look_wrap .section.no10 .img1 {
	width: 40%;
}
#look_wrap .section.no10 .img2 {
	width: 22%;
	position: absolute;
	top: 0;
	left: 48%;
}
#look_wrap .section.no10 .img3 {
	width: 22%;
	position: absolute;
	bottom: 0;
	right: 0%;
}
#look_wrap .section.no10 .credit {
	top: 5%;
	left: 78%;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no10 .img1 {
		width: 65%;
		margin-left: 35%;
	}
	#look_wrap .section.no10 .img2 {
		width:28%;
		position: absolute;
		top: 18%;
		left: 0%;
	}
	#look_wrap .section.no10 .img3 {
		width: 50%;
		position: relative;
		bottom: auto;
		right: auto;
		margin: 10% 5% 0;
	}
	#look_wrap .section.no10 .credit {
		top: 60%;
		left: 65%;
	}
	
}

/*=====no11=====*/
#look_wrap .section.no11 {
	margin-bottom: 10%;
}

#look_wrap .section.no11 .img1 {
	width: 46%;
	margin: 0 auto;
}

#look_wrap .section.no11 .credit {
	top: 50%;
	left: 76%;
}
@media only screen and (max-width: 750px)  {
	#look_wrap .section.no11 .img1 {
		width: 90%;
		margin: 0 auto;
	}	
	#look_wrap .section.no11 .credit {
		position: relative;
		top: auto;
		left: auto;
		margin: 5%;
	}
	
}
.img1 img, .img2 img, .img3 img, .video video, .credit ul, .credit .tit {
	opacity: 0;
	transition: 2s all 0.1s ease;
}
.img1 img.ac, .img2 img.ac, .img3 img.ac, .video video.ac, .credit.ac ul, .credit.ac .tit {
	opacity: 1;
}


/*=====footer=====*/

#footer {
	width: 100%;
	opacity: 0;
	transition: 2s all 0s ease;
}
#footer.ac {
	opacity: 1;
}
#footer .staff {
	margin-bottom: 10%;
}
#footer .staff li {
	text-align: center;
	font-size: .8vw;
	padding: 5px 0;
}
#footer .logo {
	max-width: 280px;
	width: 40%;
	margin: 0 auto;
}
#footer .sns {
	margin:50px auto;
	width: 180px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
}
#footer .sns li {
	width: 50%;
	margin: 0 auto;

}

#footer .copyright {
	margin: 10% 0 5%;
	font-size: .6vw;
	text-align: center;
}
@media only screen and (max-width: 750px)  {
	#footer {
		margin-top: 20%;
	}	
	#footer .staff li {
		font-size: 2.2vw;
	}
	#footer .copyright {
		font-size: 2.2vw;
	}
}