@charset "utf-8";

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

  mainvis
  
************************************************** */
#mainvis {
  background-image: url(../images/home/mainvis_bg_01.jpg);
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  overflow: hidden;
}
#mainvis .demo-button {
  width: 100%;
  position: absolute;
  left: 0;
  top: -160px;
}
#mainvis .demo-button .inner {
  box-sizing: border-box;
  text-align: left;
  display: block;
  max-width: 1600px;
  margin: 0px auto;
  padding: 0px 20px;
}
#mainvis .demo-button a {
  z-index: 1;
  position: relative;
}
#mainvis .demo-button a img {
  max-width: 275px;
  width: 100%;
}
#mainvis .inner-bg-lower { padding-top: 80px; }
#mainvis .mainvis-slider .slick-list { overflow: visible !important; }
#mainvis .mainvis-slider .slide .inner-900 { position: relative; }
#mainvis.demo .inner-bg-lower { padding-top: 130px; }

/* loaded */
body.loaded #mainvis .demo-button { top: 0px; }

@media screen and (max-width:1000px) {
body.loaded #mainvis .demo-button { top: -20px; }
}

@media screen and (max-width:767px) {
#mainvis .demo-button .inner { padding: 0px 10px; }
#mainvis .demo-button a img { width: 50%; }
#mainvis .inner-bg-lower { padding: 9.375% 0px; }
#mainvis.demo .inner-bg-lower { padding: 18.75% 0px 9.375%; }
}


/* --------------------------------------------------
  movie
-------------------------------------------------- */
#mainvis .mainvis-slider .slide .slide-movie {
  max-width: 655px;
  width: 72.77777777777778%;
  margin: 0px 0px 0px auto;
}
#mainvis .mainvis-slider .slide .slide-movie .movie {
  background: #fff;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
  position: relative;
}
#mainvis .mainvis-slider .slide .slide-movie .movie a { border-radius: 8px; }
#mainvis .mainvis-slider .slick-dots li button { background: #fff; }
#mainvis .mainvis-slider .slick-dots li button:hover,
#mainvis .mainvis-slider .slick-dots li.slick-active button { background: #f971ba; }

@media screen and (max-width:767px) {
#mainvis .mainvis-slider .slide .slide-movie {
  max-width: 100%;
  width: auto;
  margin: 0;
  padding: 0;
}
#mainvis .mainvis-slider .slide .slide-movie .movie {
  padding: 4px;
  border-radius: 4px;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}
#mainvis .mainvis-slider .slide .slide-movie .movie a { border-radius: 2px; }
}


/* --------------------------------------------------
  image
-------------------------------------------------- */
#mainvis .mainvis-slider .slide .slide-image .image {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
}
#mainvis .mainvis-slider .slide .slide-image .image a {
  background: #fff;
  display: block;
}
#mainvis .mainvis-slider .slide .slide-image .image img { width: 100%; }

@media screen and (max-width:767px) {
#mainvis .mainvis-slider .slide .slide-image {
  padding-top: 56.25%;
  position: relative;
}
#mainvis .mainvis-slider .slide .slide-image .image {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate3d(0,-50%,0);
  -moz-transform: translate3d(0,-50%,0);
  -ms-transform: translate3d(0,-50%,0);
  -o-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
  border-radius: 4px;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}
}



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

  news
  
************************************************** */
#news { margin-top: 100px; }
#news .news-content {
  background: #fff;
  text-align: left;
  margin: 0px auto;
  max-width: 900px;
  position: relative;
  border-radius: 10px;
}
#news .title {
  pointer-events: none;
  position: absolute;
  left: 10px;
  top: -60px;
}
#news .title img { width: 135px; }
#news .news-list { padding: 20px 10px 20px 38px; }
#news .news-scroll { max-height: 128px; }
#news .news-scroll .mCSB_container { margin-right: 20px !important; }
#news .news-scroll .mCSB_scrollTools_vertical { width: 8px; }
#news .news-scroll .mCSB_draggerRail { background: #f0f0e8; }
#news .news-scroll .mCSB_dragger_bar { background: #57c6da; }
#news .news-list .list {
  overflow: hidden;
  zoom: 1;
}
#news .news-list .list > * {
  line-height: 20px;
  padding: 6px 0px;
  border-top: 1px dashed #999;
}
#news .news-list .list > *:first-child,
#news .news-list .list > *:first-child + dd,
#news .news-list .list > *:first-child + dd + dd { border-top: none; }
#news .news-list .date {
  color: #57c6da;
  float: left;
  clear: left;
  width: 6em;
  padding-left: 1em;
}
#news .news-list .category {
  float: left;
  width: 8em;
}
#news .news-list .category .icon {
  font-size: 12px;
  color: #fff;
  display: block;
  background: #999;
  text-align: center;
  display: block;
  border-radius: 2px;
}
#news .news-list .text {
  margin-left: 15em;
  padding-left: 2em;
}
#news .news-list .text a:hover {
  text-decoration: none;
  color: #000;
}
#news .more { margin-top: 5%; }

