/*
Theme Name: LIM_responsive001
Theme URI:
Author: LIM Inc.
Author URI:
Description:
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.0
License: All Rights Reserved
Text Domain:
*/

/* =========================================================
   iBRO recruit.ibro.jp — Global Stylesheet
   v1.0 — 2026-05-06 (LIM)
   Design ref: piif.ac.jp / iBRO 採用パンフレット 2026
   ========================================================= */

/* -----------------------------------------------------------
   1. Reset & Base
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  letter-spacing: 0.2em;
  font-feature-settings: "palt";
  overflow-x: hidden;
}
/* Tighter spacing for UI components where 0.2em letter-spacing breaks layout. */
.site-header__cta,
.btn,
.card__title,
.card__line,
.card__label,
.card__cta,
.entry-numbers__value,
.entry-numbers__label,
.numbers__title,
.numbers__lead,
.num-item__value,
.num-item__label,
.num-item__unit,
.marquee__item,
.story-title,
.hero__title,
.ph-hero__title,
.final-cta__title,
.section__title,
.timeline__when,
.timeline__what,
.req-table__key,
.req-table__val,
.faq__q,
.faq__a,
.benefit__title,
.benefit__amount,
.benefit__desc,
.image-placeholder__title,
.image-placeholder__desc,
.academy-feature__title,
.academy-feature__desc,
.timeline-aside__title,
.timeline-aside__body,
.video-frame__caption,
.footer__copy,
.footer__col h4,
.footer__col li,
.footer__bottom {
  letter-spacing: normal;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity 0.3s ease; }
a:hover { opacity: 0.7; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--sky-d); outline-offset: 4px; }

/* -----------------------------------------------------------
   2. Design Tokens
   ----------------------------------------------------------- */
:root {
  /* Colors — Palette 10-I  Shell Pink  */
  --bg:        #FCFAF9;          /* base warm-white */
  --bg-cream:  #F4E4E2;          /* shell pink band */
  --bg-sky:    #ECCFCC;          /* deeper shell band */
  --ink:       #1B1316;          /* warm near-black */
  --ink-2:     #4F4044;          /* sub text */
  --ink-3:     #998A8C;          /* caption/label (raised contrast) */
  --sky:       #D89996;          /* accent pink (was sky) */
  --sky-d:     #B36F6C;          /* accent pink dark (was sky-d) */
  --gold:      #B49680;          /* warm beige-gold for numbers */
  --line:      #06C755;          /* LINE brand green */
  --line-d:    #05A648;
  --rule:      rgba(27, 19, 22, 0.18);
  --color-accent:#D89996;

  /* Typography */
  --fs-display-xl: clamp(72px, 16vw, 200px);
  --fs-display-lg: clamp(48px, 10vw, 120px);
  --fs-headline-md: clamp(28px, 6vw, 60px);
  --fs-headline-sm: clamp(20px, 4vw, 32px);
  --fs-body: clamp(15px, 1.6vw, 16px);
  --fs-label: clamp(10px, 1vw, 12px);

  --ff-en-bold: "Bebas Neue", sans-serif;
  --ff-en-italic: "Cormorant Garamond", serif;

  /* Spacing */
  --side-pad: clamp(20px, 6vw, 120px);
  --section-py: clamp(36px, 5vw, 80px);
  --text-max: 680px;
}

/* -----------------------------------------------------------
   3. Utility Layouts
   ----------------------------------------------------------- */

/* レスポンシブ改行 — SP のみ改行 / PC のみ改行 */
.br_sp { display: block; }               /* SP: 改行あり */
.br_pc { display: none; }               /* SP: 改行なし */
@media (min-width: 600px) {
  .br_sp { display: none; }             /* PC: 改行なし */
  .br_pc { display: block; }            /* PC: 改行あり */
}
.section {
  padding: var(--section-py) var(--side-pad);
  position: relative;
}
.section--full {
  padding: var(--section-py) 0;
}
.section--cream { background: var(--bg-cream); }
.section--sky { background: var(--bg-sky); }
.section--ink {
  background: var(--ink);
  color: var(--bg);
}
.section--ink .section__label,
.section--ink .section__num { color: var(--bg); border-color: rgba(255,255,255,0.4); }

.text-block {
  max-width: var(--text-max);
}
.text-block--right { margin-left: auto; }

.section__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.section__num {
  font-family: var(--ff-en-bold);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--sky-d);
}
.section__rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.section__label {
  font-family: var(--ff-en-italic);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 0.12em;
}

.h-display {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
  font-size: var(--fs-display-lg);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.h-headline {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--fs-headline-md);
  line-height: 1.25;
  letter-spacing: 0;
}
.h-sub {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--fs-headline-sm);
  line-height: 1.5;
}
.eyebrow {
  font-family: var(--ff-en-italic);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 12px;
}

p.lead {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 2;
  color: var(--ink-2);
}
p { color: var(--ink-2); }
.muted { color: var(--ink-2); font-size: 14px; }
.highlight {
  color: var(--ink);
  font-weight: 800;
  background: linear-gradient(transparent 65%, rgba(216,153,150,0.32) 65%);
  padding: 0 2px;
}

