@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
	padding: 0;
	background-color: #fffbfa;
	background: url(../images/ohsaki/ohsaki_background.gif);
	}



/*---------共通------------------------------------*/

img{max-width: 100%;}


p{
	font-size: 1.0em;
	line-height: 1.8em;
	color: #26201e;
	}


h1{
	width: 62%;
	height: 0;
	margin: 0 20% 0 18%;
	padding-top: 15%;
	background: url(../images/ohsaki/ohsaki_h1.png) no-repeat;
	}
	

h2{
	width: 96%;
	height: 0;
	margin: 1% 0 0.5%;
	padding-top: 10.9%;
	background: url(../images/ohsaki/ohsaki_h2.png) no-repeat;
	}


h3{
	width: 44%;
	margin: 0;
	padding-top: 0.5%;
	padding-left: 2%;
	padding-right: 2%;
	}
	

h4{
	width: 25%;
	margin: 0.5% 0 0;
	float: left;
	}
	
	.movieVR h4{width: 100%;  margin: 0 0 1.0em;}
	.YTmovie h4{width: 100%;  margin: 0 0 1.0em;  text-align: left;  float: none;}


h5{
	margin: 0 0 0.5em 0;
	font-size: 1.2em;
	line-height: 1.8em;
	border-bottom: 1px dotted #26201e;
	}
	
	
h6{
	font-size: 1.0em;
	line-height: 1.8em;
	margin: 1em 0 0.25em;}


	/*見出し_おまとめ*/
	h1,h2,h3{
		background-size: contain;
		overflow: hidden;
		display: inline-block;
		background-position: center;
		}

	h2,h3,h4{text-align: center;}







/*---------メインビジュアル------------------------------------*/

#mainVisual{
	width: 100%;
	padding-top: 2%;
	padding-bottom: 4.35%;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	}


#mainVisual div{
	width: 100%;
	max-width: 1500px;
	padding: 4.25% 0;
	margin-top: 16%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12%;
	background: url(../images/ohsaki/ohsaki_h1_background.png) no-repeat;
	background-size: 100% 100%;
	}


#mainVisual ul{
	margin: 0 2% 0 0;
	padding: 0;
	text-align: center;
	display: flex;
	float: right;
	background: rgba(255,255,255,0.8);
	}

#mainVisual li{
	font-size: 0.9em;
	list-style-type: none;
	}

#mainVisual li a{
	padding: 0.5em 1.0em;
	display: block;
	}
	
	#mainVisual li a:hover{
		color: #097c25;
		background: rgba(255,255,255,0.7);

		-webkit-transition: all 0.7s ease;
    	-moz-transition: all 0.7s ease;
    	-o-transition: all 0.7s ease;
    	transition: all  0.7s ease;
		}


	@media only screen and (max-width: 1366px) {
		
		#mainVisual{
			padding-bottom: 3.35%;
			}
			
		#mainVisual div{padding: 2.8% 0;}
		
	}





	/*---回転スクロールボタン---*/
	.pageScroll {
	    color: #fff;
	    text-decoration: none;
	    background-color: rgba(89,73,63,0.7);
		border: solid 3px #FFF;
		display: block;
	    width: 82px;
		height: 82px;
		border-radius: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		transition: all 1s ease;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		}

	.pageScroll:hover {
    	transform: rotate(720deg);
	    -webkit-transform: rotate(720deg);
		}

	.pageScroll img{padding-top: 28%;}





/*---------メインコンテンツ------------------------------------*/

