/* CSS Document */
@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Allerta+Stencil);

*{ margin: 0; padding: 0;}
ul, ol, li { list-style: none; }
a img { border: none; }

html {
	color: #574f48;
	font-family :  'Noto Sans Japanese', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	line-height : 1.8;
	height: 100%;
}

body { min-width: 360px; height: 100%; background: url(../img/bg.jpg); }

h1 { font-size: 150%; text-align: center; margin-bottom: 20px; }
h2 { font-size: 220%; margin: 20px 0; font-family: 'Allerta Stencil', sans-serif; color: #544231; background: url(../img/hr_l.png) no-repeat bottom; }
#bn h2 { color: #fff; background: url(../img/title_backnumber.png) no-repeat bottom; }
h3 { font-size: 120%; color: #fb6c00; }
h4 { font-size: 120%; }
h5 { font-size: 110%; }

a {
	text-decoration: none;
	outline: none;
	text-decoration: none;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
a { color: #15317a; }
a:hover { color: #ff6c00; }
a:visited { color: #15317a; }
.navbox a { color: #fff; }
.navbox a:hover { color: #ec8c45; }
.navbox a:visited { color: #fff; }
#bn a { color: #fff; }
#bn a:hover { color: #ec8c45; }
#bn a:visited { color: #fff; }
#pageTop { background: rgba(255,124,28,0.8); }
#pageTop a { color: #ffffff; }
#pageTop a:hover { color: #b6b6b6; }

p { margin: 20px 0; font-size: 90%; }
p span { border-bottom: 1px solid #c7b094; }
.wrapper hr { border:0; background:url(../img/hr_l.png) no-repeat bottom; height: 20px; clear: both; }
img { vertical-align: middle; max-width: 100%; }


.fclear { clear: both; }
.fleft { float: left; }
.fright { float: right; }

.fs200 { font-size: 200%; }
.fs95 { font-size: 95%; }
.fs90 { font-size: 90%; }
.fs80 { font-size: 80%; }
.fs70 { font-size: 70%; }
.fs60 { font-size: 60%; }
.fs40 { font-size: 40%; }

.vhidden { visibility: hidden; }
.dblock { display: block; }
.nobr { white-space: nowrap; }


/* @@@@@ ---------  --------- @@@@@ */

#container {
	max-width: 960px;
	height: 100%;
	margin: 0 auto;
	clear: both;
	position: relative;
	height:auto !important; /*IE6対策*/
	min-height: 100%;
	background: url(../img/bg_contents.jpg);
}
.wrapper { margin: 20px; padding: 10px 20px; background: rgba(254, 247, 237, 0.8) url(../img/bg_wrapper.png) no-repeat right top; border-radius: 5px; }

#mainPhoto { margin-bottom: 20px; clear: both; }

ul#sns { padding: 10px; }
ul#sns li { float: left; margin-right: 10px; }

.navbox { width: 100%; margin: 0 auto; font-size: 150%; font-weight: bold; }
.navbox ul {
	display: table;
	table-layout: fixed;
	text-align: center;
	width: 100%;
}
.navbox ul li {
	display: table-cell;
	vertical-align: middle;
}
.navbox ul li a { display: block; width: 100%; height: 100%; }
li.btn { background: url(../img/bg.jpg); border-radius: 15px 15px 0 0; border: 1px dotted #cccccc; border-bottom: none; }

article { margin-bottom: 80px; }
figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	opacity: .7;
}

.leftbox ul li { margin-left: 20px; padding: 4px 0; font-size: 85%; list-style: square; clear: both; border-top: 1px dashed #333; }
.leftbox { max-width: 480px; margin-bottom: 20px; float: left; }
.rightbox li { width:370px; margin: 10px 0 0 20px; float: right; }
.rightbox li img { width: 100%; }

article#bn { margin: 0 20px; padding: 10px 20px; background: rgba(113, 101, 85, 0.8) url(../img/bg_footer.png) no-repeat right bottom; border-radius: 5px; }
article#bn ul { margin:5px 16px 20px 5px; float: left; font-size: 90%; }

article#gallery ul li { float: left; margin: 5px 5px 0 0; }

/* masonry ----------------------------- */
html { overflow-y: scroll; }
.grid:after { content: ''; display: block; clear: both; }
.grid-sizer,.grid-item { width: 33.333%; }
.grid-item { float: left; }
.grid-item img { display: block; width: 100%; }


/* scroll-pagetop ----------------------------- */
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 160%;
	font-weight: bold;
	padding-top: 2px;
	width: 45px;
	height: 45px;
	border-radius: 45px;
}
#pageTop a {
	display: block;
	width: 100%;
	z-index: 999;
	text-decoration: none;
	text-align: center;
}



/* footer ----------------------------- */
footer {
	width: 100%;
	height: 50px;
	padding-top: 30px;
	font-size: 70%;
	color: #000000;
	text-align: center;
	clear: both;
}
footer a { color: #000000; }
footer a:hover { color: #b6b6b6; }




/* @@@@@ --------- 幅872px未満------------------------------------------------------------------------------------------------------------------- @@@@@ */
@media screen and (max-width: 872px) {
	.leftbox { max-width: 100%; }
	.rightbox li { margin: 0 0 10px 0; width: 100%; }
	.rightbox li img { width: 100%; }
}/* --------- @@@@@ --------- */

/* @@@@@ --------- 幅640px未満 スマホ ------------------------------------------------------------------------------------------------------------------- @@@@@ */
@media screen and (max-width: 640px) {
	.navbox { font-size: 105%; font-weight: bold; }
	.wrapper { margin: 0; }
	article#bn { margin: 20px 0; }
}/* --------- @@@@@ --------- */

/* ----------------------- css hack & clearfix --------------------- */
*:first-child+html {
}

.clearfix:after {
	content: ".";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}