@charset "utf-8";
/* ==========================================
 共通
============================================*/
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-gothic);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: #333;
  width: 100%;
  height: 100%;
  word-break: break-all;
  overflow-x: hidden;
  visibility: hidden;
}

/* フォント定義 */
:root {
  --font-default: "Hiragino Kaku Gothic Pro", "meiryo", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  --font-serif: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --font-gothic: "Noto Sans JP";
  --font-size: clamp(10px, 3.4vw, 24px);
  --font-size: clamp(16px, 4.2vw, 32px);
  --line-height: 1.6;
}

@media (min-width: 1400px) {
  :root {
    --font-size: 33px;
  }
}

.font-default {
  font-family: var(--font-default);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-gothic {
  font-family: var(--font-gothic);
}

/* カラー定義 */
:root {
  --gold: #d7a750;
  --light-gold: #efd93f;
  --blue: #0747ff;
  --beige: #f6f4f2;
  --orange: #fc6f57;
  --red: #ff0000;
  --winered: #c62837;
  --yellow: #fcff00;
  --black: #000;
  --white: #fff;
}

.text-blue {
  color: var(--blue) !important;
}

.text-red {
  color: var(--red) !important;
}

.text-winered {
  color: var(--winered) !important;
}

.text-gold {
  color: var(--gold) !important;
}

.text-gold-grad {
  color: var(--gold) !important;
  background-image: linear-gradient(0deg, #b67b03 0.1em, #daaf08 0.2em, #fee9a0 0.3em, #daaf08 0.4em, #b67b03 0.5em);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

.text-light-gold {
  color: var(--light-gold) !important;
}

.bg-red {
  background-color: var(--red) !important;
}

.bg-winered {
  background-color: var(--winered) !important;
}

.bg-gold {
  background-color: var(--gold) !important;
}

.bg-beige {
  background-color: var(--beige) !important;
}

/* 文字サイズ */
.text-larger {
  font-size: 1.3em;
}

.text-large {
  font-size: 1.9em;
}

/* マーカー */
.mark,
mark {
  background-color: var(--yellow);
  padding: 0;
}

.mark--orange {
  background-color: #ffd36f;
}

/* 画像 */
.img-wrap {
  position: relative;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

a img {
  transition: 0.3s;
}

a:hover img {
  filter: brightness(1.2);
}

/* 段落 */
p {
  margin-bottom: 4.26vw;
  margin-top: 4.26vw;
}

@media (min-width: 992px) {
  p {
    margin-top: 2em;
    margin-bottom: 2em;
  }
}

/* スペーサー */
hr {
  margin: 0;
  border: none;
}

.spacer {
  margin-bottom: 2em;
  background-color: rgba(255, 255, 255, 0);
}

.spacer--lg {
  margin-bottom: 3em;
}

/* マージン微調整 */
.-m1 {
  margin-top: -1px;
  margin-bottom: -1px;
}

/* リスト */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ボタン */
.btn-wrap {
  width: 100%;
  text-align: center;
  position: relative;
}

.btn {
  position: relative;
  transition: 0.3s;
  border: 0;
  padding: 0;
}

.btn:focus {
  box-shadow: none;
}

/* TOPに戻る */
#page-top {
  position: fixed;
  right: 5%;
  bottom: calc(20vw + 20px);
  bottom: 5%;
  font-size: 3vw;
  margin: 0;
  z-index: 10;
  opacity: 0;
  transform: translateY(100%);
  transition: 0.5s ease-in-out;
}

#page-top.show {
  opacity: 1;
  transform: translateY(0);
}

#page-top a {
  padding: 1em;
  background: var(--bs-dark);
  background-image: linear-gradient(180deg, #b67b03, #daaf08, #fee9a0, #daaf08, #b67b03);
  color: #fff;
  text-decoration: none;
  transition: all 0.5s ease;
  border-radius: 5px;
  display: block;
  line-height: 1;
}

#page-top a:hover {
}

@media (min-width: 992px) {
  #page-top {
    right: 25px;
    bottom: 25px;
    font-size: 1em;
  }
}

/* プレースホルダ */
.form-control::placeholder {
  color: #c1ced9;
}

/* ==========================================
 コンテナ
============================================*/
.container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================
 コンテンツ：共通スタイル
============================================*/
/* セクション */
.section {
  overflow: hidden;
  position: relative;
}

.section__header {
  position: relative;
}

