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

html, body {
  margin: 0;
  padding: 0;
}

body {
  /* Matches the footer's closing band (#f3f1ef) so iOS Safari's
     bottom rubber-band overscroll blends with the last section
     instead of flashing a mismatched gray strip beneath it. */
  background: #f3f1ef;
  font-family: "Shippori Mincho", serif;
}

img {
  display: block;
  max-width: none;
}

/* <picture> wrappers (used for PC-only image swaps) generate no box of
   their own, so the <img> inside behaves exactly as if the wrapper
   weren't there — e.g. still a direct grid item where that matters. */
picture {
  display: contents;
}

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

/* =========================================
   FV (First View)
   Design source: FABRIC_SP統合_0722.psd
   Base canvas: 750 x 1589 (SP artboard, FV group)
   All lengths below are expressed in the PSD's
   750px-wide coordinate space, scaled with vw and
   capped via min() at their true PSD pixel value so
   the section stays pixel-faithful to the PSD at any
   viewport width (max-width 750px on desktop).
   (Plain vw + min() is used instead of container query
   units for maximum compatibility with older/in-app
   mobile browsers.)
========================================= */

.fv {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.fv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.fv__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: min(calc(39 / 750 * 100vw), 39px) min(calc(38 / 750 * 100vw), 38px) 40px;
}

/* SP: transparent wrapper — children lay out exactly as if this
   div weren't there. Only given real layout at the PC breakpoint
   (see the min-width:1024px block) so the copy block can be
   indented independently of the logo above it. */
.fv__group {
  display: contents;
}

.fv__logo {
  position: static;
  width: 150px;
  height: auto;
  margin: 0;
}

.fv__eyebrow {
  position: static;
  margin: 8px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.28em;
  color: #aa8856;
  white-space: nowrap;
}

.fv__headline {
  position: static;
  margin: 26px 0 0;
  width: auto;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 43.5px;
  letter-spacing: 0.13em;
  color: #191919;
  white-space: nowrap;
}

.fv__lead {
  position: static;
  margin: 8px 0 0;
  width: auto;
}

.fv__lead-highlight {
  margin: 0 0 22px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: normal;
  color: #aa8856;
  white-space: nowrap;
}

.fv__lead-copy {
  position: relative;
}

.fv__lead-body {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 22.2px;
  letter-spacing: 0.04em;
  color: #191008;
  white-space: nowrap;
}

.fv__lead-closing {
  margin-top: 22px;
}

/* Soft white glow behind the body copy, lifting the dark text off the
   photo behind it for legibility. Applied once to the wrapping element so
   the body and closing lines share a single continuous glow with no seam. */
.fv__lead-copy::before {
  content: "";
  position: absolute;
  inset: min(calc(-34 / 750 * 100vw), -34px) min(calc(-40 / 750 * 100vw), -40px);
  background: radial-gradient(ellipse 57% 64% at 38% 65%,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.65) 36%,
    rgba(255, 255, 255, 0.32) 54%,
    rgba(255, 255, 255, 0) 68%);
  filter: blur(22px);
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
  will-change: filter;
}

.fv__cta {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  margin: 56px 0 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #c3a06a, #a5824c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 8px 24px rgba(165, 130, 76, 0.35);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fv__cta:hover {
  opacity: 0.9;
}

/* subtle sheen sweeping across the gold surface, like light on satin/foil */
.fv__cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: fv-cta-sheen 3.2s ease-in-out infinite;
}

@keyframes fv-cta-sheen {
  0% { left: -60%; }
  35%, 100% { left: 130%; }
}

.fv__cta-icon {
  position: relative;
  z-index: 2;
  flex: none;
  width: 20px;
  height: 20px;
}

.fv__cta-text {
  position: relative;
  z-index: 2;
  flex: none;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
  line-height: 1.8;
}

.fv__cta-arrow {
  position: relative;
  z-index: 2;
  flex: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  color: #ffffff;
  line-height: 1.8;
}

