@charset "UTF-8";
/* ==========================================================================
   RIZON警備株式会社 / TOP デザインB案
   top.css : TOPページ固有
   --------------------------------------------------------------------------
   各セクションの数値は、デザイン画像 de_2-09〜14 を 1920px 相当に換算した実測値。
   トークン末尾のコメントが 1920px 時の設計値。
   えんじ色（--c-placeholder）の部分はすべて写真の仮置き。
   ========================================================================== */


/* ==========================================================================
   FV（de_2-09 / 1920 x 952.8px）
   背景全面が写真。ヘッダーは透明でこの上に重なる
   ========================================================================== */

.p-top-fv {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--fv-shift) var(--fv-x) 0;

  /* --- FV固有トークン --- */
  --fv-x:       clamp(20px, 4.026vw, 77.3px);    /* 77.3px ロゴ・コピーの左端 */
  --fv-shift:   clamp(0px, 1.927vw, 37px);       /* 37px   中央より少し下に置く */
  --fv-logo-w:  clamp(200px, 22.865vw, 439px);   /* 439px  ロゴ幅 */
  --fv-catch-fz: clamp(24px, 3.125vw, 60px);     /* 60px   キャッチ（字送り55.8px） */
}

.p-top-fv__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-placeholder);
}

.p-top-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;           /* 人物の頭が透明なヘッダー（ナビ）の裏に入らないよう上寄りに見せる */
}

/* 白いロゴ・キャッチ（左）とヘッダー（上）を読みやすくするため、左側と上側だけ暗くする */
.p-top-fv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to right, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.p-top-fv__inner { position: relative; }

.p-top-fv__copy {
  font-size: inherit;
  font-weight: inherit;
}

.p-top-fv__mark-wrap { display: block; }

.p-top-fv__mark {
  width: var(--fv-logo-w);
  height: auto;
}

.p-top-fv__catch {
  display: block;
  margin-top: .13em;                 /* ロゴの下端と字面の間 11.3px */
  font-size: var(--fv-catch-fz);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.071em;           /* 実測の字送り55.8px = 60px x .929 */
}

.p-top-fv__en {
  display: block;
  margin-top: clamp(6px, .599vw, 11.5px);
  font-size: clamp(13px, 1.302vw, 25px);   /* 25px（A案の英文より大きい） */
  font-weight: 700;
  line-height: 1;
}

/* --- 初回表示（控えめ） --- */
.js .p-top-fv__mark  { opacity: 0; transform: translateY(12px); }
.js .p-top-fv__catch { clip-path: inset(-25% 100% -25% 0); }
.js .p-top-fv__en    { opacity: 0; }

.is-ready .p-top-fv__mark {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--ease) .3s, transform 1.1s var(--ease) .3s;
}

.is-ready .p-top-fv__catch {
  clip-path: inset(-25% 0 -25% 0);
  transition: clip-path 1.1s var(--ease) .6s;
}

.is-ready .p-top-fv__en {
  opacity: 1;
  transition: opacity 1s var(--ease) 1s;
}

@media (prefers-reduced-motion: reduce) {
  .js .p-top-fv__mark,
  .js .p-top-fv__en { opacity: 1; transform: none; }

  .js .p-top-fv__catch { clip-path: none; }
}


/* ==========================================================================
   ABOUT（de_2-10 / 1920 x 1022.7px）
   白背景。指示により写真を外し、文字のみを中央寄せ・拡大して配置
   （写真2枚は直下の SERVICE へ移動）
   ========================================================================== */

.p-top-about {
  position: relative;
  padding-block: var(--about-py);
  background: #fff;
  color: #000;
  text-align: center;

  /* --- ABOUT固有トークン --- */
  --about-py:       clamp(64px, 8.292vw, 159.2px);  /* 159.2px 上下の余白（元デザインの写真上端の位置） */
  --about-title-fz: clamp(30px, 5.417vw, 104px);    /* 104px 見出し（共通の大見出し 86px を拡大） */
  --about-body-fz:  clamp(17px, 1.458vw, 28px);     /* 28px  本文（共通の本文 22px を拡大） */
}

