@charset "UTF-8";

/* ===== 変数 ===== */

:root {
  --color-txt: #000000;
  --color-txt2: #FFFFFF;
  --color-txt3: rgba(0, 0, 0, 0.6);
  --color-bg: #FFFFFF;
  --color-bg3: #F5F5F5;
  --color-bg6: #383838;
  --color-bg16: rgba(0, 95, 172, 0.1);
  --color-main: #00A95F;
  --color-main2: #00C871;
  --color-accent: #005FAC;
  --color-accent2: #005BAC;
  --color-hover: #005FAC;
  --color-hover-bg: rgba(255, 255, 255, 0.085);
  --color-line: rgba(0, 0, 0, 0.15);
  --color-line6: rgba(255, 255, 255, 0.4);
  --color-input-bg: rgba(0, 0, 0, 0.07);
  --color-input-bg-focus: rgba(0, 0, 0, 0.1);
  --color-required: #FF0000;
  --color-price: var(--color-accent);

  --font-sans: "Noto Sans JP", sans-serif;
  --font-en: "Montserrat", sans-serif;
  --font-num: "Inter", sans-serif;

  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --outside: 5.12821vw;
  --grid: 5.12821vw;
  --gap: 2.5641vw;
  --grid2: calc(var(--grid) * 2 + var(--gap));
  --grid3: calc(var(--grid) * 3 + var(--gap) * 2);
  --grid4: calc(var(--grid) * 4 + var(--gap) * 3);
  --grid5: calc(var(--grid) * 5 + var(--gap) * 4);
  --grid6: calc(var(--grid) * 6 + var(--gap) * 5);
  --grid8: calc(var(--grid) * 8 + var(--gap) * 7);
  --grid10: calc(var(--grid) * 10 + var(--gap) * 9);

  --radius-panel: 4rem;
  --scroll-opacity: 0.5;

  /* アイコン・ローディングの穴の形。ファイルを直接開いて（file://）も表示できるよう SVG を埋め込んでいる。
     元のファイルは assets/img/common/*.svg。ロゴ支給後にローディングの穴の形を変えるときは --loading-mask を書き換える */
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000000' stroke-width='1.5' /%3E%3C/svg%3E");
  --icon-yen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M3 1.5l5 6.5 5-6.5M8 8v6.5M4 8.5h8M4 11.5h8' fill='none' stroke='%23000000' stroke-width='1.6' /%3E%3C/svg%3E");
  --icon-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M8 1.5L1 7.5h2v7h4v-4h2v4h4v-7h2z' fill='%23000000' /%3E%3C/svg%3E");
  --icon-train: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2l1.5 2h-1.8L10.2 13H5.8l-1.5 2H2.5L4 13a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 2v4h8V3zm1 6.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm6 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z' fill='%23000000' /%3E%3C/svg%3E");
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M9 2h5v5M14 2L7 9M12 10v4H2V4h4' fill='none' stroke='%23000000' stroke-width='1.5' /%3E%3C/svg%3E");
  --loading-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23000000' /%3E%3C/svg%3E");

  /* FV の動画にかける象徴モチーフのマスク。ロゴ支給後に url("../img/common/mask-symbol.webp") などを入れる */
  --kv-mask-pc: none;
  --kv-mask-sp: none;
}

@media (min-width: 1024px) {
  :root {
    --outside: 3.47222vw;
    --grid: 6.71296vw;
    --gap: 1.15741vw;
    --radius-panel: 6rem;
  }
}

/* ===== ベース ===== */

html {
  font-size: 62.5%;
}

@media (min-width: 1024px) and (max-width: 1440px) {
  html {
    font-size: calc((10 / 1440) * 100vw);
  }
}

@media (min-width: 561px) and (max-width: 767px) {
  html {
    font-size: calc((10 / 767) * 100vw);
  }
}

@media (max-width: 390px) {
  html {
    font-size: calc((10 / 390) * 100vw);
  }
}