#ohsakiContent{
	width: 96%;
	max-width: 1380px;
	margin: auto;
	padding-top: 7%;
	padding-left: 2%;
	padding-right: 2%;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
	}
	
	
	/*---ナビゲーション---*/
	#naviGation{
		width: 60%;
		margin: 0;
		padding: 0;
		display: inline-block;
		}
	
		a.menu{
			width: 25%;
			height: 25%;
			max-width: 200px;
			max-height: 200px;
			margin: 2.5%;
			display: block;
			float: left;
			}
			
			a.menu:nth-child(3){margin: 2.5% 0 2.5% 2.5%;}

		
		a.menu img.menu_photo{
			width: 100%;
			height: auto;
			border-radius: 50%;
			transition: transform 0.3s linear;
			-webkit-transition: -webkit-transform 0.3s linear;
			-moz-transition: -moz-transform 0.3s linear;
			-ms-transition: -ms-transform 0.3s linear;
			-o-transition: -o-transform 0.3s linear;
			}
			
		figure{
			margin: 0;
			position: relative;
			text-align: center;
			display: block;
			}
			
		figcaption{
			position: absolute;
			text-align: center;
			top: 20.2%;
			left: 0;
			right: 0;
			bottom: 0;
			}
			
			figcaption img{width: 24%;}
			
		a.menu:hover > figure img.menu_photo {
			opacity: 0.85;
			transform: scale(1.12,1.12);
			-webkit-transform: scale(1.12,1.12);
			-moz-transform: scale(1.12,1.12);
			-ms-transform: scale(1.12,1.12);
			-o-transform: scale(1.12,1.12);
			}
			

	/*---YouTube---*/
	.youtubeLink{
		width: 96%;
		margin:0 auto;
		display: block;
		overflow: hidden;
		}
 
		.youtubeLink img{margin-top: 5%;}

		.youtubeLink img:hover{
			opacity: 0.85;
			
			-webkit-transition: all 0.7s ease;
    		-moz-transition: all 0.7s ease;
    		-o-transition: all 0.7s ease;
    		transition: all  0.7s ease;
			}


	/*---Facebook---*/
	#widgetFB{
		width: 38%;
		margin-top: 1.5%;
		display: inline-block;
		vertical-align: top;
		}
		
		#fb-root {display: none;}
		
		.fb_iframe_widget,
		.fb_iframe_widget span,
		.fb_iframe_widget span iframe[style] {
			width: 100% !important;
			}
	
	
	
	/*---各市町村記事---*/
	.ohsakiArticle{margin-top: 12%;}
	
		.regionBox{
			padding: 2%;
			background: url(../images/ohsaki/ohsaki_title_line.png) no-repeat;
			background-size: 100% 3px;
			background-position: top;
			}
			
			.regionBox div{
				width: 50%;
				margin-top: 1.5%;
				display: inline-block;
				vertical-align: top;
				}
	


		.articleBox{
			padding: 6% 0 0;
			background: url(../images/ohsaki/ohsaki_title_line.png) no-repeat;
			background-size: 100% 3px;
			background-position: top;
			}
			
			.regionBox + div.articleBox{padding: 2% 0 0;}
			
			/*大崎地方とは_画像説明*/
			.ohsakiInfo p{margin: 0 1.5em;}
			
			.miyagi_ohsaki{padding-top: 2%;  text-align: center;}
			.ohsaki_map{display: block;}
			.ohsaki_SP{display: none;}
			
			
			/*写真*/
			.photoGallery{}
			
			.photoGallery div{
				width: 23%;
				height: 195px;
				overflow: hidden;
				margin: 1%;
				display: block;
				float: left;
				}
			
			.photoGallery div > img{vertical-align: bottom;}
			.photoGallery div:hover{
				opacity: 0.75;
				transition: all  0.7s ease;
				-webkit-transition: all 0.7s ease;
				-moz-transition: all 0.7s ease;
				-o-transition: all 0.7s ease;
				}
			
			
			/*動画*/
			.YTmovie{padding: 2% 0 0 !important;  background: none;  margin-bottom: 4.5%;}
			
			.YTmovie div{
				width: 47%;
				margin: 0 1% 0.5em;
				padding-top: 26.51%;
				display: inline-block;
				vertical-align: top;
				position: relative;
				}
			
				.YTmovie iframe{
					position: absolute;
					top: 0;
					right: 0;
					width: 100% !important;
					height: 100% !important;
					}
			
			
			/*360°動画*/
			.movieVR{background: none; margin-bottom: 4.5%;}
			
			
			#Misato div.movieVR{
				background: url(../images/ohsaki/ohsaki_title_line.png) no-repeat !important;
				background-size: 100% 3px;
				background-position: top;
				}
			
			.description{
				width: 24%;
				margin-right: 1.7%;
				display: inline-block;
				vertical-align: top;
				}
				
				.description div{
					padding: 7% 5%;
					border-radius: 10px;
					-webkit-border-radius: 10px;
					-moz-border-radius: 10px;
					-ms-border-radius: 10px;
					-o-border-radius: 10px;
					background: rgba(255,255,255,0.75);
					clear: left;
					}
			
			
			.youtubeMovie{
				width: 73%;
				padding-top: 40.5%;
				margin-bottom: 1.5em;
				display: inline-block;
				vertical-align: top;
				position: relative;
				}
				
				.youtubeMovie iframe{
					position: absolute;
					top: 0;
					right: 0;
					width: 100% !important;
					height: 100% !important;
					}
					
			.youtubeTH{display: none;}
			
			
			/*360°動画・静止画再生方法*/
			.playMovie{
				width: 99%;
				padding: 1.5%;
				margin-top: 1em;
				border: double #a6937c;
				}






