@charset "utf-8";
:root {
  --font-en: "Merriweather", serif;
  --color-point: #d7b065;
}

/* ================================================================================
- Layout
================================================================================ */
.l-mainContents {
  position: relative;
  background-image:
    linear-gradient(
      0deg,
      transparent calc(100% - 1px),
      #f0f0f0 calc(100% - 1px)
    ),
    linear-gradient(
      90deg,
      transparent calc(100% - 1px),
      #f0f0f0 calc(100% - 1px)
    );
  background-size: 2.8vw 2.8vw;
  background-repeat: repeat;
  background-position: center;
}

.l-container {
  padding-inline: 5.3333333333vw;
}

.l-spacer {
  margin-top: 9.33333333vw;
}

@media screen and (min-width: 767px) {
  .l-mainContents {
    position: relative;
    max-width: 450px;
    margin: auto;
    background-size: 12.6px 12.6px;
  }

  .l-mainContents::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: calc((100% - 450px) / 2);
    height: 100vh;
    background: url(../img/pc-bg01.jpg) no-repeat center / cover;
  }

  .l-mainContents::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: calc((100% - 450px) / 2);
    height: 100vh;
    background: url(../img/pc-bg02.jpg) no-repeat center / cover;
  }

  .l-container {
    padding-inline: 24px;
  }

  .l-spacer {
    margin-top: 42px;
  }
}

/* ================================================================================
- Compornent
================================================================================ */
.c-heading {
  margin-bottom: 4.8vw;
  text-align: center;
}

.c-heading img {
  width: auto;
  height: 12.8vw;
}

.c-title__label {
  margin-bottom: 2vw;
  padding: 0.8vw 2vw;
  background-color: #000;
  color: var(--color-point);
  font-size: 4.2vw;
}

.c-block {
  margin-top: 5.3333333333vw;
}

.c-card {
  margin-top: 5.3333333333vw;
  padding: 5.3vw 3.7vw;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #000;
}

.c-card:has(.u-attr) {
  padding-bottom: 2.5vw;
}

.c-more {
  position: relative;
  padding-top: 110px;
  text-align: center;
  color: #999;
  font-size: 4.8vw;
  letter-spacing: 0.08em;
}

.c-more::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  width: 8px;
  height: 90px;
  margin: auto;
  background: url(../img/dotted.svg) no-repeat center / contain;
}

@media screen and (min-width: 767px) {
  .c-heading {
    margin-bottom: 22px;
  }

  .c-heading img {
    height: 58px;
  }

  .c-title__label {
    margin-bottom: 10px;
    padding: 4px 10px;
    font-size: 1.25rem;
  }

  .c-block {
    margin-top: 24px;
  }

  .c-card {
    margin-top: 24px;
    padding: 24px 16px;
  }

  .c-card:has(.u-attr) {
    padding-bottom: 12px;
  }

  .c-more {
    padding-top: 80px;
    font-size: 1.375rem;
  }

  .c-more::before {
    width: 6px;
    height: 60px;
  }
}

/* ================================================================================
- Project
================================================================================ */
.p-hero__read {
  margin-top: -4.5vw;
}

@media screen and (min-width: 767px) {
  .p-hero__read {
    margin-top: -20px;
  }
}

.p-about {
  padding-top: 9.33333333vw;
  background: url(../img/bg-about.png) no-repeat right top -7vw / contain;
}

.p-about__heading {
  text-align: center;
  margin-bottom: 2vw;
}

.p-about__heading img {
  height: 12.588888vw;
}

.p-about__read {
  margin-top: 9.33333333vw;
  width: 62.22222227vw;
}

