@charset "UTF-8";

/* =========================================
 * 0. Webfont（UD新ゴ Pr6N / 自前配信・Web埋め込み権確認済み）
 * ========================================= */
@font-face {
  font-family: "UD Shin Go Pr6N";
  src: url("../fonts/AP-OTF-UDShinGoPr6N-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UD Shin Go Pr6N";
  src: url("../fonts/AP-OTF-UDShinGoPr6N-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UD Shin Go Pr6N";
  src: url("../fonts/AP-OTF-UDShinGoPr6N-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UD Shin Go Pr6N";
  src: url("../fonts/AP-OTF-UDShinGoPr6N-DeBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UD Shin Go Pr6N";
  src: url("../fonts/AP-OTF-UDShinGoPr6N-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================
 * 1. Reset
 * ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
}

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

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

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

address {
  font-style: normal;
}

table {
  border-collapse: collapse;
}

/* =========================================
 * 2. Design tokens
 * ========================================= */
:root {
  --content-width: 876px;
  --pc-layout-width: 1280px;

  --color-text: #000000;
  --color-white: #FFFFFF;
  --color-ink: #231815;
  --color-ink-dark: #222429;
  --color-accent: #ED725C;
  --color-yellow: #FFF468;
  --color-red: #BD3148;
  --color-red-light: #EB6369;
  --color-red-deep: #BC3148;
  --color-blue: #7183E5;
  --color-gray: #6B6B6C;
  --color-gray-light: #D9D9D9;
  --color-silver: #C4C4C4;
  --color-line: #D4D1D1;
  --color-warm-gray: #D4CCCB;
  --color-warm-white: #E6E1E0;
  --color-mist: #E8EBED;
  --color-pale-blue: #EAF1F6;

  --font-jp: "UD Shin Go Pr6N", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-en: Montserrat, sans-serif;
  --font-inter: Inter, sans-serif;
  --font-noto: "Noto Sans JP", sans-serif;

  --z-deco: 1;
  --z-content: 2;
  --z-fixed-cta: 9;
}

/* =========================================
 * 3. Base
 * ========================================= */
body {
  min-width: 1000px;
  background-color: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 2;
}

a,
button {
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  a:hover,
  button:hover {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  a,
  button {
    transition: none;
  }
}

/* =========================================
 * 4. Layout
 * ========================================= */
.global-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}

/* =========================================
 * 5. Utility
 * ========================================= */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================
 * 6. Component: CTA button
 * ========================================= */
.c-cta-btn {
  display: flex;
  align-items: center;
  gap: 0.90588em;
  width: 14.96765em;
  min-height: 3.08159em;
  padding-block: 0.118em 0;
  padding-inline: 1.82576em 0.65142em;
  border: 0.07794em solid var(--color-white);
  border-radius: 9999px;
  background-image: radial-gradient(28.607% 52.469% at 50% 50.31%, var(--color-red-light) 23%, var(--color-red-deep) 93%);
  box-shadow: 0.23418em 0.23418em 0.23383em rgba(0, 0, 0, 0.3);
  color: var(--color-white);
  font-size: 50.8526px;
  font-weight: 700;
  text-align: center;
}

.c-cta-btn--md {
  font-size: 44.0867px;
}

.c-cta-btn--sm {
  font-size: 39.1908px;
}

.c-cta-btn__icon {
  flex-shrink: 0;
  width: 0.84853em;
}

.c-cta-btn__text {
  min-width: 0;
}

.c-cta-btn__kana {
  font-size: 0.76362em;
}

/* =========================================
 * 7. Component: fixed CTA
 * ========================================= */
.c-fixed-cta {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: var(--z-fixed-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.50329em;
  min-height: 8.95686em;
  padding-block: 1.0965em;
  border-radius: 0.2635em 0 0 0.2635em;
  background-color: var(--color-red);
  box-shadow: 0.13456em 0.13456em 0.62796em rgba(0, 0, 0, 0.3);
  color: var(--color-white);
  font-size: 30.36px;
  font-weight: 700;
  transform: translateY(-50%);
}

.c-fixed-cta__label {
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
  line-height: 1;
}

.c-fixed-cta__kana {
  font-size: 0.76362em;
}

/* =========================================
 * 8. Component: CTA band
 * ========================================= */
.c-cta-band {
  --cta-band-h: 468.525px;
  --cta-pad-top: 34.9px;
  --cta-pad-bottom: 57.256px;
  --cta-gap-lead: 31.284px;
  --cta-gap-note: 0px;
  --cta-gap-btn: 36.595px;
  --cta-lead-lh: 1.6224;
  --cta-bg-x: -10px;
  --cta-bg-top: -230px;
  --cta-bg-w: 1290px;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--cta-band-h);
  padding-block: var(--cta-pad-top) var(--cta-pad-bottom);
  overflow: hidden;
  background-color: var(--color-ink-dark);
  color: var(--color-white);
  text-align: center;
  isolation: isolate;
}

.c-cta-band::before,
.c-cta-band::after {
  position: absolute;
  inset: 0;
  background-color: var(--color-ink-dark);
  content: "";
}

.c-cta-band::before {
  z-index: 2;
  opacity: 0.95;
  mix-blend-mode: saturation;
}

.c-cta-band::after {
  z-index: 3;
  opacity: 0.6;
  mix-blend-mode: multiply;
}

.c-cta-band__bg {
  position: absolute;
  top: var(--cta-bg-top);
  right: 0;
  left: var(--cta-bg-x);
  z-index: 1;
  display: flex;
}

.c-cta-band__bg-img {
  flex-shrink: 0;
  width: max(var(--cta-bg-w), 100%);
  max-width: none;
  height: auto;
}

.c-cta-band__inner {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-gap-btn);
}

.c-cta-band__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-gap-note);
}

.c-cta-band__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-gap-lead);
}