/*---------SNS------------------------------------*/
#shareLink{
	width: 100%;
	background: url(../images/ohsaki/ohsaki_footerbg.png) no-repeat;
	background-position: bottom;
	background-size: 100%;
	}
	
	#shareLink div.sns{
		width: 100%;
		max-width: 1380px;
		padding: 10% 0 10%;
		margin: 0 auto;
		text-align: center;
		}
		
		
	#shareLink p{
		margin-right: 1.5em;
		display: inline-block;
		vertical-align: top;
		}
	
	#shareLink ul{
		margin: 0;
		padding: 0;
		display: inline-block;
		vertical-align: top;
		}

	#shareLink li{
		vertical-align:top;
		float:left;
		display:block;
		margin-right: 1.5em;
		padding-top: 0.65em;
		list-style: none;
		}
		
		li.FB{width:130px;}
	




/*---------フッター------------------------------------*/
#Footer{background: rgba(172,213,152,0.5);}

	/*中身*/
	.footerContent{
		width: 100%;
		padding: 5% 0;
		max-width: 1380px;
		margin: auto;
		text-align:right;
		}
		
	.footerContent ul{
		margin: 0 0 1em;
		padding: 0;
		float:right;
		}

	.footerContent li{
		margin-right: 1.5em;
		padding-top: 0.65em;
		list-style: none;
		float: left;
		display: block;
		}
		
		
	.footerContent a:hover{
		color:#7e6b5a;
		transition: all  0.7s ease;
		-webkit-transition: all 0.7s ease;
		-moz-transition: all 0.7s ease;
		-ms-transition: all 0.7s ease;
		-o-transition: all 0.7s ease;
		}
		
		.taito img:hover{
			opacity: 0.85;
			transition: all  0.7s ease;
			-webkit-transition: all 0.7s ease;
			-moz-transition: all 0.7s ease;
			-ms-transition: all 0.7s ease;
			-o-transition: all 0.7s ease;
			}


	.footerContent .copy{margin-right: 1.5em;  clear: right;}
		


/*---------ページTOPへ戻る------------------------------------*/
#pageTop {
	position: fixed;
	width: 100px;
	height:100px;
	bottom: 30px;
	right: 30px;
	background: rgba(89,73,63,0.5);
	border:rgba(89,73,63,1.0) solid 1px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	z-index: 999;
	display:block;
	text-align:center;
	}
	
	
	#pageTop img{padding-top: 20%;}
	
	#pageTop:hover{
		background: rgba(89,73,63,0.7);
		transition: all  0.7s ease;
		-webkit-transition: all 0.7s ease;
		-moz-transition: all 0.7s ease;
		-ms-transition: all 0.7s ease;
		-o-transition: all 0.7s ease;
		}
	
	
	
	

