@charset "utf-8";
/* ******************************************************************
 *	File name		: top.css
 *	Summary			: top css
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   login btn
----------------------------------------------------------------- */

#login_btn{
	position:absolute;
	top:3px;
	right:0px;
	width:220px;
	}
	#login_btn p{
		width:100%;
		margin:0 0 5px;
		font-size:0.87rem;
}
#login_btn #loginbox{
	width:100%;
	}
	#login_btn #loginbox a{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		width:220px;
		height:42px;
		text-decoration:none;
		background:#A0C94F;
		color:#FFF;
		transition-duration:0.5s;
		}
		#login_btn #loginbox a:hover{
			background:#73BE59;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#login_btn{
		position:absolute;
		top:3px;
		right:20px;
		width:150px;
		}
		#login_btn p{
			width:100%;
			margin:0 0 0px;
			font-size:0.6rem;
	}
	#login_btn #loginbox{
		width:100%;
		}
		#login_btn #loginbox a{
			display:-webkit-flex;
			display:flex;
			justify-content:center;
			align-items:center;
			width:100%;
			height:42px;
			text-decoration:none;
			background:#A0C94F;
			color:#FFF;
			transition-duration:0.5s;
			}
			#login_btn #loginbox a:hover{
				background:#73BE59;
	}
}

/* -----------------------------------------------------------------
   main
----------------------------------------------------------------- */

#main_action_disp{
	position:relative;
	width:100%;
	height:740px;
	margin:0 0 3px;
	background:url(../../image/base/bg.png) no-repeat center 0;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#main_action_disp{
		width:100%;
		height:auto;
		padding-top:146%;
		margin:0 0 3px;
		background:url(../../image/base/bg_sp.png) no-repeat right 0;
		background-size:contain;
	}
}
#main_img{
	position:absolute;
	top:11px;
	left:calc(50% - 672px);
	width:1000px;
	height:485px;
	z-index:-1;
	}
	#main_img ul{
		position:relative;
		width:743px;
		height:485px;
		list-style:none;
		}
		#main_img ul li{
			position:absolute;
			top:0px;
			left:0px;
		}
		#main_img ul li:nth-of-type(1){animation:fade_photo 15s ease 0s both infinite;}
		#main_img ul li:nth-of-type(2){animation:fade_photo 15s ease 5s both infinite;}
		#main_img ul li:nth-of-type(3){animation:fade_photo 15s ease 10s both infinite;}

@keyframes fade_photo{
	0%   {opacity:0;}
	5%   {opacity:1;}
	33%  {opacity:1;}
	38%  {opacity:0;}
	100% {opacity:0;}
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#main_img{
		position:absolute;
		top:0px;
		left:-13%;
		width:90%;
		height:auto;
		z-index:-1;
		}
		#main_img ul{
			position:relative;
			width:100%;
			height:auto;
			list-style:none;
			}
			#main_img ul li{
				position:absolute;
				top:0px;
				left:0px;
		}
}

/* -----------------------------------------------------------------
   main_story
----------------------------------------------------------------- */

#main_story{
	position:relative;
	width:1000px;
	min-height:740px;
	max-width:100%;
	margin:0 auto;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#main_story{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		min-height:0;
		max-width:100%;
		margin:0 auto;
	}
}

#letsgo_txt{
	position:absolute;
	top:237px;
	left:calc(50% - 87px);
	width:402px;
	height:170px;
	animation:letsgo_txt 2.5s linear 0s both 1;
	}
	#letsgo_txt img{
		position:absolute;
		top:0px;
		left:0px;
		width:401px;
		max-width:none;
}
@keyframes letsgo_txt{
	0%   {width:0px;}
	100% {width:402px;}
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#letsgo_txt{
		position:absolute;
		top:21.5%;
		right:2%;
		left:auto;
		width:70%;
		height:auto;
		animation:none;
		}
		#letsgo_txt img{
			position:relative;
			width:100%;
	}
}
#ms_map{
	position:absolute;
	bottom:64px;
	right:-5px;
	width:320px;
	height:352px;
	background:url(../../image/top/miyagi.png) no-repeat left top;
	}
	#ms_map #ms_youkoso{
		position:absolute;
		top:114px;
		left:-113px;
		width:260px;
		height:62px;
	}
	#ms_map #ms_sendai{
		position:absolute;
		top:192px;
		left:-138px;
		width:308px;
		height:57px
	}
	#ms_map #ms_akiu_pre{
		position:absolute;
		top:191px;
		left:-153px;
		width:308px;
		height:57px
}
#ms_map a *{
	transition-duration:0.5s;
	}
	#ms_map a:hover *{
		opacity:0.7;
}
/* --- responsive --- */
@media screen and (max-width:767px){
	#ms_map{
		position:absolute;
		bottom:auto;
		top:40%;
		right:3%;
		width:60%;
		height:45%;
		background:url(../../image/top/miyagi.png) no-repeat left top;
		background-size:cover;
		}
		#ms_map #ms_youkoso{
			position:absolute;
			top:18%;
			left:-35%;
			width:70%;
			height:auto;
		}
		#ms_map #ms_sendai{
			position:absolute;
			top:48%;
			left:-52%;
			width:100%;
			height:auto;
		}
		#ms_map #ms_akiu_pre{
			position:absolute;
			top:48%;
			left:-52%;
			width:100%;
			height:auto;
		}
		#ms_map p img{
			width:100%;
			height:auto;
		}
}

/* --- responsive --- */
@media screen and (max-width:767px){
}

/* -----------------------------------------------------------------
   main_detail
----------------------------------------------------------------- */