.fv__scroll {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  margin: -6px min(calc(58 / 750 * 100vw), 58px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fv__scroll-text {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #fbf5f4;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
}

.fv__scroll-line {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  width: 1px;
  height: 32px;
  background: rgba(251, 245, 244, 0.3);
}

.fv__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: #fbf5f4;
}

@media (prefers-reduced-motion: no-preference) {
  .fv__scroll-line::after {
    animation: fv-scroll-line-drop 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@keyframes fv-scroll-line-drop {
  0% { top: -100%; }
  55% { top: 100%; }
  100% { top: 100%; }
}

/* =========================================
   FV entrance animation
   Logo -> eyebrow -> headline -> lead (3 parts) -> CTA
   fade + rise in from below, in sequence, on load.
   Top element starts at 0.3s, bottom at 3.0s.
========================================= */

@media (prefers-reduced-motion: no-preference) {
  .fv__logo,
  .fv__eyebrow,
  .fv__headline,
  .fv__lead-highlight,
  .fv__lead-copy,
  .fv__cta,
  .fv__scroll {
    opacity: 0;
    animation: fv-reveal-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, transform;
  }

  .fv__logo           { animation-delay: 0.3s; }
  .fv__eyebrow        { animation-delay: 0.8s; }
  .fv__headline       { animation-delay: 1.3s; animation-duration: 2.2s; }
  .fv__lead-highlight { animation-delay: 1.8s; }
  .fv__lead-copy      { animation-delay: 2.1s; }
  .fv__cta            { animation-delay: 2.7s; }
  .fv__scroll         { animation-delay: 3.0s; }
}

@keyframes fv-reveal-up {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================
   CONCEPT
   Design source: FABRIC_SP統合_0722.psd, "CONCEPT" group
   Normal document flow (not absolute), using the same
   750-wide PSD coordinate space scaled with vw + min()
   as the FV section for proportional fidelity.
========================================= */

.concept {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}

/* SP: transparent wrapper, no layout effect (children behave exactly
   as direct children of .concept). Only given real layout at the PC
   breakpoint, where it becomes the width-capped grid — decoupling
   the section's full-bleed white background (.concept) from the
   content's max-width, without resorting to a huge box-shadow that
   this renderer paints incorrectly. */
.concept__inner {
  display: contents;
}

.concept__intro {
  padding: 90px min(calc(40 / 750 * 100vw), 40px) 60px;
}

.concept__eyebrow {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.36em;
  color: #ab8b56;
}

.concept__eyebrow-line {
  display: block;
  margin-top: min(calc(21 / 750 * 100vw), 21px);
  width: min(calc(48 / 750 * 100vw), 48px);
  height: 1px;
  background: #ab8b56;
}

.concept__headline {
  margin: 22px 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 39.6px;
  letter-spacing: 0.32em;
  color: #191919;
}

/* Soft typewriter reveal for headline characters (see js, applies to
   every [data-typewriter] element). Short, overlapping per-character
   fades read as a gentle type-in rather than a literal, obvious
   "clacking" letter-by-letter reveal. */
[data-typewriter] .char {
  display: inline-block;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1),
              transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

[data-typewriter] .char--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-typewriter] .char {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.concept__subtitle {
  margin: 16px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #ab8b56;
}

.concept__accent {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 44px 0 0 min(calc(105 / 750 * 100vw), 105px);
  width: 1px;
  height: 46px;
  background: rgba(182, 147, 92, 0.35);
}

.concept__accent::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: #cbae82;
}

@media (prefers-reduced-motion: no-preference) {
  .concept__accent::after {
    animation: concept-accent-drop 2.4s ease-in-out infinite;
  }
}

@keyframes concept-accent-drop {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}

.concept__card {
  position: relative;
  padding: 22px 24px 44px;
  margin-top: min(calc(18 / 750 * 100vw), 18px);
}

.concept__card--mission { background: #f2f0ee; }
.concept__card--vision  { background: #f5efea; margin-top: 0; }
.concept__card--values  { background: #ebebeb; margin-top: 0; padding-bottom: 56px; }

.concept__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.concept__num {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 35px;
  color: #ab8b56;
  line-height: 1;
}

.concept__label {
  position: relative;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  color: #191919;
  line-height: 1;
}

.concept__label-line {
  display: block;
  margin: 9px 0 0 min(calc(105 / 750 * 100vw), 105px);
  width: 22px;
  height: 1px;
  background: #ab8b56;
}

.concept__quote {
  position: relative;
  margin: 18px 0 10px 48.5px;
  padding-left: 25.5px;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 15.7px;
  line-height: 25.12px;
  letter-spacing: 0.16em;
  color: #191919;
}

.concept__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: #b6935c;
}

.concept__text {
  margin: 20.5px 0 0 48.5px;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 11.8px;
  line-height: 21.24px;
  letter-spacing: -0.01em;
  color: #191919;
}

.concept__text + .concept__text {
  margin-top: 26px;
}

.concept__values-lead {
  position: relative;
  margin: 18px 0 0 48.5px;
  padding-left: 25.5px;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #191919;
}

.concept__values-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: #b6935c;
}

.concept__values-cols {
  display: flex;
  flex-direction: column;
  margin: 22px min(calc(4 / 750 * 100vw), 4px) 0;
}

.concept__values-row01 {
  position: relative;
  padding: 24px 4px;
  text-align: center;
}

.concept__values-divider {
  display: block;
  height: min(calc(1 / 750 * 100vw), 1px);
  margin: 0;
  background: rgba(123, 99, 67, 0.235);
}

.concept__values-row-bottom {
  display: flex;
  align-items: flex-start;
}

.concept__values-col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 4px;
  text-align: center;
  border-left: min(calc(1 / 750 * 100vw), 1px) solid rgba(123, 99, 67, 0.235);
}

.concept__values-col:first-child {
  border-left: none;
}

.concept__values-num {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  color: #ab8b56;
  line-height: 1;
}

.concept__values-num::after {
  content: "";
  display: block;
  width: min(calc(24 / 750 * 100vw), 24px);
  height: 1px;
  margin: min(calc(10 / 750 * 100vw), 10px) auto 0;
  background: #ab8b56;
}

.concept__values-heading {
  margin-top: 12px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: #191919;
}

.concept__values-heading--tight {
  font-size: 10.5px;
  white-space: nowrap;
}

.concept__values-icon {
  width: 17px;
  height: 17px;
  margin: 22.4px auto;
}

.concept__values-body {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: #191919;
  text-align: center;
}

.concept__values-closing {
  margin: 91.5px 0 0;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: min(calc(24 / 750 * 100vw), 24px);
  line-height: min(calc(38 / 750 * 100vw), 38px);
  letter-spacing: 0.16em;
  color: #191919;
}

/* Split from the first line (was one <br><br>-joined paragraph) so PC
   can control the gap between them independently — this margin
   reproduces the same visual gap the double <br> used to give at SP
   (one blank line at the paragraph's own line-height), so SP is
   pixel-identical to before. */
.concept__values-closing--sub {
  margin-top: min(calc(38 / 750 * 100vw), 38px);
}

/* Hidden at SP (the heading flows/wraps naturally); shown as a real
   break only at the PC breakpoint below, matching the staff LP's
   technique for landing "勉強家で / あること" etc. on two lines. */
.concept__values-heading-br {
  display: none;
}

.concept__one-fabric {
  margin: 60px 0 0;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.42em;
  color: #ab8b56;
}

.concept__closing-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================
   Scroll reveal (01 MISSION -> 03 VALUES)
   Same fade + rise-from-below treatment as the
   FV entrance animation, but triggered per text
   block as it scrolls into view. transition-delay
   is assigned dynamically in JS (top-to-bottom order
   among whichever blocks enter the viewport together)
   rather than fixed per-card, so blocks always reveal
   in strict top-to-bottom sequence across the page.
========================================= */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* CTA buttons — same rise + soft scale-up motion as the FV hero button */
.reveal--cta {
  transform: translateY(36px) scale(0.97);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--cta.reveal--visible {
  transform: translateY(0) scale(1);
}

/* MISSION / VISION / VALUES cards — each slides in as a single block
   from alternating sides instead of animating line-by-line. */
.reveal--slide-left {
  transform: translateX(-44px);
}

.reveal--slide-right {
  transform: translateX(44px);
}

.reveal--slide-left.reveal--visible,
.reveal--slide-right.reveal--visible {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--cta,
  .reveal--slide-left,
  .reveal--slide-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================
   WHY FABRIC
   Design source: FABRIC_SP統合_0722.psd, "WHY FABRIC" + "CTA" groups
   Same 750-wide coordinate space, vw + min()/max() scaling,
   normal document flow, as CONCEPT.
========================================= */

.why {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}

/* SP: transparent wrapper, no layout effect. Only given real layout at
   the PC breakpoint (see min-width:1024px block), where it becomes the
   width-capped content column — decoupling the section's full-bleed
   white background (.why) from the content's max-width. */
.why__inner {
  display: contents;
}

.why__intro {
  padding: 72px min(calc(40 / 750 * 100vw), 40px) 60px;
}

.why__eyebrow {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.36em;
  color: #ab8b56;
}

.why__eyebrow-line {
  display: block;
  margin-top: min(calc(21 / 750 * 100vw), 21px);
  width: min(calc(48 / 750 * 100vw), 48px);
  height: 1px;
  background: #ab8b56;
}

.why__headline {
  margin: 22px 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 39.6px;
  letter-spacing: 0.32em;
  color: #191919;
}

.why__subtitle {
  margin: 16px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: min(calc(21 / 750 * 100vw), 21px);
  letter-spacing: 0.06em;
  color: #ab8b56;
}

.why__accent {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 44px 0 0 min(calc(146 / 750 * 100vw), 146px);
  width: 1px;
  height: 46px;
  background: rgba(182, 147, 92, 0.35);
}

.why__accent::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: #cbae82;
}

@media (prefers-reduced-motion: no-preference) {
  .why__accent::after {
    animation: concept-accent-drop 2.4s ease-in-out infinite;
  }
}

.why__lead {
  margin: min(calc(31 / 750 * 100vw), 31px) 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 11.8px;
  line-height: 1.9;
  color: #191919;
}

.why__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 60px;
  padding: 0 min(calc(40 / 750 * 100vw), 40px);
}

.why__item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.why__num {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 30px;
  color: #ab8b56;
  line-height: 1;
}

.why__num-line {
  display: none;
}

.why__label {
  margin: 14px 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: #191919;
}

.why__label--wide {
  letter-spacing: 0.24em;
}

.why__text {
  margin: 16px 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 10.5px;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #191919;
}

.why__item-photo {
  position: relative;
  flex: 0 0 min(calc(195 / 750 * 100vw), 195px);
  width: min(calc(195 / 750 * 100vw), 195px);
}

/* The gold backing frame is baked directly into each of these three
   source images (see assets/why-growth.webp, why-team.webp,
   why-chosen.webp), so no CSS backing shape is added here. */

.why__item-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.why__divider {
  display: block;
  margin: min(calc(50 / 750 * 100vw), 50px) min(calc(40 / 750 * 100vw), 40px) 0;
  height: 1px;
  background: rgba(169, 136, 85, 0.267);
}

.why__closing {
  margin: min(calc(90 / 750 * 100vw), 90px) min(calc(40 / 750 * 100vw), 40px) 0;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: min(calc(26 / 750 * 100vw), 26px);
  line-height: 1.6;
  letter-spacing: 0.16em;
  color: #191919;
}

.why__cta {
  position: relative;
  overflow: hidden;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 16px;
  margin: 32px min(calc(40 / 750 * 100vw), 40px) min(calc(120 / 750 * 100vw), 120px);
  background: linear-gradient(135deg, #c3a06a, #a5824c);
  box-shadow:
    0 min(calc(10 / 750 * 100vw), 10px) min(calc(30 / 750 * 100vw), 30px) rgba(120, 96, 46, 0.35),
    0 0 0 min(calc(0.5 / 750 * 100vw), 0.5px) rgba(255, 255, 255, 0.25) inset;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}

.why__cta:hover,
.why__cta:active {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 min(calc(16 / 750 * 100vw), 16px) min(calc(40 / 750 * 100vw), 40px) rgba(120, 96, 46, 0.5),
    0 0 0 min(calc(0.5 / 750 * 100vw), 0.5px) rgba(255, 255, 255, 0.4) inset;
}

.why__cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: btnShine 3.2s ease-in-out infinite;
}

@keyframes btnShine {
  0% { left: -60%; }
  35%, 100% { left: 130%; }
}

.why__cta-icon {
  position: relative;
  z-index: 2;
  flex: none;
  width: 26px;
  height: 26px;
}

.why__cta-text {
  position: relative;
  z-index: 2;
  flex: none;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
}

.why__cta-arrow {
  position: relative;
  z-index: 2;
  flex: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  color: #ffffff;
}

/* =========================================
   CASTVOICE
   Design source: FABRIC_SP統合_0722.psd, "CASTVOICE" group
   Same 750-wide coordinate space, vw + min() scaling,
   normal document flow, as CONCEPT / WHY FABRIC.
========================================= */

.castvoice {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #f3f1ef;
  overflow: hidden;
}

.castvoice__strip {
  display: block;
  width: 100%;
  height: auto;
}

/* SP: transparent wrapper, no layout effect. Only given real layout at
   the PC breakpoint, where it becomes the width-capped content column
   for everything except the strip photo above it — decoupling the
   photo's full-bleed width from the rest of the section's max-width. */
.castvoice__inner {
  display: contents;
}

.castvoice__intro {
  padding: min(calc(63 / 750 * 100vw), 63px) min(calc(40 / 750 * 100vw), 40px) 0;
}

.castvoice__eyebrow {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: min(calc(24 / 750 * 100vw), 24px);
  letter-spacing: 0.14em;
  color: #ab8b56;
}

.castvoice__headline {
  display: flex;
  align-items: center;
  gap: min(calc(20 / 750 * 100vw), 20px);
  margin: min(calc(31 / 750 * 100vw), 31px) 0 0;
}

.castvoice__headline-line {
  flex: 0 0 auto;
  width: min(calc(40 / 750 * 100vw), 40px);
  height: 1px;
  background: #ab8b56;
}

.castvoice__headline [data-typewriter] {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: min(calc(34 / 750 * 100vw), 34px);
  letter-spacing: 0.14em;
  color: #191919;
}

.castvoice__item {
  display: flex;
  align-items: flex-start;
  gap: min(calc(30 / 750 * 100vw), 30px);
  margin-top: min(calc(80 / 750 * 100vw), 80px);
  padding: 0 min(calc(40 / 750 * 100vw), 40px);
}

.castvoice__item--reverse {
  flex-direction: row-reverse;
}

.castvoice__item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.castvoice__head {
  display: flex;
  align-items: flex-start;
  gap: min(calc(24 / 750 * 100vw), 24px);
}

.castvoice__num-col {
  flex: none;
  display: flex;
  flex-direction: column;
}

.castvoice__num {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: min(calc(70 / 750 * 100vw), 70px);
  color: #ab8b56;
  line-height: 1;
}

.castvoice__num-line {
  margin-top: min(calc(16 / 750 * 100vw), 16px);
  width: min(calc(52 / 750 * 100vw), 52px);
  height: 1px;
  background: #ab8b56;
}

.castvoice__title-block {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: min(calc(6 / 750 * 100vw), 6px);
}

.castvoice__label {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: min(calc(24 / 750 * 100vw), 24px);
  letter-spacing: 0.14em;
  color: #ab8b56;
}

.castvoice__title {
  margin: min(calc(11 / 750 * 100vw), 11px) 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: min(calc(34 / 750 * 100vw), 34px);
  line-height: 1.3;
  letter-spacing: 0.16em;
  color: #191919;
}

.castvoice__quote {
  margin: min(calc(38 / 750 * 100vw), 38px) 0 0 min(calc(35 / 750 * 100vw), 35px);
  padding-left: min(calc(20 / 750 * 100vw), 20px);
  border-left: 1px solid rgba(181, 144, 89, 0.9);
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: min(calc(24 / 750 * 100vw), 24px);
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: #191919;
}

.castvoice__text {
  margin: min(calc(30 / 750 * 100vw), 30px) 0 0 min(calc(35 / 750 * 100vw), 35px);
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: min(calc(20 / 750 * 100vw), 20px);
  line-height: 1.65;
  letter-spacing: 0.1em;
  color: #191919;
}

.castvoice__photo {
  flex: 0 0 min(calc(200 / 750 * 100vw), 200px);
  width: min(calc(200 / 750 * 100vw), 200px);
  height: auto;
  display: block;
  margin-top: min(calc(56 / 750 * 100vw), 56px);
}

.castvoice__divider {
  display: block;
  margin: min(calc(90 / 750 * 100vw), 90px) min(calc(40 / 750 * 100vw), 40px) 0;
  height: 1px;
  background: rgba(170, 136, 86, 0.13);
}

.castvoice__closing {
  margin: min(calc(56 / 750 * 100vw), 56px) min(calc(40 / 750 * 100vw), 40px) min(calc(64 / 750 * 100vw), 64px);
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: min(calc(26 / 750 * 100vw), 26px);
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: #191919;
}

/* =========================================
   REWARD
   Design source: FABRIC_SP統合_0722.psd, "募集要項" group
   Same 750-wide coordinate space, vw + min() scaling,
   normal document flow, as the sections above.
========================================= */

.reward {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
  padding-bottom: min(calc(80 / 750 * 100vw), 80px);
}

/* SP: transparent wrapper, no layout effect. Only given real layout at
   the PC breakpoint, where it becomes the width-capped content column
   — decoupling the section's full-bleed white background (.reward)
   from the content's max-width. */
.reward__inner {
  display: contents;
}

.reward__intro {
  padding: min(calc(90 / 750 * 100vw), 90px) min(calc(40 / 750 * 100vw), 40px) 0;
}

.reward__eyebrow {
  margin: 0 0 0 min(calc(77 / 750 * 100vw), 77px);
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.28em;
  color: #ab8b56;
}

.reward__headline {
  display: flex;
  align-items: center;
  margin: 18px 0 0;
}

.reward__headline-line {
  flex: 0 0 48px;
  width: 48px;
    margin-left: max(calc(-40 / 750 * 100vw), -40px);
  height: 1px;
  background: #b6935c;
}

.reward__headline [data-typewriter] {
  margin-left: min(calc(4 / 750 * 100vw), 4px);
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.08em;
  color: #191919;
}

.reward__list {
  margin: min(calc(84 / 750 * 100vw), 84px) 0 0;
  padding: 0 min(calc(40 / 750 * 100vw), 40px) 0 min(calc(119 / 750 * 100vw), 119px);
}

.reward__row {
  display: flex;
  margin-top: min(calc(85 / 750 * 100vw), 85px);
}

.reward__row:first-child {
  margin-top: 0;
}

.reward__label {
  flex: 0 0 min(calc(168 / 750 * 100vw), 168px);
  margin: 0;
  padding-top: min(calc(2 / 750 * 100vw), 2px);
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #ab8b56;
}

.reward__value {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: min(calc(24 / 750 * 100vw), 24px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #191919;
}

.reward__note {
  margin: 52px min(calc(40 / 750 * 100vw), 40px) 0;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #191919;
}

/* =========================================
   FLOW
   Design source: FABRIC_SP統合_0722.psd, "応募の流れ" group
   Dark lounge-photo background (assets/flow-bg.webp), light text.
========================================= */

.flow {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  background: #1a1410;
  padding-bottom: min(calc(80 / 750 * 100vw), 80px);
}

/* SP: transparent wrapper, no layout effect. Only given real layout at
   the PC breakpoint, where it becomes the width-capped content column
   for everything except .flow__bg (a direct sibling) — decoupling the
   photo/section background from the content's max-width. */
.flow__inner {
  display: contents;
}

.flow__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.flow__intro {
  position: relative;
  z-index: 1;
  padding: 72px min(calc(40 / 750 * 100vw), 40px) 0;
}

.flow__eyebrow {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.28em;
  color: #d2a256;
}

.flow__headline {
  display: flex;
  align-items: center;
  margin: 18px 0 0;
}

.flow__headline-line {
  flex: 0 0 48px;
  width: 48px;
  margin-left: max(calc(-40 / 750 * 100vw), -40px);
  height: 1px;
  background: #b6935c;
}

.flow__headline [data-typewriter] {
  margin-left: min(calc(8 / 750 * 100vw), 8px);
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.08em;
  color: #f5f4f4;
}

.flow__step {
  position: relative;
  z-index: 1;
  margin-top: 46px;
  margin-bottom: 40px;
  padding: 0 min(calc(40 / 750 * 100vw), 40px);
}

.flow__step-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.flow__step-num {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #ac8c52;
}

.flow__step-title {
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #efefef;
}

.flow__divider {
  display: block;
  margin: 16px 0 0;
  height: 1px;
  background: rgba(182, 147, 92, 0.4);
}

.flow__step-text {
  margin: 18px 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: #efefef;
}

.flow__cta {
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 16px;
  margin: -8px min(calc(40 / 750 * 100vw), 40px) 0;
  background: linear-gradient(135deg, #c3a06a, #a5824c);
  box-shadow:
    0 min(calc(10 / 750 * 100vw), 10px) min(calc(30 / 750 * 100vw), 30px) rgba(0, 0, 0, 0.35),
    0 0 0 min(calc(0.5 / 750 * 100vw), 0.5px) rgba(255, 255, 255, 0.25) inset;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}

.flow__cta:hover,
.flow__cta:active {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 min(calc(16 / 750 * 100vw), 16px) min(calc(40 / 750 * 100vw), 40px) rgba(0, 0, 0, 0.5),
    0 0 0 min(calc(0.5 / 750 * 100vw), 0.5px) rgba(255, 255, 255, 0.4) inset;
}

.flow__cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: btnShine 3.2s ease-in-out infinite;
}

.flow__cta-icon {
  position: relative;
  z-index: 2;
  flex: none;
  width: 26px;
  height: 26px;
}

.flow__cta-text {
  position: relative;
  z-index: 2;
  flex: none;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
}

.flow__cta-arrow {
  position: relative;
  z-index: 2;
  flex: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  color: #ffffff;
}

.flow__note {
  position: relative;
  z-index: 1;
  margin: 20px min(calc(40 / 750 * 100vw), 40px) 0;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: #efefef;
}

/* ============================
   LOCATION
   Layout/type ported from fabric_staff/css/style.css (which assumes
   html { font-size: 62.5% } i.e. 1rem = 10px). This stylesheet has no
   such root override, so every rem value here is pre-converted to its
   px equivalent (rem * 10) to keep the same rendered size/spacing.
   Colors use this site's original palette; var(--gold)/var(--gold-light)
   resolved to literal hex since this stylesheet defines no such tokens.
============================ */
.location {
  background: #f9f8f6;
}

.location__inner {
  padding: 72px 24px 80px;
}

.location__label {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #ab8b56;
}

.location__heading {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.08em;
  color: #191919;
}

.location__heading-bar {
  flex: 0 0 48px;
  width: 48px;
  margin-left: -24px;
  height: 1px;
  background: #b6935c;
}

.location__area {
  margin-top: 52px;
}

.location__area:first-of-type {
  margin-top: 56px;
}

.location__area-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #ab8b56;
}

.location__area-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(173, 139, 86, 0.85);
}

.location__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 16px;
}

.location__card--full {
  grid-column: 1 / -1;
}

.location__card-info {
  display: contents;
}

.location__card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.location__card-city {
  margin-top: 14px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #ab8b56;
}

.location__card-name {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #191919;
}

.location__card-desc {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #191919;
}

.location__card-addr {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.7;
  color: #191919;
}

.location__cta {
  margin-top: 60px;
  padding: 32px 0;
  border-top: 1px solid rgba(182, 147, 92, 0.4);
  border-bottom: 1px solid rgba(182, 147, 92, 0.4);
}

.location__note {
  text-align: center;
  font-size: 11.5px;
  color: #191919;
}

.location__btn {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 16px;
  background: linear-gradient(90deg, #ab8d55 0%, #b3986a 100%);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 8px 24px rgba(165, 130, 76, 0.35);
}

.location__btn-icon {
  width: 26px;
  height: 26px;
}

.location__btn-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.location__btn-arrow {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
}

/* ============================================================
   TABLET (768px–1023px): the PC media query below only kicks in
   at 1024px, so in this gap these four CTA buttons — which rely
   on their parent's padding rather than their own max-width to
   stay a reasonable size on phones — stretch nearly edge to edge.
   Cap them here without touching SP (<768px) or PC (>=1024px).
============================================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .why__cta,
  .flow__cta {
    max-width: 368px;
    margin-left: auto;
    margin-right: auto;
  }

  .location__btn,
  .footer__cta {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) {
  .location__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 120px 40px 100px;
  }

  .location__label {
    text-align: center;
    font-size: 18px;
  }

  .location__heading {
    justify-content: center;
    font-size: 32px;
  }

  .location__heading-bar {
    display: none;
  }

  .location__area-title {
    font-size: 15px;
  }

  .location__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;
  }

  .location__card-name {
    font-size: 20px;
  }

  .location__card-desc {
    font-size: 16px;
  }

  .location__card--full {
    display: grid;
    grid-template-columns: 46% 1fr;
    column-gap: 40px;
    align-items: start;
  }

  .location__card--full .location__card-img {
    grid-column: 1;
    grid-row: 1;
  }

  .location__card--full .location__card-info {
    display: block;
    grid-column: 2;
    grid-row: 1;
  }

  .location__card--full .location__card-city {
    margin-top: 0;
    font-size: 13px;
  }

  .location__card--full .location__card-name {
    font-size: 20px;
  }

  .location__card--full .location__card-desc {
    font-size: 16px;
  }

  .location__card--full .location__card-addr {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.8;
  }

  .location__card-addr {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.8;
  }

  .location__note {
    font-size: 12.5px;
  }

  .location__cta {
    margin-top: 20px;
  }

  .location__btn {
    max-width: 330px;
    margin-top: 44px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 24.5px;
    padding-bottom: 24.5px;
  }

  .location__btn-text,
  .location__btn-arrow {
    line-height: 1;
  }
}

/* =========================================
   FAQ
   Design source: FABRIC_SP統合_0722.psd, "よくある質問" group
   Native <details>/<summary> accordion: click the "+" to reveal
   the answer below. No JS needed for the toggle itself.
========================================= */

.faq {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
  padding-bottom: 80px;
}

.faq__inner {
  display: contents;
}

.faq__intro {
  padding: 72px 24px 0;
}

.faq__eyebrow {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.28em;
  color: #ac8c52;
}

.faq__headline {
  display: flex;
  align-items: center;
  margin: 18px 0 0;
}

.faq__headline-line {
  flex: 0 0 48px;
  width: 48px;
    margin-left: -24px;
  height: 1px;
  background: #b6935c;
}

.faq__headline [data-typewriter] {
  margin-left: min(calc(8 / 750 * 100vw), 8px);
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.08em;
  color: #191919;
}

.faq__list {
  margin-top: 44px;
  padding: 0 24px;
}

.faq__item {
  border-top: 1px solid rgba(172, 138, 86, 0.2);
  padding: 22px 0;
}

.faq__item:last-child {
  border-bottom: 1px solid rgba(172, 138, 86, 0.2);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__q {
  flex: none;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  color: #ac8c52;
}

.faq__question-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: min(calc(6 / 750 * 100vw), 6px);
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #212121;
}

.faq__icon {
  position: relative;
  flex: none;
  width: min(calc(26 / 750 * 100vw), 26px);
  height: min(calc(26 / 750 * 100vw), 26px);
  margin-top: min(calc(4 / 750 * 100vw), 4px);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #191919;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq__icon::before {
  width: 100%;
  height: 1px;
}

.faq__icon::after {
  width: 1px;
  height: 100%;
}

.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq__answer {
  margin: min(calc(22 / 750 * 100vw), 22px) 0 0;
  padding-left: min(calc(50 / 750 * 100vw), 50px);
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: #191919;
}

/* =========================================
   FOOTER
   Design source: FABRIC_SP統合_0722.psd, "フッター" group
   Same wave-texture background as FV, same cutout photo,
   closing catch copy + CTA, then a plain logo band.
========================================= */

.footer {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}

.footer__hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.footer__photo {
  position: absolute;
  left: min(calc(412 / 750 * 100vw), 412px);
  top: min(calc(36 / 750 * 100vw), 36px);
  width: min(calc(505 / 750 * 100vw), 505px);
  height: min(calc(670 / 750 * 100vw), 670px);
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
  user-select: none;
}

/* Sheer white veil over the whole hero (photo + texture), matching
   the PSD's "フッターレイヤー" layer (~41% opacity, white fading to
   a faint cream at the bottom) for a softened, curtained look. */
.footer__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.41) 0%,
    rgba(250, 249, 247, 0.41) 100%);
  pointer-events: none;
}

