/*-------------------------------
>>> CONTENTS: 北山村観光サイト
---------------------------------
※共通CSSは「common.css」に記載
# Typography
# Layout
# Header
# Navigation
# MainVisual
# Secondary
# Footer
# Module
# Home
-------------------------------*/
/*-------------------------------
# Typography
-------------------------------*/
/* == 見出し */
h1,h2{clear: both;}
h1,h2,h3,h4,h5,h6{line-height: 1.3; margin-top: 20px;}
h4,h5,h6{font-size:100%;margin-bottom:16px;}
#primary h1, article h1{
font-size: 213.33333333%; /*32px*/
font-weight: normal;
padding-left: 60px;
background: url(../images/bg_h2@2x.png) no-repeat 0 0;
background-size:53px 41.5px;
margin-bottom:40px;
margin-top: 40px;
}
#primary h1:first-child{margin-top: 0;}
h2{
color: #633F01;
font-size:166.666666666666%;/*25px*/
font-weight: normal;
padding-left:36px;
background: url(../images/ico_jabara@2x.png) no-repeat 0 0;
background-size:31px 26.5px;
margin-top: 30px;
margin-bottom:20px;
}
h3{
font-size:146.666666666666%;/*22px*/
font-weight: normal;
margin-top: 25px;
margin-bottom:15px;
padding-bottom:3px;
color: #633F01;
position: relative;
}
h3::before{
	position: absolute;
	bottom:-3px;right:0;
	content: " ";
	height: 3px;
	width: 100%;
	background: #ccc;
}
h3::after{
	position: absolute;
	bottom:-3px;right:0;
	content: " ";
	height: 3px;
	width: 100px;
	background: #a1b426;
}
h4{
 font-weight: normal;
 font-size:120%;/*18px*/
 color:#633F01;
 padding-left:26px;
	position: relative;
}
h4::before{
	content: "";
	position: absolute;
	top:6px;left:4px;
	width: 14px;height: 14px;
	border: 2px solid #a1b426;
}
h4::after{
	content: "";
	position: absolute;
	top:2px;left:0;
	width: 14px;height: 14px;
	border: 2px solid #86961F;
}
h5{
 color:#569244;
 margin-top: 22px;
 margin-bottom:15px;
 border-left: 8px solid #a1b426;
 padding-left:8px;
}
h6 {	color: #633F01;}

/*-------------------------------
# Layout
-------------------------------*/
#site-branding,
#content{
	margin: 0 auto 0;
	max-width: 1180px;
	width: 100%;
}
#content{margin-bottom:40px;}
/*サイドメニューあり（<div class="row"></div>で囲って使います）*/
#primary{width:74.576271186%;}/*880px*/
#secondary{	width:23.728813559%;/*280*/
	margin-bottom: 40px;
}

/* Layout box */
.Inner{
	margin: 0 auto 0;
	max-width: 1180px;
	width: 100%;
}
.col1{width:6.779661016%;}
.col2{width:15.254237288%;}
.col3{width:23.728813559%;}
.col4{width:32.20338983%;}
.col5{width:40.677966101%;}
.col6{width:49.152542372%}
.col7{width:57.627118644%;}
.col8{width:66.101694915%;}
/*2段組み↓*/
.x4{width: 23.295454545%;}/*205px*/
.x3{width: 31.818181818%;}/*280px*/
.x2{width: 48.863636363%;}/*430px*/
.w240{width:27.272727272%;}/*240px*/
.w620{width:70.454545454%;}/*620px*/


/*-------------------------------
# Header
-------------------------------*/
#site-header{margin:20px 0 0 0;}
#site-branding{position: relative;}
h1#site-title,p#site-title{
	max-width: 268px;
	width: 100%;
	margin: 0 auto 20px;
	font-size: 16px !important;
	line-height: 1 !important;
}
h1#site-title a,p#site-title a{display: block;}
#discription{
	color: #569244;
	font-size: 87.5%;
	padding-left: 32px;
	line-height: 36px;
	background: url(../images/ico_jabara@2x.png) no-repeat 0 0;
	background-size: 31px 28.5px;
	font-family: 'Nunito',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo;
	font-weight: 600;
}