@media screen and (max-width:1000px) {
#news .news-scroll { max-height: 160px; }
#news .news-list .list > * {
  padding: 0px;
  border: none;
}
#news .news-list .date { width: auto; }
#news .news-list .category { margin-left: 1em; }
#news .news-list .text {
  clear: left;
  margin: 0px 0px 8px;
  padding: 8px 0px;
  border-bottom: 1px dashed #999;
}
}

@media screen and (max-width:767px) {
#news { margin-top: 60px; }
#news .news-content { border-radius: 4px; }
#news .title { top: -48px; }
#news .title img { width: 108px; }
#news .news-scroll { max-height: 200px; }
#news .news-list { padding: 10px 10px 10px 20px; }
#news .news-list .list > * {
  font-size: 85.714%;
  line-height: 18px;
}
#news .news-list .text {
  margin: 0px 0px 5px;
  padding: 5px 0px;
}
#news .news-list .text:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border: none;
}
}



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

  studio
  
************************************************** */
#studio .section-content { position: relative; }
#studio .section-content:before { background: url(../images/home/studio_deco_02.png) no-repeat center center; }
#studio .section-content:after { background: url(../images/home/studio_deco_03.png) no-repeat center center; }
#studio .content { padding: 40px 0px; }
#studio .content .txt1 {
  max-width: 740px;
  margin: 0px auto;
}
#studio .content .txt1 img { width: 279px; }
#studio .studio-slider {
  background: #fff;
  max-width: 640px;
  margin: 5% auto 0px;
  border: solid 8px #fff;
  border-radius: 10px;
  position: relative;
  box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
}
#studio .studio-slider .slick-list {
  border-radius: 6px;
  overflow: hidden;
}
#studio .studio-slider:after {
  content: "";
  display: block;
  pointer-events: none;
  background: url(../images/home/studio_deco_01.png) no-repeat 0px 0px;
  background-size: 100% auto;
  height: 35px;
  width: 103px;
  position: absolute;
  top: -28px;
  right: 30px;
}
#studio .studio-slider .slick-list li img { width: 100%; }
#studio .studio-slider .slick-dots {
  font-size: 0;
  width: 100%;
  margin: 0px !important;
  padding: 0 !important;
  position: absolute;
  bottom: 10px;
  left: 0px;
}
#studio .more { margin-top: 5%; }

@media screen and (max-width:767px) {
#studio .content { padding: 2% 0px 4%; }
#studio .content .txt1 img { width: 200px; }
#studio .studio-slider {
  border: solid 4px #fff;
  border-radius: 4px;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}
#studio .studio-slider .slick-list { border-radius: 2px; }
#studio .studio-slider:after {
  width: 52px;
  top: -14px;
  right: 15px;
}
#studio .studio-slider .slick-dots { bottom: 6px; }
}



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

  works
  
************************************************** */
#works {
  background: url(../common/images/bg_02.png) repeat left top;
  overflow: hidden;
}
#works .section-content { background: url(../images/home/works_bg_01.png) no-repeat center center; }
#works .content { padding: 40px 0px; }
#works .content-carousel { margin-top: 0; }
#works .description + .content-carousel { margin-top: 5%; }
#works .content-carousel .slick-dots li button:hover { background: #45bcce; }
#works .content-carousel .slick-dots li.slick-active button { background: #45bcce; }
#works .more { margin-top: 5%; }

@media screen and (max-width:767px) {
#works { background-size: 100px auto; }
#works .content { padding: 2% 0px 4%; }
#works .section-content { background: none; }
}



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

  staff
  
************************************************** */
#staff {
  color: #fff;
  background: url(../images/home/staff_bg_01.jpg) no-repeat center top;
  background-size: cover;
}
#staff .section-content {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  position: relative;
}
#staff .section-content:after { background: url(../images/home/staff_deco_01.png) no-repeat center center; }
#staff .content { padding: 32px 0px; }
#staff .staffnav { margin-top: 4%; }
#staff .description + .staffnav { margin-top: 8%; }
#staff .staffnav ul {
  letter-spacing: -0.4em;
  text-align: center;
}
#staff .staffnav li {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
  max-width: 650px;
  margin: 0px 20px;
  position: relative;
}
#staff .staffnav li a:hover img {
  -ms-filter: "alpha(opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