@media (min-width: 2561px) {
  html {
    font-size: calc((10 / 2560) * 100vw);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-txt);
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: calc(24 / 14);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
  body {
    font-size: 1.6rem;
    line-height: calc(32 / 16);
  }
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

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

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ===== ユーティリティ ===== */

@media (max-width: 1023px) {
  .u-n-mqDown-lg {
    display: none;
  }
}

@media (min-width: 1024px) {
  .u-n-mqUp-lg {
    display: none;
  }
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== レイアウト ===== */

.l-main {
  position: relative;
}

.c-inner {
  padding-right: var(--outside);
  padding-left: var(--outside);
}

/* ===== ローディング（TOPの1回目だけ） ===== */

/* 読み込みが終わるまで操作させない */
body:not(.is-load) {
  pointer-events: none;
}

.l-loading {
  --mask-size: 16rem;
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}

.l-loading__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-bg);
  opacity: 0;
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    var(--loading-mask);
  mask-image:
    linear-gradient(#000 0 0),
    var(--loading-mask);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-position:
    0 0,
    center;
  mask-position:
    0 0,
    center;
  -webkit-mask-size:
    100% 100%,
    var(--mask-size) var(--mask-size);
  mask-size:
    100% 100%,
    var(--mask-size) var(--mask-size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition:
    -webkit-mask-size 2200ms var(--ease-out-quad),
    mask-size 2200ms var(--ease-out-quad);
}

.l-loading__coin {
  position: relative;
  z-index: 2;
  width: var(--mask-size);
  min-width: var(--mask-size);
  height: var(--mask-size);
  min-height: var(--mask-size);
  perspective: 2000px;
  transition:
    min-width 2200ms var(--ease-out-quad),
    width 2200ms var(--ease-out-quad),
    min-height 2200ms var(--ease-out-quad),
    height 2200ms var(--ease-out-quad);
}

.l-loading__card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg16);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition:
    transform 1200ms var(--ease-in-out-back),
    background-color 2200ms var(--ease-out-quad);
}

.l-loading__card.-front {
  transform: rotateY(0deg);
}

.l-loading__card.-back {
  transform: rotateY(180deg);
}

.l-loading__card img {
  width: 50%;
  height: auto;
}

/* 象徴モチーフ（ロゴのシンボルマーク） */
.l-loading__motif {
  display: block;
  width: 50%;
  aspect-ratio: 1 / 1;
  background: url("../img/common/logo-mark.svg") center / contain no-repeat;
  transition: opacity 1000ms var(--ease-out-cubic);
}

/* 1460ms：コインが裏返る */
.is-op2 .l-loading__card.-front {
  transform: rotateY(-180deg);
}

.is-op2 .l-loading__card.-back {
  transform: rotateY(0deg);
}

/* 2760ms：幕を穴あきに切り替える */
.is-op3 .l-loading {
  background: none;
}

.is-op3 .l-loading__bg {
  opacity: 1;
}

.is-op3 .l-loading__motif {
  opacity: 0;
}

/* 3360ms：穴が広がる */
.is-op4 .l-loading {
  --mask-size: max(400vw, 600vh);
  pointer-events: none;
}

.is-op4 .l-loading__card {
  background-color: transparent;
}

.l-loading.is-none {
  display: none;
}

/* ===== ローディング（2回目以降・下層：白い幕が消えるだけ） ===== */

.l-loading2 {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  background: var(--color-bg);
  pointer-events: none;
  transition:
    opacity 500ms var(--ease-out-quad),
    visibility 500ms var(--ease-out-quad);
}

/* 下層はいつも／TOPは演出を出さないときだけ白い幕を使う */
body:not(.page-home) .l-loading2,
.is-loading-skip .l-loading2 {
  display: block;
}

.is-loading-skip .l-loading {
  display: none;
}

.l-loading2.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .l-loading,
  .l-loading2 {
    display: none !important;
  }
}

/* ===== ヘッダー ===== */

.l-header__logo {
  position: fixed;
  top: 1.5rem;
  left: var(--outside);
  z-index: 1500;
  display: grid;
  width: 6.4rem;
}

/* カラーと白を重ねておき、濃い面の上（.is-header-dark）だけ白にする */
.l-header__logo img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  transition: opacity 300ms var(--ease-out-quart);
}

