@charset "UTF-8";

body {
	color: white;
}

.wrap {
	margin: 0 auto;
	width: 960px;
	max-width: calc(100% - 40px);
}

#visual {
	width: 100%;
	height: calc(100vh - 90px);
	position: relative;
	z-index: 1;
}
#visual figure {
	position: absolute;
	bottom: 39%;
	left: 0;
	z-index: 3;
	text-align: center;
	width: 100%;
	height: 38%;
	max-height: 290px;
	opacity: 0;
}
#visual figure img {
	max-height: 100%;
}
#visual h1 {
	position: absolute;
	top: 64%;
	left: 0;
	z-index: 3;
	text-align: center;
	width: 100%;
	height: 38%;
	color: white;
	font-family: "Lato", sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 6.72px;
	opacity: 0;
}
#visual .dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: url(../images/top/visual_dot.png) repeat-x center / auto 100%;
	pointer-events: none;
	clip-path: polygon(50% 95%, 50% 95%, 55% 100%, 45% 100%);
	transition: 1s;
}
#visual canvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#visual.show figure {
	opacity: 1;
	transition: 1s 1s;
}
#visual.show h1 {
	opacity: 1;
	transition: 1s 1s;
}
#visual.show .dot {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	transition: 1s;
}

#visual.alpha canvas,
#visual.alpha .dot {
	transition: 1s;
	opacity: 0.5;
}

#message {
	padding: 68px 0 240px;
	position: relative;
	z-index: 2;
}
#message .wrap {
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.10);
	padding: 52px 60px 52px;
}
#message h2 {
	text-align: center;
	font-family: "Lato", sans-serif;
	font-size: 44px;
	font-style: normal;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: 2.64px;
	padding-bottom: 32px;
	background: linear-gradient(to right, white 0, white 100%) no-repeat center bottom / 51px 2px;
	margin-bottom: 40px;
}
#message h2 span {
	font-family: "Share Tech";
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 2.56px;
	display: block;
	margin-bottom: 8px;
}
#message p {
	font-size: 17px;
	line-height: 32px;
	letter-spacing: 1.7px;
}
#message .sign {
	font-size: 17px;
	line-height: 34px;
	letter-spacing: 0.42px;
	margin-top: 40px;
}
#message .sign img {
	display: inline-block;
	vertical-align: middle;
	width: 230px;
	margin-left: 14px;
}

#menu {
	position: relative;
	z-index: 2;
}
#menu article {
	width: 600px;
	max-width: 100%;
	height: 360px;
	padding: 30px 80px 0 0;
	position: relative;
	margin-bottom: 80px;
}
#menu article:nth-of-type(even) {
	margin-left: auto;
	padding: 30px 0 0 95px;
}
#menu article h2 {
	font-family: "Lato", sans-serif;
	font-size: 44px;
	font-style: normal;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: 2.64px;
	padding-bottom: 32px;
	background: linear-gradient(to right, white 0, white 100%) no-repeat left bottom / 51px 2px;
	margin-bottom: 28px;
}
#menu article h2 span {
	font-family: "Share Tech";
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 2.56px;
	display: block;
	margin-bottom: 8px;
}
#menu article p {
	font-size: 17px;
	line-height: 32px;
	letter-spacing: 1.7px;
}
#menu article a {
	display: block;
	font-family: "Lato", sans-serif;
	font-size: 17px;
	line-height: 20px;
	letter-spacing: 1.02px;
	color: white;
	width: fit-content;
	padding: 14px 0 15px 70px;
	margin-top: 40px;
	position: relative;
}
#menu article a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 50px;
	aspect-ratio: 1;
	background: url(../images/common/arrow.png) no-repeat center / auto 20px white;
	transform: translate(0, -50%);
	border-radius: 50%;
	transition: 0.2s;
}
#menu article figure {
	position: absolute;
	top: 0;
	left: 100%;
	width: calc(50vw - 130px);
	height: 100%;
	background: no-repeat center left / contain;
}
#menu article:nth-of-type(even) figure {
	left: auto;
	right: 100%;
	background-position: center right;
}


@media print, screen and (max-width: 768px) {
.wrap {
	max-width: 92vw;
}
#visual {
	height: calc(100vh - 16vw);
}
#visual figure {
	bottom: 50%;
	height: 20%;
	max-height: none;
}
#visual figure img {}
#visual h1 {
	top: 52%;
	font-size: 5.7vw;
}
#visual .dot {
	background: url(../images/top/visual_dot_sp.png) repeat center / 90% auto;
}
#visual canvas {
	top: 10%;
	height: 80%;
}
#visual.show figure {}
#visual.show h1 {}
#visual.show .dot {}
#visual.alpha canvas,
#visual.alpha .dot {}
#message {
	padding: 15.5vw 0 30vw;
}
#message h2 {
	font-size: 7.5vw;
	line-height: 1;
	padding-bottom: 7vw;
	background-size: 13vw 2px;
	margin-bottom: 10vw;
}
#message h2 span {
	font-size: 3vw;
	margin-bottom: 2vw;
}
#message p {
	font-size: 3.4vw;
	line-height: 1.8;
	margin-bottom: 7vw;
}
#message .sign {
	font-size: 3.4vw;
	line-height: 1.8;
	margin-top: 0;
}
#message .sign img {
	width: 46vw;
	margin-left: 3.8vw;
}
#menu {
	padding: 21vw 0 16vw;
}
#menu article {
	width: 100%;
	height: auto;
	padding: 0;
	margin-bottom: 15.5vw;
}
#menu article:nth-of-type(even) {
	padding: 0;
}
#menu article h2 {
	font-size: 7.5vw;
	line-height: 1.5em;
	padding-bottom: 5.2vw;
	background-size: 13vw 2px;
	margin-bottom: 10vw;
	text-align: center;
	background-position: center bottom;
	background-size: 11vw 2px;
}
#menu article h2 span {
	font-size: 3vw;
	margin-bottom: 2vw;
}
#menu article p {
	font-size: 3.4vw;
	line-height: 1.8;
	margin-top: 6vw;
}
#menu article a {
	font-size: 3.4vw;
	line-height: 5vw;
	padding: 4vw 0 4vw 17.5vw;
	margin-top: 4vw;
}
#menu article a::before {
	width: 12vw;
	background-size: auto 6vw;
}
#menu article figure {
		position: static;
		width: 100%;
		height: 60vw;
		background-size: contain;
}
#menu article:nth-of-type(even) figure {}
}