@charset "utf-8";

h1 {
	position: relative;
	z-index: 2;
}
.modePC h1 {
	margin-top: 30px;
}
.modeSP h1 {
	margin-top: -50%;
}
.modePC h1 img {
	width: 989px;
	height: 159px;
}
.modeSP h1 p {
	text-align: center;
	font-style: italic;
}
.modeSP h1 p:nth-of-type(1) {
	font-size: 48px;
	margin-top: 120px;
	letter-spacing: .1em;
}
.modeSP h1 p:nth-of-type(2) {
	font-size: 90px;
	letter-spacing: .4em;
}
.main_visual .point {
	color: #fff;
	position: absolute;
	z-index: 1;
}
.modePC .main_visual .point {
	font-size: 19px;
	bottom: 33%;
	left: calc( 50% - ( -2vh * 0.115 ));
}
.modeSP .main_visual .point {
	font-size: 19px;
	bottom: 34.8%;
	left: calc( 50% - ( 42vh * 0.145 ));
	transform: translate(-50%,50%);
}
@keyframes map-point-inner {
	0%{ width: 0; height: 0; }
	100%{ width: 12px; height: 12px; }
}
.main_visual .point:before {
	content: "";
	display: block;
	border-radius: 50%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 50%;
	animation-name: map-point-inner;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
@keyframes map-point-outer {
	0%{ width: 0; height: 0; opacity: 1;}
	60%{ opacity: 1;}
	100%{ width: 480px; height: 480px; opacity: 0;}
}
.main_visual .point:after {
	content: "";
	display: block;
	animation-name: map-point-outer;
	animation-duration: 3s;
	animation-iteration-count : infinite;
	border: 2px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.modePC .main_visual .point p {
	margin-top: 0px;
	margin-left: -15px;
}
.modeSP .main_visual .map svg {
	width: 440px;
	height: 440px;
}
.main_visual .point p {
	position: absolute;
	top: 50%;
	left: 50%;
	white-space: nowrap;
}
.modePC .main_visual .point p {
	transform: translate(-100px, 5px);
}
.modeSP .main_visual .point p {
	font-size: 22px;
	margin-top: 10px;
	margin-left: -10px;
	letter-spacing: 0;
}
.main_visual .map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.main_visual .map img {
	height: 100%;
}
.modeSP .main_visual .map img {
	margin-left: calc( 100vh * -0.125 );
}

/* box-lower
==========================================*/
.box-lower {
	background-color: #f6f6f6;
}
.modePC .box-lower {
	padding-top: 138px;
	padding-bottom: 230px;
}
.modeSP .box-lower {
	padding-top: 100px;
	padding-bottom: 393px;
}
.box-lower li {
	background-color: #fff;
	list-style-type: none;
}
.modePC .box-lower li {
	width: 1100px;
	height: 360px;
}
.modeSP .box-lower li {
	width: 630px;
	height: 948px;
}
.modePC .box-lower li + li {
	margin-top: 37px;
}
.modeSP .box-lower li + li {
	margin-top: 100px;
}
.box-lower li .wrap-img {
	overflow: hidden;
}
.modePC .box-lower li .wrap-img {
	width: 530px;
	height: 100%;
}
.modeSP .box-lower li .wrap-img {
	width: 100%;
	height: 360px;
}
.box-lower li img {
	width: 100%;
	height: 100%;
}
.box-lower li .wrap-txt {
	position: relative;
}
.box-lower li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #666;
	text-decoration: none;
}
.modePC .box-lower li a img {
	transition: transform 4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.modePC .box-lower li a:hover img {
	transform:scale(1.1);
}
.modePC .box-lower li .wrap-txt {
	width: 570px;
	height: 100%;
	padding: 53px 47px 39px 56px;
}
.modeSP .box-lower li .wrap-txt {
	width: 100%;
	height: 588px;
	padding: 0 50px;
}
.modeSP .box-lower li h2 {
	margin-top: 50px;
}
.box-lower li h2 .en {
	font-style: italic;
	letter-spacing: .07em;
}
.modePC .box-lower li h2 .en {
	font-size: 32px;
}
.modeSP .box-lower li h2 .en {
	font-size: 46px;
	text-align: center;
}
.modePC .box-lower li h2 .jp {
	font-size: 18px;
	margin-top: 20px;
}
.modeSP .box-lower li h2 .jp {
	font-size: 26px;
	margin-top: 20px;
	text-align: center;
}
.modePC .box-lower li .wrap-txt > p {
	font-size: 14px;
	margin-top: 28px;
	line-height: 1.9;
	letter-spacing: .07em;
}
.modeSP .box-lower li .wrap-txt > p {
	font-size: 26px;
	margin-top: 40px;
	line-height: 1.65;
	letter-spacing: .07em;
}
.modePC .box-lower li .wrap-txt .btn {
	position: absolute;
	right: 47px;
	bottom: 39px;
}
.modeSP .box-lower li .wrap-txt .btn {
	position: absolute;
	bottom: 133px;
	left: 50%;
	transform: translate(-50%,0);
}

.box-lower li .wrap-txt .coming-soon{
	background: #ccc;
	text-align: center !important;
	color: #999;
}

.modePC .box-lower li .wrap-txt .coming-soon {
	position: absolute;
	right: 47px;
	bottom: 39px;
}
.modeSP .box-lower li .wrap-txt .coming-soon {
	position: absolute;
	bottom: 133px;
	left: 50%;
	transform: translate(-50%,0);
}
.box-lower li .wrap-txt .coming-soon.btn-viewmore {
	padding-right: 0 !important;
}
.logo-animation {
	width: 440px;
	height: auto;
	overflow: hidden;
}
@media (max-width: 768px) {
	.logo-animation {
		width: 70%;
	}
}
.logo-animation .obj01,
.logo-animation .obj02,
.logo-animation .obj03 {
	transform: translateX(-100%);
}
.is-ie11 .logo-animation .obj01,
.is-ie11 .logo-animation .obj02,
.is-ie11 .logo-animation .obj03,
.is-edge .logo-animation .obj01,
.is-edge .logo-animation .obj02,
.is-edge .logo-animation .obj03 {
	transform: translateX(0);
}

.is-loaded .logo-animation .obj01 {
	animation: logo-animation 1200ms ease-in-out forwards;
}
.is-loaded .logo-animation .obj02 {
	animation: logo-animation02 1200ms 400ms ease-in-out forwards;
}
.is-loaded .logo-animation .obj03 {
	animation: logo-animation02 900ms 800ms ease-in-out forwards;
}
@keyframes logo-animation {
  0% {
		opacity: 0;
		transform: translateX(-100%) translateY(30px) scale(0.5);
	}
	 100% {
		opacity: 1;
		transform: translateX(0%) translateY(0) scale(1);
	}
}
@keyframes logo-animation02 {
  0% {
		opacity: 0;
		transform: translateY(100%) rotate(-5deg);
	}
	 100% {
		 opacity: 1;
		transform: translateY(0%) rotate(0);
	}
}