.l-header__logo .-white {
  opacity: 0;
}

.is-header-dark .l-header__logo .-color {
  opacity: 0;
}

.is-header-dark .l-header__logo .-white {
  opacity: 1;
}

.l-header__buttons {
  display: none;
}

@media (min-width: 1024px) {
  .l-header__logo {
    top: 1.9rem;
    width: 8rem;
  }

  .l-header__buttons {
    position: fixed;
    top: 3rem;
    right: calc(var(--outside) + 7.4rem);
    z-index: 1400;
    display: flex;
    gap: 0.5rem;
  }

  .l-header__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    height: 4rem;
    overflow: hidden;
    border: 1px solid var(--color-accent2);
    border-radius: 0.5rem;
    font-size: 1.3rem;
    font-weight: 500;
    isolation: isolate;
    transition: color 410ms var(--ease-out-cubic);
  }

  .l-header__button.-line {
    --color-hover-bg: var(--color-accent2);
    background: transparent;
    color: var(--color-accent2);
  }

  .l-header__button.-fill {
    --color-hover-bg: rgba(255, 255, 255, 0.2);
    background: var(--color-accent2);
    color: #FFFFFF;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .l-header__button.-line:hover {
    color: #FFFFFF;
  }
}

/* ===== メニューボタン（PC・SP 共通。bravis.com 型の丸ボタン） ===== */

.l-header__toggle {
  position: fixed;
  top: 0.8rem;
  right: calc(var(--outside) - 1rem);
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.2rem;
  height: 6.2rem;
}

/* 丸 */
.l-header__toggle__lines {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
}

.l-header__toggle__lines::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent2);
  transform-origin: center center;
  transition:
    transform 400ms var(--ease-in-out-quart),
    background-color 400ms var(--ease-in-quart);
}

/* 2本線 */
.l-header__toggle__lines > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 2px;
  margin-left: -0.7rem;
  background: #FFFFFF;
  transform-origin: center center;
  transition:
    transform 400ms var(--ease-out-quart),
    background-color 400ms var(--ease-out-quart);
}

.l-header__toggle__lines > span:nth-child(1) {
  transform: translate3d(0, calc(-0.4rem - 1px), 0);
}

.l-header__toggle__lines > span:nth-child(2) {
  transform: translate3d(0, calc(0.4rem - 1px), 0);
}

.is-menu-open .l-header__toggle__lines::before {
  background: #FFFFFF;
  transition:
    transform 400ms var(--ease-out-quart),
    background-color 400ms var(--ease-out-quart);
}

.is-menu-open .l-header__toggle__lines > span {
  background: var(--color-accent2);
}

.is-menu-open .l-header__toggle__lines > span:nth-child(1) {
  transform: translate3d(0, -1px, 0) rotate(45deg);
}

.is-menu-open .l-header__toggle__lines > span:nth-child(2) {
  transform: translate3d(0, -1px, 0) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  .l-header__toggle:hover .l-header__toggle__lines::before {
    transform: scale(1.1);
    transition:
      transform 400ms var(--ease-out-quart),
      background-color 400ms var(--ease-out-quart);
  }
}

@media (min-width: 1024px) {
  .l-header__toggle {
    top: 1.3rem;
    width: 7.4rem;
    height: 7.4rem;
  }

  .l-header__toggle__lines {
    width: 5.4rem;
    height: 5.4rem;
  }

  .l-header__toggle__lines > span {
    width: 1.6rem;
    margin-left: -0.8rem;
  }

  .l-header__toggle__lines > span:nth-child(1) {
    transform: translate3d(0, calc(-0.5rem - 1px), 0);
  }

  .l-header__toggle__lines > span:nth-child(2) {
    transform: translate3d(0, calc(0.5rem - 1px), 0);
  }
}

/* ===== 全画面メニュー（PC・SP 共通） =====
   開く：地が左から右へ 500ms（easeInOutQuint）→ 400ms 後に大きな英字、500ms 後に中身がフェードイン（450ms）
   閉じる：中身が 200ms で消える → 地が右へ抜ける 500ms（easeInQuart） */

body.is-menu-open {
  overflow: hidden;
}