.p-top-about__inner { padding-inline: var(--gutter); }

.p-top-about__title {
  font-size: var(--about-title-fz);
  white-space: nowrap;
}

.p-top-about__body {
  margin-top: clamp(32px, 3.75vw, 72px);
  font-size: var(--about-body-fz);
  font-weight: 700;
  line-height: 2;
}


/* ==========================================================================
   SERVICE 導入（de_2-11 / 1920 x 920.6px）
   左に写真2枚、右に見出し・本文・ボタン
   指示により白背景・黒文字。見出しは1行ずつ白地に黒い枠・黒文字の箱
   ========================================================================== */

.p-top-service {
  padding-top: var(--service-pt);
  padding-bottom: var(--service-pb);
  background: #fff;
  color: #000;

  /* --- SERVICE固有トークン --- */
  --service-pt: clamp(56px, 8.833vw, 169.6px);   /* 169.6px 見出しの上端 */
  --service-pb: clamp(56px, 4.323vw, 83px);      /* 83px */
  --service-title-fz: clamp(26px, 3.958vw, 76px); /* 76px 箱の幅が文字の列（802px）に収まる大きさ（デザインは箱なし86px） */
}

.p-top-service__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 5.464vw, 104.9px);            /* 104.9px 写真と文字の間 */
  padding-left: clamp(20px, 9.813vw, 188.4px);   /* 188.4px */
  padding-right: clamp(20px, 5.089vw, 97.7px);   /* 97.7px */
}

.p-top-service__gallery {
  position: relative;
  flex: 0 0 44.48%;                  /* 726.7px（内側 1633.9px に対する比率） */
  margin-top: clamp(0px, .641vw, 12.3px);
  aspect-ratio: 726.7 / 632.2;
}

.p-top-service__photo {
  position: absolute;
  overflow: hidden;
  width: 62.19%;                     /* 451.9 x 303.6px */
  height: 48.02%;
  background: var(--c-placeholder);
  outline: 1px solid #fff;
}

.p-top-service__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-service__photo--1 { left: 0; top: 0; }
.p-top-service__photo--2 { left: 37.81%; top: 51.98%; }

.p-top-service__text {
  flex: 1 1 0;
  min-width: 0;
}

.p-top-service__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3em;                         /* 箱と箱の間（業務紹介の白い箱と同じ比率） */
  font-size: var(--service-title-fz);
  line-height: 1;
}

.p-top-service__title-line {
  padding: .195em .36em;             /* 業務紹介の白い箱と同じ余白 */
  border: clamp(2px, .156vw, 3px) solid #000;   /* 3px 黒い枠 */
  background: #fff;
  color: #000;
  white-space: nowrap;
}

.p-top-service__body {
  margin-top: clamp(24px, 2.313vw, 44.4px);
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: 2;
  white-space: nowrap;
}

.p-top-service__more {
  width: 87.52%;                     /* 702.2px（列幅 802.3px に対する比率） */
  margin-top: clamp(16px, 1.167vw, 22.4px);
}


/* ==========================================================================
   業務紹介（de_2-12 = 01 / de_2-13 = 02 / 1920 x 1016.4px）
   01 と 02 は左右反転の構成。デザインどおり位置の数値は番号ごとに持つ
   ========================================================================== */

.p-top-case {
  padding-bottom: var(--case-pb);

  /* --- 共通トークン --- */
  --case-catch-fz: clamp(26px, 4.583vw, 88px);    /* 88px  白い箱の見出し */
  --case-thumb:    clamp(64px, 10.625vw, 204px);  /* 204px 小さい写真の一辺 */
  --case-card-w:   max(31.911vw, calc(var(--fz-body) * 26 + var(--case-card-px) * 2));  /* 612.7px。本文26文字が必ず収まる幅 */
  --case-card-px:  clamp(12px, 1.068vw, 20.5px);  /* 20.5px カードの左右余白 */
  --case-num-fz:   clamp(56px, 6.667vw, 128px);   /* 128px 番号（数字の高さ 92px） */
  --case-btn-w:    clamp(280px, 36.573vw, 702.2px);
}

