@charset "UTF-8";

:root {
  --color-bg: #ebeced;
  --color-primary: #0d63ab;
  --color-secondary: #063c6e;
  --fontFamily-serif: "utsukushi", serif;
  --gutter: 20px;
  --leading-trim: calc((1em - 1lh) / 2);
  --spacing-a: 96px;
  --spacing-b: 48px;
  --width-inner: 830;
}

/* SPではセクション間の基本余白を64pxに切り替える */
@media (max-width: 768px) {
  :root {
    --spacing-a: 64px;
  }
}

/* ==========================================
   Base (旧 common.min.css / parts.min.css から移設)
   ========================================== */

body {
  color: #000;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  background: #fff;
}

img {
  width: 100%;
  height: auto;
}

table {
  table-layout: fixed;
}

table th,
table td {
  padding: 10px;
}

small {
  text-align: center;
  padding: 1rem 0 1.5rem;
  box-sizing: border-box;
  display: block;
}

/* ページ全体のスコープ（body に付与） */
.shonan-candle {
  color: #fff;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1.5rem;
  position: relative;
}

@media (max-width: 768px) {
  .shonan-candle {
    font-size: 1.3rem;
  }
}

/* ==========================================
   Utility
   ========================================== */

/* .u-bold はスタイル未定義（旧 .bold も未定義のまま使われていたため見た目維持） */

@media screen and (max-width: 768px) {
  .u-md-hidden {
    display: none;
  }
}

.u-hide-cover {
  position: relative;
  pointer-events: none !important;
}

.u-hide-cover::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, black 60%, transparent);
  z-index: 10;
}

.is-pc {
  display: block;
}

.is-sp {
  display: none;
}

@media (max-width: 768px) {
  .is-pc {
    display: none;
  }

  .is-sp {
    display: block;
  }
}

/* ==========================================
   Block: top-nav（PC用・右上固定ナビ）
   ========================================== */

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 30px;
  font-family: var(--fontFamily-serif);
  transition: background-color 0.3s ease;
}

.top-nav.is-scrolled {
  background-color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
  .top-nav {
    display: none;
  }
}

.top-nav__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 5px;
}

.top-nav__link {
  display: block;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.top-nav__link:hover {
  color: #fff;
  opacity: 0.7;
  text-decoration: none;
}

/* ==========================================
   Block: hamburger（SPハンバーガーボタン）
   ========================================== */

.hamburger {
  display: none;
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 200;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

.hamburger__line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #fff;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================
   Block: spmenu（SPメニュー）
   ========================================== */

.spmenu {
  display: none;
}

@media (max-width: 768px) {
  .spmenu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .hamburger[aria-expanded="true"] ~ .spmenu {
    opacity: 1;
    visibility: visible;
  }

  .spmenu__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .spmenu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .spmenu__item {
    margin-bottom: 24px;
  }

  .spmenu__item:last-child {
    margin-bottom: 0;
  }

  .spmenu__link {
    color: #fff;
    font-size: 20px;
    font-family: var(--fontFamily-serif);
    text-decoration: none;
    letter-spacing: 0.1em;
  }

  .spmenu__link:hover {
    color: #fff;
    opacity: 0.7;
  }
}

/* ==========================================
   Animation: js-effect（スクロールフェードイン）
   ========================================== */

.js-effect {
  opacity: 0;
  transform: translateY(30px);
}

.js-effect.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-parallax-star {
  will-change: transform;
}

/* ==========================================
   Component: btn（矢印つきボタンリンク）
   ========================================== */

a.btn {
  display: block;
  color: #fff;
  padding: 15px 10px 15px 20px;
  border-style: solid;
  border-width: 1px;
  position: relative;
  border-color: white;
  color: white;
}

a.btn:after {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  right: 15px;
  transition: all 0.25s ease;
  width: 16px;
  height: 16px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

a.btn:hover:after {
  right: 18px;
}

/* ==========================================
   Component: heading-top（英字メイン＋和文サブのセクション見出し）
   外側の余白は持たない（前後のスペーシングは各セクション側で調整）。
   文字色も持たない（セクションの color を継承）。
   ========================================== */

.heading-top {
  text-align: center;
}

.heading-top__main {
  font-size: 50px;
  font-family: "utsukushi", serif;
  letter-spacing: 0.1em;
  margin-block: var(--leading-trim);
}

@media (max-width: 768px) {
  .heading-top__main {
    font-size: 28px;
  }
}

.heading-top__sub {
  font-size: 3rem;
  font-weight: normal;
  font-family: "utsukushi", serif;
  margin-block: 0.4em 0;
}
@media (max-width: 768px) {
  .heading-top__sub {
    font-size: 16px;
  }
}

/* ==========================================
   Component: ribbon-event（縦書きリボンラベル）
   幅は親要素に依存する（section-event__area 側で指定）。
   ========================================== */

.ribbon-event {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 60px;
  min-height: 244px;
  margin: 0;
  padding: 20px 0 44px;
  background-color: #7b7b7b; /* 外周の線色（地色は ::before で重ねる） */
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  writing-mode: vertical-rl;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 18px), 0 100%);
}

/* 外周の線はリボン形状（燕尾）に沿わせる：
   本体背景を線色にし、inset の分だけ内側に地色レイヤー(::before)を
   同じ燕尾形で重ねることで、縁から覗く線色を輪郭線として表現する。
   線の太さ＝inset の値。クリップのV字深さは本体と同値のままでよい。 */
.ribbon-event::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background-color: #a1a3a2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 18px), 0 100%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .ribbon-event {
    width: 36px;
    min-height: 190px;
    padding: 14px 0 32px;
    font-size: 14px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12px), 0 100%);
  }

  .ribbon-event::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12px), 0 100%);
  }
}