.section__heading {
  margin-bottom: 0;
}

/* テキストエリア：基本スタイル */
.txtbox {
  margin-left: auto;
  margin-right: auto;
  padding: 1em 3.7vw;
  z-index: 1;
  position: relative;
}

.txtbox p:first-child {
  margin-top: 0;
}

.txtbox p:last-child {
  margin-bottom: 1em;
}

@media (min-width: 992px) {
  .txtbox {
    width: calc(100vw * (1100 / 1920));
    padding: 50px;
  }

  .txtbox--lg {
    width: calc(100vw * (1600 / 1920));
  }
}

/* テキストエリア：背景ホワイト半透明 */
.txtbox--type1 {
  background-color: rgba(255, 255, 255, 0.8);
}

/* テキストエリア：文字ホワイト */
.txtbox--type2 {
  color: var(--white);
}

/* テキストエリア：文字ホワイト＋背景ブラック半透明 */
.txtbox--type3 {
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.61);
}

/* テキストエリア：背景ホワイト */
.txtbox--type4 {
  background-color: var(--white);
}

/* テキストエリア：文字ホワイト＋背景ピンク半透明 */
.txtbox--type5 {
  color: var(--white);
  background-color: rgba(179, 62, 89, 0.7);
}

/* テキストエリア：背景ブラック */
.txtbox--type6 {
  color: var(--white);
  background-color: var(--black);
}

/* テキストエリア：背景クリーム色グラデ＋グレー枠 */
.txtbox--type7 {
  background-image: linear-gradient(90deg, #fefcf3, #ffffff, #fefcf3);
  border: clamp(5px, 1.3vw, 11px) solid #d5d5d5;
}

/* テキストエリア：文字ホワイト+左ボーダー */
.txtbox--type8 {
  background-color: var(--white);
  border-left: 1em solid var(--blue);
}

/* テキストエリア内の全幅ボックス */
.txtbox .full {
  margin-left: -3.7vw;
  margin-right: -3.7vw;
}

@media (min-width: 992px) {
  .txtbox .full {
    margin-left: -50px;
    margin-right: -50px;
  }
}

/* ==========================================
 ヘッダー
============================================*/
/* ==========================================
 コンテンツ
============================================*/
/* 固定背景 */
.bg-fix {
  background-position: center top;
  background-size: contain;
}

@media (min-width: 992px) {
  .bg-fix {
    background-attachment: fixed;
    background-size: cover;
  }
}

/* ボックスの平行移動 */
@media (min-width: 1400px) {
  .txtbox--lg-left {
    transform: translateX(calc(-100vw * (320 / 1920)));
  }

  .txtbox--lg-right {
    transform: translateX(calc(100vw * (320 / 1920)));
  }
}

/* スクロールボックス */
.scrollbox {
  height: 500px;
  overflow-y: scroll;
  position: relative;
}

.scrollbox-fix {
  position: absolute;
  top: 1rem;
  z-index: 1;
  width: calc(100% * (790 / 1100));
  padding: 0.5em;
}

@media (min-width: 992px) {
  .scrollbox {
    height: 580px;
  }

  .scrollbox-fix {
    top: 0;
  }
}
/* カウントダウン */
.c-countdown {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fd1da1;
  color: var(--bs-white);
  font-size: 300%;
  font-size: clamp(200%, 10vw, 100px);
  font-size: clamp(200%, 8vw, 100px);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  padding: 0.2em;
  letter-spacing: 0.1em;
  width: calc(100vw * (1050 / 1100));
  max-width: 1050px;
}

@media (min-width: 992px) {
  .c-countdown {
    width: calc(100vw * (1050 / 1920));
    font-size: clamp(200%, 6vw, 120px);
    font-size: clamp(200%, 4vw, 120px);
  }
}

/* チケット */
.ticket {
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw * (840 / 1100));
  overflow: hidden;
}

.ticket::after {
  display: block;
  position: absolute;
  top: 0;
  left: -30%;
  top: -25%;
  content: "";
  width: 30px;
  height: 150%;
  transform: rotate(30deg);
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shiny 2s infinite linear;
}

@media (min-width: 992px) {
  .ticket {
    width: calc(100vw * (840 / 1920));
  }
}

/* 進捗バー */
.progress {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw * (792 / 1100));
  background-color: transparent;
  height: auto;
  overflow: inherit;
  font-size: inherit;
}