#staff .staffnav li a img.over {
  width: 35.38461538461538%;
  position: absolute;
  bottom: 83.79888268156425%;
  left: -12.30769230769231%;
  /*
  -ms-filter: "alpha(opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform: translateY(50px) scale(0.5);
  -moz-transform: translateY(50px) scale(0.5);
  -ms-transform: translateY(50px) scale(0.5);
  -o-transform: translateY(50px) scale(0.5);
  transform: translateY(50px) scale(0.5);
  */
  -webkit-transition: all 0.4s cubic-bezier(.47,1.84,.61,1.16);
  -moz-transition: all 0.4s cubic-bezier(.47,1.84,.61,1.16);
  -ms-transition: all 0.4s cubic-bezier(.47,1.84,.61,1.16);
  -o-transition: all 0.4s cubic-bezier(.47,1.84,.61,1.16);
  transition: all 0.4s cubic-bezier(.47,1.84,.61,1.16);
}
#staff .staffnav li a:hover img.over {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  /*
  -ms-filter: "alpha(opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
  -webkit-transform: translateY(0px) scale(1);
  -moz-transform: translateY(0px) scale(1);
  -ms-transform: translateY(0px) scale(1);
  -o-transform: translateY(0px) scale(1);
  transform: translateY(0px) scale(1);
  */
}

@media screen and (max-width:767px) {
#staff .content { padding: 0; }
#staff .staffnav { margin-top: 8%; }
}


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

  interview
  
************************************************** */
#interview {
  background: url(../common/images/bg_02.png) repeat left top;
  overflow: hidden;
}
#interview .section-content { background: url(../images/home/interview_bg_01.png) no-repeat center center; }
#interview .content { padding: 40px 0px; }
#interview .description + .interview-inner { margin-top: 5%; }

@media screen and (max-width:767px) {
#interview { background-size: 100px auto; }
#interview .section-content { background: none; }
#interview .content { padding: 2% 0px 8%; }
}



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

  info
  
************************************************** */
#info {
  position: relative;
  overflow: hidden;
}
#info .inner-bg {
  display: block;
  content: "";
  background: url(../images/home/info_bg_01.jpg) no-repeat center bottom;
  background-size: cover;
  width: 100%;
  height: 110%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: top 0.01s ease-out;
  -moz-transition: top 0.01s ease-out;
  -ms-transition: top 0.01s ease-out;
  -o-transition: top 0.01s ease-out;
  transition: top 0.01s ease-out;
}
#info .section-content {
  padding: 50px 0px 80px;
  z-index: 2;
  position: relative;
}
#info .info-head,
#info .info-content {
  position: relative;
  z-index: 1;
}
#info .info-head .headline {
  font: 214.285% "Montserrat", sans-serif;
  color: #fff;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
  text-shadow: 0px 0px 4px rgba(0,0,0,0.2);
}
#info .info-content { margin-top: 5.555555555555556%; }
#info .info-wrap {
  overflow: hidden;
  zoom: 1;
}
#info .info-column1 {
  float: left;
  width: 53.33333333333333%;
}
#info .info-column2 {
  float: right;
  width: 44.44444444444444%;
}
#info .info-box1 {
  background: url(../images/home/info_box_bg_01.png) repeat left top;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 18px;
  border: 1px solid #fff;
}
#info .info-box1:first-child { margin-top: 0px !important; }
#info .info-box1 .inner {
  background: #fff;
  padding: 20px;
}
#info .info-box1 .subtitle {
  letter-spacing: -0.4em;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px dotted #63dae3;
}
#info .info-box1 .subtitle span {
  line-height: 1;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: bottom;
}
#info .info-box1 .subtitle span.en {
  font-family: "Montserrat", sans-serif;
  font-size: 178.571%;
  color: #00b6d7;
}
#info .info-box1 .subtitle .jp {
  font-size: 128.571%;
  color: #9eb3bf;
  margin-left: 0.8em;
}
#info .info-box1 .txt1 {
  font-size: 128.571%;
  color: #645d5d;
}
#info .info-box1 .more { margin-top: 7.936507936507937%; }

#info .info-box2 {
  background: url(../images/home/info_box_bg_02.png) repeat left top;
  box-sizing: border-box;
  height: 100%;
  padding: 12px;
  margin-top: 18px;
  border: 1px solid #fff;
}
#info .info-box2:first-child { margin-top: 0px !important; }
#info .info-box2 .inner {
  background: #fff;
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
}
#info .info-box2 .twitter { height: 100%; }
#info .info-box2 .twitter iframe {
  width: 100% !important;
  height: 100% !important;
}

@media screen and (max-width:767px) {
#info .inner-bg { height: 100%; }
}

@media screen and (max-width:767px) {
#info .info-head .headline { font-size: 171.428%; }
#info .info-box1 .subtitle span.en { font-size: 142.857%; }
#info .info-box1 .subtitle .jp { font-size: 100%; }
#info .section-content { padding: 9.375% 0px 14.0625%; }
#info .info-column1,
#info .info-column2 {
  float: none;
  width: auto;
}
#info .info-column1 { height: auto !important; }
#info .info-column2 {
  height: auto !important;
  margin-top: 10px;
}
#info .info-box1,
#info .info-box2 {
  padding: 8px;
  margin-top: 10px;
}
#info .info-box1 .inner ,
#info .info-box2 .inner  { padding: 16px; }
#info .info-box1 .subtitle { border-width: 1px; }
#info .info-box1 .txt1 { font-size: 85.714%; }
#info .info-box2 .twitter iframe { height: 400px !important; }
}