@charset "UTF-8";

/*======================================
	トップページ
=======================================*/

#globalmenu {
	margin-bottom: 0;
}

/* スライダー */
#top_image {
	margin-bottom: 1.5em;
}
.swiper-container { 
	width: 100%;
	margin: 0 auto;
	padding-bottom: 50px;
} 
.swiper-slide {
	background: #fff;
	max-width:960px;
	width: 100%;
}
.swiper-slide img{
	width:100%;
	opacity: 0.5;
}
.swiper-slide-active img{
	opacity: 1.0;
	position:relative !important;
}
.swiper-button-black{
	display:none;
}

/* box */
main .box {
	margin-bottom: 1.5em;
}

/* お知らせ */
#sec_news {
	background-color: #dce5ec;
	border-color: #62b6e2;
	padding: 2.5% 3% 3%;
}
#sec_news header {
	position: relative;
}
#sec_news h2 {
	margin-bottom: 0.5em;
	width: 140px;
}
#sec_news_more {
	position: absolute;
	bottom: 0.3em;
	right: 0;
	max-width:100px;
}
#sec_news ul {
/*
	overflow: scroll;
*/
}
#sec_news li {
	background-color: #fff;
	border-bottom: dotted 1px #62b6e2;
	padding: 0.8em 1em;
}
#sec_news li:last-child {
	border-bottom: none;
}
#sec_news span.icon {
	color: #fff;
	padding: 0 0.5em;
	margin-left: 0.5em;
	font-size: 85%;
}
#sec_news span.icon1 {
	background-color: #0068a4;
}
#sec_news span.icon2 {
	background-color: #deb800;
}
#sec_news span.icon3 {
	background-color: #060;
}
#sec_news .p_date {
	color:#666;
	font-size:90%;
	margin-bottom: 0.3em;
}

/* 庄内町とは？ */
#sec_about {
	margin-bottom: 1.5em;
}

/* 庄内町観光PR動画 */
#video{
	background: #fff;
	border: solid 1px #724040;
	margin-top: 20px;
	margin-left: 7px; /* 左余白調整 */
	padding-bottom: 10px;
}
#video > h3{
	font-size: 125%;
	color: #fff;
	background: #724040;
	padding: 7px 0;
	text-align: center;
}
#video > h3::before{
	content: url(../img/top/mk_video.png);
	margin-right: 7px;
	vertical-align: middle;
}
.video_wrap{
	position:relative;
	width:97%; /* 動画左右余白調整 */
	margin: 10px auto; /* 動画上下余白調整 */
	padding-top:56.25%;
}
.video_wrap iframe{
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	margin: auto;
	width: 100% !important;
	height: 100% !important;
}


/* 観光スポット検索 */
#sec_spot_search {
	padding: 3%;
}
#sec_spot_search h2 {
	margin-bottom: 0.5em;
}
#sec_spot_search h2 img {
	width: 200px;
}
#spot_search_category {
	background-color: #f5eee5;
	border-color: #d2bc9e;
}
#spot_search_purpose {
	background-color: #f4e2ea;
	border-color: #db79a1;
}
#spot_search_area {
	border-color: #78b883;
	background-color: #e2efcc;
}
#spot_search_category,
#spot_search_purpose,
#spot_search_area
{
	padding: 3%;
}
#sec_spot_search h3 {
	margin-bottom: 0.2em;
}
#sec_spot_search h3 img {
	width: 200px;
}

/* ジャンルで探す */
#spot_search_category li {
	float: left;
	width: 46%;
	margin: 4px 1%;
	padding:5px 0;
} 
#spot_search_category li.list_r {
	float: right;
} 
#spot_search_category li a {
	display: block;
	padding: 0 4px;
}

/* 目的別に探す */
#spot_search_purpose li {
	float: left;
	width: 46%;
	margin: 4px 1%;
	padding:5px 0;
} 
#spot_search_purpose li.list_r {
	float: right;
} 
#spot_search_purpose li a {
	display: block;
	padding: 0 4px;
}

/* エリアで探す */
#spot_search_area li {
	float: left;
	width: 46%;
	margin: 4px 1%;
	padding:5px 0;
} 
#spot_search_area li.list_r {
	float: right;
} 
#spot_search_area li a {
	display: block;
	padding: 0 4px;
}



/* 特集ページ */
#sec_special {
	padding: 3%;
}
#sec_special h2 {
	margin-bottom: 1em;
}
#sec_special h2 img {
	width: 200px;
}

#sec_special li {
	margin-bottom: 1em;
}
#sec_special li:last-child {
	margin-bottom: 0;
}
#sec_special li img {
	margin-bottom: 0.5em;
}
#sec_special li p {
	background: url(../img/arrow2.png) no-repeat left 2px;
	background-size:16px;
	padding-left:20px;
}
/* 2列 */
.sec_special_box{
	width: 48.5%;
	float: left;
	margin: 2% 3% 3em 0;
}
.sec_special_box:nth-child(2n) {
	margin-right: 0;
}
.sec_special_box:nth-child(2n+1) {
	clear: left;
}


