@charset "utf-8";

/**
 * Base
 *
 **/

/* meadia query set
@media only screen and (min-width: 1200px) {
	
}
@media only screen and (min-width: 981px) {
}

@media screen and (max-width: 960px) and (min-width: 641px) {

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

}
*/

/* COMMON */
body {
	color: #333;
	font-family:  Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	background: #666;
}
.txt-en {
	display: none;
}
body.lang-en .txt-en {
	display: block;
}
body.lang-en .txt-jp {
	display: none;
}
body.lang-jp .txt-en {
	display: none;
}
body.lang-jp .txt-jp {
	display: block;
}
#wrapper {
	width: 100%;
	background-color: #FFF; /*#F3F3F3*/
}
#wrapper .contents {
	max-width: 1200px;
	margin: 0 auto;
}
@media only screen and (min-width: 1200px) {
	body {
	
	}
	#wrapper {

	}
}

/* ============================================================
#LOADING
============================================================ */

#loader {
  /*width: 100%;
  height: 100%;*/
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -5px; /* heightの半分のマイナス値 */
  margin-left: -67px; /* widthの半分のマイナス値 */
  z-index: 999;
  position: absolute;
}

#fade {
  width: 100%;
  height: 100%;
  display: none;
  background-color: #FFFFFF;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 50;
}

#preloader{
	position:relative;
	display: none;
}
#preloader span{
	display:block;
	bottom:0px;
	width: 18px;
	height: 3px;
	background:#FFF;
	position:absolute;
	-webkit-animation: preloader 1.5s	 infinite ease-in-out;
	-moz-animation: preloader 1.5s	 infinite ease-in-out;
	-ms-animation: preloader 1.5s	 infinite ease-in-out;
	-o-animation: preloader 1.5s	 infinite ease-in-out;
	animation: preloader 1.5s	 infinite ease-in-out;
}

#preloader span:nth-child(2){
	left:30px;
	-webkit-animation-delay: .2s;
	-moz-animation-delay: .2s;
	-ms-animation-delay: .2s;
	-o-animation-delay: .2s;
	animation-delay: .2s;
}
#preloader span:nth-child(3){
	left:60px;
	-webkit-animation-delay: .4s;
	-moz-animation-delay: .4s;
	-ms-animation-delay: .4s;
	-o-animation-delay: .4s;
	animation-delay: .4s;
}
#preloader span:nth-child(4){
	left:90px;
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-ms-animation-delay: .6s;
	-o-animation-delay: .6s;
	animation-delay: .6s;
}
#preloader span:nth-child(5){
	left:120px;
	-webkit-animation-delay: .8s;
	-moz-animation-delay: .8s;
	-ms-animation-delay: .8s;
	-o-animation-delay: .8s;
	animation-delay: .8s;
}
@-webkit-keyframes preloader {
    0% {height:3px;-webkit-transform:translateY(0px);background:#FFF;}
    25% {height:3px;-webkit-transform:translateY(0px);background:#EEE;}
    50% {height:3px;-webkit-transform:translateY(0px);background:#EEE;}
    100% {height:3px;-webkit-transform:translateY(0px);background:#AAA;}
}

@-moz-keyframes preloader {
    0% {height:3px;-moz-transform:translateY(0px);background:#FFF;}
    25% {height:3px;-moz-transform:translateY(0px);background:#EEE;}
    50% {height:3px;-moz-transform:translateY(0px);background:#EEE;}
    100% {height:3px;-moz-transform:translateY(0px);background:#AAA;}
}

@-ms-keyframes preloader {
    0% {height:3px;-ms-transform:translateY(0px);background:#FFF;}
    25% {height:3px;-ms-transform:translateY(0px);background:#EEE;}
    50% {height:3px;-ms-transform:translateY(0px);background:#EEE;}
    100% {height:3px;-ms-transform:translateY(0px);background:#AAA;}
}

@keyframes preloader {
    0% {height:3px;transform:translateY(0px);background:#FFF;}
    25% {height:3px;transform:translateY(0px);background:#EEE;}
    50% {height:3px;transform:translateY(0px);background:#EEE;}
    100% {height:3px;transform:translateY(0px);background:#AAA;}
}

/* ============================================================
#LOADING
============================================================ */

/* HEADER */
#ghead {
	background: #FFF;
	border-top: 3px solid #CCC;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 140px;
}
#ghead h1 {
	display: block;
	width: 220px;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: auto;
}
#ghead h1 a {
	display: block;
	width: 100%;
	line-height: 0;
}
#ghead h1 a img {
	width: 100%;
	display: inline-block;
}
#ghead aside {

}
#ghead aside ul {
	max-width: 1200px;
	text-align: right;
	margin: auto;
}
#ghead aside ul li {
	display: inline-block;
}
#ghead aside ul li + li:before {
	content: "|";
	display: inline-block; 
	width: 20px;
	text-align: center;
	font-size: 10px;
	vertical-align: text-bottom;
	color: #999;
}
#ghead aside ul li a {
	color: #999;
	text-decoration: none;
	font-style: italic;
}
#ghead aside ul li a:hover {
	color: #333;
}
#ghead aside ul li.lang-active a {
	color: #a39060;
	font-weight: bold;
}

@media only screen and (min-width: 1200px) {
	
}
@media screen and (max-width: 1200px) and (min-width: 769px) {
	#ghead aside ul {
	margin-right: 20px;
	}
}
@media screen and (max-width: 980px) and (min-width: 769px) {

}
@media screen and (max-width: 768px) {
	#ghead {
	height: 80px;
	border-top: 36px solid #CCC;
	}
	#ghead h1 {
	text-align: center;
	width: 140px;
	}
	#ghead h1 a {
	}
	#ghead h1 img {
	
	}
	#ghead aside ul {
	margin-right: 20px;
	margin-top: -20px;
	}
}