.l-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  overflow: hidden;
  color: #FFFFFF;
  visibility: hidden;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  will-change: clip-path;
}

.is-menu-open .l-menu {
  visibility: visible;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 500ms var(--ease-in-out-quint);
}

.is-menu-closing .l-menu {
  visibility: visible;
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
  transition: clip-path 500ms var(--ease-in-quart) 200ms;
}

.l-menu__bg {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
}

/* 右下の大きな英字（ロゴ支給後に差し替えてよい飾り） */
.l-menu__typo {
  position: absolute;
  top: auto;
  bottom: -1rem;
  left: 100%;
  font-family: var(--font-num);
  font-size: 8rem;
  font-weight: 100;
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: rotate(-90deg);
  transform-origin: left bottom;
}

.l-menu__container {
  position: relative;
  height: 100%;
  padding: 9rem var(--outside) 8rem calc(var(--outside) + 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
}

.is-menu-open .l-menu__typo {
  opacity: 1;
  transition: opacity 450ms var(--ease-out-quad) 400ms;
}

.is-menu-open .l-menu__container {
  opacity: 1;
  transition: opacity 450ms var(--ease-out-quad) 500ms;
}

.is-menu-closing .l-menu__typo,
.is-menu-closing .l-menu__container {
  opacity: 0;
  transition: opacity 200ms var(--ease-out-quad);
}

.l-menu__title {
  margin-bottom: 1.6rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-num);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

.l-menu__links + .l-menu__links {
  margin-top: 1.8rem;
}

.l-menu__links > li + li {
  margin-top: 1.8rem;
}

.l-menu__links > li > a {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  transition: opacity 400ms var(--ease-out-quart);
}

.l-menu__en {
  font-family: var(--font-num);
  font-size: 3.1rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
}

.l-menu__ja {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.7;
}

/* 今いるページの点 */
.l-menu__links > li > a::before {
  content: "";
  position: absolute;
  top: 1.55rem;
  left: -1.3rem;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.3rem;
  border-radius: 50%;
  background: #FFFFFF;
  visibility: hidden;
}

.l-menu__links > li > a.is-current::before {
  visibility: visible;
}

.l-menu__sub {
  margin-top: 1rem;
}

.l-menu__sub > li {
  display: flex;
  align-items: center;
}

.l-menu__sub > li + li {
  margin-top: 0.6rem;
}

.l-menu__sub > li::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1px;
  margin-right: 0.6rem;
  background: #FFFFFF;
}

.l-menu__sub a {
  font-size: 1.3rem;
  line-height: 1.6;
  transition: opacity 400ms var(--ease-out-quart);
}

.l-menu__info {
  margin-top: 4.6rem;
}

.l-menu__address {
  font-size: 1.3rem;
  font-style: normal;
  line-height: 2;
  opacity: 0.8;
}

@media (hover: hover) and (pointer: fine) {
  .l-menu__links > li > a:hover,
  .l-menu__sub a:hover {
    opacity: 0.5;
  }
}

@media (min-width: 1024px) {
  .l-menu__typo {
    right: -2rem;
    left: auto;
    font-size: 15rem;
    text-align: right;
    transform: none;
  }

  .l-menu__container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 12rem var(--outside) 8rem calc(var(--outside) + 1.6rem);
  }

  .l-menu__title {
    width: 100%;
    margin-bottom: 2rem;
    font-size: 1.6rem;
  }

  .l-menu__nav {
    display: flex;
  }

  .l-menu__links + .l-menu__links {
    margin-top: 0;
    margin-left: 6rem;
  }

  .l-menu__links > li + li {
    margin-top: 4rem;
  }

  .l-menu__links > li > a {
    gap: 0.4rem 1.6rem;
  }

  .l-menu__en {
    font-size: 5.2rem;
  }

  .l-menu__ja {
    font-size: 1.4rem;
  }

  .l-menu__links > li > a::before {
    top: 2.6rem;
    left: -1.6rem;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.4rem;
  }

  .l-menu__sub {
    margin-top: 2rem;
  }

  .l-menu__sub > li + li {
    margin-top: 1.2rem;
  }

  .l-menu__sub > li::before {
    width: 1rem;
    margin-right: 0.6rem;
  }

  .l-menu__sub a {
    font-size: 1.5rem;
    line-height: 1;
  }

  .l-menu__info {
    margin-top: 0;
    margin-left: 11.6rem;
  }

  .l-menu__address {
    margin-top: 2.2rem;
    font-size: 1.5rem;
  }
}