/* ==========================================
   Component: slider（slick 上書き）
   ========================================== */

.slider-nav .slick-slide {
  margin: 0 5px 10px;
}

.slider-nav .slick-slide img {
  vertical-align: middle;
  border: solid 1px transparent;
}

/* ==========================================
   Layout: header
   ========================================== */

#ghead {
  width: 100%;
  overflow: hidden;
}

/* ==========================================
   Layout: page-wrap（コンテンツ全体ラッパー）
   ========================================== */

.page-wrap {
  width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .page-wrap {
    overflow: hidden;
  }
}

.page-wrap__contents {
  overflow: hidden;
}

/* ==========================================
   Block: bg（固定背景）
   ========================================== */

.bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #000;
}

/* ==========================================
   Block: particle（浮遊する光の粒）
   ========================================== */

.particle {
  width: 91px;
  height: 91px;
  z-index: 2;
}

.particle.particle--left {
  left: 5%;
}
.particle.particle--right {
  right: 5%;
}

@media (max-width: 768px) {
  .shonan-candle .particle {
    display: none;
  }
}

.shonan-candle .particle:nth-of-type(1) {
  position: absolute;
  bottom: 22%;
  z-index: 2;
}

.shonan-candle .particle:nth-of-type(2) {
  position: absolute;
  bottom: 24%;
  z-index: 2;
}

.shonan-candle .particle:nth-of-type(3) {
  position: absolute;
  bottom: 10%;
  z-index: 2;
}

.shonan-candle .particle:nth-of-type(4) {
  position: absolute;
  bottom: 8%;
  z-index: 2;
}

/* ==========================================
   Block: visual（メインビジュアル）
   ========================================== */

.visual {
  position: relative;
}

.visual__inner {
  position: relative;
}

@media (max-width: 768px) {
  .visual__image {
    height: 68vh;
    object-fit: cover;
    object-position: center;
  }
}

.visual__logo {
  position: absolute;
  top: 35%;
  left: 50%;
  max-width: 450px;
  translate: -50%;
  width: 100%;
}

@media (max-width: 768px) {
  .visual__logo {
    top: 40%;
    transform: translateY(-50%);
    width: 60%;
  }
}

.visual__logo-img {
  filter: drop-shadow(0 0 4px rgb(0, 0, 0));
}

/* ==========================================
   Block: section-info（MV下の開催情報）
   MVに -124px 重ねて表示する。開催概要と中止時の案内をまとめて持つ。
   下側の余白は持たない（直後の section-catch のグラデーション帯が続く）。
   ========================================== */

