: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 h1 {
  padding-top: 47.9861111111%;
  font-size: 0;
  text-align: center;
  background: url("../img/img_kv@2x.jpg") no-repeat center/cover;
}

.c5-side-btns {
  position: fixed;
  right: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  bottom: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  opacity: 0;
  transform: translate(100%, 50%);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.c5-side-btns.is-active {
  opacity: 1;
  transform: translate(0, 50%);
}

.c5-local-nav {
  max-inline-size: calc(1000 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-inline: auto;
}
.c5-local-nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  justify-content: center;
}
.c5-local-nav li {
  text-align: center;
}
.c5-local-nav a {
  position: relative;
  display: block;
  padding: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 120%;
  background: none;
  border-bottom: 1px solid #2E2E2E;
  transition: 0.3s ease-out;
}
.c5-local-nav a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #fff;
  transform: scale(0, 0);
  transform-origin: 0 0;
  transition: 0.3s ease-out;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .c5-local-nav a:hover {
    opacity: 0.8;
  }
  .c5-local-nav a:hover::after {
    transform: scale(1, 1);
  }
}
.c5-local-nav a svg {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.2em;
  aspect-ratio: 8/3;
  stroke: #fff;
  transform: translateY(-50%);
  transition: transform 0.6s ease-out;
}

.c5-movie-area {
  position: relative;
  padding-block: calc(200 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-block-end: calc(80 / var(--root-font-size) * var(--font-ratio) * 1rem);
  overflow: clip;
}
.c5-movie-area::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding-top: 66.8055555556%;
  content: "";
  background: url("../img/bg_movie.png") no-repeat center/100%;
  transform: translate(-50%, -50%);
}
.c5-movie-area__inr {
  position: relative;
  z-index: 1;
  max-inline-size: calc(1000 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-inline: auto;
}
.c5-movie-area__text {
  position: relative;
  margin-block-start: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 170%;
  color: #fff;
}
.c5-movie-area__text a {
  text-decoration: none;
  border-bottom: 1px solid #fff;
  transition: 0.3s ease-out;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .c5-movie-area__text a:hover {
    opacity: 0.6;
  }
}
.c5-movie-area__text a svg {
  width: 0.9em;
  aspect-ratio: 16/13;
  margin-inline-start: 0.3em;
}
.c5-movie-area button {
  position: relative;
}
.c5-movie-area button::before, .c5-movie-area button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 10.81%;
  aspect-ratio: 1/1;
  content: "";
  transform: translate(-50%, -50%);
}
.c5-movie-area button::before {
  background: url("../img/icon_play.svg") no-repeat center/35.71% auto;
}
.c5-movie-area button::after {
  border: 1px solid var(--color-white);
  border-radius: 50%;
  transition: transform 0.3s ease-out;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .c5-movie-area button:hover::after {
    transform: translate(-50%, -50%) scale(1.29);
  }
}

