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


/* IMAGE LIGHTBOX SELECTOR
--------------------------------------------------------- */
@import url(/css/gallery.css);


.top #contentsSide{ padding-top: 0;}

/* #gtMap
--------------------------------------------------------- */
#gtMap{
	height: 500px;
	width: 100%;
	margin-top: 30px;}
#gtMap iframe{
	width: 100%;
	height: 100%;}
#gtMapNav{
	background:#fff;
	overflow:hidden;
	padding: 5px 15px;}
	#gtMapNav p{
		float:left; padding: 15px 0; line-height:1.2em; vertical-align:bottom}
		#gtMapNav p .myFont{ font-size: 16px;}
		#gtMapNav p a{ font-size: 20px;}
	#gtMapNav .btn_center{
		background-color: #ddd;
		color: #9d6430;
		display:block;
		float:right;
		padding: 8px 0;
		text-align:center;
		text-decoration:none;
		width: 32.8%;}
		#gtMapNav .btn_center img { vertical-align:middle}
		#gtMapNav .btn_center:hover{ font-weight:bold;}
	
	#gtMapNav span.myFont{ vertical-align:text-bottom;}

@media screen and (max-width: 760px) {
	#gtMap{ height: 300px;}
	#gtMapNav p{float:none;}
	#gtMapNav .btn_center{ float:none;width: auto;}
}



/* .titleGroup
--------------------------------------------------------- */
.titleGroup{
	background:url(/img/common/bg_titleline.gif) left bottom repeat-x;
	margin-bottom: 20px;
	padding-bottom: 2px;
	overflow:hidden;}
	.titleGroup h2{float:left; font-size: 32px; line-height:1.3em; letter-spacing:0.1em;}
	.titleGroup a{float:right; padding-top: 20px; color: #975a23; text-decoration:none;}
	.titleGroup img{ vertical-align:bottom; width: 30%;}

@media screen and (max-width: 760px) {
	.titleGroup h2{ font-size: 26px;}
}


/* .topSection
--------------------------------------------------------- */
.topSection{
	margin-top: 30px;
	overflow:hidden;}


/* .topSection .article
--------------------------------------------------------- */
.topSection .articleL{
	float:left;
	width: 65%;}
.topSection .articleS{
	float:right;
	margin: 0 0 16px 0;
	width: 32.8%;}
	.topSection .articleL h1,
	.topSection .articleS h1{
		color: #111;
		font-weight: normal;
		padding-right: 24px;}
	.topSection .articleL h1{ font-size: 20px; line-height:1.5em;}
	.topSection .articleS h1{ font-size: 16px; line-height:1.2em;}
	
	.topSection .articleL img,
	.topSection .articleS img{ width: 100%;}
		
	.topSection .articleL p,
	.topSection .articleS p{
		color: #111;}
	
	.topSection .articleL .txt,
	.topSection .articleS .txt{
		padding: 10px;
		background-position: right top;
		background-repeat:no-repeat;
		position:relative;}
	.topSection .articleS .txt{padding: 6px 10px;}
	.topSection .articleL .txt .date,
	.topSection .articleS .txt .date{
		color: #fff;
		display:inline-block;
		padding: 3px 8px;
		line-height:1em;
		margin-bottom: 5px;}
	.topSection .articleL .txt.blog,
	.topSection .articleS .txt.blog{background-image:url(/img/top/bg_blogbox.png);}
	.topSection .articleL .txt.movie,
	.topSection .articleS .txt.movie{background-image:url(/img/top/bg_moviebox.png);}
	.topSection .articleL .txt.blog .date,
	.topSection .articleS .txt.blog .date{ background-color:#3b821e;}
	.topSection .articleL .txt.movie .date,
	.topSection .articleS .txt.movie .date{ background-color:#8e2134;}
	
	.topSection .articleS .txt.blog{ margin-top: -16px;}
	
	.topSection .articleL .txt.blog:after,
	.topSection .articleL .txt.movie:after{
		content:'';
		font-family:"fontawesome";
		font-size: 40px;
		position:absolute;
		right: 3%;
		top: 30%;}
	.topSection .articleS .txt.blog:after,
	.topSection .articleS .txt.movie:after{
		content:'';
		font-family:"fontawesome";
		font-size: 28px;
		position:absolute;
		right: 3%;
		top: 16%;}
		
	.topSection .articleL .txt.blog:after,
	.topSection .articleS .txt.blog:after{ color: #3b812e;}
	.topSection .articleL .txt.movie:after,
	.topSection .articleS .txt.movie:after{ color: #8e2134;}
	
	
	.topSection .articleL a,
	.topSection .articleS a{
		text-decoration:none;}
	
	.topSection .articleL a:hover,
	.topSection .articleS a:hover{ opacity:0.8;}
	
	.topSection .articleL a:hover .txt.blog:after,
	.topSection .articleS a:hover .txt.blog:after,
	.topSection .articleL a:hover .txt.movie:after,
	.topSection .articleS a:hover .txt.movie:after{ right: 2.5%;}
	
	.topSection .articleL img,
	.topSection .articleS img,
	.topSection .articleL iframe,
	.topSection .articleS iframe{
		vertical-align:top;}
	
	.topSection .articleS .thumphoto{
		/*width: 250px;
		height: 135px;*/
		overflow:hidden;}
	
	.topSection .topComing{
		text-align:center;
		min-height: 90px;
		padding-top: 50px;}
		.topSection .topComing p{ font-size: 150%;}
	
	.topSection .articleL .video_wrap{
		position:relative;
		width: 100%;
		padding: 56.25% 0 0 0;}
		.topSection .articleL .video_wrap iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;}



.topSection .articleS.diaryList{
	float:left;
	margin: 0 0 0.5em 0.7%;}
	.articleS.diaryList:nth-child(3n+1){ margin-left: 0;}
	.topSection .articleS.diaryList .txt{
		min-height: 2.5em;}
	.topSection .articleS.diaryList h1{ font-size: 20px; line-height:2em;}
	



@media screen and (max-width: 760px) {
	.topSection .articleL,
	.topSection .articleS{
		float:none;
		width: 100%;
		margin: 0 auto 10px;}
	.topSection .articleL .txt,
	.topSection .articleS .txt{
		padding: 10px 40px 10px 10px;}
	.topSection .articleL .txt.blog:after,
	.topSection .articleL .txt.movie:after,
	.topSection .articleS .txt.blog:after,
	.topSection .articleS .txt.movie:after{
		right: 2%;}
}
	
	


/* #topPhotoList
--------------------------------------------------------- */
#topPhotoListL,
#topPhotoListS{ overflow:hidden;}
#topPhotoListL{ margin-bottom: 12px;}
	#topPhotoListL li,
	#topPhotoListS li{
		border: solid 2px #8e8521;
		float:left;
		overflow:hidden;
		text-align:center;}
	#topPhotoListL li{
		height: 170px;
		margin-left: 2.6%;
		width: 22.5%;}
	#topPhotoListS li{ 
		height: 110px;
		margin-left: 1.05%;
		width: 15.2%;}
		#topPhotoListL li:first-child,
		#topPhotoListS li:first-child{ margin-left:0;}
	
	#topPhotoListL img{ width: auto; height:100%;}
	#topPhotoListS img{ width: auto; height:100%;}
	
	#topPhotoListL a:hover img,
	#topPhotoListS a:hover img{ opacity:0.8;}

@media screen and (max-width: 960px) {
	#topPhotoListL li{
		height: 136px;
		margin-left: 2.3%;
		width: 22.5%;}
	#topPhotoListS li{ 
		height: 90px;
		margin-left: 0.9%;
		width: 15.2%;}
}
@media screen and (max-width: 760px) {
	#topPhotoListL li{
		height: 140px;
		margin: 0 0 10px 2%;
		width: 46%;}
	#topPhotoListL li:first-child,
	#topPhotoListS li:first-child{ margin-left:2%;}
	#topPhotoListS li{ 
		height: 90px;
		margin: 0 0 10px 2%;
		width: 30%;}
	
}		


