@charset "UTF-8";

/* =============================================================
   ハイテクインター株式会社 採用サイト
   index.html 用 スタイルシート
   ============================================================= */

/* ----- 0. Reset / Base ----------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip は hidden と違いスクロール用コンテナを生成しないため、
     垂直スクロールバー幅と 100vw の差分等で生じる横スクロールを確実に抑止する */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  font-feature-settings: "palt";
  color: #002c5b;
  background: #fff;
  line-height: 1.7;
  letter-spacing: 0.05em;
  /* clip 未対応ブラウザ向けに hidden をフォールバック。
     html 側で clip が効けば body も同様に水平方向へスクロールしない */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

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

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

:root {
  --color-navy: #002c5b;
  --color-teal: #2bb9b0;
  --color-teal-light: #e6f7f5;
  --color-text: #002c5b;
  --color-white: #ffffff;
  --max-width: 1280px;
  --sub-max-width: 1200px; /* 下層ページのメインコンテンツ最大幅 */
  --side-padding: clamp(20px, 4vw, 80px);

  --font-en: "Inter", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
}

/* ----- 1. Common ------------------------------------------------ */
.section {
  padding: clamp(60px, 8vw, 130px) 0;
}

.section__inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

.section__eyebrow {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 83px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
  line-height: 1;
  margin: 0 0 24px;
}

.section__lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 25px);
  color: var(--color-teal);
  letter-spacing: 0.05em;
  margin: 0 0 18px;
  line-height: 1.5;
}

.section__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 50px);
  color: var(--color-teal);
  letter-spacing: 0.05em;
  margin: 0 0 28px;
  line-height: 1.4;
}

.section__desc {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 18px);
  color: var(--color-navy);
  line-height: 1.85;
  letter-spacing: 0.05em;
  margin: 0;
}

.is-accent {
  color: var(--color-teal);
}

/* arrow icon (chevron + line) */
.arrow {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 12px;
  flex-shrink: 0;
}

.arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* primary CTA button (pill) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 280px;
  padding: 22px 48px;
  background: var(--color-teal);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(43, 185, 176, 0.25);
}

.btn-primary .arrow {
  color: #fff;
}

.btn-primary:hover {
  opacity: 1;
  background: #25a59c;
}

/* ----- 2. Header ----------------------------------------------- */
/* スクロールに追従しない仕様（position: absolute でページ上部に重ねるだけ） */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 20px clamp(20px, 3vw, 60px);
  background: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1760px;
  margin: 0 auto;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__logo img {
  width: 200px;
  height: auto;
}

.site-header__logo-text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  color: #000;
  letter-spacing: 0.15em;
}

.gnav__list {
  display: flex;
  align-items: center;
  gap: 0;
  /* モバイル版ヘッダーと同様の半透明背景＋ぼかし */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
  padding: 6px 32px 6px 32px;
  height: 60px;
}

.gnav__item {
  position: relative;
}

.gnav__link {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-navy);
  letter-spacing: 0.11em;
  white-space: nowrap;
  border-radius: 50px;
}

.gnav__link.is-current,
.gnav__link:hover {
  color: var(--color-teal);
  opacity: 1;
}

.gnav__item--cta {
  margin-left: 12px;
}

.gnav__link--cta {
  background: var(--color-teal);
  color: #fff !important;
  padding: 0 28px;
  font-weight: 700;
}

.gnav__link--cta:hover {
  background: #25a59c;
}

/* PCナビ：ホバーで表示するドロップダウン（サブ項目） */
.gnav__sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 101;
}

/* リンクとドロップダウンの隙間でホバーが切れないための透明ブリッジ */
.gnav__sub::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
}

.gnav__item:hover .gnav__sub,
.gnav__item:focus-within .gnav__sub {
  opacity: 1;
  visibility: visible;
}

.gnav__sub a {
  position: relative;
  display: block;
  padding: 11px 24px 11px 40px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-navy);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.gnav__sub a::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--color-teal);
  border-right: 1px solid var(--color-teal);
  transform: translateY(-50%) rotate(45deg);
}

.gnav__sub a:hover {
  color: var(--color-teal);
  opacity: 1;
}

.hamburger {
  display: none;
}

.sp-menu {
  display: none;
}

/* ----- 3. Hero ------------------------------------------------- */
.hero {
  position: relative;
  padding-top: 100px;
  /* hero-main.png (1347x2103) は絶対配置で width 70vw(最大1347px) にスケールするため、
   * 画面幅が広い環境ではセクション下の ABOUT 見出しへ写真がはみ出して重なる。
   * 画像の実高さぶんの min-height を確保し、後続コンテンツを必ず画像の下へ送る */
  min-height: calc(min(70vw, 1347px) * 1.5613 + 60px);
}

.hero__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 620px;
}

.hero__copy {
  position: relative;
  padding: 80px clamp(20px, 6vw, 120px) 100px clamp(40px, 8vw, 200px);
  z-index: 4;
  max-width: 720px;
}

.hero__title {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.45;
  letter-spacing: 0.03em;
  color: var(--color-navy);
  margin: 0 0 50px;
  white-space: nowrap;
}

.hero__lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0;
}

/* image 6：透過PNGの有機的シェイプを活かして右上から大きく配置。Mask group (vision) より上に重ねる */
.hero__visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  max-width: 1347px;
  z-index: 3;
  pointer-events: none;
}

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

/* Vision block (teal rectangle, left half) */
/* 背景teal は image 6 より下、テキストは image 6 より上に重ねる */
.vision {
  position: relative;
  color: #fff;
  margin-top: 0;
  padding: clamp(60px, 7vw, 130px) clamp(40px, 6vw, 100px) clamp(60px, 7vw, 130px) clamp(40px, 8vw, 256px);
  width: 50%;
  max-width: 960px;
}

.vision::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-teal);
  border-radius: 0 60px 60px 0;
  z-index: 1;
}

.vision__inner {
  position: relative;
  z-index: 4;
  max-width: 540px;
}

.vision__title {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.6;
  color: #fff;
  margin: 0 0 32px;
  letter-spacing: 0.02em;
}

.vision__subtitle {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 19px);
  line-height: 1.7;
  color: #fff;
  margin: 0 0 36px;
  letter-spacing: 0.05em;
}

.vision__text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.95;
  color: #fff;
  margin: 0;
  letter-spacing: 0.05em;
}

/* ----- 4. ABOUT ------------------------------------------------ */
.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

/* Group 187：740x821 のコンテナに 2つの円を重ねるレイアウト */
.about__images {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 740 / 821;
  margin: 0 auto;
  justify-self: center;
}

.about__image {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* image 4：大きい円 (608/740 = 82%)。右上に配置。画像左寄り部分を表示 */
.about__image--1 {
  width: 82%;
  top: 0;
  right: 0;
}

.about__image--1 img {
  object-position: 27% center;
}

/* image 5：小さい円 (386/740 = 52%)。左下に配置 (大円と一部重なる)。画像右寄り部分を表示 */
.about__image--2 {
  width: 52%;
  bottom: 0;
  left: 0;
}

.about__image--2 img {
  object-position: 75% center;
}

.about__body {
  position: relative;
}

.about__menu {
  margin-top: 50px;
}

.about__menu li {
  border-bottom: 1px solid #cfd9e3;
}

.about__menu li:first-child {
  border-top: 1px solid #cfd9e3;
}

.about__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 8px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--color-navy);
  letter-spacing: 0.05em;
}

.about__menu a:hover {
  opacity: 1;
  color: var(--color-teal);
}

.about__menu .arrow {
  color: var(--color-navy);
}

.about__menu a:hover .arrow {
  color: var(--color-teal);
}

/* ----- 5. MEMBER ----------------------------------------------- */
.member__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.4fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}

.member__body {
  padding-top: 20px;
}

.member__special {
  position: relative;
  background: var(--color-teal);
  border-radius: 30px 0 0 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 30px);
  /* ビューポート右端まで延長（フルブリード）*/
  width: calc(100% + var(--side-padding) + max(0px, (100vw - var(--max-width)) / 2));
  margin-right: calc(-1 * (var(--side-padding) + max(0px, (100vw - var(--max-width)) / 2)));
  /* 右側のはみ出し分を padding に加算してコンテンツは元の幅に収める */
  padding: clamp(28px, 3vw, 50px) calc(clamp(28px, 3vw, 50px) + var(--side-padding) + max(0px, (100vw - var(--max-width)) / 2)) clamp(80px, 9vw, 160px) clamp(28px, 3vw, 50px);
}

/* 上段：画像 + テキスト + 矢印 */
.member__special-top {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: center;
  color: #fff;
}

.member__special-top:hover {
  opacity: 0.85;
}

.member__special-image {
  border-radius: 14px;
  overflow: hidden;
  width: clamp(180px, 22vw, 296px);
  aspect-ratio: 296 / 163;
}

.member__special-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member__special-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.member__special-label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: 0.05em;
  margin: 0;
  color: #fff;
  white-space: nowrap;
}

.member__special-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  margin: 0;
  color: #fff;
}

.member__special-arrow.arrow {
  color: #fff;
  width: 36px;
}

.member__special-arrow.arrow::after {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
}

/* 区切り線 */
.member__special-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

/* 下段：メインCTA（左右ナビ矢印は撤去済み。自動スライドのみ） */
.member__special-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
}

.arrow--prev {
  transform: scaleX(-1);
}

.member__special-btn {
  justify-self: end;
  min-width: 240px;
  background: #fff;
  color: var(--color-navy);
  padding: 16px 28px;
  font-size: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.member__special-btn .arrow {
  color: var(--color-navy);
}

.member__special-btn:hover {
  background: #f3fbfa;
  color: var(--color-navy);
}

/* Group 183：5枚の写真をビューポート幅で右→左に無限ループ */
.member__marquee {
  grid-column: 1 / -1;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  margin-top: clamp(-180px, -12vw, -80px);
  overflow: hidden;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.member__list {
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 1.7vw, 35px);
  width: max-content;
  animation: member-marquee 40s linear infinite;
}

.member__marquee:hover .member__list {
  animation-play-state: paused;
}

.member__list li {
  flex: 0 0 auto;
  width: clamp(240px, 20vw, 385px);
  aspect-ratio: 385 / 276;
  overflow: hidden;
  background: #ddd;
  border-radius: 10px;
}

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

@keyframes member-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .member__list {
    animation: none;
  }
}

/* ----- 6. BENEFITS --------------------------------------------- */
.benefits {
  background: #fff;
}

.benefits__head {
  text-align: center;
  margin: 0 auto 70px;
  max-width: 720px;
}

.benefits__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 60px);
  max-width: 1280px;
  margin: 0 auto;
}

.benefits__item a {
  position: relative;
  display: block;
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.benefits__item a:hover {
  opacity: 1;
}

/* リング装飾は背景レイヤーとして全面に */
.benefits__rings {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.benefits__rings svg {
  width: 100%;
  height: 100%;
}

/* リング内側にアイコン・ラベル・矢印を縦並びで中央配置 */
.benefits__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  text-align: center;
}

.benefits__pic {
  width: 26%;
  height: auto;
  flex-shrink: 0;
}

.benefits__label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 20px);
  color: var(--color-navy);
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.benefits__arrow {
  color: var(--color-teal);
  width: 24px;
}

.benefits__arrow::after {
  width: 8px;
  height: 8px;
}

.benefits__item a:hover .benefits__label {
  color: var(--color-teal);
}

.benefits__item a:hover .benefits__rings {
  transform: rotate(45deg);
  transition: transform 0.6s ease;
}

/* ----- 7. ENTRY ------------------------------------------------ */
.entry {
  position: relative;
  padding: 110px 20px;
  /* 背景: Mask group.png (ティールの色味が既に焼き込まれた写真) */
  background: url("../images/entry-bg2.png") center / cover no-repeat;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.entry__inner {
  position: relative;
  z-index: 1;
}

.entry__eyebrow {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 35px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0 0 24px;
  line-height: 1;
}

.entry__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 50px);
  letter-spacing: 0.05em;
  margin: 0 0 48px;
  color: #fff;
  line-height: 1.4;
}

.entry__btn {
  background: #fff;
  color: var(--color-navy);
  min-width: 320px;
  padding: 22px 48px;
  font-size: 18px;
}

.entry__btn .arrow {
  color: var(--color-navy);
}

.entry__btn:hover {
  background: #f3fbfa;
}

/* ----- 8. Footer ----------------------------------------------- */
/* Figma「アセット 2 1」のグラデーション: 白 (上) → ライトミント (下) */
.site-footer {
  position: relative;
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 45%, #e9f8f7 80%, #d5f1ef 100%);
  padding: 80px clamp(20px, 4vw, 100px) 40px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.site-footer__logo img {
  width: 200px;
}

.site-footer__logo span {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-navy);
  letter-spacing: 0.15em;
}

.site-footer__address {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-navy);
  margin: 0 0 30px;
  letter-spacing: 0.05em;
}

.site-footer__copy {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-navy);
  margin: 0;
  letter-spacing: 0.05em;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 30px;
  padding-top: 12px;
}

/* カテゴリ見出し（リンク） */
.site-footer__nav-head {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-navy);
  letter-spacing: 0.05em;
}

.site-footer__nav-head::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--color-teal);
  border-right: 1px solid var(--color-teal);
  transform: rotate(45deg);
}

/* カテゴリ配下のページリンク */
.site-footer__nav-sub li {
  margin-bottom: 10px;
}

.site-footer__nav-sub a {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  color: #000;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

.site-footer__nav-sub a:hover {
  color: var(--color-teal);
}

/* 補助リンク（ホーム/プライバシーポリシー/コーポレートサイト）は下線テキスト */
.site-footer__nav-sub--plain a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* スクロールに関わらず右下に固定表示 */
.pagetop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-block;
  width: 130px;
  height: 130px;
  transition: transform 0.3s ease;
}

/* Figma: 回転する "PAGE TOP" バッジの中央に teal カラーの上矢印 ↑ を重ねる。
   .pagetop__circle のみ回転させ、矢印 (擬似要素) は回転させない */
.pagetop::before,
.pagetop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--color-teal);
}

.pagetop::before {
  /* 縦線部分 */
  width: 2px;
  height: 30%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -42%);
}

.pagetop::after {
  /* 先端の V 字 (チェブロン) を上向きに */
  width: 18%;
  aspect-ratio: 1 / 1;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-top-left-radius: 2px;
  transform: translate(-50%, -50%) translateY(-26%) rotate(45deg);
}

.pagetop:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.pagetop__circle {
  display: block;
  width: 100%;
  height: 100%;
  animation: rotate 24s linear infinite;
}

