@charset "utf-8";

/***************************************************

body

***************************************************/

html, body {
	height: 100%;
}

html {
	overflow: scroll-y;
}

body {
	background: #FFF;
	color: #333;
	font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 12px;
	font-kerning: normal;
	line-height: 2;
	text-align: center;
	-webkit-text-size-adjust: none;
	position: relative;
}

a:link,
a:visited {
	color: #000;
	text-decoration: underline;
}

a:hover,
a:active {
	color: #000;
	text-decoration: none;
}

img {
	outline: none;
	line-height: 0;
}

.rollover {
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
.rollover:hover{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

/***************************************************

container

***************************************************/

#container {
	background: #F8F3F6 url(../img/bg.png) 50% 0 repeat-y;
	overflow: hidden;
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	width: 100%;
	min-width: 960px;
	margin: 0 auto;
	text-align: left;
	z-index: 1;
}


/***************************************************

header

***************************************************/
#header {
	width: 50%;
	/*min-width: 420px;*/
	height: 100%;
	min-height: 400px;
	position: relative;
	float: left;
}
#header .inner {
	height: 400px;
	width: 380px;
	padding: 0 20px;
	margin: -200px 0 0 0;
	position: fixed;
	top: 50%;
	right: 50%;
}
@media screen and (max-device-width: 999px) and (max-width: 959px) {
	#header .inner {
		margin: 0 !important;
		right: auto !important;
		left: 0;
	}
}
#header .logo {
	margin: 90px 0 0 0;
}

#header nav {
	margin: 40px 0 0 0;
}
#header nav ul {
	display: block;
}
	#header nav ul li {
		display: block;
		line-height: 0;
		position: relative;
	}
	#header nav ul li + li {
		margin: 22px 0 0 0;
	}
		#header nav ul li a {
			padding: 5px 0;
			vertical-align: middle;
			display: inline-block;
		}
		#header nav ul li ul {
			position: absolute;
			top: 0;
			left: 138px;
			background: url(../img/icn_rarrow.png) 0 3px no-repeat;
			padding: 0 0 0 83px;
			z-index: 106;
		}
			#header nav ul li ul li + li {
				margin: 8px 0 0 0;
			}
	#header nav ul li a:hover > img,
	#header nav ul li.active > a > img {
		background: #F8F3F6;
		opacity: 0.5;
	}

/***************************************************

content

***************************************************/
#content {
/* 	position: relative;
	float: right;
	width: 50%;
	height: 100%;
	min-height: 400px; */
	display:flex;
}
#content > .inner {
	width: 450px;
	padding: 50px;
}
#content img {
	background: #FFF;
}

/***************************************************

footer

***************************************************/

#footer {
	display: block;
	clear: both;
	overflow: hidden;
	position: fixed !important;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 0 0 13px 0;
	line-height: 1.2;
	z-index: 130;
}

#footer p {
	color: #666;
	text-shadow: -1px 1px 0 #F8F3F6;
	float: left;
	font-size: 10px;
	margin: 0 0 0 25px;
}


/***************************************************

pagetop

***************************************************/

#pagetop {
	position: fixed !important;
	position: absolute;
	bottom: -32px;
	right: 30px;
	z-index: 101;
}

#pagetop a:hover > img {
	background: #FFF;
	opacity: 0.5;
}


/***************************************************

home

***************************************************/
#home #container {
	background: #FFF;
}
#home #header {
	background: #F8F3F6;
	width: 50%;
	min-width: 480px;
	height: 400px;
	margin: -200px 0 0 0;
	position: fixed;
	top: 50%;
	left: 0;
/*	position: fixed !important;
	position: absolute;
	top: 50%;
	left: 0;
	margin: -200px 0 0 0;*/
	z-index: 99;
	overflow: hidden;
	display: block;
}
#home #header .inner {
	float: right;
	width: 380px;
	padding: 0 20px;
	margin: 0;
	position: relative;
	top: auto;
	right: auto;
	z-index: 100;
}
#home .cb-slideshow,
#home .cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
#home .cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s;
}
#home .cb-slideshow li:nth-child(1) span {
    background-image: url(../../img/home/slide_01.jpg);
}
#home .cb-slideshow li:nth-child(2) span {
    background-image: url(../../img/home/slide_02.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
#home .cb-slideshow li:nth-child(3) span {
    background-image: url(../../img/home/slide_03.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
#home .cb-slideshow li:nth-child(4) span {
    background-image: url(../../img/home/slide_04.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
#home .cb-slideshow li:nth-child(5) span {
    background-image: url(../../img/home/slide_05.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations #home .cb-slideshow li span{
	opacity: 1;
}

/***************************************************

biography

***************************************************/

#biography #content h1 {
	font-size: 14px;
}

#biography #content table {
	width: 100%;
	margin: 25px 0 0 0;
}
#biography #content table th,
#biography #content table td {
	text-align: left;
	vertical-align: top;
	line-height: 2;
	font-weight: normal;
}
#biography #content table tbody th {
	width: 6em;
}