/* .topSnsFeed
--------------------------------------------------------- */
.topSnsFeed{
	float:left;
	width: 48%;}
	.topSnsFeed:nth-child(2){
		margin-left: 4%;}
.topSnsFeed h3{
	border: solid 2px #16565c;
	color: #975a23;
	font-size: 24px;
	line-height:2em;
	padding: 0 0 0 1em;
	position:relative;
	margin-bottom: 14px;}
	.topSnsFeed h3:after{
		content:'▼';
		color: #16565c;
		font-family:"ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック";
		font-size: 14px;
		position:absolute;
		left:10% ;
		bottom: -30px;}
	.topSnsFeed h3.twitter{	background:url(/img/common/bg_cap_tw.png) right center no-repeat;}
	.topSnsFeed h3.facebook{background:url(/img/common/bg_cap_fb.png) right center no-repeat;}

@media screen and (max-width: 760px) {
	.topSnsFeed{
		float:none;
		width: auto;}
	.topSnsFeed:nth-child(2){margin-left:0;}
	.fb-page{ margin: 0 auto;}
}



#diaryArchive{
	margin-left: -10px;}
	.topSection #diaryArchive .articleS{
		float:left;
		margin: 0 0 15px 10px;}
		
		.topSection #diaryArchive .articleS h1{
			font-size: 20px;
			line-height:2.5em;}


/* #topInfo
--------------------------------------------------------- */
#topInfo{
	border: solid 2px #8e2134;
	margin-bottom: 15px;
	text-align:center;}
	#topInfo p a{
		background-color:#fff;
		padding: 0.5em;
		display:block;
		font-size: 120%;
		color: #8e2134;
		text-decoration:none;}
		#topInfo p a:hover,
		#topInfo p a:active,
		#topInfo p a:focus{
			background-color:#f0dbdf;}


.topBnr img{ width: 100%;}