/* メニューを開いているあいだのロゴと右上のボタン */
.is-menu-open .l-header__logo .-color,
.is-menu-closing .l-header__logo .-color {
  opacity: 0;
}

.is-menu-open .l-header__logo .-white,
.is-menu-closing .l-header__logo .-white {
  opacity: 1;
}

.l-header__buttons {
  transition:
    opacity 400ms var(--ease-out-quart),
    visibility 400ms var(--ease-out-quart);
}

.is-menu-open .l-header__buttons {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .l-menu,
  .l-menu__typo,
  .l-menu__container,
  .l-header__toggle__lines::before,
  .l-header__toggle__lines > span {
    transition: none !important;
  }
}

/* ===== 見出し c-title3（英字＋和文を横並び） ===== */

.c-title3 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.c-title3__en {
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.c-title3__en .-main,
.c-title6__en .-main,
.c-marquee .-main {
  color: var(--color-main2);
}

.c-title3__ja {
  font-weight: 500;
  line-height: 1.5;
}

.c-title3.-medium .c-title3__en {
  font-size: 3.6rem;
}

.c-title3.-medium .c-title3__ja {
  font-size: 1.6rem;
}

.c-title3.-large .c-title3__en {
  font-size: 4.8rem;
}

.c-title3.-large .c-title3__ja {
  font-size: 1.6rem;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .c-title3 {
    flex-direction: row;
    align-items: baseline;
    gap: 4rem;
  }

  .c-title3.-medium .c-title3__en {
    font-size: 6.4rem;
  }

  .c-title3.-medium .c-title3__ja {
    font-size: 2.4rem;
  }

  .c-title3.-large .c-title3__en {
    font-size: 9.6rem;
    line-height: calc(86 / 96);
  }

  .c-title3.-large .c-title3__ja {
    font-size: 2.4rem;
  }
}

/* ===== 見出し c-title6（英字＋和文を縦積み） ===== */

.c-title6__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.c-title6__ja {
  display: block;
  font-weight: 500;
  line-height: 1.5;
}

.c-title6.-medium .c-title6__en {
  font-size: 4.8rem;
}

.c-title6.-medium .c-title6__ja {
  margin-top: 1rem;
  font-size: 1.6rem;
}

@media (min-width: 1024px) {
  .c-title6.-medium .c-title6__en {
    font-size: 6.4rem;
  }

  .c-title6.-medium .c-title6__ja {
    margin-top: 1.5rem;
    font-size: 2rem;
  }
}

/* ===== 見出し c-title2（和文の小見出し） ===== */

.c-title2.-small {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

.c-title2 .-main {
  color: var(--color-main);
}

@media (min-width: 1024px) {
  .c-title2.-small {
    font-size: 3rem;
  }
}

/* ===== 番号ラベル（01｜〜） ===== */

.c-label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}

.c-label__num {
  color: var(--color-main);
  font-family: var(--font-num);
  font-weight: 600;
}

@media (min-width: 1024px) {
  .c-label {
    font-size: 1.6rem;
  }
}

/* ===== セクションの見出し行 p-header ===== */

.p-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

/* ===== 本文の文字サイズ ===== */

.c-txt-4xl5 {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: calc(36 / 16);
}

.c-txt-2xl {
  font-size: 1.6rem;
  line-height: 2;
}

.c-txt-lg2 {
  font-size: 1.4rem;
  line-height: calc(24 / 14);
}

@media (min-width: 1024px) {
  .c-txt-4xl5 {
    font-size: 2.4rem;
    line-height: calc(56 / 24);
  }

  .c-txt-2xl {
    font-size: 2rem;
  }

  .c-txt-lg2 {
    font-size: 1.6rem;
    line-height: calc(32 / 16);
  }
}

/* ===== ボタン p-button2（角丸ピル） ===== */

.p-button2 {
  --button-color: var(--color-txt);
  --button-hover-bg: var(--color-txt);
  --button-hover-color: #FFFFFF;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--button-color);
  border-radius: 1000px;
  color: var(--button-color);
  font-weight: 500;
  line-height: 1.8;
  isolation: isolate;
}

.p-button2.-white-black {
  --button-color: #FFFFFF;
  --button-hover-bg: #FFFFFF;
  --button-hover-color: #383838;
}

.p-button2.-black-white {
  --button-color: #000000;
  --button-hover-bg: #000000;
  --button-hover-color: #FFFFFF;
}

.p-button2.-small {
  padding: 0.4rem 1.9rem;
  font-size: 1.4rem;
}

.p-button2.-medium {
  padding: 0.4rem 2.9rem;
  font-size: 1.4rem;
}

@media (min-width: 1024px) {
  .p-button2.-medium {
    padding: 1.4rem 2.9rem;
    font-size: 1.6rem;
  }
}

.p-button2 {
  --color-hover-bg: var(--button-hover-bg);
  transition: color 410ms var(--ease-out-cubic);
}

@media (hover: hover) and (pointer: fine) {
  .p-button2:hover {
    color: var(--button-hover-color);
  }
}

.c-button-wrap {
  display: flex;
  justify-content: center;
}

/* ===== ボタン c-button-box（お問い合わせの大きい四角） ===== */

.c-button-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 33.2rem;
  height: 6rem;
  overflow: hidden;
  border: 1px solid #000000;
  border-radius: 1rem;
  background: var(--color-bg);
  color: var(--color-txt);
  font-size: 1.6rem;
  font-weight: 500;
  isolation: isolate;
}