/***************************************************

artworks

***************************************************/
#artworks #content .list-entry {
	display: block;
	overflow: visible;
	margin: 0 0 -50px -50px;
}
	#artworks #content .list-entry li {
		display: block;
		width: 200px;
		height: 200px;
		float: left;
		margin: 0 0 50px 50px;
	}
		#artworks #content .list-entry li > a:hover > img {
			background: #FFF;
			opacity: 0.5;
		}
#artworks.detail {
background: #F8F3F6;
}
#artworks.detail #container {
background: none;
overflow: auto;
}
#artworks.detail #content {
	display: block;
	float: none;
	width: 900px;
	height: auto;
	padding: 50px 30px;
	margin: 0 auto;
	z-index: 110;
}
#artworks.detail img {
	background: #F8F3F6;
}
#artworks.detail #content > ul,
#artworks.detail #content > div {
	min-height: 200px;
	position: relative;
}
#artworks.detail #content .inner {
}
#artworks.detail #content #imageWrap {
	width: 600px;
	position: relative;
	float: left;
}
	#artworks.detail #content #imageWrap .bx-wrapper {
		/*position: relative;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(-50%);*/
	}
	#artworks.detail #content #imageWrap .slides_container {
		display: block;
	}
		#artworks.detail #content #imageWrap .slides_container li {
			width: 600px;
			text-align: center;
			display: table-cell;
			vertical-align: middle;
			top:0;
			left: 0;
		}
			#artworks.detail #content #imageWrap .slides_container li img {
				max-width: 100%;
				/*line-height: 100%;
				display: inline;
				height: auto;
				vertical-align: bottom;*/
				position: absolute;
		    top: 0;
		    right: 0;
		    left: 0;
		    bottom: 0;
		    margin: auto;
			}

#artworks.detail #content #textWrap {
	width: 290px;
	position: relative;
	display: table;
	float: right;
}
	#artworks.detail #content #textWrap .inner {
		padding: 0px 0px 0px 50px;
		display: table-cell;
		vertical-align: middle;
		/*position: relative;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(-50%);	*/
	}
	#artworks.detail #content #textWrap h1,
	#artworks.detail #content #textWrap h2,
	#artworks.detail #content #textWrap p,
	#artworks.detail #content #textWrap .body ul {
		line-height: 3;
	}
	#artworks.detail #content #textWrap h1 {
		font-size: 14px;
	}
	#artworks.detail #content #textWrap h2 {
		margin-top: 15px;
	}
	#artworks.detail #content #textWrap p {
		margin-top: 30px;
	}
	#artworks.detail #content #textWrap .body ul {
		display: block;
		margin-top: 15px;
	}
	#artworks.detail #content #textWrap .pagination {
		display: block;
		overflow: hidden;
		margin: 20px 0 0 -10px;
	}
		#artworks.detail #content #textWrap .pagination li {
			display: block;
			float: left;
			margin: 0 0 0 10px;
			width: 50px;
			height: 50px;
		}
			#artworks.detail #content #textWrap .pagination a {
				display: block;
			}
			#artworks.detail #content #textWrap .pagination a img {
				width: 50px;
				height: 50px;
			}
			#artworks.detail #content #textWrap .pagination .active {
				opacity: 0.5;
			}
#artworks #paging {
	display: block;
	width: 100%;
	min-width: 1100px;
	margin: 0 auto;
	height: 18px;
	position: fixed;
	z-index: 104;
	top: 50%;
	left: 0;
	margin: -9px 0 0 0;
}
	#artworks #paging > span {
		display: block;
		width: 51px;
		height: 17px;
	}
	#artworks #paging .nav-prev {
		float: left;
		padding-left: 30px;
	}
	#artworks #paging .nav-next {
		float: right;
		padding-right: 30px;
	}
#artworks #pageback {
	position: fixed;
	top: 30px;
	right: 30px;
}
	#artworks #pageback a {
		display: block;
		width: 32px;
		height: 0;
		padding: 32px 0 0 0;
		overflow: hidden;
		background: url(../img/icn_close.png) 0 0 no-repeat;
	}