.p-about__video {
  position: relative;
  margin-top: 4vw;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.p-about__video video {
  position: absolute;
  width: 100%;
  height: auto;
}

.p-about__button {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 56px;
  height: 56px;
  margin: auto;
  cursor: pointer;
}

.p-about__button.is-active {
  display: none;
}

@media screen and (min-width: 767px) {
  .p-about {
    padding-top: 42px;
    background-position-y: -40px;
  }

  .p-about__heading {
    margin-bottom: 10px;
  }

  .p-about__heading img {
    height: 56px;
  }

  .p-about__read {
    margin-top: 42px;
    width: 280px;
  }

  .p-about__video {
    margin-top: 18px;
  }
}

.p-news__card {
  max-height: 72vw;
  overflow-y: auto;
}

.p-news__list {
  display: grid;
  gap: 3.2vw;
}

.p-news__item + .p-news__item {
  padding-top: 3.2vw;
  border-top: 1px solid #999;
}

.p-news__date {
  display: inline-block;
  padding: 4px 8px;
  background-color: #000;
  color: var(--color-point);
  font-size: 4.2vw;
}

.p-news__text {
  margin-top: 2.1vw;
  font-size: 3.333333333vw;
  line-height: 1.8;
}

@media screen and (min-width: 767px) {
  .p-news__card {
    max-height: 325px;
  }
  .p-news__list {
    gap: 14px;
  }

  .p-news__item + .p-news__item {
    padding-top: 14px;
  }

  .p-news__date {
    font-size: 18px;
  }

  .p-news__text {
    margin-top: 10px;
    font-size: 15px;
  }
}

.p-overview__read {
  margin-bottom: 8px;
  font-size: 6.66666667vw;
}

.p-overview__read span {
  font-size: 0.7em;
}

.p-overview__text {
  font-size: 4vw;
  line-height: 1.6;
}

.p-overview__text span {
  font-size: 0.933333333em;
}

.p-overview__add {
  font-size: 3.333333333vw;
}

.p-overview__price {
  display: flex;
  justify-content: space-between;
}

.p-overview__price + .p-overview__price {
  margin-top: 24px;
}

.p-overview__price dt {
  align-self: center;
  position: relative;
  font-size: 3.73333333vw;
  font-weight: 300;
}

.p-overview__price dt span {
  letter-spacing: -0.12em;
}

.p-overview__price dt::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -35vw;
  width: 31.733333333vw;
  height: 2px;
  margin: auto;
  border-top: 0.4vw dotted #999;
}

.p-overview__price dt.-min::after {
  right: -5vw;
  width: 4vw;
}

.p-overview__price dd {
  font-size: 6vw;
}

.p-overview__price dd span {
  font-size: 0.6em;
}

.p-overview__label {
  margin-top: 24px;
  padding: 3.2vw 3vw;
  background-color: rgba(58, 49, 46, 0.1);
  font-size: 2.66666667vw;
  line-height: 1.5;
}

.p-overview__label span {
  white-space: nowrap;
  letter-spacing: -0.05em;
}

.p-bouns__contents {
  margin-block: 5.86666667vw;
  padding: 3.33333333333vw;
  background-color: #fff;
  border: 2.5px solid var(--color-point);
}

.p-bouns__heading {
  margin-bottom: 4.26666667vw;
  font-size: 6.13333333vw;
  letter-spacing: 0.1em;
}

.p-bouns__block + .p-bouns__block {
  margin-top: 5.33333333vw;
  padding-top: 5.33333333vw;
  border-top: 1px solid #bfbfbf;
}

.p-bouns__block:nth-of-type(1) img {
  display: block;
  width: 71.73333333vw;
  margin: auto;
}

.p-bouns__title {
  margin-bottom: 2.66666667vw;
  font-size: 4.66666667vw;
}

.p-bouns__sample {
  padding-block: 20vw;
  text-align: center;
  color: #999;
  font-size: 9.6vw;
  font-weight: 600;
}

.p-bouns__text {
  font-size: 3.1vw;
  line-height: 1.3;
}

@media screen and (min-width: 767px) {
  .p-overview__read {
    font-size: 1.875rem;
  }

  .p-overview__text {
    font-size: 1.125rem;
  }

  .p-overview__add {
    font-size: 0.9375rem;
  }

  .p-overview__price dt {
    font-size: 1.05rem;
  }

  .p-overview__price dt::after {
    right: -157.5px;
    width: 142px;
    border-top: 1.5px dotted #999;
  }

  .p-overview__price dt.-min::after {
    right: -22.5px;
    width: 18px;
  }

  .p-overview__price dd {
    font-size: 1.6875rem;
  }

  .p-overview__label {
    padding: 16px 14px;
    font-size: 0.75rem;
  }

  .p-bouns__contents {
    margin-block: 24px;
    padding: 15px;
  }

  .p-bouns__heading {
    margin-bottom: 20px;
    font-size: 28px;
  }

  .p-bouns__block + .p-bouns__block {
    margin-top: 24px;
    padding-top: 24px;
  }

  .p-bouns__block:nth-of-type(1) img {
    width: 323px;
  }

  .p-bouns__title {
    margin-bottom: 12px;
    font-size: 21px;
  }

  .p-bouns__sample {
    padding-block: 90px;
    font-size: 43px;
  }

  .p-bouns__text {
    font-size: 14px;
  }
}

.p-program__heading {
  margin-bottom: 1em;
  text-align: center;
  font-size: 5.33333333vw;
  letter-spacing: 0.18em;
}

.p-program__list {
  display: grid;
  gap: 8px;
  width: fit-content;
  margin: auto;
}

.p-program__item {
  font-family: var(--font-en);
  letter-spacing: 0.18em;
}

@media screen and (min-width: 767px) {
  .p-program__heading {
    font-size: 1.5rem;
  }
}

.p-mc__thumbs {
  display: block;
  width: 69.6vw;
  margin: auto;
}

