@charset "UTF-8";

/*======================================
	西川町とは？
=======================================*/
h2{
	background:url(../../img/lang/common/about/title_bk.jpg) center top repeat-x;
}
/* どんなところ */
#top{
	position:relative;
	min-height:440px;
}
#top h3{
	background:url(../../img/lang/common/about/bg01.png) left bottom repeat-x;
	padding-bottom:20px;
	font-size:250%;
	text-align:left;
	margin:1.5em 400px 20px 0;
}
#top h3 span{
/*
	font-size:140%;
*/
	color:#249a39;
}
#top_txt{
	width:100%;
	line-height:2.0 !important;
	padding-right:400px;
	margin-bottom:1em;
}
#top_img{
	width:368px;
	position:absolute;
	top: 0;
	right:0;
	padding-right: 20px;
}


/* イメージ画像 */
#page_img{
	width:100%;
	background:url(../../img/lang/common/about/bk.jpg) center top repeat-x;
}
#page_img ul{
	width:100%;
	max-width:1404px;
	margin:0 auto;
	overflow:hidden;
}
#page_img li{
	width:25%;
	float:left;
}


/* 西川町の四季 */
#season .catch{
	text-align:center;
}
#season .season_wrap{
	overflow:hidden;
	margin:3em 0 0;
	padding-top:1em;
	position:relative;
}
#season .season_wrap:nth-child(1){
	border-top:5px solid #ff9bd7;
}
#season .season_wrap:nth-child(2){
	border-top:5px solid #50c302;
}
#season .season_wrap:nth-child(3){
	border-top:5px solid #e97726;
}
#season .season_wrap:nth-child(4){
	border-top:5px solid #0aa6da;
}

#season .season_wrap h4{
	display:inline-block;
	margin-bottom:1em;
}
#season .season_wrap .season_txt{
	width:60%;
/*
	position:absolute;
*/
	float: right;
	top:1.5em;
	right:0;
}
#season .season_detail{
	overflow:hidden;
	clear: both;
}
#season .season_detail li{
	width:30%;
	float:left;
	margin-right:5%;
}
#season .season_detail li:last-child{
	margin-right:0;
}

#season .season_detail li img{
	margin-bottom:1em;
}

/* 西川町の魅力 */
#miryoku{
	padding-top:4em;
}
#miryoku ul{
	overflow:hidden;
}
#miryoku li{
	width:30%;
	float:left;
	margin:0 5% 3em 0;
	text-align:center;
	position:relative;
}
#miryoku li:nth-child(3n){
	margin-right:0;
}
#miryoku li:nth-child(1){
	width:100%;
	float:none;
	overflow:hidden;
}
#miryoku li:nth-child(1) #miyoku1_txt{
	width:46.5%;
	float:left;
}
#miryoku li:nth-child(1) .miryoku_img{
	width:47.5%;
	float:right;
}


#miryoku li:nth-child(2){
	width:47.4%;
	margin-right:4%;
}
#miryoku li:nth-child(3){
	width:47.4%;
	float:right;
}
#miryoku li:nth-child(4),
#miryoku li:nth-child(7){
	clear:both;
}

#miryoku li h4{
	font-size:180%;
	padding:0 0.5em;
	margin:0 auto;
	display:inline-block;
	line-height: 1.4;
	color:#231815;
}
#miryoku li h4.hd_pc{
	display:inline !important;
}
#miryoku li h4.hd_sp{
	display:none !important;
}

#miryoku li:nth-child(1) h4,
#miryoku li:nth-child(6) h4{
	background: linear-gradient(transparent 65%, #d4bdd8 35%);
	display:inline;
}
#miryoku li:nth-child(2) h4,
#miryoku li:nth-child(7) h4{
	background: linear-gradient(transparent 65%, #f2a9c8 35%);
	display:inline;
}
#miryoku li:nth-child(3) h4,
#miryoku li:nth-child(8) h4{
	background: linear-gradient(transparent 65%, #fcde5a 35%);
	display:inline;
}
#miryoku li:nth-child(4) h4,
#miryoku li:nth-child(9) h4{
	background: linear-gradient(transparent 65%, #a8d6b2 35%);
	display:inline;
}
#miryoku li:nth-child(5) h4{
	background: linear-gradient(transparent 65%, #bbe2ea 35%);
	display:inline;
}


#miryoku li .miryoku_img{
	margin:1em 0;
}

#miryoku li .miryoku_txt{
	text-align:left;
/*
	text-align:justify;
*/
	margin:1em 0;
}

#miryoku .cmn_btn{
	width:200px;
	margin:0 auto 1em;
}

@media screen and (max-width: 950px){
	
	/* 西川町の四季 */
	#season .season_wrap h4{
		width:100%;
		text-align: center;
	}
	#season .season_wrap h4 img{
		max-width:100%;
	}
	#season li.season_wrap:nth-child(1) h4{
		width:238px;
	}
	#season li.season_wrap:nth-child(2) h4{
		width:273px;
	}
	#season li.season_wrap:nth-child(3) h4{
		width:250px;
	}
	#season li.season_wrap:nth-child(4) h4{
		width:239px;
	}
	#season .season_wrap .season_txt {
		width:100%;
		position: static;
		margin-bottom:1em;
	}
}

@media screen and (max-width: 830px){
	#miryoku li {
		width:48%;
		margin: 0 4% 3em 0 !important;
	}
	#miryoku li:nth-child(4),
	#miryoku li:nth-child(7){
		clear:none;
	}
	#miryoku li:nth-child(2n){
		clear:both !important;
	}
	#miryoku li:nth-child(2n+1){
		margin: 0 0 3em 0 !important;
	}
	#miryoku li h4.hd_pc{
		display:none;
	}
	#miryoku li h4.hd_sp{
		display:inline-block;
	}

}

/*======================================
	タブレット
=======================================*/
@media screen and (max-width: 768px){
	#top h3{
		width:100%;
		font-size:160%;
		margin:0 0 1em 0;
	}
	#top_txt{
		width:56%;
		padding-right:0;
	}
	#top_img {
		width:40%;
		top: 5.5em;
		padding-right: 20px;
	}
}
/*======================================
	スマホ
=======================================*/
@media screen and (max-width: 640px){
	#top h3{
		font-size:130%;
		background-size:auto 7px;
	}
	#season .season_detail li{
		width:100%;
		max-width:550px;
		margin:0 auto 4em;
		float:none;
	}
	#top{
		min-height:370px;
	}
}
@media screen and (max-width: 620px){
	.lang_en h2 p{
		width:74%;
		margin:0;
	}
}

@media screen and (max-width: 560px){
	#top_txt{
		width:100%;
	}
	#top_img {
		position:static;
		width:100%;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
	}
	
	/* イメージ画像 */
	#page_img li{
		width:50%;
		float:left;
	}
	
	/* 魅力 */
	#miryoku li {
		width:100% !important;
		margin: 0 0 4em 0 !important;
	}
	#miryoku li:nth-child(1) .miryoku_img,
	#miryoku li:nth-child(1) #miyoku1_txt{
		width:100%;
		float:none;
	}

}