/* MAIN */
.maincover {
	max-width: 1200px;
}
.maincover img {
	width: 100%;
}
.maincover img + img {
	display: none;
}
@media only screen and (max-width: 640px) {
	.maincover img {
	display: none;
	}
	.maincover img + img {
	display: block;
	}
}

#about {
	max-width: 1200px;
	position: relative;
	margin-top: 60px;
}
#about:before {
	content: "";
	position: absolute;
	width: 44%;
	height: 100%;
	display: block;
	z-index: 5;
}
#about img {
	width: 100%;
}
#about img + img {
	display: none;
}
#about .about-txt {
	text-align: center;
	position: absolute;
	width: 36%;
	padding: 0 4%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: auto;
	z-index: 10;
}
#about .about-txt h2 {
	margin-bottom: 1em;
}
#about .about-txt p {
	line-height: 170%;
	text-align: justify;
}
@media screen and (max-width: 980px) and (min-width: 769px) {
	#about:before {
	width: 52%;
	background-color: rgba(255,255,255,.4);
	}
	#about .about-txt {
	width: 48%;
	padding: 0 2%;
	}
	#about .about-txt p {
	font-size: 12px;
	}
}
@media screen and (max-width: 768px) and (min-width: 641px) {
	#about:before {
	width: 100%;
	background-color: rgba(255,255,255,.6);
	}
	#about .about-txt {
	width: 90%;
	padding: 0 5%;
	}
	#about .about-txt p {
	font-size: 12px;
	}
}
@media screen and (max-width: 640px) {
	#about:before {
	width: 100%;
	background-color: rgba(255,255,255,.6);
	}
	#about .about-txt {
	width: 90%;
	padding: 0 5%;
	}
	#about .about-txt h2 {
	font-size: 13px;
	}
	#about .about-txt p {
	font-size: 11px;
	}
	#about img {
	display: none;
	}
	#about img + img {
	display: block;
	}
}

