html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: 1.6rem;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  line-height: 1.6;
  @media (768px <= width) {
    background: url('../img/back.webp') no-repeat center / cover fixed;
  }
  @media (width < 768px) {
    font-size: 1.4rem;
    background: url('../img/back-sp.webp') no-repeat center / cover fixed;
  }
  @media (width < 768px) {
    background: none;
    &::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background: url('../img/back-sp.webp') no-repeat center / cover;
      pointer-events: none;
    }
  }
}

@keyframes mvFadeIn {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  80% {
    opacity: 1;
  }
  100% {
    filter: blur(0);
  }
}

.mv {
  .visually-hidden {
    display: none;
  }
  img {
    width: 100%;
    animation: mvFadeIn 1.3s cubic-bezier(.77,0,.175,1) 0.2s both;
  }
}

.inner {
  margin: 0 auto;
  @media (768px <= width) {
    padding: 100px 0 120px;
    width: 1120px;
  }
  @media (width < 768px) {
    padding: 40px 0 60px;
    width: 90%;
  }
}

.fade-in {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(.77,0,.175,1), filter 0.7s cubic-bezier(.77,0,.175,1), transform 0.7s cubic-bezier(.77,0,.175,1);
}
.fade-in.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.section-title {
  color: #000;
  font-family: var(--font-en);
  @media (768px <= width) {
    font-size: 7.2rem;
    margin-bottom: 40px;
  }
  @media (width < 768px) {
    font-size: 4.8rem;
    margin-bottom: 20px;
  }
}

.youtube-box {
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  @media (768px <= width) {
    max-width: 800px;
  }
  @media (width < 768px) {
    max-width: 100%;
  }
  iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.btn {
  display: block;
  width: 230px;
  background: #fff;
  border: 1px solid #000;
  font-size: 1.4rem;
  padding: 15px 10px;
  text-align: center;
  border-radius: 50px;
  margin: 0 auto;
  transition: all .4s;
  &:hover {
    background: var(--primary-color);
  }
  &.is-x {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    &::before{
      content: '';
      display: block;
      background: url('../img/icon-x.svg') no-repeat center / contain;
      width: 16px;
      height: 16px;
    }
  }
}

.link-blank {
  display: flex;
  align-items: center;
  gap: 10px;
  transform: all .4s;
  &::after{
    content: '';
    display: block;
    background: url('../img/icon-blank.svg') no-repeat center / contain;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  &:hover {
    opacity: 0.6;
  }
}

#introduction {
  background: #dad5d166;
  .inner {
    @media (768px <= width) {
      display: flex;
      justify-content: space-between;
    }
  }
  .text-area {
    font-family: var(--font-mintyo);
    font-size: 18px;
    line-height: 2.2;
    @media (width < 768px) {
      font-size: 14px;
    }
  }
}

#news {
  background: #000000B3;
  .section-title {
    color: #fff;
    text-align: center;
  }
  .news-list {
    overflow-y: scroll;
    height: 300px;
    @media (768px <= width) {
      width: 800px;
      margin: 0 auto;
      padding-right: 20px;
    }
    &::-webkit-scrollbar {
      width: 8px;
      border-radius: 40px;
      border: 1px solid #B3ADA8;
    }
    &::-webkit-scrollbar-thumb {
      background: #B3ADA8;
      border-radius: 40px;
    }
  }
  .news-item {
    .news-content {
      color: #fff;
      background: #666666;
      border-radius: 4px;
      @media (768px <= width) {
        padding: 30px;
        display: grid;
        grid-template-columns: 130px auto;
      }
      @media (width < 768px) {
        display: block;
        padding: 20px;
      }
    }
    + .news-item {
      margin-top: 20px;
    }
  }
  a {
    transition: all .4s;
    &:hover {
      opacity: .6;
    }
  }
  .news-date {
    font-size: 16px;
    display: block;
  }
  .news-text {
    font-size: 14px;
    display: block;
    @media (width < 768px) {
      margin-top: 10px;
    }
  }
}

@-moz-document url-prefix() {
  .news-list {
    scrollbar-width: thin;
    scrollbar-color: #B3ADA8 transparent;
  }
}