.pagetop__circle img {
  width: 100%;
  height: 100%;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   レスポンシブ：タブレット / SP（SP_TOP デザインに準拠）
   ============================================================ */

/* ----- 中型タブレット ----------------------------------------- */
@media (max-width: 1100px) {
  .hero {
    /* visual 幅 75vw に合わせて画像の高さぶんを確保 */
    min-height: calc(75vw * 1.5613 + 60px);
  }

  .hero__inner {
    min-height: auto;
  }

  .hero__copy {
    padding-top: 60px;
    padding-bottom: 60px;
    max-width: 60%;
  }

  .hero__visual {
    width: 75%;
  }

  .vision {
    width: 75%;
    max-width: none;
  }

  .vision__inner {
    padding-left: clamp(40px, 6vw, 160px);
  }

  .about__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .about__images {
    max-width: 420px;
  }

  .member__inner {
    grid-template-columns: 1fr;
  }

  .member__list li {
    width: clamp(220px, 22vw, 320px);
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .pagetop {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* ----- SP（〜768px）------------------------------------------- */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  :root {
    --side-padding: 20px;
  }

  /* ----- Header ----- */
  .site-header {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .site-header__logo img {
    width: 140px;
  }

  .site-header__logo-text {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .gnav {
    display: none;
  }

  /* Figma SP: 92pxの白丸（薄いボーダー）+ ティールの3本線 (各30px) */
  .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e6ecf2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    color: var(--color-teal);
  }

  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-teal);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
  }

  .hamburger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .sp-menu {
    display: block;
    /* ヘッダー（position: fixed）の直下に張り付かせるため、
       固定の top 値ではなく親ヘッダーの下端 (top: 100%) に置く */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    padding: 24px 20px;
    z-index: 99;
  }

  .sp-menu[hidden] {
    display: none;
  }

  .sp-menu__list li + li {
    margin-top: 4px;
  }

  .sp-menu__list a {
    display: block;
    padding: 16px 12px;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-navy);
    border-bottom: 1px solid #e6ecf2;
  }

  /* カテゴリ配下のサブリンク */
  .sp-menu__sub {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sp-menu__sub li + li {
    margin-top: 0;
  }

  .sp-menu__sub a {
    position: relative;
    padding: 13px 12px 13px 30px;
    font-weight: 500;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #eef3f7;
  }

  .sp-menu__sub a::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--color-teal);
    border-right: 1px solid var(--color-teal);
    transform: translateY(-50%) rotate(45deg);
  }

  .sp-menu__cta {
    background: var(--color-teal);
    color: #fff !important;
    border-radius: 999px;
    text-align: center;
    border: 0 !important;
    margin-top: 14px;
  }

  /* ----- Hero ----- */
  /* Figma SP: image 6（透過PNG）の下半分に「つながる未来を、一緒につくろう。」が重なって表示される */
  .hero {
    padding-top: 70px;
    overflow: hidden;
    min-height: 0; /* SP は visual が通常フローになるため確保不要 */
  }

  .hero__inner {
    position: relative;
    display: block;
    min-height: auto;
  }

  .hero__visual {
    position: relative;
    order: 0;
    top: auto;
    right: auto;
    width: calc(100% - 24px);
    max-width: 100%;
    margin: 0 0 0 24px;
    z-index: 1;
  }

  .hero__visual img {
    width: 100%;
    height: auto;
  }

  .hero__copy {
    position: relative;
    padding: 20px 18px 30px;
    margin-top: -28%;
    text-align: left;
    max-width: 100%;
    z-index: 2;
  }

  .hero__title {
    font-size: clamp(32px, 9.6vw, 40px);
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin-bottom: 26px;
    white-space: normal;
  }

  .hero__lead {
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.85;
  }

  /* ----- Vision ----- */
  /* Figma SP: 722/750 = 96.3% 幅、角丸 ~30px (全周) */
  /* Figma SP: 緑背景は画面左端まで延びる。右側だけ角丸 (30px) でカード状に見せ、
     右端には 8px 程度の隙間を残してアクセントを付ける */
  .vision {
    width: calc(100% - 8px);
    max-width: none;
    margin: 40px 8px 0 0;
    padding: clamp(36px, 8vw, 60px) clamp(20px, 5vw, 32px) clamp(36px, 8vw, 60px) clamp(24px, 6vw, 40px);
    border-radius: 0 30px 30px 0;
    overflow: hidden;
  }

  .vision::before {
    border-radius: 0 30px 30px 0;
  }

  .vision__inner {
    padding: 0;
    max-width: none;
  }

  .vision__title {
    font-size: 26px;
    line-height: 1.6;
  }

  .vision__subtitle {
    font-size: 13px;
  }

  .vision__text {
    font-size: 13px;
    line-height: 1.95;
  }

  /* ----- common ----- */
  .section {
    padding: 60px 0;
  }

  /* Figma SP: 見出しグループ (EYEBROW / リード / タイトル / 説明文) は
     PC よりも各見出し間の余白を詰めて表示する */
  .section__eyebrow {
    font-size: 40px;
    margin-bottom: 12px;
  }

  .section__lead {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .section__title {
    font-size: 28px;
    margin-bottom: 14px;
  }

  .section__desc {
    font-size: 13px;
  }

  /* ----- ABOUT -----
     Figma SP: 大円 (about-1) は左上に約 81.6% 幅で配置、Vision (.hero 内) の右下に少し被る。
     小円 (about-2) は右下に 46.2% 幅で配置し、大円の下半分に上から被る。
     Figma container 比率 (680 / 699 ≈ 0.97) でアスペクト比を取り、絶対位置で重ね合わせる */
  .about.section {
    /* about__images が .hero に被るよう section の上余白を詰める */
    padding-top: 0;
    /* 兄弟である .hero (vision) より重ね順を上にして、.hero の上に約 5vw 被るよう演出する */
    position: relative;
    z-index: 2;
  }

  .about__images {
    width: 100%;
    max-width: none;
    aspect-ratio: 680 / 699;
    /* Vision (= .hero 末尾) に対し Figma 39px 相当 (= 39/750 × 100vw ≒ 5.2vw) 被せる。
       hero よりも前面に出すため、自身も positioned + z-index で持ち上げる */
    margin: -5.2vw 0 32px;
    position: relative;
    z-index: 2;
  }

  .about__image--1 {
    width: 81.6%;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
  }

  .about__image--2 {
    width: 46.2%;
    top: 55.1%;
    left: 53.8%;
    right: auto;
    bottom: auto;
  }

  .about__menu {
    margin-top: 30px;
  }

  .about__menu a {
    padding: 18px 4px;
    font-size: 15px;
  }

  /* Figma SP: 矢印はティール色 */
  .about__menu .arrow {
    color: var(--color-teal);
  }

  /* ----- MEMBER (SP) -----
     Figma SP_TOP: MEMBER 見出しと説明は白背景。その下に「ティールの緑カード」が広がり、
     カードの中身は ①Special Content (写真+テキスト+矢印) → ②区切り線 → ③写真マーキー → ④「社員紹介一覧」白ボタン の順。
     カードは左側に 30px の角丸、右側はビューポート端まで full-bleed。
     HTML 上では marquee が special の外側にあるが、display: contents + order で
     special の子要素と marquee を同列に並べ、CSS のみで 1 枚の緑カードに見せる */
  .member__inner {
    display: flex;
    flex-direction: column;
    /* カード内部の各要素は隙間なしで連結したいので gap は 0 にし、
       見出しブロックには margin-bottom を別途付けてカード上端との余白を確保 */
    gap: 0;
  }

  .member__body {
    margin-bottom: 28px;
  }

  /* 子 (member__special-top, divider, controls) を member__inner の flex item に昇格させ、
     兄弟である member__marquee と並んで順序制御できるようにする */
  .member__special {
    display: contents;
  }

  /* 緑カードを構成する 4 要素は同じ緑背景＋ビューポート右端まで full-bleed */
  .member__special-top,
  .member__special-divider,
  .member__marquee,
  .member__special-controls {
    background: var(--color-teal);
    width: calc(100% + var(--side-padding));
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: calc(var(--side-padding) * -1);
  }

  /* カード最上段: Special Content の写真 + ラベル/タイトル + 矢印。左上に 30px の角丸 */
  .member__special-top {
    order: 2;
    color: #fff;
    border-radius: 30px 0 0 0;
    padding: 24px 24px 18px;
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
  }

  .member__special-image {
    width: 100%;
    aspect-ratio: 329 / 216;
    border-radius: 12px;
    grid-column: auto;
  }

  .member__special-text {
    gap: 4px;
    min-width: 0;
  }

  /* Figma SP: 「Special Content」ラベルだけ白で、タイトル本文と矢印は navy (#002c5b) */
  .member__special-label {
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .member__special-title {
    color: var(--color-navy);
    font-size: 15px;
    line-height: 1.4;
  }

  .member__special-arrow.arrow {
    align-self: center;
    color: var(--color-navy);
  }

  /* 区切り線: 緑背景の中に白半透明の 1px ライン。padding で左右に余白を取る */
  .member__special-divider {
    order: 3;
    height: auto;
    padding: 0 24px;
    margin: 0;
    position: relative;
  }
  .member__special-divider::after {
    content: "";
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
  }

  /* 写真マーキー: 緑カード内に水平スクロール。PC 用の 100vw / translateX は解除 */
  .member__marquee {
    order: 4;
    padding: 22px 0;
    margin-top: 0;
    position: relative;
    left: auto;
    transform: none;
    /* SP では左右の白フェードを出さない (緑カードと連続させたいため mask を解除) */
    -webkit-mask-image: none;
            mask-image: none;
  }

  .member__list {
    gap: 12px;
    animation-duration: 30s;
  }

  .member__list li {
    width: 200px;
  }

  /* 「社員紹介一覧」白ボタンを内包するカード最下段。左下に 30px の角丸 */
  .member__special-controls {
    order: 5;
    border-radius: 0 0 0 30px;
    padding: 4px 24px 28px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .member__special-btn {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    background: #fff;
    color: var(--color-navy);
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  /* Figma SP: 矢印は teal カラー / 線は太めで丸端 / チェブロンは線より大きい "→" */
  .member__special-btn .arrow {
    color: var(--color-teal);
    width: 34px;
    height: 16px;
  }
  .member__special-btn .arrow::before {
    /* 線：少し太く、左右に丸み (currentColor で teal が反映される) */
    left: 4px;
    width: calc(100% - 12px);
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translateY(-50%);
  }
  .member__special-btn .arrow::after {
    /* チェブロン：線より大きく、太めのストロークで丸い角 */
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-top-right-radius: 2px;
  }

  .member__special-btn:hover {
    background: #f3fbfa;
  }
  .member__special-btn:hover .arrow {
    color: var(--color-teal);
  }

  /* ----- BENEFITS ----- */
  /* Figma SP: BENEFITS / 見出し / リード / 本文 はすべて左寄せ */
  .benefits__head {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .benefits__list {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .benefits__item a {
    width: 240px;
  }

  .benefits__pic {
    width: 28%;
  }

  .benefits__label {
    font-size: 15px;
  }

  /* ----- ENTRY ----- */
  .entry {
    padding: 70px 20px;
  }

  .entry__title {
    font-size: 22px;
    margin-bottom: 32px;
  }

  .entry__btn {
    min-width: 0;
    width: 100%;
    padding: 18px 24px;
    font-size: 16px;
  }

  .btn-primary {
    min-width: 0;
    width: 100%;
    padding: 18px 24px;
    font-size: 16px;
  }

  /* ----- Footer ----- */
  .site-footer {
    padding: 60px 20px 40px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .site-footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .site-footer__logo img {
    width: 160px;
  }

  .pagetop {
    width: 100px;
    height: 100px;
    right: 16px;
    bottom: 16px;
  }
}

/* =================================================================
 * 7. SUB PAGES SHARED  (about/people/benefits 系で再利用するパーツ)
 * ============================================================== */

/* ----- ページヒーロー（ABOUT / MEMBER / BENEFITS など） ----- */
.page-hero {
  padding-top: 120px; /* fixed header の高さ分逃がす */
  background: #fff;
}

.page-hero__inner {
  position: relative;
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

/* ヒーロー画像 — Figma PC_xxx の Mask group (1440×460)
 *   ・左側に heading 領域 (~200px) を確保
 *   ・右側は viewport の右端まで bleed (sub-max-width の外側まで extend)
 *   ・高さは 460px 固定 (clamp で小さい viewport では縮小)
 *   ・border-radius は 10px (Figma の控えめな角丸に合わせる) */
.page-hero__visual {
  margin-left: clamp(80px, 14vw, 200px);
  margin-right: calc(-1 * (var(--side-padding) + max(0px, (100vw - var(--sub-max-width)) / 2)));
  height: clamp(280px, 32vw, 460px);
  border-radius: 10px;
  overflow: hidden;
}

.page-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像は表示範囲内で左寄せにし、はみ出す分は右側を切る */
  object-position: left center;
}

/* heading — visual の左側 (margin-left で空けたエリア) に absolute 配置
 *   Figma: hero (460px) 上端から ~39% (180px) の位置に BENEFITS を配置
 *   = hero の縦中央〜上寄りに重なる */
.page-hero__heading {
  position: absolute;
  left: var(--side-padding);
  top: clamp(110px, 14vw, 200px);
}

.page-hero__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0;
}

.page-hero__pill {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 30px;
  background: var(--color-teal);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 20px);
  letter-spacing: 0.05em;
  border-radius: 999px;
}

/* ----- 会社を知る／環境を知る等のサブナビ (3〜4 リンク横並び) ----- */
.about-subnav {
  padding: 60px clamp(20px, 5vw, 80px) 80px;
  max-width: var(--sub-max-width);
  margin: 0 auto;
}

.about-subnav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 4vw, 60px);
}

.about-subnav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 8px 18px;
  /* セル高さいっぱいに伸ばし、隣の項目が改行しても下線位置を揃える */
  height: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #c9d3e0;
  color: var(--color-navy);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  transition: opacity 0.2s, border-color 0.2s;
}

.about-subnav__list a:hover {
  opacity: 1;
  border-color: var(--color-teal);
}

.about-subnav__list a[aria-current="page"] {
  border-color: var(--color-teal);
}

.about-subnav__list .arrow {
  color: var(--color-teal);
  flex-shrink: 0;
}

/* ----- 採用担当メッセージ -----
 * Figma 参照 (frame 1920px 幅):
 *   緑カード:  x=-11  → 805     (約 42% 幅 / 右へ 30px はみ出す portrait を内包)
 *   portrait:  x=442  → 834     (右端は緑カード(805)を 29px はみ出す)
 *   caption:   x=442            (portrait 左端と揃える)
 *   eyebrow:   x=360, y=885
 *   lead:      x=905, y=1065    (ユーザー要望で eyebrow と上端揃え)
 * ============================================================== */
.message {
  padding: 80px 0 120px;
  position: relative;
  overflow-x: clip; /* portrait のはみ出しを横スクロールさせない */
}

.message__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(50px, 8vw, 130px);
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding-right: clamp(20px, 5vw, 80px);
  align-items: stretch;
}

.message__card {
  position: relative;
  /* 背景は ::before で画面左端まで拡張 (コンテンツは 1200px 内に維持) */
  /* タイトルを左寄せにするため padding-left を小さく */
  padding: 50px clamp(20px, 3vw, 40px) 60px clamp(20px, 3vw, 50px);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: visible; /* portrait が右にはみ出せるよう */
  isolation: isolate;
}

.message__card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* 1200px より広いビューポートでは左端まで背景を拡張 */
  left: min(0px, calc((100vw - var(--sub-max-width)) / -2));
  background: var(--color-teal);
  border-radius: 0 30px 30px 0;
  z-index: -1;
}

