@charset "utf-8";

/* リセット */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,img,ol,ul,li,table,tr,th,td,a,
header,nav,article,footer {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

header,nav,article,footer {
  display:block;
}

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

ol,ul {
	list-style: none;
	list-style-type: none;
}


/* 全体 */
html {
	font-size: 62.5%;
	overflow-y: scroll;
}

body {
	font-size: 1.6em;
	color: #24221c;
	font-weight: normal;
	font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	background-image: url(img/bg_3.jpg);
}

img {
	border:0px;
	vertical-align: bottom;
}


/* clearfix */
.cf:before, .cf:after {
	content: "";
	display: table;
}

.cf:after {
	clear: both;
}

.cf {
	zoom: 1;
}


/* 上ボーダー */
header {
	padding: 2px 0;
	background-color: #677821;
	border-top: 4px solid #374105;
}

header div {
	margin: 0 auto;
	padding: 2% 0 2px 0;
	border-top: 2px solid #465505;
/* ■■メディアクエリ　ヘッダー■■ */
	width: 320px;
}


#all {
	margin: 0 auto;
/* ■■メディアクエリ　主要素全体■■ */
	width: 320px;
}


/* タイトル画像 */
#title {
	float: left;
	width: 30%;
}


/* トップ画像 */
#top_img {
	float: left;
	width: 70%;
}


/* メニュー */
#menu_bg {
	background-color: #17280b;
}

nav {
	float: left;
	background-color: #17280b;
	width: 30%;
}

/*　ボタン全体設定　*/
.button_bg,.button_bg:before,.button,.button:before,.button:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .2s;
	transition: all .2s;
}