/* 01：左に見出し、右に写真とカード */
.p-top-case--01 {
  --case-pb:        clamp(16px, 1.339vw, 25.7px);   /* 25.7px */
  --case-pl:        clamp(20px, 8.26vw, 158.6px);
  --case-cols:      37.026vw 41.734vw;           /* 710.9px / 801.3px */
  --case-gap:       7.865vw;                     /* 151px */
  --case-head-mt:   9.26vw;                      /* 177.8px 見出しの上端 */
  --case-thumbs-mt: 8.25vw;                      /* 158.4px */
  --case-thumbs-ml: 0px;
  --case-visual-mt: 5.938vw;                     /* 114px   写真の上端 */
  --case-card-ml:   -4.724vw;                    /* -90.7px 写真より左へはみ出す */
  --case-num-x:     -.475em;
  --case-num-y:     -.326em;
  --case-more-mt:   .958vw;                      /* 18.4px */
  --case-more-ml:   1.599vw;                     /* 30.7px */
}

/* 02：左に写真とカード、右に見出しとボタン */
.p-top-case--02 {
  --case-pb:        clamp(40px, 5.589vw, 107.3px);
  --case-pl:        clamp(20px, 7.599vw, 145.9px);
  --case-cols:      41.724vw 37.026vw;           /* 801.1px / 710.9px */
  --case-gap:       6.188vw;                     /* 118.8px */
  --case-head-mt:   7.349vw;                     /* 141.1px */
  --case-thumbs-mt: 6.563vw;                     /* 126px */
  --case-thumbs-ml: .891vw;                      /* 17.1px */
  --case-visual-mt: 5.938vw;                     /* 114px */
  --case-card-ml:   min(13.177vw, calc(100% - var(--case-card-w) + var(--case-gap) * .55));  /* 253px 写真の右へはみ出す（狭い画面では右列に重ならない位置まで） */
  --case-num-x:     -.343em;
  --case-num-y:     -.021em;
  --case-more-mt:   2.901vw;                     /* 55.7px */
  --case-more-ml:   -.771vw;                     /* -14.8px */
}

.p-top-case__inner {
  display: grid;
  grid-template-columns: var(--case-cols);
  column-gap: var(--case-gap);
  align-items: start;
  padding-left: var(--case-pl);
}

/* --- 見出しと小さい写真 --- */
.p-top-case__head { margin-top: var(--case-head-mt); }

.p-top-case__catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.401vw, 26.9px);             /* 26.9px 箱と箱の間 */
  font-size: var(--case-catch-fz);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--ls-catch);
}

.p-top-case__catch-line {
  padding: .195em .36em;             /* 箱の高さ 122.4px */
  background: #fff;
  color: #000;
  white-space: nowrap;
}

.p-top-case__thumbs {
  display: flex;
  gap: clamp(8px, 1.688vw, 32.4px);              /* 32.4px */
  margin-top: var(--case-thumbs-mt);
  margin-left: var(--case-thumbs-ml);
}

.p-top-case__thumb {
  flex: 0 0 var(--case-thumb);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: clamp(8px, .859vw, 16.5px);
  background: var(--c-placeholder);
  outline: 1px solid #fff;
  outline-offset: -1px;
}

/* --- 写真・カード --- */
.p-top-case__visual { margin-top: var(--case-visual-mt); }

.p-top-case__photo {
  aspect-ratio: 801.3 / 468.5;
  overflow: hidden;
  border-radius: clamp(16px, 2.083vw, 40px);
  background: var(--c-placeholder);
  outline: 1px solid #fff;
  outline-offset: -1px;
}

.p-top-case__photo img,
.p-top-case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3連アイコン（業務紹介01）：透明背景の白いアイコンを、ボタンと同じ暗い地の角丸の枠に収める */
/* 3連アイコン：li の中にアイコンの枠と現場名。並びの幅は li が持つ */
.p-top-case__icon { flex: 0 0 var(--case-thumb); }