.message__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.message__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0;
}

.message__eyebrow-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--color-navy);
  border-radius: 50%;
}

.message__title {
  font-size: clamp(28px, 3vw, 45px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}

/* portrait: カード内で右寄せ + 右端を少しはみ出させる
 * (transform translateX で padding-right(40px) を超えてはみ出させる) */
.message__portrait {
  margin: 0 0 0 auto;
  align-self: flex-end;
  width: min(460px, 95%);
  position: relative;
  transform: translateX(clamp(40px, 5vw, 75px));
}

.message__portrait img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

/* 正方形の顔写真用（採用担当者写真） */
.message__portrait--square {
  width: min(380px, 95%);
}
.message__portrait--square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* caption は figure 内に配置されるため自動的に photo 左端に揃う */
.message__caption {
  margin: 16px 0 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
}

/* body: 上端を eyebrow と同じ高さに揃える */
.message__body {
  padding-top: 50px;
}

.message__lead {
  font-size: clamp(22px, 2.4vw, 35px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-teal);
  margin: 0 0 28px;
}

.message__text {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-navy);
}

.message__text p {
  margin: 0 0 1.6em;
}

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

/* ----- 関連コンテンツ (3カード) ----- */
.related {
  padding: 40px 0 100px;
  background: #fff;
}

.related__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
}

.related__title {
  font-size: clamp(24px, 2.4vw, 35px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0 0 36px;
}

.related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(20px, 2vw, 30px);
}

.related__list--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.related-card {
  display: block;
  color: var(--color-navy);
  transition: opacity 0.2s;
}

.related-card:hover {
  opacity: 0.85;
}

.related-card__visual {
  position: relative;
  aspect-ratio: 370 / 178;
  border-radius: 10px;
  overflow: hidden;
}

.related-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma の各カードの色味オーバーレイ (mix-blend-multiply 相当) */
.related-card__visual--3min::after,
.related-card__visual--message::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-teal);
  mix-blend-mode: multiply;
  opacity: 0.4;
}

.related-card__visual--service::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #cdeafd;
  mix-blend-mode: multiply;
}

.related-card__big {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1;
  z-index: 1;
}

.related-card__num {
  font-size: clamp(56px, 6vw, 90px);
}

.related-card__unit {
  font-size: clamp(28px, 3vw, 40px);
  align-self: flex-end;
  padding-bottom: 8px;
}

.related-card__big--mid {
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 0.06em;
}

.related-card__big--small {
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.06em;
}

.related-card__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px 22px;
  border-bottom: 1px solid #c9d3e0;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-navy);
  transition: border-color 0.2s;
}

.related-card:hover .related-card__caption {
  border-color: var(--color-teal);
}

.related-card .arrow {
  color: var(--color-teal);
  flex-shrink: 0;
}

.related-card[aria-current="page"] .related-card__caption {
  border-color: var(--color-teal);
}

/* ----- こちらもみてみませんか? (薄グレー背景 + 2 カード) -----
 * Figma: 左側 clamp(40px, 8vw, 160px) を空けて右端まで広がる薄グレー
 * 角丸: 左上 / 左下 30px。次セクション(entry)との間にスペース必要。
 * ============================================================== */
.also {
  position: relative;
  padding: 90px 0 100px;
  margin-bottom: 100px; /* entry セクションとの間隔 */
}

.also::before {
  content: "";
  position: absolute;
  inset: 0 0 0 clamp(40px, 8vw, 160px);
  background: #f5f7fb;
  border-radius: 30px 0 0 30px;
  z-index: 0;
  pointer-events: none;
}

.also__inner {
  position: relative;
  z-index: 1;
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px) 0 clamp(80px, 13vw, 220px);
}

.also__title {
  font-size: clamp(24px, 2.4vw, 35px);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 36px;
  letter-spacing: 0.05em;
}

.also__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  gap: clamp(20px, 2vw, 30px);
}

.related-card--small .related-card__caption {
  padding: 16px 4px 18px;
  font-size: 16px;
}

/* =================================================================
 * 7-SP. サブページのレスポンシブ (≤768px)
 * ============================================================== */
@media (max-width: 1100px) {
  .message__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-right: 0;
  }

  .message__card {
    border-radius: 0 30px 30px 0;
    padding: 40px clamp(24px, 6vw, 60px) 48px clamp(24px, 5vw, 80px);
    margin-right: clamp(20px, 5vw, 80px);
  }

  .message__head {
    margin-bottom: 20px;
  }

  /* SP では portrait をはみ出さず中央寄せ */
  .message__portrait {
    margin: 8px auto 0;
    align-self: center;
    width: min(392px, 100%);
    transform: none;
  }

  .message__caption {
    text-align: left;
  }

  .message__body {
    padding: 0 clamp(20px, 5vw, 80px);
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding-top: 80px;
  }
  .page-hero__inner {
    padding: 0;
  }
  .page-hero__visual {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .page-hero__heading {
    position: static;
    padding: 24px var(--side-padding) 0;
    top: auto;
    left: auto;
  }
  .page-hero__title {
    font-size: clamp(36px, 12vw, 56px);
  }
  .page-hero__pill {
    margin-top: 12px;
    padding: 6px 22px;
    font-size: 14px;
  }

  .about-subnav {
    padding: 30px var(--side-padding) 40px;
  }
  /* スマホでも項目数に応じて列を維持（既定 = 3 項目 → 3 列） */
  .about-subnav__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  /* 2 項目 (人を知る) は 2 列 */
  .about-subnav__list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-subnav__list a {
    /* テキスト＋矢印を横並びにし、矢印は天地中央。文字は小さく */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 2px 14px;
    font-size: 12px;
    line-height: 1.45;
  }
  /* テキスト部分は列幅内で縮み、<wbr> の位置でのみ改行（語中で割れない） */
  .about-subnav__list a > span:first-child {
    flex: 1;
    min-width: 0;
    word-break: keep-all;
  }
  /* 矢印を小さく（線・矢じり両方を縮小） */
  .about-subnav__list .arrow {
    width: 18px;
    height: 10px;
  }
  .about-subnav__list .arrow::after {
    width: 6px;
    height: 6px;
  }

  .message {
    padding: 50px 0 70px;
    overflow-x: clip;
  }
  .message__card {
    padding: 32px 24px 40px;
    margin-right: 24px;
  }
  .message__title {
    font-size: 26px;
  }
  .message__body {
    padding: 0 var(--side-padding);
  }
  .message__lead {
    font-size: 22px;
    margin-bottom: 22px;
  }
  .message__text {
    font-size: 14px;
    line-height: 1.85;
  }
  .message__portrait {
    width: 100%;
  }

  .related {
    padding: 30px 0 60px;
  }
  .related__inner {
    padding: 0 var(--side-padding);
  }
  .related__title,
  .also__title {
    font-size: 24px;
    margin-bottom: 22px;
  }
  .related__list--three {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .related-card__caption {
    font-size: 16px;
    padding: 14px 4px 16px;
  }

  .also {
    padding: 60px 0 70px;
    margin-bottom: 60px;
  }
  .also::before {
    /* スマホ: 画面いっぱいの灰色背景 (左右端まで・角丸なし) */
    inset: 0;
    border-radius: 0;
  }
  .also__inner {
    padding: 0 var(--side-padding);
  }
  .also__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ----- 小型SP ------------------------------------------------- */
@media (max-width: 380px) {
  .hero__title {
    font-size: 26px;
  }

  .vision__title {
    font-size: 22px;
  }

  .section__eyebrow {
    font-size: 34px;
  }
}

/* =================================================================
 * 8. 3min ページ (ABOUT > ３分でわかるハイテクインター)
 * Figma: 02_3分 (node 18:105)  色: #75a6e5 をブルー枠で利用
 * ============================================================== */

/* ----- ページタイトル (Vision の前) ----- */
.three-min__title {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 70px var(--side-padding) 40px;
  text-align: center;
}
.three-min__eyebrow {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  position: relative;
  display: inline-block;
  padding-left: 22px;
  margin: 0 0 16px;
}
.three-min__eyebrow-dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-teal);
  transform: translateY(-50%);
}
.three-min__heading {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 55px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0;
  line-height: 1.4;
}

/* ----- POLICY (Vision / Mission / Value) -----
 * Figma 参照 (frame 1920px):
 *   Group 124 背景画像: x=-491, y=1044, 1603x1069 (世界地図/ネットワーク, 左寄せ)
 *   Policy タイトル:   x=362 (左)
 *   Vision label:      x=584 (~222px from 左 line start)
 *   Mission label:     x=555
 *   Value label:       x=597
 *   Body lead/text:    x=779 (~417px from 左 line start)
 * ============================================================== */
.policy {
  position: relative;
  padding: 50px 0 80px;
  overflow: hidden;
}
.policy::before {
  /* Group 124: 薄い世界地図 + ネットワーク背景 (左寄せで一部はみ出し) */
  content: "";
  position: absolute;
  top: 50px;
  left: -260px;
  width: 1050px;
  height: 700px;
  background: url("../images/3min/bg-policy.png") center / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.policy__inner {
  position: relative;
  z-index: 1;
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.policy__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 50px;
  color: var(--color-teal);
  margin: 0 0 20px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #d3dde9;
  padding-bottom: 18px;
}

/* Vision/Mission/Value のラベル+本文
 * ラベルは Policy タイトルと同じ左端に揃える（左寄せ） */
.policy__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 50px;
  padding: 50px 0;
  border-bottom: 1px solid #e3e9f1;
}
.policy__row:last-child {
  border-bottom: none;
}
.policy__label-en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 40px;
  color: #75a6e5;
  margin: 0;
  letter-spacing: 0.02em;
}
.policy__heading {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 30px;
  color: var(--color-navy);
  line-height: 1.6;
  margin: 0 0 28px;
}
.policy__text {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-navy);
  margin: 0 0 18px;
}
.policy__text:last-child {
  margin-bottom: 0;
}
.policy__text--lead {
  margin-bottom: 40px;
}

/* ----- VALUE 三角ダイアグラム + 3 項目リスト ----- */
.value {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  margin-top: 30px;
}
.value__diagram {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 350 / 312;
  align-self: center; /* 説明文の下に中央配置 (Figma 準拠) */
}
.value__diagram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.value__chip {
  position: absolute;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
}
.value__chip-jp {
  display: block;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.value__chip-en {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-top: 4px;
  opacity: 0.95;
}
/* 信頼性 (左上) */
.value__chip--reliability {
  top: 18%;
  left: 22%;
}
/* カスタマーサポート (右上) */
.value__chip--support {
  top: 22%;
  right: 12%;
  text-align: center;
}
/* 技術力 (下中央) */
.value__chip--technical {
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
}

.value__list {
  margin: 0;
  display: grid;
  gap: 24px;
}
.value__item {
  display: block;
}
.value__item dt {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-navy);
  margin: 0 0 10px;
}
.value__item dd {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-navy);
}

/* ----- BIZ BLOCK (Service + Global + Our work を一体化する背景) -----
 * Figma の Group 192 に相当。ベースカラー #75A6E5 のライトブルー基調 + 中央の Global は白角丸カード。
 * ============================================================== */
.biz-block {
  position: relative;
  /* #75A6E5 (rgb 117,166,229) ベースの淡いグラデーション */
  background: linear-gradient(180deg, rgba(117, 166, 229, 0.12) 0%, rgba(117, 166, 229, 0.22) 100%);
  padding: 30px 0 60px;
  margin-top: 40px;
  overflow: hidden;
}
.biz-block::before {
  /* 微かなドットパターン (Figma の薄いテクスチャを近似) */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(117, 166, 229, 0.10) 0, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(117, 166, 229, 0.10) 0, transparent 30%);
  pointer-events: none;
}
.biz-block > * {
  position: relative;
  z-index: 1;
}

/* ----- SERVICE / GLOBAL (biz セクション共通) ----- */
.biz {
  padding: 40px 0;
}
.biz__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.biz__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 50px;
  color: var(--color-teal);
  margin: 0 0 18px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #c4d3e3;
  padding-bottom: 18px;
}
.biz__title--blue {
  color: #75a6e5;
}
.biz__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 30px;
}
.biz__grid--reverse .biz__visual {
  order: -1;
}
.biz__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.biz__text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-navy);
}
.biz__visual {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f4f9;
}
.biz__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 624 / 383;
}
/* Figma「事業内容を詳しく見る」ボタン (Vector 38:427, 330×75 ピル型)
 * - 白背景 + 薄ボーダー + ナビーテキスト + teal 矢印 */
.biz__btn {
  margin-top: 12px;
  align-self: flex-start;
  min-width: 330px;
  padding: 18px 28px 18px 56px;
  background: #fff;
  color: var(--color-navy);
  border: 1px solid #d8e1ec;
  border-radius: 999px;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.biz__btn:hover {
  background: var(--color-teal);
  color: #fff;
  border-color: var(--color-teal);
}
.biz__btn .arrow {
  color: var(--color-teal); /* Figma: 矢印は teal */
}
.biz__btn:hover .arrow {
  color: #fff;
}

/* Global セクションは白角丸カードで囲む (Figma の Rectangle 151) */
.biz.biz--white {
  padding: 0;
  margin: 20px 0 30px;
}
.biz--white .biz__inner {
  position: relative;
  /* 背景は ::before で画面左端まで拡張 (コンテンツは 1200px 内に維持) */
  /* padding は他セクション (.biz__inner / .ourwork__inner) と統一して左端を揃える */
  padding: 60px var(--side-padding);
  max-width: var(--sub-max-width);
  margin: 0 auto;
  isolation: isolate;
}

.biz--white .biz__inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: min(0px, calc((100vw - var(--sub-max-width)) / -2));
  background: #fff;
  border-radius: 0 30px 30px 0;
  z-index: -1;
}

/* ----- OUR WORK (仕事の流れ) -----
 * Figma 参照: 2 段ずらしレイアウト (1段目 x=363/761/1158, 2段目 x=431/829/1226)
 * カードは水平 (icon LEFT + label RIGHT), カード間は矢印 ">" でつなぐ
 * ============================================================== */