/*Google サイト内検索CSS*/
#headparts{max-width: 210px;width: 100%; position: relative;}
#headparts table{margin-bottom: 0;}
.gsc-control-cse{padding: 0 !important;}
form.gsc-search-box{margin-bottom: 0 !important;}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus{
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
-ms-border-radius: 3px !important;
border-radius: 3px !important;
}
.gsc-input-box{height: 30px !important;}
table.gsc-search-box td{vertical-align:top !important;}
#___gcse_0 td,.gsib_b{padding: 0;}
#___gcse_0 td.gsib_a {padding:0px 6px;}
td.gsc-search-button button.gsc-search-button-v2{
	width: 24px !important;
	position: absolute;
	top:0;
	right: 0px;
	background:url(../images/ico_search@2x.png) no-repeat 0 6px !important;
	background-size: 15.5px 17px !important;
	height: 30px !important;
	padding: 6px !important;
	border:none !important;
}
td.gsc-search-button button.gsc-search-button-v2 svg{display: none;}
/*-------------------------------
# Navigation
-------------------------------*/
#main-navigation{position: relative;height: auto;}
#main-navigation::after{
 position: absolute;
 bottom: -5px;
 left: 0;
 z-index: 2;
 content: '';
 width: 100%;
 height: 5px;
	background: linear-gradient(rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, .15) 50%, rgba(255, 255, 255, 0) 100%);
}
#main-navigation ul {	max-width: 1180px;}
#main-navigation #nav-container ul li:after,
#main-navigation #nav-container ul li:last-child:before{
  content: "";
  display: block;
  width: 1px;
  height:60px;
	border-right: 1px dashed #B2B2B2;
  position: absolute;
  top:0px;
}
#main-navigation #nav-container ul li:after{ left: 0;}
#main-navigation #nav-container ul li:last-child:before{ right: 0;}
#main-navigation ul li {
	width: 16.6666%;
	line-height: 1.2;
	font-weight: bold;
	padding: 0 30px;
	text-align: center;
	cursor: pointer;
	position: relative;
	margin-bottom: 10px;
}
#main-navigation ul li:hover{background: #EDEEEE; transition: .5s;}
#main-navigation ul li a {
	height: 60px;
	display: block;
	margin: 0 auto;
	padding:35px 0 0;
	text-decoration: none;
	color: #000;
	position: relative;
}
/*Ｇナビ・アイコン設定*/
#main-navigation ul li a::after {
	content: "";
	width: 26px;height: 26px;
	position: absolute;
	top:5px;right:0;left:0;
	margin: auto;
	background: url(../images/nav@2x.png) no-repeat 0 0;
	background-size: 150px 25px;
}
#main-navigation ul li#nav_home a::after { background-position: 0 0}
#main-navigation ul li#nav_about a::after { background-position: -25px 0}
#main-navigation ul li#nav_ikada a::after { background-position: -50px 0}
#main-navigation ul li#nav_rafting a::after { background-position: -75px 0}
#main-navigation ul li#nav_jabara a::after { background-position: -100px 0}
#main-navigation ul li#nav_access a::after { background-position: -125px 0}

/*-------------------------------
# MainVisual
-------------------------------*/
#mainVisual{
	min-height: 150px;
	background-color: #D3EFF2;
}
#mainVisual .Inner{padding-top:20px;align-items: center;}
#mainVisual .Inner span{
	color: #FFF;
	font-size:166.666666666666%;/*25px*/
	font-weight: bold;
	margin-bottom:40px;
 height: 100%;
	margin: 0;
	position: relative;
}
#mainVisual .Inner span a{
	color: #FFF;
}
#mainVisual .Inner span::before{
	position: absolute;
	width: 50px;height: 50px;top:0; right: auto; bottom: 0; left: 0; margin: auto;
	background: url(../images/ico_header@2x.png) no-repeat 0 0;
	background-size: 350px 50px;
}
/* -- コンテンツ設定 -- */
#mainVisual.about .Inner span,
#mainVisual.ikada .Inner span,
#mainVisual.rafting .Inner span,
#mainVisual.jabara .Inner span,
#mainVisual.access .Inner span,
#mainVisual.onsen .Inner span{	padding-left:60px;}
/*北山村って？*/
#mainVisual.about{	background: url(../images/bg_about.jpg) no-repeat 50% 50% #D3EFF2;}
#mainVisual.about .Inner span::before{content: "";background-position: -50px 0;}
/*観光筏下り*/
#mainVisual.ikada{	background: url(../images/bg_about.jpg) no-repeat 50% 50% #D3EFF2;}
#mainVisual.ikada .Inner span::before{content: "";background-position: -100px 0;}
/*ラフティング*/
#mainVisual.rafting{	background: url(../images/bg_about.jpg) no-repeat 50% 50% #D3EFF2;}
#mainVisual.rafting .Inner span::before{content: "";background-position: -150px 0;}
/*特産品じゃばら*/
#mainVisual.jabara{	background: url(../images/bg_about.jpg) no-repeat 50% 50% #D3EFF2;}
#mainVisual.jabara .Inner span::before{content: "";background-position: -200px 0;}
/*交通と宿泊*/
#mainVisual.access{	background: url(../images/bg_about.jpg) no-repeat 50% 50% #D3EFF2;}
#mainVisual.access .Inner span::before{content: "";background-position: -250px 0;}
/*温泉*/
#mainVisual.onsen{	background: url(../images/bg_about.jpg) no-repeat 50% 50% #D3EFF2;}
#mainVisual.onsen .Inner span::before{content: "";background-position: -300px 0;}

