:where(html) {
  scroll-behavior: smooth;
}

*,
.c5-main {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

.s5-returnToTop {
  margin: 0;
}

svg {
  width: 100%;
}

figure {
  margin: 0;
}

:root {
  --font-ratio: 1;
  --root-font-size: 16;
}

@media screen and (max-width: 1440px) {
  :root {
    --font-ratio: 1;
  }
}
@media screen and (max-width: 1415px) {
  :root {
    --font-ratio: 0.9826388889;
  }
}
@media screen and (max-width: 1390px) {
  :root {
    --font-ratio: 0.9652777778;
  }
}
@media screen and (max-width: 1365px) {
  :root {
    --font-ratio: 0.9479166667;
  }
}
@media screen and (max-width: 1340px) {
  :root {
    --font-ratio: 0.9305555556;
  }
}
@media screen and (max-width: 1315px) {
  :root {
    --font-ratio: 0.9131944444;
  }
}
@media screen and (max-width: 1290px) {
  :root {
    --font-ratio: 0.8958333333;
  }
}
@media screen and (max-width: 1265px) {
  :root {
    --font-ratio: 0.8784722222;
  }
}
@media screen and (max-width: 1240px) {
  :root {
    --font-ratio: 0.8611111111;
  }
}
@media screen and (max-width: 1215px) {
  :root {
    --font-ratio: 0.84375;
  }
}
@media screen and (max-width: 1190px) {
  :root {
    --font-ratio: 0.8263888889;
  }
}
@media screen and (max-width: 1165px) {
  :root {
    --font-ratio: 0.8090277778;
  }
}
@media screen and (max-width: 1140px) {
  :root {
    --font-ratio: 0.7916666667;
  }
}
@media screen and (max-width: 1115px) {
  :root {
    --font-ratio: 0.7743055556;
  }
}
@media screen and (max-width: 1090px) {
  :root {
    --font-ratio: 0.7569444444;
  }
}
@media screen and (max-width: 1065px) {
  :root {
    --font-ratio: 0.7395833333;
  }
}
@media screen and (max-width: 1040px) {
  :root {
    --font-ratio: 0.7222222222;
  }
}
@media screen and (max-width: 1015px) {
  :root {
    --font-ratio: 0.7048611111;
  }
}
@media screen and (max-width: 990px) {
  :root {
    --font-ratio: 0.6875;
  }
}
@media screen and (max-width: 965px) {
  :root {
    --font-ratio: 0.6701388889;
  }
}
@media screen and (max-width: 940px) {
  :root {
    --font-ratio: 0.6527777778;
  }
}
@media screen and (max-width: 915px) {
  :root {
    --font-ratio: 0.6354166667;
  }
}
@media screen and (max-width: 890px) {
  :root {
    --font-ratio: 0.6180555556;
  }
}
@media screen and (max-width: 865px) {
  :root {
    --font-ratio: 0.6006944444;
  }
}
@media screen and (max-width: 840px) {
  :root {
    --font-ratio: 0.5833333333;
  }
}
@media screen and (max-width: 815px) {
  :root {
    --font-ratio: 0.5659722222;
  }
}
@media screen and (max-width: 790px) {
  :root {
    --font-ratio: 0.5486111111;
  }
}
@media screen and (max-width: 765px) {
  :root {
    --font-ratio: 0.53125;
  }
}
@media screen and (max-width: 740px) {
  :root {
    --font-ratio: 0.5138888889;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --font-ratio: 1;
  }
}
@media screen and (max-width: 753px) {
  :root {
    --font-ratio: 0.98046875;
  }
}
@media screen and (max-width: 738px) {
  :root {
    --font-ratio: 0.9609375;
  }
}
@media screen and (max-width: 723px) {
  :root {
    --font-ratio: 0.94140625;
  }
}
@media screen and (max-width: 708px) {
  :root {
    --font-ratio: 0.921875;
  }
}
@media screen and (max-width: 693px) {
  :root {
    --font-ratio: 0.90234375;
  }
}
@media screen and (max-width: 678px) {
  :root {
    --font-ratio: 0.8828125;
  }
}
@media screen and (max-width: 663px) {
  :root {
    --font-ratio: 0.86328125;
  }
}
@media screen and (max-width: 648px) {
  :root {
    --font-ratio: 0.84375;
  }
}
@media screen and (max-width: 633px) {
  :root {
    --font-ratio: 0.82421875;
  }
}
@media screen and (max-width: 618px) {
  :root {
    --font-ratio: 0.8046875;
  }
}
@media screen and (max-width: 603px) {
  :root {
    --font-ratio: 0.78515625;
  }
}
@media screen and (max-width: 588px) {
  :root {
    --font-ratio: 0.765625;
  }
}
@media screen and (max-width: 573px) {
  :root {
    --font-ratio: 0.74609375;
  }
}
@media screen and (max-width: 558px) {
  :root {
    --font-ratio: 0.7265625;
  }
}
@media screen and (max-width: 543px) {
  :root {
    --font-ratio: 0.70703125;
  }
}
@media screen and (max-width: 528px) {
  :root {
    --font-ratio: 0.6875;
  }
}
@media screen and (max-width: 513px) {
  :root {
    --font-ratio: 0.66796875;
  }
}
@media screen and (max-width: 498px) {
  :root {
    --font-ratio: 0.6484375;
  }
}
@media screen and (max-width: 483px) {
  :root {
    --font-ratio: 0.62890625;
  }
}
@media screen and (max-width: 468px) {
  :root {
    --font-ratio: 0.609375;
  }
}
@media screen and (max-width: 453px) {
  :root {
    --font-ratio: 0.58984375;
  }
}
@media screen and (max-width: 438px) {
  :root {
    --font-ratio: 0.5703125;
  }
}
@media screen and (max-width: 423px) {
  :root {
    --font-ratio: 0.55078125;
  }
}
@media screen and (max-width: 408px) {
  :root {
    --font-ratio: 0.53125;
  }
}
@media screen and (max-width: 393px) {
  :root {
    --font-ratio: 0.51171875;
  }
}
@media screen and (max-width: 378px) {
  :root {
    --font-ratio: 0.4921875;
  }
}
.c-sec {
  position: relative;
  padding-block: calc(120 / var(--root-font-size) * var(--font-ratio) * 1rem);
  overflow: clip;
}
.c-sec::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  padding-top: 33.3333333333vw;
  content: "";
  background: url("../img/bg_section.png") no-repeat bottom/100%;
  transform: translateX(-50%);
}
.c-sec__inr {
  position: relative;
  z-index: 1;
  width: var(--width-base);
  max-width: calc(var(--max-width) * 1px);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-sec {
    padding-block: calc(64 / var(--design-width-canvas-sp) * 100%);
  }
  .c-sec--first {
    padding-block: calc(24 / var(--design-width-canvas-sp) * 100%);
  }
  .c-sec::after {
    padding-top: 61.5384615385%;
    background-image: url("../img/bg_section_sp.png");
  }
}