.c-button-box {
  --color-hover-bg: #000000;
  transition: color 410ms var(--ease-out-cubic);
}

.c-button-box.is-disabled {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .c-button-box:not(.is-disabled):hover {
    color: #FFFFFF;
  }
}

@media (min-width: 1024px) {
  .c-button-box {
    height: 8rem;
    font-size: 2rem;
  }
}

@media (max-width: 560px) {
  .c-button-box {
    width: 100%;
  }
}

/* ===== 円の中の矢印 c-arrow2 ===== */

.c-arrow2 {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 50%;
  isolation: isolate;
}

.c-arrow2::before {
  content: "";
  display: block;
  width: 36%;
  height: 36%;
  background: currentColor;
  mask: var(--icon-arrow) center / contain no-repeat;
}

.c-arrow2.-small {
  width: 2.4rem;
  height: 2.4rem;
}

.c-arrow2.-xxsmall {
  width: 2rem;
  height: 2rem;
}

/* 円が広がるホバー：円は地の色、矢印は反転色 */
a.c-arrow2 {
  --color-hover-bg: currentColor;
  --arrow-hover-color: #FFFFFF;
}

a.c-arrow2::before {
  transition: background-color 410ms var(--ease-out-cubic);
}

.-on-dark a.c-arrow2 {
  --arrow-hover-color: #000000;
}

@media (hover: hover) and (pointer: fine) {
  a.c-arrow2:hover::before {
    background: var(--arrow-hover-color);
  }
}

@media (min-width: 1024px) {
  .c-arrow2 {
    width: 4.8rem;
    height: 4.8rem;
  }

  .c-arrow2.-small {
    width: 2.8rem;
    height: 2.8rem;
  }
}

/* ===== 準備中（リンク先が未確定の箇所） ===== */

.c-pending {
  cursor: default;
}

.c-pending__label {
  display: inline-block;
  margin-left: 0.8rem;
  padding: 0.1rem 0.8rem;
  border-radius: 0.4rem;
  background: var(--color-bg3);
  color: var(--color-txt3);
  font-size: 1.2rem;
  line-height: 1.5;
  vertical-align: middle;
}

/* ===== 象徴モチーフ（ロゴのシンボルマーク） ===== */

.c-motif {
  display: block;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  background: url("../img/common/logo-mark.svg") center / contain no-repeat;
}

