@charset "utf-8";

.headline {
	padding-left: 55px;
	font-size: 32px;
	position: relative;
	left: 55px;
	font-family: 'Roboto_Condensed';
	font-weight: 700;
	margin-bottom: 100px;
}
.headline::before {
	width: 30px;
	height: 2px;
	background: #000;
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
}

@media screen and (max-width:767px) {
	.headline {
		padding-left: calc(80 / 1140 * 100vw);
		font-size: calc(54 / 1140 * 100vw);
		left: calc(75 / 1140 * 100vw);
    	margin-bottom: 12vw;
	}
	.headline::before {
		width: calc(40 / 1140 * 100vw);
	}
}

/* -------------------------------------------------
	first-view
------------------------------------------------- */

#first-view {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
}
#first-view h1 img {
	width: 450px;
}

#first-view h1 {
	opacity: 0;
	filter: blur(40px);
	animation: op1 1.8s cubic-bezier(0.85, 0, 0.15, 1) 0.5s forwards;
}
@keyframes op1 {
	0% { opacity: 0; filter: blur(40px);}
	100% { opacity: 1; filter: blur(0);}
}

#first-view .text-group {
	height: 106px;
	padding-top: 3px;
	margin-top: 80px;
	box-sizing: border-box;
	position: relative;
}
#first-view .lead {
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	position: relative;
	z-index: 4;
}

#first-view .lead {
	opacity: 0;
	animation: op2 1.2s ease-out 2.8s forwards;
}
@keyframes op2 {
	0% { opacity: 0; transform: translateY(30px);}
	100% { opacity: 1; transform: translateY(0);}
}

#first-view .copy {
	width: 435px;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 2;
}

#first-view .copyEn {
    font-family: 'Roboto_Condensed';
    font-weight: 400;
	font-size: 20px;
	letter-spacing: 0.25em;
	position: absolute;
    bottom: 50px;
	left: 50%;
    color: #00d6b3;
    text-align: center;
	transform: translateX(-50%);
	
	opacity: 0;
	animation: op3 1.2s ease-out 4s forwards;
}
@keyframes op3 {
	0% { opacity: 0;}
	100% { opacity: 1;}
}


@media screen and (max-width:767px) {
	#first-view h1 img {
		width: calc(640 / 1140 * 100vw);
	}
	#first-view .text-group {
		height: auto;
		padding-top: 0;
		margin-top: calc(185 / 1140 * 100vw);
	}
	#first-view .lead {
		font-size: calc(54 / 1140 * 100vw);
		line-height: 1.7;
	}
	#first-view .copy {
		width: calc(845 / 1140 * 100vw);
		top: 40%;
		transform: translate(-50%,-50%);
	}
}


/* -------------------------------------------------
	information
------------------------------------------------- */
#information {
	background-color: #00d6b3;
	padding: 100px 0;
}

.infoList li {
	padding: 0 0 20px;
	border-bottom: #000 solid 1px;
	margin-bottom: 40px;
    line-height: 1.8;
}
.infoList li .date {
	font-size: 14px;
}

@media screen and (max-width:767px) {
	#information {
		padding: calc(165 / 1140 * 100vw) 0 calc(180 / 1140 * 100vw);
	}
	.infoList li {
		padding: 0 0 4vw;
		margin-bottom: 6vw;
	}
	.infoList li .date {
		font-size: 3vw;
	}
	.infoList li h3 {
		font-size: 3.8vw;
    	line-height: 1.5;
	}
}


/* -------------------------------------------------
	lead-block
------------------------------------------------- */

#lead-block {
	padding: 120px 0 200px;
	background: #fff;
}
#lead-block .desc p {
	font-size: 16px;
    line-height: 2.2;
}
#lead-block .desc p + p {
	margin-top: 1.6em;
}
#lead-block .sign {
	margin-top: 90px;
	text-align: right;
}
#lead-block .sign .belong {
	font-size: 20px;
}
#lead-block .sign .name {
	font-size: 22px;
	font-weight: bold;
}

@media screen and (max-width:767px) {
	#lead-block {
		padding: calc(165 / 1140 * 100vw) 0 calc(275 / 1140 * 100vw);
	}
	#lead-block .desc p {
		font-size: calc(36 / 1140 * 100vw);
	}
	#lead-block .sign {
		margin-top: calc(140 / 1140 * 100vw);
    	line-height: 1.4;
	}
	#lead-block .sign .belong {
		font-size: calc(36 / 1140 * 100vw);
	}
	#lead-block .sign .name {
		font-size: calc(42 / 1140 * 100vw);
	}
	
	#first-view .copyEn {
		width: 100%;
		font-size: 2.7vw;
	}
}

/* -------------------------------------------------
	catalog
------------------------------------------------- */

#catalog {
	padding-top: 90px;
	color: #fff;
}
#catalog .headline::before {
	background: #fff;
}
#catalog ul {
	margin-top: 80px;
}
#catalog li .group {
	padding: 35px calc(85 / 640 * 100%) 60px;
}
#catalog li a.image {
	display: block;
	overflow: hidden;
}
#catalog li a.image img {
	transition: transform 0.3s ease-out;
}
#catalog li .num {
	font-size: 60px;
	font-family: 'Roboto_Condensed';
	font-weight: 700;
}
#catalog li .title {
	margin: 1em 0 0.8em;
	font-size: 30px;
	font-weight: bold;
}
#catalog li .desc {
	font-size: 16px;
	line-height: 1.8;
}

@media print, screen and (min-width:768px) {
	#catalog ul {
		display: flex;
		flex-wrap: wrap;
	}
	#catalog ul li {
		width: 50%;
	}
	#catalog ul li:nth-child(4n - 2),
	#catalog ul li:nth-child(4n - 1) {
		background: #00bc98;
	}
	
	#catalog li a.image:hover img {
		transform: scale(1.1);
		opacity: 1;
	}
}

@media screen and (max-width:767px) {
	#catalog {
		padding-top: calc(165 / 1140 * 100vw);
	}
	#catalog .headline {
		padding-left: calc(80 / 1140 * 100vw);
		font-size: calc(54 / 1140 * 100vw);
		left: calc(75 / 1140 * 100vw);
	}
	#catalog .headline::before {
		width: calc(40 / 1140 * 100vw);
	}
	#catalog ul {
		margin-top: calc(130 / 1140 * 100vw);
	}
	#catalog ul li:nth-child(even) {
		background: #00bc98;
	}
	#catalog li .group {
		padding: calc(130 / 1140 * 100vw)  calc(75 / 1140 * 100vw);
	}
	#catalog li .image img {
		width: 100%;
	}
	#catalog li .num {
		font-size: calc(110 / 1140 * 100vw);
	}
	#catalog li .title {
		margin: 1em 0;
		font-size: calc(64 / 1140 * 100vw);
	}
	#catalog li .desc {
		font-size: calc(36 / 1140 * 100vw);
	}
}