#main_detail{
	position:relative;
	width:1000px;
	max-width:100%;
	margin:0 auto;
}
#main_detail p{
	color:#75533A;
}

/* -----------------------------------------------------------------
   about
----------------------------------------------------------------- */

#about{
	position:relative;
	width:100%;
	margin:0 0 38px;
	text-align:left;
	}
	#about p{
		font-weight:normal;
		font-size:0.87rem;
		text-indent:-0.5rem;
		color:#75533A;
		line-height:1.6;
	}
	#about p strong{
		font-weight:bold;
		font-size:0.9rem;
		color:#000;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#about{
		margin:0 0 20px;
		padding:0 20px;
		}
		#about p{
			font-size:0.64rem;
			text-indent:0rem;
		}
		#about p strong{
			font-size:0.84rem;
	}
}

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

#news{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	border:1px solid #A0C94F;
	width:860px;
	min-height:35px;
	max-width:100%;
	margin:0 auto 40px;
	padding:7px 5px 7px 195px;
	}
	#news h2{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		top:0px;
		left:0px;
		width:180px;
		height:100%;
		font-weight:bold;
		font-size:1.00rem;
		text-align:center;
		background:#A0C94F;
		color:#FFF;
	}
	#news ul{
		position:relative;
		list-style:none;
		}
		#news ul li{
			margin-bottom:7px;
			font-size:0.84rem;
			line-height:1.35;
		}
		#news ul li:last-child{
			margin-bottom:0px;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#news{
		width:calc(100% - 40px);
		padding:45px 5px 5px 5px;
		}
		#news h2{
			width:100%;
			height:40px;
		}
		#news ul li{
			font-size:0.6rem;
	}
}


/* -----------------------------------------------------------------
   contents_list
----------------------------------------------------------------- */

#contents_list{
	position:relative;
	text-align:center;
	}
	#contents_list::before{
		content:" ";
		position:absolute;
		top:19px;
		left:0px;
		width:100%;
		height:1px;
		background:#51A351;
		z-index:0;
	}
	#contents_list h2{
		display:inline-block;
		position:relative;
		width:auto;
		height:40px;
		margin:0 auto 0px;
		padding:0 20px;
		font-weight:bold;
		font-family: 'Zen Maru Gothic', sans-serif;
		font-size:1.6rem;
		text-align:center;
		color:#51A351;
		background:#FFF;
		line-height:45px;
		z-index:1;
}

#contents_list section.item_box{
	position:relative;
	width:100%;
	margin-bottom:0px;
	padding:20px 0;
	text-align:left;
	border-bottom:1px solid #51A351;
	}
	#contents_list section:nth-of-type(1){
		padding:0px 0 20px;
	}

	#contents_list .item_box .nopay_category,
	#contents_list .item_box .pay_category{
		position:relative;
		width:100%;
		margin-bottom:5px;
		}
		#contents_list .item_box .nopay_category{
			color:#DD6F3E;
		}
		#contents_list .item_box .pay_category{
			color:#8FCA1A;
	}

	#contents_list .item_box .item_thumb{
		position:absolute;
		left:0px;
		width:233px;
		}
		#contents_list .item_box .item_thumb a{
			transition-duration:0.5s;
		}
		#contents_list .item_box .item_thumb a:hover{
			opacity:0.8;
	}

	#contents_list .item_box .item_detail{
		min-height:140px;
		padding-left:260px;
	}
	#contents_list .item_box .item_detail dl dt{
		margin-bottom:7px;
		font-family: 'Zen Maru Gothic', sans-serif;
		font-size:1.4rem;
		color:#8E6756;
	}
	#contents_list .item_box .item_detail dl dd{
		margin-bottom:15px;
		padding-bottom:15px;
		font-size:0.84rem;
		border-bottom:1px dashed #8E6756;
		line-height:1.35;
		}
		#contents_list .item_box .item_detail dl dd:last-child{
			margin-bottom:0px;
			border-bottom:none;
	}
	#contents_list .item_box .item_detail dl dd .item_photo{
		position:relative;
		margin:10px 0 0;
		list-style:none;
		}
		#contents_list .item_box .item_detail dl dd .item_photo li{
			display:inline-block;
			width:160px;
			height:auto;
			margin-right:20px;
	}

/* --- responsive --- */
@media screen and (max-width:767px){
	#contents_list section.item_box{
		padding:20px 20px;
		}
		#contents_list section:nth-of-type(1){
			padding:0px 20px 20px;
		}

		#contents_list .item_box .nopay_category,
		#contents_list .item_box .pay_category{
			text-align:center;
		}

		#contents_list .item_box .item_thumb{
			position:relative;
			margin:0 auto 10px;
			text-align:center;
		}

		#contents_list .item_box .item_detail{
			padding-left:0px;
		}
		#contents_list .item_box .item_detail dl dd .item_photo{
			width:100%;
			text-align:center;
			}
			#contents_list .item_box .item_detail dl dd .item_photo li{
				width:320px;
				max-width:100%;
				margin:0 0 5px;
	}
}


#btn_ec_site{
	position:relative;
	width:100%;
	margin:30px 0;
	text-align:center;
	}
	#btn_ec_site a{
		display:inline-block;
		padding:20px 40px;
		font-family: 'Zen Maru Gothic', sans-serif;
		font-size:1.3rem;
		text-decoration:none;
		background:#A0C84E;
		color:#FFF;
		transition-duration:0.5s;
	}
	#btn_ec_site a:hover{
		background:#73BE59;
}

/* --- responsive --- */
@media screen and (max-width:767px){
	#btn_ec_site a{
		padding:10px 30px;
		font-weight:bold;
		font-size:1.0rem;
	}
}