@charset "utf-8";

.img_wrap{
  width: 57.3rem;
  height: 38.0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
@media only screen and (max-width: 767px){
  .img_wrap{
    width: 33.5rem;
    height: 22.2rem;
  }
}


/*タイトル見切れ演出*/
.wrap_bg01{
  width: auto;
  height: 7.0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/*タイトル見切れ演出*/
.name_wrap01{
  width: auto;
  height: 6.0rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
@media only screen and (max-width: 767px){
  .name_wrap01{
    height: 16.1rem;
  }
}
.name_wrap02{
  height: 8.2rem;
}
@media only screen and (max-width: 767px){
  .name_wrap02{
    height: 16.1rem;
  }
  .name_wrap04{
    height: 12.1rem;
  }
}

.name_wrap03{
  height: 5.0rem;
}
@media only screen and (max-width: 767px){
  .name_wrap03{
    height: 6.4rem;
  }
}

/*アイキャッチ動き*/
.eye{
  opacity: 0;
  visibility: hidden;
}
.eye .js-mask{
  overflow: hidden;
}
.eye .js-mask-inner{
  display: inline-block;
  will-change: transform;
}

/* 背景ベタ塗りレイヤー（GSAPで上→下に伸びる） */
.eye .eye_bg{
  position: absolute;
  inset: 0;
  background-color: #835F48;
  transform: scaleY(0);
  transform-origin: top;
  z-index: 0;
}

/* 中身を前面に */
.eye > .inner01,
.eye > .inner02{
  position: relative;
  z-index: 1;
}
.eye > .inner01 .eye01{
  /* GSAPで左→右に広がる（clip-path方式） */
  clip-path: inset(0 100% 0 0);
}
.eye > .inner02 .quest{
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}


@media only screen and (max-width: 767px){
  /*初期非表示*/
  .sp_eye01{
    opacity: 0;
    visibility: hidden;
  }
  /* 背景色レイヤー（GSAPで上→下） */
  .sp_eye01 .sp_eye01_bg{
    position: absolute;
    inset: 0;
    background-color: #835F48;
    transform: scaleY(0);
    transform-origin: top;
    z-index: 0;
  }
  /* 中身を前面へ */
  .sp_eye01 .sp_eye01_01{
    position: relative;
    z-index: 1;
  }
  /* マスク */
  .sp_eye01 .js-mask{
    overflow: hidden;
  }
  /* 中身 */
  .sp_eye01 .js-mask-inner{
    display: block;
    will-change: transform;
  }
  /* 中身を動かすため */
  .sp_eye01 .eye_text01 .js-mask-inner{
    display: inline-block;
    will-change: transform;
  }
}