.p-top-case__thumb--icon {
  width: 100%;
  background: var(--c-surface);
}

.p-top-case__icon-label {
  display: block;
  margin-top: clamp(8px, .833vw, 16px);          /* 16px */
  font-size: var(--fz-ui);                       /* 22px */
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

/* 余白は img 側に付ける（％の余白は親の幅が基準のため、枠に付けると並び全体の幅で計算されてしまう） */
.p-top-case__thumb--icon img {
  padding: 17%;
  object-fit: contain;
}

/* 業務紹介の写真：ヘルメット・帽子の上端が枠に接しない位置 */
.p-top-case--01 .p-top-case__photo img { object-position: 50% 5%; }
.p-top-case--02 .p-top-case__photo img { object-position: 50% 0; }

.p-top-case__card {
  position: relative;
  width: var(--case-card-w);
  min-height: clamp(0px, 17.953vw, 344.7px);    /* 344.7px */
  margin-top: clamp(-65.8px, -3.427vw, -24px);   /* 写真の下端に65.8px重ねる */
  margin-left: var(--case-card-ml);
  padding: clamp(20px, 2.411vw, 46.3px) var(--case-card-px) 20px;
  border-radius: clamp(16px, 1.641vw, 31.5px);
  background: #fff;
  color: #000;
}

/* 白い数字に黒い縁取り。黒地の上では白い数字、白いカードの上では縁取りだけに見える */
.p-top-case__num {
  position: absolute;
  top: var(--case-num-y);
  left: var(--case-num-x);
  font-size: var(--case-num-fz);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  pointer-events: none;
}

.p-top-case__title {
  width: calc(var(--fz-body) * 26);  /* 本文の列の中央に置く */
  font-size: clamp(20px, 2.292vw, 44px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.p-top-case__text {
  margin-top: clamp(16px, 1.49vw, 28.6px);
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: 2;
  white-space: nowrap;
}

.p-top-case__more {
  width: var(--case-btn-w);
  margin-top: var(--case-more-mt);
  margin-left: var(--case-more-ml);
}


/* ==========================================================================
   RECRUIT（de_2-14 / 1920 x 1163.3px）
   左に斜めにカットした写真、右に箱のキャッチと本文
   指示によりデザインの白黒を反転：白背景・黒文字、キャッチの箱とボタンは黒地に白
   ========================================================================== */

.p-top-recruit {
  position: relative;
  background: #fff;
  color: #000;
  min-height: clamp(0px, 60.589vw, 1163.3px);
  padding-top: var(--recruit-visual-t);

  /* --- RECRUIT固有トークン --- */
  --recruit-visual-t: clamp(24px, 3.234vw, 62.1px);   /* 62.1px 斜めの写真の上端 */
  --recruit-x:        51.552vw;                       /* 989.8px 文字の左端 */
  --recruit-catch-fz: clamp(32px, 6.771vw, 130px);    /* 130px  キャッチ（字送り122.2px） */
}

/* 4点の多角形で切り抜く。頂点は実測値（写真の外枠 1286 x 950.6px に対する比率） */
.p-top-recruit__visual {
  position: absolute;
  top: var(--recruit-visual-t);
  left: 0;
  width: 66.979vw;                   /* 1286px */
  aspect-ratio: 1286 / 950.6;
  overflow: hidden;
  background: var(--c-placeholder);
  clip-path: polygon(0 12.22%, 100% 0, 53.15% 94.84%, 0 100%);
}

.p-top-recruit__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-recruit__inner {
  position: relative;
  padding-top: clamp(24px, 5.943vw, 114.1px);        /* 114.1px 1つ目の箱の上端まで */
  padding-left: var(--recruit-x);
  padding-right: clamp(20px, 3.802vw, 73px);
}

.p-top-recruit__catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 2.911vw, 55.9px);                 /* 55.9px */
  font-size: var(--recruit-catch-fz);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--ls-catch);
}

.p-top-recruit__catch-line {
  padding: .114em .35em;             /* 箱の高さ 159.6px */
  background: #000;
  color: #fff;
  white-space: nowrap;
}

