@charset "utf-8";
/* ================================================
/
/	Great Traverse 日本2百名山ひと筆書き
/	common.css
/
/ ============================================== */


/* ----------------------
/
/	FONTS
/
/ -------------------- */
@import url(/lib/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Halant:500);
@font-face{ 
	font-family: 'd-mincho';
	src: url('/fonts/dejima-mincho-subset.eot'); /* IE9以上用 */
	src: url('/fonts/dejima-mincho-subset.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('/fonts/dejima-mincho-subset.woff') format('woff'), /* モダンブラウザ用 */
		url('/fonts/dejima-mincho-subset.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}
@font-face{ 
	font-family: 'fontawesome';
	src: url('/fonts/fontawesome-webfont.eot'); /* IE9以上用 */
	src: url('/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('/fonts/fontawesome-webfont.woff') format('woff'), /* モダンブラウザ用 */
		url('/fonts/fontawesome-webfont.ttf') format('truetype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}

/* ----------------------
/
/	BASE
/
/ -------------------- */

body{
	font: 14px/1.8 "Helvetica","Lucida Grande","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	color: #111;
	background:#f6ede0 url(/img/common/bg_body.jpg) left top repeat;}
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
a{
	color:#16565c;
	text-decoration:underline;}
	a:hover,
	a:active{
		text-decoration:none;}
a.ov:hover,
a.ov:active{opacity:0.8;}
li{ list-style:none;}
p{
	font-size: 14px;
	line-height:1.8;}
p.note{
	font-size: 12px;
	line-height:1.4;}
span.note{
	font-size: 12px;}
table{
	border-collapse:collapse;
	border-spacing:0;} 
img{vertical-align:top;}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}



/* GENERIC
--------------------------------------------------- */
.myFont {
	font-family: "d-mincho",'Halant', serif;
	vertical-align:middle;
}
.f_left{ float:left;}
.f_right{ float:right;}
.f_clear{ clear:both;}
.textBox{ padding: 10px;}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
.tx_right{ text-align:right;}
.tx_center{ text-align:center;}

.txColor_01{ color:#3b812e;} /* 黄緑 */
.txColor_02{ color:#16565c;} /* 深緑 */
.txColor_03{ color:#975a23;} /* 茶 */
.txColor_04{ color:#8e2134;} /* 赤 */
.txColor_05{ color:#732593;} /* 紫 */
.txColor_06{ color:#8e8521;} /* 黄 */
.txColor_07{ color:#214d8e;} /* 青 */


.sp_block,.pad_block,.sp_inlineblock{ display:none !important;}

.list_dl{}
.list_dl dt{
	width: 10em;
	line-height:1.8em;}
.list_dl dd{
	line-height:1.8em;
	margin: -1.8em 0 1em 11em;}

@media screen and (max-width: 960px) {
	.pad_block{ display:block !important;}
	.pad_none{ display:none;}
}
@media screen and (max-width: 760px) {
	.sp_block{ display:block !important;}
	.sp_none{ display:none !important;}
	.pad_block{ display:none !important;}
	.sp_inlineblock{ display:inline-block !important;}
}


.fa-ul{margin-left: 10%;}
.fa-li{top: 0.4em;}
.fa-ul li{ margin-top: 0.8em;}
.fa-ul li:first-child{ margin-top: 0;}


/* LAYOUT
--------------------------------------------------- */
#wrap{
	height: 100%;
	width: 100%;}
#container{
	margin: 0 auto;
	/*overflow:hidden;*/
	padding: 15px 0 60px;
	/*padding: 176px 20px 60px;*/
	width: 1000px;}
	#container:after {
	  content: "";
	  clear: both;
	  display: block;
	}
#contentsMain{
	float:left;
	width: 760px;}
#contentsSide{
	float:right;
	padding-top: 20px;
	width: 210px;}
#contentsMain_w{
	width: auto;}


@media screen and (max-width: 960px) {
	#container{
		padding: 15px 3% 60px;
		width: auto;}
	#contentsMain{
		float:none;
		padding: 0 3%;
		width: auto;}
	#contentsSide{
		float:none;
		width: auto;
		padding: 40px 3% 0 !important;}

}
@media screen and (max-width: 760px) {
	
}


/* ----------------------
/
/	HEADER
/
/ -------------------- */
header{
	background:url(/img/common/bg_header.png) left bottom repeat-x;
	padding-bottom: 11px;
	width: 100%;
	z-index:100;}
#header_in{
	margin: 0 auto;
	position:relative;
	width: 1000px;
	background:url(/img/common/bg_header_illust.jpg) center center no-repeat;
	/*overflow:hidden;*/}
	header.headerFirst,header.headerFirst #header_in{ height: 150px;}
	header.headerSecond #header_in{
		background-position: center -120px; 
		height: 100px;
		padding-top: 6px;}

/* h1 */
	.headerFirst #header_in h1{
		position:absolute;
		left: 40%;
		bottom: 16px;
		/*width: 20%;*/
		width: 202px;}
	.headerSecond #header_in h1{
		position:absolute;
		left: 0;
		bottom: 10px;
		width: 15%;}
	#header_in h1 img{ width: 100%;}


