@charset "utf-8";
/* CSS Document */
.mb1em{
margin-bottom:1em;
}

.mb2em{
margin-bottom:2em;
}

.mb3em{
margin-bottom:3em;
}

.mb4em{
margin-bottom:4em;
}

.mb5em{
margin-bottom:5em;
}

.mb10em{
margin-bottom:10em;
}

.mt1em{
margin-top:1em;
}

.mt2em{
margin-top:2em;
}

.mt3em{
margin-top:3em;
}

.mt4em{
margin-top:4em;
}
.mt5em{
margin-top:5em;
}
.mt10em{
margin-top:10em;
}

body{
	background:#f4f4f4;}

	
.container-fluid{
	padding-left:30px;
	padding-right:30px;}
	


.contents {
  position: absolute;
  width: 100%;
  heigh: 100%;
  text-align: center;
  top: 10%;
  left: 0;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
}






.button_container {
  position: fixed;
  top: 2%;
  right: 3%;
  height: 17px;
  width: 17px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;

}

.logo {
  position: fixed;
  top: 2%;
  left: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
 
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #6a6766;
  border: none;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background: #858687;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 30px;
  font-family: 'Vollkorn', serif;
  font-weight: 500;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: .35s;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

h1{font-family: 'Roboto', sans-serif;
font-weight:300;
	margin-top:0;
	font-size:26px;
	letter-spacing:.3em;}

.conmen{ font-family: 'Vollkorn', serif;
	text-align:right;
	font-weight:500;
	text-transform:uppercase;
	}

.conmen ul{list-style:none;
line-height:3em;
}

.conmen a{color: #2b2b2b;
font-size: 26px;
    letter-spacing: 7px;}
	
	.details{font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;
	font-size:13px;
	text-align:left;}

.cate{font-family: 'Roboto', sans-serif;
font-weight:300;
	text-align:left;
	color:#404040;
	}
	
	
	.innnerbox p{margin-bottom: .4em;
		}
	.innnerbox a{font-weight:400;
		color:#404040;
		text-decoration:none;}
		
		.fr{
			margin-bottom:4em;}
			
		.ttl{text-align:left;
		color:#333;
		font-family: Times,Times New Roman;}
	
	.logo a{color:#333;
	text-decoration:none;}

.innnerbox{
	margin-bottom:2em;}


.imgbox1{height:600px;
width:100%;
}

.imgbox2{height:600px;
width:100%;
}

.imgbox3{height:740px;
width:100%;
}


.a1{
background:url(../img/2.png);
background-repeat:no-repeat;
background-size:cover;}

.a2{
background:url(../img/3.png);
background-repeat:no-repeat;
background-size:cover;}

.a3{
background:url(../img/4.jpg);
background-repeat:no-repeat;
background-size:cover;}

.a4{
background:url(../img/9.jpg);
background-repeat:no-repeat;
background-size:cover;}

.a5{
background:url(../img/2.png);
background-repeat:no-repeat;
background-size:cover;}

.a6{
background:url(../img/3.png);
background-repeat:no-repeat;
background-size:cover;}

.a7{
background:url(../img/7.jpg);
background-repeat:no-repeat;
background-size:cover;}


.a8{
background:url(../img/8.jpg);
background-repeat:no-repeat;
background-size:cover;}


.a9{
background:url(../img/9.jpg);
background-repeat:no-repeat;
background-size:cover;}


@media screen and (max-width: 786px) {
	
	.container-fluid{
	padding-left:15px;
	padding-right:15px;}
	
	
	.imgbox1,.imgbox3{height:457px;}
	
	.imgbox2{height:212px;}
	
	.innnerbox{
	margin-bottom:4em;}

	}

a:hover{text-decoration:none;
	}
	
	.na{position:fixed;
	top:0;
	height:9%;
	width:100%;
		background:#f4f4f4;}
	
	
	#loader-bg {
 
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1;
}
#loader {
  
  position: fixed;
  top: 50%;
  left: 40%;
  width: 500px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #000;
  z-index: 2;
}

#loader h3{text-align: center;
    font-weight: 200;
	font-size:50px;
	font-family: 'Roboto', sans-serif;
    letter-spacing: .2em;
   }
	
