@charset "utf-8";
/*-----------------------------------

	base

	-----------------------------------*/
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font-family: 'Noto Sans JP', sans-serif;
	}
	img {
		vertical-align: bottom;
		max-width: 100%;
		height: auto;
	}
	a, a:link, a:visited {
		text-decoration: none;
		cursor: pointer;
		color: inherit;
	}
	h2{
		font-size: 45px;
		color: #fff;
		text-align: center;
		line-height: 50px;
		height: auto;
		margin: 0 auto;
		padding: 8px;
		box-sizing: border-box;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius: 10px;
	}
	h3{
		font-size: 25px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		margin-bottom: 10px;
		padding: 10px;
		box-sizing: border-box;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius: 10px;
	}
	h4 {
		font-size: 18px;
		margin-bottom: 10px;
	}
	@media screen and (max-width: 960px) {
		h2{
			font-size: 30px;
		}
		img {
			width: 100%;
			height: auto;
		}
	}
	.left {
		float: left !important;
	}
	#wrapper {
		margin: 0;
		padding: 0;
		text-align: left;
		position: relative;
		overflow: hidden;
	}
	.container{
		width: 90%;
		max-width: 1000px;
		position: relative;
		margin: 0 auto;
	}
	ul{
		list-style: none;
	}
	.osusume_bg {
		background: #0099c6;
	}
	.sumida_bg {
		background: #00a199;
	}
	.oofunato_bg {
		background: #182987;
	}
	.rikuzentakata_bg {
		background: #f29600;
	}
	.kesennuma_bg {
		background: #ec7460;
	}
	.blue_bg {
		background: #0069b2;
	}
	.green_bg {
		background: #009e41;
	}
	.orange_bg {
		background: #f38f1e;
	}
	.lightblue_bg {
		background: #3fa5f1;
	}
	.red_bg {
		background: #bd272d;
	}
	.sp {
		display: none;
	}
	@media screen and (max-width: 960px) {
		.pc {
			display: none;
		}
		.sp {
			display: inline-block;
		}
	}
/*-----------------------------------

	header

	-----------------------------------*/
	header{
		padding: 40px 0;
	}
/*-----------------------------------

	title

	-----------------------------------*/
	#title{
		padding-bottom: 40px;
	}
/*-----------------------------------

	plan

	-----------------------------------*/
	#plan p{
		text-align: center;
		font-size: 21px;
		line-height: 40px;
	}
	#plan .alert{
		color: #fff;
		margin-top: 10px;
		line-height: 30px;
	}
	#plan a img{
		transition:  0.4s ease-out;
		-o-transition:  0.4s ease-out; /* opera */
		-moz-transition:  0.4s ease-out; /* firefox */
		-webkit-transition:  0.4s ease-out; /* chrome, safari */
		-ms-transition:  0.4s ease-out; /* ie */
	}
	#plan a:hover img {
		opacity: 0.8;
		filter: alpha(opacity=80);
		-ms-filter: "alpha(opacity=80)";
	}
	@media screen and (max-width: 960px) {
		#plan p{
			text-align: center;
			font-size: 15px;
			line-height: 40px;
		}
		#plan .alert{
			color: #fff;
			margin-top: 10px;
			line-height: 25px;
			padding:5px 0;
		}
	}
/*-----------------------------------

	menu

	-----------------------------------*/
	#menu div{
		padding: 60px 0 30px 0;
	}
	#menu ul{
		width: 1008px;
		margin-right: -8px;
		overflow: hidden;
	}
	#menu li{
		margin-right: 8px;
		float: left;
	}
	#menu a img{
		transition:  0.4s ease-out;
		-o-transition:  0.4s ease-out; /* opera */
		-moz-transition:  0.4s ease-out; /* firefox */
		-webkit-transition:  0.4s ease-out; /* chrome, safari */
		-ms-transition:  0.4s ease-out; /* ie */
	}
	#menu a:hover img {
		opacity: 0.8;
		filter: alpha(opacity=80);
		-ms-filter: "alpha(opacity=80)";
	}
	@media screen and (max-width: 960px) {
		#menu div{
			padding: 30px 0;
		}
		#menu ul{
			width: 101%;
			margin-right: -1%;
			overflow: hidden;
		}
		#menu li{
			width: 49%;
			margin-right: 1%;
			margin-bottom: 1%;
			float: left;
		}
	}
