@charset "UTF-8";

.page-about {
  font-size: 16px;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: normal;
}

.-wrapper {
  max-width: 857px;
  width: 90%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {

  .-wrapper {
    width: 89.333%;
  }

}

/* top */

.top {
}

.top-wrapper {
  padding: 76px 0 100px;
}

.top-lead {
  width: 100%;
  margin: 0 auto 41px;
}

.top-img {
  width: 76.137%;
  margin: 0 auto 60px;
}

.top-chatch {
  width: 83.899%;
  margin: 0 auto 41px 0;
}

.top-txt {
  line-height: 2;
}

.top-txt-item {
  margin: 0 0 45px;
}

.top-txt-item:last-child {
  margin: 0;
}

@media screen and (max-width: 768px) {

  .top-wrapper {
    padding: 90px 0 50px;
  }
  
  .top-lead {
    margin: 0 auto 20px;
  }
  
  .top-img {
    width: 95.522%;
    margin: 0 auto 40px;
  }
  
  .top-chatch {
    width: 91.656%;
    margin: 0 auto 32px 0;
  }
  
  .top-txt {
    font-size: 13px;
    line-height: 1.8;
  }
  
  .top-txt-item {
    margin: 0 0 30px;
  }

}


/* slide */

.slide_01 {
  width: 100%;
  height: 183px;
  background-image: url(../img/about/slide_01.jpg);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto 100%;
  margin: 0 0 20px;
  animation: bgslide_01 25s linear infinite;
  -webkit-animation: bgslide_01 25s linear infinite;
}

@-webkit-keyframes bgslide_01 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1525px 0;
  }
}

@keyframes bgslide_01 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1525px 0;
  }
}

.slide_02 {
  width: 100%;
  height: 183px;
  background-image: url(../img/about/slide_02.jpg);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto 100%;
  margin: 0 0 20px;
  animation: bgslide_02 30s linear infinite;
  -webkit-animation: bgslide_02 30s linear infinite;
}

@-webkit-keyframes bgslide_02 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1830px 0;
  }
}

@keyframes bgslide_02 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1830px 0;
  }
}

.slide_sp {
  display: none;
}

@media screen and (max-width: 768px) {

  .slide_01 {
    display: none;
  }

  .slide_02 {
    display: none;
  }

  .slide_sp {
    display: block;
  }

}


/* cast */

.cast {
}

.cast-wrapper {
  padding: 160px 0 110px;
}

.cast-ttl {
  width: 33.273%;
  margin: 0 auto 30px;
}

.cast-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cast-box.maincast .cast-list-item {
  width: 48.658%;
  margin: 0 0 64px;
}

.cast-box.subcast .cast-list-item {
  width: 31.505%;
  margin: 0 0 50px;
}

.cast-box.maincast .cast-list-item.yokohama,.cast-box.maincast .cast-list-item.tabe {
  margin: 0 0 50px;
}