/* -----------------------------------------------------------
   4. Header / Nav  (fixed + scroll-aware light/dark mode)
   ----------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--side-pad);
  color: #fff;
  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, padding .35s ease;
  background: transparent;
  min-height: 60px;
}
/* Light mode: applied when overlapping a light section (auto via JS) */
.site-header.is-light {
  background: rgba(250,250,248,0.92);
  color: var(--ink);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 1px 0 rgba(26,17,8,0.06);
}
/* Manual fallback for static placeholders (when no JS or no hero) */
.site-header--static {
  position: static;
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  height: 46px;
  min-height: 48px;       /* tap target */
  padding: 3px 0;
}
.site-header__logo img {
  height: 46px;
  width: auto;
  display: block;
  transition: filter .35s ease;
  /* on dark mode (default) the official-black SVG must be inverted to white */
  filter: brightness(0) invert(1);
}
.site-header.is-light .site-header__logo img,
.site-header--static .site-header__logo img {
  filter: none;
}
@media (min-width: 600px) {
  .site-header__logo { height: 56px; }
  .site-header__logo img { height: 56px; }
  .site-header { padding: 18px var(--side-pad); }
}
.site-header__cta {
  font-family: var(--ff-en-bold);
  font-size: 13px;
  letter-spacing: 0.22em;
  padding: 0 22px;
  height: 40px;
  line-height: 1;
  min-height: 44px;       /* tap target */
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 400;
  /* Dark-mode default: solid pill that reads on photos */
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.95);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.site-header__cta:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  opacity: 1;
}
.site-header.is-light .site-header__cta,
.site-header--static .site-header__cta {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.site-header.is-light .site-header__cta:hover,
.site-header--static .site-header__cta:hover {
  background: var(--sky-d);
  border-color: var(--sky-d);
}
@media (min-width: 600px) {
  .site-header__cta { font-size: 14px; padding: 0 28px; height: 44px; }
}

/* Anchor scroll-margin so #id targets land below fixed header */
[id] { scroll-margin-top: 80px; }

/* prevent first-section content from sliding under fixed header on hero-less pages */
body { padding-top: 0; }
.body--has-static-header { padding-top: 0; }

/* -----------------------------------------------------------
   5. HERO (Pattern A — full bleed)
   ----------------------------------------------------------- */
.hero {
  position: relative;
  height: 92svh;
  min-height: 580px;
  width: 100%;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
@supports not (height: 100svh) {
  .hero { height: 92vh; }
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: heroZoom 9s ease-out forwards;
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.18) 18%,
      rgba(0,0,0,0.22) 38%,
      rgba(0,0,0,0.55) 65%,
      rgba(0,0,0,0.85) 100%);
}
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--side-pad);
  padding-bottom: clamp(100px, 6vw, 80px);
  max-width: 1100px;
}
.hero__title {
  font-size: clamp(40px, 9vw, 96px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.45),
    0 4px 24px rgba(0,0,0,0.55);
}
.hero__title .line { display: block; opacity: 0; transform: translateY(28px); animation: heroLine .85s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__title .line:nth-child(1) { animation-delay: 0.45s; }
.hero__title .line:nth-child(2) { animation-delay: 0.6s; }
.hero__title .line:nth-child(3) { animation-delay: 0.75s; }
@keyframes heroLine { to { opacity: 1; transform: none; } }

.hero__title .reg {
  font-size: 0.4em;
  vertical-align: super;
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0;
  opacity: 0.9;
}
.hero__sub {
  margin-top: clamp(20px, 3vw, 32px);
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: #FFF8E7;
  text-shadow:
    0 0 6px rgba(0,0,0,0.85),
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 24px rgba(0,0,0,0.75);
  max-width: 640px;
}
.hero__sub-en {
  display: block;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.9em;
  margin-top: 10px;
  opacity: 1;
  color: #fff;
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.6),
    0 2px 14px rgba(0,0,0,0.7);
}
.hero__label {
  position: absolute;
  top: clamp(96px, 12vw, 140px);
  left: var(--side-pad);
  font-family: var(--ff-en-bold);
  font-size: clamp(16px, 2.2vw, 24px);
  letter-spacing: 0.3em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  z-index: 3;
}
.hero__scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-en-bold);
  font-size: 10px;
  letter-spacing: 0.3em;
  opacity: 0.95;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  z-index: 3;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 38px;
  background: currentColor;
  margin: 8px auto 0;
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* -----------------------------------------------------------
   6. BIG STATEMENT
   ----------------------------------------------------------- */
.bigstmt__title {
  font-size: var(--fs-display-lg);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 40px;
}
.bigstmt__body {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2.2;
  color: var(--ink-2);
  max-width: 600px;
}

/* -----------------------------------------------------------
   7. Pattern B — Photo-Left + Text-Overlap
   ----------------------------------------------------------- */