/* 濃い面の上（白文字のマーキー）は紺を白にした版。一色で塗ると扉の形が消えるので mask は使わない */
.c-marquee.-white .c-motif {
  background-image: url("../img/common/logo-mark-white.svg");
}

/* ===== 無限マーキー c-marquee ===== */

.c-marquee {
  overflow: hidden;
  pointer-events: none;
}

.c-marquee__track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
}

.c-marquee__item {
  display: flex;
  align-items: center;
  gap: 4rem;
  font-family: var(--font-en);
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-marquee__item .c-motif {
  width: 6.4rem;
}

.c-marquee.-white {
  color: #FFFFFF;
}

@media (min-width: 1024px) {
  .c-marquee__track,
  .c-marquee__item {
    gap: 8rem;
  }

  .c-marquee__item {
    font-size: 16rem;
  }

  .c-marquee__item .c-motif {
    width: 11.2rem;
  }
}

/* ===== 下層ページのヒーロー p-hero ===== */

.p-hero {
  padding: 16rem 0 6rem;
}

.p-hero.-line {
  border-bottom: 1px solid var(--color-line);
}

.p-hero__en {
  display: block;
  font-family: var(--font-num);
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.p-hero__ja {
  display: block;
  margin-top: 0.8rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .p-hero.-large {
    padding: 24rem 0 8rem;
  }

  .p-hero.-large .p-hero__en {
    font-size: 12.8rem;
    line-height: calc(110 / 128);
  }

  .p-hero.-large .p-hero__ja {
    margin-top: 4rem;
    font-size: 3.2rem;
  }
}

/* ===== パンくず ===== */

.c-breadcrumb ol {
  display: flex;
  justify-content: flex-end;
  padding: 1.2rem 0;
  font-size: 1.2rem;
  line-height: 1.5;
}

.c-breadcrumb li + li::before {
  content: "/";
  margin: 0 1em;
}

.c-breadcrumb a {
  color: var(--color-txt3);
}

/* ===== お問い合わせ（全ページ共通） ===== */

.p-contact {
  position: relative;
  z-index: 10;
  padding: 12rem 0 0;
  background: var(--color-bg);
}

.p-contact__lead {
  margin-top: 3rem;
  font-size: 1.4rem;
  line-height: 1.8;
}

.p-contact__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .p-contact {
    padding: 20rem 0 0;
  }

  .p-contact__lead {
    font-size: 1.6rem;
  }

  .p-contact__buttons {
    flex-direction: row;
    gap: 2rem;
    margin-top: 8rem;
  }
}

/* ===== フッター ===== */

.l-footer {
  position: relative;
  z-index: 10;
  padding-bottom: 4rem;
  background: var(--color-bg);
}

/* 本文とフッターの境目の線（左右は --outside の余白を残す） */
.l-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--outside);
  left: var(--outside);
  z-index: 11;
  height: 1px;
  background: var(--color-line);
}

.l-footer__marquee {
  margin-top: 6rem;
}

.l-footer__body {
  margin-top: 6rem;
}

.l-footer__sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3.2rem;
}

