@charset "utf-8"; 
/* http://meyerweb.com/eric/tools/css/reset/  
v2.0 | 20110126 
License: none (public domain) 
*/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
		margin: 0; 
		padding: 0; 
		border: 0;  
		font-size: 100%; 
} 

/*font: inherit; 
	vertical-align: baseline; 
} 
*/
/* HTML5 display-role reset for older browsers */ 

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
		display: block; 
} 

body { 
		line-height: 1; 
		/*-webkit-text-size-adjust: 100%;*/
} 

ol, ul { 
		list-style: none; 
}  

table { 
		border-collapse: collapse; 
		border-spacing: 0; 
} 

/*======▼body======*/ 
body { 
		background: #fdf5eb;
		text-align: center; 
		color: #3b3b3b; 
		font-size: 1.0em; 
		font-family: "Segoe UI", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		overflow-x: hidden; 
} 

body,html {
		width: 100%;
		height: 100%;
}

#header {
		width: 100%;
}

/*======▼FONT======*/
@font-face{
	font-family: "aoyagi";
	src: url("../font/aoyagi.otf") format("otf"),
				url("../font/aoyagi.woff") format("woff");
}

/*======▼見出し======*/
.midasi1 {
		position: relative;
    background: url("../images/trees_12801.jpg");
		width: 100%;
		height: 400px;
}

.inner1 h1 a {
		position: absolute;
		top: 0;
		left: 48%;
		font-family: "aoyagi";
		font-size: 4.5em;
		font-weight: bold;
		color: #fff;
		text-decoration: none;
				/*======縦書き======*/
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
}

.midasi2 {
		height: 30px;
		background: #ed9e40;
}

.midasi2 .inner2 {
		width: 70%;
		height: 30px;
		margin: 0 auto;
}


.midasi2 .inner2 h2 {
		font-size: 0.7em;
		text-align: right;
		line-height: 30px;
}

.midasi2 .inner2 h2 a {
		color: gold;
		text-decoration: none;
}

.midasi3,.midasi4 {
		width: 100%;
		height: 50px;
		margin-top: 20px;
}

.midasi3 h3,.midasi4 h4 {
		font-size: 1.5em;
		line-height: 50px;
		text-align: left;
		padding-left: 20px;
}

/*======▼footer上注意書き======*/

.attention {
		width: 70%;
		margin: 0 auto;
}

.attention p {
		text-align: left;
		padding-top: 15px;
		padding-left: 20px;
}

/*======▼お知らせBOX======*/

.tellbox {
		width: 100%;
		border: solid 3px #b6b6b6;
		background: #fff;
}

.tellbox ul {
		padding: 15px;
		list-style-type: none;
}

.tellbox ul li {
		text-align: left;
		padding: 7px 0 20px 0;
}

/*======▼to Top======*/

#topbutton { 
		position: fixed; 
		bottom: 18px;  
		right: 18px;  
		width: 5em;  
		display: none; 
		background-color: #1b10d0; 
		opacity: 0.5; 
		border-radius: 24px; 
		text-align: center; 
		font-size: 1.2em; 
		font-weight: bold; 
		margin: 0px; 
		padding: 10px; 
} 

#topbutton a { 
		color: white; 
		text-decoration: none; 
} 

#topbutton a:hover { 
		color: white; 
		text-decoration: underline; 
} 

/*======▼アドセンス======*/

#ad {
		width: 100% ;
		margin: 0 auto;
		padding-top: 20px;
		padding-bottom: 20px;
} 

/*======▼footer======*/

#footer {
		width: 100%;
		height: 150px;
		background: #ed9e40;
}

.f1 { 
		width: 100%;
		height: 15px;
		padding-top: 130px;
} 

.f2,.f3 {
		display: inline;
}

/*======▼回り込み解除======*/  
.clear { 
		clear: both; 
} 

.clear hr { 
		display: none; 
} 

/*======▼intense======*/  

.fullscreen-image {
		cursor: url("./images/plus_cursor.png"), pointer; 
		display: inline-block; 
		margin: 0px 5px 5px 0px; 
}

/*======▼hoverアニメ======*/  

.photo {
		width: 108px;
		height: 144px;
}

.photo1 {
		width: 144px:
		height: 108px;
}

.photo,.photo1 {
    margin: 5px;
    border: 5px solid #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(2017.jpg) no-repeat center center
}

.phto img,.photo1 img {
    display: block;
    position: relative
}

.photo-first img {
    transition: all 0.3s linear;
}

.photo-first:hover img {
    transform: scale(1.2);
}

/*======▼問い合わせ======*/  

#sousin { 
		text-align: justify; 
		text-justify: inter-ideograph; 
		font-size: 0.8rem; 
		line-height: 100%; 
		margin-top:40px;
		margin-left: 60px; 
} 

#sousin dt { 
		font-weight: normal; 
} 

#sousin dd { 
		margin-left: 100px; 
		margin-top: 10px; 
		margin-bottom: 60px; 
} 

/*======▼mobile======*/  
@media screen and (max-width: 600px) {
		.inner1 h1 a {
				position: absolute;
				top: 0;
				left: 33%;
				font-family: "aoyagi";
				font-size: 4.5em;
				font-weight: bold;
				color: #fff;
				text-decoration: none;
				/*======縦書き======*/
				-webkit-writing-mode: vertical-rl;
				-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
		}

		.moms {
			width: 100%;
			Padding: 15px 7px 15px 7px;
	}

	.midasi3 {
			width: 100%;
	}

  #sousin,#sousin dd { 
		 margin-left: 10px; 
  } 

	#mapbox {
			width: 100%;
			height: 250px;
			border: solid 3px #b6b6b6;
	}

	.f2 {
			display: none;
	}
}

/*======▼タブレット======*/  
@media screen and (min-width: 601px) and (max-width: 800px) {
	.moms {
			width: 70%;
			Padding-top: 15px;
			padding-bottom: 15px;
			margin: 0 auto;
	}

	.midasi3 {
			width: 100%;
	}

  #sousin,#sousin dd { 
		 margin-left: 30px; 
  } 

	#mapbox {
			width: 100%;
			height: 300px;
			background-color: #ccc;
			border: solid 3px #b6b6b6;
			margin: 0  auto;
	}
}

/*======▼PC======*/  
@media screen and (min-width: 801px) {
	#inner {
			width: 70%;
			margin: 0 auto;
	}

	.moms {
			width: 70%;
			Padding-top: 15px;
			padding-bottom: 15px;
			margin: 0 auto;
	}

	#ad {
			width: 70% ;
			margin: 0 auto;
			padding-top: 15px;
			padding-bottom: 15px;
	} 
	#mapbox {
			width: 100%;
			height: 350px;
			margin: 0 auto;
			border: solid 3px #b6b6b6;
	}
}

/*======▼画像の伸縮設定======*/  
p img { 
		width: 100%; 
		height: auto; 
} 


/*======▼背景画像======*/
/*
#content{ 
	background-size:cover;/*背景画像で全体を覆う
} */
/*OR*/
#content{ 
	background-size:100% auto;/*背景画像を横幅いっぱいに表示*/
} 

/*======▼コンテンツは共通で、横向き用デザイン、縦向きデザインの2種類用意する場合======*/ 
div.landport { 
   /* 共通の装飾 */
} 

@media screen and (orientation: landscape) { 
	div.landport { 
      /* 横向き専用の追加装飾 */
   } 
} 

@media screen and (orientation: portrait) { 
	div.landport { 
      /* 縦向き専用の追加装飾 */
   } 
}