.pattern-b {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
.pattern-b__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.pattern-b__text {
  background: var(--bg);
  padding: clamp(32px, 5vw, 56px);
}
@media (min-width: 900px) {
  .pattern-b {
    grid-template-columns: 65% 40%;
    align-items: center;
  }
  .pattern-b__photo {
    aspect-ratio: 5 / 4;
    margin-left: calc(var(--side-pad) * -1);
    width: calc(100% + var(--side-pad));
  }
  .pattern-b__text {
    margin-left: -10%;
    padding: clamp(48px, 5vw, 72px);
    box-shadow: -2px 4px 32px rgba(26,17,8,0.06);
    z-index: 2;
  }
}

/* -----------------------------------------------------------
   8. Pattern C — Wide Banner + Big Text
   ----------------------------------------------------------- */
.pattern-c__banner {
  width: 100vw;
  margin-left: calc(var(--side-pad) * -1);
  margin-right: calc(var(--side-pad) * -1);
  height: 38vh;
  min-height: 240px;
  background-size: cover;
  background-position: center;
}
.pattern-c__body {
  padding-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}
.pattern-c__num {
  font-family: var(--ff-en-bold);
  font-size: clamp(96px, 18vw, 220px);
  line-height: 0.9;
  color: var(--gold);
  letter-spacing: -0.02em;
}
@media (min-width: 900px) {
  .pattern-c__body {
    grid-template-columns: 1fr auto;
  }
}

/* -----------------------------------------------------------
   9. Pattern D — Big Text + Right Offset Photo
   ----------------------------------------------------------- */
.pattern-d {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.pattern-d__photo {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
@media (min-width: 900px) {
  .pattern-d {
    grid-template-columns: 55% 40%;
    gap: 5%;
  }
  .pattern-d__photo {
    margin-top: 60px;
  }
}

/* -----------------------------------------------------------
   10. Pattern E — Mosaic
   ----------------------------------------------------------- */
.pattern-e {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(48px, 8vw, 96px);
}
.pattern-e__lg {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.pattern-e__sm {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
}
.pattern-e__quote {
  padding: 24px 0;
}
.pattern-e__quote .h-headline {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.6;
}
.pattern-e__meta {
  font-family: var(--ff-en-bold);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--sky-d);
  margin-bottom: 12px;
}
@media (min-width: 900px) {
  .pattern-e {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: end;
  }
  .pattern-e__lg { grid-column: 1; aspect-ratio: 3 / 4; }
  .pattern-e__sm { grid-column: 2; aspect-ratio: 3 / 4; transform: translateY(40px); }
  .pattern-e__quote { grid-column: 3; }
}
.pattern-e--reverse .pattern-e__lg { grid-column: 3; }
.pattern-e--reverse .pattern-e__sm { grid-column: 2; }
.pattern-e--reverse .pattern-e__quote { grid-column: 1; }

/* -----------------------------------------------------------
   11. NUMBERS — Dark / count-up
   ----------------------------------------------------------- */
.numbers__title {
  font-size: var(--fs-display-lg);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
}
.numbers__lead {
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.88);
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 580px;
  line-height: 1.9;
}
.numbers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px 32px;
}
.num-item__value {
  font-family: var(--ff-en-bold);
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.9;
  color: var(--gold);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.num-item__unit {
  font-family: "Noto Sans JP";
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.1em;
}
.num-item__label {
  font-size: 14px;
  color: rgba(255,255,255,0.86);
  margin-top: 10px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
@media (min-width: 600px) {
  .numbers__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .numbers__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------
   12. SCHEDULE — editorial timeline
   ----------------------------------------------------------- */
.timeline-wrap {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (min-width: 1000px) {
  .timeline-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.timeline-aside {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 48px);
}
.timeline-aside__eyebrow {
  font-family: var(--ff-en-bold);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--sky-d);
  margin-bottom: 16px;
}
.timeline-aside__title {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 16px;
  color: var(--ink);
  text-wrap: balance;
}
.timeline-aside__body {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.9;
  color: var(--ink-2);
}
.timeline-aside__divider {
  height: 1px;
  background: var(--rule);
  margin: clamp(20px, 3vw, 32px) 0;
}

.timeline {
  margin-top: 0;
  padding-left: 24px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 1px;
  background: var(--rule);
}
.timeline__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  padding: 18px 0;
  position: relative;
}
@media (max-width: 599px) {
  .timeline__row { grid-template-columns: 90px 1fr; gap: 20px; }
}
.timeline__row::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 28px;
  width: 8px; height: 8px;
  background: var(--ink);
  border-radius: 50%;
}
.timeline__row--star::before {
  background: var(--gold);
  width: 14px; height: 14px;
  left: -31px;
  top: 25px;
  box-shadow: 0 0 0 6px rgba(196,150,40,0.18);
}
.timeline__when {
  font-family: var(--ff-en-bold);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--sky-d);
  white-space: nowrap;
}
.timeline__row--star .timeline__when { color: var(--gold); font-size: 22px; }
.timeline__what { font-size: 16px; line-height: 1.7; }
.timeline__row--star .timeline__what { font-weight: 700; font-size: 18px; }

/* -----------------------------------------------------------
   13. BENEFITS — irregular grid
   ----------------------------------------------------------- */
.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 44px);
}
.benefit {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 4px;
  border: 1px solid var(--rule);
  position: relative;
}
@media (max-width: 599px) {
  .benefit {
    display: grid !important;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
    padding: 18px 20px;
  }
  .benefit__icon {
    grid-row: 1 / -1;
    grid-column: 1;
    margin: 0 !important;
    width: 48px !important;
    height: 48px !important;
    align-self: start;
  }
  .benefit__head,
  .benefit__title,
  .benefit__desc {
    grid-column: 2;
  }
}
.benefit__icon {
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
  display: block;
  margin: 0 0 clamp(14px, 2vw, 20px);
  object-fit: contain;
  flex-shrink: 0;
}
.benefit__head {
  font-family: var(--ff-en-bold);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--sky-d);
  margin-bottom: 8px;
}
.benefit__title {
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  margin-bottom: 8px;
}
.benefit__amount {
  font-family: var(--ff-en-bold);
  font-size: clamp(26px, 4vw, 40px);
  color: var(--gold);
  margin-right: 4px;
}
.benefit__desc { color: var(--ink-2); font-size: 14px; }
@media (min-width: 600px) {
  .benefits { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 900px) {
  .benefits { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* -----------------------------------------------------------
   14. REQUIREMENTS — clean table
   ----------------------------------------------------------- */
.req-table {
  margin-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--rule);
}
.req-table__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.req-table__key {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.req-table__val {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.8;
}
@media (min-width: 600px) {
  .req-table__row { grid-template-columns: 200px 1fr; gap: 32px; align-items: start; }
}

/* -----------------------------------------------------------
   15. FAQ
   ----------------------------------------------------------- */
.faq {
  margin-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--rule);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 24px 0;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.3s ease;
  color: var(--ink);
}
.faq__q:hover { color: var(--sky-d); }
.faq__q::after {
  content: "+";
  font-family: var(--ff-en-bold);
  font-size: 28px;
  color: var(--sky-d);
  transition: transform 0.3s ease;
  margin-left: 16px;
  flex-shrink: 0;
}
.faq__item.is-open .faq__q::after { content: "−"; }
.faq__a {
  display: none;
  padding: 0 0 24px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.9;
  max-width: 720px;
}
.faq__item.is-open .faq__a { display: block; }

/* -----------------------------------------------------------
   16. FINAL CTA
   ----------------------------------------------------------- */
.final-cta {
  text-align: center;
  padding: clamp(40px, 6vw, 88px) var(--side-pad);
}
.final-cta__title {
  font-size: clamp(40px, 9vw, 100px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 24px;
}
.final-cta__sub {
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--ink-2);
  margin-bottom: clamp(40px, 6vw, 64px);
}
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}
.cta-stack__row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
@media (min-width: 600px) {
  .cta-stack__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* -----------------------------------------------------------
   17. Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 32px;
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 15px;
  transition: transform .3s, opacity .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-1px); opacity: 1; }