/*-----------------------------------

	map

	-----------------------------------*/
	#map .map_list{
		margin-top: 10px;
	}
	#map .map_img{
		margin-top: 10px;
		position: relative;/*相対配置*/
	}
	.point {
		position: absolute;/*絶対配置*/
		margin: 0;
		padding: 0;
		z-index: 100;
		width: auto;
		height: auto;
	}
	.point img{
		display: block;
	}
	.point-1{
    top: 34.3%;
    left: 66.3%;
	max-width: 25%;
	}
	.point-2{
    top: 26.9%;
    left: 8.5%;
    max-width: 15%;
	}
	.point-3 {
	top: 50%;
    left: 41.4%;
    max-width: 10%;
	}
	.point-4{
	top: 76.2%;
    left: 27.5%;
    max-width: 11%;
	}
	.point-5{
    top: 41.2%;
    left: 55%;
    max-width: 15%;
	}
	.point-6{
	top: 43.2%;
    left: 39.8%;
    max-width: 10%;
	}
	.point-7{
    top: 60.5%;
    left: 33.7%;
    max-width: 26%;
	}
	.point-8{
	top: 63.8%;
    left: 12.5%;
    max-width: 21%;
	}
	.point-9{
    top: 89.6%;
    left: 25.6%;
    max-width: 17%;
	}
	.point-10{
	top: 95.6%;
    left: 4.4%;
    max-width: 19%;
	}
	/** デフォルトの大きさは1.0倍 */
.bound-img-wrap img{
  transform: scale(1);
}
/** 画像ホバー時のアニメを設定 */
.bound-img-wrap img:hover{
  -webkit-animation: bound 1s ease-in; 
  -moz-animation:    bound 1s ease-in; 
  animation: bound 1s ease-in;
}

/** アニメーションの定義 */
@keyframes bound {
  /** 開始時は１倍の大きさ */
  from { transform: scale(1); }
  /** 0%～25%にかけて1.15倍する */
  25% { transform: scale(1.15); }
  /** 25%～50%にかけて0.95倍する */
  50% { transform: scale(0.95); }
  /** 50%～75%にかけて1.05倍する */
  75% { transform: scale(1.05); }
  /** 終了時は元の大きさに戻す */
  to { transform: scale(1); }
}
/*-----------------------------------

	spot

	-----------------------------------*/
	#spot .spot_list{
		padding-top: 30px;
		width: 100%;
		max-width: 1000px;
	}
	#spot .spot_box{
		width: 490px;
		padding: 25px 30px;
		box-sizing: border-box;
		border: 2px solid #c8c8c8;
		position: relative;
		margin-top: 20px;
	}
	#spot .spot_number{
		background-color: #fff;	
		height: 30px;
		width: 30px;
		display:  inline-block;
		border-radius:50%;
		line-height: 30px;
		text-align:center;
		z-index: 100;
		font-size: 20px;
		font-weight:bold;
		color: #000;
		margin-right: 5px;
	}
	#spot .btn_style {
		display: block;
		width: 430px;
		line-height: 50px;
		font-size: 25px;
		text-align: center;
		color: #fff;
		margin-top: 10px;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		-ms-border-radius: 12px;
		-o-border-radius: 12px;
		border-radius: 12px;
		position: absolute;
		bottom: 30px;
		transition:  0.4s ease-out;
		-o-transition:  0.4s ease-out; /* opera */
		-moz-transition:  0.4s ease-out; /* firefox */
		-webkit-transition:  0.4s ease-out; /* chrome, safari */
		-ms-transition:  0.4s ease-out; /* ie */
	}
	#spot .btn_style::after {
		opacity: 0;
		position: absolute;
		right: 5%;
		top: 50%;
		content: "\f054";
		margin: -10px 0 0;
		line-height: 20px;
		font-family: "FontAwesome";
		font-size: 16px;
		transition:  0.4s ease-out;
		-o-transition:  0.4s ease-out; /* opera */
		-moz-transition:  0.4s ease-out; /* firefox */
		-webkit-transition:  0.4s ease-out; /* chrome, safari */
		-ms-transition:  0.4s ease-out; /* ie */
	}
	#spot .btn_style:hover {
		color: #fff;
		opacity: 0.8;
	}

	#spot .btn_style:hover::after {
		opacity: 1;
	}
	#spot .lead{
		font-size: 14px;
		color: #0068b6;
		text-align: center;
		line-height: 15px;
		width: 430px;
		margin: 10px 0 5px 0;
	}
	#spot .spot_text{
		font-size: 15px;
		line-height: 23px;
		width: 430px;
		padding: 10px 0;
	}
	#spot .height730 {
		height: 730px;
	}
	#spot .height600 {
		height: 600px;
	}
	#spot p{
		font-size: 15px;
		line-height: 23px;
		width: 430px;
	}
	.spot_left{
		margin-right: 10px;
	}
	.spot_right{
		margin-left: 10px;
	}
	@media screen and (max-width: 960px) {
		#spot h2 img{
			width: 70%;
			height: auto;
		}
		#spot .spot_box{
			width: 100%;
			padding-bottom: 110px;
		}
		#spot .btn_area {
			width: 100%;
			position: relative;
		}
		#spot .btn_style {
			width: 100%;
			top: 20px;
			bottom:auto;
		}
		#spot .lead{
			font-size: 12px;
			width: 100%;
		}
		#spot .spot_text{
			font-size: 13px;
			line-height: 21px;
			width: 100%;
		}
		#spot .height730 , #spot .height600{
			height: auto;
		}
		.spot_left{
			margin-right: 0;
		}
		.spot_right{
			margin-left: 0;
		}
	}