/* 行末の句読点は字面が左に寄っているため、箱の右端をその分詰める */
.p-top-recruit__catch-punct { margin-right: -.55em; }

/* 本文と縦長のボタンを横に並べる（de_2-15） */
.p-top-recruit__foot {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, .974vw, 18.7px);                  /* 18.7px（文字の見た目の右端からは34.4px。行末の「、」の右半分が空白のため） */
  margin-top: clamp(28px, 3.328vw, 63.9px);
}

.p-top-recruit__body {
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: 2;
  white-space: nowrap;
}

/* 本文と同じ高さのボタン（黒地・白い矢印）。上下は行間の分だけ詰め、1行目と最終行の文字の上下端にそろえる */
.p-top-recruit__more {
  position: relative;
  display: flex;
  flex: 0 0 clamp(96px, 8.865vw, 170.2px);           /* 170.2px */
  align-items: center;
  justify-content: center;
  margin-block: calc(var(--fz-body) * .49);
  border-radius: clamp(10px, 1.042vw, 20px);         /* 20px */
  background: #000;
  color: #fff;
  font-size: clamp(20px, 2vw, 38.4px);               /* 矢印の高さ 22.8px */
  cursor: pointer;
  transition: background-color .3s var(--ease);
}

/* PCのデザインは矢印のみ。文字は読み上げ用に残し、画面には出さない */
.p-top-recruit__more-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 回転した矢印は右半分だけが見えるため、見た目の中心がボタンの中心に来るよう左へ寄せる */
.p-top-recruit__more .c-chevron {
  margin-right: .3em;
  border-width: 1.7px;                               /* 実測 1.7px */
}

.p-top-recruit__more:hover,
.p-top-recruit__more:focus-visible { background-color: #2a2a2a; }   /* 他の黒いボタンと同じ */

.p-top-recruit__more:hover .c-chevron,
.p-top-recruit__more:focus-visible .c-chevron { transform: translateX(4px) rotate(45deg); }


/* ==========================================================================
   CONTACT CTA（A案と同じ / de_1-07.jpg）
   B案は指示により写真の帯の外側（セクションの背景）を白にする
   ========================================================================== */

.p-top-cta {
  padding-top: var(--cta-pt);
  padding-bottom: var(--cta-pb);
  background: #fff;

  --cta-pt:       clamp(40px, 3.974vw, 76.3px);
  --cta-pb:       clamp(40px, 3.990vw, 76.6px);
  --cta-panel-h:  clamp(480px, 42.35vw, 813.1px);
  --cta-panel-pb: clamp(12px, 1.036vw, 19.9px);
  --cta-lead-fz:  clamp(20px, 2.667vw, 51.2px);
  --cta-word-fz:  clamp(64px, 9.531vw, 183px);
  --cta-foot-mt:  clamp(28px, 2.849vw, 54.7px);
}

.p-top-cta__panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--cta-panel-h);
  padding: 0 var(--gutter-r) var(--cta-panel-pb) var(--gutter);
}

.p-top-cta__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-placeholder);
}

.p-top-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;           /* 横長の帯で切り取っても人物のヘルメットが切れないよう上端を基準にする */
}

/* 明るい写真の上の白い文字とボタンを読みやすくするため、文字のある下側を暗くする */
.p-top-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .15) 80%, rgba(0, 0, 0, .1) 100%);
  pointer-events: none;
}

.p-top-cta__inner {
  position: relative;
  width: 100%;
}

.p-top-cta__title { font-weight: 700; }

.p-top-cta__lead {
  display: block;
  margin-left: .24em;
  font-size: var(--cta-lead-fz);
  line-height: 1;
  letter-spacing: var(--ls-catch);
}

.p-top-cta__word {
  display: block;
  margin-top: -.036em;
  font-size: var(--cta-word-fz);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .0175em;
  white-space: nowrap;
}

.p-top-cta__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: var(--cta-foot-mt);
}

.p-top-cta__body {
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: 2;
  white-space: nowrap;
}