.ourwork {
  padding: 40px 0 60px;
}
.ourwork__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.ourwork__eyebrow {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 50px;
  color: #75a6e5;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #c4d3e3;
  padding-bottom: 18px;
}
.ourwork__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 38px;
  color: var(--color-navy);
  margin: 28px 0 18px;
  letter-spacing: 0.02em;
}
.ourwork__desc {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-navy);
  margin: 0 0 50px;
  max-width: 1028px;
}

/* 6 枚カードを 3列×2段 + 2 段目を右にずらす */
.ourwork__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 60px;
  position: relative;
}
/* 2 段目 (4~6番目) を Figma 準拠で右にわずかにずらす (1920 設計時 +68px ≒ 3.5vw) */
.ourwork__list > li:nth-child(n+4) {
  transform: translateX(clamp(40px, 3.5vw, 70px));
}

.ourwork__item {
  background: #fff;
  border-radius: 10px;
  padding: 20px 16px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid #d8e1ec;
}
/* 各カード間の矢印 ">" (Figma の細い chevron に合わせて小さく) */
.ourwork__item::after {
  content: "";
  position: absolute;
  right: -36px; /* 60px gap の中央 (arrow_center = card_right + 30) */
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-teal);
  border-right: 2px solid var(--color-teal);
  transform: translateY(-50%) rotate(45deg);
}
/* 3 番目と 6 番目 (各段の最後) は矢印不要 */
.ourwork__list > li:nth-child(3)::after,
.ourwork__list > li:nth-child(6)::after {
  display: none;
}
/* 2 段目の先頭 (4番目) は左側にも矢印 (1段目→2段目の流れを示す) */
.ourwork__list > li:nth-child(4)::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-teal);
  border-right: 2px solid var(--color-teal);
  transform: translateY(-50%) rotate(45deg);
}

.ourwork__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ourwork__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ourwork__step-label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-navy);
  margin: 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ----- 数字で知る (statistics) -----
 * Figma: 背景に薄い 3D データチャート画像 (Mask group 38:859)
 * ============================================================== */
.numbers {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
  /* Figma レイヤー (Mask group 38:859) の書き出し画像をそのまま使用。
   * 元画像が既に淡い水色 + 半透明アイコンのため、追加オーバーレイは不要。 */
  background: url("../images/3min/bg-numbers.png") center / cover no-repeat, #f4f8fc;
}
.numbers::before {
  /* 上に薄い teal グラデを重ねて読みやすく */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(51,132,167,0.05) 0, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.numbers__inner {
  position: relative;
  z-index: 1;
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.numbers__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 50px;
  color: var(--color-navy);
  margin: 0 0 30px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #d3dde9;
  padding-bottom: 18px;
}
.numbers__group {
  margin-top: 40px;
}
.numbers__group-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  border-radius: 8px;
  margin: 0 0 20px;
  letter-spacing: 0.04em;
}
.numbers__group-title--teal {
  background: var(--color-teal);
}
.numbers__group-title--blue {
  background: #75a6e5;
}
.numbers__group-title--navy {
  background: var(--color-navy);
}
.numbers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.num-card {
  background: #fff;
  border-radius: 10px;
  padding: 22px 24px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.num-card__heading {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-teal);
  margin: 0 0 14px;
}
.num-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
}
.num-card__value {
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--color-navy);
}
.num-card__value p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.num-card__big {
  font-size: 48px;
  line-height: 1.1;
}
.num-card__big--md {
  font-size: 40px;
}
.num-card__unit {
  font-size: 25px;
}
.num-card__unit--md {
  font-size: 22px;
}
.num-card__sub {
  font-size: 22px !important;
  display: block !important;
}
.num-card__small {
  font-size: 12px !important;
  display: block !important;
  color: var(--color-navy);
  margin-top: 4px !important;
}
.num-card__small--note {
  font-size: 13px !important;
}
.num-card__small--note strong {
  font-size: 15px;
  margin-left: 6px;
}
.num-card__value--pair p {
  align-items: center;
  gap: 8px;
}
.num-card__pair-label {
  font-size: 20px;
  margin-right: 4px;
}
.num-card__icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.num-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.num-card--wide {
  /* 平均年齢カード: 年代別バーチャートを内包 */
}

/* ----- 年代別バーチャート ----- */
.age-chart {
  flex-shrink: 0;
  width: 130px;
  border-left: 2px solid var(--color-navy);
  padding-left: 8px;
}
.age-chart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.age-chart__list li {
  display: grid;
  grid-template-columns: 30px 1fr 36px;
  align-items: center;
  gap: 4px;
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--color-navy);
}
.age-chart__label {
  font-size: 11px;
}
.age-chart__bar {
  display: block;
  width: var(--w, 30px);
  height: 10px;
  background: var(--color-teal);
  border-radius: 0 2px 2px 0;
}
.age-chart__pct {
  font-size: 13px;
  text-align: right;
}

/* =================================================================
 * 8-SP. 3min ページのレスポンシブ (≤1100px / ≤768px)
 * ============================================================== */
@media (max-width: 1100px) {
  .policy__row {
    grid-template-columns: 160px 1fr;
    gap: 30px;
    padding-left: clamp(40px, 8vw, 120px);
  }
  .value {
    grid-template-columns: 280px 1fr;
    gap: 30px;
  }
  .biz__grid {
    gap: 36px;
  }
  .biz__btn {
    min-width: 0;
    width: 100%;
  }
  .biz--white .biz__inner {
    padding: 40px clamp(24px, 5vw, 60px);
  }
  .ourwork__list {
    gap: 30px 40px;
  }
  .ourwork__step-label {
    font-size: 15px;
  }
  .ourwork__list > li:nth-child(n+4) {
    transform: translateX(40px);
  }
  .ourwork__item::after,
  .ourwork__list > li:nth-child(4)::before {
    right: -26px; /* 40px gap の中央 */
    left: auto;
    width: 12px;
    height: 12px;
  }
  .ourwork__list > li:nth-child(4)::before {
    left: -26px;
    right: auto;
  }
  .num-card {
    padding: 18px 16px 20px;
  }
  .num-card__big {
    font-size: 40px;
  }
  .num-card__big--md {
    font-size: 32px;
  }
  .num-card__icon {
    width: 64px;
    height: 64px;
  }
  .age-chart {
    width: 110px;
  }
}

@media (max-width: 768px) {
  .three-min__title {
    padding: 40px var(--side-padding) 30px;
  }
  .three-min__eyebrow {
    font-size: 16px;
  }
  .three-min__heading {
    font-size: 24px;
    line-height: 1.45;
  }

  .policy {
    padding: 30px 0 50px;
  }
  .policy::before {
    width: 600px;
    height: 400px;
    left: -200px;
    top: 100px;
  }
  .policy__title {
    font-size: 32px;
  }
  .policy__row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 30px 0;
  }
  .policy__label-en {
    font-size: 28px;
  }
  .policy__heading {
    font-size: 22px;
    margin-bottom: 18px;
  }
  .policy__text {
    font-size: 15px;
  }
  .policy__text br {
    display: none;
  }
  .policy__text--lead {
    margin-bottom: 24px;
  }
  .value {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .value__diagram {
    max-width: 280px;
    margin: 0 auto;
  }
  .value__chip-jp {
    font-size: 15px;
  }
  .value__chip-en {
    font-size: 10px;
  }
  .value__item dt {
    font-size: 18px;
  }
  .value__item dd {
    font-size: 14px;
  }

  .biz {
    padding: 40px 0;
  }
  .biz__title {
    font-size: 32px;
  }
  .biz__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .biz__grid--reverse .biz__visual {
    order: 0;
  }
  .biz__text p {
    font-size: 15px;
  }
  .biz__text p br {
    display: none;
  }
  .biz__btn {
    padding: 14px 20px;
  }

  .biz {
    padding: 30px 0;
  }
  .biz-block {
    padding: 20px 0 40px;
  }
  .biz--white .biz__inner {
    padding: 30px var(--side-padding);
    margin-right: 12px;
    border-radius: 0 20px 20px 0;
  }

  .ourwork {
    padding: 30px 0 40px;
  }
  .ourwork__eyebrow {
    font-size: 32px;
  }
  .ourwork__title {
    font-size: 26px;
    margin: 20px 0 14px;
  }
  .ourwork__desc {
    font-size: 15px;
    margin-bottom: 30px;
  }
  .ourwork__desc br {
    display: none;
  }
  .ourwork__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .ourwork__list > li:nth-child(n+4) {
    transform: none;
  }
  .ourwork__item::after,
  .ourwork__list > li:nth-child(4)::before {
    display: none;
  }
  .ourwork__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .ourwork__step-label {
    font-size: 14px;
    white-space: normal;
  }

  .numbers {
    padding: 50px 0 60px;
  }
  .numbers__title {
    font-size: 32px;
  }
  .numbers__group-title {
    font-size: 18px;
    padding: 10px 16px;
  }
  .numbers__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .num-card {
    min-height: 0;
    padding: 18px 18px 18px;
  }
  .num-card__heading {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .num-card__big {
    font-size: 38px;
  }
  .num-card__big--md {
    font-size: 30px;
  }
  .num-card__unit {
    font-size: 20px;
  }
  .num-card__icon {
    width: 60px;
    height: 60px;
  }
  .age-chart {
    width: 130px;
  }
  .age-chart__list li {
    grid-template-columns: 28px 1fr 32px;
  }
}

@media (max-width: 480px) {
  /* スマホ: 1カラム縦並び + カード間に下向き矢印 */
  .ourwork__list {
    grid-template-columns: 1fr;
    gap: 30px; /* 下向き矢印を入れる縦余白 */
  }
  /* 各カードの下中央に下向き矢印を表示 */
  .ourwork__item::after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: -21px;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-teal);
    border-right: 2px solid var(--color-teal);
    transform: translateX(-50%) rotate(135deg);
  }
  /* 3番目 (1段目の最後) も下の段へ続くので矢印を表示 */
  .ourwork__list > li:nth-child(3)::after {
    display: block;
  }
  /* 最後 (6番目) は矢印不要 */
  .ourwork__list > li:nth-child(6)::after {
    display: none;
  }
  /* 4番目の左向き矢印 (::before) は1カラムでは不要 */
  .ourwork__list > li:nth-child(4)::before {
    display: none;
  }
}

/* =================================================================
 *  事業紹介ページ (business.html) 専用スタイル
 *  Figma frame: PC_事業紹介 (38:702)
 * ================================================================= */

/* ----- メインビジュアル: アイソメトリック都市画像 + 業界ラベル ----- */
.biz-intro {
  padding: 0 0 60px;
}
.biz-intro__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
  text-align: center;
}
.biz-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: var(--color-teal);
  font-size: 20px;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.biz-intro__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-teal);
}
.biz-intro__title {
  color: var(--color-navy);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
/* 見出し下の冒頭文 */
.biz-intro__lead {
  color: var(--color-navy);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  margin: 0 0 36px;
}

/* 画像 + ラベル群のラッパー: aspect-ratio で常に正しい比率を保つ */
.biz-intro__visual {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1597 / 1065;
}
.biz-intro__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 業界ラベル (吹き出し) — Figma レイヤー「吹き出し」(2053:190)
 * - 各タグごとに固有カラー (--tag-color) を HTML 側 inline style で指定
 * - 角丸ピル + 下向き三角形のしっぽ + 白文字
 * - クリックで共有ポップアップを開く */
.biz-intro__tag {
  --tag-color: #2bb9b0;
  position: absolute;
  /* 位置決めは translate プロパティで行い、transform は浮遊アニメ用に空けておく */
  translate: -50% -50%;
  background: var(--tag-color);
  border: none;
  border-radius: 15px;
  padding: 12px 26px;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 18px);
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 38, 80, 0.12);
  transition: filter 0.2s, box-shadow 0.2s, scale 0.2s;
  animation: tag-float 3.4s ease-in-out infinite;
}
/* 吹き出しのふわふわ浮遊（タグごとに周期・開始タイミングをずらす） */
@keyframes tag-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.biz-intro__tag:nth-of-type(2n) {
  animation-duration: 4.1s;
  animation-delay: 0.7s;
}
.biz-intro__tag:nth-of-type(3n) {
  animation-duration: 3s;
  animation-delay: 1.3s;
}
.biz-intro__tag:nth-of-type(5n) {
  animation-delay: 1.9s;
}
@media (prefers-reduced-motion: reduce) {
  .biz-intro__tag {
    animation: none;
  }
}
/* 下向き三角形のしっぽ (Figma の Polygon 2 相当 — タグと同色) */
.biz-intro__tag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 14px solid var(--tag-color);
}
.biz-intro__tag:hover,
.biz-intro__tag[aria-expanded="true"] {
  filter: brightness(0.88);
  box-shadow: 0 6px 14px rgba(0, 38, 80, 0.2);
  scale: 1.08;
}

/* セキュリティ詳細ポップアップ (Figma frame 2049:159, 306×204)
 * - 共有ポップアップ: クリックされたタグの (left, top) を JS が設定
 * - transform で「タグ中心の上に bottom 中央が来るように」シフト
 * - Figma: border 1px #e4e5e8, radius 15px, shadow 4px 4px 0 rgba(0,0,0,.25) */
.biz-intro__popup {
  position: absolute;
  width: 306px;
  padding: 30px 30px 26px;
  background: #fff;
  border: 1px solid #e4e5e8;
  border-radius: 15px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  text-align: left;
  z-index: 10;
  transform: translate(-50%, calc(-100% - 24px));
  /* 表示時にふわっとポップイン（位置決めの transform と競合しない scale/translate を使用） */
  animation: popup-in 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.18);
}
@keyframes popup-in {
  from {
    opacity: 0;
    scale: 0.9;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .biz-intro__popup {
    animation: none;
  }
}
.biz-intro__popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #002c5b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.biz-intro__popup-close::before,
.biz-intro__popup-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.biz-intro__popup-close::before { transform: rotate(45deg); }
.biz-intro__popup-close::after  { transform: rotate(-45deg); }
.biz-intro__popup-close:hover { color: var(--color-teal); }

.biz-intro__popup-title {
  position: relative;
  font-weight: 700;
  color: #002c5b;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  padding-left: 16px;
  margin: 0 0 10px;
}
.biz-intro__popup-bar {
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 26px;
  /* クリックされたタグのカラーを JS が --popup-bar-color にセット */
  background: var(--popup-bar-color, #2bb9b0);
  transition: background 0.2s;
}
.biz-intro__popup-text {
  font-size: 16px;
  line-height: 1.6;
  color: #002c5b;
  font-weight: 400;
  margin: 0;
}

/* ----- 事業セクション (business.html の 01/02/03 ティール背景セクション)
 *  注: 3min.html では別の .biz-block クラスを使っているため、
 *      ここでは衝突を避けるために .svc-block を使用 */
.svc-block {
  position: relative;
  /* 背景を画面端まで拡張 */
  padding: 70px 0 80px;
  margin-bottom: 60px;
  isolation: isolate;
  color: #fff;
}
.svc-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/business/section-bg.png") center / cover no-repeat, var(--color-teal);
  z-index: -1;
}
.svc-block__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}
.svc-block__head {
  text-align: center;
  margin-bottom: 44px;
  padding-top: 16px;
}
/* 番号 + タイトルを横並びでセンタリング (Figma の "01 公共用…" レイアウト) */
.svc-block__heading-row {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  margin-bottom: 18px;
}
.svc-block__num {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(60px, 6vw, 90px);
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
  letter-spacing: 0.04em;
  line-height: 1;
  flex-shrink: 0;
}

