@charset "utf-8";

/* Icon
----------------------------------------------------------------------*/
@font-face {
	font-family: 'fontello';
	src: url('./font/fontello.eot?72498753');
	src: url('./font/fontello.eot?72498753#iefix') format('embedded-opentype'),
		url('./font/fontello.woff?72498753') format('woff'),
		url('./font/fontello.ttf?72498753') format('truetype'),
		url('./font/fontello.svg?72498753#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}
.icon {
	font-family: "fontello";
	font-size: 20px;
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	margin-left: .2em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* default
----------------------------------------------------------------------*/
* { margin: 0; padding: 0; }
img { border: 0; vertical-align: top; }
ul, ol { list-style: none; }
a { color: #333; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }

/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* End hide from IE-mac */


/* structure
----------------------------------------------------------------------*/
body {
	color: #333;
	min-width: 768px;
	font-size: 13px;
	font-family: '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	line-height: 2;
	-webkit-text-size-adjust: 100%;
}
body h1 { display: none; }
.sp { display: none; }

/*--------------------------------------------------*/
#wrapper {
	position: relative;
	width: 100%;
	border: 10px solid #000;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}

footer {
	text-align: center;
}

/*--------------------------------------------------*/
#main {
	position: relative;
	width: 100%;
	background-color: #FFF;
	margin: 0 auto;
}

#main h2 {
	font-size: 32px;
	background: url(../images/bg_title.png) center bottom no-repeat;
	margin-bottom: 80px;
	padding-bottom: 15px;
	text-align: center;
}
#main h3 {
	font-size: 16px;
	margin-bottom: 5px;
}

#main .index {
	width: 100%;
	height: 595px;
	background: url(../images/photo_main.jpg) center center no-repeat;
	background-size: cover;
	margin-bottom: 220px;
	opacity: 0;
}
#main .logo {
	position: absolute;
	left: 50%;
	top: 470px;
}

#main .column {
	width: 765px;
	border-bottom: 1px solid #999;
	margin: 0 auto 60px auto;	
	opacity: 0;
}
#main .profile dl { margin-bottom: 60px; }
#main .profile dl dt {
	float: left;
	width: 250px;
}
#main .profile dl dd {
	float: right;
	width: 480px;
}

#main .sns { text-align: right; }

#main .history { margin-bottom: 165px; }
#main .history table {
	width: 100%;
	margin-bottom: 30px;
}
#main .history table th {
	width: 100px;
	font-weight: normal;
	padding-bottom: 25px;
	text-align: left;
	vertical-align: top;
}
#main .history table td { padding-bottom: 25px; }

.js-masonry {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.js-masonry .item {
/*	display: block;*/
	margin: 0 10px 20px 10px;
	text-align: left;
	overflow: hidden;
	opacity: 0;
}
.js-masonry .item img { width: 570px; }

.js-masonry:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

#infscr-loading {
	position: relative;
	display: block;
	width: 100%;
	height: 80px;
	text-align: center;
}
#infscr-loading img {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
	margin: 0 auto;
}

.navigation { display: none; }

/*--------------------------------------------------*/

/* スマートフォン用 */
@media(max-width: 768px) {
img { max-width: 100%; }
body {
	min-width: 100%;
	font-size: 13px;
	overflow-x: hidden;
}

/*--------------------------------------------------*/
#main { margin-bottom: 8%; }
#main h2 {
	font-size: 25px;
	margin-bottom: 8%;
}

#main .index {
	height: 300px;
	margin-bottom: 30%;
}
#main .logo { top: 225px; }

#main .column { width: 92%; }

#main .profile dl dt {
	float: none;
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
}
#main .profile dl dd {
	float: none;
	width: 100%;
}

#main .history { margin-bottom: 65px; }
#main .history table th {
	display: block;
	width: 100%;
	padding-bottom: 5px;
}
#main .history table td {
	display: block;
	width: 100%;
}

#main .item img { width: 100%; }
}


/* アニメーション
----------------------------------------------------------------------*/
/* タイトル */
.fadeInUp {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.8s;
	-ms-animation-duration: 0.8s;
	animation-duration: 0.8s;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
	0% { opacity: 0; -webkit-transform: translateY(30%); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
	0% { opacity: 0; -webkit-transform: translateY(30%); -ms-transform: translateY(30%); transform: translateY(30%); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeIn {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.8s;
	-ms-animation-duration: 0.8s;
	animation-duration: 0.8s;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	visibility: visible !important;
}
@-webkit-keyframes fadeIn {
	0% { opacity: 0; margin-top: 8%; }
	100% {  opacity: 1; margin-top: 0; }
}
@keyframes fadeIn {
	0% { opacity: 0; margin-top: 8%; }
	100% { opacity: 1; margin-top: 0; }
}