.p-mc__name {
  margin-bottom: 4.26vw;
  text-align: center;
  font-size: 6.66666667vw;
}

.p-mc__name > span {
  font-size: 0.56em;
}

.p-mc__name span > span {
  color: var(--color-point);
}

@media screen and (min-width: 767px) {
  .p-mc__thumbs {
    width: 312px;
  }

  .p-mc__name {
    margin-bottom: 20px;
    font-size: 1.875rem;
  }
}

.p-gest__heading {
  text-align: center;
}

.p-gest__heading img {
  width: auto;
  height: 10.266666667vw;
}

.p-gest__card {
  padding-right: 2.5vw;
}

.p-gest__block {
  display: flex;
  gap: 2vw;
}

.p-gest__block + .p-gest__block {
  margin-top: 32px;
}

.p-gest__block img {
  align-self: flex-start;
  width: 36.26666667vw;
}

.p-gest__name {
  font-size: 4.64vw;
  letter-spacing: -0.02em;
}

.p-gest__name > span {
  font-size: 0.58333333em;
}

.p-gest__name span > span {
  color: var(--color-point);
}

.p-gest__prof {
  margin-top: 16px;
  font-size: 2.93333333vw;
  line-height: 1.2;
  word-break: break-all;
}

@media screen and (min-width: 767px) {
  .p-gest__heading img {
    height: 46px;
  }

  .p-gest__card {
    padding-right: 12px;
  }

  .p-gest__block {
    gap: 10px;
  }

  .p-gest__block img {
    width: 163px;
  }

  .p-gest__name {
    font-size: 1.25rem;
  }

  .p-gest__prof {
    font-size: 0.8125rem;
  }
}

.p-ticket__buttonWrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8vw;
  margin-top: 12.8vw;
  text-align: center;
}

.p-ticket__button {
  position: relative;
  width: 92%;
  padding-block: 3.9vw;
  background-color: #000;
  color: #fff;
  border-radius: 8vw;
  font-size: 4vw;
  cursor: pointer;
}

.p-ticket__button.-disabled {
  background-color: #bfbfbf;
  pointer-events: none;
}

.p-ticket__button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 5.8%;
  bottom: 0;
  width: 4vw;
  height: 4vw;
  margin: auto;
  border-right: 0.4vw solid #fff;
  border-top: 0.4vw solid #fff;
  rotate: 45deg;
}

@media screen and (min-width: 767px) {
  .p-ticket__heading {
    padding-block: 20px;
  }

  .p-ticket__heading img {
    height: 30px;
  }

  .p-ticket__buttonWrap {
    gap: 36px;
    margin-top: 56px;
  }

  .p-ticket__button {
    width: 100%;
    max-width: 370px;
    padding-block: 17.5px;
    border-radius: 2.5rem;
    font-size: 1.125rem;
  }

  .p-ticket__button::after {
    right: 20px;
    width: 24px;
    height: 24px;
    border-right: 1.8px solid #fff;
    border-top: 1.8px solid #fff;
  }
}

.p-term__date {
  font-size: 4vw;
  letter-spacing: -0.02em;
}

.p-term__date span {
  margin-left: 3vw;
  font-size: 2.66666667vw;
  letter-spacing: -0.06em;
}

.p-term__title {
  margin-top: 4vw;
  font-size: 4vw;
}

.p-term__list {
  display: grid;
  gap: 2.66666667vw;
  margin-top: 2.66666667vw;
}

.p-term__item {
  display: flex;
  gap: 2.4vw;
}

.p-term__item dt {
  align-self: flex-start;
  padding: 0.8vw;
  background-color: #000;
  color: #fff;
  font-size: 2.93333333vw;
}

.p-term__item dd {
  font-size: 4vw;
  letter-spacing: -0.03em;
}

.p-term__text {
  margin-top: 2.66666667vw;
  font-size: 4vw;
  line-height: 1.75;
}

@media screen and (min-width: 767px) {
  .p-term__date {
    font-size: 1.125rem;
  }

  .p-term__date span {
    margin-left: 14px;
    font-size: 0.75rem;
  }

  .p-term__title {
    margin-top: 18px;
    font-size: 1.125rem;
  }

  .p-term__list {
    gap: 12px;
    margin-top: 12px;
  }

  .p-term__item {
    gap: 10px;
  }

  .p-term__item dt {
    padding: 4px;
    font-size: 0.8125rem;
  }

  .p-term__item dd {
    font-size: 1.125rem;
  }

  .p-term__text {
    margin-top: 12px;
    font-size: 1.125rem;
  }
}

.p-orchestra__heading {
  margin-bottom: 4.5vw;
  text-align: center;
}

.p-orchestra__heading img {
  width: auto;
  height: 8.26666667vw;
}