.p-top-cta__more {
  flex: 0 0 40.48%;
  margin-top: calc(var(--fz-body) * .5);
}


/* ==========================================================================
   Responsive : ~1199px
   ========================================================================== */
@media (max-width: 1199px) {
  /* RECRUIT：ボタンが最下部になるため、下のCTAの写真との間を空ける */
  .p-top-recruit { padding-bottom: clamp(32px, 5vw, 56px); }

  /* RECRUIT：本文の文字が最小14pxで止まり、横に並べるとボタンが画面からはみ出すため、本文の下に横長で置く */
  .p-top-recruit__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 32px);
  }

  /* 横長のボタンは文字を表示し、他のボタン（c-button）と同じ組み：左に文字、右に矢印 */
  .p-top-recruit__more {
    flex: none;
    justify-content: space-between;
    gap: 1em;
    width: min(100%, 520px);
    margin-block: 0;
    padding: clamp(18px, 2.315vw, 44.5px) clamp(20px, 2.625vw, 50.4px) clamp(18px, 2.315vw, 44.5px) clamp(20px, 2.010vw, 38.6px);
    border-radius: clamp(8px, .677vw, 13px);
    font-size: var(--fz-ui);
    font-weight: 700;
    line-height: 1;
  }

  .p-top-recruit__more-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .p-top-recruit__more .c-chevron {
    margin-right: 0;
    border-width: 1px;
  }
}


/* ==========================================================================
   Responsive : ~1023px
   ========================================================================== */
