/* =========================================================
   Machida Gear recruiting LP — organized responsive layer
   Legacy visual behavior remains in styles-legacy.css.
   This file is the single final source for layout adjustments.
   Breakpoints: PC 1024+, tablet 768–1023, SP 0–767.
   ========================================================= */

:root {
  --content-wide: 1000px;
  --content-about: 760px;
  --content-training: 1000px;
  --sp-content: 343px;
  --ink: #292929;
  --about-green: #006a43;
  --work-purple: #823647;
  --survey-orange: #ec7930;
  --number-line: #cba36e;
  --line: #383838;
  --welfare-pink: #f79cb9;
  --header-blue: #cfeaf7;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

body {
  position: relative;
  margin: 0;
  touch-action: pan-y;
  color: var(--ink);
  background: #fff !important;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
}

main,
.site-footer,
.hero,
.section,
.photo-marquee {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

main {
  padding-top: 0 !important;
}

img {
  max-width: 100%;
}

.pc-only { display: block !important; }
.sp-only { display: none !important; }
.survey-answer.sp-only { display: none !important; }
.header-entry-pc { display: inline; }
.header-entry-sp { display: none; }

.section,
.section-inner,
.section-heading,
.work-list,
.benefit-grid {
  overflow: visible !important;
}

.section-inner {
  box-sizing: border-box;
  margin-inline: auto !important;
}

.section-en,
.section-heading h2,
.about-copy,
.work-card-copy,
.survey-card,
.benefit-card,
.training-copy,
.section-entry,
.site-footer {
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
}

.section-en {
  font-weight: 700 !important;
  letter-spacing: .13em !important;
}

.section-heading h2 {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 48px));
  min-width: 0 !important;
  min-height: 78px !important;
  padding: 12px 56px !important;
  border: 2px solid var(--line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.section-heading h2::after {
  bottom: -13px !important;
  width: 22px !important;
  height: 22px !important;
  border-right: 2px solid var(--line) !important;
  border-bottom: 2px solid var(--line) !important;
  background: #fff !important;
}

/* Fixed banner: keep every circular icon inside its orange frame. */
.floating-links {
  right: 0 !important;
  bottom: 18px !important;
  width: min(380px, calc(100vw - 12px)) !important;
  height: 94px !important;
  overflow: hidden !important;
  border-width: 4px !important;
  border-right-width: 0 !important;
}

.floating-entry {
  flex: 0 0 140px !important;
  min-width: 0 !important;
}

.floating-social {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.floating-entry,
.floating-social {
  display: grid !important;
  grid-template-rows: 22px 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  height: 100% !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
}

.floating-entry > span,
.floating-social > span {
  align-self: center !important;
  line-height: 1 !important;
}

.floating-entry b,
.floating-social > div {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}

.floating-entry b,
.floating-social a {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
}

.floating-entry svg,
.floating-social svg {
  width: 28px !important;
  height: 28px !important;
}

.heading-accent-about {
  color: var(--about-green) !important;
}

.section-work .section-heading h2,
.section-work .work-card-copy h3 {
  color: var(--work-purple) !important;
}

.work-card-copy .number {
  border-bottom-color: var(--number-line) !important;
}

/* Full-bleed first view */
.hero-media {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: 2560 / 1342 !important;
}

.hero-video-pc,
.hero-image-sp {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero-lead {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: #fff !important;
}

/* Clouds keep a design-sized footprint instead of scaling indefinitely. */
.edge-clouds {
  left: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

.edge-clouds .edge-cloud-left {
  width: min(458px, 43vw) !important;
  max-width: 458px !important;
  height: auto !important;
}

.edge-clouds .edge-cloud-right {
  width: min(467px, 43vw) !important;
  max-width: 467px !important;
  height: auto !important;
}

.section-about .edge-clouds-about { top: -100px !important; }
.section-work .edge-clouds-work { top: -72px !important; }
.section-welfare .edge-clouds-welfare { top: -74px !important; }
.section-training .edge-clouds-training { top: -60px !important; }
.section-entry .edge-clouds-entry { top: -48px !important; }

/* ABOUT — compact centered content, independent PC/SP line breaks. */
.section-about {
  isolation: isolate;
  overflow: visible !important;
  background: #72af58 url("assets/final/bg-about.png") center top / 100% auto repeat-y !important;
}

.section-about::before {
  content: "";
  position: absolute;
  z-index: 1 !important;
  top: -132px !important;
  left: 50% !important;
  width: 142% !important;
  height: 206px !important;
  transform: translateX(-50%) !important;
  border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
  background: #fff !important;
  pointer-events: none;
}

.section-about .section-inner {
  z-index: 3 !important;
  width: min(calc(100% - 48px), 1000px) !important;
}

.section-about .section-heading {
  margin-bottom: 92px !important;
}

.about-grid {
  width: min(100%, var(--content-about)) !important;
  max-width: var(--content-about) !important;
  margin-inline: auto !important;
  justify-content: center !important;
  grid-template-columns: 300px 380px !important;
  gap: 60px !important;
  align-items: center !important;
}

.about-copy h3 {
  margin: 0 0 30px !important;
  font-size: 30px !important;
  line-height: 1.62 !important;
  font-weight: 700 !important;
}

.about-copy p {
  margin: 0 0 28px !important;
  font-size: 14px !important;
  line-height: 1.95 !important;
  font-weight: 500 !important;
}

.about-images {
  width: 380px !important;
  gap: 24px !important;
}

.about-images img {
  display: block;
  width: 100% !important;
  aspect-ratio: 1.72 / 1 !important;
  object-fit: cover !important;
  border: 2px solid var(--line) !important;
  border-radius: 28px !important;
  box-shadow: none !important;
}

/* WORK — 1000px cards with white padding around each photograph. */
.section-work {
  background: #d2ab75 url("assets/final/bg-work.png") center top / 100% auto repeat-y !important;
}

.section-work .section-inner {
  width: min(calc(100% - 48px), 1100px) !important;
  padding-top: 160px !important;
  padding-bottom: 190px !important;
}

.section-work .section-heading {
  margin-bottom: 98px !important;
}

.work-list {
  width: min(100%, var(--content-wide)) !important;
  max-width: var(--content-wide) !important;
  margin-inline: auto !important;
  gap: 32px !important;
}

.work-card,
.work-card-reverse {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1.18fr .82fr !important;
  min-height: 430px !important;
  overflow: visible !important;
  border: 2px solid var(--line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 4px 0 rgba(0,0,0,.16) !important;
}

.work-card-reverse {
  grid-template-columns: .82fr 1.18fr !important;
}

.work-card figure {
  box-sizing: border-box !important;
  min-height: 426px !important;
  margin: 0 !important;
  padding: 24px !important;
  overflow: hidden !important;
}

.work-card figure img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

.work-card-copy {
  padding: 44px 42px !important;
}

.work-card-copy .number {
  font-size: 24px !important;
  font-weight: 700 !important;
}

.work-card-copy h3 {
  font-size: 27px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

.work-card-copy p {
  font-size: 14px !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
}

.work-raijin-pc {
  display: block !important;
  position: absolute !important;
  z-index: 20 !important;
  top: -112px !important;
  right: -26px !important;
  width: 122px !important;
  height: auto !important;
}

.work-raijin-sp {
  display: none !important;
}

/* QUESTIONNAIRE — same-scale dots, curved boundary and paper artwork. */
.section-questionnaire {
  position: relative !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: #ffe142 url("assets/final/bg-questionnaire.png") center top / 100vw auto repeat-y !important;
}

.section-questionnaire::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  top: -128px !important;
  left: 50% !important;
  width: 142% !important;
  height: 190px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
  background-color: #ffe142 !important;
  background-image: url("assets/final/bg-questionnaire.png") !important;
  background-position: center 128px !important;
  background-size: 100vw auto !important;
  background-repeat: repeat-y !important;
  pointer-events: none !important;
}

.section-questionnaire > .questionnaire-boundary-character {
  position: absolute !important;
  z-index: 12 !important;
  top: 10px !important;
  left: calc(50% - 71px) !important;
  width: 142px !important;
  height: auto !important;
}

.section-questionnaire > .section-inner.wide {
  position: relative !important;
  z-index: 3 !important;
  width: min(calc(100% - 48px), 1180px) !important;
  padding-top: 180px !important;
  padding-bottom: 220px !important;
  overflow: visible !important;
}

.section-questionnaire .section-heading {
  margin-bottom: 104px !important;
}

.section-questionnaire .section-heading h2 {
  color: var(--survey-orange) !important;
}

.survey-card {
  position: relative !important;
  z-index: 4 !important;
  box-sizing: border-box !important;
  width: min(100%, 1000px) !important;
  max-width: 1000px !important;
  min-height: 520px !important;
  margin: 0 auto 102px !important;
  padding: 72px 58px 92px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent url("assets/final/survey-paper.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  clip-path: none !important;
  isolation: isolate !important;
}

.survey-card:last-child {
  margin-bottom: 0 !important;
}

/* The legacy stylesheet gave Q2 a hard clip-path. Keep all three cards on
   the supplied paper artwork and anchor their sparkles to the card itself. */
.section-questionnaire .survey-card.survey-card-q2 {
  overflow: visible !important;
  clip-path: none !important;
  border-radius: 0 !important;
  background: transparent url("assets/final/survey-paper.png") center / 100% 100% no-repeat !important;
}

.survey-number-art {
  position: absolute !important;
  z-index: 30 !important;
  top: -29px !important;
  left: 50% !important;
  width: 58px !important;
  height: 58px !important;
  transform: translateX(-50%) !important;
}

.survey-card h3 {
  margin: 0 0 34px !important;
  color: var(--work-purple) !important;
  font-size: 27px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

.survey-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.survey-grid li {
  display: grid !important;
  place-items: center !important;
  min-height: 142px !important;
  padding: 20px 26px !important;
  border-top: 1px solid #4c4a43 !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
  font-weight: 700 !important;
}

.survey-grid li:not(:nth-child(3n + 1)) {
  border-left: 1px solid #4c4a43 !important;
}

.survey-answer {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.survey-accent {
  color: var(--survey-orange) !important;
}

.survey-decor {
  position: absolute !important;
  z-index: 12 !important;
  inset: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.survey-decor .survey-character {
  position: absolute !important;
  z-index: 12 !important;
  width: 106px !important;
  height: auto !important;
}

.section-questionnaire .survey-card:nth-of-type(1) .survey-decor-q1 .survey-character-left {
  left: -42px !important;
  bottom: -42px !important;
  top: auto !important;
}

.section-questionnaire .survey-card:nth-of-type(1) .survey-decor-q1 .survey-character-right {
  right: -24px !important;
  top: -50px !important;
  bottom: auto !important;
}

.section-questionnaire .survey-card:nth-of-type(3) .survey-decor-q3 .survey-character-left {
  left: 12px !important;
  top: -78px !important;
  bottom: auto !important;
}

.section-questionnaire .survey-card:nth-of-type(3) .survey-decor-q3 .survey-character-right {
  right: 12px !important;
  top: -78px !important;
  bottom: auto !important;
}

.questionnaire-stars-final {
  z-index: 5 !important;
  overflow: visible !important;
}

.survey-sparkle {
  position: absolute !important;
  z-index: 10 !important;
  display: block !important;
  width: 64px !important;
  max-width: none !important;
  height: auto !important;
  pointer-events: none !important;
}

.survey-sparkle-q1 {
  right: -58px !important;
  bottom: -76px !important;
}

.survey-sparkle-q2 {
  right: auto !important;
  left: -58px !important;
  bottom: -76px !important;
}

.survey-sparkle-q3 {
  right: -54px !important;
  bottom: -72px !important;
}

/* WELFARE — card-based badge and mascot placement. */
.section-welfare {
  position: relative !important;
  overflow: visible !important;
  background: var(--welfare-pink) url("assets/final/bg-welfare.png") center top / 100% auto repeat-y !important;
}

.section-welfare > .section-inner.wide {
  width: min(calc(100% - 48px), 1100px) !important;
  padding-top: 142px !important;
  padding-bottom: 170px !important;
}

.section-welfare .section-heading {
  width: min(100%, 1000px) !important;
  margin: 0 auto 150px !important;
}

.section-welfare .section-heading h2 {
  color: #d52f2f !important;
}

.section-welfare .section-lead {
  margin-top: 34px !important;
  font-weight: 700 !important;
}

.section-welfare .welfare-character {
  position: absolute !important;
  z-index: 40 !important;
  top: -165px !important;
  left: 18px !important;
  width: 84px !important;
  max-width: none !important;
  height: auto !important;
  pointer-events: none !important;
}

.benefit-card,
.benefit-card-wide {
  position: relative !important;
  overflow: visible !important;
  border: 2px solid var(--line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.benefit-card-wide {
  width: min(100%, 1000px) !important;
  max-width: 1000px !important;
  min-height: 430px !important;
  margin: 0 auto 72px !important;
  grid-template-columns: 1.08fr .92fr !important;
}

.benefit-grid {
  width: min(100%, 1000px) !important;
  max-width: 1000px !important;
  margin-inline: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 32px !important;
}

.benefit-card figure,
.benefit-card-wide figure {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 24px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.benefit-card figure img,
.benefit-card-wide figure img {
  display: block !important;
  width: 100% !important;
  height: 286px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

.benefit-card-wide figure img {
  height: 100% !important;
  min-height: 378px !important;
}

.benefit-card > div {
  position: static !important;
  padding: 12px 32px 38px !important;
}

.benefit-card-wide > div {
  display: grid !important;
  align-content: center !important;
  padding: 50px 44px !important;
}

.section-welfare .benefit-number-art {
  position: absolute !important;
  z-index: 22 !important;
  top: -38px !important;
  left: 50% !important;
  width: 76px !important;
  height: 76px !important;
  transform: translateX(-50%) !important;
}

.benefit-card h3 {
  margin-bottom: 20px !important;
  font-size: 23px !important;
  line-height: 1.5 !important;
}

.benefit-card p {
  font-size: 13px !important;
  line-height: 1.85 !important;
  font-weight: 400 !important;
}

/* TRAINING */
.section-training {
  position: relative !important;
  overflow: visible !important;
  background: #9bdced url("assets/final/bg-training.png") center top / 100% auto repeat-y !important;
}

.section-training::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  top: -130px !important;
  left: 50% !important;
  width: 142% !important;
  height: 220px !important;
  transform: translateX(-50%) !important;
  border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
  background: var(--welfare-pink) !important;
  pointer-events: none !important;
}

.training-character {
  position: absolute !important;
  z-index: 24 !important;
  top: 16px !important;
  left: calc(50% - 54px) !important;
  width: 108px !important;
  max-width: none !important;
}

.section-training .section-inner {
  z-index: 3 !important;
  width: min(calc(100% - 48px), 1100px) !important;
  padding-top: 230px !important;
  padding-bottom: 190px !important;
}

.section-training .section-heading {
  margin-bottom: 76px !important;
}

.section-training .section-heading h2 {
  width: min(760px, calc(100vw - 48px)) !important;
  color: #328b4d !important;
}

.training-grid {
  width: min(100%, var(--content-training)) !important;
  max-width: var(--content-training) !important;
  margin-inline: auto !important;
  grid-template-columns: .98fr 1.02fr !important;
  gap: 62px !important;
}

.training-visual {
  min-height: 390px !important;
}

.training-copy h3 {
  font-size: 32px !important;
  line-height: 1.45 !important;
}

.training-copy p {
  font-size: 14px !important;
  line-height: 1.85 !important;
  font-weight: 450 !important;
}

/* ENTRY and footer */
.section-entry {
  position: relative !important;
  overflow: visible !important;
  background: #ffda35 url("assets/final/bg-entry.png") center top / 100% auto repeat-y !important;
  border-radius: 0 !important;
}

.section-entry::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -120px;
  left: 50%;
  width: 142%;
  height: 190px;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #ffda35 url("assets/final/bg-entry.png") center 120px / 100vw auto repeat-y;
  pointer-events: none;
}

.entry-characters {
  position: relative !important;
  z-index: 20 !important;
  min-height: 0 !important;
  margin-top: -130px !important;
  padding: 0 24px !important;
}

.entry-character-group {
  display: block !important;
  width: min(650px, 68vw) !important;
  max-width: 650px !important;
  max-height: none !important;
  object-fit: contain !important;
}

.section-entry .section-inner.narrow {
  position: relative !important;
  z-index: 4 !important;
  width: min(calc(100% - 48px), 760px) !important;
  padding-top: 34px !important;
  padding-bottom: 118px !important;
}

.section-entry p {
  font-weight: 500 !important;
}

.site-footer {
  padding-top: 58px !important;
}

.site-footer img {
  width: min(250px, 70vw) !important;
}

/* =========================================================
   Desktop — 1024px and wider
   ========================================================= */
@media (min-width: 1024px) {
  main {
    padding-top: 88px !important;
  }

  .site-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 88px !important;
    padding: 10px max(30px, calc((100vw - 1220px) / 2)) !important;
    transform: none !important;
    border-radius: 0 !important;
    background: var(--header-blue) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transition: background-color .28s ease !important;
  }

  .site-header.is-visible {
    background: transparent !important;
  }

  .desktop-nav {
    flex: 0 1 860px !important;
    margin-left: auto !important;
  }

  .section-about .section-inner {
    padding-top: 160px !important;
    padding-bottom: 150px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  .work-raijin-pc {
    right: 4px !important;
  }
}

/* =========================================================
   Tablet — 768px through 1023px
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  main {
    padding-top: 82px !important;
  }

  .site-header {
    width: 100% !important;
    max-width: none !important;
    background: var(--header-blue) !important;
  }

  .section-heading h2 {
    width: min(620px, calc(100vw - 48px));
  }

  .about-grid {
    grid-template-columns: minmax(260px, 300px) minmax(330px, 380px) !important;
    gap: 40px !important;
  }

  .work-card-copy {
    padding-inline: 28px !important;
  }

  .survey-card {
    width: min(100%, 940px) !important;
    padding-inline: 38px !important;
  }

  .survey-grid li {
    padding-inline: 14px !important;
    font-size: 15px !important;
  }

  .section-welfare .welfare-character {
    top: -158px !important;
    left: 16px !important;
    width: 80px !important;
  }
}

/* =========================================================
   Smartphone — 767px and narrower
   ========================================================= */
@media (max-width: 767px) {
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }
  .survey-answer.pc-only { display: none !important; }
  .survey-answer.sp-only { display: block !important; }

  main {
    padding-top: 64px !important;
  }

  /* SP header is always visible: logo, orange entry circle, white menu circle. */
  .site-header {
    inset: 0 0 auto 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 6px 126px 6px 12px !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: var(--header-blue) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transition: background-color .28s ease !important;
  }

  .site-header.is-visible {
    background: transparent !important;
  }

  .site-header .site-logo {
    display: block !important;
    flex: 0 1 min(185px, calc(100vw - 144px)) !important;
    min-width: 0 !important;
  }

  .site-header .site-logo img {
    display: block !important;
    width: min(185px, calc(100vw - 144px)) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .site-header .header-entry {
    position: fixed !important;
    top: 6px !important;
    right: 62px !important;
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: #f58200 !important;
    background-image: none !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  .header-entry-pc { display: none !important; }
  .header-entry-sp { display: block !important; }

  .site-header .menu-button {
    position: fixed !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 201 !important;
    display: grid !important;
    grid-template-rows: repeat(3, 3px) !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 5px !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important;
  }

  .site-header .menu-button span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: #202020 !important;
    transform-origin: center !important;
    transition: transform .25s ease, opacity .2s ease !important;
  }

  .site-header .menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }

  .site-header .menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
  }

  .site-header .menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  .mobile-menu {
    top: 64px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-media {
    aspect-ratio: 1342 / 1332 !important;
  }

  .hero-lead {
    padding: 54px 18px 76px !important;
    font-size: 15px !important;
  }

  .section-inner,
  .section-inner.wide,
  .section-inner.narrow {
    width: min(calc(100% - 32px), var(--sp-content)) !important;
  }

  .section-en {
    font-size: 20px !important;
  }

  .section-heading h2 {
    width: 100% !important;
    min-height: 50px !important;
    padding: 8px 24px !important;
    font-size: 20px !important;
  }

  .section-heading h2::after {
    bottom: -10px !important;
    width: 16px !important;
    height: 16px !important;
  }

  .edge-clouds .edge-cloud-left,
  .edge-clouds .edge-cloud-right {
    width: 54vw !important;
    max-width: 230px !important;
  }

  .edge-clouds .edge-cloud-left {
    left: -18.5vw !important;
  }

  .edge-clouds .edge-cloud-right {
    right: -18.5vw !important;
  }

  .section-about .edge-clouds-about { top: -40px !important; }
  .section-work .edge-clouds-work { top: -26px !important; }
  .section-welfare .edge-clouds-welfare { top: -27px !important; }
  .section-training .edge-clouds-training { top: -18px !important; }
  .section-entry .edge-clouds-entry { top: -16px !important; }

  .section-about::before {
    top: -54px !important;
    width: 172% !important;
    height: 96px !important;
  }

  .section-about .section-inner {
    width: min(calc(100% - 32px), var(--sp-content)) !important;
    padding-top: 94px !important;
    padding-bottom: 94px !important;
  }

  .section-about .section-heading {
    margin-bottom: 58px !important;
  }

  .about-grid {
    width: min(100%, 310px) !important;
    max-width: 310px !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .about-copy h3 {
    margin-bottom: 30px !important;
    font-size: 23px !important;
    line-height: 1.72 !important;
  }

  .about-copy p {
    margin-bottom: 28px !important;
    font-size: 16px !important;
    line-height: 1.92 !important;
  }

  .about-images {
    width: 310px !important;
    max-width: 100% !important;
    gap: 20px !important;
  }

  .about-images img {
    border-radius: 24px !important;
  }

  .photo-track img {
    width: 72vw !important;
    max-width: none !important;
    min-width: 270px !important;
    height: 182px !important;
  }

  .section-work .section-inner {
    width: min(calc(100% - 32px), var(--sp-content)) !important;
    padding-top: 136px !important;
    padding-bottom: 126px !important;
  }

  .section-work .section-heading {
    position: relative !important;
    margin-bottom: 38px !important;
  }

  .work-raijin-pc {
    display: none !important;
  }

  .work-raijin-sp {
    display: block !important;
    position: absolute !important;
    z-index: 24 !important;
    top: -112px !important;
    left: calc(50% - 46px) !important;
    width: 92px !important;
    height: auto !important;
    margin: 0 !important;
  }

  .work-list {
    width: 100% !important;
    gap: 26px !important;
  }

  .work-card,
  .work-card-reverse {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-width: 2px !important;
    border-radius: 22px !important;
  }

  .work-card-reverse figure {
    order: 0 !important;
  }

  .work-card figure {
    min-height: 0 !important;
    padding: 16px 16px 0 !important;
  }

  .work-card figure img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.48 / 1 !important;
  }

  .work-card-copy {
    padding: 18px 18px 30px !important;
  }

  .work-card-copy .number {
    font-size: 23px !important;
  }

  .work-card-copy h3 {
    margin-bottom: 22px !important;
    font-size: 23px !important;
  }

  .work-card-copy p {
    font-size: 15px !important;
    line-height: 1.9 !important;
  }

  .section-questionnaire::before {
    top: -52px !important;
    width: 176% !important;
    height: 78px !important;
    background-size: 100vw auto !important;
    background-position: center 52px !important;
  }

  .section-questionnaire > .questionnaire-boundary-character {
    top: 6px !important;
    left: calc(50% - 47px) !important;
    width: 94px !important;
  }

  .section-questionnaire > .section-inner.wide {
    width: min(calc(100% - 32px), var(--sp-content)) !important;
    max-width: var(--sp-content) !important;
    padding-top: 140px !important;
    padding-bottom: 112px !important;
  }

  .section-questionnaire .section-heading {
    margin-bottom: 66px !important;
  }

  .section-questionnaire .section-heading h2 {
    min-height: 50px !important;
    padding: 8px 18px !important;
    font-size: 19px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  .section-questionnaire .survey-card {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto 64px !important;
    padding: 56px 20px 82px !important;
    aspect-ratio: 715 / 1319 !important;
    background: transparent url("assets/final/survey-paper-sp.png") center / 100% 100% no-repeat !important;
    background-size: 100% 100% !important;
  }

  .section-questionnaire .survey-card.survey-card-q2 {
    padding: 50px 20px 58px !important;
    aspect-ratio: 715 / 1102 !important;
    background: transparent url("assets/final/survey-paper-sp-02.png") center / 100% 100% no-repeat !important;
  }

  .section-questionnaire .survey-card.survey-card-q2 .survey-grid li {
    padding-block: 12px !important;
  }

  .section-questionnaire .survey-card.survey-card-q3 {
    padding-top: 82px !important;
  }

  .section-questionnaire .survey-card h3 {
    width: min(100%, 250px) !important;
    margin: 0 auto 22px !important;
    font-size: 19px !important;
    line-height: 1.48 !important;
  }

  .section-questionnaire .survey-number-art {
    top: -23px !important;
    width: 46px !important;
    height: 46px !important;
  }

  .section-questionnaire .survey-grid-3 {
    grid-template-columns: 1fr !important;
  }

  .section-questionnaire .survey-grid li {
    display: block !important;
    min-height: 0 !important;
    padding: 15px 0 !important;
    border-top: 1px solid #4c4a43 !important;
    border-left: 0 !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    text-align: left !important;
  }

  .survey-answer {
    text-align: left !important;
  }

  .survey-decor .survey-character {
    width: 70px !important;
  }

  .section-questionnaire .survey-card:nth-of-type(1) .survey-decor-q1 .survey-character-left {
    left: -7px !important;
    bottom: -64px !important;
    top: auto !important;
  }

  .section-questionnaire .survey-card:nth-of-type(1) .survey-decor-q1 .survey-character-right {
    right: -2px !important;
    top: -38px !important;
  }

  .section-questionnaire .survey-card:nth-of-type(3) .survey-decor-q3 .survey-character-left {
    left: -4px !important;
    top: -66px !important;
  }

  .section-questionnaire .survey-card:nth-of-type(3) .survey-decor-q3 .survey-character-right {
    right: -2px !important;
    top: -66px !important;
  }

  .survey-sparkle {
    width: 42px !important;
  }

  .survey-sparkle-q1 {
    right: -7px !important;
    bottom: -54px !important;
  }

  .survey-sparkle-q2 {
    display: none !important;
  }

  .survey-sparkle-q3 {
    right: -7px !important;
    bottom: -62px !important;
  }

  .hotel-track img {
    width: 84vw !important;
    min-width: 270px !important;
    max-width: none !important;
    height: 170px !important;
  }

  .section-welfare > .section-inner.wide {
    width: min(calc(100% - 32px), var(--sp-content)) !important;
    padding-top: 94px !important;
    padding-bottom: 118px !important;
  }

  .section-welfare .section-heading {
    width: 100% !important;
    margin-bottom: 126px !important;
  }

  .section-welfare .section-lead {
    margin-top: 38px !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

  .section-welfare .welfare-character {
    z-index: 40 !important;
    top: -115px !important;
    left: 14px !important;
    width: 58px !important;
  }

  .benefit-card-wide,
  .benefit-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .benefit-card-wide {
    min-height: 0 !important;
    margin-bottom: 76px !important;
  }

  .benefit-grid {
    gap: 76px !important;
  }

  .benefit-card figure,
  .benefit-card-wide figure {
    padding: 14px 14px 0 !important;
  }

  .benefit-card figure img,
  .benefit-card-wide figure img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.46 / 1 !important;
  }

  .benefit-card > div,
  .benefit-card-wide > div {
    display: block !important;
    padding: 24px 18px 30px !important;
  }

  .section-welfare .benefit-number-art {
    top: -33px !important;
    width: 66px !important;
    height: 66px !important;
  }

  .benefit-card h3 {
    font-size: 20px !important;
    line-height: 1.55 !important;
  }

  .benefit-card p {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

  .section-training::before {
    top: -58px !important;
    width: 174% !important;
    height: 106px !important;
  }

  .training-character {
    z-index: 24 !important;
    top: 6px !important;
    left: calc(50% - 41px) !important;
    width: 82px !important;
  }

  .section-training .section-inner {
    width: min(calc(100% - 32px), var(--sp-content)) !important;
    padding-top: 160px !important;
    padding-bottom: 122px !important;
  }

  .section-training .section-heading {
    margin-bottom: 58px !important;
  }

  .section-training .section-heading h2 {
    width: 100% !important;
  }

  .training-grid {
    width: min(100%, 310px) !important;
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }

  .training-visual {
    min-height: 0 !important;
  }

  .training-copy h3 {
    font-size: 27px !important;
  }

  .training-copy p {
    font-size: 16px !important;
    line-height: 1.9 !important;
    font-weight: 400 !important;
  }

  .section-entry::before {
    top: -52px !important;
    width: 174% !important;
    height: 88px !important;
    background-position: center 52px !important;
  }

  .entry-characters {
    z-index: 20 !important;
    margin-top: -76px !important;
    padding-inline: 0 !important;
  }

  .entry-character-group {
    width: 96% !important;
    max-width: none !important;
  }

  .section-entry .section-inner.narrow {
    width: min(calc(100% - 32px), var(--sp-content)) !important;
    padding-top: 28px !important;
    padding-bottom: 84px !important;
  }

  .entry-copy-sp {
    width: min(100%, 280px) !important;
    margin-inline: auto !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
  }

  .site-footer {
    padding-top: 46px !important;
  }

  .site-footer img {
    width: min(210px, 64vw) !important;
  }

  .site-footer address {
    font-size: 14px !important;
    line-height: 1.95 !important;
  }

  .floating-links {
    right: 0 !important;
    bottom: 12px !important;
    width: min(296px, calc(100vw - 8px)) !important;
    height: 76px !important;
    transform: none !important;
    transform-origin: right bottom !important;
    border-width: 3px !important;
    border-right-width: 0 !important;
  }

  .floating-entry {
    flex: 0 0 106px !important;
  }

  .floating-entry,
  .floating-social {
    grid-template-rows: 18px 1fr !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
  }

  .floating-social > div {
    gap: 6px !important;
  }

  .floating-entry b,
  .floating-social a {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .floating-entry svg,
  .floating-social svg {
    width: 23px !important;
    height: 23px !important;
  }
}

@media (max-width: 340px) {
  .section-questionnaire .survey-card {
    padding: 48px 20px 68px !important;
  }

  .section-questionnaire .survey-card.survey-card-q3 {
    padding-top: 64px !important;
  }

  .section-questionnaire .survey-card h3 {
    margin-bottom: 16px !important;
  }

  .section-questionnaire .survey-grid li {
    padding-block: 10px !important;
    font-size: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-slide,
  .bounce-on-view {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}