.c5-feature {
  display: grid;
  grid-template-columns: calc(330 / var(--root-font-size) * var(--font-ratio) * 1rem) 1fr;
  gap: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__headings {
  position: sticky;
  top: calc(120 / var(--root-font-size) * var(--font-ratio) * 1rem);
  display: flex;
  flex-direction: column;
  gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  align-self: start;
}
.c5-feature__heading-en {
  width: -moz-fit-content;
  width: fit-content;
}
.c5-feature__heading-en.heading01 {
  width: calc(307 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__heading-en.heading02 {
  width: calc(197 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__heading-en.heading03 {
  width: calc(329 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__heading-en.heading04 {
  width: calc(205 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__heading-jp {
  width: -moz-fit-content;
  width: fit-content;
}
.c5-feature__heading-jp.heading01 {
  width: calc(99 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__heading-jp.heading02 {
  width: calc(38 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__heading-jp.heading03 {
  width: calc(59 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__heading-jp.heading04 {
  width: calc(73 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__num {
  display: block;
  margin-bottom: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  line-height: 120%;
  color: #9e9e9e;
}
.c5-feature__block {
  padding-top: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  padding-bottom: calc(80 / var(--root-font-size) * var(--font-ratio) * 1rem);
  border-top: 1px solid #9E9E9E;
}
.c5-feature__block > * + * {
  margin-top: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__block:last-of-type {
  padding-bottom: 0;
}
.c5-feature__box {
  padding: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  background: #222;
}
.c5-feature__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__grid--1fr {
  grid-template-columns: repeat(1, 1fr);
}
.c5-feature__grid img {
  width: 100%;
  height: auto;
}
.c5-feature__grid > div > * + * {
  margin-top: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature__name .jp {
  font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 120%;
  color: #9e9e9e;
}
.c5-feature__name .en {
  font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 700;
  line-height: 150%;
}

.c5-feature-vertical__headings {
  display: flex;
  flex-direction: column;
  gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  align-items: center;
  margin-bottom: calc(64 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-vertical__heading-en {
  width: calc(233 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-vertical__heading-jp {
  width: calc(155 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-vertical__item {
  padding: calc(56 / var(--root-font-size) * var(--font-ratio) * 1rem);
  border: 1px solid #9E9E9E;
}
.c5-feature-vertical__item img {
  width: 100%;
  height: auto;
}
.c5-feature-vertical__item + .c5-feature-vertical__item {
  margin-top: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-vertical__item-inr {
  display: grid;
  grid-template-columns: calc(320 / var(--root-font-size) * var(--font-ratio) * 1rem) 1fr;
  gap: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-vertical__imgs {
  display: flex;
  flex-direction: column;
  gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-vertical__lead {
  font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 120%;
  color: #9e9e9e;
}
.c5-feature-vertical__heading {
  font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 700;
  line-height: 150%;
}
.c5-feature-vertical__border {
  padding-bottom: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  border-bottom: 1px solid #fff;
}
.c5-feature-vertical__info {
  display: flex;
  flex-direction: column;
  gap: calc(4 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-vertical__body {
  display: flex;
  flex-direction: column;
  gap: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-vertical__texts {
  display: flex;
  flex-direction: column;
  gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
}

.c5-feature-details::after {
  content: none;
}
.c5-feature-details .c-sec__inr {
  max-width: calc(1000 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-details__headings {
  display: flex;
  flex-direction: column;
  gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  align-items: center;
  justify-content: center;
  margin-block-end: calc(64 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-details__heading-en {
  width: calc(502 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-details__heading-jp {
  width: calc(78 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-details__heading02 {
  padding-block-end: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-block-end: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 140%;
  border-bottom: 1px solid #FFF;
}
.c5-feature-details__inr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  align-items: center;
  padding: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  color: #DCDCDC;
  background: #595959;
}
.c5-feature-details__info {
  display: flex;
  flex-direction: column;
  gap: calc(8 / var(--root-font-size) * var(--font-ratio) * 1rem);
  margin-block-end: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-details__info dl {
  display: grid;
  grid-template-columns: calc(140 / var(--root-font-size) * var(--font-ratio) * 1rem) 1fr;
  gap: calc(8 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-details__info dt {
  font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 700;
  line-height: 150%;
}
.c5-feature-details__info dd {
  font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  line-height: 150%;
}
.c5-feature-details__img {
  width: calc(366 / var(--root-font-size) * var(--font-ratio) * 1rem);
}
.c5-feature-details__btns {
  margin-block-start: calc(64 / var(--root-font-size) * var(--font-ratio) * 1rem);
}

@media screen and (min-width: 769px) {
  .c5-local-nav.is-sticky {
    display: none;
  }
}
@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 h1 {
    padding-top: calc(800 / var(--design-width-canvas-sp) * 100%);
    background-image: url("../img/img_kv_sp.jpg");
  }
  .s5-returnToTop__button {
    top: calc(-220 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-side-btns {
    right: auto;
    bottom: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    left: 50%;
    flex-direction: row;
    gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    width: calc(100% - 40 / var(--root-font-size) * var(--font-ratio) * 1rem);
    opacity: 0;
    transform: translateX(-50%);
  }
  .c5-side-btns.is-active {
    transform: translateX(-50%);
  }
  .c5-local-nav {
    z-index: 10;
    max-inline-size: 100%;
    padding-inline: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
    background: #111;
  }
  .c5-local-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
    align-items: center;
  }
  .c5-local-nav__col4 {
    width: calc(25% - 32 / var(--root-font-size) * var(--font-ratio) * 1rem * 3 / 3);
  }
  .c5-local-nav__col3 {
    width: calc(33.3333333333% - 32 / var(--root-font-size) * var(--font-ratio) * 1rem * 2 / 3);
  }
  .c5-local-nav__col2 {
    width: calc(50% - 32 / var(--root-font-size) * var(--font-ratio) * 1rem * 1 / 2);
  }
  .c5-local-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem) 0 calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(6 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-local-nav a svg {
    position: relative;
    margin-block-start: 0.4em;
  }
  .c5-local-nav.is-sticky {
    position: sticky;
    top: 0;
    overflow-x: auto;
  }
  .c5-local-nav.is-sticky ul {
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    margin-block: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-local-nav.is-sticky a {
    display: block;
    padding: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem) 0;
  }
  .c5-local-nav.is-sticky a svg {
    position: absolute;
    margin-block-start: 0;
  }
  .c5-local-nav.is-sticky .c5-local-nav__col4 {
    width: -moz-fit-content;
    width: fit-content;
  }
  .c5-local-nav.is-sticky .c5-local-nav__col3 {
    width: -moz-fit-content;
    width: fit-content;
  }
  .c5-local-nav.is-sticky .c5-local-nav__col2 {
    width: -moz-fit-content;
    width: fit-content;
  }
  .c5-movie-area {
    padding-block: calc(160 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-block-end: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-movie-area::before {
    top: 0;
    padding-top: calc(352 / var(--design-width-canvas-sp) * 100%);
    background-image: url("../img/bg_movie_sp.png");
    background-size: cover;
    transform: translateX(-50%);
  }
  .c5-movie-area__inr {
    max-inline-size: calc(680 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-movie-area__text {
    margin-block-start: calc(30 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-movie-area button::before, .c5-movie-area button::after {
    width: 25%;
  }
  .c5-feature {
    grid-template-columns: 1fr;
    gap: calc(128 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__headings {
    position: relative;
    top: 0;
  }
  .c5-feature__heading-en img {
    width: 100%;
    height: auto;
  }
  .c5-feature__heading-en.heading01 {
    width: calc(614 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__heading-en.heading02 {
    width: calc(394 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__heading-en.heading03 {
    width: calc(658 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__heading-en.heading04 {
    width: calc(410 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__heading-jp img {
    width: 100%;
    height: auto;
  }
  .c5-feature__heading-jp.heading01 {
    width: calc(198 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__heading-jp.heading02 {
    width: calc(76 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__heading-jp.heading03 {
    width: calc(118 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__heading-jp.heading04 {
    width: calc(146 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__num {
    margin-bottom: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__block {
    padding-top: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding-bottom: calc(80 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__block > * + * {
    margin-top: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__grid {
    grid-template-columns: 1fr;
    gap: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem) calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__grid > div > * + * {
    margin-top: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__grid--sp-rev {
    display: flex;
    flex-direction: column-reverse;
  }
  .c5-feature__name .jp {
    font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__name .en {
    font-size: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature__box {
    padding: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__headings {
    gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-bottom: calc(128 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__heading-en {
    width: calc(466 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__heading-en img {
    width: 100%;
    height: auto;
  }
  .c5-feature-vertical__heading-jp {
    width: calc(310 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__heading-jp img {
    width: 100%;
    height: auto;
  }
  .c5-feature-vertical__item {
    padding: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__item + .c5-feature-vertical__item {
    margin-top: calc(80 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__item-inr {
    grid-template-columns: 1fr;
    gap: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__imgs {
    gap: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__lead {
    font-size: calc(24 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__heading {
    font-size: calc(40 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__border {
    padding-bottom: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__info {
    gap: calc(8 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__body {
    gap: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-vertical__texts {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__headings {
    gap: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-block-end: calc(128 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__heading-en {
    width: calc(536 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__heading-en img {
    width: 100%;
    height: auto;
  }
  .c5-feature-details__heading-jp {
    width: calc(156 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__heading-jp img {
    width: 100%;
    height: auto;
  }
  .c5-feature-details__heading02 {
    padding-block-end: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-block-end: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-size: calc(56 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__inr {
    grid-template-columns: 1fr;
    gap: calc(80 / var(--root-font-size) * var(--font-ratio) * 1rem);
    padding: calc(32 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__info {
    gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-block-end: calc(48 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__info dl {
    grid-template-columns: calc(280 / var(--root-font-size) * var(--font-ratio) * 1rem) 1fr;
    gap: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__info dt {
    font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__info dd {
    font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-feature-details__img {
    width: 100%;
  }
  .c5-feature-details__img img {
    width: 100%;
    height: auto;
  }
  .c5-feature-details__btns {
    margin-block-start: calc(80 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}
@media print {
  .c5-kv h1 {
    padding-top: 0;
    font-size: calc(var(--font-size-4xl) * 1px);
    background: none;
  }
  .c5-interview-list__img {
    background-color: var(--color-white);
    background-image: none !important;
  }
  .c5-interview-detail__img::before {
    background-image: none !important;
  }
}
[data-anime=blur] {
  position: relative;
  top: var(--_offset, 40px);
  filter: blur(30px);
  transition: top 0.5s ease-out, filter 0.5s ease-out;
}
[data-anime=blur].is-active {
  top: 0;
  filter: var(--_blur-active, blur(0));
}

[data-anime=slide-up] {
  opacity: 0;
  transform: translateY(var(--_offset, 100px));
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
[data-anime=slide-up].is-active {
  opacity: 1;
  transform: translateY(0);
}

.c5-feature__deco {
  --_offset: 100px;
  --_blur-active: blur(3.8px);
}
@media screen and (max-width: 768px) {
  .c5-feature__deco {
    --_blur-active: blur(2px);
  }
}

.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);
  }
}