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

html,
body {
  overflow-x: clip; /* 対応弱いなら hidden に */
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffeb;
  color: #32231c;
  font-size: 18px;
  line-height: 1.66em;
  font-family: "DNPShueiYMinStd-M", "秀英横太明朝 M";
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

p {
  margin-bottom: 1.5em;
}
span {
  display: inline-block;
}

.pc {
  display: block;
}
.sp {
  display: none;
}

.font60 {
  font-size: 0.6em;
}

/* -------------------------------------------------
LOADING
-------------------------------------------------*/
#loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ffffeb;
  z-index: 2147483647;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading picture {
  margin: 0 auto;
  display: block;
  width: 50px;
  height: auto;
  user-select: none;
  animation: 2s linear infinite rotation1;
}

#loading picture img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes rotation1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* -------------------------------------------------
OVERLAY（MENU用）
-------------------------------------------------*/
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffeb;
  opacity: 0.95;
  z-index: 14;
  display: none;
}

/* -------------------------------------------------
MENU
-------------------------------------------------*/
#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  display: none;
}

#menu-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

#inner {
  width: 100%;
  max-width: 1200px;
}

.hamburger {
  width: 97px;
  height: 63px;
  padding: 10px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 30;
  mix-blend-mode: difference;
}

.hamburger__line {
  position: absolute;
  width: 77px;
  height: 3px;
  background: #fff;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}

.hamburger__line:nth-child(1) {
  transform: translateY(-14px);
}
.hamburger__line:nth-child(2) {
  transform: translateY(0);
}
.hamburger__line:nth-child(3) {
  transform: translateY(14px);
}

/* 開いた状態（×） */
.hamburger.is-open .hamburger__line:nth-child(1) {
  transform: rotate(30deg);
}
.hamburger.is-open .hamburger__line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open .hamburger__line:nth-child(3) {
  transform: rotate(-30deg);
}

ul#menuList {
  letter-spacing: 0.25em;
  font-size: 30px;
  text-indent: 0.1em;
  z-index: 30;
  display: block;
  margin: 0 auto;
}

ul#menuList li a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 40px;
  cursor: pointer;
}

ul.snsList {
  margin-top: 30px;
}

/* -------------------------------------------------
CONTENT FADE IN
-------------------------------------------------*/

.fade-section {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------
MAIN
-------------------------------------------------*/

.main {
  max-width: 1000px;
  margin: 0 auto;
}

.main h1 {
  text-align: center;
  margin: 55px 0;
}

.main h1 img {
  width: 835px;
  height: auto;
}

.main h2 {
  text-align: center;
  margin: 60px 0 60px 0;
  font-size: 30px;
  line-height: 1.5;
}

.main-pic-container {
  width: 100%;
  height: 833px;
  position: relative;
}

.main-pic-container > div {
  opacity: 0;
  transition: opacity 2s ease;
}

.main-pic-container > div.is-show {
  opacity: 1;
}

.main-pic-container img {
  width: 100%;
  height: auto;
}

.main-pic-container .main-pic1,
.main-pic-container .main-pic2,
.main-pic-container .main-pic3,
.main-pic-container .main-pic4,
.main-pic-container .main-pic5,
.main-pic-container .main-pic6,
.main-pic-container .main-pic7,
.main-pic-container .main-pic8 {
  position: absolute;
}

.main-pic-container .main-pic1 {
  width: 547px;
  top: 0px;
  left: 0px;
}

.main-pic-container .main-pic2 {
  width: 447px;
  top: 0px;
  right: 0px;
}

.main-pic-container .main-pic3 {
  width: 417px;
  top: 212px;
  left: 0px;
}

.main-pic-container .main-pic4 {
  width: 577px;
  top: 212px;
  right: 0px;
}

.main-pic-container .main-pic5 {
  width: 447px;
  top: 424px;
  left: 0px;
}

.main-pic-container .main-pic6 {
  width: 547px;
  top: 424px;
  right: 0px;
}

.main-pic-container .main-pic7 {
  width: 527px;
  top: 636px;
  left: 0px;
}

.main-pic-container .main-pic8 {
  width: 467px;
  top: 636px;
  right: 0px;
}

/* -------------------------------------------------
BELING
-------------------------------------------------*/

.beling {
  font-family: "FOT-セザンヌ Pro DB", "CezannePro-DB";
  text-align: center;
  font-size: 16px;
  line-height: 1.875;
}

#beling {
  margin-bottom: 50px;
}