.btn--line {
  background: var(--line);
  color: #fff;
  box-shadow: 0 6px 18px rgba(6,199,85,0.28);
}
.btn--line:hover { background: var(--line-d); box-shadow: 0 10px 28px rgba(6,199,85,0.4); }
.btn--line::before {
  content: "";
  width: 22px; height: 22px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="white"><path d="M16 3C8.27 3 2 8.13 2 14.5c0 4.06 2.7 7.62 6.74 9.6l-.91 3.4c-.13.49.36.88.79.62L13.4 25.5c.85.12 1.72.2 2.6.2 7.73 0 14-5.13 14-11.2S23.73 3 16 3z"/></svg>') center/contain no-repeat;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--gold {
  background: var(--ink);
  color: var(--bg);
}
.btn--lg { padding: 22px 40px; font-size: 16px; }
.btn--block { width: 100%; }

/* -----------------------------------------------------------
   18. Floating LINE CTA (mobile-first, all pages)
   ----------------------------------------------------------- */
.floating-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  z-index: 100;
  margin: 0 auto;
  width: auto;
  max-width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta.is-hidden-by-footer {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  pointer-events: none !important;
}
@media (min-width: 900px) {
  .floating-cta { display: none; }
}
@media (max-width: 899px) {
  .footer { padding-bottom: clamp(96px, 22vw, 140px); }
}

/* -----------------------------------------------------------
   19. Entry Page (Hub) — 5 Cards
   ----------------------------------------------------------- */
.entry-numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(48px, 8vw, 80px) var(--side-pad);
  text-align: center;
}
.entry-numbers__item { padding: 24px; }
.entry-numbers__item + .entry-numbers__item { border-top: 1px solid var(--rule); }
.entry-numbers__value {
  font-family: var(--ff-en-bold);
  font-size: clamp(48px, 10vw, 96px);
  color: var(--gold);
  line-height: 0.9;
}
.entry-numbers__label {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 12px;
  letter-spacing: 0.1em;
}
@media (min-width: 600px) {
  .entry-numbers { grid-template-columns: repeat(3, 1fr); }
  .entry-numbers__item + .entry-numbers__item { border-top: 0; border-left: 1px solid var(--rule); }
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: clamp(28px, 5vw, 56px) var(--side-pad);
}
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cards .card:nth-child(5) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .cards .card { aspect-ratio: 3 / 4.4; }
  .cards .card:nth-child(1),
  .cards .card:nth-child(5) { grid-column: auto; aspect-ratio: 3 / 4.4; }
}
.card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .4s ease;
}
.card:hover { transform: translateY(-2px); }
.card__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  transition: transform 1.2s ease, opacity .4s ease;
}
.card:hover .card__bg { transform: scale(1.04); opacity: 0.6; }
.card__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 30%,
    rgba(0,0,0,0.55) 70%,
    rgba(0,0,0,0.85) 100%);
}
.card__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card__label {
  font-family: var(--ff-en-bold);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #fff;
  opacity: 0.95;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.card__title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 8px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.card__line {
  font-size: 14px;
  line-height: 1.7;
  color: #FFF8E7;
  opacity: 1;
  font-weight: 500;
  max-width: 320px;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.7),
    0 2px 12px rgba(0,0,0,0.5);
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--ff-en-bold);
  font-size: 12px;
  letter-spacing: 0.18em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  align-self: flex-start;
}
.card__cta::after { content: "→"; }
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .card { aspect-ratio: 3 / 5; }
  .card:nth-child(odd) { transform: translateY(0); }
  .card:nth-child(even) { transform: translateY(28px); }
  .card:nth-child(odd):hover { transform: translateY(-2px); }
  .card:nth-child(even):hover { transform: translateY(26px); }
}

/* -----------------------------------------------------------
   20. Placeholder Pages
   ----------------------------------------------------------- */
.ph-hero {
  height: 60svh;
  min-height: 380px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 80px var(--side-pad) 32px;
  color: #fff;
  overflow: hidden;
}
@supports not (height: 100svh) {
  .ph-hero { height: 60vh; }
}
.ph-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.ph-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 25%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0.65) 100%);
}
.ph-hero__content { position: relative; z-index: 2; max-width: 720px; }
.ph-hero__label {
  font-family: var(--ff-en-bold);
  font-size: 14px;
  letter-spacing: 0.3em;
  opacity: 0.85;
  margin-bottom: 16px;
}
.ph-hero__title {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.ph-hero__line {
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.8;
  max-width: 540px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.ph-hero__label {
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.ph-body {
  text-align: center;
  padding: clamp(64px, 10vw, 120px) var(--side-pad);
}
.ph-body__label {
  font-family: var(--ff-en-bold);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--sky-d);
  margin-bottom: 24px;
}
.ph-body__title {
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 16px;
}
.ph-body__line {
  color: var(--ink-2);
  margin-bottom: 32px;
}
.ph-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(40px, 6vw, 64px);
  font-family: var(--ff-en-bold);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.ph-back::before { content: "←"; }

/* -----------------------------------------------------------
   21. Footer
   ----------------------------------------------------------- */
.footer {
  padding: clamp(64px, 10vw, 120px) var(--side-pad);
  background: var(--bg-cream);
  border-top: 1px solid var(--rule);
}
.footer__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 600px) {
  .footer__head { grid-template-columns: auto 1fr; align-items: center; }
}
.footer__brand {
  font-family: var(--ff-en-bold);
  font-size: 28px;
  letter-spacing: 0.1em;
}
.footer__brand small { display: block; font-size: 10px; letter-spacing: 0.3em; margin-top: 4px; font-family: "Noto Sans JP"; font-weight: 500; }
.footer__copy { color: var(--ink-2); font-size: 14px; line-height: 2; }
.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 600px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer__cols { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer__col h4 {
  font-family: var(--ff-en-bold);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--sky-d);
  margin-bottom: 16px;
}
.footer__col li { font-size: 14px; padding: 6px 0; color: var(--ink-2); }
.footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  letter-spacing: 0.06em;
}
.footer__brand img {
  height: 56px;
  width: auto;
  display: block;
}
@media (min-width: 600px) {
  .footer__brand img { height: 68px; }
}