@media only screen and (max-width: 768px) {
	
	
/*---------共通------------------------------------*/


p{font-size: 0.9em;  line-height: 1.6em;}

h1{
	width: 90%;
	margin: 0 5% 0 5%;
	padding-top: 16.5%;
	}
	

h2{padding-top: 15%;}


h3{
	width: 38%;
	margin: 0;
	padding-top: 0.5%;
	padding-left: 26%;
	padding-right: 36%;
	}
	
	

	.photoGallery h4{padding-top:5%;}
	#Kami h4{padding:0 !important;}
	#Shikama h4{padding:0 !important;}
	
	.movieVR h4{width: 25%;  float: left;}
	.YTmovie h4{width: 100%;  float: none;}


	/*見出し_おまとめ*/
	h1,h2,h3{
		background-size:contain;
		overflow: hidden;
		display: inline-block;
		background-position:center;
		}

	h2,h3,h4{text-align:center;}


/*---------メインビジュアル------------------------------------*/


#mainVisual div{
	margin-top: 43%;
	padding: 4.25% 0 6.25%;
	margin-bottom: 30%;
	}
	

/*---------メインコンテンツ------------------------------------*/
	
	
	/*---ナビゲーション---*/
	#naviGation{
		width:99%;
		margin:5% 0 3% 1%;
		display:block;
		}
	
		a.menu{
			width: 30%;
			height: 30%;
			max-width: 200px;
			max-height: 200px;
			margin: 1.5%;
			display: block;
			float: left;
			}
			
			a.menu:nth-child(3){margin:1.5% 0 1.5% 1.5%;}


	/*---YouTube---*/
	.youtubeLink img{margin-top: 8%;}

	/*---Facebook---*/
	#widgetFB{
		width: 78%;
		margin-left:auto;
		margin-right:auto;
		margin-top: 8%;
		display: block;
		}
		
		
	
	/*---各市町村記事---*/
	.regionBox div{
		width:100%;
		display:block;
		}
	

	.articleBox{padding: 6% 0 0;}
		
		.regionBox + div.articleBox{padding:4% 0 0;}
			

			/*写真*/
			.photoGallery div{height: 108px;}
			
			
			/*動画*/
			
			.YTmovie div{
				width:98%;
				margin:0 auto 1em;
				padding-top: 55.239%;
				display: block;
				}
			
			/*360°動画*/
			.movieVR{background: none; margin-bottom: 4.5%;}
			
			
			.description{
				width: 100%;
				margin-right: 0;
				display: block;
				}
				
				.description div{
					width:72%;
					display:block;
					float:right;
					padding:3%;
					clear: none;
					margin-bottom:1em;
					}
			
			
			.youtubeMovie{display: none;}				
			
			.youtubeTH{
				margin-bottom: 1.5em;
				display:block;
				clear:both;
				}
				
			
			/*360°静止画*/

			/*360°動画・静止画再生方法*/
			.playMovie{
				width:100%;
				padding:3%;
				}


/*---------SNS------------------------------------*/
	#shareLink div.sns{
		padding:15% 0 20%;
		margin:0 auto;
		}
		
	#shareLink p{
		padding:0 1em;
		margin-right:0;
		padding-bottom:0.75em;
		display:block;
		vertical-align:top;
		}
	
	#shareLink ul{
		width:70%;
		margin:0 auto;
		padding:0 5% 0 22%;
		display:block;
		vertical-align:top;
		}




/*---------ページTOPへ戻る------------------------------------*/
#pageTop {
	width:70px;
	height:70px;
	bottom: 20px;
	right: 20px;
	}
	
	#pageTop img{width:65%; padding-top:19%;}


}