/* セクション 02 専用: 白背景 + 中抜き数字をティールに */
.svc-block--white {
  color: var(--color-navy);
}
.svc-block--white::before {
  display: none;
}
.svc-block--white .svc-block__title,
.svc-block--white .svc-block__lead {
  color: var(--color-navy);
}
.svc-block--white .svc-block__num {
  -webkit-text-stroke: 1.5px var(--color-teal);
}
.svc-block__title {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.5;
  color: #fff;
  margin: 0;
  text-align: left;
}
.svc-block__lead {
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.9;
  color: #fff;
  max-width: 720px;
  margin: 0 auto;
}

/* 3カードの並び */
.svc-block__cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  margin: 0;
  padding: 0;
}
.biz-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  color: var(--color-navy);
  box-shadow: 0 6px 18px rgba(0, 38, 80, 0.08);
}
.biz-card__visual {
  width: 100%;
  aspect-ratio: 320 / 190;
  background: #e8edf2;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.biz-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.biz-card__title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  margin-bottom: 8px;
}
.biz-card__text {
  font-size: 13px;
  line-height: 1.8;
  color: #4a5566;
  margin-bottom: 16px;
  flex: 1;
}
/* カード内のピル型ボタン (biz__btn と同じデザイン) */
.biz-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 18px 12px 28px;
  background: #fff;
  color: var(--color-navy);
  border: 1px solid #d8e1ec;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.biz-card__btn:hover {
  background: var(--color-teal);
  color: #fff;
  border-color: var(--color-teal);
}
.biz-card__btn .arrow {
  color: var(--color-teal);
  width: 22px;
  flex-shrink: 0;
}
.biz-card__btn:hover .arrow {
  color: #fff;
}

/* ----- タブレット (〜1024px) ----- */
@media (max-width: 1024px) {
  .biz-intro__tag {
    padding: 9px 16px;
    font-size: 11px;
    border-radius: 12px;
  }
  .biz-intro__tag::after {
    bottom: -8px;
    border-left-width: 8px;
    border-right-width: 8px;
    border-top-width: 10px;
  }
  .biz-intro__popup {
    width: 240px;
    padding: 24px 22px 20px;
  }
  .biz-intro__popup-title {
    font-size: 18px;
  }
  .biz-intro__popup-text {
    font-size: 13px;
  }
  .svc-block__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----- SP (〜768px) ----- */
@media (max-width: 768px) {
  .biz-intro {
    padding: 60px 0 40px;
  }
  .biz-intro__title {
    margin-bottom: 12px;
  }
  .biz-intro__lead {
    font-size: 13px;
    margin-bottom: 24px;
  }
  .biz-intro__lead br {
    display: none;
  }
  /* SP では小さいラベルだとつぶれるので少し詰める */
  .biz-intro__tag {
    padding: 6px 10px;
    font-size: 9px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 38, 80, 0.1);
  }
  .biz-intro__tag::after {
    bottom: -6px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 8px;
  }
  .biz-intro__popup {
    width: 220px;
    padding: 20px 18px 16px;
  }
  .biz-intro__popup-title {
    font-size: 16px;
    padding-left: 12px;
  }
  .biz-intro__popup-bar {
    height: 20px;
    top: 7px;
  }
  .biz-intro__popup-text {
    font-size: 12px;
  }

  .svc-block {
    padding: 50px 0;
    margin-bottom: 40px;
  }
  .svc-block__head {
    text-align: left;
    margin-bottom: 36px;
  }
  .svc-block__num {
    display: block;
    margin-bottom: 6px;
    font-size: 60px;
    -webkit-text-stroke-width: 1.25px;
  }
  .svc-block__title {
    font-size: 20px;
    margin-bottom: 14px;
  }
  .svc-block__lead br {
    display: none;
  }

  .svc-block__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .biz-card {
    padding: 16px 16px 20px;
  }
}

/* ----- 小型SP (〜480px) ----- */
@media (max-width: 480px) {
  .biz-intro__tag {
    font-size: 8px;
    padding: 3px 6px;
  }
  .biz-intro__popup {
    width: 200px;
  }
}

/* =================================================================
 * 10. member-list ページ (人を知る > 社員紹介)
 * Figma: PC_社員紹介 (node 55:372)
 * - サブナビ: 社員紹介 (active) / 若手社員に聞いてみました！ (about-subnav--two で 2列)
 * - フィルタ: ALL / Engineer / Sales / Staff (active は teal 塗りつぶしのピル)
 * - グリッド: 3 列固定 (PC) / 2 列 (タブレット) / 1 列 (SP)
 * - 役職タグカラー: Engineer #2bb9b0 / Sales #002c5b / Staff #75a6e5
 * ============================================================== */

/* ----- about-subnav の 2 列バリエーション (人を知る用) ----- */
.about-subnav__list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ----- セクション全体 ----- */
.member-list {
  padding: 0 0 60px;
}

.member-list__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
}

/* ----- ヘッダ (eyebrow + タイトル + フィルタタブ) ----- */
.member-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 24px;
  margin-bottom: 40px;
}

.member-list__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-list__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

.member-list__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--color-navy);
  border-radius: 50%;
}

.member-list__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 55px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

/* ----- フィルタタブ (ALL / Engineer / Sales / Staff) ----- */
.member-list__filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-list__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 26px;
  min-width: 130px;
  background: transparent;
  border: none;
  border-radius: 50px;
  color: var(--color-navy);
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.04em;
  line-height: 1.6;
  cursor: pointer;
  position: relative;
  transition: background 0.2s, color 0.2s;
}

/* タブ間の縦区切り線 (アクティブタブの左右は線を消す) */
.member-list__tab + .member-list__tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: #c9d3e0;
}

.member-list__tab.is-active {
  background: var(--color-teal);
  color: #fff;
}

.member-list__tab.is-active::before,
.member-list__tab.is-active + .member-list__tab::before {
  display: none;
}

/* ----- カードグリッド ----- */
.member-list__grid {
  list-style: none;
  margin: 0 0 60px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 34px) clamp(20px, 2vw, 30px);
}

/* 詳細ページ下部「ほかの社員を見る」導線 */
.member-others__more {
  text-align: center;
}

.member-card {
  background: #fff;
}

.member-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.member-card__link:hover {
  opacity: 0.85;
}

.member-card__visual {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 377 / 271;
  background: #f5f7fb;
}

.member-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-card__body {
  padding: 14px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 役職タグ (Engineer / Sales / Staff) — Figma node 55:891 / 55:900 / 55:907 */
.member-card__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 22px;
  min-width: 113px;
  border-radius: 50px;
  background: var(--tag-bg, var(--color-teal));
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.member-card__tag--engineer { --tag-bg: #2bb9b0; }
.member-card__tag--sales    { --tag-bg: #002c5b; }
.member-card__tag--staff    { --tag-bg: #75a6e5; }

.member-card__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  /* タイトルは最大 2 行まで */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.member-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* イニシャル(タイトル)と職種の間隔は詰める (body の gap 10px を相殺) */
  margin-top: -6px;
}

.member-card__caption {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}

/* 一覧→詳細の矢印は画像アイコン（Group 239）に差し替え */
.member-card .arrow {
  flex-shrink: 0;
  display: inline-block;
  width: 38px;
  height: 38px;
  border: none;
  transform: none;
  background: url("../images/member-list/arrow-detail.png") no-repeat center / contain;
}
.member-card .arrow::before,
.member-card .arrow::after {
  content: none;
}

/* ----- ページネーション (1 / 2 / …) — Figma node 55:1116 / 55:1124 / 55:1126 ----- */
.pagination {
  display: flex;
  justify-content: center;
}

.pagination__list {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-navy);
  background: transparent;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.pagination__item.is-current {
  background: var(--color-teal);
  color: #fff;
}

a.pagination__item:hover {
  background: rgba(43, 185, 176, 0.12);
}

.pagination__item--more {
  letter-spacing: 0.1em;
}

/* ----- ページネーションの左右矢印 (event ページ等) ----- */
.pagination--with-arrows {
  align-items: center;
  gap: 6px;
}

.pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  /* Figma: 細いチェバロン、カラー #2bb9b0 (teal) */
  color: var(--color-teal);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.pagination__arrow:hover {
  background: rgba(43, 185, 176, 0.12);
  color: var(--color-teal);
}

.arrow--left {
  transform: rotate(180deg);
}

/* pagination 専用の arrow: チェバロンのみ (横線を非表示) */
.pagination__arrow .arrow::before {
  display: none;
}
.pagination__arrow .arrow {
  width: 14px;
  height: 14px;
}
.pagination__arrow .arrow::after {
  width: 11px;
  height: 11px;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}
/* 左向き矢印は rotate しているので位置調整 (translateY のみキャンセル) */
.pagination__arrow .arrow--left {
  transform: rotate(180deg);
}

/* ----- 関連 (人を知る) の 2 列バリエーション (related__list--two) -----
 * Figma では幅 369 のカードが container 中央寄せだが、タイトルとの整列を優先し
 * 1200 コンテナ全幅に広がる 2 列レイアウトに調整 */
.related__list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ----- レスポンシブ (タブレット 〜1024px) ----- */
@media (max-width: 1024px) {
  .member-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .member-list__tab {
    min-width: 110px;
    padding: 8px 18px;
  }
}

/* ----- レスポンシブ (SP 〜768px) ----- */
@media (max-width: 768px) {
  .member-list {
    padding: 0 0 40px;
  }
  .member-list__inner {
    padding: 0 var(--side-padding);
  }
  .member-list__head {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 28px;
  }
  .member-list__title {
    font-size: 30px;
  }
  .member-list__filter {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .member-list__tab {
    flex-shrink: 0;
    min-width: 0;
    padding: 8px 16px;
    font-size: 13px;
    gap: 6px;
  }
  .member-list__tab + .member-list__tab::before {
    height: 18px;
  }

  .member-list__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }
  .member-card__visual {
    aspect-ratio: 16 / 10;
  }
  .member-card__title {
    font-size: 16px;
  }
  .member-card__caption {
    font-size: 12px;
  }

  .pagination__list {
    gap: 8px;
  }
  .pagination__item {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .related__list--two {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: none;
  }
}

/* ----- 小型SP (〜380px) ----- */
@media (max-width: 380px) {
  .member-list__title {
    font-size: 26px;
  }
}

/* =================================================================
 * 11. member-detail ページ (人を知る > 社員紹介詳細)
 * Figma: PC_社員紹介詳細 (node 55:1390)
 * - メイン画像 → H1 → 本文 (H2〜H6 / 段落 / 太字 / リンク / 番号付きリスト / 番号なしリスト / 動画)
 * - スタイルガイド型テンプレート
 * ============================================================== */

.member-detail {
  padding: 50px 0 80px;
}

.member-detail__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
}

/* ----- メインビジュアル (1200×540, 角丸 10px) ----- */
.member-detail__visual {
  margin: 0 0 50px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1200 / 540;
  background: #f5f5f5;
}

.member-detail__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- H1: 社員名 (Figma 60:1833 — Noto Sans JP Bold 35px) ----- */
.md-h1 {
  margin: 0 0 60px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 35px);
  line-height: 1.4;
  color: #000;
}

/* ----- プロフィールヘッダー（正面写真をテキストの横に配置） ----- */
.member-hero {
  display: flex;
  align-items: stretch;
  gap: clamp(28px, 4vw, 60px);
  margin: 0 0 60px;
  padding: clamp(24px, 3vw, 44px);
  background: #f5f9f8;
  border-radius: 14px;
}

.member-hero__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.member-hero__initial {
  margin: 4px 0 0;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-teal);
}

.member-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 0;
}

.member-hero__job {
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.04em;
  color: var(--color-navy);
}

.member-hero__year {
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.04em;
  color: var(--color-navy);
  opacity: 0.75;
}

/* 記事の要約（キャッチコピー） */
.member-hero__catch {
  margin: 6px 0 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.7;
  color: var(--color-navy);
}

/* 正面写真（縦位置）— 大きすぎないサイズで右側に配置 */
.member-hero__photo {
  flex: 0 0 clamp(200px, 26vw, 320px);
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #e8eef2;
}

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

@media (max-width: 768px) {
  .member-hero {
    flex-direction: column-reverse;
    padding: 20px;
    gap: 20px;
  }
  .member-hero__photo {
    flex: none;
    width: min(280px, 70%);
    margin: 0 auto;
  }
}

/* ----- 本文ブロック (記事ボディ) -----
 * flex にすると記事内写真の float（本文回り込み）が効かなくなるため
 * flow-root（float を内包できる通常ブロック）にする */
.member-detail__body {
  display: flow-root;
}

/* H2: 見出し + 下部ティールライン (Figma 55:1670 — Inter Bold 20px teal) */
.md-h2 {
  margin: 50px 0 30px;
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--color-teal);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--color-teal);
}

.md-h2:first-child {
  margin-top: 0;
}

/* H3: 大見出し (Figma 60:1838 — Noto Sans JP Bold 30px navy) */
.md-h3 {
  margin: 40px 0 24px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.6;
  color: var(--color-navy);
}

/* 段落 (Figma 55:1678) — black 16px line-height 2 */
.md-p {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 2;
  color: #000;
}

/* 強調 (太字) — orange #ff7a00 bold */
.md-strong {
  font-weight: 700;
  color: #ff7a00;
}

/* リンク — blue #0038ff underline */
.md-link {
  color: #0038ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md-link:hover {
  opacity: 0.85;
}

/* H4: ティール塗りつぶしピル (Figma 60:1841 + 60:1835) */
.md-h4 {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin: 30px 0 20px;
  padding: 10px 22px;
  min-width: 287px;
  min-height: 56px;
  background: var(--color-teal);
  border-radius: 6px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.8;
  color: #fff;
  box-sizing: border-box;
}

/* H5: ネイビー塗りつぶしピル (Figma 60:1842 + 60:1843) */
.md-h5 {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin: 20px 0;
  padding: 10px 22px;
  min-width: 287px;
  min-height: 56px;
  background: var(--color-navy);
  border-radius: 6px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.8;
  color: #fff;
  box-sizing: border-box;
}

/* H6: 薄グレー背景 + ネイビーテキスト (Figma 60:1844 + 60:1845) */
.md-h6 {
  margin: 20px 0 30px;
  padding: 10px 18px;
  background: #f5f5f5;
  border-radius: 6px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-navy);
}