#beling span {
  display: inline-block;
  margin: 0 0.5em;
}

.roadshow {
  font-size: 46px;
  font-family: "DNPShueiYMinStd-M", "秀英横太明朝 M";
  line-height: 1.35;
  margin-bottom: 55px;
}

.roadshow span {
  display: inline-block;
}

/* -------------------------------------------------
FOOTER
-------------------------------------------------*/

.footer {
  margin-bottom: 60px;
}

.snsList {
  text-align: center;
}

.snsList h3 {
  font-family: "FOT-セザンヌ Pro DB", "CezannePro-DB";
  font-size: 24px;
  margin-bottom: 24px;
}

.snsList li {
  display: inline-block;
  margin: 0 10px;
}

.snsList li.x {
  margin: 0 6px;
}

.snsList li picture {
  margin: 0 auto;
  display: block;
  height: 50px;
}

.snsList li img {
  width: auto;
  height: 100%;
  display: block;
}

/* -------------------------------------------------
INTRODUCTION
-------------------------------------------------*/

.introduction {
  width: 100%;
  aspect-ratio: 1400 / 960;
  margin: 0 auto;
  background-color: #4fb1e8;
  padding: 80px 0;

  background-image: image-set(
      url("../images/intro_bg2.webp") type("image/webp"),
      url("../images/intro_bg2.png") type("image/png")
    ),
    image-set(
      url("../images/intro_bg1_pc.webp") type("image/webp"),
      url("../images/intro_bg1_pc.png") type("image/png")
    );
  background-repeat: repeat-x, no-repeat;
  background-position:
    left top,
    left bottom;
  background-size:
    5px auto,
    100% auto;
}

.introduction-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.introduction-container h2 {
  text-align: center;
  font-size: 38px;
  line-height: 1.68;
  color: #fff;
  text-shadow: 0 0 18px #45a8e1;
  margin-bottom: 76px;
}

.introduction-container p:nth-of-type(1) {
  position: absolute;
  top: 180px;
  left: 0;
  width: 470px;
  font-family: "FOT-セザンヌ Pro DB", "CezannePro-DB";
}

.introduction-container p:nth-of-type(2) {
  position: absolute;
  top: 180px;
  right: 0;
  width: 470px;
  font-family: "FOT-セザンヌ Pro DB", "CezannePro-DB";
}

/* -------------------------------------------------
COMMENTS
-------------------------------------------------*/

.comments {
  width: 100%;
  margin: 0 auto;
  background-color: #ffe8a3;
}

.comments-header {
  width: 100%;
  aspect-ratio: 1400 / 740;
  margin: 0 auto;
  position: relative;
  background-image: image-set(
    url("../images/comments_bg_pc.webp") type("image/webp"),
    url("../images/comments_bg_pc.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: cover;
}

.comments-header h2 {
  position: absolute;
  left: 0;
  bottom: 110px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 38px;
  line-height: 1;
  text-shadow: 0 0 10px #fff;
  letter-spacing: 0.7em;
  margin-right: -0.7em;
}

.comments-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 80px 0;
}

.comments-container dl {
  margin-bottom: 60px;
}

.comments-container dt {
  margin-bottom: 25px;
}

.comments-container dd {
  font-size: 30px;
}

.comments-container dd span.job-title {
  font-size: 0.6em;
  display: inline-block;
  margin-left: 1em;
}

.comments-container span.notice {
  display: block;
  width: 100%;
  font-size: 16px;
  font-family: "FOT-セザンヌ Pro M", "CezannePro-M";
  text-align: center;
}

/* -------------------------------------------------
IMG-SCROLL
-------------------------------------------------*/

#img-scroll-wrapper {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

#img-scroll-slide-wrapper {
  display: flex;
  width: max-content;
  animation: imgScroll 40s linear infinite;
}

