/* ========================================
   Portfolio Site - Compiled CSS
   Source: scss/style.scss (Figma node 2366-4001)
   ======================================== */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  color: #3a352f;
  background-color: #f7f5ee;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

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

.l-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 768px) {
  .l-container {
    padding-inline: 48px;
  }
}

.l-section {
  padding-block: 80px;
}

@media (min-width: 768px) {
  .l-section {
    padding-block: 120px;
  }
}

/* Components */
.c-section-label {
  display: block;
  margin-bottom: 12px;
  font-family: "Allura", cursive;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1;
  color: #b8a99a;
}

.c-section-title {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-weight: 400;
  line-height: 1.3;
  color: #3a352f;
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-section-title--center {
  text-align: center;
}

.c-section-title--light {
  color: #ffffff;
}

.c-ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 14px 32px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid #ffffff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-ghost-button:hover {
  background-color: #ffffff;
  color: #3a352f;
}

.c-view-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap 0.3s ease, opacity 0.3s ease;
}

.c-view-more:hover {
  gap: 12px;
  opacity: 0.8;
}

.c-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  cursor: pointer;
}

.c-scroll-indicator__text {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

.c-scroll-indicator__line {
  width: 1px;
  height: 48px;
  background-color: #ffffff;
}

.c-text-image,
.c-skill-card__text-image,
.c-faq-item__text-image,
.c-story__text-image,
.c-why__text-image,
.c-work-item__text-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.c-project-number {
  display: block;
  margin-bottom: 8px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a8b7c;
}

.c-works-subtitle {
  margin-bottom: 8px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: #9a8b7c;
}

.c-works-lead {
  margin-bottom: 64px;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
  color: #3a352f;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 80px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  background-color: rgba(247, 245, 238, 0.96);
  box-shadow: 0 1px 0 #d9d4cc;
}

.site-header.is-scrolled .site-header__logo,
.site-header.is-scrolled .site-header__nav-link {
  color: #3a352f;
}

.site-header.is-scrolled .site-header__nav-link--contact {
  border-color: rgba(58, 53, 47, 0.55);
}

.site-header.is-scrolled .site-header__nav-link--contact:hover {
  background-color: rgba(58, 53, 47, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-header__logo {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-header__nav-link {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.site-header__nav-link:hover {
  opacity: 0.7;
}

.site-header__nav-link--contact {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  line-height: 1;
  opacity: 1;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.site-header__nav-link--contact:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__bg::after {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  padding-top: 80px;
}

.hero__content {
  max-width: 1120px;
  margin-inline: auto;
  padding-top: 14vh;
  padding-left: 32%;
  color: #3d3832;
}

.hero__catch {
  margin-left: 0;
  margin-bottom: 48px;
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #3d3832;
}

.hero__career {
  max-width: 420px;
}

.hero__career-lines {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3d3832;
}

.hero__career-next {
  margin-top: 28px;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3d3832;
}

.hero__sub {
  margin-top: 24px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(61, 56, 50, 0.65);
}

.hero__cta-btn {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 24px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f7f5ee;
  background-color: #4a4540;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.hero__cta-btn:hover {
  opacity: 0.88;
  background-color: #3d3832;
}

/* MY STORY */
.my-story {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 728;
  min-height: 728px;
  overflow: hidden;
}

.my-story__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.my-story__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.my-story__panel {
  position: absolute;
  top: 6.6%;
  left: 4.7%;
  z-index: 2;
  width: 50.8%;
  max-width: 520px;
  padding: 32px 40px 0;
  background: none;
}

.my-story__panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  bottom: -12px;
  left: -16px;
  right: -64px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.82) 22%,
    rgba(255, 255, 255, 0.58) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.my-story__title {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(72px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a352f;
}

.my-story__title-line {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: calc(16px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.my-story__lead {
  margin-top: 22px;
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #3a352f;
}

.my-story__divider {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 16px;
  background-color: rgba(58, 53, 47, 0.18);
}

.my-story__body {
  margin-top: 16px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(58, 53, 47, 0.85);
}

.my-story__body > p + p {
  margin-top: 0.8em;
}

.my-story__list {
  margin-top: 0.8em;
}

.my-story__list p {
  margin: 0;
  line-height: 1.7;
}

.my-story__list p + p {
  margin-top: 0.1em;
}

.my-story__list + p {
  margin-top: 0.8em;
}

@media (min-width: 1440px) {
  .my-story__title {
    font-size: 72px;
  }

  .my-story__title-line {
    margin-top: 16px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .my-story__title {
    font-size: 51px;
  }

  .my-story__title-line {
    margin-top: 11px;
  }
}

/* CAREER — Shared layout (1440 × 621px, HOTELIER基準) */
.career-section {
  width: 100%;
  min-height: calc(621px * 100vw / 1440);
  overflow: visible;
}

.career-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(621px * 100vw / 1440);
  height: auto;
}

@media (min-width: 1440px) {
  .career-section {
    min-height: 621px;
  }

  .career-section__grid {
    min-height: 621px;
  }
}

.career-hotelier__skills,
.career-tv-crew__skills,
.career-people-organization__skills,
.career-writer__skills {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.career-hotelier__skill,
.career-tv-crew__skill,
.career-people-organization__skill,
.career-writer__skill {
  min-width: 0;
}

.career-hotelier__skill-label,
.career-tv-crew__skill-label,
.career-people-organization__skill-label,
.career-writer__skill-label {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 768px) {
  .career-hotelier__skills,
  .career-tv-crew__skills,
  .career-people-organization__skills,
  .career-writer__skills {
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }

  .career-hotelier__skill-label,
  .career-tv-crew__skill-label,
  .career-people-organization__skill-label,
  .career-writer__skill-label {
    font-size: clamp(10px, 2.8vw, 11px);
    letter-spacing: 0.08em;
    line-height: 1.35;
  }
}

/* CAREER — HOTELIER */
.career-hotelier__visual {
  position: relative;
  overflow: hidden;
}

.career-hotelier__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% 38%;
  filter: none;
  image-rendering: auto;
}

.career-hotelier__content {
  display: flex;
  align-items: flex-start;
  background-color: #f6f3ee;
}

.career-hotelier__inner {
  width: 100%;
  padding-top: calc(59px * 100vw / 1440);
  padding-right: calc(65px * 100vw / 1440);
  padding-bottom: calc(48px * 100vw / 1440);
  padding-left: calc(130px * 100vw / 1440);
}

.career-hotelier__title {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(72px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a352f;
}

.career-hotelier__title-line {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(16px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.career-hotelier__accent {
  margin-top: calc(20px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(38px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: #b8a99a;
}

.career-hotelier__hook {
  margin-top: calc(8px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(20px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #3a352f;
}

.career-hotelier__body {
  margin-top: calc(26px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(14px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(58, 53, 47, 0.88);
}

.career-hotelier__divider {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(36px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.career-hotelier__skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32px * 100vw / 1440);
  max-width: calc(480px * 100vw / 1440);
  margin-top: calc(32px * 100vw / 1440);
  padding: 0;
  list-style: none;
}

.career-hotelier__skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.career-hotelier__skill-icon {
  width: calc(48px * 100vw / 1440);
  height: calc(48px * 100vw / 1440);
}

.career-hotelier__skill-label {
  margin-top: calc(12px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(11px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c9a94;
}

@media (min-width: 1440px) {
  .career-hotelier__inner {
    padding: 59px 65px 48px 130px;
  }

  .career-hotelier__title {
    font-size: 72px;
  }

  .career-hotelier__title-line {
    max-width: 420px;
    margin-top: 16px;
  }

  .career-hotelier__accent {
    margin-top: 20px;
    font-size: 38px;
  }

  .career-hotelier__hook {
    margin-top: 8px;
    font-size: 20px;
  }

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

  .career-hotelier__divider {
    max-width: 420px;
    margin-top: 36px;
  }

  .career-hotelier__skills {
    gap: 32px;
    max-width: 480px;
    margin-top: 32px;
  }

  .career-hotelier__skill-icon {
    width: 48px;
    height: 48px;
  }

  .career-hotelier__skill-label {
    margin-top: 12px;
    font-size: 11px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .career-hotelier__inner {
    padding: 42px 46px 34px 103px;
  }

  .career-hotelier__title {
    font-size: 51px;
  }

  .career-hotelier__title-line {
    max-width: 299px;
    margin-top: 11px;
  }

  .career-hotelier__accent {
    margin-top: 14px;
    font-size: 27px;
  }

  .career-hotelier__hook {
    margin-top: 6px;
    font-size: 14px;
  }

  .career-hotelier__body {
    margin-top: 18px;
    font-size: 14px;
  }

  .career-hotelier__divider {
    max-width: 299px;
    margin-top: 26px;
  }

  .career-hotelier__skills {
    gap: 23px;
    max-width: 342px;
    margin-top: 23px;
  }

  .career-hotelier__skill-icon {
    width: 34px;
    height: 34px;
  }

  .career-hotelier__skill-label {
    margin-top: 9px;
    font-size: 10px;
  }
}

/* CAREER — TV CREW */
.career-tv-crew__content {
  display: flex;
  align-items: flex-start;
  background-color: #f6f3ee;
}

.career-tv-crew__inner {
  width: 100%;
  padding-top: calc(59px * 100vw / 1440);
  padding-right: calc(65px * 100vw / 1440);
  padding-bottom: calc(48px * 100vw / 1440);
  padding-left: calc(130px * 100vw / 1440);
}

.career-tv-crew__visual {
  position: relative;
  overflow: hidden;
}

.career-tv-crew__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% center;
  filter: none;
  image-rendering: auto;
}

.career-tv-crew__title {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(72px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a352f;
}

.career-tv-crew__title-line {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(16px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.career-tv-crew__accent {
  margin-top: calc(20px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(38px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: #b8a99a;
}

.career-tv-crew__hook {
  margin-top: calc(8px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(20px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #3a352f;
}

.career-tv-crew__body {
  margin-top: calc(26px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(14px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(58, 53, 47, 0.88);
}

.career-tv-crew__divider {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(36px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.career-tv-crew__skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32px * 100vw / 1440);
  max-width: calc(480px * 100vw / 1440);
  margin-top: calc(32px * 100vw / 1440);
  padding: 0;
  list-style: none;
}

.career-tv-crew__skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.career-tv-crew__skill-icon {
  width: calc(48px * 100vw / 1440);
  height: calc(48px * 100vw / 1440);
}

.career-tv-crew__skill-label {
  margin-top: calc(12px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(11px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c9a94;
}

@media (min-width: 1440px) {
  .career-tv-crew__inner {
    padding: 59px 65px 48px 130px;
  }

  .career-tv-crew__title {
    font-size: 72px;
  }

  .career-tv-crew__title-line {
    max-width: 420px;
    margin-top: 16px;
  }

  .career-tv-crew__accent {
    margin-top: 20px;
    font-size: 38px;
  }

  .career-tv-crew__hook {
    margin-top: 8px;
    font-size: 20px;
  }

  .career-tv-crew__body {
    margin-top: 26px;
    font-size: 14px;
  }

  .career-tv-crew__divider {
    max-width: 420px;
    margin-top: 36px;
  }

  .career-tv-crew__skills {
    gap: 32px;
    max-width: 480px;
    margin-top: 32px;
  }

  .career-tv-crew__skill-icon {
    width: 48px;
    height: 48px;
  }

  .career-tv-crew__skill-label {
    margin-top: 12px;
    font-size: 11px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .career-tv-crew__inner {
    padding: 42px 46px 34px 103px;
  }

  .career-tv-crew__title {
    font-size: 51px;
  }

  .career-tv-crew__title-line {
    max-width: 299px;
    margin-top: 11px;
  }

  .career-tv-crew__accent {
    margin-top: 14px;
    font-size: 27px;
  }

  .career-tv-crew__hook {
    margin-top: 6px;
    font-size: 14px;
  }

  .career-tv-crew__body {
    margin-top: 18px;
    font-size: 14px;
  }

  .career-tv-crew__divider {
    max-width: 299px;
    margin-top: 26px;
  }

  .career-tv-crew__skills {
    gap: 23px;
    max-width: 342px;
    margin-top: 23px;
  }

  .career-tv-crew__skill-icon {
    width: 34px;
    height: 34px;
  }

  .career-tv-crew__skill-label {
    margin-top: 9px;
    font-size: 10px;
  }
}

/* CAREER — PEOPLE & ORGANIZATION */
.career-people-organization__visual {
  position: relative;
  overflow: hidden;
}

.career-people-organization__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 36% center;
  filter: none;
  image-rendering: auto;
}

.career-people-organization__content {
  display: flex;
  align-items: flex-start;
  background-color: #f6f3ee;
}

.career-people-organization__inner {
  width: 100%;
  padding-top: calc(59px * 100vw / 1440);
  padding-right: calc(65px * 100vw / 1440);
  padding-bottom: calc(48px * 100vw / 1440);
  padding-left: calc(130px * 100vw / 1440);
}

.career-people-organization__title {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(72px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a352f;
}

.career-people-organization__title-row {
  display: block;
}

.career-people-organization__title-line {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(16px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.career-people-organization__accent {
  margin-top: calc(20px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(38px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: #b8a99a;
}

.career-people-organization__hook {
  margin-top: calc(8px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(20px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #3a352f;
}

.career-people-organization__experiences {
  margin-top: calc(26px * 100vw / 1440);
  padding: 0;
}

.career-people-organization__experience {
  margin: 0;
}

.career-people-organization__experience + .career-people-organization__experience {
  margin-top: calc(14px * 100vw / 1440);
}

.career-people-organization__experience-label {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(11px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b8a99a;
}

.career-people-organization__experience-desc {
  margin-top: calc(4px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(14px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(58, 53, 47, 0.88);
}

.career-people-organization__divider {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(28px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.career-people-organization__skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32px * 100vw / 1440);
  max-width: calc(480px * 100vw / 1440);
  margin-top: calc(32px * 100vw / 1440);
  padding: 0;
  list-style: none;
}

.career-people-organization__skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.career-people-organization__skill-icon {
  width: calc(48px * 100vw / 1440);
  height: calc(48px * 100vw / 1440);
}

.career-people-organization__skill-label {
  margin-top: calc(12px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(11px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c9a94;
}

@media (min-width: 1440px) {
  .career-people-organization__inner {
    padding: 59px 65px 48px 130px;
  }

  .career-people-organization__title {
    font-size: 72px;
  }

  .career-people-organization__title-line {
    max-width: 420px;
    margin-top: 16px;
  }

  .career-people-organization__accent {
    margin-top: 20px;
    font-size: 38px;
  }

  .career-people-organization__hook {
    margin-top: 8px;
    font-size: 20px;
  }

  .career-people-organization__experiences {
    margin-top: 26px;
  }

  .career-people-organization__experience + .career-people-organization__experience {
    margin-top: 14px;
  }

  .career-people-organization__experience-label {
    font-size: 11px;
  }

  .career-people-organization__experience-desc {
    margin-top: 4px;
    font-size: 14px;
  }

  .career-people-organization__divider {
    max-width: 420px;
    margin-top: 28px;
  }

  .career-people-organization__skills {
    gap: 32px;
    max-width: 480px;
    margin-top: 32px;
  }

  .career-people-organization__skill-icon {
    width: 48px;
    height: 48px;
  }

  .career-people-organization__skill-label {
    margin-top: 12px;
    font-size: 11px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .career-people-organization__inner {
    padding: 42px 46px 34px 103px;
  }

  .career-people-organization__title {
    font-size: 51px;
  }

  .career-people-organization__title-line {
    max-width: 299px;
    margin-top: 11px;
  }

  .career-people-organization__accent {
    margin-top: 14px;
    font-size: 27px;
  }

  .career-people-organization__hook {
    margin-top: 6px;
    font-size: 14px;
  }

  .career-people-organization__experiences {
    margin-top: 18px;
  }

  .career-people-organization__experience + .career-people-organization__experience {
    margin-top: 10px;
  }

  .career-people-organization__experience-label {
    font-size: 10px;
  }

  .career-people-organization__experience-desc {
    margin-top: 3px;
    font-size: 14px;
  }

  .career-people-organization__divider {
    max-width: 299px;
    margin-top: 20px;
  }

  .career-people-organization__skills {
    gap: 23px;
    max-width: 342px;
    margin-top: 23px;
  }

  .career-people-organization__skill-icon {
    width: 34px;
    height: 34px;
  }

  .career-people-organization__skill-label {
    margin-top: 9px;
    font-size: 10px;
  }
}

/* CAREER — WRITER */
.career-writer__content {
  display: flex;
  align-items: flex-start;
  background-color: #f6f3ee;
}

.career-writer__inner {
  width: 100%;
  padding-top: calc(68px * 100vw / 1440);
  padding-right: calc(65px * 100vw / 1440);
  padding-bottom: calc(48px * 100vw / 1440);
  padding-left: calc(145px * 100vw / 1440);
}

.career-writer__visual {
  position: relative;
  overflow: hidden;
}

.career-writer__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% center;
  filter: none;
  image-rendering: auto;
}

.career-writer__title {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(72px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a352f;
}

.career-writer__title-line {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(16px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.career-writer__accent {
  margin-top: calc(20px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(38px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: #b8a99a;
}

.career-writer__hook {
  margin-top: calc(8px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(20px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #3a352f;
}

.career-writer__body {
  margin-top: calc(26px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(14px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(58, 53, 47, 0.88);
}

.career-writer__publications {
  display: flex;
  align-items: flex-end;
  gap: calc(32px * 100vw / 1440);
  margin-top: calc(28px * 100vw / 1440);
}

.career-writer__publication {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.career-writer__publication-cover {
  display: block;
  width: calc(100px * 100vw / 1440);
  height: auto;
  box-shadow: 0 2px 8px rgba(58, 53, 47, 0.12);
  transition: transform 0.3s ease;
}

.career-writer__publication--note {
  width: calc(310px * 100vw / 1440);
}

.career-writer__publication-preview {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(58, 53, 47, 0.12);
  filter: none;
  image-rendering: auto;
  transition: transform 0.3s ease;
}

.career-writer__publication-label {
  margin-top: calc(12px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(11px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #3a352f;
}

.career-writer__publication-link {
  margin-top: calc(4px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(10px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5c9a94;
  transition: opacity 0.3s ease;
}

.career-writer__publication:hover .career-writer__publication-cover,
.career-writer__publication:hover .career-writer__publication-preview {
  transform: scale(1.03);
}

.career-writer__publication:hover .career-writer__publication-link {
  opacity: 0.72;
}

.career-writer__divider {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(32px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.35);
}

.career-writer__skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32px * 100vw / 1440);
  max-width: calc(480px * 100vw / 1440);
  margin-top: calc(38px * 100vw / 1440);
  padding: 0;
  list-style: none;
}

.career-writer__skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.career-writer__skill-icon {
  width: calc(48px * 100vw / 1440);
  height: calc(48px * 100vw / 1440);
}

.career-writer__skill-label {
  margin-top: calc(12px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(11px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c9a94;
}

@media (min-width: 1440px) {
  .career-writer__inner {
    padding: 68px 65px 48px 145px;
  }

  .career-writer__title {
    font-size: 72px;
  }

  .career-writer__title-line {
    max-width: 420px;
    margin-top: 16px;
  }

  .career-writer__accent {
    margin-top: 20px;
    font-size: 38px;
  }

  .career-writer__hook {
    margin-top: 8px;
    font-size: 20px;
  }

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

  .career-writer__publications {
    gap: 32px;
    margin-top: 28px;
  }

  .career-writer__publication-cover {
    width: 100px;
  }

  .career-writer__publication--note {
    width: 310px;
  }

  .career-writer__publication-preview {
    width: 100%;
  }

  .career-writer__publication-label {
    margin-top: 12px;
    font-size: 11px;
  }

  .career-writer__publication-link {
    margin-top: 4px;
    font-size: 10px;
  }

  .career-writer__divider {
    max-width: 420px;
    margin-top: 32px;
  }

  .career-writer__skills {
    gap: 32px;
    max-width: 480px;
    margin-top: 38px;
  }

  .career-writer__skill-icon {
    width: 48px;
    height: 48px;
  }

  .career-writer__skill-label {
    margin-top: 12px;
    font-size: 11px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .career-writer__inner {
    padding: 48px 46px 34px 115px;
  }

  .career-writer__title {
    font-size: 51px;
  }

  .career-writer__title-line {
    max-width: 299px;
    margin-top: 11px;
  }

  .career-writer__accent {
    margin-top: 14px;
    font-size: 27px;
  }

  .career-writer__hook {
    margin-top: 6px;
    font-size: 14px;
  }

  .career-writer__body {
    margin-top: 18px;
    font-size: 14px;
  }

  .career-writer__publications {
    gap: 23px;
    margin-top: 20px;
  }

  .career-writer__publication-cover {
    width: 71px;
  }

  .career-writer__publication--note {
    width: 219px;
  }

  .career-writer__publication-preview {
    width: 100%;
  }

  .career-writer__publication-label {
    margin-top: 9px;
    font-size: 10px;
  }

  .career-writer__publication-link {
    margin-top: 3px;
    font-size: 9px;
  }

  .career-writer__divider {
    max-width: 299px;
    margin-top: 23px;
  }

  .career-writer__skills {
    gap: 23px;
    max-width: 342px;
    margin-top: 27px;
  }

  .career-writer__skill-icon {
    width: 34px;
    height: 34px;
  }

  .career-writer__skill-label {
    margin-top: 9px;
    font-size: 10px;
  }
}

/* CAREER → WHY ENGINEERING Transition */
.career-transition {
  width: 100%;
  aspect-ratio: 1440 / 621;
  min-height: 621px;
  overflow: hidden;
  background-color: #f6f3ee;
}

.career-transition__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 621px;
  text-align: center;
}

.career-transition__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(24px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #3a352f;
}

.career-transition__path-arrow {
  padding-inline: calc(14px * 100vw / 1440);
  letter-spacing: 0;
  color: rgba(58, 53, 47, 0.55);
}

.career-transition__line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(9px * 100vw / 1440);
  margin-top: calc(72px * 100vw / 1440);
}

.career-transition__line-segment {
  display: block;
  width: 1px;
  height: calc(18px * 100vw / 1440);
  background-color: rgba(58, 53, 47, 0.42);
}

.career-transition__now {
  margin: calc(64px * 100vw / 1440) 0 0;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(21px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3a352f;
}

.career-transition__build {
  margin: calc(12px * 100vw / 1440) 0 0;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(120px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a352f;
}

.career-transition__tagline {
  margin: calc(18px * 100vw / 1440) 0 0;
  padding-bottom: 80px;
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(25px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: #3a352f;
}

.career-transition__next {
  margin: 0;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(31px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3a352f;
}

@media (min-width: 1440px) {
  .career-transition__path {
    font-size: 24px;
  }

  .career-transition__path-arrow {
    padding-inline: 14px;
  }

  .career-transition__line {
    gap: 9px;
    margin-top: 72px;
  }

  .career-transition__line-segment {
    height: 18px;
  }

  .career-transition__now {
    margin-top: 64px;
    font-size: 21px;
  }

  .career-transition__build {
    margin-top: 12px;
    font-size: 120px;
  }

  .career-transition__tagline {
    margin-top: 18px;
    padding-bottom: 80px;
    font-size: 25px;
  }

  .career-transition__next {
    font-size: 31px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .career-transition__path {
    font-size: 17px;
  }

  .career-transition__path-arrow {
    padding-inline: 10px;
  }

  .career-transition__line {
    margin-top: 51px;
  }

  .career-transition__line-segment {
    height: 13px;
  }

  .career-transition__now {
    margin-top: 45px;
    font-size: 15px;
  }

  .career-transition__build {
    font-size: 85px;
  }

  .career-transition__tagline {
    padding-bottom: 80px;
    font-size: 18px;
  }

  .career-transition__next {
    font-size: 22px;
  }
}

@media (min-width: 769px) {
  .career-transition {
    aspect-ratio: auto;
    min-height: calc(621px * 100vw / 1440 + 200px);
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: visible;
  }

  .career-transition__inner {
    min-height: calc(621px * 100vw / 1440);
    height: calc(621px * 100vw / 1440);
  }
}

@media (min-width: 1440px) {
  .career-transition {
    min-height: 821px;
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .career-transition__inner {
    min-height: 621px;
    height: 621px;
  }
}

/* WHY ENGINEERING */
.why-engineering {
  position: relative;
  min-height: 100vh;
  background-color: #3a352f;
  color: #ffffff;
}

.why-engineering__grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 100vh;
  max-width: 1440px;
  margin-inline: auto;
}

.why-engineering__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(80px * 100vw / 1440) calc(48px * 100vw / 1440) calc(80px * 100vw / 1440) calc(120px * 100vw / 1440);
}

.why-engineering__title {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(72px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}

.why-engineering__title-row {
  display: block;
}

.why-engineering__title-line {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(16px * 100vw / 1440);
  background-color: rgba(255, 255, 255, 0.35);
}

.why-engineering__hook {
  margin-top: calc(32px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(21px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
}

.why-engineering__gold {
  color: #b8a99a;
}

.why-engineering__right {
  display: flex;
  flex-direction: column;
  padding: calc(80px * 100vw / 1440) calc(88px * 100vw / 1440) calc(72px * 100vw / 1440) calc(56px * 100vw / 1440);
}

.why-engineering__block + .why-engineering__block {
  margin-top: calc(40px * 100vw / 1440);
}

.why-engineering__number {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(56px * 100vw / 1440);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(184, 169, 154, 0.92);
}

.why-engineering__lead {
  margin-top: calc(16px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(21px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.95);
}

.why-engineering__lead-line {
  white-space: nowrap;
}

.why-engineering__keyphrase {
  font-weight: 600;
}

.why-engineering__body {
  margin-top: calc(20px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(12px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}

.why-engineering__body p + p {
  margin-top: calc(4px * 100vw / 1440);
}

.why-engineering__emphasis {
  margin-top: calc(32px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(20px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.why-engineering__closing-spacer {
  margin-top: calc(28px * 100vw / 1440);
  height: calc(42px + 24px + 48px * 100vw / 1440);
}

.why-engineering__closing {
  position: absolute;
  left: 50vw;
  bottom: calc(72px * 100vw / 1440);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  transform: translateX(-50%);
}

.why-engineering__arrow {
  display: block;
  position: relative;
  width: 6px;
  height: 42px;
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.why-engineering__arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.42);
  transform: translateX(-50%);
}

.why-engineering__arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 6px;
  height: 2px;
  border-right: 1px solid rgba(255, 255, 255, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  transform: translateX(-50%) rotate(45deg);
}

.why-engineering__cta {
  margin-top: calc(24px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(40px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
}

@media (min-width: 1440px) {
  .why-engineering__left {
    padding: 80px 48px 80px 120px;
  }

  .why-engineering__title {
    font-size: 72px;
  }

  .why-engineering__title-line {
    max-width: 420px;
    margin-top: 16px;
  }

  .why-engineering__hook {
    margin-top: 32px;
    font-size: 21px;
  }

  .why-engineering__right {
    padding: 80px 88px 72px 56px;
  }

  .why-engineering__block + .why-engineering__block {
    margin-top: 40px;
  }

  .why-engineering__number {
    font-size: 56px;
  }

  .why-engineering__lead {
    margin-top: 16px;
    font-size: 21px;
  }

  .why-engineering__body {
    margin-top: 20px;
    font-size: 12px;
  }

  .why-engineering__body p + p {
    margin-top: 4px;
  }

  .why-engineering__emphasis {
    margin-top: 32px;
    font-size: 20px;
  }

  .why-engineering__closing-spacer {
    margin-top: 28px;
    height: calc(42px + 24px + 48px);
  }

  .why-engineering__closing {
    bottom: 72px;
  }

  .why-engineering__arrow {
    margin: 0;
  }

  .why-engineering__cta {
    margin-top: 24px;
    font-size: 40px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .why-engineering__left {
    padding: 57px 34px 57px 86px;
  }

  .why-engineering__title {
    font-size: 51px;
  }

  .why-engineering__title-line {
    max-width: 299px;
    margin-top: 11px;
  }

  .why-engineering__hook {
    margin-top: 23px;
    font-size: 19px;
  }

  .why-engineering__right {
    padding: 57px 63px 51px 40px;
  }

  .why-engineering__block + .why-engineering__block {
    margin-top: 28px;
  }

  .why-engineering__number {
    font-size: 40px;
  }

  .why-engineering__lead {
    margin-top: 12px;
    font-size: 19px;
  }

  .why-engineering__body {
    margin-top: 14px;
    font-size: 12px;
  }

  .why-engineering__body p + p {
    margin-top: 3px;
  }

  .why-engineering__emphasis {
    margin-top: 23px;
    font-size: 16px;
  }

  .why-engineering__closing-spacer {
    margin-top: 20px;
    height: calc(42px + 17px + 34px);
  }

  .why-engineering__closing {
    bottom: 51px;
  }

  .why-engineering__arrow {
    margin: 0;
  }

  .why-engineering__cta {
    margin-top: 17px;
    font-size: 28px;
  }
}

/* WHAT I CAN DO */
.what-i-can-do {
  background-color: #f7f5ee;
}

.what-i-can-do__heading {
  margin-bottom: calc(13px * 100vw / 1440);
  text-align: center;
}

.what-i-can-do__subcopy {
  margin-top: calc(12px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(21px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(58, 53, 47, 0.82);
}

.what-i-can-do__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(40px * 100vw / 1440) calc(56px * 100vw / 1440);
}

.what-i-can-do__item {
  position: relative;
}

.what-i-can-do__number {
  position: absolute;
  top: -14px;
  left: -35px;
  z-index: 0;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: clamp(76px, 10.5vw, 120px);
  font-weight: 400;
  line-height: 1;
  color: rgba(184, 169, 154, 0.36);
  pointer-events: none;
}

.what-i-can-do__title {
  position: relative;
  z-index: 2;
  margin-bottom: calc(12px * 100vw / 1440);
  padding-top: 32px;
  padding-left: 12px;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(24px * 100vw / 1440);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3a352f;
}

.what-i-can-do__catch {
  position: relative;
  z-index: 1;
  margin-bottom: calc(14px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(18px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: #a89988;
}

.what-i-can-do__desc {
  position: relative;
  z-index: 1;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(14px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: rgba(58, 53, 47, 0.82);
}

.what-i-can-do__tools {
  position: relative;
  z-index: 1;
  margin-top: calc(12px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(12px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: rgba(58, 53, 47, 0.55);
}

.what-i-can-do__footer {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-top: calc(55px * 100vw / 1440);
  padding-top: calc(32px * 100vw / 1440);
  text-align: center;
  transform: translateX(-50%);
}

.what-i-can-do__footer-lead {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(28px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3a352f;
}

.what-i-can-do__footer-sub {
  margin-top: calc(8px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(16px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(58, 53, 47, 0.72);
}

.what-i-can-do__footer-link {
  display: inline-block;
  margin-top: calc(20px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(12px * 100vw / 1440);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #3a352f;
  transition: opacity 0.3s ease;
}

.what-i-can-do__footer-link:hover {
  opacity: 0.65;
}

@media (min-width: 1440px) {
  .what-i-can-do__heading {
    margin-bottom: 13px;
  }

  .what-i-can-do__subcopy {
    margin-top: 12px;
    font-size: 21px;
  }

  .what-i-can-do__grid {
    gap: 40px 56px;
  }

  .what-i-can-do__title {
    margin-bottom: 12px;
    font-size: 24px;
  }

  .what-i-can-do__catch {
    margin-bottom: 14px;
    font-size: 18px;
  }

  .what-i-can-do__desc {
    font-size: 14px;
  }

  .what-i-can-do__tools {
    margin-top: 12px;
    font-size: 12px;
  }

  .what-i-can-do__footer {
    margin-top: 55px;
    padding-top: 32px;
  }

  .what-i-can-do__footer-lead {
    font-size: 28px;
  }

  .what-i-can-do__footer-sub {
    margin-top: 8px;
    font-size: 16px;
  }

  .what-i-can-do__footer-link {
    margin-top: 20px;
    font-size: 12px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .what-i-can-do__heading {
    margin-bottom: 10px;
  }

  .what-i-can-do__subcopy {
    margin-top: 10px;
    font-size: 20px;
  }

  .what-i-can-do__grid {
    gap: 28px 40px;
  }

  .what-i-can-do__title {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .what-i-can-do__catch {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .what-i-can-do__desc {
    font-size: 14px;
  }

  .what-i-can-do__tools {
    margin-top: 10px;
    font-size: 12px;
  }

  .what-i-can-do__footer {
    margin-top: 31px;
    padding-top: 24px;
  }

  .what-i-can-do__footer-lead {
    font-size: 22px;
  }

  .what-i-can-do__footer-sub {
    margin-top: 6px;
    font-size: 14px;
  }

  .what-i-can-do__footer-link {
    margin-top: 16px;
    font-size: 11px;
  }
}

/* WORKS */
.works {
  background-color: #f7f5ee;
}

.works.l-section {
  display: flex;
  align-items: center;
  padding-block: calc(72px * 100vw / 1440);
}

.works__inner {
  width: 100%;
}

.works__layout {
  display: grid;
  grid-template-columns: 33fr 67fr;
  gap: calc(40px * 100vw / 1440);
  align-items: stretch;
}

.works__left {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.works__intro {
  flex-shrink: 0;
}

.works__label {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(72px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a352f;
}

.works__intro > .works__rule {
  display: block;
  width: 100%;
  max-width: calc(420px * 100vw / 1440);
  height: 1px;
  margin-top: calc(16px * 100vw / 1440);
  margin-bottom: calc(20px * 100vw / 1440);
  border: 0;
  background-color: rgba(58, 53, 47, 0.35);
}

.works__rule {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #3a352f;
}

.works__headline {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(48px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3a352f;
}

.works__headline-row {
  display: block;
}

.works__tagline {
  margin-top: calc(16px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(21px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: #a89988;
}

@media (min-width: 1024px) {
  .works__tagline {
    white-space: nowrap;
  }
}

.works__connector {
  flex: 1;
  display: flex;
  padding: calc(24px * 100vw / 1440) 0;
}

.works__connector-line {
  display: block;
  width: 1px;
  min-height: calc(48px * 100vw / 1440);
  height: 100%;
  background-color: #d9d4cc;
}

.works__project {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: calc(25px * 100vw / 1440);
}

.works__project-number {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(10px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a8b7c;
}

.works__project-category {
  margin-top: calc(6px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(20px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3a352f;
}

.works__project .works__rule {
  max-width: 100%;
  margin: calc(12px * 100vw / 1440) 0 calc(14px * 100vw / 1440);
}

.works__project-title {
  font-family: "Noto Serif JP", "Cormorant Garamond", serif;
  font-size: calc(18px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: #3a352f;
}

.works__project-meta {
  margin-top: calc(8px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(11px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(58, 53, 47, 0.52);
}

.works__project-tool {
  display: inline-block;
  width: fit-content;
  margin-top: calc(10px * 100vw / 1440);
  padding: calc(3px * 100vw / 1440) calc(8px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(10px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: rgba(58, 53, 47, 0.72);
  border: 1px solid #d9d4cc;
  border-radius: 2px;
}

.works__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.works__figure {
  width: 100%;
  margin: 0;
}

.works__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.works__case-study {
  display: inline-block;
  margin-top: calc(16px * 100vw / 1440);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(11px * 100vw / 1440);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #3a352f;
  transition: opacity 0.3s ease;
}

.works__case-study:hover {
  opacity: 0.65;
}

.works__showcase--02 {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 9.722vw;
  padding-bottom: max(0px, calc(64.19vw - max(39.236vw, 35.625vw + 186px)));
  overflow: visible;
}

.works__showcase-inner {
  display: flex;
  align-items: flex-start;
  gap: 2.222vw;
  max-width: 100%;
  overflow: visible;
}

.works__showcase-media {
  position: relative;
  flex-shrink: 0;
  width: 57.917vw;
  max-width: 834px;
  overflow: visible;
}

.works__showcase-pc {
  width: 100%;
  margin: 0;
}

.works__showcase-pc img {
  display: block;
  width: 100%;
  height: auto;
}

.works__showcase-sp {
  position: absolute;
  top: calc(100% - 9.9115044248%);
  right: 6.7146281775%;
  width: 26.8585131894%;
  margin: 0;
  z-index: 2;
  background: transparent;
  line-height: 0;
  filter: drop-shadow(0 0.556vw 1.667vw rgba(58, 53, 47, 0.12));
}

.works__showcase-sp img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: top;
  border-radius: calc(24px * 100vw / 1440);
}

.works__project--02 {
  flex-shrink: 0;
  width: 15.278vw;
  max-width: 220px;
  margin-top: 35.625vw;
  margin-bottom: 0;
  padding-top: 0;
}

.works__project--02 .works__project-number {
  color: #b8a99a;
}

.works__showcase--03 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 9.722vw;
  margin-bottom: calc(68px * 100vw / 1440);
}

@media (min-width: 768px) {
  .works__showcase--03 {
    margin-bottom: calc(48px * 100vw / 1440);
  }
}

.works__showcase-03-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.222vw;
  width: 100%;
}

.works__project--03-left,
.works__project--03-right {
  margin-top: 0;
  padding-top: 0;
}

.works__project--03-right {
  text-align: right;
}

.works__showcase-03-headline {
  width: 100%;
  margin-top: 4.167vw;
  margin-bottom: 2.222vw;
  text-align: center;
  font-size: calc(18px * 100vw / 1440);
}

.works__showcase-03-figure {
  width: 68.194vw;
  max-width: 982px;
  margin: 0;
}

.works__showcase-03-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.works__showcase-03-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.556vw;
  margin-top: 2.083vw;
}

.works__showcase-03-tools .works__project-tool {
  margin-top: 0;
}

.works__rule--03-mobile {
  display: none;
}

@media (min-width: 768px) {
  .works.l-section {
    padding-block: calc(92px * 100vw / 1440);
  }
}

@media (min-width: 1440px) {
  .works.l-section {
    padding-block: 92px;
  }

  .works__layout {
    gap: 40px;
  }

  .works__label {
    font-size: 72px;
  }

  .works__intro > .works__rule {
    max-width: 420px;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .works__case-study {
    font-size: 11px;
  }

  .works__project-number {
    font-size: 10px;
  }

  .works__project-category {
    margin-top: 6px;
    font-size: 20px;
  }

  .works__headline {
    font-size: 48px;
  }

  .works__tagline {
    margin-top: 16px;
    font-size: 21px;
  }

  .works__connector {
    padding: 24px 0;
  }

  .works__connector-line {
    min-height: 48px;
  }

  .works__project {
    padding-top: 25px;
  }

  .works__project-category {
    margin-top: 6px;
  }

  .works__project .works__rule {
    margin: 12px 0 14px;
  }

  .works__project-title {
    font-size: 18px;
  }

  .works__project-meta {
    margin-top: 8px;
    font-size: 11px;
  }

  .works__project-tool {
    margin-top: 10px;
    padding: 3px 8px;
    font-size: 10px;
  }

  .works__case-study {
    margin-top: 16px;
  }

  .works__showcase--02 {
    margin-top: 140px;
    padding-bottom: max(0px, calc(925px - max(565px, 513px + 186px)));
  }

  .works__showcase-inner {
    gap: 32px;
  }

  .works__showcase-media {
    width: 834px;
  }

  .works__showcase-sp {
    filter: drop-shadow(0 8px 24px rgba(58, 53, 47, 0.12));
  }

  .works__showcase-sp img {
    border-radius: 24px;
  }

  .works__project--02 {
    width: 220px;
    margin-top: 513px;
  }

  .works__showcase--03 {
    margin-top: 140px;
    margin-bottom: 48px;
  }

  .works__showcase-03-top {
    gap: 32px;
  }

  .works__showcase-03-headline {
    margin-top: 60px;
    margin-bottom: 32px;
    font-size: 18px;
  }

  .works__showcase-03-figure {
    width: 982px;
  }

  .works__showcase-03-tools {
    gap: 8px;
    margin-top: 30px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .works__layout {
    gap: 32px;
  }

  .works__label {
    font-size: 51px;
  }

  .works__intro > .works__rule {
    max-width: 299px;
    margin-top: 11px;
    margin-bottom: 14px;
  }

  .works__headline {
    font-size: 40px;
  }

  .works__tagline {
    font-size: 20px;
  }

  .works__project-category {
    font-size: 18px;
  }

  .works__project-title {
    font-size: 17px;
  }

  .works__showcase-03-headline {
    font-size: 17px;
  }
}

/* FAQ */
.faq {
  background-color: #f7f5ee;
}

.faq.l-section {
  padding-block: 5.556vw 6.111vw;
}

.faq__hero {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: 2.778vw;
  align-items: center;
  margin-bottom: 3.333vw;
}

.faq__hero-copy {
  min-width: 0;
  text-align: left;
}

.faq__title {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-weight: 400;
  line-height: 1.1;
  color: #3a352f;
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq__title-row {
  display: block;
}

.faq__rule {
  display: block;
  width: calc(230px * 100vw / 1440);
  max-width: 230px;
  height: 1px;
  margin: calc(8px * 100vw / 1440) 0 calc(10px * 100vw / 1440);
  margin-right: auto;
  margin-left: 0;
  border: 0;
  background-color: rgba(58, 53, 47, 0.35);
}

.faq__lead {
  font-family: "Noto Serif JP", "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(16px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: #b8a99a;
}

.faq__lead-row {
  display: block;
}

.faq__rule--lead {
  width: calc(36px * 100vw / 1440);
  max-width: 36px;
  margin-top: calc(10px * 100vw / 1440);
  margin-bottom: 0;
}

.faq__hero-visual {
  position: relative;
  height: calc(200px * 100vw / 1440);
  margin: 0;
  overflow: hidden;
}

.faq__hero-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #f7f5ee 0%,
    rgba(247, 245, 238, 0.92) 10%,
    rgba(247, 245, 238, 0.62) 24%,
    rgba(247, 245, 238, 0.18) 44%,
    rgba(247, 245, 238, 0) 58%
  );
  content: "";
  pointer-events: none;
}

.faq__hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid rgba(58, 53, 47, 0.14);
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(58, 53, 47, 0.14);
}

.faq-item__inner {
  display: grid;
  grid-template-columns: 9% 21% 11% 6% 53%;
  gap: 0;
  align-items: start;
  padding-block: calc(18px * 100vw / 1440);
}

.faq-item__number {
  padding-top: calc(4px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(32px * 100vw / 1440);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #b8a99a;
}

.faq-item__question {
  min-width: 0;
  padding-right: calc(8px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(18px * 100vw / 1440);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #3a352f;
}

.faq-item__question-row {
  display: block;
}

.faq-item__question-line {
  display: contents;
}

.faq-item__question-br {
  display: none;
}

.faq-item__icon-wrap {
  display: flex;
  justify-content: center;
  padding-top: calc(4px * 100vw / 1440);
}

.faq-item__icon {
  display: block;
  width: calc(44px * 100vw / 1440);
  height: calc(44px * 100vw / 1440);
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
}

.faq-item__answer-label {
  padding-top: calc(4px * 100vw / 1440);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(32px * 100vw / 1440);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #9a8b7c;
}

.faq-item__answer {
  min-width: 0;
  padding-right: calc(8px * 100vw / 1440);
}

.faq-item__answer-lead {
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(21px * 100vw / 1440);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #3a352f;
}

.faq-item__answer-body {
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: calc(16px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #3a352f;
}

@media (min-width: 1024px) {
  .faq-item__inner {
    display: grid;
    grid-template-columns: 7% 25% 10% 5% 53%;
    grid-template-areas: none;
    padding-block: 18px;
  }

  .faq-item__number,
  .faq-item__question,
  .faq-item__icon-wrap,
  .faq-item__answer-label,
  .faq-item__answer {
    grid-area: auto;
  }

  .faq-item__number {
    padding-top: 6px;
    font-size: 32px;
  }

  .faq-item__question {
    padding-right: 12px;
    font-size: 29px;
    line-height: 1.4;
  }

  .faq-item:nth-child(3) .faq-item__question {
    font-size: 26px;
  }

  .faq-item__icon-wrap {
    padding-top: 6px;
  }

  .faq-item__icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
  }

  .faq-item__answer-label {
    padding-top: 6px;
    padding-left: 20px;
    font-size: 32px;
  }

  .faq-item__answer {
    padding-right: 8px;
    padding-left: 4px;
  }

  .faq-item__answer-lead {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.65;
  }

  .faq-item__answer-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
  }
}

@media (min-width: 1440px) {
  .faq.l-section {
    padding-block: 80px 96px;
  }

  .faq__hero {
    gap: 40px;
    margin-bottom: 40px;
  }

  .faq__rule {
    width: 230px;
    margin: 8px 0 10px;
    margin-right: auto;
    margin-left: 0;
  }

  .faq__lead {
    font-size: 16px;
  }

  .faq__rule--lead {
    width: 36px;
    margin-top: 10px;
  }

  .faq__hero-visual {
    height: 200px;
  }
}

@media (max-width: 1023px) {
  .faq__hero {
    grid-template-columns: 1fr;
  }

  .faq__hero-visual {
    height: 160px;
  }

  .faq__hero-visual img {
    object-position: 65% center;
  }

  .faq-item__inner {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "number question"
      "icon answer-label"
      ". answer";
    gap: 10px 16px;
  }

  .faq-item__number {
    grid-area: number;
  }

  .faq-item__question {
    grid-area: question;
    padding-right: 0;
  }

  .faq-item__icon-wrap {
    grid-area: icon;
    justify-content: flex-start;
    padding-top: 0;
  }

  .faq-item__answer-label {
    grid-area: answer-label;
    padding-top: 0;
    font-size: calc(28px * 100vw / 1440);
  }

  .faq-item__answer {
    grid-area: answer;
    padding-right: 0;
  }
}

/* VISION */
.vision {
  position: relative;
  min-height: calc(560px * 100vw / 1440);
  overflow: hidden;
}

.vision__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vision__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.vision__content {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: calc(560px * 100vw / 1440);
  padding: calc(65px * 100vw / 1440) calc(55px * 100vw / 1440)
    calc(55px * 100vw / 1440);
}

.vision__intro {
  position: absolute;
  top: calc(65px * 100vw / 1440);
  left: calc(55px * 100vw / 1440);
  max-width: calc(360px * 100vw / 1440);
  margin: 0;
  z-index: 1;
}

.vision__label {
  margin: 0;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(28px * 100vw / 1440);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8a99a;
}

.vision__rule {
  display: block;
  width: calc(90px * 100vw / 1440);
  max-width: 90px;
  height: 1px;
  margin: calc(6px * 100vw / 1440) 0 calc(12px * 100vw / 1440);
  margin-right: auto;
  margin-left: 0;
  border: 0;
  background-color: rgba(154, 139, 124, 0.75);
}

.vision__title {
  margin: 0 0 calc(14px * 100vw / 1440);
  font-family: "Noto Serif JP", "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(30px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #b8a99a;
}

.vision__title-row {
  display: block;
}

.vision__body {
  font-family: "Noto Serif JP", "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(15px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #6b6560;
}

.vision__body p {
  margin: 0 0 calc(8px * 100vw / 1440);
}

.vision__body p:last-child {
  margin-bottom: 0;
}

.vision__message {
  align-self: flex-end;
  margin-top: auto;
  margin-bottom: 0;
  font-family: "Noto Serif JP", "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: calc(28px * 100vw / 1440);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.vision__message-inner {
  width: max-content;
  max-width: 100%;
}

.vision__message-row {
  display: block;
  width: 100%;
  margin: 0;
  text-align: right;
}

@media (min-width: 1024px) {
  .vision {
    min-height: 100vh;
  }

  .vision__bg img {
    object-fit: cover;
    object-position: center 42%;
  }

  .vision__content {
    min-height: 100vh;
    padding: 0;
  }

  .vision__intro {
    top: 65px;
    left: 55px;
    max-width: 360px;
    z-index: 1;
  }

  .vision__intro::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -20px;
    right: -24px;
    bottom: -20px;
    left: -24px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.65) 35%,
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(1px);
    pointer-events: none;
  }

  .vision__intro > * {
    position: relative;
    z-index: 1;
  }

  .vision__label {
    font-size: 28px;
  }

  .vision__rule {
    width: 90px;
    margin: 6px 0 12px;
    margin-right: auto;
    margin-left: 0;
  }

  .vision__title {
    margin-bottom: 14px;
    font-size: 30px;
  }

  .vision__body {
    font-size: 15px;
  }

  .vision__body p {
    margin-bottom: 8px;
  }

  .vision__message {
    position: absolute;
    right: 55px;
    bottom: 55px;
    margin: 0;
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .vision__content {
    min-height: 480px;
    padding: 48px 24px 40px;
  }

  .vision__intro {
    top: 48px;
    left: 24px;
    max-width: min(320px, calc(100% - 48px));
  }

  .vision__message {
    max-width: none;
    font-size: clamp(20px, 5.5vw, 28px);
  }
}

/* Footer / Contact */
.site-footer {
  background-color: #f7f5ee;
  color: #3a352f;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 12vh 48px 40px;
}

.site-footer__main {
  width: 100%;
  text-align: center;
}

.site-footer__heading {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a8b7c;
}

.site-footer__heading-rule {
  display: block;
  width: 100px;
  height: 1px;
  margin: 0 auto 20px;
  border: 0;
  background-color: rgba(154, 139, 124, 0.75);
}

.site-footer__lead {
  margin: 0 0 16px;
  font-family: "Noto Serif JP", "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #9a8b7c;
}

.site-footer__rule {
  display: block;
  width: 140px;
  height: 1px;
  margin: 0 auto 28px;
  border: 0;
  background-color: rgba(154, 139, 124, 0.75);
}

.site-footer__text {
  margin: 0;
  font-family: "Noto Serif JP", "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #6b6560;
}

.site-footer__button {
  display: inline-block;
  margin-top: 40px;
  padding: 14px 56px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f7f5ee;
  background-color: #3a352f;
  transition: opacity 0.3s ease;
}

.site-footer__button:hover {
  opacity: 0.85;
}

.site-footer__bottom {
  width: 100%;
  text-align: center;
}

.site-footer__divider {
  display: block;
  width: 82%;
  height: 1px;
  margin: 0 auto 24px;
  border: 0;
  background-color: #3a352f;
}

.site-footer__copyright {
  margin: 0;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6560;
}

@media (min-width: 1024px) {
  .site-footer__inner {
    min-height: 100vh;
    padding: 14vh 64px 48px;
  }

  .site-footer__heading {
    font-size: 28px;
  }

  .site-footer__lead {
    font-size: 36px;
  }

  .site-footer__text {
    font-size: 15px;
  }

  .site-footer__divider {
    width: 85%;
  }
}

/* Mobile — max-width: 768px */
.site-header__menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

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

  .l-container {
    padding-inline: 20px;
  }

  .l-section {
    padding-block: 64px;
  }

  .site-header__menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .site-header__menu-bar {
    display: block;
    width: 22px;
    height: 1px;
    margin-inline: auto;
    background-color: currentColor;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .site-header__nav {
    display: none;
    position: fixed;
    top: 80px;
    right: 0;
    left: 0;
    z-index: 99;
    padding: 24px 20px 32px;
    background-color: rgba(247, 245, 238, 0.98);
    box-shadow: 0 8px 24px rgba(58, 53, 47, 0.08);
  }

  .site-header.is-menu-open .site-header__nav {
    display: block;
  }

  .site-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-header__nav-list li + li {
    border-top: 1px solid rgba(58, 53, 47, 0.08);
  }

  .site-header__nav-link {
    display: block;
    padding: 16px 4px;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #3a352f;
  }

  .site-header__nav-link--contact {
    margin-top: 8px;
    padding: 12px 14px;
    text-align: center;
    border-color: rgba(58, 53, 47, 0.55);
    color: #3a352f;
  }

  .site-header:not(.is-scrolled) .site-header__logo,
  .site-header:not(.is-scrolled) .site-header__menu-toggle {
    color: #ffffff;
  }

  .site-header.is-scrolled .site-header__menu-toggle,
  .site-header.is-menu-open .site-header__menu-toggle {
    color: #3a352f;
  }

  .site-header.is-menu-open .site-header__menu-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.is-menu-open .site-header__menu-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-menu-open .site-header__menu-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

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

  .hero__content {
    padding-top: 10vh;
    padding-left: 0;
  }

  .hero__catch {
    margin-bottom: 32px;
    font-size: clamp(14px, 4vw, 18px);
  }

  .hero__career-lines,
  .hero__career-next {
    font-size: clamp(22px, 7vw, 36px);
  }

  .my-story {
    aspect-ratio: auto;
    min-height: auto;
    padding-bottom: 48px;
  }

  .my-story__media {
    position: relative;
    height: 220px;
  }

  .my-story__panel {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    padding: 24px 20px 0;
  }

  .my-story__panel::before {
    right: -20px;
  }

  .my-story__title {
    font-size: clamp(36px, 11vw, 52px);
    letter-spacing: 0.1em;
  }

  .my-story__lead {
    white-space: normal;
    font-size: 15px;
  }

  .career-section {
    aspect-ratio: auto;
    min-height: auto;
    overflow: visible;
  }

  .career-section__grid {
    display: flex;
    flex-direction: column;
    min-height: auto;
    height: auto;
  }

  .career-hotelier__visual,
  .career-tv-crew__visual,
  .career-people-organization__visual,
  .career-writer__visual {
    order: -1;
    width: 100%;
    min-height: 220px;
    max-height: 280px;
    overflow: hidden;
  }

  .career-hotelier__photo,
  .career-tv-crew__photo,
  .career-people-organization__photo,
  .career-writer__photo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 220px;
    object-fit: cover;
  }

  .career-hotelier__inner,
  .career-tv-crew__inner,
  .career-people-organization__inner,
  .career-writer__inner {
    padding: 28px 20px 36px;
  }

  .career-hotelier__skills,
  .career-tv-crew__skills,
  .career-people-organization__skills,
  .career-writer__skills {
    margin-top: 24px;
  }

  .career-hotelier__title,
  .career-tv-crew__title,
  .career-people-organization__title,
  .career-writer__title {
    font-size: clamp(34px, 10vw, 48px);
    letter-spacing: 0.1em;
  }

  .career-hotelier__accent,
  .career-tv-crew__accent,
  .career-people-organization__accent,
  .career-writer__accent {
    font-size: clamp(24px, 7vw, 32px);
  }

  .career-hotelier__hook,
  .career-tv-crew__hook,
  .career-people-organization__hook,
  .career-writer__hook {
    font-size: 16px;
  }

  .career-hotelier__body,
  .career-tv-crew__body,
  .career-writer__body {
    font-size: 14px;
  }

  .career-writer__publications {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .career-writer__publication,
  .career-writer__publication--note {
    width: 100%;
    max-width: none;
  }

  .career-transition {
    aspect-ratio: auto;
    min-height: auto;
    padding-top: 48px;
    padding-bottom: 73px;
    overflow: visible;
  }

  .career-transition__inner {
    min-height: auto;
    height: auto;
    justify-content: flex-start;
  }

  .career-transition__tagline {
    margin: 12px 0 0;
    padding-bottom: 89px;
  }

  .career-transition__now {
    margin: 24px 0 0;
  }

  .career-transition__path {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    font-size: clamp(18px, 5vw, 24px);
  }

  .career-transition__build {
    margin: 12px 0 0;
    font-size: clamp(48px, 14vw, 80px);
    letter-spacing: 0.06em;
  }

  .career-transition__tagline,
  .career-transition__next {
    font-size: clamp(16px, 4.5vw, 20px);
  }

  .why-engineering {
    min-height: auto;
  }

  .why-engineering__grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .why-engineering__left,
  .why-engineering__right {
    padding: 48px 20px;
  }

  .why-engineering__title {
    font-size: clamp(36px, 11vw, 52px);
    letter-spacing: 0.1em;
  }

  .why-engineering__hook {
    font-size: 17px;
  }

  .why-engineering__lead {
    font-size: 17px;
  }

  .why-engineering__lead-line {
    white-space: normal;
  }

  .why-engineering__body {
    font-size: 13px;
  }

  .why-engineering__block + .why-engineering__block {
    margin-top: 36px;
  }

  .why-engineering__closing-spacer {
    display: none;
  }

  .why-engineering__closing {
    position: static;
    width: 100%;
    margin-top: 32px;
    padding-bottom: 48px;
    transform: none;
  }

  .what-i-can-do__heading .c-section-title {
    font-size: clamp(34px, 10vw, 48px);
  }

  .what-i-can-do__subcopy {
    font-size: 16px;
  }

  .what-i-can-do__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .what-i-can-do__number {
    left: -8px;
    font-size: clamp(56px, 16vw, 76px);
  }

  .what-i-can-do__title {
    font-size: 20px;
  }

  .what-i-can-do__catch,
  .what-i-can-do__desc {
    font-size: 14px;
  }

  .what-i-can-do__footer {
    left: auto;
    width: 100%;
    margin-top: 40px;
    transform: none;
  }

  .what-i-can-do__footer-lead {
    font-size: 22px;
  }

  .works.l-section {
    padding-block: 64px;
  }

  .works__layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .works__label {
    font-size: clamp(36px, 11vw, 52px);
    letter-spacing: 0.1em;
  }

  .works__headline {
    font-size: clamp(28px, 8vw, 40px);
  }

  .works__tagline {
    font-size: 16px;
    white-space: normal;
  }

  .works__connector {
    display: none;
  }

  .works__layout .works__project {
    margin-top: 28px;
    padding-top: 0;
  }

  .works__project {
    padding-top: 0;
  }

  .works__project-number {
    font-size: 10px;
  }

  .works__project-category {
    font-size: 18px;
  }

  .works__project-title {
    font-size: 16px;
  }

  .works__right {
    align-items: stretch;
  }

  .works__showcase--02 {
    margin-top: 52px;
    padding-bottom: 0;
  }

  .works__showcase--02 .works__project--02 .works__project-number {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: #9a8b7c;
  }

  .works__showcase--02 .works__project--02 .works__project-category {
    margin-top: 6px;
    font-size: 18px;
    letter-spacing: 0.12em;
    color: #3a352f;
  }

  .works__showcase--02 .works__project--02 .works__rule {
    margin: 12px 0 14px;
    background-color: #3a352f;
  }

  .works__showcase--02 .works__project--02 .works__project-title {
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #3a352f;
  }

  .works__showcase--02 .works__project--02 .works__project-meta {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(58, 53, 47, 0.52);
  }

  .works__showcase--02 .works__project--02 .works__project-tool {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    color: rgba(58, 53, 47, 0.72);
    border: 1px solid #d9d4cc;
  }

  .works__showcase--02 .works__showcase-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .works__showcase--02 .works__project--02 {
    display: contents;
  }

  .works__showcase--02 .works__project--02 .works__project-number {
    order: 1;
  }

  .works__showcase--02 .works__project--02 .works__project-category {
    order: 2;
  }

  .works__showcase--02 .works__project--02 .works__rule {
    order: 3;
  }

  .works__showcase--02 .works__project--02 .works__project-title {
    order: 4;
  }

  .works__showcase--02 .works__project--02 .works__project-meta {
    order: 5;
  }

  .works__showcase--02 .works__project--02 .works__project-tool {
    order: 6;
    margin-bottom: 18px;
  }

  .works__showcase--02 .works__showcase-media {
    order: 7;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: static;
    width: 100%;
    max-width: 100%;
  }

  .works__showcase--02 .works__showcase-pc {
    width: 100%;
    margin: 0;
  }

  .works__showcase--02 .works__showcase-sp {
    position: static;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    filter: drop-shadow(0 8px 20px rgba(58, 53, 47, 0.12));
  }

  .works__showcase--02 .works__showcase-sp img {
    border-radius: 16px;
  }

  .works__showcase--03 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 52px;
    margin-bottom: 0;
  }

  .works__showcase--03 .works__project-number {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: #9a8b7c;
  }

  .works__showcase--03 .works__project-category {
    margin-top: 6px;
    font-size: 18px;
    letter-spacing: 0.12em;
    color: #3a352f;
  }

  .works__showcase--03 .works__rule--03-mobile {
    margin: 12px 0 14px;
    background-color: #3a352f;
  }

  .works__showcase--03 .works__project-title {
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #3a352f;
  }

  .works__showcase--03 .works__project-meta {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(58, 53, 47, 0.52);
  }

  .works__showcase--03 .works__project-tool {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    color: rgba(58, 53, 47, 0.72);
    border: 1px solid #d9d4cc;
  }

  .works__showcase--03 .works__showcase-03-top {
    display: contents;
  }

  .works__showcase--03 .works__project--03-left,
  .works__showcase--03 .works__project--03-right {
    display: contents;
    text-align: left;
  }

  .works__showcase--03 .works__project-number,
  .works__showcase--03 .works__project-category,
  .works__showcase--03 .works__project-title,
  .works__showcase--03 .works__project-meta,
  .works__showcase--03 .works__rule--03-mobile {
    align-self: stretch;
    width: 100%;
    text-align: left;
  }

  .works__showcase--03 .works__project-number {
    order: 1;
  }

  .works__showcase--03 .works__project-category {
    order: 2;
  }

  .works__showcase--03 .works__rule--03-mobile {
    display: block;
    order: 3;
  }

  .works__showcase--03 .works__project--03-right .works__project-title {
    order: 4;
  }

  .works__showcase--03 .works__project--03-right .works__project-meta {
    order: 5;
  }

  .works__showcase--03 .works__showcase-03-tools {
    order: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 18px;
  }

  .works__showcase--03 .works__showcase-03-tools .works__project-tool {
    margin-top: 0;
  }

  .works__showcase--03 .works__showcase-03-headline {
    display: none;
  }

  .works__showcase--03 .works__showcase-03-figure {
    order: 7;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .faq.l-section {
    padding-block: 64px;
  }

  .faq__title {
    font-size: clamp(32px, 9vw, 40px);
  }

  .faq__lead {
    font-size: 15px;
  }

  .faq-item__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "number number"
      "question question"
      "answer-label icon"
      "answer answer";
    column-gap: 18px;
    row-gap: 0;
    padding-block: 20px;
  }

  .faq-item__number {
    grid-area: number;
    padding-top: 0;
    font-size: 28px;
    margin-bottom: 12px;
  }

  .faq-item__question {
    grid-area: question;
    padding-right: 0;
    font-size: 21px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    margin-bottom: 22px;
  }

  .faq-item:nth-child(1) .faq-item__question-row,
  .faq-item:nth-child(2) .faq-item__question-row {
    display: inline;
  }

  .faq-item:nth-child(3) .faq-item__question-line {
    display: inline;
  }

  .faq-item:nth-child(3) .faq-item__question-line .faq-item__question-row {
    display: inline;
  }

  .faq-item:nth-child(3) .faq-item__question > .faq-item__question-row {
    display: inline;
  }

  .faq-item:nth-child(3) .faq-item__question-br {
    display: block;
  }

  .faq-item__icon-wrap {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
  }

  .faq-item__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .faq-item__answer-label {
    grid-area: answer-label;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-left: 0;
    font-size: 28px;
  }

  .faq-item__answer {
    grid-area: answer;
    padding-right: 0;
    padding-left: 0;
    margin-top: 14px;
  }

  .faq-item__answer-lead {
    font-size: 16px;
  }

  .faq-item__answer-body {
    font-size: 14px;
  }

  .vision {
    min-height: 70vh;
  }

  .vision__content {
    position: relative;
    min-height: 70vh;
    padding: 48px 20px 40px;
  }

  .vision__intro {
    position: absolute;
    top: 48px;
    left: 20px;
    max-width: min(320px, calc(100% - 40px));
    width: auto;
    margin: 0;
    padding: 16px 18px;
    z-index: 1;
  }

  .vision__intro::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.5) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(2px);
    pointer-events: none;
  }

  .vision__intro > * {
    position: relative;
    z-index: 1;
  }

  .vision__label {
    font-size: clamp(22px, 6vw, 28px);
    color: #a09080;
  }

  .vision__title {
    font-size: clamp(20px, 5vw, 28px);
    letter-spacing: 0.01em;
    color: #a09080;
  }

  .vision__title-row {
    display: block;
  }

  .vision__body {
    font-size: 14px;
  }

  .vision__body-line {
    letter-spacing: -0.02em;
    font-size: 13px;
  }

  .vision__message {
    position: absolute;
    right: 20px;
    bottom: 50px;
    display: block;
    width: max-content;
    max-width: calc(100% - 40px);
    margin: 0;
    margin-top: 0;
    align-self: auto;
    font-size: clamp(18px, 5vw, 24px);
  }

  .vision__message-inner {
    width: max-content;
    max-width: 100%;
  }

  .vision__message-row {
    display: block;
    width: 100%;
    margin: 0;
    margin-left: 0;
    padding: 0;
    text-align: right;
    transform: none;
    left: auto;
    position: static;
  }

  .site-footer__inner {
    min-height: auto;
    padding: 64px 20px 32px;
  }

  .site-footer__button {
    margin-bottom: 24px;
  }

  .site-footer__heading {
    font-size: clamp(22px, 6vw, 28px);
  }

  .site-footer__lead {
    font-size: clamp(24px, 7vw, 32px);
  }

  .site-footer__text {
    font-size: 14px;
  }

  .site-footer__divider {
    width: 90%;
  }
}

/* Hero intermediate PC — keep in sync with css/portfolio-style.css */
@media (min-width: 769px) and (max-width: 1200px) {
  .hero__content {
    padding-top: clamp(11vh, calc(10vh + 0.35vw), 14vh);
    padding-left: clamp(96px, calc(25vw + 2%), 32%);
  }

  .hero__catch {
    margin-bottom: clamp(28px, calc(1.4vw + 24px), 48px);
    font-size: clamp(22px, calc(1.4vw + 14px), 32px);
  }

  .hero__career {
    max-width: clamp(300px, calc(29vw + 40px), 420px);
  }

  .hero__career-lines,
  .hero__career-next {
    font-size: clamp(15px, calc(0.5vw + 12px), 18px);
  }

  .hero__career-next {
    margin-top: clamp(18px, calc(0.8vw + 14px), 28px);
  }

  .hero__sub {
    margin-top: clamp(16px, calc(0.7vw + 12px), 24px);
    font-size: clamp(10px, calc(0.15vw + 8px), 11px);
  }

  .hero__cta-btn {
    margin-top: clamp(18px, calc(0.8vw + 14px), 28px);
    padding: clamp(8px, calc(0.25vw + 6px), 10px) clamp(16px, calc(1.2vw + 10px), 24px);
    font-size: clamp(9px, calc(0.12vw + 7px), 10px);
  }
}

/* CAREER — intermediate PC (769px–1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
  .career-section {
    min-height: auto;
    overflow: hidden;
  }

  .career-section__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(420px, 43vw, 621px);
    height: auto;
    align-items: stretch;
  }

  .career-hotelier__visual,
  .career-tv-crew__visual,
  .career-people-organization__visual,
  .career-writer__visual,
  .career-hotelier__content,
  .career-tv-crew__content,
  .career-people-organization__content,
  .career-writer__content {
    min-width: 0;
  }

  .career-hotelier__inner,
  .career-tv-crew__inner,
  .career-people-organization__inner {
    box-sizing: border-box;
    padding: clamp(32px, 4vw, 59px) clamp(20px, 2.5vw, 65px) clamp(24px, 3vw, 48px)
      clamp(24px, 8vw, 103px);
  }

  .career-writer__inner {
    box-sizing: border-box;
    padding: clamp(36px, 4.5vw, 68px) clamp(20px, 2.5vw, 65px) clamp(24px, 3vw, 48px)
      clamp(24px, 9vw, 115px);
  }

  .career-hotelier__title,
  .career-tv-crew__title,
  .career-writer__title {
    font-size: clamp(32px, calc(4vw + 10px), 51px);
    letter-spacing: clamp(0.08em, 0.1em, 0.14em);
  }

  .career-people-organization__title {
    font-size: clamp(26px, calc(3.5vw + 8px), 46px);
    letter-spacing: clamp(0.05em, 0.08em, 0.12em);
  }

  .career-hotelier__title-line,
  .career-tv-crew__title-line,
  .career-people-organization__title-line,
  .career-writer__title-line {
    max-width: 100%;
    margin-top: clamp(10px, 1.2vw, 16px);
  }

  .career-hotelier__accent,
  .career-tv-crew__accent,
  .career-people-organization__accent,
  .career-writer__accent {
    margin-top: clamp(12px, 1.5vw, 20px);
    font-size: clamp(22px, calc(2vw + 14px), 38px);
  }

  .career-hotelier__hook,
  .career-tv-crew__hook,
  .career-people-organization__hook,
  .career-writer__hook {
    margin-top: clamp(6px, 0.8vw, 8px);
    font-size: clamp(14px, calc(0.8vw + 10px), 20px);
  }

  .career-hotelier__body,
  .career-tv-crew__body,
  .career-writer__body {
    margin-top: clamp(16px, 2vw, 26px);
    font-size: 14px;
  }

  .career-people-organization__experiences {
    margin-top: clamp(16px, 2vw, 26px);
  }

  .career-people-organization__experience + .career-people-organization__experience {
    margin-top: clamp(10px, 1.2vw, 14px);
  }

  .career-people-organization__experience-label {
    font-size: clamp(9px, 0.6vw + 7px, 11px);
  }

  .career-people-organization__experience-desc {
    font-size: 14px;
  }

  .career-hotelier__divider,
  .career-tv-crew__divider,
  .career-people-organization__divider,
  .career-writer__divider {
    max-width: 100%;
    margin-top: clamp(20px, 2.5vw, 36px);
  }

  .career-hotelier__skills,
  .career-tv-crew__skills,
  .career-people-organization__skills,
  .career-writer__skills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 1.2vw, 24px);
    width: 100%;
    max-width: 100%;
    margin-top: clamp(20px, 2.5vw, 32px);
  }

  .career-hotelier__skill,
  .career-tv-crew__skill,
  .career-people-organization__skill,
  .career-writer__skill {
    min-width: 0;
  }

  .career-hotelier__skill-icon,
  .career-tv-crew__skill-icon,
  .career-people-organization__skill-icon,
  .career-writer__skill-icon {
    width: clamp(28px, 3.5vw, 48px);
    height: clamp(28px, 3.5vw, 48px);
  }

  .career-hotelier__skill-label,
  .career-tv-crew__skill-label,
  .career-people-organization__skill-label,
  .career-writer__skill-label {
    margin-top: clamp(8px, 1vw, 12px);
    font-size: clamp(9px, calc(0.55vw + 6px), 10px);
    letter-spacing: clamp(0.04em, 0.06em, 0.1em);
    line-height: 1.2;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .career-writer__publications {
    flex-wrap: wrap;
    gap: clamp(16px, 2vw, 32px);
    margin-top: clamp(18px, 2vw, 28px);
    max-width: 100%;
  }

  .career-writer__publication-cover {
    width: clamp(64px, 8vw, 100px);
  }

  .career-writer__publication--note {
    width: min(100%, clamp(180px, 22vw, 310px));
  }

  .career-writer__publication-label {
    font-size: clamp(9px, calc(0.6vw + 7px), 11px);
  }

  .career-writer__publication-link {
    font-size: clamp(8px, calc(0.5vw + 6px), 10px);
  }

  .career-writer__skills {
    margin-top: clamp(24px, 3vw, 38px);
  }

  /* BUILD → WHY ENGINEERING transition */
  .career-transition {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: clamp(560px, calc(43.125vw + 160px), 720px);
    padding-top: clamp(53px, 6.94vw, 100px);
    padding-bottom: clamp(53px, 6.94vw, 100px);
    overflow: visible;
    box-sizing: border-box;
  }

  .career-transition__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(360px, 43.125vw, 521px);
    height: auto;
  }

  .career-transition__tagline {
    padding-bottom: clamp(43px, 5.56vw, 80px);
  }

  .career-transition__build {
    margin-top: clamp(8px, 1vw, 12px);
    font-size: clamp(52px, calc(2.8vw + 32px), 85px);
    letter-spacing: 0.14em;
  }

  /* FAQ — PC grid & icon alignment */
  .faq__inner {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .faq__hero {
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
    gap: clamp(20px, 2.778vw, 40px);
    min-width: 0;
    max-width: 100%;
  }

  .faq__hero-copy {
    min-width: 0;
    max-width: 100%;
  }

  .faq__lead-row:nth-child(2) {
    white-space: nowrap;
  }

  .faq__hero-visual {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
  }

  .faq__hero-visual img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .faq-item__inner {
    display: grid;
    grid-template-columns: 7% 28% 10% 5% 50%;
    grid-template-areas: none;
    gap: 0;
    align-items: start;
    padding-block: 18px;
  }

  .faq-item__number,
  .faq-item__question,
  .faq-item__icon-wrap,
  .faq-item__answer-label,
  .faq-item__answer {
    grid-area: auto;
  }

  .faq-item__number {
    padding-top: 6px;
    font-size: clamp(36px, calc(2.22vw + 24px), 40px);
  }

  .faq__list .faq-item .faq-item__inner .faq-item__question {
    padding-right: 8px;
    font-size: clamp(18px, calc(1.28vw + 11px), 25px);
    line-height: 1.32;
  }

  .faq-item__question-line {
    display: contents;
  }

  .faq-item__question-br {
    display: none;
  }

  .faq-item__icon-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 6px;
  }

  .faq-item__icon {
    width: clamp(44px, 5vw, 56px);
    height: clamp(44px, 5vw, 56px);
    min-width: clamp(44px, 5vw, 56px);
    min-height: clamp(44px, 5vw, 56px);
  }

  .faq-item__answer-label {
    align-self: start;
    padding-top: 0;
    padding-left: 20px;
    font-size: clamp(28px, calc(2.22vw + 12px), 32px);
  }

  .faq-item__answer {
    align-self: start;
    padding-top: 0;
    padding-right: 8px;
    padding-left: 4px;
  }

  /* WHAT'S NEXT — restore section height */
  .vision {
    min-height: 100vh;
  }

  .vision__bg img {
    object-fit: cover;
    object-position: center 42%;
  }

  .vision__content {
    min-height: 100vh;
    padding: 0;
  }

  .vision__intro {
    top: clamp(40px, 4.51vw, 65px);
    left: clamp(32px, 3.82vw, 55px);
    max-width: clamp(340px, calc(21vw + 210px), 400px);
  }

  .vision__intro::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -20px;
    right: -24px;
    bottom: -20px;
    left: -24px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.65) 35%,
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(1px);
    pointer-events: none;
  }

  .vision__intro > * {
    position: relative;
    z-index: 1;
  }

  .vision__label {
    font-size: clamp(24px, calc(1.5vw + 16px), 28px);
  }

  .vision__rule {
    width: clamp(72px, calc(5vw + 36px), 90px);
    margin: clamp(5px, 0.6vw, 6px) 0 clamp(10px, 1.2vw, 12px);
    margin-right: auto;
    margin-left: 0;
  }

  .vision__title {
    margin-bottom: clamp(12px, 1.4vw, 14px);
    font-size: clamp(24px, calc(1.6vw + 16px), 30px);
    line-height: 1.45;
  }

  .vision__title-row:nth-child(2) {
    white-space: nowrap;
  }

  .vision__body {
    font-size: clamp(13px, calc(0.6vw + 10px), 15px);
    line-height: 1.45;
  }

  .vision__body p {
    margin-bottom: clamp(6px, 0.8vw, 8px);
  }

  .vision__body-line {
    display: inline-block;
    max-width: 16em;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: normal;
  }

  .vision__message {
    position: absolute;
    right: clamp(32px, 3.82vw, 55px);
    bottom: clamp(48px, 5vw, 72px);
    display: block;
    width: max-content;
    max-width: calc(100% - clamp(64px, 7.64vw, 110px));
    margin: 0;
    align-self: auto;
    font-size: clamp(22px, calc(1.5vw + 14px), 28px);
    line-height: 1.65;
  }

  .vision__message-inner {
    width: max-content;
    max-width: 100%;
  }

  .vision__message-row {
    display: block;
    width: 100%;
    margin: 0;
    text-align: right;
  }

  /* WHY ENGINEERING — 1 column layout */
  .why-engineering {
    min-height: auto;
    overflow-x: hidden;
  }

  .why-engineering__grid {
    display: flex;
    flex-direction: column;
    min-height: auto;
    max-width: 100%;
  }

  .why-engineering__left {
    order: 1;
    justify-content: flex-start;
    width: 100%;
    max-width: min(720px, 100%);
    margin-inline: auto;
    padding: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px) 0;
    box-sizing: border-box;
  }

  .why-engineering__right {
    order: 2;
    width: 100%;
    max-width: min(720px, 100%);
    margin-inline: auto;
    padding: clamp(32px, 4vw, 48px) clamp(40px, 5vw, 64px) clamp(40px, 5vw, 64px);
    box-sizing: border-box;
  }

  .why-engineering__title {
    font-size: clamp(32px, calc(3.5vw + 12px), 54px);
    letter-spacing: clamp(0.08em, 0.1em, 0.14em);
  }

  .why-engineering__title-line {
    max-width: 100%;
    margin-top: clamp(12px, 1.5vw, 16px);
  }

  .why-engineering__hook {
    margin-top: clamp(20px, 2.5vw, 28px);
    font-size: clamp(17px, calc(1vw + 14px), 21px);
  }

  .why-engineering__block + .why-engineering__block {
    margin-top: clamp(28px, 3.5vw, 40px);
  }

  .why-engineering__number {
    font-size: clamp(40px, calc(4vw + 16px), 56px);
  }

  .why-engineering__lead {
    margin-top: clamp(12px, 1.5vw, 16px);
    font-size: clamp(17px, calc(1vw + 14px), 21px);
  }

  .why-engineering__lead-line {
    white-space: normal;
  }

  .why-engineering__body {
    margin-top: clamp(16px, 2vw, 20px);
    font-size: clamp(12px, calc(0.35vw + 10px), 14px);
    max-width: 100%;
  }

  .why-engineering__emphasis {
    margin-top: clamp(24px, 3vw, 32px);
    font-size: clamp(16px, calc(0.9vw + 12px), 20px);
  }

  .why-engineering__closing-spacer {
    display: none;
  }

  .why-engineering__closing {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: min(720px, 100%);
    margin-inline: auto;
    padding: 0 clamp(40px, 5vw, 64px) clamp(48px, 6vw, 72px);
    box-sizing: border-box;
  }

  .why-engineering__cta {
    font-size: clamp(28px, calc(3vw + 12px), 40px);
  }

  /* WHAT I CAN DO — bottom breathing room & CTA spacing */
  .what-i-can-do.l-section {
    padding-bottom: clamp(68px, calc(4.17vw + 48px), 88px);
  }

  .what-i-can-do__footer {
    margin-top: clamp(100px, calc(5.56vw + 55px), 120px);
  }
}