@charset "UTF-8";
/* CSS Document */

/***
* common_pc.css
*/

@media only print, only screen and (min-width: 1000px){

.sp{
	display:none;
}

.pc{
	display:block;
}

.jp{
  font-family: "Rhymes", "Ryumin Medium KL", "Times New Roman", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-feature-settings: "palt" 1;
}

a{
  color: #000;
  position: relative;
  transition-duration: 0.5s;
}

a:hover{
  color: #ccc;
  transition-duration: 0.5s;
}

#logo a:hover{
  color: #000;
  transition-duration: 0.5s;
}

#nav li.active a::after,
.tabBtns li.active a::after{
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
}

#nav li:hover a::after,
.tabBtns li:hover a::after{
  background: #ccc;
  transition-duration: 0.5s;
}

/***
* layout
*/

#wrapper{
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  opacity: 0;
}

#wrapper .eng{
  font-size: 15px;
  position: relative;
  top: -0.5px;
}

/* header */

#header{
  width: auto;
  padding: 10px 20px;
  position: fixed;
  z-index: 3333;
  background: none;
  pointer-events: none;
}

#logo,
#nav{
  float: left;
  pointer-events: auto;
}

#logo{
  margin-right: 40px;
}

#nav li{
  display: block;
}

#nav li::after{
  display: none;
}

/* main */

#main{
  margin-left: 378px;
  padding: 10px;
  position: relative;
}

#main section{
  display: none;
}

#main section.active{
  display: block;
}

dt,
dd{
  float: left;
}

dl a{
  display: block;
}

/* works list */

.tabMain{
  padding-bottom: 10px;
}

.tabMain dl {
  opacity: 0;
  transition: 0.5s;
}

.tabMain dl.show {
  opacity: 1;
}

.tabInner a{
  display: inline-block;
  position: relative;
  color: #000;
  transition-duration: 0.5s;
}

.tabInner a:hover{
  color: #ccc;
}

.tabInner a::before{
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  right: 0;
  bottom: 2px;
  background: #000;
  transition-duration: 0.5s;
}

.tabInner a::after{
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  right: -20px;
  background: url("../img/icon_arrow.svg") center right no-repeat;
  background-size: 12px auto;
  transition-duration: 0.5s;
}

.tabInner a:hover::before{
  background: #ccc;
  transition-duration: 0.5s;
}
.tabInner a:hover::after{
  opacity: 0.3;
}

.tabBtns,
.tabMain{
  float: left;
}

.tabBtns{
  width: auto;
  padding: 0;
  position: fixed;
  top: 10px;
  left: 250px;
  background: none;
  z-index: 1111;
}

.tabBtns li{
  display: block;
}

.tabBtns li::after{
  display: none;
}

.tabCat{
  width: 118px;
}

.tabDat{
  width: 52px;
}

.tabTtl{
  width: auto !important;
}

/* works detail */

.tabInner{
  width: auto;
  height: auto;
  position: fixed;
  top: 10px;
  left: 250px;
  padding: 0;
  z-index: 3333;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

.tabInner.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

.tabInTtl{
  height: 21px;
  margin-bottom: 1em;
}

.tabInner span{
  display: block;
}

.tabInner span.eng{
  display: inline-block;
}

.tabInner p{
  margin-bottom: 10px;
}

.tabInImg{
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.tabInImg::before{
  content: '';
  width: 100%;
  height: 100%;
  background: url("../img/bg_halftone.jpg") center;
  background-size: 96px auto;
  mix-blend-mode: soft-light;;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1110;
  opacity: 1;
  transition-duration: 0.5s;
}

.tabInImg::after{
  content: '';
  width: 100%;
  height: 100%;
  background: url("../img/bg_halftone.jpg") center;
  background-size: 96px auto;
  mix-blend-mode: soft-light;;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1111;
  opacity: 1;
  transition-duration: 0.5s;
}

.tabInImg img{
  filter: grayscale(100%);
  transition-duration: 0.5s;
}

.tabInImg:hover::before,
.tabInImg:hover::after{
  opacity: 0;
  transition-duration: 0.5s;
}

.tabInImg:hover img{
  filter: grayscale(0%);
  transition-duration: 0.5s;
}

.tabInImg.land{
  width: 140px;
}

.tabInImg.sqre{
  width: 110px;
}

.tabInImg.port{
  width: 90px;
}

#tabPager{
  position: fixed;
  bottom: 18px;
  left: 250px;
  z-index: 3333;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

#tabPager.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#tabPager li{
  display: inline-block;
}

#tabPager li::after{
  content: '/';
  padding: 0 0.4em 0 0.6em;
}

#tabPager li:last-child::after{
  display: none;
}

#closeOverlay{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3332;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
  cursor: auto;
}

#closeOverlay.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
  cursor: url("data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C%21--%20Generator%3A%20Adobe%20Illustrator%2027.9.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Crect%20x%3D%229.7065277%22%20y%3D%22-3.8486631%22%20transform%3D%22matrix%280.7071068%20-0.7071068%200.7071068%200.7071068%20-4.1421356%2010%29%22%20width%3D%220.5869453%22%20height%3D%2227.6973267%22/%3E%3Crect%20x%3D%22-3.8486631%22%20y%3D%229.7065277%22%20transform%3D%22matrix%280.7071068%20-0.7071068%200.7071068%200.7071068%20-4.1421356%2010%29%22%20width%3D%2227.6973267%22%20height%3D%220.5869453%22/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E") 10 10, auto;
}

/* biography */

#biography,
#contact{
  position: relative;
  z-index: 3333;
}

#biography{
  margin-left: 0;
  position: relative;
}

#biography .tabBtns{
  padding: 0;
  left: 250px;
}

#biography .tabBtns li{
  line-height: 1.4;
}

#tabJp{
  font-size: 14px;
}

.biographyContent{
  display: block;
}

.tabBio {
  display: none;
}

.tabBio.en {
  display: block;
}

#biography .en{
  line-height: 1.2;
}

#biography .jp{
  font-size: 14px;
  line-height: 1.5;
  display: none;
  text-align: justify;
}

.biographyContent .tabBio .jp {
  display: block !important
}

/* contact */

#contact{
  margin-left: 0;
  position: relative;
}

#contact .tabBtns{
  padding: 0;
  left: 250px;
}

#header a{
  cursor: auto;
}

}

@media only print, only screen and (min-width: 1800px){


#wrapper{
  font-size: 17px;
}

#wrapper .eng{
  font-size: 18px;
}

#logo{
  margin-right: 53px;
}

.tabBtns{
  left: 300px;
}

#biography .tabBtns,
#contact .tabBtns{
  left: 300px;
}

#main{
  margin-left: 460px;
}

.tabInner{
  left: 460px;
}

.tabCat{
  width: 125px;
}

.tabDat{
  width: 55px;
}

.tabTtl{
  width: auto !important;
}

#tabJp{
  font-size: 16px;
}

#biography .jp{
  font-size: 16px;
}

#tabPager{
  left: 460px;
}

}