@charset "utf-8";

img {
	width: 100%;
	height: auto;
}

/*
 * wrapper
 */
.wrapper {
	background: url(../img/bg.jpg) 0 0/100% no-repeat;
	position: relative;
}
@media (max-width: 768px) {
	.wrapper {
		width: 100%;
		height: 171.2vw;
	}
}
@media (min-width: 769px) {
	.wrapper {
		width: 750px;
		height: 1284px;
		margin: auto;
	}
}

/*
 * header
 */
header #logoH {
	position: absolute;
}
@media (max-width: 768px) {
	header #logoH {
		width: 14.8vw;
		top: 5.867vw;
		left: 5.867vw;
	}
}
@media (min-width: 769px) {
	header #logoH {
		width: 112px;
		top: 44px;
		left: 44px;
	}
}

/*
 * main
 */
main ul {
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
main ul li {
	width: 36.8vw;
}
main ul li a {
	display: block;
	border-radius: 7.467vw;
	box-shadow: 1.333vw 1.333vw 1.067vw -1.067vw rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
	main ul {
		width: 80vw;
		top: 105.6vw;
	}
	main ul li {
		width: 36.8vw;
	}
	main ul li:nth-child(n+3) {
		margin-top: 6.133vw;
	}
	main ul li a {
		border-radius: 7.467vw;
		box-shadow: 1.333vw 1.333vw 1.067vw -1.067vw rgba(0,0,0,0.3);
	}
}
@media (min-width: 769px) {
	main ul {
		width: 600px;
		top: 792px;
	}
	main ul li {
		width: 276px;
	}
	main ul li:nth-child(n+3) {
		margin-top: 46px;
	}
	main ul li a {
		border-radius: 56px;
		box-shadow: 10px 10px 8px -8px rgba(0,0,0,0.3);
	}
}

/*
 * footer
 */
footer #logoF {
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
@media (max-width: 768px) {
	footer #logoF {
		width: 13.2vw;
		bottom: 4.4vw;
	}
}
@media (min-width: 769px) {
	footer #logoF {
		width: 99px;
		bottom: 33px;
	}
}