/* ボタン背景 */
.button_bg {
	display: block;
	position: relative;
	z-index: 2;
	/* ボタン幅 */
	width: 100%;
/* ■■メディアクエリ　ボタン縦幅■■ */
	height: 26px;
	/* グラデ */
	background-color: #677821; background-image: -webkit-gradient(linear, left top, left bottom, from(#677821), to(#22280b));
	background-image: -webkit-linear-gradient(top, #677821, #22280b);
	background-image: -moz-linear-gradient(top, #677821, #22280b);
	background-image: -ms-linear-gradient(top, #677821, #22280b);
	background-image: -o-linear-gradient(top, #677821, #22280b);
	background-image: linear-gradient(to bottom, #677821, #22280b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#677821, endColorstr=#22280b);
}

/*　ボタン下線裏　*/
.button_bg:before {
	display: inline-block;
	position: absolute;
	content: "";
	top: 70%;
	left: 3%;
	width: 94%;
	height: 1px;
	background: #878c32;
}

/*　ボタン文字　*/
.button {
	display: block;
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
/* ■■メディアクエリ　ボタン文字■■ */
	padding: 9% 0 0 10%;
	font-size: 0.8rem;
	letter-spacing: 0.4pt;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
	text-decoration: none;
}

/*　ボタン矢印　*/
.button:before {
	display: block;
	position: absolute;
	content: "";
	top: 30%;
	left: 3%;
	width: 0;
	height: 0;
/* ■■メディアクエリ　ボタン矢印■■ */
	border: 3px solid transparent;
	border-left: 3px solid #9ba046;
}

/*　ボタン下線表　*/
.button:after {
	display: inline-block;
	position: absolute;
	top: 70%;
	left: 3%;
	content: "";
	width: 0;
	height: 1px;
	background: #ffffff;
}

/*　ボタン背景オーバー　*/
.button_bg:hover {
	/* グラデオーバー */
	background-color: #87a53c; background-image: -webkit-gradient(linear, left top, left bottom, from(#87a53c), to(#4b6e37));
	background-image: -webkit-linear-gradient(top, #87a53c, #4b6e37);
	background-image: -moz-linear-gradient(top, #87a53c, #4b6e37);
	background-image: -ms-linear-gradient(top, #87a53c, #4b6e37);
	background-image: -o-linear-gradient(top, #87a53c, #4b6e37);
	background-image: linear-gradient(to bottom, #87a53c, #4b6e37);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#87a53c, endColorstr=#4b6e37);
}

/*　ボタン文字オーバー　*/
.button:hover {
	color: #ffffff;
}

/*　ボタン矢印オーバー　*/
.button:hover:before {
/* ■■メディアクエリ　ボタン矢印オーバー■■ */
	border-left: 3px solid #ffffff;
}

/*　ボタン下線表オーバー　*/
.button:hover:after {
	width: 94%;
}


/* 記事表示枠 */
#article_bg {
	margin-left: 30%;
	padding: 0;
	border: 2px solid #504416;
	background-color: #ffffff;
	width: 70%;
}

article {
	/* 記事下部余白込み */
	padding: 4% 2% 16em 2%;
	/* 記事背景ワンポイント画像 */
	background: url(img/bg_2.png),url(img/bg_1.png);
	background-position: top right,bottom left;
	background-repeat: no-repeat,no-repeat;
	/* 内部余白込み設定 */
	box-sizing: border-box;
	width: 100%;
}

.article_block1 {
	margin-bottom: 4%;
	padding: 0 4%;
	width: 100%;
}

.article_block2 {
	float: left;
	width: 30%;
}

.article_block3 {
	margin-left: 34%;
	width: 66%;
}

.article_block4 {
	float: left;
	padding: 0 0 4% 0;
	width: 100%;
}

/*行事*/
ruby {
	ruby-position: before;
	position: relative;
}

ruby rt {
	position: relative;
	top: -1ex;
}

.event_table {
	float: left;
	border-spacing: 0;
	margin: 1% 1% 0 0;
	width: 71%;
}

.event_th1 {
	text-align: left;
	border-bottom: 1px solid #d3bc5f;
	color: #554400;
	font-size: 0.8rem;
	letter-spacing: 0.8pt;
	width: 45%;
}

.event_th2 {
	text-align: left;
	border-bottom: 1px solid #d3bc5f;
	color: #554400;
	font-size: 0.8rem;
	letter-spacing: 0.8pt;
	width: 55%;
} 

.event_table td {
	padding-top: 1%;
	color: #554400;
	font-size: 0.7rem;
	line-height: 1.2rem;
	letter-spacing: 0.8pt;
}

.event_img {
	float: left;
	margin: 0 0 4% 0;
	border-top: 2px solid #f4eed7;
	border-right: 2px solid #e9ddaf;
	border-bottom: 2px solid #decd87;
	border-left: 2px solid #e9ddaf;
	width: 28%;
	
}

.article_img {
	margin: 0;
	border-top: 2px solid #f4eed7;
	border-right: 2px solid #e9ddaf;
	border-bottom: 2px solid #decd87;
	border-left: 2px solid #e9ddaf;
	width: 100%;
}

/* 記事見出しアイコン */
h1 {
	padding-left: 1%;
	font-weight: normal;
	font-size: 0.7rem;
	letter-spacing: 0.8pt;
	color: #ffffff;
}

h2 {
	text-align: center;
	position: relative;
	margin: 0;
	color: #ffffff;
	font-size: 0.8rem;
	letter-spacing: 1.2pt;
	width: 100%;
	padding: 2% 0 1% 0;
	background: #958d55;
}

h3 {
	position: relative;
	margin: 4% 0 2% 0;
	padding: 0 0 1% 4%;
	border-bottom: 1px solid #d3bc5f;
	color: #554400;
	font-size: 0.8rem;
	letter-spacing: 0.8pt;
}

h3:before {
	position: absolute;
	display: block;
	top: -2px;
	left: -2px;
	width: 8px;
	height: 8px;
	background: #decd87;
	content: "";
	border-radius: 50%;
}

h3:after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 4px;
	height: 4px;
	background: #c8ab37;
	content: "";
	border-radius: 50%;
}

.no_margin {
	margin-bottom: 0;
}

h4 {
	position: relative;
	margin-bottom: 2%;
	padding: 0 0 1% 4%;
	color: #554400;
	font-size: 0.8rem;
	letter-spacing: 0.8pt;
}

h4:before {
	position: absolute;
	display: block;
	top: -2px;
	left: -2px;
	width: 8px;
	height: 8px;
	background: #decd87;
	content: "";
}

h4:after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 4px;
	height: 4px;
	background: #c8ab37;
	content: "";
}

h5 {
	position: relative;
	margin: 4% 0 1% 0;
	padding: 0 0 1% 4%;
	color: #554400;
	font-size: 0.8rem;
	letter-spacing: 0.8pt;
}

h5:before {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 4px;
	height: 4px;
	background: #554400;
	content: "";
}

h6 {
	color: #554400;
	font-size: 0.8rem;
	letter-spacing: 0.8pt;
}


article p {
	margin: 0 0 4% 4%;
	color: #554400;
	font-size: 0.7rem;
	line-height: 1.2rem;
	letter-spacing: 0.8pt;
	font-weight: normal;
}

.p_center {
	margin: 0 0 4% 0;
	text-align: center;
}

.span_bold {
	font-weight: bold;
	color: #554400;
	font-size: 0.8rem;
	letter-spacing: 0.8pt;
}


/* フォトギャラリー */
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5,#r6,#r7 {
	display: none;
}
/*全サムネイルのコンテナー*/
#thumbs {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
/*サムネイルのマウスオーバーでポインターを手のひら*/
#thumbs label img {
	cursor: pointer;
	padding: 1%;
	width: 49%;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
	position: absolute;
	top: 0;
	margin: 1%;
	width: 98%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/* サムネイルがクリックされたら#frame外枠を表示 */
#r1:checked ~ #framebox,#r2:checked ~ #framebox,#r3:checked ~ #framebox,#r4:checked ~ #framebox,#r5:checked ~ #framebox {
	opacity: 1;
	z-index: 94;
}
/* サムネイルがクリックされたら#frame を表示 */
#r1:checked ~ #framebox #frame,#r2:checked ~ #framebox #frame,#r3:checked ~ #framebox #frame,#r4:checked ~ #framebox #frame,#r5:checked ~ #framebox #frame {
	opacity: 1;
	z-index: 95;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #framebox #frame #photo1, #r2:checked ~ #framebox #frame #photo2, #r3:checked ~ #framebox #frame #photo3, #r4:checked ~ #framebox #frame #photo4, #r5:checked ~ #framebox #frame #photo5 {
	opacity: 1;
	z-index: 100;
}
/* サムネイルがクリックされたら#darkscreen を表示 */
#r1:checked ~ #framebox label #darkscreen,#r2:checked ~ #framebox label #darkscreen,#r3:checked ~ #framebox label #darkscreen,#r4:checked ~ #framebox label #darkscreen,#r5:checked ~ #framebox label #darkscreen {
	opacity: 0.6;
	z-index: 90;
}
/* #frame固定外枠 */
#framebox {
	position: fixed !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
/* ■■メディアクエリ　フォトフレーム■■ */
	width: 320px;
	height: 202px;
	opacity: 0;
	z-index: -12;
}
/* #frame */
#frame {
	position: absolute;
	background: #ffffff;
	width: 80%;
	height: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	z-index: -11;
}
/* 写真の下に表示するタイトル */
.title {
	position: absolute;
	left: 0px;
	bottom: -10px;
	font-size: 0.7rem;
	color: #554400;
}
/* 右下に表示する閉じるボタン */
#close_btn label {
	position: absolute;
	right: 6px;
	bottom: 1px;
	font-size: 0.7rem;
	color: #554400;
	font-weight: bold;
	cursor: pointer;
}
/*写真表示時の画面遮蔽スクリーン*/
#darkscreen {
	position: fixed !important;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000000;
	opacity: 0;
	z-index: -5;
}