#img-scroll-slide-wrapper ul {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#img-scroll-slide-wrapper li {
  flex: 0 0 400px;
  width: 400px;
  will-change: transform;
}

#img-scroll-slide-wrapper picture,
#img-scroll-slide-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes imgScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-2400px);
  }
}

/* -------------------------------------------------
STAFF
-------------------------------------------------*/

.staff {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 0;
}

.staff h2 {
  width: 100%;
  text-align: center;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.7em;
  margin-right: -0.7em;
  margin-bottom: 2em;
}

.staff-section-container {
  width: 800px;
  margin: 0 auto;
}

.staff-section {
  margin-bottom: 60px;
}

.staff-section .staff-pic {
  margin-bottom: 30px;
  width: 100%;
  text-align: center;
}

.staff-section .staff-pic picture {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}

.staff-section .staff-pic picture img {
  width: 200px;
  height: auto;
}

.staff-section .staff-job {
  text-align: center;
  line-height: 1;
  margin-bottom: 1em;
}

.staff-section .staff-name {
  text-align: center;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 0.8em;
}

.staff-section .staff-msg {
  background-color: #ede0a4;
  border-radius: 10px;
  font-family: "FOT-セザンヌ Pro M", "CezannePro-M";
  font-size: 17px;
  line-height: 1.55;
  padding: 25px 40px 20px 40px;
}

.staff-section .staff-msg h3 {
  font-family: "FOT-セザンヌ Pro DB", "CezannePro-DB";
  text-align: center;
  font-size: 22px;
  margin-bottom: 0.5em;
}

/* -------------------------------------------------
TRAILER
-------------------------------------------------*/

.trailer {
  width: 100%;
  margin: 0 auto;
  background-color: #789ba9;
  background-image: image-set(
    url("../images/trailer_bg_pc.webp") type("image/webp"),
    url("../images/trailer_bg_pc.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  text-align: center;
  padding: 80px 0 100px 0;
}

.trailer h2 {
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.7em;
  margin-right: -0.7em;
  margin-bottom: 1.5em;
  color: #fff;
}

.yt-box {
  position: relative;
  width: min(1000px, 90vw);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  cursor: pointer;
  overflow: hidden;
}

.yt-stage,
.yt-stage iframe,
.yt-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.yt-stage iframe {
  border: 0;
}

.yt-overlay {
  z-index: 2;
}

.yt-overlay picture,
.yt-overlay img {
  display: block;
  width: 100%;
  height: 100%;
}

.yt-overlay img {
  object-fit: cover;
}

.yt-box.is-playing .yt-overlay {
  display: none;
}

/* -------------------------------------------------
THEATER
-------------------------------------------------*/

.theater {
  width: 1200px;
  margin: 0 auto;
  padding: 100px 0;
  text-align: center;
}

.theater h2 {
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.7em;
  margin-right: -0.7em;
  margin-bottom: 1.5em;
}

.theater h5.area {
  font-family: "FOT-セザンヌ Pro DB", "CezannePro-DB";
  font-size: 30px;
  margin-bottom: 1em;
}

.theater .theater-table {
  width: 100%;
  line-height: 1.5em;
  font-family: "FOT-セザンヌ Pro M", "CezannePro-M";
  font-size: 16px;
  letter-spacing: 0;
  margin-bottom: 40px;
}

.theater .theater-table td {
  padding: 1em 1em;
}

.theater .theater-table .header {
  padding: 0.5em 0.8em;
  background-color: #ede0a4;
}

.theater .theater-table .theater-info {
  border-bottom: solid 1px #ede0a4;
}

.theater .theater-table .sub-info {
  text-align: left;
  border-bottom: solid 1px #000000;
}

.theater .theater-table .theater-info a,
.theater .theater-table .sub-info a {
  text-decoration: underline;
  color: #000000;
}

.theater .theater-table .theater-info td:first-child {
  min-width: 2em;
}

.logo-polepole img {
  width: 300px;
  margin: 40px 0 20px 0;
}

/* -------------------------------------------------
SNS SHARE
-------------------------------------------------*/
#sns-container {
  width: 100%;
  background-color: #d7c884;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 4px;
  z-index: 3;
}

ul#social {
  width: 100%;
  align-items: center;
}