/*-----------------------------------

	clearfix

	-----------------------------------*/
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
/*-----------------------------------

	store

	-----------------------------------*/
	#store{
		padding: 50px 0 100px 0;
	}
	#store .flex{
		max-width: 960px;
		margin: 0 auto;
		padding: 40px 0;
		border-bottom: 1px solid #c8c8c8;
	}
	#store img{
		max-width: 100%;
		display: block;
		margin: 0 auto;
	}
	@media screen and (min-width:960px) {  
		#store .flex{
			display:flex;
			flex-wrap:nowrap;
			justify-content:space-between;
		}
		.store_list+.store_list{
			margin-left:1.0em;
		}
	}
	#store .btn_style {
		display: block;
		width: 270px;
		line-height: 50px;
		font-size: 28px;
		text-align: center;
		padding: 1px 0;
		color: #fff;
		background: #039a42;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		-ms-border-radius: 12px;
		-o-border-radius: 12px;
		border-radius: 12px;
		transition:  0.4s ease-out;
		-o-transition:  0.4s ease-out; /* opera */
		-moz-transition:  0.4s ease-out; /* firefox */
		-webkit-transition:  0.4s ease-out; /* chrome, safari */
		-ms-transition:  0.4s ease-out; /* ie */
	}
	#store .btn_style::after {
		opacity: 0;
		position: absolute;
		right: 5%;
		top: 50%;
		content: "\f054";
		margin: -10px 0 0;
		line-height: 20px;
		font-family: "FontAwesome";
		font-size: 16px;
		transition:  0.4s ease-out;
		-o-transition:  0.4s ease-out; /* opera */
		-moz-transition:  0.4s ease-out; /* firefox */
		-webkit-transition:  0.4s ease-out; /* chrome, safari */
		-ms-transition:  0.4s ease-out; /* ie */
	}
	#store .btn_style:hover {
		background: #F38F1E;
	}
	@media screen and (max-width:960px) {  
		#store .btn_style {
		width: 100%;
		margin-top: 20px;
		}
	}
/*-----------------------------------

	footer

	-----------------------------------*/
	footer{
		padding: 60px 0;
		background: #0099c6;
		text-align: center;
		color: #fff;
	}
	.welcab{
		height: 50px;
		border:solid #ffff;
		border-width:1px 0;		
	}
	.welcab img{
		margin:10px 0;
	}
	.copy{
		font-size: 20px;
		margin-top: 10px;
	}
	@media screen and (max-width: 960px) {
		.copy{
			font-size: 15px;
		}
	}

	#page-top{
		position:fixed;
		right:50px;
		bottom:50px;
		font-size: 18px;
	}

	#page-top a{
		display: block;
		position: relative;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #0099c6;
		color: #fff;
		border: 1px solid;
		border-color:  #fff;
	}
	#page-top i{
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translateY(-40%) translateX(-50%);
	}

	#page-top a:hover{
		background-color: #0099c6;
	}
	@media screen and (max-width: 680px) {
		#page-top{
			right:20px;
			bottom:50px;
		}
	}