/* -----------------------------------------------------------
   22. Animations on Scroll
   ----------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.fade-up.is-in { opacity: 1; transform: none; }
.fade-up--delay-1 { transition-delay: 0.1s; }
.fade-up--delay-2 { transition-delay: 0.2s; }
.fade-up--delay-3 { transition-delay: 0.3s; }

/* -----------------------------------------------------------
   23. Video block
   ----------------------------------------------------------- */
.video-caption {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.06em;
}

/* -----------------------------------------------------------
   24. Highlight bullets (Reasons)
   ----------------------------------------------------------- */
.bullets {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bullets li {
  position: relative;
  padding-left: 28px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 16px; height: 1px;
  background: var(--gold);
}
.bullets li strong { font-weight: 700; }

/* -----------------------------------------------------------
   25. Print
   ----------------------------------------------------------- */
@media print {
  .floating-cta, .site-header__cta { display: none; }
  body { background: #fff; }
}

/* ============================================================
   STORYTELLING LP — chapter / readmore / progress bar / next-arrow
   ============================================================ */

.story-section {
  padding: clamp(28px, 5vw, 64px) var(--side-pad);
}
.story-inner {
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 1100px) {
  .story-section > .chapter,
  .story-section > .story-title,
  .story-section > .story-sub,
  .story-section > .readmore,
  .story-section > .next-arrow,
  .story-section > .timeline-wrap,
  .story-section > .req-table,
  .story-section > .faq,
  .story-section > .benefits,
  .story-section > .numbers__title,
  .story-section > .numbers__lead,
  .story-section > .numbers__grid,
  .section.story-section > .chapter,
  .section.story-section > .story-title,
  .section.story-section > .story-sub,
  .section.story-section > .readmore,
  .section.story-section > .next-arrow,
  .section.story-section > .timeline-wrap,
  .section.story-section > .req-table,
  .section.story-section > .faq,
  .section.story-section > .benefits {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}
.story-section .entry-numbers {
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(40px, 6vw, 64px) 0;
}
.story-section .entry-numbers__value {
  font-size: clamp(40px, 7vw, 72px);
}

/* ---- Scroll progress bar (top fixed) ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--sky-d);
  z-index: 200;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ---- Chapter / eyebrow label ---- */
.chapter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(17px, 1.9vw, 22px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: clamp(16px, 2.4vw, 24px);
  line-height: 1;
}
.chapter__num {
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.18em;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 7px 14px;
  border-radius: 100px;
  font-weight: 500;
  line-height: 1;
}
.section--ink .chapter,
.story-section.section--ink .chapter { color: #fff; }
.section--ink .chapter__num,
.story-section.section--ink .chapter__num {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}

/* ---- Section big-title (chapter style) ---- */
.story-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: clamp(14px, 2.2vw, 24px);
}
.story-sub {
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.9;
  color: var(--ink-2);
  max-width: 640px;
  margin-bottom: clamp(20px, 2.8vw, 32px);
}

/* ---- Read more accordion ---- */
.readmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 100px;
  padding: 12px 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  min-height: 44px;
}
.readmore:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.readmore::after {
  content: "▼";
  font-size: 10px;
  transition: transform 0.4s ease;
}
.readmore.is-open::after { transform: rotate(180deg); }

.readmore__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.7s cubic-bezier(.2,.7,.2,1), opacity 0.5s ease, margin-top 0.5s ease;
}
.readmore__body.is-open {
  max-height: 4000px;
  opacity: 1;
  margin-top: clamp(28px, 4vw, 48px);
}
.readmore__body p {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2.1;
  color: var(--ink-2);
  margin-bottom: 1.4em;
  max-width: none;
}
.readmore__body p strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 65%, rgba(216,153,150,0.32) 65%);
  padding: 0 2px;
}
.readmore__body blockquote {
  border-left: 2px solid var(--sky-d);
  padding-left: 24px;
  margin: 28px 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.9;
  color: var(--ink);
  font-weight: 500;
  font-feature-settings: "palt";
  max-width: none;
}
.readmore__body blockquote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