.l-footer__sitemap a {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.l-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-top: 6rem;
  padding: 4rem 0 0;
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.l-footer__company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.l-footer__logo {
  width: 9rem;
}

.l-footer__logo img {
  width: 100%;
  height: auto;
}

.l-footer__address {
  font-size: 1.4rem;
  font-style: normal;
  line-height: calc(20 / 14);
}

.l-footer__copyright {
  color: var(--color-txt3);
  font-family: var(--font-en);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

@media (min-width: 1024px) {
  .l-footer {
    padding-bottom: 0;
  }

  .l-footer__marquee {
    margin-top: 12rem;
  }

  .l-footer__body {
    margin-top: 12rem;
  }

  .l-footer__sitemap {
    gap: 4rem;
  }

  .l-footer__bottom {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 10rem;
    padding: 4rem 0;
    text-align: left;
  }

  .l-footer__company {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
}

/* ===== 円が広がるホバー（js-hover／js-hover-sm） ===== */

.js-hover,
.js-hover-sm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.js-hover__ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: var(--color-hover-bg);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
}

/* ===== 文字色の円（js-hover-txt） ===== */

.js-hover-txt {
  position: relative;
}

.js-hover-txt__over {
  position: absolute;
  inset: 0;
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  color: var(--color-hover);
  clip-path: circle(0px at 0px 0px);
  pointer-events: none;
}

/* ===== スクロール表示 ===== */

.js-var-delay-1 {
  --transition-delay: 160ms;
}

.js-var-delay-2 {
  --transition-delay: 320ms;
}

.js-var-delay-3 {
  --transition-delay: 480ms;
}

.js-var-delay-4 {
  --transition-delay: 640ms;
}

.js-var-delay-5 {
  --transition-delay: 800ms;
}

.js-var-delay-6 {
  --transition-delay: 960ms;
}

.js-var-delay-7 {
  --transition-delay: 1120ms;
}

.js-var-delay-8 {
  --transition-delay: 1280ms;
}

.js-var-delay-9 {
  --transition-delay: 1440ms;
}

.js-var-delay-10 {
  --transition-delay: 1600ms;
}

.js-var-delay-11 {
  --transition-delay: 1760ms;
}

.js-var-delay-12 {
  --transition-delay: 1920ms;
}

.js-var-delay-13 {
  --transition-delay: 2080ms;
}

.js-var-delay-14 {
  --transition-delay: 2240ms;
}

.js-var-delay-15 {
  --transition-delay: 2400ms;
}

.js-var-delay-16 {
  --transition-delay: 2560ms;
}

.js-var-delay-17 {
  --transition-delay: 2720ms;
}

.js-var-delay-18 {
  --transition-delay: 2880ms;
}

.js-var-delay-19 {
  --transition-delay: 3040ms;
}

.js-var-delay-20 {
  --transition-delay: 3200ms;
}

/* JS が動いているときだけ初期状態を隠す（.is-js は common.js が html に付ける） */
@media (prefers-reduced-motion: no-preference) {
  .is-js .js-fadeup,
  .is-js .js-fadeups > *,
  .is-js .js-load-trigger {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
    transition:
      opacity 750ms var(--ease-out-cubic),
      transform 750ms var(--ease-out-cubic);
    transition-delay: var(--transition-delay, 200ms);
  }

  .is-js .js-fadeups > * {
    transition-delay: calc(var(--transition-delay, 200ms) + 160ms * var(--i, 0));
  }

  .is-js .js-fadeup2,
  .is-js .js-fadeup2s > * {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition:
      opacity 1500ms var(--ease-out-cubic),
      transform 1500ms var(--ease-out-cubic);
    transition-delay: var(--transition-delay, 300ms);
  }

  .is-js .js-fadeup2s > * {
    transition-delay: calc(var(--transition-delay, 300ms) + 200ms * var(--i, 0));
  }

  .is-js .js-fades > * {
    opacity: 0;
    transition: opacity 1300ms var(--ease-out-cubic);
    transition-delay: calc(var(--transition-delay, 200ms) + 160ms * var(--i, 0));
  }

  .is-js .js-scales > * {
    opacity: 0;
    transform: scale(0.9);
    transition:
      opacity 800ms var(--ease-in-out-back),
      transform 800ms var(--ease-in-out-back);
    transition-delay: calc(200ms + 120ms * var(--i, 0));
  }

  .is-js .js-fadeup.is-shown,
  .is-js .js-fadeups.is-shown > *,
  .is-js .js-fadeup2.is-shown,
  .is-js .js-fadeup2s.is-shown > *,
  .is-js .js-fades.is-shown > *,
  .is-js .js-scales.is-shown > *,
  .is-js .js-load-trigger.is-shown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* 文字分割：分割が終わるまで親は隠す */
  .is-js .js-splittext {
    opacity: 0;
  }

  .is-js .js-splittext.is-split {
    opacity: 1;
  }

  .js-splittext__char {
    opacity: 0.08;
    transition: opacity 1500ms var(--ease-out-cubic);
    transition-delay: calc(200ms + 35ms * var(--i, 0));
  }

  .js-splittext.is-shown .js-splittext__char {
    opacity: 1;
  }
}