@charset "UTF-8";

/* 共通部分 */

body {
  font-family: 'Zen Old Mincho', serif;
  line-height: 1.7;
  letter-spacing: 0px;
  text-align: center;
  background: #000;
}
a {
  text-decoration: none;
}
ul {
  text-decoration: none;
  list-style: none;
}
h1 {
  font-family: 'Zen Old Mincho', serif; 
  font-size: 6vw;
  font-weight: 700;
  color: #444;
  letter-spacing: 5px;
  text-align: center;
}
h2 {
  font-family: 'Zen Old Mincho', serif;
  font-size: 5vw;
  font-weight: 900;
  color: #222;
  line-height: 1.3;
}
h3 {
  font-size: 1.9vw;
  color: #222;
  font-weight: 700;
  line-height: 1.3;
  font-family: 'Zen Old Mincho', serif;
}
h4 {
  font-size: 1.6vw;
  color: #555;
}
h5 {
  font-size: 1.5vw;
  color: #555;
}
p {
  font-size: 1.3vw;
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;
  color: #222;
}
img {
  border: 0;
}

#top {
  position: relative;
  background: #000;
}

/* メニュー */

header {
  display: flex;
  justify-content: space-between;
  z-index: 15;
  margin-top: 1vw;
  position: fixed;
  width: 100%;
}
.logo-s {
  z-index: 13;
}
.logo-s img{
  width: 7vw;
  margin-left: 2vw;  
}
.menu {
  /* position: fixed; */
  z-index: 14;
  display: flex;
  justify-content: flex-end;
  margin-right: 2vw;
}
.menu img {
  width: 2vw;
  margin-left: 2vw;
}


/* 映像 */
 
/* -----slick----- */

.top-back img {
  /* margin-top: 50px; */
  width: 100vw;  
  margin-bottom: 18px;
  background-attachment: fixed;
  z-index: -10;
}

.top-back img[data-emergence=hidden] {
  /* 指定した領域から外れたときの処理 */
  opacity:0;
}

.top-back img[data-emergence=visible] {
  /* 指定した領域に入ったときの処理 */
  opacity:1;
}

.logo {
  position: absolute;
  top: 11vw;  
  left: 35vw;
}
.logo img {
  width: 30vw;
  animation: FadeIn 10s;
}
  @keyframes FadeIn {
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }

/* セリフ */
#word {
  position: relative;
  /* margin-bottom: 10vw; */
  z-index: -9;
  background: #000;
}