/* ページ上に画像を入れる場合 */
#contentsIMG{
	text-align: center;
}

/* Topicpath */
#topicpath {
	max-width: 1180px;
	width: 100%;
	margin:10px auto 15px;}
#topicpath ,#topicpath a{
	font-size:12px;
	color: #3E3A39;
	text-decoration:none;
}
#topicpath a:hover{color: #3E3A39;}

/*-------------------------------
# Secondary
-------------------------------*/
#secondary h3{
	color: #633F01;
	font-weight: bold;
	border-bottom: 1px solid #A5B239;
	border-left:none;
	font-size:120%;/*18px*/
	margin:20px 15px 0 15px;
	padding:0 0 10px 0;
}

/*-------------------------------
# Footer
-------------------------------*/
/* PageTop */
.pagetop {
	text-align: center;
	width: 127px;
	height: 100px;
	margin: 0 auto 20px;
}
.pagetop a {
	padding-top: 50px;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;
	text-align: center;
	display: block;
	width: 127px;
	height: 100px;
	background: url(../images/ico_pagetop@2x.png) no-repeat 0 0;
	background-size: 126.5px 100px;
}

/* Footer */
#site-footer{
	clear: both;
	text-align: center;
	font-size: 93.75%;
	background: #D3EFF2;
}
#footer-info{
	max-width: 1180px;
	width: 100%;
	margin: 0 auto 10px;
}
#fNav ul{
	-js-display: flex;display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;
	display: flex;
	-webkit-justify-content:center;
	justify-content:center;
	flex-wrap: wrap;
	margin: 30px auto 0;
	max-width: 560px;
	width: 100%;
}
#fNav li{
	font-size:12px;
	margin-right:2.678571428%;
	position: relative;
}
#fNav ul li:last-child{margin-right: 0;}
#fNav li a{
	color:#000000;
	text-decoration: none;
	white-space: nowrap;
	display: block;
	font-weight: bold;
	transition: .5s;
	position: relative;
}
#fNav li a::before{
	content: "> ";
	color: #569244;
}
#fNav li a:hover{
	background: #FFF;
	transition: .5s;
}
#fNav ul.menu2{margin-top: 10px;}
#fNav ul.menu2 li a{font-weight:normal;}

.site-info{
	font-size: 93.75%;
	padding-top: 20px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 20px;
	position: relative;
	z-index: 2;
}
.site-info::before{
	content: "";
	position: absolute;
	width: 292px;
	height: 79px;
	bottom:0;
	left: 0;
	background: url(../images/bg_footer1@2x.png) no-repeat 0 0;
	background-size: 292px 78.5px;
	z-index: -1;
}
.site-info::after{
	content: "";
	position: absolute;
	width: 299px;
	height: 79px;
	bottom:0;
	right: 0;
	background: url(../images/bg_footer2@2x.png) no-repeat 0 0;
	background-size: 298.5px 78.5px;
	z-index: -2;
}
.site-info p{margin-bottom: 10px;}
.site-info strong{font-size: 137.5%;}

#copy{
	color:#FFF;
	background: #569244;
	text-align: center;
	margin-bottom: 0 !important;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size:81.25% !important;
}

/*-------------------------------
# Module
-------------------------------*/
/*テキストボックス
-------------------------------*/
/*共通設定*/
.boxGr,.boxYe,.boxOr{
	font-size: 96%;
	display: inline-block;
	width: 100%;
	padding: 15px;
	margin-bottom:16px;
}
.boxGr p:last-child,.boxYe p:last-child,.boxOr p:last-child{margin-bottom: 0 !important;}
	