/* ----- 番号付きリスト (Figma 55:1679 etc — 45×45 ティール円 + ナンバー) ----- */
.md-ol {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  counter-reset: md-ol;
}

.md-ol > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 45px;
  padding: 5px 0;
  counter-increment: md-ol;
  color: var(--color-navy);
  font-size: 16px;
  line-height: 1.6;
}

.md-ol > li::before {
  content: counter(md-ol);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--color-teal);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}

/* ----- 番号なしリスト (Figma 55:1695 etc — 8px ティールドット) ----- */
.md-ul {
  list-style: none;
  margin: 20px 0 30px;
  padding: 0;
}

.md-ul > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0 8px 15px;
  color: var(--color-navy);
  font-size: 16px;
  line-height: 1.6;
}

.md-ul > li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-teal);
}

/* ----- 動画ブロック (Figma 60:1846 — 688×378 16:9 比率) — YouTube 埋め込み ----- */
.md-video {
  margin: 40px auto;
  width: min(688px, 100%);
  position: relative;
  aspect-ratio: 688 / 378;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.md-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =================================================================
 * 11-SP. member-detail のレスポンシブ (≤768px)
 * ============================================================== */
@media (max-width: 768px) {
  .member-detail {
    padding: 30px 0 60px;
  }
  .member-detail__inner {
    padding: 0 var(--side-padding);
  }
  .member-detail__visual {
    margin-bottom: 30px;
    border-radius: 6px;
  }
  .md-h1 {
    margin-bottom: 30px;
    font-size: 24px;
  }
  .md-h2 {
    margin: 30px 0 20px;
    font-size: 16px;
  }
  .md-h3 {
    margin: 26px 0 18px;
    font-size: 20px;
  }
  .md-h4,
  .md-h5 {
    margin: 18px 0;
    min-width: 0;
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 8px 16px;
  }
  .md-h6 {
    font-size: 15px;
    padding: 8px 14px;
  }
  .md-p {
    font-size: 14px;
    line-height: 1.9;
  }
  .md-ol > li,
  .md-ul > li {
    font-size: 14px;
  }
  .md-ol > li::before {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .md-ol > li {
    gap: 12px;
    min-height: 36px;
  }
  .md-video {
    margin: 30px auto;
  }
}

/* =================================================================
 * 12. PC_若手社員 (young.html)
 * ============================================================== */

/* ----- 若手社員ヒーロー (Figma 61:261 + 61:182) -----
 * 2 つのオフセット・ブリードパネルで構成
 *   ・緑パネル: 画面左端まで bleed する水彩テクスチャ。タイトル + リード文を含む (absolute)
 *   ・グレーパネル: 画面右端まで bleed。緑パネルの内側 ~80px ずれ下に重ねる (flow)
 * テクスチャ画像は images/young/greenback.png (他ページと共通) */
.young-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 0;
  background: #fff;
  overflow: hidden; /* viewport bleed が水平スクロールを起こさないよう */
  margin-top: 0;
  margin-bottom: 90px;
}

/* 緑パネル — 画面左端からブリード。
 * テキストエリア幅(440px)と内側余白は固定し、可変なのは左ブリード分のみ。
 * 画面幅やズーム率が変わってもレイアウトが伸び縮みしない */
.young-hero__green {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  /* 左ブリード + 左padding(side-padding) + コンテンツ(440) + 右padding(56) */
  width: calc(max((100vw - var(--sub-max-width)) / 2, 0px) + var(--side-padding) + 496px);
  padding: 54px 56px 54px
    calc(max((100vw - var(--sub-max-width)) / 2, 0px) + var(--side-padding));
  background: url("../images/young/greenback.png") center / cover, #2bb9b0;
  border-radius: 0 10px 10px 0;
  color: #fff;
  box-sizing: border-box;
}

.young-hero__green-inner {
  width: 440px;
  max-width: 100%;
}

/* グレーパネル — 緑パネルの右に続き、画面右端までブリード。
 *   緑パネルの下に 40px 潜り込ませ、上端は緑から 80px 下げる。
 *   余白は固定値にして環境差で伸縮しないようにする */
.young-hero__gray {
  position: relative;
  /* z-index は付けず stacking context を作らない。子の .young-bubble (z-index 3) が
   * 緑パネル (z-index 2) より前面に出てバブルが緑に隠れないようにする */
  flex: 1 1 auto;
  min-width: 0;
  margin-left: -40px; /* 緑パネルの下へ少し潜り込ませる */
  margin-top: 80px; /* 緑の top から 80px 下に開始 */
  padding: 90px calc(max((100vw - var(--sub-max-width)) / 2, 0px) + var(--side-padding)) 60px 110px;
  background: #f5f7fb;
  border-radius: 0;
  box-sizing: border-box;
  min-height: 480px;
}

.young-hero__gray-inner {
  max-width: 880px;
}

.young-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

.young-hero__dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-navy);
}

.young-hero__title {
  margin: 0 0 28px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 38px; /* 環境差で伸縮しないよう固定 */
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap; /* 「若手社員に」「聞いてみました！」をそれぞれ 1 行で */
}

.young-hero__lead {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: #fff;
}

/* ----- ヒーロー内 Q1〜Q6 リンクバブル (Figma 2072:205 + Group 229.png 吹き出しテンプレ) ----- */
.young-bubbles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 28px; /* 環境差で伸縮しないよう固定 */
}

.young-bubble {
  position: relative;
  z-index: 3; /* 緑パネル (z-index 2) より前面、緑が広がってもバブル/Q バッジは隠れない */
  display: flex;
  align-items: center; /* text を上下中央 */
  justify-content: center; /* text を左右中央 */
  /* 画像吹き出しをやめて CSS 描画に変更。
   * 高さは文字量に応じて伸びるため、どのズーム率・環境でも
   * 文字が尻尾や v マークと重ならない */
  min-height: 62px;
  /* 右側は v マーク用に広めに確保 */
  padding: 12px 38px 12px 16px;
  background: #fff;
  border: 2px solid #2bb9b0;
  border-radius: 14px;
  text-decoration: none;
  color: var(--color-navy);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  box-sizing: border-box;
  transition: filter 0.2s ease, transform 0.2s ease;
  /* 左上にはみ出す badge・下の尻尾を隠さない */
  overflow: visible;
}

/* 右側の v (下向き) マーク */
.young-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #2bb9b0;
  border-bottom: 2px solid #2bb9b0;
  transform: translateY(-65%) rotate(45deg);
}

/* 下辺中央やや左の尻尾（回転させた正方形の下半分で表現） */
.young-bubble__tail {
  position: absolute;
  left: 45%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 2px solid #2bb9b0;
  border-bottom: 2px solid #2bb9b0;
  transform: rotate(45deg);
  pointer-events: none;
}

.young-bubble:hover {
  filter: brightness(0.97);
  transform: translateY(-2px);
}

/* Q バッジ — 吹き出しの左上隅から少しはみ出すように配置 (ネイビー丸 + 白文字) */
.young-bubble__num {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  line-height: 40px;
  text-align: center;
  z-index: 2;
}

.young-bubble__text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-navy);
  /* 長文は折り返して v マークと重ならないようにする（高さは自動で伸びる）。
   * 折り返し位置は HTML 側の <wbr> で指定（keep-all で中途半端な位置では折らない） */
  white-space: normal;
  word-break: keep-all;
  text-align: center;
}

/* ----- Q セクション (Q1〜Q6 共通) -----
 * Figma node 62:199 / 244:227 / 244:187 / 244:262 / 61:247 / 244:207
 * 中央寄せタイトル + 写真 + テキスト（2 ボイス）の構成 */
.young-q {
  padding: clamp(70px, 9vw, 120px) 0;
  background: #fff;
}

/* Q2, Q4, Q6 は薄グレー背景 (Figma 61:260 / 244:205 / 244:225) */
.young-q--alt {
  background: #f5f7fb;
}

.young-q__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
}

/* Q セクションヘッダー (中央寄せ — Q バッジ + 質問タイトル) */
.young-q__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.6vw, 24px);
  margin: 0 0 clamp(40px, 5vw, 60px);
}

.young-q__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}

/* Q バッジ (Figma 61:228/229 = imgVector10 ネイビー枠 / 244:208 = imgVector11 ティール枠)
 *   Figma から書き出した badge-navy.png / badge-teal.png (86×98) をそのまま背景として使用
 *   Q1/Q3/Q5: ネイビー枠 + ネイビー文字
 *   Q2/Q4/Q6: ティール枠 + ティール文字 */
.young-q__badge {
  --badge-color: var(--color-navy);
  --badge-image: url("../images/young/badge-navy.png");
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 5.5vw, 86px);
  height: clamp(73px, 6.3vw, 98px); /* 86×98 と同じアスペクト比を保持 */
  padding-bottom: 18px; /* tail 分を差し引き、テキストを矩形部分の中央寄せ */
  background: var(--badge-image) center / 100% 100% no-repeat;
  color: var(--badge-color);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1;
  letter-spacing: 0.04em;
  box-sizing: border-box;
}

.young-q__badge--navy {
  --badge-color: var(--color-navy);
  --badge-image: url("../images/young/badge-navy.png");
}

.young-q__badge--teal {
  --badge-color: var(--color-teal);
  --badge-image: url("../images/young/badge-teal.png");
}

/* Q セクション本体 (写真 + ボイス) */
.young-q__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}

/* Q2/Q4/Q6 は写真を右側に */
.young-q__body--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.young-q__body--reverse .young-q__photo {
  order: 2;
}

.young-q__body--reverse .young-q__voices {
  order: 1;
}

.young-q__photo {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 711 / 648;
  background: #f5f7fb;
}

.young-q__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.young-q__voices {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3vw, 50px);
}

/* 各ボイスブロック (本文 + 名前 + 区切り線) */
.young-voice {
  padding-bottom: clamp(20px, 2vw, 28px);
  border-bottom: 1px solid var(--color-teal);
}

.young-voice:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.young-voice__text {
  margin: 0 0 16px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}

.young-voice__name {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.9;
  color: #626262;
}

/* =================================================================
 * 12-SP. PC_若手社員 のレスポンシブ
 * 2パネル横並びは十分な幅がある場合のみ。1200px以下は縦並びにして
 * 中間幅での圧迫・崩れを防ぐ
 * ============================================================== */
@media (max-width: 1200px) {
  /* タブレット以下: 緑/グレーパネルを縦並びへ */
  .young-hero {
    display: block;
    overflow: visible;
  }
  .young-hero__green {
    position: static;
    z-index: auto;
    width: 100%;
    margin-left: 0;
    border-radius: 0;
    padding: 50px var(--side-padding);
  }
  .young-hero__green-inner {
    max-width: 100%;
  }
  .young-hero__gray {
    /* 画面幅いっぱいの全幅グレーに（右側の白余白をなくす） */
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 60px var(--side-padding) 50px;
    border-radius: 0;
    min-height: 0;
  }
  .young-hero__gray-inner {
    max-width: 100%;
  }
  /* 全幅グレーなら2列のまま収まる（768px以下はSP用ルールが適用）。
   * 吹き出しが大きくなるぶん文字サイズも上げる */
  .young-bubble,
  .young-bubble__text {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .young-hero {
    padding: 0 0 40px;
  }
  .young-hero__green {
    padding: 36px var(--side-padding);
  }
  .young-hero__gray {
    padding: 36px var(--side-padding);
  }
  .young-hero__eyebrow {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .young-hero__title {
    font-size: 28px;
    margin-bottom: 20px;
    white-space: normal;
  }
  .young-hero__lead {
    font-size: 14px;
    line-height: 1.8;
  }
  .young-bubbles {
    /* スマホでも 2 列表示 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }
  .young-bubble {
    font-size: 11px;
    line-height: 1.35;
    min-height: 52px;
    padding: 10px 26px 10px 14px;
  }
  .young-bubble::after {
    right: 9px;
    width: 7px;
    height: 7px;
  }
  .young-bubble__tail {
    width: 11px;
    height: 11px;
    bottom: -6px;
  }
  .young-bubble__num {
    top: -12px;
    left: -10px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 11px;
  }
  .young-bubble__text {
    /* 狭い列でも収まるよう折り返しを許可 */
    white-space: normal;
    font-size: 11px;
    line-height: 1.35;
  }
  .young-q {
    padding: 50px 0;
  }
  .young-q__inner {
    padding: 0 var(--side-padding);
  }
  .young-q__head {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    margin-bottom: 30px;
  }
  .young-q__title {
    font-size: 20px;
    flex: 1;
  }
  .young-q__badge {
    width: 52px;
    height: 60px;
    font-size: 16px;
    padding-bottom: 12px;
  }
  .young-q__body,
  .young-q__body--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .young-q__body--reverse .young-q__photo {
    order: 1;
  }
  .young-q__body--reverse .young-q__voices {
    order: 2;
  }
  .young-q__photo {
    aspect-ratio: 4 / 3;
  }
  .young-q__voices {
    gap: 26px;
  }
  .young-voice__text {
    font-size: 14px;
    line-height: 1.85;
  }
  .young-voice__name {
    font-size: 12px;
  }
}

/* =================================================================
 * 13. event ページ (働く環境を知る > 社内イベント)
 * Figma: PC_社内イベント (node 62:200)
 * - サブナビ 3 タブ (福利厚生・各種制度 / 社内イベント active / オフィス紹介)
 * - イベントカード 3 列 × 4 行 (画像 + 日付 + 本文)
 * - ページネーション 左右矢印付き
 * ============================================================== */

.event-list {
  padding: 0 0 60px;
}

.event-list__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
}

/* ----- ヘッダ (eyebrow + タイトル) ----- */
.event-list__head {
  margin-bottom: 40px;
}

.event-list__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-jp); /* Figma: Noto Sans JP Medium 21px */
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

.event-list__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-teal);
}

.event-list__title {
  margin: 0;
  font-family: var(--font-jp); /* Figma: Noto Sans JP Bold 55px */
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 55px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
  line-height: 1.3;
}

/* ----- カードグリッド (3 列 × 4 行) ----- */
.event-grid {
  list-style: none;
  margin: 0 0 60px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 40px) clamp(20px, 2.5vw, 36px);
}

/* 社内イベントは詳細ページを設けないため、ホバー時の反応は付けない */
.event-card__link {
  display: block;
  color: var(--color-navy);
  text-decoration: none;
}

.event-card__visual {
  width: 100%;
  aspect-ratio: 377 / 271;
  overflow: hidden;
  border-radius: 6px;
  background: #eef1f5;
}

.event-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__date {
  /* Figma: Noto Sans JP Medium 14px / color #2bb9b0 (teal) / line-height 1.6 */
  margin: 18px 0 10px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-teal);
}

.event-card__text {
  /* Figma: Noto Sans JP Regular 16px / color #002c5b / line-height 1.9 */
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-navy);
  /* 最大 6 行で truncate (各カードでテキスト量が異なるため統一感を担保) */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- タブレット (1024px以下) ----- */
