@charset "UTF-8";



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/



img{
	width: 100%;
}


p {
/*	font-size: 115%;*/
}

@keyframes zoomin {
	0% {
		transform: scale(0.8) translateY(10px);
		opacity: 0;
	}
	70% {
		opacity: 1;
		transform: scale(1.05) translateY(-3px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0px);
	}
}
@keyframes point_t {
	0% {
		transform: translateY(0px) scale(1);
		opacity: 0;
	}
	50% {
		transform: translateY(-5px) scale(1.1);
	}
	100% {
		opacity: 1;
		transform: translateY(0px) scale(1);
	}
}




.zoomin {
	opacity: 0;
}
.zoomin.on {
	animation: zoomin 0.5s ease-in-out 1 forwards;
}
.point_t {
	opacity: 0;
}
.point_t.on {
	animation: point_t 1s 0.2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	
	
	#map{
		padding-bottom: 320px;
		overflow: hidden;
	}
	
	/* tit
	-----------------------------------------------*/
		#map #mainArea{
			position: relative;
			height: 474px;
			box-sizing: border-box;
			background: url("../img/mainimg.jpg") no-repeat center;
			background-size: cover;
			padding-top: 200px;
		}
			#map #mainArea h1{
				font-weight: 400;
				text-align: center;
				letter-spacing: 0.1em;
			}
				#map #mainArea h1 span{
					display: block;
				}
					#map #mainArea h1 .eng_tit{
						font-size: 92px;
						color: #fff;
						line-height: 1;
						opacity: 0;
					}
					#map #mainArea h1 .eng_tit.on{
						opacity: 0.8;
					}
					#map #mainArea h1 .sub{
						font-size: 24px;
						text-align: center;
						font-weight: 400;
						width: 100%;
						color: #fff;
						margin-top: 20px;
						letter-spacing: 2px;
					}
	
	/* map
	-----------------------------------------------*/
	/* map本体 */
	#mapArea{
		position: relative;
		background: url("../img/map_bg.jpg") repeat left;
		background-size: 800px 650px;
		height: 1448px;
	}
		#mapArea:after{
			content: '';
			display: block;
			position: absolute;
			width: 50%;
			max-width: 580px;
			height: 100%;
			background-color: #fff;
			right: 0;
			top: 0;
		}
	#mapArea #mapcontainer{
		background: url("../img/map.png") no-repeat top center;
		background-size: 1400px 1448px;
		width: 1400px;
		height: 1448px;
		margin: 0 auto;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		z-index: 1;
	}
	#mapArea #mapcontainer .inner{
		position: relative;
		height: 100%;
		width: 100%;
	}
	/* map上 タイトル */
	#mapArea .tit{
		padding-top: 100px;
		position: relative;
	}
		#mapArea .tit h2{
			width: 718px;
			margin: 0 auto;
			font-size: 0;
		}
			#mapArea .tit h2 .sub{
				display: block;
				animation-delay: 1.2s;
			}
			#mapArea .tit h2 .maintit{
				margin-top: 10px;
				display: block;
				transition-delay: 0.5s;
				transition-duration: 1s;
			}
			#mapArea .tit h2 .maintit span{
				float: left;
				display: block;
			}
				#mapArea .tit h2 .maintit img{
					display: block;
					float: left;
					height: 88px;
					width: auto!important;
				}
		#mapArea .tit .lead{
			text-align: center;
			font-size: 17px;
			margin-top: 20px;
			line-height: 2;
			transition-delay: 1.5s;
		}
	
	/* map上 イラスト */
	#mapArea .illust{
		position: absolute;
		z-index: 2;
	}
	#mapArea .h_ill{
		width: 76px;
	}
	#mapArea .h_ill.h1{
		top: 32%;
		right: 16.7%;
	}
	#mapArea .h_ill.h2{
		top: 51.4%;
		right: 26%;
	}
	#mapArea .h_ill.h3{
		top: 76.7%;
		right: 32.5%;
	}
	#mapArea .h_ill.h4{
		top: 91.5%;
		right: 34.5%;
	}
	#mapArea .risu{
		width: 76px;
		top: 59.7%;
		right: 11.7%;
	}
	#mapArea .bycle{
		width: 104px;
		top: 99.4%;
		right: 24.7%;
	}
	
	
	/* map上 病院 */
	#mapArea #po0{
		right: 36.5%;
		top: 64.7%;
		width: 166px;
	}
	#mapArea #po0 .inner{
		position: relative;
	}
	#mapArea #po0 .tit_h3{
		
	}
	#mapArea #po0 .pin{
		position: relative;
		margin: 0 0 10px 35px;
	}
	#mapArea #po0 .icon{
		width: 176px;
		top: -38px;
		position: absolute;
		right: -100px;
	}
	
	/* map上 観光地ピン  */
	#mapArea .pin{
		width: 38px;
		position: absolute;
	}
	#mapArea .pin img{
		display: block;
	}
	#mapArea #po0 .pin{
		animation-delay: 1.5s;
	}
	#mapArea #pin01.pin{
		left: 37.7%;
		top: 41%;
		animation-delay: 0.3s;
	}
	#mapArea #pin02.pin{
		left: 52.5%;
		top: 59.5%;
		animation-delay: 0.6s;
	}
	#mapArea #pin03.pin{
		left: 46.3%;
		top: 61.0%;
		animation-delay: 0.8s;
	}
	#mapArea #pin04.pin{
		left: 48%;
		top: 61.6%;
		animation-delay: 1s;
	}
	#mapArea #pin05.pin{
		left: 75.2%;
		top: 60.7%;
		animation-delay: 1.2s;
	}
	#mapArea #pin06.pin{
		animation-delay: 0.5s;
	}
	
	
	/* map上 甑島 */
	#mapArea #islandmap{
		position: absolute;
		width: 394px;
		bottom: -220px;
		left: 10.5%;
	}
	#mapArea #islandmap .inner{
		position: relative;
	}
		#mapArea #islandmap #pin06.pin{
			left: 40%;
			top: 22.5%;
		}
		#mapArea #islandmap .icon{
			position: absolute;
			width: 276px;
			top: 11.5%;
			left: -23%;
			animation-delay: 1.4s;
		}

	
	/* map上 観光地 */
	#mapArea .point{
		position: absolute;
	}
		#mapArea .point .icon{
			animation-delay: 1.6s;
		}
	#mapArea #po01.point{
		top: 20.2%;
		left: 18.8%;
	}
		#mapArea #po01.point .icon{
			right: -178px;
			bottom: -17px;
		}
	#mapArea #po02.point{
		top: 46.7%;
		left: 13%;
	}
		#mapArea #po02.point .icon{
			right: -26px;
			top: -50px;
		}
	#mapArea #po03.point{
		top: 65.7%;
		left: 23.3%;
	}
		#mapArea #po03.point .icon{
			right: -37px;
			top: -32px;
		}
	#mapArea #po04.point{
		top: 30.5%;
		left: 56.2%;
	}
		#mapArea #po04.point .icon{
			left: -131px;
			bottom: -17px;
		}
	#mapArea #po05.point{
		top: 68.5%;
		left: 65.5%;
	}
		#mapArea #po05.point .icon{
			right: -115px;
			top: -40px;
		}
	#mapArea #po06.point{
		top: 98%;
		left: 26.5%;
	}
		#mapArea #po06.point .icon{
		}
	
	

	
	
	#mapArea .modal__content{
		width: 305px;
		height: 305px;
		box-sizing: border-box;
		border: 1px solid #1687bc;
		background-color: rgba(255,255,255,0.8);
		border-radius: 50%;
		transition-delay: 0.5s;
	}
		#mapArea #po03 .modal__content,
		#mapArea #po06 .modal__content{
			width: 345px;
			height: 345px;	
		}
	
	#mapArea .modal__inn{
		position: relative;
		height: 100%;
		width: 100%;
	}
		
	#mapArea .modal_box{
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		text-align: center;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content:center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		flex-direction: column;
		animation-delay: 1.2s;
	}
		#mapArea #po02 .modal_box{
			padding-top: 40px;
		}
		#mapArea #po04 .modal_box{
			padding-bottom: 20px;
		}
	#mapArea .modal_box h3{
		width: 222px;
		margin: 0 auto 20px;
	}
	#mapArea .modal_box .icon{
		position: absolute;
		width: 276px;
		right: -100px;
		bottom: 0;
	}
	
	/* map上 観光地とピンのライン */
	#mapArea .js-modal-close{
		background-color: #1687bc;
		position: absolute;
		
	}
			#mapArea .js-modal-close:after{
				content: '';
				display: block;
				position: absolute;
				background-color: #1687bc;
				transition-delay: 0.2s;
			}
		#mapArea #po01 .js-modal-close{
			border-right: 1px solid #fff;
			border-left: 1px solid #fff;
			width: 1px;
			height: 0px;
			bottom: -17px;
			right: 50%;
			margin-right: -1px;
			transition-duration: 0.3s;
			transition-delay: 1s;
		}
		#mapArea #po01 .on .js-modal-close{
			height: 16px;
		}
			#mapArea #po01 .js-modal-close:after{
				width: 0px;
				height: 1px;
				right: -113px;
				bottom: -1px;
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
				transition-duration: 0.5s;
				transition-delay: 0.5s;
			}
			#mapArea #po01 .on .js-modal-close:after{
				width: 113px;
			}
		#mapArea #po02 .js-modal-close{
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			height: 1px;
			width: 0px;
			top: 50%;
			margin-top: -1px;
			right: -180px;
			transition-duration: 0.3s;
			transition-delay: 1s;
		}
		#mapArea #po02 .on .js-modal-close{
			width: 179px;
		}
			#mapArea #po02 .js-modal-close:after{
				height: 0px;
				width: 1px;
				border-right: 1px solid #fff;
				border-left: 1px solid #fff;
				right: -1px;
				bottom: -53px;
				transition-duration: 0.5s;
				transition-delay: 0.5s;
			}
			#mapArea #po02 .on .js-modal-close:after{
				height: 53px;
			}
		#mapArea #po03 .js-modal-close{
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			height: 1px;
			width: 0px;
			top: 50%;
			margin-top: -1px;
			right: -21px;
			transition-duration: 0.3s;
			transition-delay: 1s;
		}
		#mapArea #po03 .on .js-modal-close{
			width: 20px;
		}
			#mapArea #po03 .js-modal-close:after{
				height: 0px;
				width: 1px;
				border-right: 1px solid #fff;
				border-left: 1px solid #fff;
				right: -1px;
				top: -182px;
				transition-duration: 0.5s;
				transition-delay: 0.5s;
			}
			#mapArea #po03 .on .js-modal-close:after{
				height: 182px;
			}
		#mapArea #po04 .js-modal-close{
			height: 0px;
			width: 1px;
			border-right: 1px solid #fff;
			border-left: 1px solid #fff;
			left: 50%;
			margin-left: -1px;
			bottom: -134px;
			transition-duration: 0.3s;
			transition-delay: 1s;
		}
		#mapArea #po04 .on .js-modal-close{
			height: 133px;
		}
			#mapArea #po04 .js-modal-close:after{
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
				height: 1px;
				width: 0px;
				bottom: -1px;
				left: -167px;
				transition-duration: 0.5s;
				transition-delay: 0.5s;
			}
			#mapArea #po04 .on .js-modal-close:after{
				width: 167px;
			}
		#mapArea #po05 .js-modal-close{
			height: 0px;
			width: 1px;
			border-right: 1px solid #fff;
			border-left: 1px solid #fff;
			left: 50%;
			top: -63px;
			transition-duration: 0.3s;
			transition-delay: 1s;
		}
		#mapArea #po05 .on .js-modal-close{
			height: 62px;
		}
		#mapArea #po06 .js-modal-close{
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
			height: 1px;
			width: 0px;
			top: 50%;
			margin-top: -1px;
			left: -50px;
			transition-duration: 0.3s;
			transition-delay: 1s;
		}
		#mapArea #po06 .on .js-modal-close{
			width: 49px;
		}
			#mapArea #po06 .js-modal-close:after{
				height: 0px;
				width: 1px;
				border-right: 1px solid #fff;
				border-left: 1px solid #fff;
				left: -1px;
				top: -178px;
				transition-duration: 0.5s;
				transition-delay: 0.5s;
			}
			#mapArea #po06 .on .js-modal-close:after{
				height: 178px;
			}
	/* modal 観光地 
	-------------------*/
	.modal {
		display: none;
	}
	
	

}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {

	#map{
		padding-bottom: 34vw;
		overflow: hidden;
	}
	
	/* tit
	-----------------------------------------------*/
		#map #mainArea{
			box-sizing: border-box;
			background: url("../img/mainimg.jpg") no-repeat center;
			background-size: cover;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			flex-direction: column;
			padding-top: 30px;
			height: 430px;
			width: 100%;
		}
			#map #mainArea h1{
				font-weight: 400;
				text-align: center;
			}
				#map #mainArea h1 span{
					display: block;
				}
					#map #mainArea h1 .eng_tit{
						text-align: center;
						font-size: 48px;
						color: #fff;
						line-height: 1;
						opacity: 0.8;
					}
					#map #mainArea h1 .sub{
						text-align: center;
						font-size: 25px;
						font-weight: 400;
						margin-top: 22px;
						color: #fff;
						letter-spacing: 2px;
					}
	
	/* map
	-----------------------------------------------*/
	/* map本体 */
	#mapArea{
		position: relative;
		background: url("../img/map_bg.jpg") repeat left;
		background-size: 800px 650px;
		height: 170vw;
	}
		#mapArea:after{
		}
	#mapArea #mapcontainer{
		background: url("../img/map_sp.png") no-repeat top center;
		background-size: cover;
		max-width: 1400px;
		max-height: 1448px;
		width: 100vw;
		height: 170vw;
		margin: 0 auto;
		box-sizing: border-box;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		z-index: 1;
	}
	#mapArea #mapcontainer .inner{
		position: relative;
		height: 100%;
		width: 100%;
	}
	/* map上 タイトル */
	#mapArea .tit{
		padding-top: 9vw;
		position: relative;
	}
		#mapArea .tit h2{
			width: 90%;
			margin: 0 auto;
			font-size: 0;
		}
			#mapArea .tit h2 .sub{

			}
			#mapArea .tit h2 .maintit{
				margin-top: 10px;
				width: 100%;
				display: block;
			}
			#mapArea .tit h2 .maintit .col{
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;				
			}
			#mapArea .tit h2 .maintit .col + .col{
				margin-top: 5px;
			}
				#mapArea .tit h2 .maintit img{
					display: block;
					height: 9vw;
					width: auto;
					float: left;
				}
		#mapArea .tit .lead{
			text-align: center;
			margin-top: 10px;
			line-height: 1.8;
			font-size: 13.5px;
		}
	
	/* map上 イラスト */
	#mapArea .illust{
		display: none;
		position: absolute;
		z-index: 2;
	}
	#mapArea .h_ill{
		width: 76px;
	}
	#mapArea .h_ill.h1{
		top: 32%;
		right: 16.7%;
	}
	#mapArea .h_ill.h2{
		top: 51.4%;
		right: 26%;
	}
	#mapArea .h_ill.h3{
		top: 76.7%;
		right: 32.5%;
	}
	#mapArea .h_ill.h4{
		top: 91.5%;
		right: 34.5%;
	}
	#mapArea .risu{
		width: 76px;
		top: 59.7%;
		right: 11.7%;
	}
	#mapArea .bycle{
		width: 104px;
		top: 99.4%;
		right: 24.7%;
	}
	
	
	/* map上 病院 */
	#mapArea #po0{
		position: absolute;
		width: 25px;
		margin-left: -12px;
		left: 51.5%;
		bottom: 26.7%;
	}
	#mapArea #po0 .inner{
		position: relative;
	}
	#mapArea #po0 .tit_h3{
		position: absolute;
		width: 110px;
	}
	#mapArea #po0 .pin{
		position: relative;
	}
	#mapArea #po0 .icon{
		width: 84px;
		bottom: -80px;
		position: absolute;
		right: -85px;
	}
	
	

	
	/* map上 観光地ピン  */
	#mapArea .pin{
		width: 25px;
		position: absolute;
	}
	#mapArea .pin img{
		display: block;
	}
	#mapArea #pin01.pin{
		margin-left: -12px;
		left: 28.5%;
		bottom: 47%;
		animation-delay: 0.2s;
	}
		#mapArea #tit01.pin_tit{
			left: 50%;
			margin-left: -62px;
			top: -25px;
		}
	#mapArea #pin02.pin{
		margin-left: -12px;
		left:39.5%;
		bottom: 30.5%;
		animation-delay: 0.4s;
	}
		#mapArea #tit02.pin_tit{
			left: -120px;
			top: 5px;
		}
	#mapArea #pin03.pin{
		margin-left: -12px;
		left: 43.3%;
		bottom: 28%;
		animation-delay: 0.6s;
	}
		#mapArea #tit03.pin_tit{
			left: -105px;
			bottom: -10px;
		}
	#mapArea #pin04.pin{
		margin-left: -12px;
		left: 49%;
		bottom: 31.6%;
		animation-delay: 0.8s;
	}
		#mapArea #tit04.pin_tit{
			left: 50%;
			margin-left: -62px;
			bottom: 40px;
		}
	#mapArea #pin05.pin{
		margin-left: -12px;
		left: 80.2%;
		bottom: 30.7%;
		animation-delay: 1s;
	}
		#mapArea #tit05.pin_tit{
			left: 50%;
			margin-left: -62px;
			bottom: 40px;
		}
	#mapArea #pin06.pin{
		animation-delay: 1.2s;
	}
		#mapArea #tit06.pin_tit{
			left: 31.2%;
			bottom: 36.7%;
			animation-delay: 1.2s;
		}
	#mapArea #po0 .pin{
		animation-delay: 1.6s;
	}
	#mapArea .pin .inner{
		position: relative;
	}
	
	
	/* map上 観光地名称  */
	#mapArea .pin_tit{
		width: 124px;
		position: absolute;
	}
	#mapArea .pin_tit img{
		display: block;
	}
	
	
	
	
	
	
	
	
	
	
	/* map上 甑島 */
	#mapArea #islandmap{
		position: absolute;
		max-width: 394px;
		width: 50vw;
		bottom: -20%;
		left: 5%;
	}
	#mapArea #islandmap .inner{
		position: relative;
	}
		#mapArea #islandmap #pin06.pin{
			left: 40%;
			top: 22.5%;
		}
		#mapArea #islandmap .icon{
			position: absolute;
			max-width: 276px;
			width: 80%;
			top: -0.5%;
			left: -27%;
			animation: none;
			opacity: 1;
		}

	
	/* modal 観光地 
	-------------------*/
	.modal {
		display: none;
		height: calc(100vh - 65px);
		position: fixed;
		top: 65px;
		left: 0;
		width: 100%;
		z-index: 100;
		box-sizing: border-box;
	}
		.modal__bg {
			background: rgba(0, 140, 183,0.9);
			height: 100vh;
			position: absolute;
			width: 100%;
		}
			.modal__content {
				left: 50%;
				position: absolute;
				top: 50%;
				-webkit-transform: translate(-50%,-55%);
				transform: translate(-50%,-55%);
				width: 90%;
				max-width: 840px;
				font-size: 16px;
				max-height: 80%;
				overflow-y: scroll;
				-ms-overflow-style: none;
				scrollbar-width: none;
				padding-top: 60px;
				font-weight: bold;
				box-sizing: border-box;
			}
				.modal__content .modal__inn {
					position: relative;
				}
					
			.modal__content::-webkit-scrollbar {
				display:none;
			}
					.modal__content .modal_box {
						padding: 40px 30px 30px;
						background: #fff;
						color: #1687bc;
					}
					
							.modal__content .modal_box .result{
								text-align: center;
								font-size: 22px;
							}
							.modal__content .modal_box h3 {
								text-align: center;
								width: 80%;
								margin: 0 auto;
								font-weight: bold;
							}
								.modal__content .modal_box .txt {
									line-height: 1.8;
									margin-top: 20px;
									font-weight: 400;
									text-align: justify;
								}
								.modal__content .modal_box .txt br{
									display: none;
								}
	.modal__content .modal_box .icon{
		width: 100%;
		margin: 20px auto 0;
		max-width: 276px;
	}
			.modal__content .js-modal-close {
				width: 50px;
				height: 50px;
				position: absolute;
				top: -60px;
				right: 0;
				cursor: pointer;
				transition: 0.4s;
			}
			.modal__content .js-modal-close:before,
			.modal__content .js-modal-close:after{
				content: '';
				display: block;
				position: absolute;
				height: 3px;
				width: 100%;
				background-color: #fff;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
				.modal__content .js-modal-close:hover{
					transform: rotate(180deg);
				}
			.modal__content .js-modal-close:before{
				transform: rotate(-45deg);
			}
			.modal__content .js-modal-close:after{
				transform: rotate(45deg);
			}
	
				.modal__content .js-modal-close:hover {
				}

	
	.of_h {
		overflow: hidden;
	}
	
	/* map上 観光地とピンのライン */
	


}