#social li {
  display: inline-block;
  height: 27px;
  vertical-align: bottom;
  padding: 0;
  margin: 5px 2px 0 2px;
  overflow: hidden;
}

/* -------------------------------------------------
1400
-------------------------------------------------*/
@media only screen and (max-width: 1400px) {
  /* -------------------------------------------------
TRAILER 1400
-------------------------------------------------*/

  .trailer {
    width: auto;
    padding: 5.71vw 7.14vw 7.14vw 7.14vw;
  }

  /* -------------------------------------------------
THEATER  1400
-------------------------------------------------*/

  .theater {
    width: auto;
    padding: 7.14vw;
  }
}

/* -------------------------------------------------
1200
-------------------------------------------------*/
@media only screen and (max-width: 1200px) {
  body {
    font-size: 1.5vw;
    line-height: 1.66em;
  }

  /* -------------------------------------------------
MAIN 1200
-------------------------------------------------*/

  .main {
    max-width: 83.33vw;
  }

  .main h1 {
    margin: 4.58vw 0;
  }

  .main h1 img {
    width: 69.58vw;
  }

  .main h2 {
    margin: 5vw 0 5vw 0;
    font-size: 2.5vw;
  }

  .main-pic-container {
    height: 69.41vw;
    aspect-ratio: 1200 / 833;
  }

  .main-pic-container .main-pic1 {
    width: 45.58vw;
    top: 0;
    left: 0;
  }

  .main-pic-container .main-pic2 {
    width: 37.25vw;
    top: 0;
    right: 0;
  }

  .main-pic-container .main-pic3 {
    width: 34.75vw;
    top: 17.67vw;
    left: 0;
  }

  .main-pic-container .main-pic4 {
    width: 48.08vw;
    top: 17.67vw;
    right: 0;
  }

  .main-pic-container .main-pic5 {
    width: 37.25vw;
    top: 35.33vw;
    left: 0;
  }

  .main-pic-container .main-pic6 {
    width: 45.58vw;
    top: 35.33vw;
    right: 0;
  }

  .main-pic-container .main-pic7 {
    width: 43.92vw;
    top: 53vw;
    left: 0;
  }

  .main-pic-container .main-pic8 {
    width: 38.92vw;
    top: 53vw;
    right: 0;
  }

  /* -------------------------------------------------
BELING 1200
-------------------------------------------------*/

  .beling {
    font-size: 1.33vw;
  }

  #beling {
    margin-bottom: 4.17vw;
  }

  .roadshow {
    font-size: 3.83vw;
    margin-bottom: 4vw;
  }

  /* -------------------------------------------------
FOOTER 1200
-------------------------------------------------*/

  .footer {
    margin-bottom: 5vw;
  }

  .snsList h3 {
    font-size: 2vw;
    margin-bottom: 2vw;
  }

  .snsList li {
    margin: 0 0.83vw;
  }

  .snsList li.x {
    margin: 0 0.5vw;
  }

  .snsList li picture {
    height: 4.17vw;
  }

  /* -------------------------------------------------
INTRODUCTION 1200
-------------------------------------------------*/

  .introduction {
    aspect-ratio: 1400 / 1000;
    padding: 6.67vw 0;
    background-size:
      0.41vw auto,
      100% auto;
  }

  .introduction-container {
    max-width: 83.33vw;
  }

  .introduction-container h2 {
    font-size: 3.17vw;
    margin-bottom: 6.33vw;
  }

  .introduction-container p:nth-of-type(1) {
    top: 15vw;
    left: 0;
    width: 39.17vw;
  }

  .introduction-container p:nth-of-type(2) {
    top: 15vw;
    right: 0;
    width: 39.17vw;
  }

  /* -------------------------------------------------
COMMENTS 1200
-------------------------------------------------*/

  .comments-header h2 {
    font-size: 3.17vw;
    text-shadow: 0 0 0.83vw #fff;
  }

  .comments-container dd {
    font-size: 2.5vw;
  }

  .comments-container span.notice {
    font-size: 1.33vw;
  }

  /* -------------------------------------------------
STAFF 1200
-------------------------------------------------*/
  .staff h2 {
    font-size: 3.17vw;
  }

  .staff-section .staff-name {
    font-size: 3vw;
  }

  .staff-section .staff-msg {
    font-size: 1.42vw;
  }

  .staff-section .staff-msg h3 {
    font-size: 1.83vw;
  }
}