@media (max-width: 1024px) {
  .event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----- スマホ (640px以下) ----- */
@media (max-width: 640px) {
  .event-list {
    padding: 0 0 40px;
  }
  .event-list__head {
    margin-bottom: 24px;
  }
  .event-list__title {
    font-size: 22px;
  }
  .event-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }
  .event-card__visual {
    border-radius: 4px;
  }
  .event-card__date {
    margin: 14px 0 8px;
    font-size: 14px;
  }
  .event-card__text {
    font-size: 13px;
    line-height: 1.8;
  }
}

/* ============================================================
   PC_福利厚生 (benefits.html)
   ============================================================
   構成:
     ・page-hero + about-subnav (共通)
     ・.benefits (中央寄せ見出し + 背景イラスト + 6 カテゴリのカード一覧)
     ・各カテゴリ: アイコン + タイトル + 3 カード
     ・カード: タイトル + 区切り線 + 本文
   Figma node: PC_福利厚生 (62:1165)
   ============================================================ */

/* ----- セクション全体 ----- */
.benefits {
  position: relative;
  padding: clamp(80px, 9vw, 130px) 0 clamp(60px, 7vw, 110px);
  background: #fff;
  overflow: hidden;
}

.benefits__inner {
  position: relative;
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

/* ----- 見出し: Benefits & Programs (中央) ----- */
.benefits__head {
  text-align: center;
  margin-bottom: clamp(50px, 6vw, 90px);
}

.benefits__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.06em;
  color: var(--color-navy);
}
.benefits__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-teal);
}
.benefits__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

/* ----- 背景イラスト (画面右端で切れる配置) -----
   Figma: x=1018〜2035 / frame 1920 幅 → 右側が画面外にはみ出して切れる。
   inner の右端基準で viewport 右端まで戻し、さらに数 vw はみ出させて
   画像の右側がカットされて見えるようにする。 */
.benefits__bg {
  position: absolute;
  right: calc(-1 * (var(--side-padding) + max(0px, (100vw - var(--sub-max-width)) / 2)) - 4vw);
  top: clamp(120px, 13vw, 200px);
  width: clamp(560px, 55vw, 1017px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ----- 6 カテゴリのコンテナ ----- */
.benefit-cats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(50px, 5.5vw, 80px);
}

/* ----- カテゴリヘッダー (アイコン + タイトル) ----- */
.benefit-cat__head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.5vw, 24px);
  margin: 0 0 clamp(20px, 2vw, 28px);
}

.benefit-cat__icon {
  flex-shrink: 0;
  /* 画像ファイル原寸 (110×119) でそのまま表示。縮小しないことでぼやけを回避。 */
  width: 110px;
  height: 119px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.benefit-cat__icon img {
  display: block;
  width: 110px;
  height: 119px;
  object-fit: contain;
}

.benefit-cat__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 35px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}

/* ----- カードグリッド (3 列) ----- */
.benefit-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 30px) clamp(18px, 2vw, 30px);
}

/* ----- 個別カード ----- */
.benefit-card {
  background: #fff;
  /* Figma: 1px solid #d9d9d9 のシンプルな囲い線、角丸 10px (シャドウなし) */
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: clamp(20px, 2vw, 28px) clamp(18px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
}

.benefit-card__title {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 14px;
  /* Figma: 全幅の薄いグレー線 (#EEEEEE) */
  border-bottom: 1px solid #eeeeee;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}
/* Figma: 左端に短いティールのアクセント線 (#2BB9B0, 19px) を重ねる */
.benefit-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 19px;
  height: 2px;
  background: var(--color-teal);
}

.benefit-card__text {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}

/* ----- スマホ (≤768px) ----- */
@media (max-width: 768px) {
  .benefits {
    padding: 56px 0 48px;
  }
  .benefits__head {
    margin-bottom: 36px;
  }
  .benefits__eyebrow {
    font-size: 14px;
  }
  .benefits__title {
    font-size: 24px;
  }
  .benefits__bg {
    /* スマホでは背景イラストは目立たせず、薄く右上に重ねる */
    width: 220%;
    right: -60%;
    top: 0;
    opacity: 0.35;
  }
  .benefit-cats {
    gap: 40px;
  }
  .benefit-cat__head {
    gap: 12px;
    margin-bottom: 16px;
  }
  .benefit-cat__icon {
    /* スマホでは少し小さく (それでも整数倍の縮小で滑らかに) */
    width: 80px;
    height: 86px;
  }
  .benefit-cat__icon img {
    width: 80px;
    height: 86px;
  }
  .benefit-cat__title {
    font-size: 21px;
  }
  .benefit-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .benefit-card {
    padding: 18px 18px;
  }
  .benefit-card__title {
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  .benefit-card__text {
    font-size: 13px;
  }
}

/* ============================================================
   PC_オフィス (office.html) — Office Tour スライダー
   ============================================================
   構成:
     ・page-hero + about-subnav (共通)
     ・.office-tour (中央寄せ見出し + 3 枚見せスライダー + キャプション + ドット)
   Figma node: PC_オフィス (63:368)
   ・メインスライド ~1090×639px
   ・サイドスライド ~750×440px が左右にちらっと見える (画面端で切れる)
   ・両端に円形ティールの矢印ボタン (122×122)
   ============================================================ */

.office-tour {
  position: relative;
  padding: clamp(80px, 9vw, 130px) 0 clamp(70px, 8vw, 120px);
  background: #fff;
  overflow: hidden; /* サイドスライドが画面端からはみ出てもクリップ */
}
.office-tour__inner {
  position: relative;
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}
.office-tour__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.office-tour__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.06em;
  color: var(--color-navy);
}
.office-tour__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-teal);
}
.office-tour__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0.05em;
  color: var(--color-navy);
}
/* 見出し下の冒頭文 */
.office-tour__lead {
  color: var(--color-navy);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  margin: 16px 0 0;
}

/* ----- スライダー本体 ----- */
.office-slider {
  position: relative;
}

/* ステージ — 中央の 3:2 写真エリア
   ・--stage-h は矢印の横位置計算でも使う (メイン写真の左右端を求めるため) */
.office-slider__stage {
  --stage-h: clamp(260px, 32vw, 480px);
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: var(--stage-h);
}

/* ビューポート — 中央に 3:2 で固定し、はみ出す部分を隠す。
   トラックがこの中を横方向に流れる (参考サイトの hero スライダーと同方式) */
.office-slider__viewport {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 3 / 2;
  max-width: 100vw;
  border-radius: 10px;
  overflow: hidden;
  background: #e9eef2;
  z-index: 5;
}

/* スライドのトラック — 横一列。JS が translateX で動かす */
.office-slider__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  will-change: transform;
}

.office-slider__slide {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.office-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- 左右の円形矢印ボタン (Figma: Group 235/236 の画像を使用) -----
   ・z-index はビューポート (5) より下 (z-index:2)
     → メイン写真の左右端で半分が隠れるレイヤー構造になる
   ・横位置はメイン画像の内側端ちょうどに中央が来るように配置 */
.office-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 6vw, 88px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  /* スライドの後ろ側 (写真がボタンの一部を覆い隠す) */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, opacity 0.2s;
}
.office-slider__arrow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.office-slider__arrow:hover {
  transform: translate(-50%, -50%) scale(1.06);
}
.office-slider__arrow:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
  border-radius: 50%;
}
/* メイン画像 (幅 = stage 高さ × 3/2) の左右端の x 座標 = 中央 ± stage高さ×0.75
   ボタンの中心がちょうどメイン写真の縁に重なる (内側半分は写真の後ろに隠れる) */
.office-slider__arrow--prev {
  left: calc(50% - var(--stage-h) * 0.75);
}
.office-slider__arrow--next {
  left: calc(50% + var(--stage-h) * 0.75);
}

/* ----- キャプション (タイトル + 説明文) ----- */
.office-slider__caption {
  text-align: center;
  margin-top: clamp(28px, 3vw, 44px);
  padding: 0 var(--side-padding);
}
.office-slider__name {
  margin: 0 0 14px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: 0.04em;
  color: var(--color-navy);
}
.office-slider__text {
  margin: 0 auto;
  max-width: 720px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}

/* ----- ドット ----- */
.office-slider__dots {
  list-style: none;
  margin: clamp(20px, 2.5vw, 36px) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.office-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #c8d0d8;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.office-slider__dot:hover {
  transform: scale(1.2);
}
.office-slider__dot.is-current {
  background: var(--color-teal);
}

/* ----- スマホ (≤768px) ----- */
@media (max-width: 768px) {
  .office-tour {
    padding: 56px 0 56px;
  }
  .office-tour__head {
    margin-bottom: 28px;
  }
  .office-tour__eyebrow {
    font-size: 14px;
  }
  .office-tour__title {
    font-size: 24px;
  }
  .office-tour__lead {
    font-size: 13px;
    margin-top: 12px;
  }
  .office-tour__lead br {
    display: none;
  }
  .office-slider__stage {
    /* スマホではメイン写真のみ全幅 (3:2) で見せる */
    --stage-h: 66.6vw;
    height: var(--stage-h);
  }
  .office-slider__viewport {
    width: 100%;
    aspect-ratio: auto;
    border-radius: 4px;
  }
  /* 矢印はメイン写真の前面に出して左右端に固定 */
  .office-slider__arrow {
    width: 44px;
    z-index: 7;
    transform: translateY(-50%);
  }
  .office-slider__arrow:hover {
    transform: translateY(-50%) scale(1.06);
  }
  .office-slider__arrow--prev {
    left: 8px;
    right: auto;
  }
  .office-slider__arrow--next {
    left: auto;
    right: 8px;
  }
  .office-slider__caption {
    margin-top: 20px;
    padding: 0 12px;
  }
  .office-slider__name {
    font-size: 18px;
  }
  .office-slider__text {
    font-size: 13px;
    line-height: 1.8;
  }
  .office-slider__dots {
    margin-top: 18px;
    gap: 10px;
  }
  .office-slider__dot {
    width: 8px;
    height: 8px;
  }
}


/* =================================================================
 * 13. 募集要項一覧 (recruit-list.html) — JOB LIST
 * - 中央寄せ見出し (他ページの eyebrow + title トンマナを踏襲)
 * - 新卒 / 中途 切り替えタブ
 * - 各行: 左ネイビーの職種名 + 右の緑グラデーション「募集要項はこちら」ボタン
 * ============================================================== */
.joblist {
  background: #f5f7fb;
}
.joblist__inner {
  max-width: var(--sub-max-width);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* ----- 見出し ----- */
.joblist__head {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.joblist__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.18em;
  color: var(--color-navy);
}
.joblist__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px);
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--color-navy);
}

/* ----- 新卒 / 中途 タブ (セグメントコントロール) ----- */
.joblist__tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 0 auto clamp(28px, 3vw, 40px);
  padding: 6px;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 999px;
}
.joblist__tab {
  min-width: 150px;
  padding: 12px 30px;
  border-radius: 999px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.06em;
  color: var(--color-navy);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.joblist__tab:hover {
  opacity: 1;
  color: var(--color-teal);
}
.joblist__tab.is-active {
  background: var(--color-teal);
  color: #fff;
}
.joblist__tab.is-active:hover {
  color: #fff;
}

/* ----- パネル / 行リスト ----- */
.joblist__panel {
  margin: 0 auto;
  max-width: 960px;
}
.joblist__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 38, 80, 0.08);
}
.joblist-row {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  align-items: stretch;
}
/* 行間の区切り線 (白側) */
.joblist-row + .joblist-row {
  border-top: 1px solid #e6ebf2;
}
/* 職種名 (左ネイビーブロック) */
.joblist-row__title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 30px 32px;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
/* 行間の区切り線 (ネイビー側はうっすら) */
.joblist-row + .joblist-row .joblist-row__title {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* ボタンエリア (右白ブロック) */
.joblist-row__action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 32px;
}

/* ----- 募集要項はこちら ボタン (緑グラデーション pill) ----- */
.joblist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 320px;
  padding: 15px 16px 15px 40px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1fb6ac 0%, #4ac389 100%);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 14px rgba(43, 185, 176, 0.28);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.joblist-btn:hover {
  opacity: 1;
  filter: brightness(1.04);
  transform: translateY(-2px);
}
/* 白丸の中の右シェブロン */
.joblist-btn__icon {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #25b3a8;
}
.joblist-btn__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translate(-65%, -50%) rotate(45deg);
}

/* ----- レスポンシブ ----- */
@media (max-width: 768px) {
  .joblist__tabs {
    width: 100%;
    gap: 4px;
  }
  .joblist__tab {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
  }
  .joblist-row {
    grid-template-columns: 1fr;
  }
  .joblist-row__title {
    padding: 18px 22px;
  }
  /* 1 カラム時はネイビーブロック同士が縦に重なるので区切り線は白側のみ */
  .joblist-row + .joblist-row .joblist-row__title {
    border-top: none;
  }
  .joblist-row__action {
    padding: 16px 22px 22px;
  }
  .joblist-btn {
    width: 100%;
    min-width: 0;
    padding-left: 24px;
  }
}


/* =================================================================
 * 14. 募集要項 詳細 (recruit-detail.html)
 * - 左ネイビーの項目名 + 右白の内容、という定義リスト型レイアウト
 * - 見出しは左にティール/ネイビーのバー (他ページのトンマナに合わせる)
 * ============================================================== */
.jobdetail {
  background: #fff;
}
.jobdetail__inner {
  max-width: 920px;
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* ----- タイトル (左バー + 見出し) ----- */
.jobdetail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.jobdetail__bar {
  flex-shrink: 0;
  width: 6px;
  height: clamp(26px, 3vw, 34px);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-teal) 0 45%, var(--color-navy) 45% 100%);
}
.jobdetail__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--color-navy);
}

/* ----- 定義リスト (表) ----- */
.jd-table {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 38, 80, 0.08);
}
.jd-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: stretch;
}
.jd-row + .jd-row {
  border-top: 1px solid #e6ebf2;
}
.jd-row__label {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 26px 24px;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.jd-row + .jd-row .jd-row__label {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.jd-row__body {
  margin: 0;
  padding: 26px 30px;
  background: #fff;
  color: #2c3a4d;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.jd-row__body > *:first-child {
  margin-top: 0;
}
.jd-row__body > *:last-child {
  margin-bottom: 0;
}

/* 補足見出し (例: 安心のOJT / 年間125日) */
.jd-note {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 6px 16px;
  background: var(--color-teal-light);
  border-radius: 6px;
  color: var(--color-navy);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.jd-row__body p + .jd-note {
  margin-top: 18px;
}

/* ・ 付きリスト */
.jd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jd-list li {
  position: relative;
  padding-left: 18px;
}
.jd-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-teal);
}
.jd-list li + li {
  margin-top: 2px;
}

/* ----- 応募ボタン / 戻る ----- */
.jobdetail__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: clamp(40px, 5vw, 60px);
}
.jobdetail__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ----- レスポンシブ ----- */
@media (max-width: 768px) {
  .jd-row {
    grid-template-columns: 1fr;
  }
  .jd-row__label {
    padding: 14px 20px;
    font-size: 14px;
  }
  .jd-row + .jd-row .jd-row__label {
    border-top: none;
  }
  .jd-row__body {
    padding: 18px 20px 22px;
    font-size: 14px;
    line-height: 1.85;
  }
}