.p-orchestra__block + .p-orchestra__block {
  margin-top: 10.66666667vw;
}

.p-orchestra__block img {
  display: block;
  margin: auto;
}

.p-orchestra__block:nth-child(1) img {
  width: 66vw;
}

.p-orchestra__block:nth-child(2) img {
  width: 79.73333333vw;
}

.p-orchestra__name {
  margin-block: 3.33333333vw 5.33333333vw;
  text-align: center;
  font-size: 6.66666667vw;
  letter-spacing: 0.1em;
}

.p-orchestra__name::first-letter {
  color: var(--color-point);
}

@media screen and (min-width: 767px) {
  .p-orchestra__heading {
    margin-bottom: 20px;
  }

  .p-orchestra__heading img {
    height: 38px;
  }

  .p-orchestra__block + .p-orchestra__block {
    margin-top: 48px;
  }

  .p-orchestra__block:nth-child(1) img {
    width: 297px;
  }

  .p-orchestra__block:nth-child(2) img {
    width: 358px;
  }

  .p-orchestra__name {
    margin-block: 15px 24px;
    font-size: 1.875rem;
  }
}

.c-card:has(.p-sponsor__list) {
  padding-top: 9.6vw;
}

.p-sponsor__list {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 8vw;
  margin-bottom: 10.66666667vw;
}

.p-sponsor__item {
  text-align: center;
}

.p-logo__tohakusha {
  width: 34.4vw;
}

.p-logo__toppan {
  width: 41.06666667vw;
}

@media screen and (min-width: 767px) {
  .c-card:has(.p-sponsor__list) {
    padding-top: 42px;
  }

  .p-sponsor__list {
    gap: 36px;
    margin-bottom: 48px;
  }

  .p-sponsor__item {
    text-align: center;
  }

  .p-logo__tohakusha {
    width: 155px;
  }

  .p-logo__toppan {
    width: 185px;
  }
}

.p-x {
  padding-block: 6.66666667vw;
  background: url(../img/bg-x.png) no-repeat right top / 100%;
  background-color: #000;
}

.p-x__logo {
  display: block;
  width: 10.66666667vw;
  height: auto;
  margin: auto;
}

.p-x__link {
  margin-top: 1em;
  text-align: center;
  color: #fff;
  font-size: 2.66666667vw;
}

@media screen and (min-width: 767px) {
  .p-x {
    padding-block: 30px;
  }

  .p-x__logo {
    width: 48px;
  }

  .p-x__link {
    font-size: 0.75rem;
  }
}

.p-info {
  padding-bottom: 9.33333333vw;
}

.p-info__text {
  font-size: 2.66666667vw;
  line-height: 1.5;
}

.p-info__heading {
  position: relative;
  margin-block: 5.33333333vw 2.66666667vw;
  font-size: 2.66666667vw;
}

.p-info__heading::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70vw;
  height: 1px;
  margin: auto;
  background-color: #000;
}

.p-info__title {
  margin-bottom: 1em;
  font-size: 2.66666667vw;
}

.p-info__text + .p-info__title {
  margin-top: 6.93333333vw;
}

@media screen and (min-width: 767px) {
  .p-info {
    padding-bottom: 42px;
  }

  .p-info__text {
    font-size: 0.75rem;
  }

  .p-info__heading {
    margin-block: 24px 12px;
    font-size: 0.75rem;
  }

  .p-info__heading::after {
    width: 315px;
  }

  .p-info__title {
    font-size: 0.75rem;
  }

  .p-info__text + .p-info__title {
    margin-top: 32px;
  }
}

.p-button-fixed {
  position: fixed;
  right: 3vw;
  bottom: 5vw;
  width: 16.26666667vw;
  height: auto;
  z-index: 100;
}

.p-button-fixed img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 767px) {
  .p-button-fixed {
    right: calc(50vw - 360px);
    bottom: auto;
    top: 3vw;
    width: 100px;
  }

  .p-button-fixed img {
    width: 100%;
    height: auto;
  }
}

.p-footer__copy {
  padding: 0 10px 10px;
  text-align: right;
  font-size: 10px;
}

/* ================================================================================
- Utility
================================================================================ */
.u-text {
  font-size: 4vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.u-attr {
  margin-top: 16px;
}

.u-attr li {
  display: flex;
  font-size: 2.66666667vw;
  line-height: 1.4;
}

.u-attr li::before {
  content: "※";
}

@media screen and (min-width: 767px) {
  .u-text {
    font-size: 1.125rem;
  }

  .u-attr li {
    font-size: 0.75rem;
  }
}

@media (any-hover: hover) {
  .p-ticket__button {
    transition: 0.3s;
  }

  .p-ticket__button:hover {
    background-color: #444;
  }
}