/* イベント */
#sec_event {
	margin-bottom: 1.5em;
}

/* モバイルサイト */
#sec_mobile {
	display: none;
	margin-bottom: 1.5em;
}

/* SNSリンク */
#sec_sns {
	margin-bottom: 1.5em;
}
#sec_sns > ul li{
	width: 48%;
	float: left;
	margin-right: 4%;
	text-align: center;
}
#sec_sns > ul li:last-child{
	margin-right: 0;
}

/* facebook */
#sec_facebook {
	margin-bottom: 1.5em;
	border:2px solid #3a4887;
	background-color:#fff;
}
.fb_iframe_widget,
.fb_iframe_widget iframe,
.fb_iframe_widget span{
	margin:0 auto;
	width: 100% !important;
	max-height:340px;
}

._2p3a{
	margin:0 auto !important;
}



/* バナー群１ */
#sec_banner1 {
	margin-bottom: 1.5em;
}
#sec_banner1 li {
	width:48%;
	float:left;
	margin:0 1% 1em 1%;
}

/* バナー群２ */
/* #sec_banner2 {
	display: none;
} */
#sec_banner2 li {
	width:48%;
	float:left;
	margin:0 1% 1em 1%;
	text-align: center;
}



/*======================================
	タブレット
=======================================*/
@media print,screen and (min-width: 600px) {

	#globalmenu {
		margin-bottom: 0.5em;
	}

	/* ２カラム */
	#sec_news {
		width: 45%;
		float: left;
		margin-left: 0;
		margin-right: 0;
	}
	#sec_about {
		width: 49%;
		float: right;
	}
	#sec_spot_search {
		clear: both;
	}
	
	/* スライダー */
	.swiper-button-black{
		display:block;
		background-color:#fff;
		border-radius: 50%;
		background-size:8px !important;
		padding:0 8px;
		opacity: 0.7;
	}

	/* お知らせ */
	#sec_news {
		padding: 2%;
	}

	/* 観光スポット検索 */
	#sec_spot_search {
		padding: 2%;
		overflow: hidden;
	}
	#sec_spot_search h2 img {
		width: 25%;
	}
	#sec_spot_search h3 img {
		width: 100%;
		max-width: 200px;
		margin-bottom: 0.5em;
	}
	#spot_search_category,
	#spot_search_purpose,
	#spot_search_area
	{
		width: 29.2%;
		text-align: center;
		padding: 2% 1%;
		margin-bottom:0.5em;
	}
	#spot_search_category {
		float: left;
		margin-right: 3%;
	}
	#spot_search_purpose {
		float: left;
	}
	#spot_search_area {
		float: right;
		padding-bottom: 13.39%;
		background: url(../img/top/area_back.png) no-repeat center bottom 10px;
		background-size: 96%;
		background-color: #e2efcc;
	}

	/* 特集ページ */
	#sec_special {
		clear: both;
		padding: 2%;
	}
	#sec_special h2 {
		margin-bottom: 0.5em;
	}
	#sec_special h2 img {
		width: 18%;
	}
	/* 
	#sec_special li {
		float: left;
		margin-bottom: 0;
		width: 48.5%;
		margin-right: 3%;
		font-size:90%;
	}
	#sec_special li:last-child {
		margin-right: 0;
	}
*/
	#sec_event,
	#sec_mobile,
	#sec_sns,
	#sec_facebook {
		width: 48.5%;
	}

	/* イベント */
	#sec_event {
		float: left;
	}

	/* モバイルサイト */
	#sec_mobile {
		display: block;
		float: left;
		margin-bottom: 1.5em;
	}
	
	/* SNSリンク */
	#sec_sns {
		display: block;
		float: left;
		margin-bottom: 1.5em;
	}
	

	/* facebook */
	#sec_facebook {
		float: right;
	}


	/* バナー群１ */
	#sec_banner1 {
		clear: both;
	}
	#sec_banner1 ul {
		width: 100%;
		display: table;
	}
	#sec_banner1 li {
		float: left;
		width: 24%;
		margin-left:0;
		margin-right: 1.333%;
		/*width: 31.333%;
		margin-right: 3%;*/
		margin-top: 2em;
	}
	#sec_banner1 li:last-child {
		margin-right: 0;
	}

	/* バナー群２ */
	#sec_banner2 {
		display: block;
		margin-top: 2em;
	}
	#sec_banner2 ul {
		width: 100%;
	}
	#sec_banner2 li {
		width: 24%;
		/* margin-right: 1.333%;
		margin-bottom: 0.5em; */
		margin: 0 1.333% 0.5em 0;
		padding:0;
		float: left;
	}
	#sec_banner2 li:last-child,
	#sec_banner2 li:nth-child(4)
	{
		margin-right: 0;
	}

}
/*======================================
	タブレットここまで
=======================================*/
@media screen and (max-width: 599px) {
	
#sec_special h2 {
	margin-bottom: 10px;
}
/* 2列 */
li.sec_special_box {
	float: none;
	width:100%;
	margin: 0 auto 3em auto !important;
}
	
}