#biography {
	width: 790px;
	margin: 0 auto;
}
#biography:before {
	content: "";
	display: block;
	width: 180px;
	height: 1px;
	margin: 50px auto;
	background-color: #CCC;
}
#biography:after {
	content: "";
	display: table;
	clear: both;
}
#biography figure {
	float: left;
	width: 150px;
}
#biography figure img {
	width: 100%;
}
#biography figcaption {
	float: left;
	width: 600px;
	padding-left: 40px;
	margin-top: 20px;
}
#biography figcaption h3 {
	font-size: 18px;
	margin-bottom: 1em;
}
#biography figcaption p {
	line-height: 170%;
	text-align: justify;
}
@media screen and (max-width: 800px) and (min-width: 641px) {
	#biography {
	width: 600px;
	}
	#biography figure {
	float: left;
	width: 150px;
	}
	#biography figcaption {
	float: left;
	width: 410px;
	padding-left: 20px;
	margin-top: 0;
	}
}
@media screen and (max-width: 640px) {
	#biography {
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	}
	#biography:before {
	margin: 30px auto;
	}
	#biography figure {
	width: 90%;
	padding: 0 5%;
	text-align: center;
	float: none;
	}
	#biography figcaption {
	width: 90%;
	float: none;
	padding: 0;
	margin: 20px auto 0;
	}
	#biography figcaption h3 {
	text-align: center;
	font-size: 13px;
	}
	#biography figcaption p {
	font-size: 11px;
	}
	
}

/* POST */
#tmblr-post {
	min-height: 100px;
	max-width: 1200px;
	padding-bottom: 30px;
}
#tmblr-post:before {
	content: "";
	display: block;
	width: 180px;
	height: 1px;
	margin: 50px auto;
	background-color: #CCC;
}
#tmblr-post:after {
	content: "";
	display: table;
	clear: both;
}
#tmblr-post ul:after {
	content: "";
	display: table;
	clear: both;
}
#tmblr-post ul li {
	width:23.5%;
	float:left;
	margin-left: 2%;
	margin-bottom: 2%;
	position: relative;
}
#tmblr-post ul li:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}
#tmblr-post ul li figure .photo-wrapper {
	position: relative;
	overflow: hidden;
}
#tmblr-post ul li figure .photo-wrapper:after {
    padding-top: 100%;
    display: block;
    content: "";
    background-color: #EFEFEF;
}
#tmblr-post ul li figure .photo-wrapper.thumb-w,
#tmblr-post ul li figure .photo-wrapper.thumb-h {
	background-color: #EFEFEF;
}
#tmblr-post ul li figure .photo-wrapper .photo-wrapper-inner {
    position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: auto;
}
#tmblr-post ul li figure .photo-wrapper.thumb-h .photo-wrapper-inner {
	top: auto;
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 100%;
}
#tmblr-post ul li figure img {
    width:100%;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	-webkit-backface-visibility:hidden;
}
#tmblr-post ul li a:hover figure img {
	-ms-filter: "alpha( opacity=80 )";
	filter: alpha( opacity=80 );
	opacity: 0.8;
}
#tmblr-post ul li figure .thumb-w img {

}
#tmblr-post ul li figure .thumb-h img {
	width: auto;
	height: 100%;
}
#tmblr-post ul li figcaption {
	text-align: center;
	padding: 0.5em;
	word-wrap: break-word;
	height: 4.2em;
	overflow: hidden;
}
#tmblr-post ul li figcaption p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
#tmblr-post ul li a {
	text-decoration: none;
	color: #333;
}
@media screen and (max-width: 1200px) {
	#tmblr-post {
	max-width: 96%;
	margin-left:2%;
	margin-right: 2%; 
	}
}
@media screen and (max-width: 640px) {
	#tmblr-post:before {
	margin: 30px auto;
	}
	#tmblr-post ul li {
	width:49%;
	margin-left: 2%;
	margin-bottom: 2%;
	position: relative;
	}
	#tmblr-post ul li:nth-child(2n+1) {
	clear: both;
	margin-left: 0;
	}
	#tmblr-post ul li figcaption {
	font-size: 12px;
	}
}

