@charset "UFT-8";


#MAIN {
	text-align: center;
	background: #EEEEEF;
	position: relative;
}

#MAIN:before {
	content: "";
	width: 100%;
	height: 350px;
	background: #4177C8;
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
}

.h2 {
	color: #fff;
}

.btn-flex {
	padding: 30px 0 10px;
}

#MAIN a.btn {}

#MAIN p {
	padding: 1em 0;
}





/*ここから*/

#sec01 {
	position: relative;
}

#sec01 .mapontxt {
	position: absolute;
	bottom: 0;
	text-align: center;
	left: 0;
	right: 0;
	z-index: 1;
}


#sec01 .btn_container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


/*map上ボタン*/


.btn_container a {
	position: absolute;
	cursor: pointer;
}


@media only screen and (max-width: 768px) {
	div#MAIN {
		background: #fff;
	}
	.btn_container {
		background-size: auto;
	}
	#map img{
		width: 100%;
	}
	.btn_container {
		background: url(../img/business/map_sp.png) bottom center no-repeat;
		background-size: cover;
	}
	#sec01 a:hover {}

	.btn_container a{
/*		transform: translateX:(-50%);*/
/*		transform: translateY(-50%);*/
		transform: translate(-50%,-50%);
		width:18vw;
	}
	.btn_container a img{
		width: 100%;
	}
	
	.btn_container a.about {
		top: 32%;
		left: 50%;
		width:68vw;
	}
	.btn_container a.conveni {
		top: 45%;
		left: 23%;
	}
	.btn_container a.shops {
		top: 70%;
		left: 37%;
	}
	.btn_container a.airport {
		top: 21%;
		left: 83%;
	}
	.btn_container a.super {
		top: 61%;
		left: 87%;
	}
	.btn_container a.restaurant {
		top: 49%;
		left: 46%;
	}
	.btn_container a.office {
		top: 78%;
		left: 82%;
	}

	.btn_container.sp a {
		animation-delay: 0s;
		animation-direction: alternate;
		animation-duration: 2s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: float_sp;
		animation-timing-function: ease-in-out;
	}

	.btn_container.sp a:hover {
		animation-play-state: paused;
		mix-blend-mode: hard-light;
	}
	.btn_container.sp a.office:hover {
		opacity: 0.8;
	}
	.btn_container.sp a:hover img {
		transform: scale(1.1);
		transition: transform 0.3s ease-in-out;
	}

	@keyframes float_sp {
		0% {
			transform: translate(-50%,-50%);
		}
		50% {
			transform: translate(-50%,-54%);
		}
		100% {
			transform: translate(-50%,-50%);
		}
	}

}

@media only screen and (min-width: 769px),print {
	.btn_container {
		background: url(../img/business/map.png) bottom center no-repeat;
	}
	#sec01 a:hover {}
	.btn_container a.about {
		top: 305px;
		left: 338px;
	}
	.btn_container a.conveni {
		top: 222px;
		left: 123px;
	}
	.btn_container a.shops {
		top: 577px;
		left: 164px;
	}
	.btn_container a.airport {
		top: 163px;
		left: 715px;
	}
	.btn_container a.super {
		top: 383px;
		left: 711px;
	}
	.btn_container a.restaurant {
		top: 463px;
		left: 426px;
	}
	.btn_container a.office {
		top: 560px;
		left: 760px;
	}

	.btn_container a {
		animation-delay: 0s;
		animation-direction: alternate;
		animation-duration: 2s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: fuwafuwa;
		animation-timing-function: ease-in-out;
	}

	.btn_container a:hover {
		animation-play-state: paused;
		mix-blend-mode: hard-light;
	}
	.btn_container a.office:hover {
		opacity: 0.8;
	}
	.btn_container a:hover img {
		transform: scale(1.1);
		transition: transform 0.3s ease-in-out;
	}

	@keyframes fuwafuwa {
		0% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-10px);
		}
		100% {
			transform: translateY(0px);
		}
	}
}

@media only screen and (min-width: 961px) {}

@media only screen and (min-width: 1401px) {}





@media only screen and (max-width: 768px) {
	#sec02 p{
		padding: 1em;
	}
	#sec02 p,
	#sec02 img{
		width: 100%;
	}
}


@media only screen and (max-width: 768px) {

	#MAIN .h2{
		padding-top: 60px;
	}

	#MAIN .h2 h2 {
		font-size: 150%;
	}
	#MAIN .h2 p {
		font-size: 110%;
		padding: 0.5em;
	}

	#sec03 {
		padding: 1em;
	border-bottom: 1px solid #ccc;
	}
	#sec03 .flex{
		display: block;
	}
	#sec03 .modal{
		display: block;
		margin-bottom: 1em;
	}
	#sec03 .modal img{
		width: 50%;
	}
	#sec03 h3{
		font-size: 130%;
		padding:0.5em 0;
		color: #fff;
		background: #4177C8;
	}
	#sec03 h3:after{
		content: none;
	}
	#sec03 #about {
		background: #E8382F;
		color: #fff;
	}
	#sec03 #about h3{
		font-size: 150%;
		background: #E8382F;
		color: #fff;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#sec03 #about p{
		padding: 1em;
	}
	#sec03 #about img{
		display: none;
	}

	#sec03 .modal img.size40{ width: 40%; }
	#sec03 .modal img.size50{ width: 50%; }
	#sec03 .modal img.size60{ width: 60%; }
	#sec03 .modal img.size70{ width: 70%; }
	#sec03 .modal img.size80{ width: 80%; }
	#sec03 .modal img.size90{ width: 90%; }
	#sec03 .modal img.size100{ width: 100%; }

}







#sec04 .flex div {
	text-align: center;
	color: #4177C8;
	margin-right: 40px;
}

#sec04 .flex > div {
	margin-right: 0;
	margin: 0 10px;
}

#sec04 .flex span {
	display: block;
	text-align: center;
	font-size: 120%;
	padding: 1em 0;
}
@media only screen and (max-width: 768px) {
	#sec04 .flex{
		display: block;
	}
	#sec04 h3{
		font-size: 130%;
		line-height: 1.5;
	}
	#sec04 span{
		display: block;
		line-height: 1.5;
	}
}



/*modal用*/

.iziModal-content {
	position: relative;
}

.iziModal h3 {
	font-size: 240%;
	line-height: 1.7;
	padding-top: 0.5em;
	padding-bottom: 1em;
	text-align: center;
	color: #4177C8;
	text-align-last: center;
}

.iziModal h3:after {
	content: "";
	display: block;
	width: 80px;
	height: 5px;
	background: #4177C8;
	margin: 15px auto 0;
}

.iziModal-content button {
	background: none;
	border: 0;
	padding: 10px;
	position: absolute;
	right: 0;
	top: 0;
	user-select: none;
	border-style: none;
	outline: none;
	cursor: pointer;
}

.iziModal-content .ico {
	display: none;
}

.iziModal-content .noimg,
.iziModal-content .flex {
	display: flex;
	align-items: flex-start;
	text-align: left;
	padding: 0 40px 40px;
}

.iziModal-content .flex > p:first-of-type {
	flex: 1;
	margin-right: 40px;
}