/* グーグル地図 */
.g_map {
	position: relative;
	margin: 0 4% 16px 4%;
	padding-top:56.25%;
	width: 92%;
}

.g_map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* 下部フッター */
footer {
	padding: 2px 0;
	border-bottom: 4px solid #374105;
	background: #677821;
}

footer　div {
	margin: 0 auto;
/* ■■メディアクエリ　フッター■■ */
	width: 320px;
}

footer p {
	padding: 4px 0 2% 0;
	font-size: 0.7rem;
	letter-spacing: 0.8pt;
	color: #ffffff;
	border-bottom: 2px solid #465505;
	text-align: center;
}


/* メディアクエリ設定  */
	/*  画面サイズ横375px以上の場合 スマホ用  */
@media screen and (min-width:375px) {
	/*　　メニュー記事幅  */
	header div,#all,#framebox,footer div {width: 375px;}
	/*  メニューボタン枠高さ  */
	.button_bg {height: 28px;}
	/*  メニューボタン文字サイズ間隔余白  */
	.button {font-size: 0.9rem; letter-spacing: 0.6pt; padding: 7% 0 0 10%;}
	/*  メニューボタン矢印  */
	.button:before {border: 3px solid transparent; border-left: 3px solid #9ba046;}
	/*  メニューボタン矢印オーバー  */
	.button:hover:before {border-left: 3px solid #ffffff;}
	/*  フォト拡大表示枠高さ  */
	#framebox {height: 236px;}
	/*  フォト拡大表示説明文  */
	.title {bottom: -11px; font-size: 0.8rem;}
	/*  フォト拡大表示閉じるボタン  */
	#close_btn label {font-size: 0.8rem;}
	/*  記事枠文字サイズ行間  */
	h1,article p,footer p,.article_block5,.event_table td {font-size: 0.8rem; line-height: 1.4rem;}
	/*  記事枠ボーダー  */
	#article_bg {border: 2px solid #504416;}
	/*  見出しサイズ  */
	h2,h3,h4,h5,h6,.article_block4,.article_block5 div,.span_bold,.event_th1,.event_th2 {font-size: 0.9rem}
	/*  見出しマーク二重丸外二重四角外  */
	h3:before,h4:before {width: 9px; height: 9px;}
	/*  見出しマーク二重丸内二重四角内四角  */
	h3:after,h4:after,h5:before {width: 5px; height: 5px;}
}

	/*  画面サイズ横393px以上の場合 スマホ用  */
@media screen and (min-width:393px) {
	header div,#all,#framebox,footer div {width: 393px;}
	.button_bg {height: 29px;}
	.button {font-size: 1.0rem; letter-spacing: 0.6pt; padding: 7% 0 0 10%;}
	.button:before {border: 3px solid transparent; border-left: 3px solid #9ba046;}
	.button:hover:before {border-left: 3px solid #ffffff;}
	#framebox {height: 250px;}
	.title {bottom: -13px; font-size: 0.9rem;}
	#close_btn label {font-size: 0.9rem;}
	h1,article p,footer p,.article_block5,.event_table td {font-size: 0.9rem; line-height: 1.5rem;}
	#article_bg {border: 2px solid #504416;}
	h2,h3,h4,h5,h6,.article_block4,.article_block5 div,.span_bold,.event_th1,.event_th2 {font-size: 1.0rem}
	h3:before,h4:before {width: 10px; height: 10px;}
	h3:after,h4:after,h5:before {width: 6px; height: 6px;}
}

	/*  画面サイズ横414px以上の場合 スマホ用  */
@media screen and (min-width:414px) {
	header div,#all,#framebox,footer div {width: 414px;}
	.button_bg {height: 30px;}
	.button {font-size: 1.0rem; letter-spacing: 0.6pt; padding: 7% 0 0 10%;}
	.button:before {border: 3px solid transparent; border-left: 3px solid #9ba046;}
	.button:hover:before {border-left: 3px solid #ffffff;}
	#framebox {height: 262px;}
	.title {bottom: -14px; font-size: 0.9rem;}
	#close_btn label {font-size: 0.9rem;}
	h1,article p,footer p,.article_block5,.event_table td {font-size: 0.9rem; line-height: 1.5rem;}
	#article_bg {border: 2px solid #504416;}
	h2,h3,h4,h5,h6,.article_block4,.article_block5 div,.span_bold,.event_th1,.event_th2 {font-size: 1.0rem}
	h3:before,h4:before {width: 10px; height: 10px;}
	h3:after,h4:after,h5:before {width: 6px; height: 6px;}
}

	/*  画面サイズ横430px以上の場合 スマホ用  */
@media screen and (min-width:430px) {
	header div,#all,#framebox,footer div {width: 430px;}
	.button_bg {height: 30px;}
	.button {font-size: 1.0rem; letter-spacing: 0.6pt; padding: 7% 0 0 10%;}
	.button:before {border: 4px solid transparent; border-left: 4px solid #9ba046;}
	.button:hover:before {border-left: 4px solid #ffffff;}
	#framebox {height: 272px;}
	.title {bottom: -14px; font-size: 1.0rem;}
	#close_btn label {font-size: 1.0rem;}
	h1,article p,footer p,.article_block5,.event_table td {font-size: 0.9rem; line-height: 1.5rem;}
	#article_bg {border: 2px solid #504416;}
	h2,h3,h4,h5,h6,.article_block4,.article_block5 div,.span_bold,.event_th1,.event_th2 {font-size: 1.0rem}
	h3:before,h4:before {width: 10px; height: 10px;}
	h3:after,h4:after,h5:before {width: 6px; height: 6px;}
}

/*  画面サイズ横440px以上の場合 スマホ用  */
@media screen and (min-width:440px) {
	header div,#all,#framebox,footer div {width: 440px;}
	.button_bg {height: 30px;}
	.button {font-size: 1.0rem; letter-spacing: 0.6pt; padding: 7% 0 0 10%;}
	.button:before {border: 4px solid transparent; border-left: 4px solid #9ba046;}
	.button:hover:before {border-left: 4px solid #ffffff;}
	#framebox {height: 278px;}
	.title {bottom: -14px; font-size: 1.0rem;}
	#close_btn label {font-size: 1.0rem;}
	h1,article p,footer p,.article_block5,.event_table td {font-size: 0.9rem; line-height: 1.5rem;}
	#article_bg {border: 2px solid #504416;}
	h2,h3,h4,h5,h6,.article_block4,.article_block5 div,.span_bold,.event_th1,.event_th2 {font-size: 1.0rem}
	h3:before,h4:before {width: 10px; height: 10px;}
	h3:after,h4:after,h5:before {width: 6px; height: 6px;}
}

	/*  画面サイズ横480px以上の場合 スマホ用  */
@media screen and (min-width:480px) {
	header div,#all,#framebox,footer div {width: 480px;}
	.button_bg {height: 32px;}
	.button {font-size: 1.2rem; letter-spacing: 0.8pt; padding: 7% 0 0 10%;}
	.button:before {border: 4px solid transparent; border-left: 4px solid #9ba046;}
	.button:hover:before {border-left: 4px solid #ffffff;}
	#framebox {height: 302px;}
	.title {bottom: -14px; font-size: 1.0rem;}
	#close_btn label {font-size: 1.0rem;}
	h1,article p,footer p,.article_block5,.event_table td {font-size: 1.0rem; line-height: 1.6rem;}
	#article_bg {border: 2px solid #504416;}
	h2,h3,h4,h5,h6,.article_block4,.article_block5 div,.span_bold,.event_th1,.event_th2 {font-size: 1.2rem}
	h3:before,h4:before {width: 12px; height: 12px;}
	h3:after,h4:after,h5:before {width: 8px; height: 8px;}
}

	/*  画面サイズ横768px以上の場合 タブレット用  */
@media screen and (min-width:768px) {
	header div,#all,#framebox,footer div {width: 768px;}
	.button_bg {height: 42px;}
	.button {font-size: 1.6rem; letter-spacing: 1.0pt; padding: 5% 0 0 10%;}
	.button:before {border: 5px solid transparent; border-left: 5px solid #9ba046;}
	.button:hover:before {border-left: 5px solid #ffffff;}
	#framebox {height: 482px;}
	.title {bottom: -22px; font-size: 1.6rem;}
	#close_btn label {font-size: 1.6rem;}
	h1,article p,footer p,.article_block5,.event_table td {font-size: 1.6rem; line-height: 2.4rem;}
	#article_bg {border: 3px solid #504416;}
	h2,h3,h4,h5,h6,.article_block4,.article_block5 div,.span_bold,.event_th1,.event_th2 {font-size: 1.8rem}
	h3:before,h4:before {width: 14px; height: 14px;}
	h3:after,h4:after,h5:before {width: 10px; height: 10px;}
}

	/*  画面サイズ横960px以上の場合 PC用  */
@media screen and (min-width:960px) {
	header div,#all,#framebox,footer div {width: 960px;}
	.button_bg {height: 50px;}
	.button {font-size: 1.8rem; letter-spacing: 1.0pt; padding: 5% 0 0 10%;}
	.button:before {border: 6px solid transparent; border-left: 6px solid #9ba046;}
	.button:hover:before {border-left: 6px solid #ffffff;}
	#framebox {height: 600px;}
	.title {bottom: -26px; font-size: 1.8rem;}
	#close_btn label {font-size: 1.8rem;}
	h1,article p,footer p,.article_block5,.event_table td {font-size: 1.8rem; line-height: 2.8rem;}
	#article_bg {border: 3px solid #504416;}
	h2,h3,h4,h5,h6,.article_block4,.article_block5 div,.span_bold,.event_th1,.event_th2 {font-size: 2.0rem}
	h3:before,h4:before {width: 16px; height: 16px;}
	h3:after,h4:after,h5:before {width: 12px; height: 12px;}
}