/* -------------------------------------------------
1000 SP
-------------------------------------------------*/
@media only screen and (max-width: 1000px) {
  body {
    font-size: 4vw;
  }

  .pc {
    display: none;
  }
  .sp {
    display: block;
  }

  /* -------------------------------------------------
MENU 1000
-------------------------------------------------*/

  .hamburger {
    width: 13.97vw;
    height: 9.07vw;
    padding: 1.44vw;
    top: 4vw;
    right: 4vw;
  }

  .hamburger__line {
    width: 11.09vw;
    height: 0.43vw;
  }

  .hamburger__line:nth-child(1) {
    transform: translateY(-2.02vw);
  }
  .hamburger__line:nth-child(2) {
    transform: translateY(0);
  }
  .hamburger__line:nth-child(3) {
    transform: translateY(2.02vw);
  }

  ul#menuList {
    font-size: 6.2vw;
  }

  ul#menuList li a {
    margin-bottom: 8vw;
  }

  ul.snsList {
    margin-bottom: 3vw;
  }

  /* -------------------------------------------------
MAIN 1000
-------------------------------------------------*/

  .main {
    width: 100%;
    max-width: none;
  }

  .main h1 {
    text-align: center;
    margin: 8.5vw 0 7.5vw 0;
  }

  .main h1 img {
    width: 89.3vw;
  }

  .main h2 {
    margin: 7vw 0 7vw 0;
    font-size: 5vw;
  }

  .main h2 span {
    display: block;
    margin-bottom: 1vw;
  }

  .main-pic-container {
    width: 100%;
    height: 83.3vw;
  }

  .main-pic-container .main-pic1 {
    width: 54.7vw;
    top: 0;
    left: 0;
  }

  .main-pic-container .main-pic2 {
    width: 44.7vw;
    top: 0;
    right: 0;
  }

  .main-pic-container .main-pic3 {
    width: 41.7vw;
    top: 21.2vw;
    left: 0;
  }

  .main-pic-container .main-pic4 {
    width: 57.7vw;
    top: 21.2vw;
    right: 0;
  }

  .main-pic-container .main-pic5 {
    width: 44.7vw;
    top: 42.4vw;
    left: 0;
  }

  .main-pic-container .main-pic6 {
    width: 54.7vw;
    top: 42.4vw;
    right: 0;
  }

  .main-pic-container .main-pic7 {
    width: 52.7vw;
    top: 63.6vw;
    left: 0;
  }

  .main-pic-container .main-pic8 {
    width: 46.7vw;
    top: 63.6vw;
    right: 0;
  }

  /* -------------------------------------------------
BELING 1000
-------------------------------------------------*/

  .beling {
    font-size: 2.88vw;
    padding: 0 5vw;
  }

  #beling {
    margin-bottom: 8vw;
  }

  .roadshow {
    font-size: 7.6vw;
    margin-bottom: 12vw;
  }

  /* -------------------------------------------------
FOOTER 1000
-------------------------------------------------*/

  .footer {
    margin-bottom: 12vw;
  }

  .snsList h3 {
    font-size: 5.5vw;
    margin-bottom: 5.5vw;
  }

  .snsList li {
    margin: 0 3vw;
  }

  .snsList li picture {
    height: 12vw;
  }

  /* -------------------------------------------------
INTRODUCTION 1000
-------------------------------------------------*/

  .introduction {
    width: 100%;
    aspect-ratio: auto;
    padding: 15.6vw 0 70vw 0;
    background-color: #93ccf8;
    background-image: image-set(
        url("../images/intro_bg2.webp") type("image/webp"),
        url("../images/intro_bg2.png") type("image/png")
      ),
      image-set(
        url("../images/intro_bg1_sp.webp") type("image/webp"),
        url("../images/intro_bg1_sp.png") type("image/png")
      );
    background-repeat: repeat-x, no-repeat;
    background-position:
      left top,
      left bottom;
    background-size:
      auto 60vw,
      100% auto;
  }

  .introduction-container {
    max-width: 88vw;
  }

  .introduction-container h2 {
    text-align: center;
    font-size: 6.4vw;
    text-shadow: 0 0 3vw #45a8e1;
    margin-bottom: 11vw;
  }

  .introduction-container p:nth-of-type(1) {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .introduction-container p:nth-of-type(2) {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
  }

  /* -------------------------------------------------
COMMENTS 1000
-------------------------------------------------*/

  .comments-header {
    width: 100%;
    aspect-ratio: 1000 / 740;
    background-image: image-set(
      url("../images/comments_bg_sp.webp") type("image/webp"),
      url("../images/comments_bg_sp.png") type("image/png")
    );
    background-repeat: no-repeat;
    background-size: cover;
  }

  .comments-header h2 {
    bottom: 10vw;
    font-size: 7vw;
    text-shadow: 0 0 3vw #fff;
  }

  .comments-container {
    max-width: 76vw;
    padding: 12vw 0;
  }

  .comments-container dl {
    margin-bottom: 10vw;
  }

  .comments-container dt {
    margin-bottom: 5vw;
  }

  .comments-container dd {
    font-size: 6vw;
  }

  .comments-container dd span.job-title {
    font-size: 0.6em;
    display: block;
    margin-left: 0;
    margin-top: 0.2em;
  }

  .comments-container span.notice {
    display: block;
    width: 100%;
    font-size: 16px;
    font-family: "FOT-セザンヌ Pro M", "CezannePro-M";
    text-align: center;
  }

  /* -------------------------------------------------
IMG-SCROLL 1000
-------------------------------------------------*/

  #img-scroll-slide-wrapper li {
    flex: 0 0 80vw;
    width: 80vw;
    will-change: transform;
  }

  @keyframes imgScroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-480vw);
    }
  }

  /* -------------------------------------------------
STAFF 1000
-------------------------------------------------*/

  .staff {
    max-width: 100%;
    padding: 14vw 0 10vw 0;
  }

  .staff h2 {
    font-size: 7vw;
  }

  .staff-section-container {
    width: 88vw;
  }

  .staff-section {
    margin-bottom: 10vw;
  }

  .staff-section .staff-pic {
    margin-bottom: 5vw;
  }

  .staff-section .staff-pic picture img {
    width: 40vw;
  }

  .staff-section .staff-name {
    font-size: 7.2vw;
  }

  .staff-section .staff-msg {
    border-radius: 3vw;
    font-size: 4vw;
    padding: 6vw 6vw 4vw 6vw;
    font-family: "FOT-セザンヌ Pro M", "CezannePro-M";
  }

  .staff-section .staff-msg h3 {
    font-size: 4.8vw;
  }

  /* -------------------------------------------------
TRAILER 1000
-------------------------------------------------*/

  .trailer {
    background-image: image-set(
      url("../images/trailer_bg_sp.webp") type("image/webp"),
      url("../images/trailer_bg_sp.png") type("image/png")
    );
    padding: 12vw 0 18vw 0;
  }

  .trailer h2 {
    font-size: 7vw;
    margin-bottom: 1.5em;
  }

  .yt-overlay picture.pc {
    display: none;
  }

  .yt-overlay picture.sp {
    display: block;
  }

  /* -------------------------------------------------
THEATER
-------------------------------------------------*/

  .theater {
    width: 90vw;
    padding: 14vw 0;
    text-align: center;
  }

  .theater h2 {
    font-size: 7vw;
    margin-bottom: 1.5em;
  }

  .theater h5.area {
    font-size: 5vw;
  }

  .theater .theater-table {
    font-size: 3.8vw;
    letter-spacing: 0;
    margin-bottom: 7vw;
  }

  .theater .theater-table td {
    padding: 0.5em 0.3em;
  }

  .theater .theater-table .header {
    padding: 0.5em 0.8em;
    background-color: #ede0a4;
  }

  .logo-polepole img {
    width: 50vw;
    margin: 5vw 0 10vw 0;
  }
}