.c-heading01 {
  font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 150%;
}
@media screen and (max-width: 768px) {
  .c-heading01 {
    margin-block-end: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(44 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}

.c-btn-wrap {
  display: flex;
  gap: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  justify-content: center;
}

.c-btn {
  max-inline-size: calc(240 / var(--root-font-size) * var(--font-ratio) * 1rem);
  width: 100%;
  background: #111;
}
.c-btn a {
  position: relative;
  display: block;
  padding: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 700;
  line-height: 170%;
  text-align: center;
  border: 1px solid #fff;
  transition: 0.3s ease-out;
}
.c-btn a svg {
  position: absolute;
  top: 50%;
  right: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  width: 0.6em;
  aspect-ratio: 9/11;
  stroke: #fff;
  transform: translateY(-50%);
  transition: transform 0.6s ease-out;
}
.c-btn--side {
  max-inline-size: calc(170 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c-btn--side a {
  height: calc(170 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding: 0 calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  writing-mode: vertical-rl;
}
.c-btn--a a {
  background: #142963;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .c-btn--a a:hover {
    background: rgba(0, 123, 255, 0.5);
  }
}
.c-btn--b a {
  background: #7A1515;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .c-btn--b a:hover {
    background: rgba(255, 0, 128, 0.5);
  }
}

@media screen and (max-width: 768px) {
  .c-btn-wrap {
    flex-direction: column;
    gap: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
    align-items: center;
  }
  .c-btn {
    max-inline-size: calc(480 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c-btn a {
    padding: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(56 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c-btn a svg {
    right: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c-btn--side {
    max-inline-size: 100%;
    width: 100%;
  }
  .c-btn--side a {
    height: auto;
    padding: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    writing-mode: initial;
  }
}
.c-text {
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 170%;
}
@media screen and (max-width: 768px) {
  .c-text {
    font-size: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}

.c-text-min {
  font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 150%;
  color: #CFCFCF;
}
@media screen and (max-width: 768px) {
  .c-text-min {
    font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}

.c-movie-box {
  position: relative;
  z-index: 1;
  display: block;
}
.c-movie-box video,
.c-movie-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: none;
}
.c-movie-box__thumb {
  position: relative;
  display: block;
}
.c-movie-box__thumb::before, .c-movie-box__thumb::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11.67%;
  aspect-ratio: 1/1;
  content: "";
  transform: translate(-50%, -50%);
}
.c-movie-box__thumb::before {
  background: url("../img/icon_play.svg") no-repeat center/28.57% auto;
  transform: translate(-50%, -50%);
}
.c-movie-box__thumb::after {
  border: 1px solid var(--color-white);
  border-radius: 50%;
  transition: transform 0.3s ease-out;
}
.c-movie-box__thumb img {
  width: 100%;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .c-movie-box__thumb:hover::after {
    transform: translate(-50%, -50%) scale(1.29);
  }
}
.c-movie-box:not(:has(.c-movie-box__thumb))::before {
  display: block;
  padding-top: 56.25%;
  content: "";
}
.c-movie-box:not(:has(.c-movie-box__thumb)) video, .c-movie-box:not(:has(.c-movie-box__thumb)) iframe {
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .c-movie-box__thumb::before, .c-movie-box__thumb::after {
    width: 20.57%;
  }
}

.c-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-modal);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: none;
}
.c-modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--color-gray-400);
  opacity: 0.6;
}
.c-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: 27px calc(100% - 43px);
  grid-template-columns: 100%;
  gap: 16px;
  width: var(--width-base);
  max-width: calc(var(--max-width) * 1px);
  max-height: 100%;
  text-align: right;
  transform: translate(-50%, -50%);
}
.c-modal__content:has(.c-movie-box) {
  max-width: 1008px;
}
.c-modal__close {
  position: relative;
  place-self: center end;
  padding-left: 1.56em;
  font-family: var(--font-family-serif-en) !important;
  font-size: 18px;
  color: var(--color-white);
  letter-spacing: normal !important;
  background: transparent;
  border: none;
  transition: opacity 0.3s ease-out;
}
.c-modal__close::before, .c-modal__close::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.28em;
  height: 1px;
  content: "";
  background: var(--color-white);
}
.c-modal__close::before {
  transform: translateY(-50%) rotate(25deg);
}
.c-modal__close::after {
  transform: translateY(-50%) rotate(-25deg);
}
@media (any-hover: hover) and (any-pointer: fine) {
  .c-modal__close:hover {
    opacity: 0.5;
  }
}
.c-modal .c-movie-box {
  height: 100%;
}
@media screen and (max-width: 768px) {
  .c-modal__content {
    grid-template-rows: 27px calc(100% - 35px);
    gap: 8px;
  }
}

html {
  scroll-padding-top: 0 !important;
}

html:has(dialog[open]) {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  html {
    scroll-padding-top: calc(166 / var(--root-font-size) * var(--font-ratio) * 1rem) !important;
  }
}
.c5-main {
  /* =====================================
   vars - layout
  ===================================== */
  --design-width-canvas-sp: 390;
  --design-width-content-sp: 350;
  --width-base: calc(var(--design-width-content-sp) / var(--design-width-canvas-sp) * 100%);
  --max-width: 1200;
  --scrollbar: 0;
  /* =====================================
   vars - color
  ===================================== */
  /* Gray
  ------------------------------------- */
  --color-gray-400: #000;
  --color-gray-300: #656565;
  --color-gray-200: #e2e4e9;
  --color-gray-100: #f1f2f4;
  --color-white: #fff;
  /* Gold
  ------------------------------------- */
  --color-gold-200: #a79059;
  --color-gold-100: #dcd7cb;
  --color-font-base: var(--color-white);
  /* =====================================
   vars - font
  ===================================== */
  /* Family
  ------------------------------------- */
  --font-family-serif: "Hiragino Kaku Gothic ProN", meiryo, メイリオ, sans-serif;
  /* Size

  ------------------------------------- */
  --font-size-sm: 14;
  --font-size-base: 16;
  --font-size-md: 18;
  --font-size-lg: 24;
  --font-size-xl: 28;
  --font-size-2xl: 32;
  --font-size-3xl: 40;
  --font-size-4xl: 56;
  --font-size-5xl: 64;
  /* Weight
  ------------------------------------- */
  --font-weight-lt: 300;
  --font-weight-rg: 400;
  --font-weight-md: 500;
  --font-weight-sbd: 600;
  --font-weight-bd: 700;
  --font-weight-ebd: 800;
  /* =====================================
  vars - z-index
  ===================================== */
  --z-index-header: 100;
  --z-index-modal: 200;
  font-family: var(--font-family-serif);
  font-size: calc(var(--font-size-base) / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: var(--font-weight-md);
  line-height: 1.5;
  color: var(--color-font-base);
  background: #111;
}
.c5-main :where(picture) {
  font-size: 0;
}
.c5-main :where(button) {
  font-family: var(--font-family-serif);
  line-height: 1.5;
}
.c5-main :where(sup) {
  font-size: 60%;
}
.c5-main .swiper-pagination {
  position: static;
  width: auto;
  font-size: 0;
}

.c5-kv {
  position: relative;
  padding-top: 47.3611111111%;
  font-size: 0;
  text-align: center;
  background: url("../img/img_kv.png") no-repeat center/cover;
}
.c5-kv__ttl {
  position: absolute;
  bottom: 11.3194444444vw;
  left: 50%;
  width: 44.7222222222%;
  transform: translateX(-50%);
}
.c5-kv__ttl img {
  width: 100%;
}
.c5-kv__sns {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 2.7777777778%;
  bottom: 4.5138888889vw;
  left: 50%;
  transform: translateX(-50%);
}
.c5-kv__sns-icon {
  width: 2.7777777778%;
}
.c5-kv__sns-icon a {
  display: block;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .c5-kv__sns-icon a:hover {
    opacity: 0.7;
  }
}
.c5-kv__sns-icon img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .c5-main {
    /* =====================================
    vars - font
    ===================================== */
    /* Size
    ------------------------------------- */
    --font-size-2xl: 24;
    --font-size-3xl: 32;
    --font-size-4xl: 40;
    --font-size-5xl: 44;
    font-size: calc(var(--font-size-base) * 1px);
  }
  .c5-kv {
    padding-top: calc(607 / var(--design-width-canvas-sp) * 100%);
    background-image: url("../img/img_kv_sp.png");
  }
  .c5-kv__ttl {
    bottom: calc(135 / var(--design-width-canvas-sp) * 100%);
    width: calc(337 / var(--design-width-canvas-sp) * 100%);
  }
  .c5-kv__sns {
    gap: calc(32 / var(--design-width-canvas-sp) * 100%);
    bottom: calc(70 / var(--design-width-canvas-sp) * 100%);
  }
  .c5-kv__sns-icon {
    width: calc(32 / var(--design-width-canvas-sp) * 100%);
  }
}
@media print {
  .c5-kv {
    padding-top: 0;
    font-size: calc(var(--font-size-4xl) * 1px);
    background: none;
  }
}
.u-col-yellow {
  color: #f1d297;
}

.u-pc-only {
  display: block;
}

.u-sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .u-pc-only {
    display: none;
  }
  .u-sp-only {
    display: block;
  }
}
.u-mb-20 {
  margin-bottom: calc(20px * var(--font-ratio));
}

@media screen and (max-width: 768px) {
  .u-pd-0--sp {
    padding: 0;
  }
  .u-pblock-70--sp {
    padding-block: calc(70px * var(--font-ratio));
  }
}
.u-text-center {
  text-align: center;
}

.u-text-note {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0.57em 0.3em;
  font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
@media screen and (max-width: 768px) {
  .u-text-note {
    font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}