.cast-list-item-ph {
  position: relative;
  width: 100%;
  margin: 0 auto 25px;
  opacity: 1;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.cast-list-item-ph:hover {
  opacity: 0.7;
}

.cast-list-item-ph .-open {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
}

.cast-list-item-name {
  margin: 0 auto 25px;
}

.cast-box.maincast .cast-list-item.hirose .cast-list-item-name {
  width: 44.52%;
}

.cast-box.maincast .cast-list-item.matsuzaka .cast-list-item-name {
  width: 47.163%;
}

.cast-box.maincast .cast-list-item.yokohama .cast-list-item-name {
  width: 48.508%;
}

.cast-box.maincast .cast-list-item.tabe .cast-list-item-name {
  width: 42.702%;
}

.cast-box.subcast .cast-list-item.shuri .cast-list-item-name {
  width: 52.37%;
}

.cast-box.subcast .cast-list-item.miura .cast-list-item-name {
  width: 99.24%;
}

.cast-box.subcast .cast-list-item.shiratori .cast-list-item-name {
  width: 93.444%;
}

.cast-box.subcast .cast-list-item.masuda .cast-list-item-name {
  width: 62.637%;
}

.cast-box.subcast .cast-list-item.uchida .cast-list-item-name {
  width: 66.566%;
}

.cast-box.subcast .cast-list-item.emoto .cast-list-item-name {
  width: 49.981%;
}

.cast-list-item-txt {
  font-size: 15px;
  text-align: center;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {

  .cast-wrapper {
    padding: 100px 0 61px;
  }
  
  .cast-ttl {
    width: 45.671%;
    margin: 0 auto 50px;
  }
  
  .cast-list {
    flex-direction: column;
    justify-content: center;
  }
  
  .cast-box.maincast .cast-list-item {
    width: 100%;
    margin: 0 0 40px;
  }
  
  .cast-box.subcast .cast-list-item {
    width: 64.776%;
    margin: 0 auto 40px;
  }
  
  .cast-box.maincast .cast-list-item.yokohama,.cast-box.maincast .cast-list-item.tabe {
    margin: 0 0 40px;
  }
  
  .cast-list-item-ph {
    margin: 0 auto 20px;
  }
  
  .cast-list-item-name {
    margin: 0 auto 20px;
  }
  
  .cast-box.maincast .cast-list-item.hirose .cast-list-item-name {
    width: 45.749%;
  }
  
  .cast-box.maincast .cast-list-item.matsuzaka .cast-list-item-name {
    width: 48.478%;
  }
  
  .cast-box.maincast .cast-list-item.yokohama .cast-list-item-name {
    width: 49.85%;
  }
  
  .cast-box.maincast .cast-list-item.tabe .cast-list-item-name {
    width: 43.883%;
  }
  
  .cast-box.subcast .cast-list-item.shuri .cast-list-item-name {
    width: 53.792%;
  }
  
  .cast-box.subcast .cast-list-item.miura .cast-list-item-name {
    width: 101.94%;
  }
  
  .cast-box.subcast .cast-list-item.shiratori .cast-list-item-name {
    width: 95.986%;
  }
  
  .cast-box.subcast .cast-list-item.masuda .cast-list-item-name {
    width: 64.341%;
  }
  
  .cast-box.subcast .cast-list-item.uchida .cast-list-item-name {
    width: 68.377%;
  }
  
  .cast-box.subcast .cast-list-item.emoto .cast-list-item-name {
    width: 51.395%;
  }
  
  .cast-list-item-txt {
    font-size: 13px;
  }

}



/* staff */

.staff {
}

.staff-wrapper {
  padding: 0 0 130px;
}

.staff-ttl {
  width: 33.237%;
  margin: 0 auto 30px;
}

.staff-director {
  width: 48.658%;
  margin: 0 auto 63px;
}

.staff-director-ph {
  position: relative;
  width: 100%;
  margin: 0 auto 25px;
  opacity: 1;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.staff-director-ph:hover {
  opacity: 0.7;
}

.staff-director-ph .-open {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
}

.staff-director-name {
  width: 24.601%;
  margin: 0 auto;
}

.staff-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.staff-list-item {
  width: 48.658%;
  margin: 0 0 100px;
}

.staff-list-item-ph {
  position: relative;
  width: 100%;
  margin: 0 auto 25px;
  opacity: 1;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.staff-list-item-ph:hover {
  opacity: 0.7;
}

.staff-list-item-ph .-open {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
}

.staff-list-item.hong .staff-list-item-name {
  width: 39.184%;
  margin: 0 auto;
}

.staff-list-item.hara .staff-list-item-name {
  width: 26.937%;
  margin: 0 auto;
}

.staff-original {
  width: 100%;
  margin: 0 auto;
  padding: 41px 2.8% 49px;
  border: 1px solid #29B5B2;
}

.staff-original-ph {
  width: 51.672%;
  margin: 0 auto 25px;
}

.staff-original-name {
  width: 11.472%;
  margin: 0 auto 40px;
}

.staff-original-txt {
  font-size: 15px;
  line-height: 2;
}


@media screen and (max-width: 768px) {

  .staff-wrapper {
    padding: 0 0 117px;
  }
  
  .staff-ttl {
    width: 45.671%;
    margin: 0 auto 30px;
  }
  
  .staff-director {
    width: 100%;
    margin: 0 auto 39px;
  }
  
  .staff-director-ph {
    margin: 0 auto 20px;
  }
  
  .staff-director-name {
    width: 25.28%;
  }
  
  .staff-list {
    flex-direction: column;
    justify-content: center;
  }
  
  .staff-list-item {
    width: 100%;
    margin: 0 0 40px;
  }
  
  .staff-list-item-ph {
    margin: 0 auto 20px;
  }
  
  .staff-list-item.hong .staff-list-item-name {
    width: 40.268%;
    margin: 0 auto;
  }
  
  .staff-list-item.hara .staff-list-item-name {
    width: 27.683%;
    margin: 0 auto;
  }
  
  .staff-original {
    width: 100%;
    margin: 0 auto;
    padding: 27px 8.059% 39px;
  }
  
  .staff-original-ph {
    width: 100%;
    margin: 0 auto 20px;
  }
  
  .staff-original-name {
    width: 27.364%;
  }

}


/* imgarea */

.imgarea {
  width: 100%;
}


/* last */

.last {
  background-image: url(../img/about/last_bg.jpg);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.last-wrapper {
  padding: 12.591vw 0 37.335vw;
}

.last-logo {
  width: 30.483%;
  margin: 0 auto 36px;
}

.last-credit {
  width: 40.409%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {

  .last {
    background-image: url(../img/about/last_bg_sp.jpg);
  }
  
  .last-wrapper {
    padding: 26.08vw 0 38.4vw;
  }
  
  .last-logo {
    width: 70.2%;
    margin: 0 auto 33px;
  }
  
  .last-credit {
    width: 93.333%;
  }

}

/* colorbox */

#cboxWrapper.-border #cboxLoadedContent {
  border: 2px solid #29B5B2;
}

.-lb #cboxClose {
	position: absolute;
	top: 0;
	right: -2px;
	display: block;
	background: url(../../full/img/about/modal/modal_close.png) center center no-repeat;
	background-size: contain;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	transition: 0.2s all;
	z-index: 200;
}

.commentModal #cboxClose {
	position: absolute;
	top: 5px;
	right: 5px;
	display: block;
	background: url("../img/top/btn_comment_close.svg") center center no-repeat;
	width: 44px;
	height: 44px;
	text-indent: -9999px;
	transition: all .5s;
	z-index: 200;
}

.creditModal #cboxClose {
	position: absolute;
	top: 5px;
	right: 5px;
	display: block;
	background: url("../img/top/btn_comment_close.svg") center center no-repeat;
	width: 44px;
	height: 44px;
	text-indent: -9999px;
	transition: all .5s;
	z-index: 200;
}


/* drawer */

.drawer_btn {
  width: 60px;
  position: fixed;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 100;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4F0EE;
  display: none;
  z-index: 101;
}

.drawer-close {
  width: 60px;
  position: fixed;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 101;
}

.drawer-wrapper {
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.drawer-logo {
  width: 52%;
  margin: 0 auto 7% auto;
}

.drawer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 3% 0;
}

.drawer-menu-item {
  width: 32%;
  margin: 0 0 2.5% 0;
  transition: 0.3s;
}

.drawer-menu-item:nth-child(1) {
  width: 44%;
  margin: 0 27% 2.5% 27%;
}

.drawer-menu-item:hover {
  opacity: 0.8;
}

.drawer-sns {
  display: flex;
  justify-content: center;
}

.drawer-sns-item {
  width: 50px;
  margin: 0 15px;
  transition: 0.3s;
}

.drawer-sns-item:hover {
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  
  .drawer_btn {
    width: 10.666%;
  }
  
  .drawer {
  }
  
  .drawer-close {
    width: 10.666%;
  }
  
  .drawer-wrapper {
    width: 93.33%;
    top: 15%;
    transform: translateY(0);
  }
  
  .drawer-logo {
    width: 75.14%;
    margin: 0 auto 14.28% auto;
  }
  
  .drawer-menu {
    margin: 0 0 7.4% 0;
  }
  
  .drawer-menu-item {
    width: 49.142%;
    margin: 0 0 2.7% 0;
  }
  
  .drawer-menu-item:nth-child(1) {
    width: 100%;
    margin: 0 0% 2.7% 0%;
  }
  
  .drawer-sns-item {
    width: 9.4%;
    margin: 0 3%;
  }
}

@-webkit-keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpSmall {
  -webkit-animation-name: fadeInUpSmall;
  animation-name: fadeInUpSmall;
}