.worksdetail{color: #767a8d;
    font-family: 'Karla';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
	text-align:left;}

.worksdetail h3{    
color: #2a2d35;
font-family: 'Raleway';
	margin-top:0;
	font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 5px;}

.kasou{height:80vh;}

.kasou a:hover img {
  opacity:.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}

@media screen and (max-width: 1600px) {
	.imgbox1{height:396px;}
	
	.imgbox2{height:396px;}
	
	}
	

@media screen and (max-width: 1200px) {
	.imgbox1{height:281px;}
	
	.imgbox2{height:281px;}
	
	}
	
	.footer{
		margin-top:5em;
		padding:3em 0;
		color:gray;
		font-size:12px;
		text-align:center;
		background-color:#4d4d4d;}
	
	
	

.mainvisual{
	margin-bottom:8em;
	margin-top:1em;}


.kawaru,.kawaru2{
	width:800px;
	height:600px;}
	
	
.kaeru:hover + .kawaru{
	background:url(../img/1.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	
	}


.kaeru2:hover + .kawaru2{
	background:url(../img/4.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	}
	
	
.kaeru3:hover + .kawaru3{
	background:url(../img/7.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	}

.formwrap h3{font-family: 'Roboto', sans-serif;
font-weight:300;
margin-bottom:2em;
    letter-spacing: .2em;}

.formwrap{
	margin-bottom:15em;}
	
	.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:40%;
} 


iframe{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

.cominfo h3{
	margin-top:5em;
	margin-bottom:2em;
	font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;}

.cominfo p,li,th,td{letter-spacing: .08em;
 line-height: 27px;
font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;
font-size: 14px;
  color: #1a1a1a;
    font-weight: 400;
	text-align:right;
	}
	
.contents p,li{
	text-align:left!important;}

.pptt{margin-bottom: 2em;
text-align:left;
	font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;}
	
.artistgall{
	margin-top:5em;}
	
	.profie{letter-spacing: .08em;
 line-height: 27px;
font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;
font-size: 14px;
  color: #1a1a1a;
    font-weight: 400;
	}
	
	
.artistname{font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;
	text-align:left;}

.artistgall .col-sm-4{
	margin-top:4em;}	
	
	
	
	.conmen li{text-align:right!important;
}
	
	
	
#gallery {
    margin: 0 auto;
    overflow: hidden;
}
 
#gallery li {list-style:none!important;
    max-width: 340px;
    padding: 5px;
	
}


 
#gallery li img {
    max-width: 100%;
    height: auto;
}

.area li{
	display:inline-block;
	margin-right:1em;
	padding-right:1em;
	border-right:1px solid #ccc;}

.area a{color:#333;}

.mvs{
	width:70vw;
	height:80vh;
	background-size:cover;}
	
	.conmen li{
		line-height:3.4em;}
	
	.catch{color:#000;
		font-style:italic;
		margin-bottom:5em;
		padding-left:50px;}
	
	
	

hr.ee {
height: 1px;
background-color: #ccc;
border: none;
color: #ccc;

}	
	
	
.snsinfo a{color:#333;}

.artistpage{letter-spacing: .08em;
 line-height: 27px;
font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;
font-size: 14px;
  color: #1a1a1a;
    font-weight: 400;
	text-align:right;}
	
	
	.jptt{font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;
font-size: 16px;
margin-bottom:10px;
  color: #1a1a1a;
  border-bottom:1px solid #1a1a1a;
  text-align:left;
  line-height:1.6em;
    font-weight: 400;}

.prl{font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;
 line-height:1.8em;}

.formwrap{font-family: Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;}
 
   @media screen and (max-width: 768px) {
	 
	 #loader{left:30%;}
	 
	 }
 
 @media screen and (max-width: 767px) {
	 
	 #loader{left:12%;}
	 
	 .galbtm{
		 margin-top:30px;}
		 
#gallery{padding-left:0;}
	 }
	 
	
	/*2019/12/2edit*/
	
	.vim iframe{
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
}