@media (max-width: 1023px) {
  /* --- ABOUT：PC時の改行位置のまま1行に収まる大きさ（上限は1024px時のPCの値にそろえて段差をなくす） --- */
  .p-top-about {
    --about-title-fz: clamp(28px, 6.8vw, 55.5px);
    --about-body-fz:  clamp(15px, 2.3vw, 17px);
  }

  /* --- SERVICE：写真 → 文字の順に縦積み --- */
  .p-top-service__inner {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(40px, 7vw, 64px);
    padding-inline: var(--gutter);
  }

  .p-top-service__gallery {
    flex-basis: auto;
    width: min(100%, 560px);
    margin-top: 0;
  }

  .p-top-service { --service-title-fz: clamp(26px, 5.6vw, 43px); }

  .p-top-service__more {
    width: min(100%, 520px);
    margin-top: 32px;
  }

  /* --- 業務紹介：見出し → 写真 → カード → 小さい写真 → ボタン の順にそろえる --- */
  .p-top-case,
  .p-top-case--01,
  .p-top-case--02 {
    --case-pb: clamp(56px, 10vw, 96px);
    --case-card-ml: clamp(16px, 4vw, 40px);
    --case-num-x: -.3em;
    --case-num-y: -.45em;
    --case-catch-fz: clamp(24px, 6.4vw, 48px);
    --case-thumb: calc((100% - 2 * clamp(8px, 2vw, 16px)) / 3);
  }

  .p-top-case__inner {
    display: flex;
    flex-direction: column;
    padding-inline: var(--gutter);
    padding-top: clamp(40px, 8vw, 72px);
  }

  .p-top-case__head,
  .p-top-case__visual { display: contents; }

  .p-top-case__catch  { order: 1; }
  /* 縦並びのフレックス内では幅を明示しないと aspect-ratio から高さが決まらないため width を指定 */
  .p-top-case__photo  { order: 2; width: 100%; margin-top: clamp(32px, 6vw, 48px); }
  .p-top-case__card   { order: 3; }
  .p-top-case__thumbs { order: 4; width: 100%; margin-top: clamp(32px, 6vw, 48px); margin-left: 0; gap: clamp(8px, 2vw, 16px); }
  .p-top-case__more   { order: 5; width: min(100%, 520px); margin-top: 32px; margin-left: 0; }

  .p-top-case__card {
    width: auto;
    max-width: calc(100% - var(--case-card-ml));
    min-height: 0;
    padding-bottom: 28px;
  }

  .p-top-case__title { width: auto; }

  /* アイコンが大きく並ぶため、現場名もそれに合わせて大きく */
  .p-top-case__icon-label { font-size: clamp(13px, 2vw, 18px); }

  /* --- RECRUIT：斜めの写真を上に置き、その下に文字 --- */
  .p-top-recruit {
    min-height: 0;
    padding-top: 0;
  }

  .p-top-recruit__visual {
    position: static;
    width: 92%;
  }

  .p-top-recruit__inner {
    margin-top: clamp(-160px, -16vw, -64px);   /* 写真の右下の空いた部分に箱を少し重ねる */
    padding-top: 0;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .p-top-recruit__catch { align-items: flex-end; }

  /* --- CTA --- */
  .p-top-cta {
    --cta-panel-h: clamp(440px, 72vw, 720px);
    --cta-lead-fz: clamp(20px, 4vw, 36px);
    --cta-word-fz: clamp(64px, 18vw, 160px);
  }

  .p-top-cta__panel { padding-right: var(--gutter); }

  .p-top-cta__foot {
    flex-direction: column;
    gap: clamp(24px, 4vw, 32px);
  }

  .p-top-cta__more {
    flex: none;
    width: min(100%, 520px);
    margin-top: 0;
  }
}


/* ==========================================================================
   Responsive : ~767px
   ========================================================================== */
@media (max-width: 767px) {
  .p-top-fv { --fv-logo-w: 62vw; }

  /* 縦長の画面では人物を中央に見せ、ロゴとキャッチが人物に重なるぶん全体を少し暗くする */
  .p-top-fv__bg img { object-position: 60% 50%; }

  .p-top-fv__bg::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 40%, rgba(0, 0, 0, .55) 100%);
  }


  .p-top-fv__catch { white-space: normal; }

  /* ABOUT見出しは2行のまま収まる大きさにする（3行に折り返すと中央寄せが崩れて見えるため） */
  .p-top-about {
    --about-title-fz: clamp(22px, calc((100vw - 40px) / 12.8), 52px);  /* 12文字の行が画面幅（左右余白20px）に収まる大きさ */
    --about-body-fz:  clamp(15px, 4.1vw, 17px);
  }

  .p-top-about__title { white-space: normal; }

  .p-top-service { --service-title-fz: clamp(22px, 7.4vw, 43px); }   /* 箱の行が画面幅に収まる大きさ */

  .p-top-about__body,
  .p-top-service__body,
  .p-top-case__text,
  .p-top-recruit__body {
    line-height: 1.9;
    white-space: normal;
  }

  .p-top-case__catch-line { white-space: normal; }

  /* 最長の「縁日・花火大会」（7文字）が320px幅でもアイコンの幅に収まる大きさ */
  .p-top-case__icon-label { font-size: clamp(11px, 3.4vw, 13px); }

  .p-top-case__card { max-width: none; margin-right: 0; }

  .p-top-recruit {
    --recruit-catch-fz: clamp(32px, 10vw, 52px);
  }

  .p-top-recruit__catch { align-items: flex-start; }

  .p-top-recruit__foot { margin-top: 28px; }

  /* --- CTA（A案と同じ） --- */
  .p-top-cta {
    --cta-visual-h: max(260px, 72vw);
  }

  .p-top-cta__panel {
    display: block;
    min-height: 0;
    padding-bottom: 0;
  }

  .p-top-cta__bg {
    inset: 0 0 auto;
    height: var(--cta-visual-h);
  }

  .p-top-cta__title {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: var(--cta-visual-h);
    padding-bottom: 20px;
  }

  .p-top-cta__foot { margin-top: 28px; }

  .p-top-cta__body {
    line-height: 1.9;
    white-space: normal;
  }

  .p-top-cta__more { width: 100%; }

  /* 本文とボタンは写真の下（白い背景の上）に来るため、黒文字・黒いボタンにする */
  .p-top-cta__foot { color: #000; }

  .p-top-cta__more { background-color: var(--c-surface); }

  .p-top-cta__more:hover,
  .p-top-cta__more:focus-visible { background-color: #2a2a2a; }
}