@media only screen and (max-width: 480px) {

/*---------共通------------------------------------*/
p{font-size: 0.8em;}

h1{
	width: 100%;
	margin: 0;
	padding-top: 19.5%;
	}
	

h2{	
	margin: 2% 0 0;
	padding-top: 19.5%;
	}


h3{
	width: 54%;
	margin:0 0 0.25em;
	padding-top: 2%;
	padding-left: 19%;
	padding-right: 27%;
	}
	
	

h4{
	width: 31%;
	margin: 1% 1% 0;
	float: left;
	}
	
	.photoGallery h4{padding-top:3.8%;}
	#Kami .photoGallery h4{padding-top:3.8% !important;}
	#Shikama .photoGallery h4{padding-top:3.8% !important;}
	
	.movieVR h4{width: 25%;  float: left;}
	.YTmovie h4{width: 100%; float: none;}


h5{font-size:1.0em;}
h6{font-size:0.9em; line-height:1.6em;}


	/*見出し_おまとめ*/
	h1,h2,h3{
		background-size:contain;
		overflow: hidden;
		display: inline-block;
		background-position:center;
		}

	h2,h3,h4{text-align:center;}


/*---------メインビジュアル------------------------------------*/

#mainVisual div{
	padding: 2.25% 0 6.25%;
	margin-top: 47%;
	margin-bottom: 45%;
	}


#mainVisual ul{margin: 0 2%;}
#mainVisual li{font-size: 0.8em;}

	
	/*---回転スクロールボタン---*/
	.pageScroll {
		border:2px solid #FFF;
	    width: 56px;
		height: 56px;
		}

	.pageScroll img{ width:36px; padding-top: 28%;}




/*---------メインコンテンツ------------------------------------*/
	
	
	
	/*---ナビゲーション---*/
		a.menu{
			width: 28%;
			height: 28%;
			max-width: 200px;
			max-height: 200px;
			margin: 2.5%;
			display: block;
			float: left;
			}
			
			a.menu:nth-child(3){margin:2.5% 0 2.5% 2.5%;}

			
	/*---Facebook---*/
	#widgetFB{width: 94%; margin-top:8%;}
	


	/*---各市町村記事---*/
	.regionBox div{
		width:100%;
		display:block;
		}
	

	.articleBox{padding: 5% 0 0;}
	

			/*大崎地方とは_画像説明*/
			.ohsaki_map{display:none;}
			.ohsaki_SP{display:block;}


			/*写真*/
			.photoGallery{}
			
			.photoGallery div{
				width: 31%;
				height: 71px;
				overflow: hidden;
				margin: 1%;
				display: block;
				float: left;
				}
				
				@media only screen and (max-width: 320px) {
				.photoGallery div{height: 61px;}
				}
			
			.photoGallery div > img{vertical-align:bottom;}
			.photoGallery div:hover{
				opacity: 0.75;
				transition: all  0.7s ease;
				-webkit-transition: all 0.7s ease;
				-moz-transition: all 0.7s ease;
				-o-transition: all 0.7s ease;
				}
			
			
			
			
			/*動画*/
			
			.YTmovie div{
				width:98%;
				margin:0 auto 1em;
				padding-top: 55.239%;
				display: block;
				}
			
			/*360°動画*/
			.movieVR{background: none; margin-bottom: 4.5%;}
			
			
			.description{
				width: 100%;
				margin-right: 0;
				display: block;
				}
				
				.description div{
					width:72%;
					display:block;
					float:right;
					padding:3%;
					clear: none;
					margin-bottom:1em;
					}
			
			
			/*360°静止画*/




/*---------SNS------------------------------------*/
	#shareLink div.sns{padding:12% 0 26%;}

	#shareLink ul{
		width:93%;
		margin:0 auto;
		padding:0 1% 0 6%;
		display:block;
		vertical-align:top;
		}

	#shareLink li{
		margin-right:0.5em;
		padding-top:0.65em;
		list-style:none;
		float:left;
		display:block;
		}
	




/*---------フッター------------------------------------*/

	/*中身*/
	.footerContent{text-align:left;}

	.footerContent ul{
		margin: 0 1em 1.5em;
		padding: 0;
		float:none;
		}

	.footerContent li{
		font-size:0.8em;
		margin-right: 0;
		padding-top: 1.2em;
		float:  none;
		display: block;
		}
		
		
	.footerContent .copy{
		font-size:0.75em;
		margin-left:1em;
		margin-right: 1em;
		margin-bottom:1em;
		clear:none;
		}
		


/*---------ページTOPへ戻る------------------------------------*/
#pageTop {
	width:60px;
	height:60px;
	bottom: 20px;
	right: 20px;
	}



}