/* #navGlobal */
	#navGlobal ul{
		position:relative;}
	#navGlobal li{
		background-position: center bottom;
		background-repeat:no-repeat;
		display:inline-block;
		padding-bottom: 4px;
		position:relative;
		opacity:0.8;
		line-height:1.1em;}
		#navGlobal li.gn01{ background-image: url(/img/common/bg_gnav01.png);}
		#navGlobal li.gn02{ background-image: url(/img/common/bg_gnav02.png);}
		#navGlobal li.gn03{ background-image: url(/img/common/bg_gnav03.png);}
		#navGlobal li.gn04{ background-image: url(/img/common/bg_gnav04.png);}
		#navGlobal li.gn05{ background-image: url(/img/common/bg_gnav05.png);}
		#navGlobal li.gn06{ background-image: url(/img/common/bg_gnav06.png);}
	#navGlobal li.off span{ opacity:0.3;}
	#navGlobal li:hover,
	#navGlobal li:focus,
	#navGlobal li:active{ opacity:1;}
	#navGlobal li:hover:after{
		content:'▲';
		font-size: 65%;
		position:absolute;
		left: 45%;
		top: 45%;}
		#navGlobal li.gn01:hover:after{ color: #8e2134;}
		#navGlobal li.gn02:hover:after{ color: #214d8e;}
		#navGlobal li.gn03:hover:after{ color: #3b811e;}
		#navGlobal li.gn04:hover:after{ color: #8e8422;}
		#navGlobal li.gn05:hover:after{ color: #732593;}
		#navGlobal li.gn06:hover:after{ color: #16575d;}
	
	#navGlobal li[class *= "off"]:hover span,
	#navGlobal li[class *= "off"]:focus span,
	#navGlobal li[class *= "off"]:active span{ opacity:0.7;}
	#navGlobal li[class *= "off"]:hover:after,
	#navGlobal li[class *= "off"]:focus:after,
	#navGlobal li[class *= "off"]:active:after{
		content:'coming soon';
		font-family:'Halant', serif;
		left: 0;
		top:-1em;
		font-size: 120%;
		opacity:1;}

	#navGlobal a,
	#navGlobal span{
		color:#8a4609;
		font-size: 16px;
		text-decoration:none;}
		
	.headerFirst #navGlobal li{
		position:absolute;
		top: 109px;}
	.headerSecond #navGlobal li{
		position:absolute;
		top: 66px;}
	
	.headerFirst #navGlobal li.gn01{left: 0;}
	.headerFirst #navGlobal li.gn02{left: 22.5%;}
	.headerFirst #navGlobal li.gn03{left: 31.7%;}
	.headerFirst #navGlobal li.gn04{left: 65%;}
	.headerFirst #navGlobal li.gn05{left: 78%;}
	.headerFirst #navGlobal li.gn06{right: 0;}
	
	.headerSecond #navGlobal li.gn01{left: 19.4%;}
	.headerSecond #navGlobal li.gn02{left: 44.5%;}
	.headerSecond #navGlobal li.gn03{left: 55.5%;}
	.headerSecond #navGlobal li.gn04{left: 64%;}
	.headerSecond #navGlobal li.gn05{left: 77.4%;}
	.headerSecond #navGlobal li.gn06{right: 0;}
	
	
	