/*グリーン*/
.boxGr{
	background:#A5B239;
	color: #FFF;
}
/*ライトイエロー*/
.boxYe{
	background:#FFF9E6;
	border: 1px solid #A5B239;
}
.boxYe h3{margin: 20px 0;font-size:130%;}
/* ライトオレンジ */
.boxOr{	background: #FFF9E6;}

/*リンク用リスト（2列）※バナー上にテキストを表示
-------------------------------*/
.linkList2col{	flex-wrap: wrap; margin: 0;}
.linkList2col li{width:48%; position: relative; margin-bottom: 15px; font-size: 13px;line-height: 1.2;list-style: none !important;}
.linkList2col li a{color: #FFF; text-decoration: none; font-weight: bold; display: block;}
.linkList2col li span{
	padding: 5px;
	position: absolute;
	bottom:0;
	left:0;
	background: rgba(0,0,0,0.5);
	width: 100%;
}
.linkList2col li::before{
	content: "";
	position: absolute;
	right:10px;top:10px;
	width: 18px;
	height: 16px;
	background: url(../images/icon_link.png) no-repeat 96% 96%;
	background-size: 18px 16px;
}

/*-------------------------------
# FrontPage
-------------------------------*/
#mainVisual.home{
	padding-bottom: 20px;
	min-height: 150px;
	background-color: #D3EFF2;
}
/*Flexslider*/
#ssBox{max-width:580px; width:100%; overflow: hidden;}
.flexslider{margin-bottom: 0; border: none;overflow: hidden;}
.flex-control-nav {bottom: 10px;}
.flex-control-paging li a {background: none;}
.flex-direction-nav a:before {font-size: 30px;}
.flex-control-paging li a {	border: 1px solid #FFF;}
.flex-control-paging li a:hover { background: #A5B239;}
.flex-control-paging li a.flex-active { background:  #A5B239;}
/*リンクブロック*/
#Vnav{flex-wrap: wrap; margin: 0;max-width: 600px; width:100%;}
#Vnav li{width: 50%; max-height:290px;height: 100%; position: relative; margin-bottom: 0;}
#Vnav li a{color: #FFF; text-decoration: none; font-weight: bold; display: block;}
#Vnav li:hover{opacity: .8;}
#mainVisual .Inner #Vnav li span {
	font-size: 100%;
	margin: 0;
	line-height: 40px;
	height: 40px;
	position: absolute;
	bottom:0;
	left:0;
	background: rgba(0,0,0,0.5);
	width: 100%;
	padding-left: 50px;
}
#mainVisual .Inner #Vnav li span a::before{
	content: "";
	position: absolute;
	left:0;top:0;
	width: 40px;
	height: 40px;
}
#Vnav li:nth-child(odd) span a::before{
	background: url(../images/ico_link@2x.png) no-repeat 50% 50% #F06C6C;
	background-size: 12.5px 20.5px;
}
#Vnav li:nth-child(even) span a::before{
	background: url(../images/ico_link@2x.png) no-repeat 50% 50% #A5B239;
	background-size: 12.5px 20.5px;
}

/* 新着情報 */
#NewsBlock{
	margin:0px auto 40px;
	background: #FFF9E6;
}
#NewsBlock .Inner{
	padding-top: 50px;
	padding-bottom: 40px;
	background: url(../images/pic_info@2x.png) no-repeat 100% 20px !important;
	background-size: 221px 94.5px;
}
#NewsBlock h2{
	margin-top:0;
	margin-bottom: 40px;
	background: none;
	padding-left: 0; text-align: center;
}
#NewsBlock h2 img{vertical-align: bottom;}
#NewsBlock h2 a{
	margin-left: 20px;
	display: inline-block;
	font-size:50%;
	text-decoration: none;
	color: #FFF;
	background: #569244;
	line-height: 60px;
	width: 60px;
	height: 60px;	
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	border-radius:30px;
	position: relative;
}
#NewsBlock h2 a::after{
	content: "";
	position: absolute;
	left: 0;right:0;top:8px; margin:auto;
	width:8px;
	height: 6px;
	background:#A5B239;
	-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;
}
#NewsBlock ul{ margin: 0; flex-wrap: wrap;justify-content: flex-start;}
#NewsBlock li{
	width: 23.728813559%;/*280px*/
	margin-left:1.694915254%;
	padding: 15px;
	margin-bottom: 20px;
	background: #FFF;
	border: 4px solid #A5B239;
}
#NewsBlock li:nth-child(4n+1){margin-left: 0;}
#NewsBlock li span{
	color: #569244;
	display: block;
}
#NewsBlock li span img{
	vertical-align: middle;
}