.footer__content {
  position: relative;
  z-index: 1;
  padding: 78px 24px 68px;
  text-align: center;
}

.footer__tagline {
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #191919;
}

.footer__catch {
  margin: min(calc(46 / 750 * 100vw), 46px) 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #191919;
}

.footer__cta {
  position: relative;
  overflow: hidden;
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 14px;
  background: linear-gradient(135deg, #c3a06a, #a5824c);
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 8px 24px rgba(165, 130, 76, 0.35);
}

.footer__cta-icon {
  width: 24px;
  height: 24px;
}

.footer__cta-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
}

.footer__cta-arrow {
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  color: #ffffff;
}

.footer__note {
  margin: 22px 0 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.65;
  letter-spacing: 0.14em;
  color: #191919;
}

.footer__bottom {
  background: #f3f1ef;
  line-height: 0;
  padding: 26px 24px 6px;
}

.footer__logo {
  display: block;
  width: auto;
  height: 27px;
  max-width: 100%;
  margin: 0 auto;
}

/* =========================================================
   PC LAYOUT (min-width: 1024px)
   Everything above this point is the SP build and stays the
   default at every viewport width. This block only ADDS
   overrides for viewports >= 1024px, so nothing below can
   change how the site renders under 1024px (the SP display
   is untouched). Images that need a PC-specific crop are
   swapped via <picture><source media="(min-width:1024px)">
   in index.html, using the "PC〜" originals supplied in
   /image (converted to webp in /assets, "-pc" suffix).
========================================================= */
@media (min-width: 1024px) {

  /* ---------- FV ---------- */
  .fv {
    max-width: none;
    min-height: 100vh;
    justify-content: center;
  }

  .fv__bg {
    object-position: 78% center;
  }

  .fv__content {
    margin: auto 0;
    max-width: 1040px;
    padding: 0 0 0 min(9vw, 130px);
  }

  /* Logo shares the copy block's left edge (same margin-left as
     .fv__group below) so logo / CAST RECRUIT / headline read as
     one vertical axis instead of the logo sitting alone at the
     original left edge. */
  .fv__logo {
    width: 199px;
    margin-left: min(15vw, 215px);
    /* Same gold PNG as the staff site — there it reads richer only
       because it sits on a near-black background. Deepen it here so
       it holds the same presence against this section's light photo. */
    filter: saturate(1.35) brightness(0.82) contrast(1.2);
  }

  /* Copy block: given real layout only here (SP keeps it as
     display:contents), indented further right than the original
     left edge so it reads as one composition with the photo
     instead of floating alone against a wide empty middle. */
  .fv__group {
    display: block;
    align-self: flex-start;
    margin-left: min(15vw, 215px);
    max-width: min(46vw, 620px);
  }

  .fv__eyebrow {
    margin-top: 16px;
    font-size: 18px;
  }

  .fv__headline {
    margin-top: 36px;
    font-size: clamp(33px, 3.75vw, 48px);
    line-height: 1.55;
    white-space: nowrap;
  }

  .fv__lead {
    margin-top: 20px;
  }

  /* Staff LP keeps this copy on a flat backdrop with no glow — drop the
     soft white halo here too so the two sites read as one brand. */
  .fv__lead-copy::before {
    content: none;
  }

  .fv__lead-highlight {
    font-size: 26px;
    margin-bottom: 26px;
  }

  .fv__lead-body {
    font-size: 16px;
    line-height: 2;
  }

  .fv__cta {
    width: fit-content;
    margin-top: 50px;
    padding: 19px 30px;
    gap: 14px;
  }

  .fv__cta-icon {
    width: 24px;
    height: 24px;
  }

  .fv__cta-text {
    font-size: 14px;
  }

  .fv__cta-arrow {
    font-size: 22px;
  }

  .fv__scroll {
    position: absolute;
    right: 56px;
    bottom: 52px;
    margin: 0;
  }

  /* ---------- CONCEPT ---------- */
  /* Section spans the full viewport width so its own white background
     reaches both edges (no more body-beige band) — the 1400px content
     cap and the mission/vision grid now live on .concept__inner below,
     so nothing about the content's own position or width changes. */
  .concept {
    max-width: none;
  }

  /* No max-width here (previously 1400px, centered) — mission/vision
     each fill their own half of the full viewport width so their card
     backgrounds reach the screen edges, and the closing photo (100%
     width) does too. Text inside is untouched: it's positioned with
     fixed left padding + forced <br> breaks, not width-relative, so it
     stays pinned to its own card edge regardless of how wide the card
     itself now is. VALUES/intro already center their own content via
     their own max-width, so they're unaffected either way. */
  .concept__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
  }

  .concept__intro {
    grid-column: 1 / -1;
    padding: 160px 40px 90px min(18vw, 260px);
  }

  .concept__eyebrow {
    font-size: 18px;
  }

  .concept__headline {
    margin-top: 26px;
    font-size: 44px;
    line-height: 1.6;
  }

  .concept__subtitle {
    font-size: 16px;
  }

  .concept__accent {
    margin-left: 130px;
  }

  .concept__card--mission {
    grid-column: 1;
    margin-top: 0;
    padding: 60px 64px 76px;
  }

  .concept__card--vision {
    grid-column: 2;
    margin-top: 0;
    padding: 60px 64px 76px;
  }

  .concept__card--values {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 60px 64px 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* VALUES-only number size (staff LP uses 42px here vs 44px on
     MISSION/VISION) — scoped so mission/vision are untouched. */
  .concept__card--values .concept__num {
    font-size: 48px;
  }

  .concept__card--values .concept__label {
    font-size: 36px;
  }

  /* Staff LP's gold rule sits flush under the word itself and stays
     centered with it automatically; replicate that with a ::after on
     the label instead of the separately-positioned sibling line used
     for MISSION/VISION (which relies on a fixed left offset that
     only works for a left-aligned heading, not a centered one). */
  .concept__card--values .concept__label-line {
    display: none;
  }

  .concept__card--values .concept__label {
    position: relative;
    padding-bottom: 9px;
  }

  .concept__card--values .concept__label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 1px;
    background: #ab8b56;
  }

  .concept__num {
    font-size: 44px;
  }

  .concept__label {
    font-size: 32px;
  }

  .concept__label-line {
    margin-left: 130px;
  }

  /* MISSION / VISION gold rule: flush under the word itself (as on the
     staff LP) instead of the SP offset calibrated for the number's
     width, so it lines up with the heading text, not the digit. */
  .concept__card--mission .concept__label-line {
    margin-left: 61px;
  }

  .concept__card--vision .concept__label-line {
    margin-left: 65px;
  }

  .concept__quote {
    margin-left: 64px;
    padding-left: 32px;
    font-size: 22px;
    line-height: 1.7;
  }

  .concept__text {
    margin-left: 64px;
    font-size: 15px;
    line-height: 1.9;
  }

  /* VALUES-only intro line: matches the staff LP's mvv__intro exactly
     (margin/padding unscaled from its SP value, same as staff) rather
     than the larger MISSION/VISION quote treatment. */
  .concept__card--values .concept__values-lead {
    margin-left: 48.5px;
    padding-left: 25.5px;
    font-size: 14px;
  }

  .concept__values-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1120px;
    margin: 70px auto 0;
  }

  .concept__values-row01 {
    padding: 0 48px;
  }

  .concept__values-divider {
    display: none;
  }

  .concept__values-row-bottom {
    display: contents;
  }

  .concept__values-col {
    padding: 0 48px;
  }

  .concept__values-col:first-child {
    border-left: 1px solid rgba(123, 99, 67, 0.235);
  }

  .concept__values-num {
    font-size: 24px;
    padding-top: 3px;
  }

  .concept__values-num::after {
    width: 20px;
  }

  .concept__values-heading {
    margin-top: 18px;
    font-size: 17px;
  }

  /* Forces the break inside each heading only at PC (hidden/inert at
     SP), landing the staff LP's exact wrap points: "勉強家で / あるこ
     と", "負けず嫌いで / あること", "当たり前を、/ 大切にできること". */
  .concept__values-heading-br {
    display: inline;
  }

  .concept__values-heading--tight {
    font-size: 17px;
    white-space: normal;
  }

  .concept__values-icon {
    width: 20px;
    height: 20px;
    margin: 28px auto;
  }

  .concept__values-body {
    font-size: 13px;
    line-height: 1.9;
  }

  .concept__values-closing {
    margin-top: 105px;
    font-size: 19px;
    line-height: 1.7;
    font-weight: 400;
  }

  .concept__values-closing--sub {
    margin-top: 31.5px;
  }

  .concept__one-fabric {
    margin-top: 60px;
    font-size: 26px;
  }

  .concept__closing-photo {
    grid-column: 1 / -1;
    height: 480px;
    object-fit: cover;
  }

  /* ---------- WHY FABRIC ---------- */
  /* Section spans the full viewport width so its own white background
     reaches both edges — the 1300px content cap now lives on
     .why__inner below, so nothing about the content's own width
     changes (same technique as CONCEPT). */
  .why {
    max-width: none;
  }

  .why__inner {
    display: block;
    max-width: 1300px;
    margin: 0 auto;
  }

  /* Left padding widened so the WHY FABRIC / headline / lead block
     reads as one composition (matching the staff LP's balance)
     instead of sitting flush at the column's original left edge. */
  .why__intro {
    padding: 150px 60px 70px min(18vw, 260px);
  }

  .why__eyebrow {
    font-size: 18px;
  }

  .why__headline {
    margin-top: 26px;
    font-size: 42px;
    line-height: 1.6;
  }

  .why__subtitle {
    font-size: 17px;
  }

  .why__accent {
    margin-left: 175px;
  }

  .why__lead {
    margin-top: 34px;
    font-size: 15px;
    line-height: 2;
  }

  /* Column widths/gap/spacing measured directly from the staff LP at
     1440px (960px combined block width, 42.375%/3.125%/54.5% text/
     gap/photo split, 62px row gap) — capped at that same 960px here
     and centered, rather than stretched to fill this section's wider
     1300px inner, so it matches the staff LP instead of spreading
     out. Top-aligned (not centered) so "01" sits level with the
     photo's top edge. */
  .why__item {
    align-items: flex-start;
    max-width: 960px;
    gap: 30px;
    margin: 62px auto 0;
    padding: 0;
  }

  .why__item-photo {
    flex: 0 0 54.5%;
    width: 54.5%;
  }

  .why__num {
    font-size: 44px;
  }

  .why__label {
    margin-top: 20px;
    font-size: 26px;
  }

  .why__text {
    margin-top: 22px;
    font-size: 15px;
    line-height: 2.1;
  }

  /* Same 960px width/centering as .why__item above, so the rule's
     length and left/right position line up with the content block
     exactly like the staff LP's item border. */
  .why__divider {
    max-width: 960px;
    margin: 48px auto 0;
  }

  /* Copy size/CTA size/spacing scaled from the staff LP's measured
     values (14px copy, 320px/72.75px button, 25px icon) by the same
     ~1.15x factor this site already runs relative to the staff LP
     elsewhere (e.g. why__label 26px vs staff's 22.5px), so it reads
     with the same presence instead of the staff LP's literal pixels
     looking undersized next to this site's other type. */
  .why__closing {
    margin: 108px 60px 0;
    font-size: 16px;
    line-height: 1.9;
  }

  .why__cta {
    max-width: 368px;
    margin: 78px auto 150px;
    padding: 28px 18px;
  }

  .why__cta-icon {
    width: 29px;
    height: 29px;
  }

  .why__cta-text {
    font-size: 15px;
  }

  .why__cta-arrow {
    font-size: 18px;
  }

  /* ---------- CASTVOICE ---------- */
  /* Section spans the full viewport width so the strip photo (a
     direct child, outside .castvoice__inner) reaches both edges —
     the 1300px cap for the intro/items/closing below it now lives on
     .castvoice__inner, so their own width/position is unchanged. */
  .castvoice {
    max-width: none;
  }

  .castvoice__inner {
    display: block;
    max-width: 1300px;
    margin: 0 auto;
  }

  .castvoice__strip {
    height: 420px;
    object-fit: cover;
  }

  /* Typography/spacing brought down to the WHY FABRIC section's scale
     (e.g. why__num 44px, why__label 26px, why__text 15px/2.1) — this
     section previously ran noticeably larger (castvoice__num was
     90px) which read as heavier/more crowded than the rest of the
     page. Layout (alignment, photo size/position) is untouched. */
  .castvoice__intro {
    padding: 90px 60px 0;
  }

  .castvoice__eyebrow {
    font-size: 18px;
  }

  .castvoice__headline {
    margin-top: 30px;
  }

  .castvoice__headline [data-typewriter] {
    font-size: 40px;
  }

  .castvoice__item {
    align-items: center;
    gap: 48px;
    margin-top: 90px;
    padding: 0 60px;
  }

  /* "02 地方から上京" only: wider text/photo gap so it doesn't read as
     cramped next to the photo — 01/03 keep the standard 48px gap. */
  .castvoice__item--reverse {
    gap: 88px;
  }

  .castvoice__head {
    gap: 20px;
  }

  .castvoice__num {
    font-size: 50px;
  }

  .castvoice__num-line {
    margin-top: 14px;
    width: 40px;
  }

  .castvoice__label {
    font-size: 18px;
  }

  .castvoice__title {
    margin-top: 10px;
    font-size: 28px;
  }

  .castvoice__quote {
    margin-top: 30px;
    margin-left: 32px;
    padding-left: 20px;
    font-size: 22px;
  }

  .castvoice__text {
    margin-top: 24px;
    margin-left: 32px;
    max-width: 560px;
    font-size: 15px;
    line-height: 2;
  }

  .castvoice__photo {
    flex: 0 0 min(30%, 340px);
    width: min(30%, 340px);
    margin-top: 0;
  }

  .castvoice__divider {
    margin: 90px 60px 0;
  }

  .castvoice__closing {
    margin: 60px 60px 90px;
    font-size: 20px;
  }

  /* ---------- REWARD ---------- */
  /* Section spans the full viewport width so its own white background
     reaches both edges (matching CONCEPT/WHY/CASTVOICE) — the 1200px
     content cap now lives on .reward__inner below, so the content's
     own position/width is unchanged. */
  .reward {
    max-width: none;
  }

  .reward__inner {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 140px;
  }

  .reward__intro {
    padding: 160px 60px 0;
    text-align: center;
  }

  .reward__eyebrow {
    margin-left: 0;
    font-size: 18px;
  }

  .reward__headline {
    justify-content: center;
    margin-top: 22px;
  }

  .reward__headline-line {
    display: none;
  }

  .reward__headline [data-typewriter] {
    margin-left: 0;
    font-size: 34px;
  }

  .reward__list {
    max-width: 900px;
    margin: 110px auto 0;
    padding: 0;
  }

  .reward__row {
    gap: 40px;
    margin-top: 66px;
  }

  .reward__label {
    flex: 0 0 200px;
    font-size: 18px;
  }

  .reward__value {
    font-size: 20px;
    line-height: 1.85;
  }

  .reward__note {
    margin-top: 84px;
    font-size: 14px;
  }

  /* ---------- FLOW ---------- */
  /* Section spans the full viewport width so .flow__bg (a direct
     sibling, outside .flow__inner) reaches both edges — no more
     REWARD's white bleeding in above it. The 1100px content cap for
     the intro/steps/CTA now lives on .flow__inner, so their own
     width/position is unchanged. */
  .flow {
    max-width: none;
  }

  .flow__inner {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 140px;
  }

  .flow__intro {
    padding: 140px 60px 0;
    text-align: center;
  }

  .flow__eyebrow {
    font-size: 18px;
  }

  .flow__headline {
    justify-content: center;
    margin-top: 22px;
  }

  .flow__headline-line {
    display: none;
  }

  .flow__headline [data-typewriter] {
    margin-left: 0;
    font-size: 34px;
  }

  .flow__step {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 64px;
    margin-bottom: 56px;
    padding: 0 60px;
  }

  .flow__step-title {
    font-size: 22px;
  }

  .flow__step-num {
    font-size: 17px;
  }

  .flow__step-text {
    margin-top: 20px;
    font-size: 15.5px;
    line-height: 2;
  }

  /* Sized down to match the staff LP's button (measured: 320px/
     72.75px, padding 24.5px/16px, 25px icon) — same scale reduction
     already applied to why__cta. */
  .flow__cta {
    max-width: 368px;
    margin: 20px auto 0;
    padding: 28px 18px;
  }

  .flow__cta-icon {
    width: 29px;
    height: 29px;
  }

  .flow__cta-text {
    font-size: 15px;
  }

  .flow__cta-arrow {
    font-size: 18px;
  }

  .flow__note {
    margin-top: 26px;
    font-size: 14px;
  }

  /* ---------- FAQ ---------- */
  .faq {
    max-width: none;
    padding-bottom: 140px;
  }

  .faq__inner {
    display: block;
    max-width: 980px;
    margin: 0 auto;
  }

  .faq__intro {
    padding: 140px 60px 0;
    text-align: center;
  }

  .faq__eyebrow {
    font-size: 18px;
  }

  .faq__headline {
    justify-content: center;
    margin-top: 22px;
  }

  .faq__headline-line {
    display: none;
  }

  .faq__headline [data-typewriter] {
    margin-left: 0;
    font-size: 34px;
  }

  .faq__list {
    max-width: 900px;
    margin: 70px auto 0;
    padding: 0;
  }

  .faq__item {
    padding: 32px 0;
  }

  .faq__q {
    font-size: 18px;
  }

  .faq__question-text {
    margin-top: 2px;
    font-size: 17px;
  }

  .faq__icon {
    width: 22px;
    height: 22px;
  }

  .faq__answer {
    margin-top: 26px;
    padding-left: 60px;
    font-size: 15px;
  }

  /* ---------- FOOTER ---------- */
  .footer {
    max-width: none;
  }

  .footer__bg {
    object-position: 82% 20%;
  }

  .footer__photo {
    display: none;
  }

  .footer__veil {
    display: none;
  }

  .footer__content {
    width: 100%;
    padding: 65px 24px 20px;
  }

  .footer__tagline {
    font-size: 18px;
  }

  .footer__catch {
    margin-top: 18px;
    font-size: 18px;
  }

  .footer__cta {
    max-width: 330px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    padding: 23.5px 14px;
  }

  .footer__cta-icon {
    width: 24px;
    height: 24px;
  }

  .footer__cta-text {
    font-size: 12px;
    line-height: 1;
  }

  .footer__cta-arrow {
    font-size: 15px;
    line-height: 1;
  }

  .footer__note {
    margin-top: 22px;
    font-size: 13px;
  }

  .footer__bottom {
    padding: 10px 24px 6px;
  }

  .footer__logo {
    width: 100%;
    max-width: 195px;
    height: auto;
  }
}