#navSub{
	position:absolute;
	right: 10px;
	top: 17px;
	overflow:hidden;}
	#navSub a{
		color:#745c39;
		font-size: 13px;
		margin-left: 10px;
		text-decoration:none;}
	#navSub a:hover{
		color: #40331f;}

#sp_navbtn{
		
	  background-color:#975a23;
	  border-radius:4px;
	  color: #efe4d4;
	  display: block;
	  position:absolute;
	  right: 10px;
	  top: 10px;
	  height: 30px;
	  width: 30px;
	  font-size: 30px;
	  line-height:30px;
	  padding: 10px;
	  text-align:center;
	  z-index:999;}
/*#sp_navbtn a{ display: block; width: 30px; height:30px; color: #efe4d4;}*/

@media screen and (max-width: 960px) {
	#header_in{width: 94%;}
	.headerFirst #header_in h1{
		bottom: 20px;
		width: 22%;}
	.headerFirst #navGlobal li.gn01,
	.headerFirst #navGlobal li.gn05{top: 100px;}
	.headerFirst #navGlobal li.gn02{left: 18%}
	.headerFirst #navGlobal li.gn05{left: 79%;}
	
	.headerSecond #navGlobal li.gn01,
	.headerSecond #navGlobal li.gn05{top: 56px;}
	.headerSecond #navGlobal li.gn02{left: 38%;}
	.headerSecond #navGlobal li.gn03{left: 52%;}
	.headerSecond #navGlobal li.gn04{left: 62%;}
	.headerSecond #navGlobal li.gn05{left: 77.4%;}
	
	#navGlobal li[class *= "off"]:hover:after,
	#navGlobal li[class *= "off"]:focus:after,
	#navGlobal li[class *= "off"]:active:after{
		top: -1.8em;}
	
	
}
@media screen and (max-width: 760px) {
	#header_in{width: 100%; overflow:visible;}
	header.headerFirst,header.headerFirst #header_in{ height: 100px;}
	header.headerSecond{ display:none;}
	
	.headerFirst #header_in h1{
		position:static;
		margin: 0 auto ;
		padding-top: 10px;
		width: 130px;}
	
	#navGlobal{
		background: url(/img/common/bg_gnav_sp.jpg) left top repeat;
		position:absolute;
		padding: 0;
		display:none;
		line-height:2em;
		width: 100%;
		z-index:1000;}
	header.headerFirst #navGlobal{ top: 0px;}
	
		#navGlobal li{
			background-image: none !important;
			border-style:solid;
			border-width: 1px 0;
			border-top-color: #f2f2f2;
			border-bottom-color:#975a23;
			display:block;
			line-height: 1.6em;
			padding: 15px;}
		#navGlobal li a,
		#navGlobal li > span{
			display: block;
			border-left-style: solid;
			border-left-width: 6px;
			padding-left: 0.5em;}
			#navGlobal li.gn01 a,#navGlobal li.gn01 span{ border-left-color:#8e2134;}
			#navGlobal li.gn02 a,#navGlobal li.gn02 span{ border-left-color:#214d8e;}
			#navGlobal li.gn03 a,#navGlobal li.gn03 span{ border-left-color:#3b811e;}
			#navGlobal li.gn04 a,#navGlobal li.gn04 span{ border-left-color:#8e8422;}
			#navGlobal li.gn05 a,#navGlobal li.gn05 span{ border-left-color:#732593;}
			#navGlobal li.gn06 a,#navGlobal li.gn06 span{ border-left-color:#16575d;}
		
		#navGlobal li.off span{ opacity:0.7;}
		.headerFirst #navGlobal li{	position:static;}
		#navGlobal li:hover:after,
		#navGlobal li:focus:after,
		#navGlobal li:active:after{content:'';}
		#navGlobal li.close{
			background-color: #cbcbcb;
			background-image:none;}
		#navGlobal li.close a{
			border-width: 0;
			color: #333;
			padding-left: 0;}
	
}