.section-info {
  margin-top: -124px;
  position: relative;
  z-index: 3;
}

.section-info__inner {
  text-align: center;
  padding: 30px 20px 90px;
  max-width: 830px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
  .section-info__inner {
    padding: 30px 24px 60px;
  }
}

.section-info__title {
  font-size: 20px;
  margin-bottom: unset;
}

.section-info__subtitle {
  font-size: 20px;
  font-family: var(--fontFamily-serif);
}

.section-info__subtitle > span:nth-child(1) {
  font-size: calc(64 / 20 * 100%);
  display: block;
  font-feature-settings: "palt";
  line-height: 1.4;
}

.section-info__subtitle > span:nth-child(2) {
  display: block;
}

.section-info__period {
  font-family: var(--fontFamily-serif);
  display: inline-block;
  font-size: 2.4rem;
  line-height: 1;
  margin-top: 20px;
  padding: 1.6rem 3rem;
  border: solid 2px currentColor;
  font-weight: 700;
  padding-right: 1.5rem;
}

.section-info__time {
  font-size: 120%;
  margin-top: 20px;
}

.section-info__place {
  font-weight: 700;
  font-size: 130%;
  margin-top: 5px;
}

.section-info__hours {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 54px;
  padding: 20px 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  max-width: 532px;
  margin-left: auto;
  margin-right: auto;
}

.section-info__hours-title {
  font-weight: 700;
}

.section-info__hours-detail {
  margin-top: 8px;
}

.section-info__notice {
  margin-top: 54px;
}

.section-info__notice-text {
  margin: 0;
}

.section-info__em {
  font-size: 130%;
}