.progress--type2 {
  top: 45%;
  color: var(--bs-white);
  width: calc(100vw * (635 / 1100));
}

.progress::before {
  content: "50%";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-weight: bold;
}

.progress::after {
  content: "";
  background-color: #00d473;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  border-radius: 4px 0 0 4px;
}

@media (min-width: 992px) {
  .progress {
    width: calc(100vw * (792 / 1920));
  }
}

/* バルーン */
.balloon {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(calc(-100% - 18%));
  width: calc(100vw * (400 / 1100));
}

@media (min-width: 992px) {
  .balloon {
    width: calc(100vw * (400 / 1920));
  }
}

/* CVエリア */
.cv {
}

/* フォーム */
.c-form {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw * (988 / 1100));
  max-width: 988px;
}

.c-form__group {
  margin-bottom: 0.5em;
}

.c-form__group:last-child {
  margin-bottom: 0;
}

.form-label {
  text-align: center;
  display: block;
  margin-bottom: 0.1em;
  font-size: clamp(12px, 3.2vw, 30px);
}

.form-control {
  font-size: clamp(16px, 4.2vw, 40px);
  padding: 0.5em 1em;
  border-color: #212529;
  text-align: center;
  font-size: clamp(15px, 4vw, 24px);
  height: 3.5em;
}

.c-form-submit {
}

@media (min-width: 992px) {
  .c-form {
    width: calc(100vw * (988 / 1920));
  }

  .form-label {
    font-size: clamp(20px, 2vw, 42px);
  }

  .form-control {
    font-size: clamp(20px, 2vw, 42px);
  }
}

@media (max-width: 360px) {
  .form-label {
    font-size: clamp(10px, 2.7vw, 12px);
  }

  .form-control {
    font-size: clamp(16px, 4.4vw, 18px);
    padding: 0.2em 1em;
  }
}

/* 動画 */
.c-video {
  width: calc(100vw * (1050 / 1100));
  max-width: 1050px;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.c-video--1 iframe {
  border: 0.5em solid #003c8d;
  border-radius: 1rem;
  background-color: #003c8d;
}
.c-video--2 iframe {
  border: 0.5em solid #003c8d;
  border-radius: 1rem;
  background-color: #003c8d;
}
@media (min-width: 992px) {
  .c-video {
    width: calc(100vw * (1050 / 1920));
  }
}

/* ==========================================
 フッター
============================================*/
.c-footer {
  padding: 25px 15px;
  font-size: 3vw;
  text-align: center;
}

.c-footer-menu {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
}

.c-footer-menu a {
  color: inherit;
  text-decoration: none;
  padding: 0.2em 1em;
  transition: 0.3s;
  display: block;
  position: relative;
}

.c-footer-menu a:not(:last-child)::after {
  content: "/";
  position: absolute;
  right: 0;
}

.c-footer-menu a:hover {
  color: var(--bs-dark);
  background-color: var(--bs-white);
}

@media (min-width: 992px) {
  .c-footer {
    padding-bottom: 25px;
    font-size: 16px;
    max-width: 1100px;
    margin: 0 auto;
  }

  .c-footer-menu {
    margin-bottom: 0;
  }
}

/* ==========================================
 sub page
============================================*/
.sub {
  padding-top: 3%;
  padding-bottom: 3%;
  font-size: 16px;
}

.sub .container {
  max-width: 1000px;
}

.page-title {
  font-size: 1.7em;
  text-align: center;
  line-height: 1.6;
  color: var(--bs-black);
  margin-bottom: 4%;
  font-weight: bold;
  text-shadow: 1px 1px #c3c3c3;
}

.page-title::after {
  content: attr(data-suffix);
  display: block;
  font-size: 50%;
  opacity: 0.7;
  color: silver;
  font-weight: normal;
  text-shadow: none;
}

.contents__table {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.contents__title {
  caption-side: top;
  padding: 1em;
  margin-bottom: 2em;
  color: #fff;
  background-color: steelblue;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.contents__table th,
.contents__table td {
  border: none;
  display: block;
  padding: 1em 0.5em;
}

.contents__table th {
  background-color: var(--bs-light);
  position: relative;
  white-space: nowrap;
}

.contents__table th::before,
.contents__table th::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: silver;
}

.contents__table th::after {
  width: 25%;
  background-color: steelblue;
}

.contents__table td {
  color: var(--bs-gray);
}

.sub .c-footer {
  font-size: 14px;
}