/* ----------------------
/
/	SNS BUTTON
/
/ -------------------- */

#snsButton{position:relative; min-height: 50px;} 
	#snsButton .fb-like{
		position:absolute;
		right:14%;
		top: -5px;}
	#snsButton .twitter_wrap{
		position: absolute;
		right: 0%;
		top: 0;}
	#snsButton #twitter-widget-0{
		width: 120px !important;}

@media screen and (max-width: 960px) {
	#snsButton .fb-like{ right: 18%;}
}
@media screen and (max-width: 760px) {
	#snsButton .fb-like{ left: 2%;}
	#snsButton .twitter_wrap{ left: 36%;}
}



/* ----------------------
/
/	SPONSOR BANNER
/
/ -------------------- */

#sponsorBox{
	clear:both;
	overflow:hidden;
	padding-top: 100px;}
#sponsorBox ul{
	overflow:hidden;
	width: auto;}
#sponsorBox li{
	float:left;
	margin-bottom: 10px;}
	#sponsorBox .sizeL{ margin-left: -3%;}
	#sponsorBox .sizeM,
	#sponsorBox .sizeS{ margin-left: -1.5%;}
	#sponsorBox .sizeL li{ width: 30%; margin-left: 3%;}
	/*#sponsorBox .sizeM li{ width: 23.5%; margin-left: 1.5%;}*/
	#sponsorBox .sizeM li{ width: 18.4%; margin-left: 1.5%;}
	#sponsorBox .sizeS li{ width: 15%; margin-left: 1.5%;}
	
#sponsorBox img{ width: 100%;}
#sponsorBox h4{
	color: #975a23;
	font-family: 'd-mincho';
	font-size: 18px;
	margin-bottom: 10px;}
	
@media screen and (max-width: 960px) {
	#sponsorBox .sizeL{ margin-left: -1%;}
	#sponsorBox .sizeL li{ width: 32%; margin-left: 1%;}
	#sponsorBox .sizeM{ margin-left: -1.5%;}
	#sponsorBox .sizeM li{ width: 23.5%; margin-left: 1.5%;}
	#sponsorBox .sizeS{ margin-left: -1.5%;}
	#sponsorBox .sizeS li{ width: 18.4%; margin-left: 1.5%;}
}
@media screen and (max-width: 760px) {
	#sponsorBox .sizeL{ margin-left: 0;}
	#sponsorBox .sizeL li{ float: none; margin-left: 0; width: 80%; margin: 0 auto 10px;}
	#sponsorBox .sizeM{ margin-left: 3%;}
	#sponsorBox .sizeM li{ width: 45%; margin-left: 3%;}
	#sponsorBox .sizeS{ margin-left: -3%;}
	#sponsorBox .sizeS li{ width: 30%; margin-left: 3%;}
}



/* ----------------------
/
/	FOOTER
/
/ -------------------- */

footer{	background:url(/img/common/bg_footerline.gif) center top repeat-x;}
#footer_wrap{ background: url(/img/common/bg_footer.gif) left bottom repeat-x;}
#footer_in{
	background:url(/img/common/bg_footer_bird.gif) center top no-repeat;
	margin: 0 auto;
	min-height: 220px;
	overflow:hidden;
	padding: 36px 0 0 70px;
	width: 876px;}
.footerBox01{
	width: 20%;
	float:left;}
.footerBox02{
	width: 73%;
	float:right;}