.wodr-g1 {
  position: absolute;
}
.word-g1[data-emergence=hidden] {
  /* 指定した領域から外れたときの処理 */
  opacity:0;
}
.word-g1[data-emergence=visible] {
  /* 指定した領域に入ったときの処理 */
  /* opacity:1; */
  animation: fadeIn 0.7s ease 0.1s 1 normal backwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(50vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.word-g1 h2 {
  color: #333;
  line-height: 1.5;
  font-size: 5vw;
}
/* ------------- */

.word-g2{
  position: absolute;
  top: 5vw;
  left: 0;
}
.word-g2[data-emergence=hidden] {
  /* 指定した領域から外れたときの処理 */
  opacity:0;
}
.word-g2[data-emergence=visible] {
  /* 指定した領域に入ったときの処理 */
  opacity:1;
  animation: bounce 1s ease 0.2s 1 normal backwards;
  animation-delay: 0.3s;
}
@keyframes bounce {
  from {
    opacity: 0;
    transform: translateY(-50vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.word-g2 h2 {
  color:#444;
  font-size: 4vw;
}

/* ------------- */

.word-g3{
  position: absolute;
  top: 10vw;
  left: 3vw;
}
.word-g3[data-emergence=hidden] {
  /* 指定した領域から外れたときの処理 */
  opacity:0;
}
.word-g3[data-emergence=visible] {
  /* 指定した領域に入ったときの処理 */
  opacity:1;
  animation: fadeinl 1.1s ease 0.3s 1 normal backwards;
  animation-delay: 0.6s;
}
@keyframes fadeinl {
  from {
    opacity: 0;
    transform: translateX(-50vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.word-g3 h2 {
  color:#222;
  font-size: 4.5vw;
}

/* ------------- */

.word-g4{
  position: absolute;
  top: 15vw;
  left: 1vw;
}
.word-g4[data-emergence=hidden] {
  /* 指定した領域から外れたときの処理 */
  opacity:0;
}
.word-g4[data-emergence=visible] {
  /* 指定した領域に入ったときの処理 */
  opacity:1;
  animation: fadeinb 1.2s ease 0.4s 1 normal backwards;
  animation-delay: 0.3s;
}
@keyframes fadeinb {
  from {
    opacity: 0;
    transform: translatey(50vw);
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}
.word-g3 h4 {
  color:#111;
  font-size: 5vw;
}

/* ------------- */

.word-main{
  position: absolute;
  top: 2vw;
  /* text-align: center; */
  left: 25vw;
  color: #fff;
}
.word-main[data-emergence=hidden] {
  /* 指定した領域から外れたときの処理 */
  opacity:0;
}
.word-main[data-emergence=visible] {
  /* 指定した領域に入ったときの処理 */
  opacity:1;
  animation: main 0.7s ease 0.3s normal backwards;
  animation-delay: 1s;
}
@keyframes main {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.word-main img {
  width: 50vw;
}

/* 田んぼのシャーマンとは */

.wrapper {
  margin-left: 7vw;
  margin-right: 7vw;
}
.aboutimg {
  z-index: 30;
  /* margin-top: -100px; */
  margin-bottom: 150px;
  margin-top: 200px;
  background: #000;
}

/* タイトル */
.title {
  padding-top: 120px;
  padding-bottom: 100px;
}
.title-h2 {
  color: #888;
  font-size: 3vw;
  padding-bottom: 60px;
  font-weight: 400;
}

/* 公演情報 */

#play {
  background: #bbb;
  padding-bottom: 80px;
}
#play img {
  width: 90vw;
}
#play .yoyaku-btn {
  /* width: 50vw; */
  padding: 3px 4px;
  width: 90vw;
  background-color: #ffe000;
  margin: 50px auto;
}
.yoyaku-btn h4 {
  font-size: 4vw;
}
.yoyaku-btn:hover {
  /* background: #222; */
  box-shadow:0 0 9px #000;
}

/* 新着情報 */

#new {
  background: #444;
  padding-bottom: 100px;
}
#new h1 {
  color: #fff;
}
#new a{
  width: 300px;
  height: 315px;
  margin-bottom: 100px;
}
.twitter-timeline{
  margin: 0 auto;
}



/* 過去公演 */

#past h1 {
  color: #fff;
}
#past {
  color: #000;
}
.past-gintetu {
  background-image: url("../image/back-gin.jpg");
  background-size: 100vw;
  padding-bottom: 40px;
  padding-top: 20px;
}
.past-chaku {
  background-image: url("../image/chaku-back.jpg");
  background-size: 100vw;
  padding-bottom: 40px;
  padding-top: 20px;
}
.past-niji {
  background-image: url("../image/niji-back.jpg");
  background-size: 100vw;
  padding-bottom: 40px;
  padding-top: 20px;
}
.past-ham {
  background-image: url("../image/ham-back.jpg");
  background-size: 100vw;
  padding-bottom: 40px;
  padding-top: 20px;
}
.past-kiri {
  background-image: url("../image/kiri-back.jpg");
  background-size: 100vw;
  padding-bottom: 40px;
  padding-top: 20px;
}
.past-play {
  display: flex;
  margin-top: 100px;
  margin-bottom: 100px;
}
.past-img {
  width: 25vw;
  margin-left: 10vw;
}
.past-img img {
  width: 100%;
  margin-bottom: 20px;
}
.past-art {
  width: 61vw;
  text-align: left;
  margin-left: 4vw;
  margin-right: 10vw;
}
#past h3 {
  color: #bbb;
  margin-top: 0px;
  font-size: 3vw;
  letter-spacing: 1.6;
}
#past p {
  color: #bbb;
}
.past-v {
  width: 100%;
  margin-top: 30px;
  height: 28vw;
}
.kiri-video {
  width: 100%;
}
/* 映像作品 */

.video {
  background-image: url("../image/audition-back.png");
  background-size: 100vw;
}
.video-contents {
  display: flex;
  margin-top: 50px;
  margin-bottom: 100px;
}
.video-img {
  margin-bottom: 100px;
  width: 45vw;
  border: #333 solid 0.5px;
  background: #000;
  margin-left: 10vw;

}
.video-img:hover {
  box-shadow:0 0 9px #777;
}
.video-contents img {
  width: 100%;
}
.video-art {
  margin-left: 30px;
  text-align: left;
}
.ale {
  height: 100%;
  /* background: #333; */
  /* border-radius: 10px; */
}
.ale img {
  margin-top: 10px;
  width: 50%;
  border: #666 solid 0.5px;
  background: #bbb;
}
.ale img:hover {
  background: #222;
  box-shadow:0 0 9px #fff;
}

/* ボイスドラマ */

.voice {
  background: #bbb;
  padding-bottom: 100px;
}
.wrapper2 {
  margin: 60px 10vw;
}
.voice .title-h2 {
  padding-top: 100px;
  color: #333;
}
.voice-contents {
  display: flex;
}
.voice-contents iframe{
  width: 65%;
}
.voice-art {
  width: 30%;
  margin-left: 30px;
  text-align: left;
}
#past .voice-art h3 {
  color: #333;
}
#past .voice-art p{
  color: #333;
}
.lion{
  letter-spacing: -3px;
}
/* 主宰プロフィール */

#actor {
  background: #000;
  text-align: left;
  margin-bottom: 100px;
}
#actor h3{
  color: #ddd;
  font-size: 1.9vw;
}
#actor p{
  color: #777;
}
.keta-s {
  display: flex;
  justify-content: space-between;
  width: 80vw;
  margin-top: 1vw;
}
.keta-img {
  height: 30vw;
}
.keta-s img {
  /* width: auto; */
  height: 10vw;
  margin-right: 2vw;
}

/* ご連絡 */
#contact {
  background: #bbb;
  padding-bottom: 100px;
}
/* リンク */
.link {
  background: #222;
  display: flex;
  justify-content: center;
}
.link img{
  background: #777;
  width: 25vw;
  height: 6vw;
  margin: 20px 10px;
}

footer {
  height: 60px;
}
footer p {
  margin-top: 22px;
  color: #bbb;
}