#movie {
  background: #000000B3;
  .inner {
    padding-top: 0;
  }
  .section-title {
    color: #fff;
    text-align: center;
  }
}

.section-block {
  background: #DAD5D1;
  .content-area {
    @media (768px <= width) {
      display: grid;
      grid-template-columns: 40% 1fr;
      gap: 60px;
    }
  }
  .title-area {
    .title {
      font-size: 24px;
    }
    .subtitle {
      font-size: 14px;
    }
    + * {
      margin-top: 40px;
      font-size: 16px;
      @media (width < 768px) {
        margin-top: 30px;
      }
    }
  }
  .img-box {
    @media (width < 768px) {
      margin: 40px auto;
      text-align: center;
      img {
        margin: 0 auto;
      }
    }
  }
  .youtube-box {
    margin-top: 40px;
    @media (width < 768px) {
      margin-top: 30px;
    }
  }
}

#narration {
  .img-box {
    img {
      width: 240px;
    }
  }
}

#themesong {
  .inner {
    padding-top: 0;
  }
  .img-box {
    img {
      width: 480px;
    }
  }
}

#ticket {
  background: #DAD5D166;
  .section-title {
    text-align: center;
  }
  .price-list {
    display: flex;
    gap: 20px;
    justify-content: center;
    @media (width < 768px) {
      flex-direction: column;
      align-items: center;
    }
    .price-item {
      padding: 10px 20px;
      border-radius: 4px;
      background: #C4C0BC;
      width: 280px;
      max-width: 100%;
      display: flex;
      justify-content: center;
      gap: 20px;
      align-items: center;
    }
    .price-title {
      font-size: 16px;
    }
    .price-text {
      font-size: 24px;
      span {
        font-size: 14px;
        margin-left: .5em;
      }
    }
  }
  .sub-title {
    color: #000;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 500;
    margin-top: 40px;
  }
  .ticket-img {
    width: 480px;
    max-width: 100%;
    margin: 20px auto 40px;
  }
}

#theater {
  background: #000000B3;
  .section-title {
    color: #fff;
    text-align: center;
  }
  .accordion {
    max-width: 800px;
    margin: 0 auto;
    .accordion-item + .accordion-item {
      margin-top: 30px;
    }
  }
  .acc-toggle {
    border-radius: 4px;
    background: #DAD5D1;
    display: flex;
    padding: 16px 24px;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    @media (width < 768px) {
      padding: 16px;
    }
    &::after{
      content: '＋';
      display: block;
    }
    &.is-active {
      background: #666666;
      color: #fff;
      border-radius: 4px 4px 0 0;
      &::after{
        content: '−';
      }
    }
  }
  .acc-content {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;
  }
  .theater-table {
    width: 100%;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    thead {
      background: #666666;
      color: #fff;
      th {
        padding: 16px 24px;
        text-align: left;
        font-weight: 400;
        font-size: 1.4rem;
        @media (width < 768px) {
          font-size: 1.3rem;
          padding: 8px 16px;
        }
      }
    }
    tbody {
      tr {
        background: #DAD5D1;
        &:nth-of-type(odd) {
          background: #C4C0BC;
        }
        td {
          padding: 10px 24px;
          font-size: 1.4rem;
          @media (width < 768px) {
            font-size: 1.3rem;
            padding: 8px 16px;
          }
          &:first-of-type {
            @media (width < 768px) {
              width: 90px;
            }
          }
        }
      }
    }
  }
  .btn {
    margin-top: 40px;
  }
}

#support {
  background:#DAD5D1;
  .section-title {
    text-align: center;
  }
  .support-list {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    @media (768px <= width) {
      width: 800px;
      margin: 0 auto;
    }
    .support-item {
      width: 256px;
    }
  }
  a {
    display: block;
    transition: all .4s;
    &:hover {
      opacity: 0.4;
    }
  }
}

footer {
  background: #000;
  padding: 24px 0;
  text-align: center;
  small {
    font-family: var(--font-en);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    @media (width < 768px) {
      font-size: 1rem;
    }
  }
}