/***************************************************

Information

***************************************************/
#info #content .post {
	display: block;
	overflow: hidden;
}
#info #content .post + .post {
	margin-top: 50px;
}
#info.topics #content {
}
		#info.topics #content .post time {
			display: block;
			width: 7.5em;
			float: left;
		}
		#info.topics #content .post .post-body {
			overflow: hidden;
		}
			#info.topics #content .post .post-body p + p,
			#info.topics #content .post .post-body ul + p,
			#info.topics #content .post .post-body ol + p,
			#info.topics #content .post .post-body p + ul,
			#info.topics #content .post .post-body p + ol{
				margin-top: 15px;
			}
			#info.topics #content .post .post-body p img {
				max-width: 100%;
				height: auto!important;
			}
			#info.topics #content .post .post-body ul {
				list-style: outside disc;
				margin-left: 1.8em;
			}
			#info.topics #content .post .post-body ol {
				list-style: outside decimal;
				margin-left: 1.8em;
			}

#info.workshop #content {}
		#info.workshop #content .post .post-body {
			overflow: hidden;
		}
			#info.workshop #content .post .post-body p + p {
				margin-top: 20px;
			}
			#info.workshop #content .post .post-body p img {
				max-width: 100%;
				height: auto!important;
			}


/***************************************************

Contact

***************************************************/
#contact #content .inner {
	position: relative;
}
#contact #content .wpcf7 {
	margin-top: 50px;
}
#contact #content .wpcf7 dl {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}
	#contact #content .wpcf7 dl dt {
		display: block;
		width: 10em;
		float: left;
	}
	#contact #content .wpcf7 dl dd {
		display: block;
		overflow: hidden;
	}
	#contact #content .wpcf7 .wpcf7-text,
	#contact #content .wpcf7 .wpcf7-textarea,
	#contact #content .wpcf7 .wpcf7-submit,
	#contact #content .wpcf7 .wpcf7-captchar {
		font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
		font-size: 12px;
		border: none;
		color: #333;
		padding: 5px;
	}
	#contact #content .wpcf7 .wpcf7-text,
	#contact #content .wpcf7 .wpcf7-textarea,
	#contact #content .wpcf7 .wpcf7-captchar {
		background: #F8F3F6;
	}
	#contact #content .wpcf7 .wpcf7-captchar{
		width: 200px;
	}
	#contact #content .wpcf7 .wpcf7-text {
		width: 290px;
	}
	#contact #content .wpcf7 .wpcf7-textarea {
		width: 380px;
	}
	#contact #content .wpcf7 .button {
		text-align: center;
	}
	#contact #content .wpcf7 .wpcf7-submit {
		background: #CCC;
		width: 90px;
		text-align: center;
		cursor: pointer;
	}
	#contact #content .wpcf7 .wpcf7-submit:hover {
		background: #DDD;
	}



/***************************************************

common class

***************************************************/

/* text-alignt
--------------------------------------------------*/
.taL { text-align: left !important;}
.taR { text-align: right !important;}
.taC { text-align: center !important;}

/* vertical-alignt
--------------------------------------------------*/
.vaT { vertical-align: top !important;}
.vaB { vertical-align: bottom !important;}
.vaM { vertical-align: middle !important;}

/* float
--------------------------------------------------*/
.flL { float: left;}
.flR { float: right;}

.clrFix { /zoom: 1;}
.clrFix:after {
content: '';
display: block;
clear: both;
line-height: 0;
font-size: 0.1em;
}

/* font-size
--------------------------------------------------*/
.fs10 { font-size: 10px !important;}
.fs11 { font-size: 11px !important;}
.fs12 { font-size: 12px !important;}
.fs14 { font-size: 14px !important;}
.fs16 { font-size: 16px !important;}
.fs18 { font-size: 18px !important;}

/* margin
--------------------------------------------------*/
.mt01 { margin-top:1px !important;}
.mt02 { margin-top:2px !important;}
.mt03 { margin-top:3px !important;}
.mt04 { margin-top:4px !important;}
.mt05 { margin-top:5px !important;}
.mt06 { margin-top:6px !important;}
.mt07 { margin-top:7px !important;}
.mt08 { margin-top:8px !important;}
.mt09 { margin-top:9px !important;}
.mt10 { margin-top:10px !important;}
.mt11 { margin-top:11px !important;}
.mt12 { margin-top:12px !important;}
.mt13 { margin-top:13px !important;}
.mt14 { margin-top:14px !important;}
.mt15 { margin-top:15px !important;}
.mt16 { margin-top:16px !important;}
.mt17 { margin-top:17px !important;}
.mt18 { margin-top:18px !important;}
.mt19 { margin-top:19px !important;}
.mt20 { margin-top:20px !important;}
.mt25 { margin-top:25px !important;}
.mt30 { margin-top:30px !important;}
.mt35 { margin-top:35px !important;}
.mt40 { margin-top:40px !important;}
.mt45 { margin-top:45px !important;}
.mt50 { margin-top:50px !important;}
.mt60 { margin-top:60px !important;}
.mt70 { margin-top:70px !important;}
.mt80 { margin-top:80px !important;}
.mt90 { margin-top:90px !important;}