.footerBox01 p{ margin-bottom: 0;}
.footerBox01 p img{ width: 100%;}
.footerSns{
	margin: 10px auto 0;
	overflow:hidden;
	text-align:center;}
	.footerSns a{
		color: #975a23;
		display:inline-block;
		font-size: 60px;
		line-height:1em;
		margin: 0 8px;}
	
	.footerNav{	margin:5px 0 0px;} 
	.footerNav ul{
		overflow:hidden;}
	.footerNav li{
		margin-bottom: 1em;
		width: 32.5%;
		float:left;}
	.footerNav a,
	.footerNav span{
		color: #111;
		display: inline-block;
		font-size: 16px;
		text-decoration:none;}
		.footerNav a:hover{ opacity: 0.7;}
		.footerNav span{ opacity:0.6;}
		.footerNav a i,
		.footerNav span i{ color: #975a23;}
	.footerInquiry{
		clear:both;
		padding-top: 15px;}
		.footerInquiry img{ vertical-align:middle;}
	.footerCopy{
		color: #fff;
		font-size: 16px;
		margin-top: 135px;
		padding-bottom: 10px;
		margin-bottom: 0;
		text-align:center;}


@media screen and (max-width: 960px) {
	#footer_in{
		margin: 0 auto;
		min-height: 220px;
		padding: 36px 3% 0 3%;
		width: 94%}
	.footerSns a{font-size: 50px;}
}
@media screen and (max-width: 760px) {
	footer{background-image:none;}
	#footer_in{
		background-image:none;
		min-height: auto;
		padding: 0;
		position:relative;
		width: 100%;}
	.footerBox02{ width: 100%;	float:none;}
	.footerNav{margin:0;} 
	.footerNav ul{ border-top: solid 1px #975a23;}
	.footerNav li{
		margin-bottom:0;
		width: auto;
		float:none;
		border-style:solid;
		border-width: 1px 0;
		border-top-color: #f2f2f2;
		border-bottom-color:#975a23;
		line-height: 1.6em;
		padding: 15px;}
	.footerNav a,
	.footerNav span{
		display: block;
		font-size: 16px;
		border-left: solid 6px #979797;
		padding-left: 0.5em;}
	.footerNav a.fb{ border-left-color: #3b5998;}
	.footerNav a.tw{ border-left-color: #55acee;}
	
}


/* ----------------------
/
/	SIDE
/
/ -------------------- */

/* .side_in
--------------------------------------------------------- */
.side_in{
	border-bottom: dotted 1px #975a23;
	padding-bottom: 25px;
	margin-bottom: 25px;}
	.side_in img{ width: 100%;}
	
@media screen and (max-width: 960px) {
	.side_in{float:left; border-bottom: none;}
}
@media screen and (max-width: 760px) {
	.side_in{float:none; border-bottom: dotted 1px #975a23;}
}

/* .sideCap
--------------------------------------------------------- */
.sideCap{
	border: solid 2px #16565c;
	color: #975a23;
	font-size: 20px;
	line-height:2em;
	padding: 0 0 0 0.5em;
	position:relative;
	margin-bottom: 14px;}
	.sideCap:after{
		content:'▼';
		color: #16565c;
		font-family:"ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック";
		font-size: 14px;
		position:absolute;
		left:10% ;
		bottom: -26px;}
#todayFace .sideCap{ background:url(/img/common/bg_cap_yokiface.png) right center no-repeat;}
#sideSNS .sideCap{ background:url(/img/common/bg_cap_sns.png) right -5px no-repeat;}
#sideItem .sideCap{ background:url(/img/common/bg_cap_item.png) right -5px no-repeat;}
#sideArchive .sideCap{ background:url(/img/common/bg_cap_archive.png) right center no-repeat;}

#todayFace .photo{ border: solid 2px #975a23;}
#todayFace .comment{ text-align:center; line-height:1.4em; padding-top: 0.8em; margin-bottom: 0.2em;}
#todayFace .btn{ background-color:#16565c; display:block; padding: 0.2em; color: #fff; text-decoration:none; text-align:center;}

#sideSNS a{
	display:inline-block;
	font-size: 20px;
	line-height:1.2em;
	padding-left: 34%;
	position:relative;
	margin-bottom: 20px;
	color: #975a23;
	text-decoration:none;}
	#sideSNS a span{ font-size: 16px;}
	#sideSNS a.facebook:after{
		content:'';
		font-family:'fontawesome';
		position:absolute;
		left: 10px;
		line-height:1em;
		top: 0;
		font-size: 54px;
		color: #16565c;}
	#sideSNS a.twitter:after{
		content:'';
		font-family:'fontawesome';
		position:absolute;
		left: 10px;
		line-height:1em;
		top: 0;
		font-size: 54px;
		color: #16565c;}

#sideBanner a,
#sideBanner2 a,
#sideBanner3 a,
#sideBanner4 span,
#sideItem a{
	display:inline-block;}
#sideBanner a,
#sideBanner2 a,
#sideBanner3 a{
	margin-top: 10px;}
	#sideBanner a:first-child,
	#sideBanner2 a:first-child{ margin-top: 0;}
	#sideItem h3 + a{ margin-top: 0;}