.section-info__notice .btn {
  display: inline-block;
  text-align: center;
  padding: 15px 20px;
  max-width: 456px;
  width: 100%;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .section-info__title {
    font-size: clamp(14px, calc(14 / 375 * 100vw), 20px);
  }

  .section-info__subtitle {
    font-size: clamp(14px, calc(14 / 375 * 100vw), 20px);
  }

  .section-info__period {
    font-size: 18px;
    padding: 0.8rem 1.5rem;
    padding-right: 0.75rem;
  }

  .section-info__hours {
    font-size: clamp(12px, calc(14 / 375 * 100vw), 18px);
  }

  .section-info__notice-text {
    text-align: left;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .section-info__notice .btn {
    text-align: left;
    padding: 15px 10% 15px 5%;
  }
}

/* ==========================================
   Block: eventlink（チケット・開催情報リンク）
   ========================================== */

.eventlink {
  display: block;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 768px) {
  .eventlink {
    margin: 0 5%;
  }
}

.eventlink__bnr {
  max-width: 490px;
  margin: 24px auto;
}

.eventlink__bnr a:hover {
  opacity: 0.7;
}

/* ==========================================
   Block: section-catch（キャッチコピー）
   ========================================== */

/* 上端の「黒→クリーム」グラデーションは、padding-top と同じ高さで
   背景画像として敷く（上は黒背景なので見た目は連続する）。
   2色ベタだと開始・終了位置に折れ目（マッハバンド）が見えるため、
   smoothstep 曲線を近似した多段ストップでイージングをかける。 */
.section-catch {
  padding-left: 20px;
  padding-right: 20px;
  background-color: var(--color-bg);
  background-image: linear-gradient(
    to bottom,
    #000 0%,
    color-mix(in oklab, #000 94%, var(--color-bg)) 15%,
    color-mix(in oklab, #000 78%, var(--color-bg)) 30%,
    color-mix(in oklab, #000 57%, var(--color-bg)) 45%,
    color-mix(in oklab, #000 35%, var(--color-bg)) 60%,
    color-mix(in oklab, #000 16%, var(--color-bg)) 75%,
    color-mix(in oklab, #000 3%, var(--color-bg)) 90%,
    var(--color-bg) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% calc(var(--spacing-a) * 2);
  position: relative;
  z-index: 3;
  padding-top: calc(var(--spacing-a) * 2);
}

.section-catch__heading[class] {
  display: grid;
  place-items: center;
  margin-bottom: 0;
}

.section-catch__headingImg {
  max-width: 680px;
}

/* ==========================================
   Block: label-dt（会場・金額などのラベル）
   ========================================== */

.label-dt {
  background-color: var(--color-secondary);
  color: white;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  border-radius: 3px;
  min-height: 33px;
  padding-left: 0.9em;
  padding-right: 0.9em;
  min-width: 59px;
  display: grid;
  place-items: center;
}

@media (max-width: 768px) {
  .label-dt {
    font-size: 13px;
    min-width: 40px;
    min-height: 26px;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}

/* ==========================================
   Block: section-event（イベント一覧）
   ========================================== */

.section-event {
  background-color: var(--color-bg);
  padding-top: var(--spacing-a);
  position: relative;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section-event__inner {
  max-width: calc(var(--width-inner) * 1px);
  margin-left: auto;
  margin-right: auto;
}

.section-event__heading {
  color: var(--color-primary);
}

.section-event__heading + .section-event__block {
  margin-top: 30px;
}

.section-event__block {
  max-width: 615px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

.section-event__block--sm {
  max-width: 551px;
}

@media (max-width: 768px) {
  .section-event__block:has(.section-event__area) {
    margin-left: 20px;
    margin-right: 20px;
  }
  .section-event__block:has(.section-event__area) .event-item {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.section-event__block--tounai {
  position: relative;
}

.section-event__block--tounai .section-event__list-wrap {
  background-color: #fff;
}

.section-event__block--tounai + .section-event__block--sm {
  margin-top: var(--spacing-b);
}

.section-event__frame-top {
  position: absolute;
  width: calc(100% - 10px);
  left: 2%;
  top: -5px;
  content: "";
  background-color: #3a302e;
  height: 1px;
}

.section-event__frame-left {
  position: absolute;
  width: 1px;
  left: -5px;
  top: 5px;
  content: "";
  background-color: #3a302e;
  height: calc(100% - 10px);
}

.section-event__frame-right {
  position: absolute;
  width: 1px;
  right: -5px;
  top: 5px;
  content: "";
  background-color: #3a302e;
  height: calc(100% - 10px);
}

.section-event__frame-bottom {
  position: absolute;
  width: calc(100% - 10px);
  left: 2%;
  bottom: -5px;
  content: "";
  background-color: #3a302e;
  height: 1px;
}

.section-event__area {
  position: absolute;
  top: 0;
  left: -5px;
  translate: -50% -20px;
  z-index: 2;
}

@media (max-width: 768px) {
  .section-event__area {
    translate: -50% -10px;
  }
}

.section-event__list.section-event__list--sm {
  max-width: 551px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================
   Block: event-item（イベント個別枠）
   ========================================== */

.event-item {
  border-top: 1px solid #3a302e;
  padding-top: var(--spacing-b);
  padding-bottom: var(--spacing-b);
  position: relative;
}

.event-item.event-item--bb-none {
  border-top: unset;
}

.event-item__ribbon {
  position: absolute;
  width: 82px;
  top: 0;
  left: 20px;
  translate: 0 -20px;
  z-index: 2;
  background-color: var(--color-bg);
}

@media (max-width: 768px) {
  .event-item__ribbon {
    width: 60px;
    translate: 0 -15px;
    left: 10px;
  }
}

.event-item__date {
  font-size: 30px;
  line-height: 1.5;
  text-align: center;
  font-family: var(--fontFamily-serif);
  font-weight: 700;
  color: var(--color-primary);
  padding-bottom: 0.15em;
  width: fit-content;
  margin-left: auto;
  font-feature-settings: "palt";
  margin-right: auto;
}

@media (max-width: 768px) {
  .event-item__date {
    font-size: clamp(10px, calc(20 / 375 * 100vw), 20px);
  }
}

.event-item__date--bb {
  border-bottom: 1px solid currentColor;
}

.event-item__time {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  color: #000;
  text-align: center;
  margin-top: 5px;
}

.event-item__name {
  color: var(--color-primary);
  font-size: 30px;
  line-height: 1.4;
  text-align: center;
  font-weight: 600;
  margin-top: 15px;
}

@media (max-width: 768px) {
  .event-item__name {
    font-size: clamp(10px, calc(20 / 375 * 100vw), 20px);
  }
}

.event-item__detail {
  margin-top: 15px;
  color: #000;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  text-align: center;
  max-width: 490px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .event-item__detail {
    font-size: 15px;
  }
}

.event-item__image {
  max-width: 460px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
}

.event-item__copyright {
  margin-top: 10px;
  color: #000;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.event-item__summary {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  width: fit-content;
  column-gap: 12px;
  align-items: center;
  row-gap: 10px;
  margin-left: auto;
  margin-right: auto;
}

.event-item__summary-dt {
  align-self: flex-start;
}

.event-item__summary-dd {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: #000;
}

.event-item__link {
  color: var(--color-primary);
  text-decoration: underline;
}

.event-item__note {
  margin-top: 15px;
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  text-align: center;
}

/* ==========================================
   Block: section-map（会場マップ）
   ========================================== */

/* 下端の「クリーム→黒」グラデーションは、padding-bottom 内に
   背景画像として敷く（無地1コマ + グラデ2コマ分の余白）。
   折れ目（マッハバンド）対策の多段ストップは section-catch と同様。
   下地色はクリームではなく黒: セクション高さが小数ピクセルのとき
   bottom 基準のグラデ画像と下端の間に丸め誤差の隙間ができても、
   覗くのが黒なら次セクションと繋がり線に見えない。
   クリーム地はグラデ上端に 1px 重ねた別レイヤーで敷く。 */
.section-map {
  background-color: #000;
  background-image:
    linear-gradient(
      to bottom,
      var(--color-bg) 0%,
      color-mix(in oklab, #000 6%, var(--color-bg)) 15%,
      color-mix(in oklab, #000 22%, var(--color-bg)) 30%,
      color-mix(in oklab, #000 43%, var(--color-bg)) 45%,
      color-mix(in oklab, #000 65%, var(--color-bg)) 60%,
      color-mix(in oklab, #000 84%, var(--color-bg)) 75%,
      color-mix(in oklab, #000 97%, var(--color-bg)) 90%,
      #000 100%
    ),
    linear-gradient(var(--color-bg), var(--color-bg));
  background-repeat: no-repeat;
  background-position: bottom, top;
  background-size:
    100% calc(var(--spacing-a) * 2),
    100% calc(100% - var(--spacing-a) * 2 + 1px);
  color: var(--color-primary);
  position: relative;
  padding: var(--spacing-a) var(--gutter) calc(var(--spacing-a) * 3);
}

.section-map__map {
  margin-top: 30px;
  display: grid;
  place-items: center;
}

.section-map__map img {
  max-width: 956px;
}

.section-map__banner {
  margin-top: 48px;
  display: grid;
  place-items: center;
}

.section-map__bannerLink:hover {
  opacity: 0.7;
}

.section-map__banner img {
  max-width: 489px;
}

/* ==========================================
   Block: section-schedule（点灯スケジュール）
   ========================================== */

.section-schedule {
  position: relative;
  z-index: 2;
}

.section-schedule__container {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.section-schedule__inner {
  width: 100%;
  max-width: calc(830px + var(--gutter) * 2);
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--spacing-a) var(--gutter) 0;
}

.section-schedule__body {
  margin-top: 30px;
}

.section-schedule__table-box {
  overflow-x: auto;
}

.section-schedule__table-box > table {
  min-width: 700px;
}

.section-schedule__table {
  font-size: 1.4rem;
  table-layout: auto;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .section-schedule__table {
    table-layout: fixed;
  }
}

.section-schedule__table tr:first-child {
  border-top: solid 2px #fff;
}

.section-schedule__table tr:nth-last-child(1) td {
  border-bottom: solid 2px #fff;
}

.section-schedule__table th {
  text-align: center;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
  border-right: solid 1px #fff;
  min-width: 5em;
}

.section-schedule__table tr:first-of-type th:nth-child(1) {
  width: 150px;
}

.section-schedule__table tr:first-of-type th:nth-child(2) {
  min-width: 240px;
}

@media (max-width: 768px) {
  .section-schedule__table th {
    min-width: 7.8em;
  }
}

.section-schedule__table th:last-of-type {
  border-right: none;
}

.section-schedule__table th.section-schedule__th--area {
  width: 28%;
}

.section-schedule__table th.section-schedule__th--time {
  width: 27%;
}

@media (max-width: 768px) {
  .section-schedule__table tr:first-of-type th:nth-child(1) {
    width: 130px;
  }
  .section-schedule__table tr:first-of-type th:nth-child(2) {
    width: 240px;
  }
  .section-schedule__table th.section-schedule__th--area {
    width: 190px;
  }
  .section-schedule__table th.section-schedule__th--time {
    width: 220px;
  }
}

.section-schedule__table td {
  border-right: solid 1px #fff;
  border-bottom: dotted 1px #7b7b7b;
}

.section-schedule__table td:last-of-type {
  border-right: none;
}

.section-schedule__table td a {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================
   Block: section-gallery（PHOTO GALLERY）
   ========================================== */

.section-gallery {
  position: relative;
  z-index: 2;
  padding-top: var(--spacing-a);
  background-color: var(--color-bg);
}

.section-gallery__inner {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.section-gallery__heading {
  position: relative;
  z-index: 10;
  color: var(--color-primary);
}

.section-gallery__body {
  overflow: hidden;
  margin-top: 30px;
}

/* ==========================================
   Block: section-pricing（料金・チケット）
   ========================================== */

.section-pricing {
  margin-top: var(--spacing-a);
}

.section-pricing__inner {
  max-width: calc(830px + var(--gutter) * 2);
  box-sizing: border-box;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section-pricing__body {
  margin-top: 30px;
  display: grid;
  place-items: center;
}

.section-pricing__banners {
  margin-top: 40px;
}

/* ==========================================
   Component: pricing-dl（料金定義リスト）
   ========================================== */

.pricing-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  width: fit-content;
}

@media (max-width: 768px) {
  .pricing-dl {
    grid-template-columns: auto;
  }
}

.pricing-dl__term {
  white-space: nowrap;
  font-weight: 700;
}

@media (max-width: 768px) {
  .pricing-dl__term:not(:first-of-type) {
    margin-top: 10px;
  }
}

.pricing-dl__desc {
  margin-left: 1em;
}

/* ==========================================
   Block: section-contact（お問い合わせ）
   ========================================== */

.section-contact {
  margin-top: var(--spacing-a);
}

.section-contact__inner {
  max-width: calc(830px + var(--gutter) * 2);
  box-sizing: border-box;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section-contact__heading {
  text-align: center;
  font-size: 3rem;
  font-weight: normal;
  font-family: "utsukushi", serif;
  margin-bottom: 10px;
}

.section-contact__box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  border: solid 1px #fff;
}

.section-contact__item {
  font-size: 1.8rem;
  padding: 10px 20px;
  width: 50%;
}

.section-contact__item h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 3px;
}

.section-contact__item a {
  color: #fff;
}

.section-contact__item--left {
  border-right: solid 1px #fff;
}

@media (max-width: 768px) {
  .section-contact__heading {
    font-size: 5vw;
  }

  .section-contact__item {
    font-size: 1.4rem;
    width: 100%;
  }

  .section-contact__item h4 {
    font-size: 1.6rem;
  }

  .section-contact__item--left {
    border-right: none;
    border-bottom: solid 1px #fff;
  }
}

/* ==========================================
   Block: footer
   ========================================== */

.footer__inner {
  max-width: calc(830px + var(--gutter) * 2);
  box-sizing: border-box;
  margin: auto;
  text-align: left;
  padding: 96px var(--gutter);
}

@media (max-width: 768px) {
  .footer__inner {
    padding: var(--spacing-a) var(--gutter) 0;
  }
}

.footer__bnr-big a:hover {
  opacity: 0.8;
}

.footer__sponsor {
  margin-top: 4rem;
}

.footer__sponsor p {
  margin-bottom: 2rem;
}

.footer__kameyama-logo {
  max-width: 180px;
  vertical-align: top;
}