.mr01 { margin-right:1px !important;}
.mr02 { margin-right:2px !important;}
.mr03 { margin-right:3px !important;}
.mr04 { margin-right:4px !important;}
.mr05 { margin-right:5px !important;}
.mr06 { margin-right:6px !important;}
.mr07 { margin-right:7px !important;}
.mr08 { margin-right:8px !important;}
.mr09 { margin-right:9px !important;}
.mr10 { margin-right:10px !important;}
.mr11 { margin-right:11px !important;}
.mr12 { margin-right:12px !important;}
.mr13 { margin-right:13px !important;}
.mr14 { margin-right:14px !important;}
.mr15 { margin-right:15px !important;}
.mr16 { margin-right:16px !important;}
.mr17 { margin-right:17px !important;}
.mr18 { margin-right:18px !important;}
.mr19 { margin-right:19px !important;}
.mr20 { margin-right:20px !important;}
.mr25 { margin-right:25px !important;}
.mr30 { margin-right:30px !important;}
.mr35 { margin-right:35px !important;}
.mr40 { margin-right:40px !important;}
.mr45 { margin-right:45px !important;}
.mr50 { margin-right:50px !important;}
.mr60 { margin-right:60px !important;}
.mr70 { margin-right:70px !important;}
.mr80 { margin-right:80px !important;}
.mr90 { margin-right:90px !important;}

.mb01 { margin-bottom:1px !important;}
.mb02 { margin-bottom:2px !important;}
.mb03 { margin-bottom:3px !important;}
.mb04 { margin-bottom:4px !important;}
.mb05 { margin-bottom:5px !important;}
.mb06 { margin-bottom:6px !important;}
.mb07 { margin-bottom:7px !important;}
.mb08 { margin-bottom:8px !important;}
.mb09 { margin-bottom:9px !important;}
.mb10 { margin-bottom:10px !important;}
.mb11 { margin-bottom:11px !important;}
.mb12 { margin-bottom:12px !important;}
.mb13 { margin-bottom:13px !important;}
.mb14 { margin-bottom:14px !important;}
.mb15 { margin-bottom:15px !important;}
.mb16 { margin-bottom:16px !important;}
.mb17 { margin-bottom:17px !important;}
.mb18 { margin-bottom:18px !important;}
.mb19 { margin-bottom:19px !important;}
.mb20 { margin-bottom:20px !important;}
.mb25 { margin-bottom:25px !important;}
.mb30 { margin-bottom:30px !important;}
.mb35 { margin-bottom:35px !important;}
.mb40 { margin-bottom:40px !important;}
.mb45 { margin-bottom:45px !important;}
.mb50 { margin-bottom:50px !important;}
.mb60 { margin-bottom:60px !important;}
.mb70 { margin-bottom:70px !important;}
.mb80 { margin-bottom:80px !important;}
.mb90 { margin-bottom:90px !important;}

.ml01 { margin-left:1px !important;}
.ml02 { margin-left:2px !important;}
.ml03 { margin-left:3px !important;}
.ml04 { margin-left:4px !important;}
.ml05 { margin-left:5px !important;}
.ml06 { margin-left:6px !important;}
.ml07 { margin-left:7px !important;}
.ml08 { margin-left:8px !important;}
.ml09 { margin-left:9px !important;}
.ml10 { margin-left:10px !important;}
.ml11 { margin-left:11px !important;}
.ml12 { margin-left:12px !important;}
.ml13 { margin-left:13px !important;}
.ml14 { margin-left:14px !important;}
.ml15 { margin-left:15px !important;}
.ml16 { margin-left:16px !important;}
.ml17 { margin-left:17px !important;}
.ml18 { margin-left:18px !important;}
.ml19 { margin-left:19px !important;}
.ml20 { margin-left:20px !important;}
.ml25 { margin-left:25px !important;}
.ml30 { margin-left:30px !important;}
.ml35 { margin-left:35px !important;}
.ml40 { margin-left:40px !important;}
.ml45 { margin-left:45px !important;}
.ml50 { margin-left:50px !important;}
.ml60 { margin-left:60px !important;}
.ml70 { margin-left:70px !important;}
.ml80 { margin-left:80px !important;}
.ml90 { margin-left:90px !important;}