#sideItem a{
	color: #975a23;
	text-decoration:none;}
#sideItem p{
	line-height:1.4em;
	padding-top: 0.8em;
	margin-bottom: 15px;}

@media screen and (max-width: 960px) {
	#todayFace{ width: 32%; margin:0 auto; float:none;}
	#sideItem{ width: 63%; overflow:hidden; margin: 0 auto; float:none;}
	#sideItem a{width: 45%; margin: 0 2.2%;}
	#sideBanner,
	#sideBanner2,
	#sideBanner3,
	#sideBanner4{ float:none; clear:left;}
	#sideBanner a{
		width: 23%;
		margin-left: 2%;}
		#sideBanner a:first-child{ margin-left: 0;}
	#sideBanner2 a,
	#sideBanner3 a,
	#sideBanner4 span{
		width: 60%; margin: 0 auto; display:block;}
		#sideBanner a:first-child{ margin-left: 0;}
}
@media screen and (max-width: 760px) {
	#todayFace{ width: auto; margin-right: 0;}
	#todayFace .photo{ width: 90%; margin: 0 auto;}
	#sideItem{ width: auto; margin-bottom: 25px;}
	#sideItem a{width: 90%; margin: 10px auto 0; display:block;}
	#sideBanner a{
		width: 45%;
		margin-left: 2%;}
	#sideBanner2 a,
	#sideBanner3 a,
	#sideBanner4 span{width: 80%;}
	#sideBanner3 a{ margin-top: 15px;}
		#sideBanner a:first-child{ margin-left: 2%;}
}



/* ----------------------
/
/	CONTENTS
/
/ -------------------- */

/* #infoList
--------------------------------------------------------- */
#infoList{margin-top: -20px;}
#infoList li{
	border-bottom: dotted 1px #975a23;
	position:relative;}
	/*#infoList li:hover,#infoList li:focus,#infoList li:active{ background-position: 98% center;}*/
	#infoList li:after{
		content:'';
		position:absolute;
		right: 2%;
		top: 15%;
		color: #214d8e;
		font-family:'fontawesome';
		font-size: 26px;}
	#infoList li:hover:after,#infoList li:focus:after,#infoList li:active:after{ right: 1.8%;}
	#infoList li a{
		color: #111;
		display:block;
		height: 100%;
		overflow:hidden;
		padding: 20px 10px;
		text-decoration:none;
		width: 100%;}
		#infoList li a:hover,#infoList li a:focus,#infoList li a:active{ opacity: 0.7;}
		
	#infoList li p{ margin-bottom: 0;}
	#infoList li .date{
		float:left;
		width: 15%;}
	#infoList li .txt{
		float:left;
		width: 75%;}
@media screen and (max-width: 760px) {
	#infoList li .date{
		float:none;
		width: 85%;
		margin-bottom: 0.5em;}
	#infoList li .txt{
		float:none;
		width: 85%}
	#infoList li:after{top: 30%;}
}


#btn_pageTop{
	width: 74px;
	height: 74px;}
@media screen and (max-width: 760px) {
	#topcontrol{right: 0 !important; bottom: 20px !important;}
	#btn_pageTop{
		width: 50px;
		height: 50px;}
}

#lineup-font-size-sampler{
	display:none;}