/* ---- Next-arrow (section transition) ---- */
.next-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: clamp(16px, 2.5vw, 32px) auto 0;
  opacity: 0.5;
  font-family: "Bebas Neue", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-2);
}
.next-arrow::after {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background: var(--ink-2);
  margin-top: 8px;
  animation: arrowPulse 2.4s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%,100% { opacity: 0.3; transform: scaleY(1); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================================
   V3 — HUMAN MADE motif overrides
   ============================================================ */
.body--v3 {
  --side-pad: clamp(24px, 8vw, 160px);
  --section-py: clamp(120px, 18vw, 240px);
  --text-max: 560px;
}
.body--v3 .section { padding: var(--section-py) var(--side-pad); }
.body--v3 .section__head { margin-bottom: clamp(40px, 6vw, 72px); }
.body--v3 .hero { height: 100svh; min-height: 640px; }
@supports not (height: 100svh) { .body--v3 .hero { height: 100vh; } }
.body--v3 .hero__title {
  font-size: clamp(48px, 12vw, 140px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.body--v3 .hero__title .line { animation-duration: 1.0s; }
.body--v3 .hero__title .line:nth-child(1) { animation-delay: 0.55s; }
.body--v3 .hero__title .line:nth-child(2) { animation-delay: 0.75s; }
.body--v3 .hero__title .line:nth-child(3) { animation-delay: 0.95s; }
.body--v3 .hero__sub {
  margin-top: clamp(28px, 4vw, 44px);
  font-size: clamp(14px, 1.5vw, 17px);
  letter-spacing: 0.06em;
  line-height: 2.0;
}
.body--v3 .hero__sub-en {
  font-family: "Bebas Neue", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.32em;
  margin-top: 18px;
  opacity: 0.9;
}
.body--v3 .hero__label { letter-spacing: 0.36em; opacity: 0.95; }

.eyebrow-en {
  display: inline-block;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sky-d);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.eyebrow-en::before { content: "—"; margin-right: 12px; opacity: 0.6; }

.body--v3 .bigstmt__title {
  font-size: clamp(56px, 12vw, 160px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.body--v3 .bigstmt__body {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2.4;
  max-width: 540px;
}
.body--v3 .bigstmt__body span {
  display: block;
  margin-bottom: 0.75em;
}

/* Full-bleed photo block */
.photo-block {
  position: relative;
  width: 100%;
  height: clamp(220px, 38vh, 440px);
  overflow: hidden;
  margin: 0;
}
.photo-block__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1.5s ease-out;
}
.photo-block.is-in .photo-block__bg { transform: scale(1.0); }
.photo-block__caption {
  position: absolute;
  bottom: clamp(24px, 4vw, 48px);
  left: var(--side-pad);
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  z-index: 2;
}

.reason-v3 {
  max-width: 780px;
}
.reason-v3 .h-display {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.reason-v3 .h-display span { display: block; }
.reason-v3 .lead {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2.1;
  color: var(--ink-2);
  max-width: 520px;
}
.reason-v3 .bullets {
  margin-top: clamp(36px, 5vw, 56px);
  gap: 18px;
}
.reason-v3 .bullets li {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.9;
}

@media (prefers-reduced-motion: reduce) {
  .photo-block__bg { transform: none !important; transition: none; }
  .body--v3 .hero__bg { animation: none; }
}

/* ============================================================
   PRO LP UI GIMMICKS
   ============================================================ */

.hero__title,
.hero__sub,
.story-title,
.story-sub,
.ph-hero__title,
.ph-hero__line,
.final-cta__title,
.final-cta__sub,
.card__title,
.card__line,
.section__title {
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-feature-settings: "palt";
  line-break: strict;
}
.story-title,
.ph-hero__title,
.hero__title,
.final-cta__title,
.section__title {
  text-wrap: balance;
}
.story-sub,
.ph-hero__line,
.final-cta__sub {
  text-wrap: pretty;
}

/* ---- Ken Burns ---- */
.hero__bg.ken-burns,
.ph-hero__bg.ken-burns {
  animation: kenBurns 24s ease-in-out infinite alternate;
  transform-origin: center 42%;
}
@keyframes kenBurns {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  50%  { transform: scale(1.07) translate3d(-1.4%, -0.8%, 0); }
  100% { transform: scale(1.10) translate3d(-2.4%, -1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg.ken-burns,
  .ph-hero__bg.ken-burns { animation: none; }
}

/* ---- Parallax ---- */
.parallax-bg,
.parallax-content { will-change: transform; }

/* ---- Block-level reveal ---- */
.reveal-words {
  display: block;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1),
              transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal-words.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Mask reveal ---- */
.mask-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s cubic-bezier(.2,.7,.2,1);
}
.mask-reveal.is-in { clip-path: inset(0 0 0 0); }
.mask-reveal--vertical { clip-path: inset(100% 0 0 0); }
.mask-reveal--vertical.is-in { clip-path: inset(0 0 0 0); }

/* ---- Side decoration on right margin (PC only) ---- */
.story-section { position: relative; }
@media (min-width: 1100px) {
  .story-section[data-deco]::after {
    content: attr(data-deco);
    position: absolute;
    top: 50%;
    right: clamp(20px, 3vw, 56px);
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 12px;
    letter-spacing: 0.5em;
    color: var(--ink-3);
    white-space: nowrap;
    opacity: 0.55;
    pointer-events: none;
  }
  .story-section[data-deco-italic]::before {
    content: attr(data-deco-italic);
    position: absolute;
    top: 10%;
    right: clamp(40px, 5vw, 90px);
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.6vw, 52px);
    color: var(--ink-3);
    opacity: 0.22;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
    z-index: 0;
    letter-spacing: 0;
  }
  .story-inner { position: relative; z-index: 1; }
}

/* ---- Marquee ---- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  background: var(--bg);
  position: relative;
}
.marquee--ink { background: var(--ink); border-color: rgba(255,255,255,0.18); }
.marquee--ink .marquee__item { color: rgba(255,255,255,0.86); }
.marquee--ink .marquee__item::after { color: var(--sky); }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
  white-space: nowrap;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--ink-2);
  letter-spacing: 0.08em;
}
.marquee__item::after {
  content: "✦";
  margin-left: 28px;
  color: var(--sky-d);
  font-style: normal;
  font-size: 0.7em;
}
@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---- Magnetic hover ---- */
.magnet {
  transition: transform 0.32s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* ---- Pull-quote ---- */
.story-pullquote {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink);
  max-width: 760px;
  margin: clamp(36px, 5vw, 64px) auto;
  text-align: center;
  text-wrap: balance;
  position: relative;
}
.story-pullquote::before,
.story-pullquote::after {
  content: "";
  display: block;
  margin: clamp(14px, 2vw, 24px) auto;
  width: 56px;
  height: 1px;
  background: var(--ink-2);
  opacity: 0.4;
}

/* ---- Vertical word rail ---- */
.vertical-rail {
  display: none;
}
@media (min-width: 1200px) {
  .vertical-rail {
    display: block;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: "Bebas Neue", sans-serif;
    font-size: 11px;
    letter-spacing: 0.5em;
    color: var(--ink-3);
    opacity: 0.7;
    z-index: 5;
    pointer-events: none;
  }
  .hero .vertical-rail,
  .ph-hero .vertical-rail { color: rgba(255,255,255,0.7); }
}

/* ---- Video embed frame ---- */
.video-frame {
  margin: clamp(28px, 4vw, 48px) auto 0;
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
  width: 100%;
  max-width: 1280px;
}
.video-frame__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: transparent;
  overflow: hidden;
}
.video-frame__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: transparent;
}
.video-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, #2c2326 0, #2c2326 12px, #221a1d 12px, #221a1d 24px);
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: clamp(20px, 4vw, 40px);
  gap: 10px;
  z-index: 0;
}
.video-frame__placeholder::before {
  content: "▶  VIDEO PLACEHOLDER";
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.4em;
  color: var(--sky);
  margin-bottom: 6px;
}
.video-frame__placeholder strong {
  font-weight: 700;
  font-size: clamp(15px, 2vw, 22px);
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.video-frame__placeholder span {
  font-size: clamp(12px, 1.3vw, 15px);
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
}
.video-frame__player .video-frame__media { z-index: 1; }
.video-frame__caption { display: none; }

/* ---- Academy feature grid ---- */
.academy-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
@media (min-width: 600px) {
  .academy-features { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 900px) {
  .academy-features { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1280px) {
  .academy-features { grid-template-columns: repeat(5, 1fr); gap: 16px; }
}
.academy-feature {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.academy-feature__image {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(
      45deg,
      #d8d6d3 0,
      #d8d6d3 10px,
      #cfccc9 10px,
      #cfccc9 20px
    );
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  text-align: center;
  padding: 12px;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
}
.academy-feature__image::before {
  content: "IMAGE";
  font-family: "Bebas Neue", sans-serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--sky-d);
}
.academy-feature__image-note {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.academy-feature__body {
  padding: clamp(18px, 2.2vw, 24px);
}
.academy-feature__num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--sky-d);
  margin-bottom: 10px;
}
.academy-feature__title {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 8px;
  text-wrap: balance;
}
.academy-feature__desc {
  font-size: clamp(12.5px, 1.3vw, 14px);
  color: var(--ink-2);
  line-height: 1.8;
}

/* ---- Photo-block monochrome variant ---- */
.photo-block--mono .photo-block__bg {
  filter: grayscale(1) contrast(1.05) brightness(0.94);
}

/* ---- Image placeholder ---- */
.image-placeholder {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      #d8d6d3 0,
      #d8d6d3 12px,
      #cfccc9 12px,
      #cfccc9 24px
    );
  color: var(--ink-2);
  text-align: center;
  padding: clamp(36px, 7vw, 72px) clamp(20px, 6vw, 64px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Noto Sans JP", sans-serif;
}
.image-placeholder::before {
  content: "PLACEHOLDER IMAGE";
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--sky-d);
  margin-bottom: 8px;
}
.image-placeholder__title {
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-wrap: balance;
}
.image-placeholder__desc {
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 520px;
  letter-spacing: 0.03em;
}
.image-placeholder--wide { padding: clamp(56px, 10vw, 110px) clamp(20px, 6vw, 64px); }
.image-placeholder--square { aspect-ratio: 1 / 1; padding: 24px; }
.image-placeholder--portrait { aspect-ratio: 3 / 4; padding: 24px; }

/* ---- Image float ---- */
.card { transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease; }
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(27,19,22,0.32);
}

/* ---- Responsive fine-tune ---- */
@media (max-width: 360px) {
  :root {
    --side-pad: 16px;
  }
  .story-title { font-size: clamp(22px, 7.6vw, 30px); line-height: 1.28; }
  .story-sub   { font-size: 13.5px; line-height: 1.85; }
  .chapter     { font-size: 10.5px; letter-spacing: 0.26em; gap: 8px; }
  .chapter__num { font-size: 10px; padding: 3px 8px; }
  .hero__title { font-size: clamp(34px, 13vw, 56px); }
  .hero__sub   { font-size: 13px; }
  .ph-hero__title { font-size: clamp(28px, 9vw, 44px); }
  .card__title { font-size: clamp(20px, 6vw, 26px); }
  .card__line  { font-size: 12.5px; }
  .final-cta__title { font-size: clamp(28px, 8vw, 38px); }
  .marquee__item { font-size: 14px; padding: 0 18px; }
  .marquee__item::after { margin-left: 18px; }
  .readmore { padding: 10px 18px; font-size: 12px; }
}

@media (min-width: 361px) and (max-width: 599px) {
  .story-title { font-size: clamp(24px, 7vw, 38px); line-height: 1.25; }
  .story-sub   { font-size: 14.5px; line-height: 1.9; }
  .marquee__item { font-size: 15px; padding: 0 22px; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .story-section { padding: clamp(56px, 9vw, 96px) clamp(32px, 6vw, 64px); }
  .story-inner   { max-width: 720px; }
  .story-title   { font-size: clamp(30px, 5.4vw, 50px); }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .story-inner { max-width: 800px; }
}

@media (min-width: 1400px) {
  .story-inner { max-width: 1040px; }
  .story-title { font-size: clamp(40px, 4.6vw, 80px); }
  .story-sub   { font-size: clamp(17px, 1.4vw, 20px); max-width: 720px; }
}

@media (min-width: 1800px) {
  :root { --side-pad: clamp(120px, 8vw, 200px); }
  .story-inner { max-width: 1120px; }
}


/* ============================================================
   DEFAULT PAGE TEMPLATE (page.php)
   ============================================================ */

.page-hero {
  padding: clamp(120px, 16vw, 200px) var(--side-pad, clamp(20px, 5vw, 60px)) clamp(48px, 6vw, 80px);
  background: #b496801a;
  text-align: center;
}
.page-hero__inner {
  max-width: 800px;
  margin: 0 auto;
}
.page-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink, #000);
  line-height: 1.3;
}
.page-hero__title span  {
  font-size: 50%;
  display: block;
  line-height: 1.0;
  margin-top: 1.8em;
}
.page-hero__title::before {
  content: "IBRO GROUP RECRUITING";
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--sky-d);
  margin-bottom: 16px;
}

.page-body {
  padding: clamp(48px, 7vw, 96px) var(--side-pad, clamp(20px, 5vw, 60px));
}
.page-body__inner {
  max-width: 800px;
  margin: 0 auto;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.9;
  color: var(--color-ink, #111);
}
.page-body__inner h2 {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  margin: 2em 0 0.8em;
}
.page-body__inner h3 {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  margin: 1.6em 0 0.6em;
}
.page-body__inner p {
  margin: 0 0 1.4em;
}
.page-body__inner a {
  color: var(--color-accent, #b8860b);
  text-decoration: underline;
}


/* ============================================================
   CF7 CONTACT FORM
   ============================================================ */

#utility {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--side-pad, clamp(20px, 5vw, 60px));
}

#form_message {
  margin-bottom: 40px;
  text-align: center;
}
#form_message h3 {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  margin-bottom: 16px;
}
#form_message p {
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--color-ink-muted, #666);
  line-height: 1.8;
}