.c-cta-band__en {
  font-family: var(--font-en);
  font-size: 21.0708px;
  font-weight: 600;
  line-height: 1.4238;
  letter-spacing: 0.11em;
}

.c-cta-band__lead {
  font-size: 43.957px;
  font-weight: 400;
  line-height: var(--cta-lead-lh);
  letter-spacing: 0.05em;
}

.c-cta-band__note {
  font-size: 18px;
  line-height: 1.2778;
  letter-spacing: 0.05em;
}

/* =========================================
 * 9. SP
 * ========================================= */
@media (max-width: 768px) {
  :root {
    --spx: calc(100vw / 480);
  }

  body {
    min-width: 0;
  }

  .global-inner {
    padding-inline: calc(var(--spx) * 30);
  }

  .c-cta-btn,
  .c-cta-btn--md,
  .c-cta-btn--sm {
    font-size: clamp(22px, calc(var(--spx) * 27.2018), 44px);
  }

  .c-fixed-cta {
    font-size: clamp(18px, calc(var(--spx) * 22.2907), 36px);
  }

  .c-cta-band {
    --cta-band-h: calc(var(--spx) * 294);
    --cta-pad-top: calc(var(--spx) * 24);
    --cta-pad-bottom: calc(var(--spx) * 32.24);
    --cta-gap-lead: calc(var(--spx) * 19.301);
    --cta-gap-btn: calc(var(--spx) * 28.13);
    --cta-bg-x: calc(var(--spx) * -10);
    --cta-bg-top: calc(var(--spx) * -41);
    --cta-bg-w: calc(var(--spx) * 502);
  }

  .c-cta-band__en {
    font-size: clamp(12px, calc(var(--spx) * 13), 21px);
  }

  .c-cta-band__lead {
    font-size: clamp(20px, calc(var(--spx) * 27.12), 44px);
  }

  .c-cta-band__note {
    font-size: clamp(13px, calc(var(--spx) * 14), 22px);
    line-height: 1.6429;
  }

  .c-cta-band__note-line {
    display: block;
  }
}