/* detail */
#tmblr-post.postdetail {
	
}
#tmblr-post.postdetail:before {
	content: "";
	display: none;
}
#tmblr-post.postdetail figure {
	text-align: center;
	margin: 0 auto;
}
#tmblr-post.postdetail figure img {
	width: 100%;
}
#tmblr-post.postdetail + nav {
	padding: 40px 0;
}
#tmblr-post.postdetail + nav a {
	color: #333;
}
#tmblr-post.postdetail + nav a:hover {
	text-decoration: none;
}
#tmblr-post.postdetail figcaption {
	margin-top: 1.8em;
	word-wrap: break-word;
}
#tmblr-post.postdetail figcaption p a {
	color:#333;
}
#tmblr-post.postdetail figcaption p a:hover {
	text-decoration:none;
}

@media screen and (max-width: 1200px) {
	#tmblr-post.postdetail + nav {
	margin-left: 20px;
	}
}


/* FOOTER */
#gfoot {
	position: relative;
	color: #666;
	text-align: center;
	padding: 50px 20px 0;
	background-color: #EEE;
}
#gfoot h4 {
	font-size: 14px;
	line-height: 278%;
	letter-spacing: 0.1em;
}
#gfoot h5 {
	font-size: 14px;
	line-height: 278%;
	letter-spacing: 0.1em;
	margin-top: 20px;
}
#gfoot h5 + p,
#gfoot h5 + p + p {
	font-size: 12px;
	padding-bottom: 20px;
}
#gfoot h5 + p > a,
#gfoot h5 + p + p > a {
	color: #666;
}
#gfoot h5 + p > a:hover,
#gfoot h5 + p + p > a:hover {
	text-decoration: none;
}
#gfoot ul {
	letter-spacing: -.40em;
}
#gfoot ul li {
	letter-spacing: normal;
	display: inline-block;
	padding: 0 8px;
}
#gfoot ul li a {
	display: block;
	width: 50px;
	height: 50px;
}
#gfoot ul li a img {
	width: 50px;
	height: 50px;
}
#gfoot p {
	font-size: 10px;
	color: #888;
}
#gfoot .copyright {
	padding: 20px 0 16px;
}
#gfoot .btn-pagetop {
	position: absolute;
	top: 0;
	right: 28px;
}
#gfoot .btn-pagetop a {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	height: 30px;
	width: 90px;
}
#gfoot .btn-pagetop a:before {
	content: "";
	position: absolute;
	background: #CCC;
	top: 50%;
	left: 0;
	margin-top: -15px;
	height: 30px;
	width: 90px;
}
#gfoot .btn-pagetop a:after {
	content: "";
	position: absolute;
	top: 50%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	left: 40px;
	margin-top: -3px;
	width: 11px;
	height: 11px;
	border-left: 3px solid #FFF;
	border-bottom: 3px solid #FFF;
	-webkit-transform: rotate(-225deg);
	-ms-transform: rotate(-225deg);
	transform: rotate(-225deg);
}
#gfoot .btn-pagetop a:hover:before {
	background: #666;
}

/* ie8 */
.ie8 #gfoot .btn-pagetop a {
	background-image: url(../images/ie8/ie8-pagetop-btn.png);
}
.ie8 #gfoot .btn-pagetop a:before {
	display: none;
}
.ie8 #gfoot .btn-pagetop a:after {
	display: none;
}

@media only screen and (max-width: 640px) {
	#gfoot {
	font-size: 12px;
	}
	#gfoot p {
	font-size: 9px;
	color: #888;
	}
	#gfoot .btn-pagetop {
	right: 0;
	left: 0;
	}
	#gfoot .btn-pagetop a {
	width: 100%;
	}
	#gfoot .btn-pagetop a:before {
	width: 100%;
	}
	#gfoot .btn-pagetop a:after {
	margin: -2px auto 0;
	left: 0;
	right: 0;
	}
}