#form_contact {
  width: 100%;
}
#form_contact dt {
  padding: 20px 0 6px;
}
#form_contact dt p {
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
#form_contact dd {
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin: 0;
}
#form_contact dd:last-child {
  border-bottom: none;
}
#form_contact dd p {
  font-size: clamp(12px, 1.3vw, 14px);
  color: var(--color-ink-muted, #666);
  margin: 4px 0 0;
  line-height: 1.7;
}

.need {
  display: inline-block;
  background: var(--color-accent, #D89996);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--color-ink);
  line-height: 1.6;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-textarea:focus {
  outline: none;
  border-color: var(--color-accent, #b8860b);
  box-shadow: 0 0 0 3px rgba(184,134,11,.15);
}
.wpcf7-form-control.wpcf7-textarea {
  resize: vertical;
  min-height: 140px;
}

.wpcf7-form-control.wpcf7-select,
.select_year {
  padding: 10px 32px 10px 14px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 4px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--color-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s;
}
.wpcf7-form-control.wpcf7-select:focus,
.select_year:focus {
  outline: none;
  border-color: var(--color-accent, #b8860b);
  box-shadow: 0 0 0 3px rgba(184,134,11,.15);
}

#zip {
  max-width: 160px;
}
#address {
  max-width: 100%;
}

#privacy {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 12px 0;
  background: #fafafa;
  font-size: clamp(12px, 1.2vw, 13px);
  line-height: 1.85;
  color: var(--color-ink-muted, #555);
}
#privacy p {
  margin: 0 0 8px;
}

.center {
  text-align: center;
}
.ma_btm20 {
  margin-bottom: 20px;
}

.wpcf7-form-control.wpcf7-acceptance {
  font-size: clamp(14px, 1.4vw, 15px);
}
.wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wpcf7-list-item-label {
  font-size: clamp(14px, 1.4vw, 15px);
  color: var(--color-ink);
}
.wpcf7-list-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent, #b8860b);
  cursor: pointer;
}