/* =================================================================
 * 15. 採用エントリーフォーム (entry-form.html)
 * ============================================================== */
.entry-form {
  background: #fff;
}
.entry-form__inner {
  max-width: 820px;
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* 見出し (中央寄せ eyebrow + title) */
.entry-form__head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 50px);
}
.entry-form__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.18em;
  color: var(--color-navy);
}
.entry-form__title {
  margin: 0 0 16px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: 0.1em;
  color: var(--color-navy);
}
.entry-form__lead {
  margin: 0 auto;
  max-width: 640px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.9;
  color: #4a5566;
}

/* フォーム本体 */
.entry-form__form {
  margin-top: clamp(28px, 3.5vw, 44px);
}
.form-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px 24px;
  padding: 22px 0;
  border-top: 1px solid #e6ebf2;
}
.form-row:last-of-type {
  border-bottom: 1px solid #e6ebf2;
}
.form-row__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}
.form-required,
.form-optional {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.form-required {
  background: #e5403b;
  color: #fff;
}
.form-optional {
  background: #e8edf2;
  color: #5a6678;
}
.form-row__field {
  min-width: 0;
}

/* 入力要素共通 */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 13px 16px;
  background: #f7f9fc;
  border: 1px solid #d3dce6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-navy);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: #9aa7b6;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(43, 185, 176, 0.18);
}
.form-textarea {
  min-height: 150px;
  resize: vertical;
}
.form-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-teal) 50%),
    linear-gradient(135deg, var(--color-teal) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.form-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #7a8696;
}

/* ラジオ / 複数行のフィールド */
.form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 8px;
}
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-navy);
  cursor: pointer;
}
.form-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-teal);
}
.form-file {
  font-size: 14px;
  color: var(--color-navy);
}

/* 個人情報の同意 */
.form-agree {
  margin: 30px 0 0;
  padding: 22px;
  background: #f5f7fb;
  border-radius: 12px;
  text-align: center;
}
.form-agree__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy);
  cursor: pointer;
}
.form-agree__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-teal);
}
.form-agree a {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 送信ボタン */
.entry-form__submit {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 4vw, 44px);
}
.entry-form__submit .btn-primary {
  min-width: 280px;
  justify-content: center;
}

/* ファイル添付欄・注記 */
.form-file {
  display: block;
  width: 100%;
  padding-top: 10px;
  font-size: 14px;
  color: var(--color-navy);
}
.form-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #7b8698;
}

/* チェックボックス群（当社を知ったきっかけ） */
.form-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 8px;
}

/* エラー・案内メッセージ */
.entry-form__error {
  max-width: 680px;
  margin: 0 auto 24px;
  padding: 14px 18px;
  background: #fdecea;
  color: #c0392b;
  border-radius: 8px;
  text-align: center;
}
.entry-form__error-list {
  max-width: 680px;
  margin: 0 auto 32px;
  padding: 16px 28px;
  background: #fdecea;
  color: #c0392b;
  border-radius: 8px;
  list-style: none;
  font-size: 14px;
}
.entry-form__error-list li {
  padding: 4px 0;
}
.entry-form__notice {
  max-width: 680px;
  margin: 0 auto 24px;
  padding: 14px 18px;
  background: #eaf6f5;
  color: var(--color-navy);
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
}

/* 確認ページ（entry-confirm）の表示値・ボタン */
.form-row__value {
  margin: 0;
  padding-top: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-navy);
  overflow-wrap: anywhere;
}
.entry-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(30px, 4vw, 44px);
}
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 20px 40px;
  background: #fff;
  color: var(--color-navy);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  border: 2px solid #c9d3df;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-back:hover {
  background: #f2f6fa;
  border-color: #aebccc;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }
  .form-row__label {
    padding-top: 0;
    font-size: 14px;
  }
  .entry-form__actions form {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .btn-back {
    width: 100%;
    min-width: 0;
    padding: 16px 24px;
  }
}


/* =================================================================
 * 16. WordPressエディタ出力 → 社員詳細(.md-content)のデザイン適用
 *     クライアントが本文エディタで書いた標準タグを md-* スタイルへマッピング
 * ============================================================== */
.md-content > h2 {
  margin: 50px 0 30px;
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--color-teal);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--color-teal);
}
.md-content > h2:first-child { margin-top: 0; }
/* h3 = 質問への「回答見出し」（原稿の「」部分） */
.md-content > h3 {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 4px solid var(--color-teal);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.6;
  color: var(--color-navy);
}
.md-content p {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 2;
  color: var(--color-navy);
}
.md-content strong { font-weight: 700; color: #ff7a00; }
.md-content a {
  color: #0038ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md-content a:hover { opacity: 0.85; }
.md-content > h4 {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin: 30px 0 20px;
  padding: 10px 22px;
  min-width: 287px;
  min-height: 56px;
  background: var(--color-teal);
  border-radius: 6px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.8;
  color: #fff;
  box-sizing: border-box;
}
.md-content > h5 {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin: 20px 0;
  padding: 10px 22px;
  min-width: 287px;
  min-height: 56px;
  background: var(--color-navy);
  border-radius: 6px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.8;
  color: #fff;
  box-sizing: border-box;
}
.md-content > h6 {
  margin: 20px 0 30px;
  padding: 10px 18px;
  background: #f5f5f5;
  border-radius: 6px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-navy);
}
.md-content ol {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  counter-reset: md-ol;
}
.md-content ol > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 45px;
  padding: 5px 0;
  counter-increment: md-ol;
  color: var(--color-navy);
  font-size: 16px;
  line-height: 1.6;
}
.md-content ol > li::before {
  content: counter(md-ol);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--color-teal);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.md-content ul {
  list-style: none;
  margin: 20px 0 30px;
  padding: 0;
}
.md-content ul > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0 8px 15px;
  color: var(--color-navy);
  font-size: 16px;
  line-height: 1.6;
}
.md-content ul > li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-teal);
}
/* 動画埋め込み（WPのoEmbed / iframe） */
.md-content .wp-block-embed,
.md-content figure {
  margin: 40px auto;
  width: min(688px, 100%);
}

/* 記事内の挿入写真 — 中央のブロック配置ではなく本文の横に回り込ませる。
 * 既定は右寄せ。エディタで「左寄せ」を選べば左、「中央」を選べば従来の中央配置 */
.md-content figure.wp-block-image {
  float: right;
  width: min(400px, 46%);
  margin: 6px 0 28px 36px;
}
.md-content figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.md-content figure.wp-block-image.alignleft {
  float: left;
  margin: 6px 36px 28px 0;
}
.md-content figure.wp-block-image.aligncenter {
  float: none;
  width: min(688px, 100%);
  margin: 40px auto;
}
/* 本文コンテナ末尾で回り込みを解除（写真が下のセクションへはみ出さないように） */
.md-content::after {
  content: "";
  display: block;
  clear: both;
}
.md-content iframe {
  width: 100%;
  aspect-ratio: 688 / 378;
  border: 0;
  border-radius: 10px;
  background: #000;
  display: block;
}

@media (max-width: 768px) {
  .md-content > h2 { margin: 36px 0 22px; }
  .md-content > h3 { margin: 28px 0 18px; }
  .md-content > h4,
  .md-content > h5 { min-width: 0; width: 100%; font-size: 18px; }
  .md-content > h6 { font-size: 16px; }
  .md-content p { font-size: 15px; }
  /* スマホでは回り込みをやめて全幅表示 */
  .md-content figure.wp-block-image,
  .md-content figure.wp-block-image.alignleft {
    float: none;
    width: 100%;
    margin: 28px 0;
  }
}

/* 募集要項 詳細：クライアント入力本文の段落・リスト整形 */
.jd-row__body p { margin: 0 0 10px; }
.jd-row__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jd-row__body ul li {
  position: relative;
  padding-left: 18px;
}
.jd-row__body ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-teal);
}
.jd-row__body ul li + li { margin-top: 2px; }
.jd-row__body ol {
  margin: 0;
  padding-left: 1.4em;
}


/* =================================================================
 * 下層ページ タイトル統一 (2026-07-24)
 * 対象: 3分でわかる / 事業紹介 / 社員紹介一覧 / 社内イベント /
 *       福利厚生 / オフィス紹介
 * 仕様: 中央寄せ / 英語表記は頭文字のみ大文字 / ●はグリーン /
 *       英語表記はネイビー / 英語表記と日本語タイトルの間隔 10px /
 *       上余白は事業紹介 (●Service) と同じ (サブナビ下 80px のみ)
 * ============================================================== */

/* --- セクション上余白: 事業紹介と同じ 0 (サブナビの下余白のみ) --- */
.biz-intro,
.three-min__title,
.member-list,
.event-list,
.office-tour,
.about-subnav + .benefits {
  padding-top: 0;
}

/* --- 英語表記 (eyebrow) --- */
.biz-intro__eyebrow,
.three-min__eyebrow,
.member-list__eyebrow,
.event-list__eyebrow,
.benefits__eyebrow,
.office-tour__eyebrow {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--color-navy);
}

/* --- ● (ドット) --- */
.biz-intro__dot,
.three-min__eyebrow-dot,
.member-list__dot,
.event-list__dot,
.benefits__dot,
.office-tour__dot {
  position: static;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-teal);
  transform: none;
}

/* --- 日本語タイトル --- */
.biz-intro__title,
.three-min__heading,
.member-list__title,
.event-list__title,
.benefits__title,
.office-tour__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--color-navy);
}

/* 事業紹介はタイトル直下に冒頭文があるため下余白を維持 */
.biz-intro__title {
  margin-bottom: 16px;
}

/* --- 中央寄せ --- */
.event-list__head {
  text-align: center;
}
.member-list__head {
  display: block;
  text-align: center;
}
.member-list__title-wrap {
  display: block;
}
.member-list__filter {
  justify-content: center;
  margin-top: 28px;
}

/* --- モバイル: 事業紹介の従来値 (上 60px) に統一 --- */
@media (max-width: 768px) {
  .biz-intro,
  .three-min__title,
  .member-list,
  .event-list,
  .office-tour,
  .about-subnav + .benefits {
    padding-top: 60px;
  }
  .member-list__filter {
    margin-top: 20px;
  }
}

/* =================================================================
 * 募集要項・エントリー: メインビジュアル下に 60px のスペース (2026-07-24)
 * ============================================================== */
/* 募集要項一覧: グレー背景セクションの前に 60px の余白 */
.page-hero + .joblist {
  margin-top: 60px;
}
/* 募集要項詳細・エントリーフォーム (入力・確認・完了):
   白背景のため見出しまでの余白を 60px に統一 */
.page-hero + .jobdetail,
.page-hero + .entry-form {
  padding-top: 60px;
}

/* =================================================================
 * モバイル表示の調整 (2026-07-31)
 * ・ヘッダーはスクロール追従（固定）
 * ・「ページ上部へ戻る」ボタンは非表示
 * ・メニューを開いたとき、募集要項一覧までスクロールなしで見えるよう圧縮
 * ============================================================== */
@media (max-width: 768px) {
  :root {
    --sp-header-h: 70px;
  }

  /* ヘッダーを固定表示 */
  .site-header {
    position: fixed;
    padding: 12px 20px;
  }

  /* ページ上部へ戻るボタンはモバイルでは表示しない */
  .pagetop {
    display: none;
  }

  /* ----- ドロワーメニュー: 1画面に収まるよう余白と文字サイズを圧縮 ----- */
  .sp-menu {
    padding: 6px 20px 10px;
    /* 端末が極端に低い場合のみスクロールできるようにする保険 */
    max-height: calc(100dvh - var(--sp-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sp-menu__list li + li {
    margin-top: 0;
  }

  /* 大項目（会社を知る / 人を知る / 環境を知る） */
  .sp-menu__list > li > a {
    padding: 9px 12px;
    font-size: 15px;
    line-height: 1.4;
  }

  /* 中項目 */
  .sp-menu__sub a {
    padding: 8px 12px 8px 28px;
    font-size: 13px;
    line-height: 1.4;
  }

  .sp-menu__sub a::before {
    left: 12px;
  }

  /* 募集要項一覧（CTA） */
  .sp-menu__cta {
    margin-top: 10px;
    padding: 12px 12px !important;
    font-size: 15px;
  }

  /* メニュー展開中は背面のスクロールを止める */
  body.sp-menu-open {
    overflow: hidden;
  }
}

/* =================================================================
 * 404 ページ (2026-08-04)
 * ============================================================== */
.notfound {
  position: relative;
  overflow: hidden;
  padding: 140px var(--side-padding) 110px;
  background: linear-gradient(180deg, #f4fbfa 0%, #ffffff 70%);
  text-align: center;
}
.notfound__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
/* 背景の装飾サークル */
.notfound__deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.notfound__deco--1 {
  width: 220px;
  height: 220px;
  top: -70px;
  left: -140px;
  background: var(--color-teal-light);
}
.notfound__deco--2 {
  width: 120px;
  height: 120px;
  bottom: -30px;
  right: -100px;
  border: 3px solid var(--color-teal-light);
}
.notfound__deco--3 {
  width: 46px;
  height: 46px;
  top: 30px;
  right: -30px;
  background: rgba(43, 185, 176, 0.18);
}
.notfound__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(96px, 14vw, 150px);
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: 0.04em;
}
/* 「0」はロゴモチーフの teal リングで表現 */
.notfound__zero {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  border: 0.115em solid var(--color-teal);
  border-radius: 50%;
  animation: notfound-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes notfound-pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.notfound__eyebrow {
  margin-top: 20px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--color-teal);
  text-transform: uppercase;
}
.notfound__title {
  margin-top: 12px;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 700;
  color: var(--color-navy);
}
.notfound__text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 2;
  color: var(--color-navy);
}
.notfound__actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}
.notfound__links {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid #e2eeec;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
.notfound__links a {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--color-teal);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  background: #fff;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.notfound__links a:hover {
  background: var(--color-teal);
  color: #fff;
}
@media (max-width: 768px) {
  .notfound {
    padding: 90px var(--side-padding) 70px;
  }
  .notfound__text br {
    display: none;
  }
}

/* =================================================================
 * エントリー送信完了（サンクスページ） (2026-08-04)
 * ============================================================== */
.entry-thanks__actions {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* =================================================================
 * エントリーフォーム: スマホでは入力欄を 16px 以上にする (2026-08-04)
 * （iOS Safari のフォーカス時自動ズームを防止）
 * ============================================================== */
@media (max-width: 768px) {
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
  }
}