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

/***
* common_sp.css
*/

@media only print, only screen and (min-width: 18.75em){
	
.pc{
	display:none;
}

.sp{
	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{
  position: relative;
}

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

/***
* layout
*/

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

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

/* header */

#header{
  width: 100%;
  padding: 18px 18px;
  position: fixed;
  z-index: 3334;
  background: #fff;
  pointer-events: none;
}

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

#logo{
  margin-right: 35px;
}

#nav li{
  display: inline-block;
}

#nav li::after{
  content: '/';
  padding: 0 2px 0 5px;
}

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

/* main */

#main{
  margin-left: 0;
  padding: 120px 18px 0;
  position: relative;
}

#main section{
  display: none;
}

#main section.active{
  display: block;
}

dt,
dd{
  float: left;
}

dl a{
  display: block;
}

/* works list */

.tabMain{
  padding-bottom: 20px;
}

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

.tabMain dl.show {
  opacity: 1;
}

.tabBtns,
.tabMain{
  float: none;
}

.tabBtns{
  width: 100%;
  padding: 20px 18px 4px;
  position: fixed;
  top: 50px;
  left: 0;
  background: #fff;
  z-index: 111;
}

.tabBtns li{
  display: inline-block;
}

.tabBtns li::after{
  content: '/';
  padding: 0 2px 0 5px;
}

.tabBtns li:last-child::after{
  display: none;
}

.tabCat{
  width: 100px;
}

.tabDat{
  width: 44px;
}

.tabTtl{
  width: calc(100% - 96px - 48px);
}

.tabBg{
  width: 100%;
  height: 40px;
  position: fixed;
  top: 85px;
  left: 0;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
  z-index: 1111;
}

/* works detail */

.tabInner{
  width: calc(100% - 110px - 18px);
  height: calc(100% - 60px);
  position: fixed;
  top: 68px;
  left: 118px;
  z-index: 3333;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

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

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

.tabInner span{
  display: block;
}

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

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

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

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

.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: 78px 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: 78px auto;
  mix-blend-mode: soft-light;;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1111;
  opacity: 1;
  transition-duration: 0.5s;
}

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

.tabInImg.land{
  width: 140px;
}

.tabInImg.sqre{
  width: 110px;
}

.tabInImg.port{
  width: 90px;
}

#tabPager{
  position: fixed;
  bottom: 18px;
  left: 118px;
  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;
}

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

/* biography */

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

#biography{
  margin-left: 100px;
  position: relative;
}

#biography .tabBtns{
  left: 118px;
  padding: 20px 0 4px;
}

#tabJp{
  font-size: 11px;
}

.biographyContent {
  display: block;
}

.tabBio {
  display: none;
}

.tabBio.en {
  display: block;
}

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

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

/* contact */

#contact{
  margin-left: 100px;
  position: relative;
}

#contact .tabBtns{
  left: 118px;
  padding: 20px 0 4px;
}

#contact .tabBtns li{
  display: block;
}

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

}