.wpcf7-form-control.wpcf7-submit.submit {
  display: block;
  margin: 32px auto 0;
  padding: 16px 48px;
  background: var(--color-ink, #111);
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 700;
  letter-spacing: 0.1em;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.wpcf7-form-control.wpcf7-submit.submit:hover {
  background: #333;
  transform: translateY(-1px);
}
.wpcf7-form-control.wpcf7-submit.submit:active {
  transform: translateY(0);
}

.wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: clamp(13px, 1.3vw, 14px);
  line-height: 1.7;
  text-align: center;
}
.wpcf7-mail-sent-ok .wpcf7-response-output {
  border: 1px solid #4caf50;
  background: #f0faf0;
  color: #2e7d32;
}
.wpcf7-mail-sent-ng .wpcf7-response-output,
.wpcf7-aborted .wpcf7-response-output {
  border: 1px solid #e53935;
  background: #fff5f5;
  color: #c62828;
}
.wpcf7-validation-errors .wpcf7-response-output,
.wpcf7-acceptance-missing .wpcf7-response-output {
  border: 1px solid #f57c00;
  background: #fff8f0;
  color: #e65100;
}
.wpcf7-spam-blocked .wpcf7-response-output {
  border: 1px solid #f57c00;
  background: #fff8f0;
  color: #e65100;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #e53935;
  line-height: 1.5;
}
.wpcf7-form-control.wpcf7-not-valid {
  border-color: #e53935 !important;
}
.recaptchaPolicy	{
 	text-align:center;
 	margin:20px 0 0;
 	font-size:90%;
 }
 .recaptchaPolicy a	{
 	text-decoration:underline;
 }
 .grecaptcha-badge	{
 	display:none !important;
 }

@media (max-width: 600px) {
  #utility {
    padding: 40px 20px 60px;
  }
  .wpcf7-form-control.wpcf7-submit.submit {
    width: 100%;
    padding: 16px 24px;
  }
}