/*
 * 参考
 * https: //github.com/Andy-set-studio/modern-css-reset/blob/master/src/reset.css
*/

/* Box sizing rules */

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

/* remove default margin */

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

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

/* Set core root defaults */

html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */

body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture {
	max-width: 100%;
	display: block;
}

/*
  picture を display: contents にすると、中の <source> が flex / grid の並びに
  「大きさ0の要素」として加わり、gap が1つ余計に入る（写真の間が2倍になる）。
*/

picture > source {
	display: none;
}

/*
  <picture> は AVIF の出し分けのためだけに使う（func-avif.php が自動で包む）。
  レイアウトには一切関わらせたくないので、箱そのものを作らない。
  これで `height: 100%` や flex / grid の指定は今までどおり <img> に効く。
*/

picture {
	display: contents;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

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

/* remove all animations and transitions for people that prefer not to see them */

button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

@font-face {
	font-display: swap;
	font-weight: 400;
	font-style: normal;
	font-family: "Noto Sans JP";
	src: url("../font/NotoSansJP-Regular.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 500;
	font-style: normal;
	font-family: "Noto Sans JP";
	src: url("../font/NotoSansJP-Medium.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 700;
	font-style: normal;
	font-family: "Noto Sans JP";
	src: url("../font/NotoSansJP-Bold.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 400;
	font-style: normal;
	font-family: "Zen Kaku Gothic New";
	src: url("../font/ZenKakuGothicNew-Regular.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 500;
	font-style: normal;
	font-family: "Zen Kaku Gothic New";
	src: url("../font/ZenKakuGothicNew-Medium.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 700;
	font-style: normal;
	font-family: "Zen Kaku Gothic New";
	src: url("../font/ZenKakuGothicNew-Bold.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 400;
	font-style: normal;
	font-family: "Homemade Apple";
	src: url("../font/HomemadeApple-Regular.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 400;
	font-style: normal;
	font-family: "Roboto";
	src: url("../font/Roboto-Regular.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 500;
	font-style: normal;
	font-family: "Roboto";
	src: url("../font/Roboto-Medium.woff") format("woff");
}

@font-face {
	font-display: swap;
	font-weight: 700;
	font-style: normal;
	font-family: "Roboto";
	src: url("../font/Roboto-Bold.woff") format("woff");
}

:root {
	--base-font: "Noto Sans JP", sans-serif;
	--zen-font: "Zen Kaku Gothic New", sans-serif;
	--roboto-font: "Roboto", sans-serif;
	--jost-font: "Jost", sans-serif;
	--mont-font: "Montserrat", sans-serif;
	--manrope-font: "Manrope", sans-serif;
	--homemade-apple-font: "Homemade Apple", sans-serif;
}

:root {
	--regular: 400;
	--medium: 500;
	--semi-bold: 600;
	--bold: 700;
	--extra-bold: 800;
	--black-weight: 900;
}

:root {
	--black: #000000;
	--black0: #000000;
	--black2: #1d1d1d;
	--black-text: #000000;
	--white: #fff;
	--green: #00a652;
	--green-mid: #00b27c;
	--green-light: #00b587;
	--teal: #00c2b6;
	--yellow: #eaff00;
	--yellow-lime: #deff00;
	--pink: #ff327a;
	--pink-strong: #ff3d7d;
	--orange: #f97055;
	--gray-bg: #f6f6f6;
	--gray-text: #404040;
	--form-active-bg: #e9f5ef; /* 入力不備の行の背景（デザインPSDの非表示レイヤー error の実測） */
	--form-error-bg: #fbdcdc;
	--grad-green: linear-gradient(180deg, #00c2b6 0%, #00a652 100%);
	--grad-pink: linear-gradient(90deg, #ff327a 0%, #f97055 100%);
	--grad-pink-reverse: linear-gradient(90deg, #f97055 0%, #ff327a 100%);
	--grad-dark: linear-gradient(180deg, #000000 0%, #000000 25%, #353535 100%);
}

/*
  ピンクのグラデーションボタン共通。
  ホバーでグラデーションを左右反転させる。
  background-image 同士はトランジションできないので、
  反転したグラデーションを ::before で重ねて opacity でフェードさせている。
*/

/*****************************************
 * 数値から単位を取り除く
 * 参考
 * https://css-tricks.com/snippets/sass/
******************************************/

/*****************************************
 * px→remの計算
 * 参考
 * https://webdou.net/sass-rem/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/

/*****************************************
 * vwの計算
 * 参考
 * https://webdou.net/sass-vw/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/

/*****************************************
 * rclamp(): レスポンシブな clamp() 値を生成
 *
 * $minVw の画面幅で $min、$maxVw の画面幅で $max になり、
 * 間は線形に変化する CSS clamp() を返す。
 *
 * 引数 (すべて単位なし px の数値):
 *   $min    最小ピクセル値 (必須)
 *   $max    最大ピクセル値 (必須)
 *   $minVw  この画面幅で $min に固定 (省略時 375)
 *   $maxVw  この画面幅で $max に固定 (省略時 1200)
 *
 * 使用例:
 *   font-size: rclamp(24, 64);
 *   font-size: rclamp(24, 64, 768, 1440);
 *   padding: rclamp(16, 40);
 *   gap:     rclamp(8, 20);
 *   margin-top: rclamp(40, 120);
******************************************/

/*****************************************
 * dx(): デザイン(1440px)のX座標を、画面中央基準の left 値に変換
 *
 * 1440px 以上に広げても中央の 1440px キャンバスを基準に配置できる。
 *   left: dx(142);  // デザイン上 x=142px の位置
******************************************/

html {
	font-size: 16px; /*
    SP（〜767px）はデザインカンプ（750px＝375px換算）の比率をそのまま伸縮させる。
    375pxちょうどで 16px、750pxなら 32px と、画面幅に比例して倍になる。
    （以前は376px以上で16px固定だったため、画面が広くなっても文字が大きくならなかった）
  */
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 3.75rem;
}

body {
	font-family: var(--base-font);
	font-weight: var(--regular); /* デザイン（PSD）がプロポーショナルメトリクスで組まれているため、
     約物・かなの字幅を詰めて見た目を合わせる */
	font-feature-settings: "palt" 1;
	color: var(--black);
	background-color: var(--white);
}

a {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s;
}

.u-flex {
	display: flex;
	gap: 2px;
}

.u-font14 {
	font-size: prem(14);
}

.u-font16 {
	font-size: prem(16);
}

.u-font18 {
	font-size: prem(18);
}

.u-font20 {
	font-size: prem(20);
}

.u-font22 {
	font-size: prem(22);
}

.u-font24 {
	font-size: prem(24);
}

.u-font28 {
	font-size: prem(28);
}

.u-font32 {
	font-size: prem(32);
}

.u-font40 {
	font-size: prem(40);
}

.u-hover {
	transition: opacity 0.5s;
}

.u-hover:hover {
	opacity: 0.6;
	transition: opacity 0.5s;
}

.u-lh10 {
	line-height: 1;
}

.u-lh13 {
	line-height: 1.3;
}

.u-lh15 {
	line-height: 1.5;
}

.u-lh16 {
	line-height: 1.6;
}

.u-lh20 {
	line-height: 2;
}

.u-ls05 {
	letter-spacing: 0.05em;
}

.u-ls10 {
	letter-spacing: 0.1em;
}

.u-ls15 {
	letter-spacing: 0.15em;
}

.u-ls20 {
	letter-spacing: 0.2em;
}

.u-mt10 {
	margin-top: 10px !important;
	margin-top: prem(10) !important;
}

.u-mt20 {
	margin-top: 20px !important;
	margin-top: prem(20) !important;
}

.u-mt30 {
	margin-top: 30px !important;
	margin-top: prem(30) !important;
}

.u-mt40 {
	margin-top: 40px !important;
	margin-top: prem(40) !important;
}

.u-mt50 {
	margin-top: 50px !important;
	margin-top: prem(50) !important;
}

.u-mt60 {
	margin-top: 60px !important;
	margin-top: prem(60) !important;
}

.u-mt70 {
	margin-top: 70px !important;
	margin-top: prem(70) !important;
}

.u-mt80 {
	margin-top: 80px !important;
	margin-top: prem(80) !important;
}

.u-mt90 {
	margin-top: 90px !important;
	margin-top: prem(90) !important;
}

.u-mt100 {
	margin-top: 100px !important;
	margin-top: prem(100) !important;
}

.u-mt110 {
	margin-top: 110px !important;
	margin-top: prem(110) !important;
}

.u-mt120 {
	margin-top: 120px !important;
	margin-top: prem(120) !important;
}

.u-mt130 {
	margin-top: 130px !important;
	margin-top: prem(130) !important;
}

.u-mt140 {
	margin-top: 140px !important;
	margin-top: prem(140) !important;
}

.u-mt150 {
	margin-top: 150px !important;
	margin-top: prem(150) !important;
}

.u-mt160 {
	margin-top: 160px !important;
	margin-top: prem(160) !important;
}

.u-mt170 {
	margin-top: 170px !important;
	margin-top: prem(170) !important;
}

.u-mt180 {
	margin-top: 180px !important;
	margin-top: prem(180) !important;
}

.u-mt190 {
	margin-top: 190px !important;
	margin-top: prem(190) !important;
}

.u-mt200 {
	margin-top: 200px !important;
	margin-top: prem(200) !important;
}

.u-shadow {
	box-shadow: 0 0 13px rgba(255, 0, 0, 0.5);
}

.u-sp {
	display: none;
}

.u-sp400 {
	display: none;
}

.u-sp450 {
	display: none;
}

.u-sp500 {
	display: none;
}

.u-sp550 {
	display: none;
}

.u-sp600 {
	display: none;
}

.u-sp650 {
	display: none;
}

.u-sp700 {
	display: none;
}

.u-textLeft {
	text-align: Left !important;
}

.u-textCenter {
	text-align: Center !important;
}

.u-textRight {
	text-align: Right !important;
}

.u-textJustify {
	text-align: Justify !important;
}

.u-w300 {
	font-weight: 300;
}

.u-w400 {
	font-weight: 400;
}

.u-w500 {
	font-weight: 500;
}

.u-w600 {
	font-weight: 600;
}

.u-w700 {
	font-weight: 700;
}

.u-w900 {
	font-weight: 900;
}

/* コンテンツ幅（デザイン幅 1440px / コンテンツ幅 1242px） */

.inner {
	width: 100%; /*
    SPは画面幅に比例して伸縮させる（html の font-size が vw）ので、
    375pxの見た目をそのまま拡大する。幅の上限は設けない。
  */
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* ヘッダー・フッターで使う広いインナー（左右 39px / 28px） */

.layout-section {
	padding-top: 3.5rem;
	overflow-x: clip;
}

.layout-section__body {
	margin-top: 2rem;
}

/* 3つの事業 */

.layout-section--biz {
	padding-bottom: 3rem;
}

/* 施工管理の仕事とは？ */

.layout-section--work {
	padding-bottom: 4rem;
}

/* 社内制度・福利厚生 */

.layout-section--benefits {
	background-color: var(--gray-bg);
}

/* フォトギャラリー */

.layout-section--gallery {
	padding-bottom: 3.5rem;
	background-color: var(--gray-bg);
}

/* 全幅写真（MVに少し重なる） */

.page-photo--overlap {
	position: relative;
	z-index: 2;
	margin-top: -2.5rem;
}

/* =========================
  Header（背景は常に透過。セクションごとに文字色を反転）
========================= */

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	pointer-events: none;
}

.header__inner {
	display: flex;
	align-items: center;
	height: 4.375rem;
	transition: height 0.3s ease; /* SPはデザイン（top_SP_260925）：ロゴの左10 / ハンバーガーの右18 */
	padding-left: 0.625rem;
	padding-right: 1.125rem;
}

/* ロゴ（ヘッダーからぶら下がる） */

.header__logo { /*
    ドロワー（.header__drawer / z-index 950）は .header の中にあるので、
    position が無いままだと「位置指定された兄弟」より下の層に描かれ、
    ドロワーを開いたときにロゴが隠れてしまう。
    閉じるボタン（.header__hamburger）と同じ層に上げて、開いていても見え続けるようにする。
  */
	position: relative;
	z-index: 1001;
	pointer-events: auto;
	align-self: flex-start; /* SPはデザイン（top_SP_260925）どおり 74px・上15px */
	width: 4.625rem;
	margin-top: 0.9375rem;
	transition: width 0.3s ease, margin-top 0.3s ease;
}

.header__logo-link {
	display: block;
}

.header__logo-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
}

/* サイト名（SPはロゴのみ表示） */

.header__title { /*
    SPでも社名を出す（デザイン top_SP_260925）。
    ロゴの右端84 → 文字の左100 ＝ 16px、上下は中央より少し下。
  */
	display: block; /* ドロワー（z-index 950）より前に出して、開いていても社名が見えるようにする */
	position: relative;
	z-index: 1001;
	pointer-events: auto;
	margin-top: 0.375rem;
	margin-left: 1rem;
}

.header__title-ja {
	display: block; /* SPでは折り返さない（デザインは1行） */
	white-space: nowrap;
	font-size: 0.6875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.header__title-en {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.4375rem;
	font-weight: var(--medium);
	font-family: var(--mont-font);
	letter-spacing: 0.1em;
	line-height: 1;
}

/* グローバルナビ */

.header__nav {
	display: none;
}

.header__nav-list {
	display: flex;
	align-items: center;
	gap: 1.0625rem;
}

.header__nav-link {
	display: block;
	font-size: 0.9375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
	white-space: nowrap;
}

/*
  スタッフインタビューのドロップダウン（PCのみ）。
  デザイン（top_PC_260915）実測：
    ナビの文字 y63〜78 → 吹き出しの先端 y84 → 箱 y97〜249（232×152）
    緑 #00a652・白文字 14px・行送り35px・中央ぞろえ
  箱と文字の間（19px）でホバーが途切れないよう、.header__sub の padding で間を埋めている。
*/

.header__nav-item--has-sub {
	position: relative;
}

.header__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1;
	padding-top: 1.1875rem;
	visibility: hidden;
	opacity: 0;
	transform: translate(-50%, -0.375rem);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.header__nav-item--has-sub:hover .header__sub,
.header__nav-item--has-sub:focus-within .header__sub {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
}

.header__sub-list {
	position: relative;
	width: 14.5rem;
	padding: 1.5rem 0.75rem 1.4375rem;
	border-radius: 0.625rem;
	background-color: var(--green);
}

/* 上の吹き出しの先端（箱の上端から13px） */

.header__sub-list::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -0.6875rem;
	border-right: 0.6875rem solid transparent;
	border-bottom: 0.8125rem solid var(--green);
	border-left: 0.6875rem solid transparent;
}

.header__sub-link {
	display: block;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font); /* ヘッダーの明暗テーマに関係なく、緑の箱の上なので白 */
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 2.5;
	text-align: center;
	white-space: nowrap;
}

.header__sub-link.is-current {
	color: var(--yellow-lime);
}

/* エントリーボタン */

.header__cta {
	display: none; /* ホバーでグラデーションを左右反転（親が display: none の SP では描画されない） */
	position: relative; /*
    ::before を z-index: -1 で敷くため、ここで重ね合わせの文脈をつくる。
    これで「ボタンの背景 → 反転グラデーション → 文字」の順に描かれる。
  */
	isolation: isolate;
	background-image: var(--grad-pink);
}

.header__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--grad-pink-reverse);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* =========================
  配色テーマ（背景の明暗で切り替え）
========================= */

.header[data-theme=light] .header__title-ja,
.header[data-theme=light] .header__title-en,
.header[data-theme=light] .header__nav-link {
	color: var(--white);
}

.header[data-theme=dark] .header__title-ja,
.header[data-theme=dark] .header__nav-link {
	color: var(--black);
}

/* 現在表示中のページ */

.header__nav-link.is-current {
	position: relative;
}

.header__nav-link.is-current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5rem;
	height: 0.125rem;
	background-color: currentColor;
}

.header[data-theme=dark] .header__title-en {
	color: var(--green);
}

/* =========================
  ハンバーガー（SPのみ）
========================= */

/*
  ハンバーガー。デザイン（top_SP_260925）は丸い背景なしの3本線。
  線は31.5×2.5px、間隔2.5px、右端は画面から24px。
  押しやすさのために当たり判定は44pxのままにして、線だけ中央に置く。
*/

.header__hamburger {
	position: relative;
	z-index: 1001;
	pointer-events: auto;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	cursor: pointer;
}

.header__hamburger-bar {
	position: absolute;
	left: 50%;
	width: 1.96875rem; /* デザイン（top_SP_260925）の実測は 2.4/750px ＝ 1.2px（375px換算） */
	height: 0.075rem;
	margin-left: -0.984375rem;
	background-color: var(--white);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.header__hamburger-bar:nth-child(1) {
	top: 1.34375rem;
}

.header__hamburger-bar:nth-child(2) {
	top: 1.65625rem;
}

.header__hamburger-bar:nth-child(3) {
	top: 1.96875rem;
}

/* ドロワーは白背景なので、開いたら×印を緑にする */

.header__hamburger.is-open .header__hamburger-bar {
	background-color: var(--green);
}

.header__hamburger.is-open .header__hamburger-bar:nth-child(1) {
	transform: translateY(0.3125rem) rotate(45deg);
}

.header__hamburger.is-open .header__hamburger-bar:nth-child(2) {
	opacity: 0;
}

.header__hamburger.is-open .header__hamburger-bar:nth-child(3) {
	transform: translateY(-0.3125rem) rotate(-45deg);
}

/* =========================
  ドロワー（SPのみ）
========================= */

.header__drawer {
	position: fixed;
	inset: 0;
	z-index: 950;
	display: flex;
	flex-direction: column; /*
    中央ぞろえ（center）にすると、画面が低くて中身が入りきらないときに
    上下どちらへもはみ出す。このうち**上にはみ出したぶんはスクロールで戻れない**ので、
    メニューの先頭が隠れたまま出てこなくなる（横向き・低い端末で発生）。
    上ぞろえなら、あふれるのは必ず下側だけになり、スクロールで最後まで読める。
  */
	justify-content: flex-start; /* デザイン（top_SP_260925）：白背景・中央ぞろえ。1行目の文字上が y=143 */
	padding: 7.5rem 1.25rem 2.5rem;
	background-color: var(--white);
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	overflow-y: auto;
}

.header__drawer.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/*
  縦フレックスの子は既定で縮む（flex-shrink: 1）ため、画面が低いと
  メニューもエントリーボタンも押しつぶされて高さが足りなくなる。
  縮ませずに、あふれたぶんはドロワーのスクロールに任せる。
*/

.header__drawer > * {
	flex-shrink: 0;
}

.header__drawer-list {
	display: block;
}

.header__drawer-link {
	display: block;
	font-size: 1.125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em; /* デザイン：行の間隔60px */
	line-height: 3.3333333333;
}

/* メニューの下に並ぶインタビューの3名 */

.header__drawer-sub {
	margin-top: 0.15625rem;
}

.header__drawer-sub-link {
	display: block;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em; /* デザイン：行の間隔40px */
	line-height: 2.8571428571;
}

.header__drawer-cta {
	display: flex;
	align-items: center;
	justify-content: center; /* デザイン：235×60・メンバーの下から30px */
	width: 14.6875rem;
	height: 3.75rem;
	margin: 1.875rem auto 0;
	border-radius: 1.875rem;
	font-size: 1.01875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
	position: relative; /*
    ::before を z-index: -1 で敷くため、ここで重ね合わせの文脈をつくる。
    これで「ボタンの背景 → 反転グラデーション → 文字」の順に描かれる。
  */
	isolation: isolate;
	background-image: var(--grad-pink);
}

.header__drawer-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--grad-pink-reverse);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* ドロワーが開いているあいだは、ヘッダーの社名も濃い色にする（白背景のため） */

.header.is-drawer-open .header__title-ja,
.header.is-drawer-open .header__title-en {
	color: var(--black);
}

.footer {
	position: relative;
	color: var(--white); /*
    SPはデザイン（top_SP_260925）：ロゴの列は上のセクション（募集一覧の灰色）に重なっていて、
    緑はフッター上端から45.5px下から始まる。重なるぶんだけ上へ引き上げる。
  */
	margin-top: -3.0625rem; /* SPはデザイン（top_SP_260925）：中央ぞろえ */
	text-align: center;
}

/*
  SPは緑の帯がフッターの上端から45.5px下から始まり、
  ロゴだけがその上（白い部分）に出る。
*/

.footer::before {
	content: "";
	position: absolute;
	top: 2.84375rem;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: var(--grad-green);
}

.footer__inner {
	position: relative;
	z-index: 1;
	padding-top: 0.625rem;
	padding-bottom: 1.875rem;
}

/* ロゴ（フッター上辺からはみ出す） */

.footer__logo {
	display: block;
	width: 4.625rem;
	margin-inline: auto;
}

.footer__logo-link {
	display: block;
}

.footer__logo-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
}

/* 1段目：サイト名 + ナビ + エントリーボタン */

.footer__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.footer__title {
	margin-top: 1.125rem;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.footer__nav {
	margin-top: 2.53125rem;
}

.footer__nav-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.footer__nav-link {
	display: block;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em; /* デザイン：行の間隔40px */
	line-height: 3.0769230769;
	white-space: nowrap;
}

.footer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 11.375rem;
	max-width: none;
	height: 2.875rem;
	margin-top: 0.375rem;
	border-radius: 1.4375rem;
	font-size: 0.7375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
	position: relative; /*
    ::before を z-index: -1 で敷くため、ここで重ね合わせの文脈をつくる。
    これで「ボタンの背景 → 反転グラデーション → 文字」の順に描かれる。
  */
	isolation: isolate;
	background-image: var(--grad-pink);
}

.footer__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--grad-pink-reverse);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* 2段目：会社情報 */

.footer__company {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3125rem;
	margin-top: 2.65625rem;
}

.footer__company-name {
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.375;
}

.footer__official {
	font-size: 0.75rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.571;
	text-decoration: underline; /* デザインは文字の下端から8px下に1本 */
	text-underline-offset: 0.5rem;
}

.footer__address {
	margin-top: 1.4375rem;
	font-size: 0.8125rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.9230769231;
}

/* 3段目：プライバシーポリシー + コピーライト */

.footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.625rem;
	margin-top: 2.15625rem;
}

.footer__privacy {
	font-size: 0.6875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.footer__copyright { /*
    SPは1行に収める（デザインも1行）。
    9pxだと字間0.1emを足した実幅が枠とほぼ同じで、端末によって折り返してしまう。
  */
	white-space: nowrap;
	font-size: 0.55rem;
	font-weight: var(--medium);
	font-family: var(--mont-font);
	letter-spacing: 0.1em;
	line-height: 1.667;
}

/* ページトップ */

.footer__pagetop {
	position: absolute;
	top: -3.875rem;
	right: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6875rem;
	color: var(--gray-text);
	cursor: pointer;
}

.footer__pagetop-icon {
	display: block;
	width: 0;
	height: 0;
	border-left: 0.375rem solid transparent;
	border-right: 0.375rem solid transparent;
	border-bottom: 0.6875rem solid var(--green);
}

.footer__pagetop-text {
	font-size: 0.75rem;
	font-weight: var(--bold);
	font-family: var(--mont-font);
	letter-spacing: 0.15em;
	line-height: 1;
}

/* =========================
  横に流れ続ける写真の帯（共通）
  対象：トップの「仕事内容・実績」（.business__gallery）／「スタッフインタビュー」（.interview__marquee）
        仕事内容・実績ページのMV（.page-mv__gallery）

  同じ並びのリスト（.marquee-track）を2本横に並べ、それぞれを自分の幅ぶん左へ動かし続ける。
  1本流し切った瞬間に2本目がちょうど1本目の位置に来ているので、継ぎ目なくループする。
  ※ リストの幅に「最後の写真の後ろのすき間」も含めるため、gap と同じ padding-right を付ける。

  以前は Swiper の autoplay で1枚ずつ送っていたが、iPhone の Safari では
  タイマーの遅れやスクロール中の再計算で「止まる・急に速くなる・途中で切れる」が起きていた。
  CSS アニメーションは JS を使わずに描画側（GPU）で動くので、スクロール中も一定の速さで流れる。

  速さは各ブロックで --marquee-duration（1本ぶん流し切る秒数）として指定する。
========================= */

.marquee-track {
	display: flex;
	flex-shrink: 0;
	animation: marquee var(--marquee-duration, 60s) linear infinite; /* 最初から独立したレイヤーにしておく（流れ始めのカクつき・ちらつき防止） */
	will-change: transform;
	backface-visibility: hidden;
}

/* 端末で「視差効果を減らす」がオンのときは止める */

.breadcrumb {
	padding-inline: 1.25rem;
	margin-top: 0.75rem;
}

.breadcrumb__inner {
	display: flex;
	align-items: center;
	width: 100%;
	margin-inline: auto;
}

.breadcrumb__item {
	font-size: 0.75rem;
	font-weight: var(--regular);
	color: #4a5565;
	letter-spacing: -0.011em;
	line-height: 1.4285714286;
	font-family: var(--base-font);
}

.breadcrumb__link {
	color: #4a5565;
}

.breadcrumb__separator {
	display: flex;
	align-items: center;
	margin-left: 0.375rem;
}

.breadcrumb__separator svg {
	width: 0.875rem;
	height: 0.875rem;
}

.breadcrumb__item--current {
	margin-left: 0.375rem;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2rem;
}

.pagination__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.75rem;
	border: 0.0625rem solid #d1d5dc;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	font-weight: var(--regular);
	color: #0a0a0a;
	letter-spacing: -0.02em;
	line-height: 1.5;
	font-family: var(--base-font);
	margin-left: 0.375rem;
	transition: background-color 0.3s, color 0.3s;
}

.pagination__btn:first-child {
	margin-left: 0;
}

.pagination__btn--current {
	background-color: #00bc7d;
	border-color: #00bc7d;
	color: #fff;
}

.pagination__btn--disabled {
	opacity: 0.5;
	pointer-events: none;
}

.pagination__btn--prev,
.pagination__btn--next {
	min-width: 3.25rem;
}

.loading {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	pointer-events: none;
}

.loading__logo {
	width: 10rem;
}

.loading__logo svg {
	width: 100%;
	height: auto;
	display: block;
	visibility: hidden;
}

/* VIEW MORE 系のピルボタン */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center; /* SPはデザイン（top_SP_260925）：182×46 */
	width: 11.375rem;
	height: 2.875rem;
	border-radius: 1.4375rem;
	font-size: 0.7375rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	letter-spacing: 0.1em;
	line-height: 1;
	transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn--white {
	background-color: var(--white);
	color: var(--green);
}

.btn--dark {
	background-color: #1d1d1d;
	color: var(--white);
}

.btn-arrow {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-width: 13.1875rem;
	height: 3.125rem;
	gap: 0.75rem;
	padding: 0.25rem 0.25rem 0.25rem 1.5rem;
	background-color: var(--white);
	border: 0.0625rem solid #1f1f1f;
	border-radius: 2rem;
	transition: 0.3s ease;
	cursor: pointer;
}

.btn-arrow__text {
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: #1f1f1f;
	letter-spacing: 0.0625em;
	line-height: 1;
	white-space: nowrap;
	transition: color 0.3s ease;
}

.btn-arrow__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: auto;
	width: 2.25rem;
	height: 2.25rem;
	background-color: #1f1f1f;
	border-radius: 50%;
	transition: background-color 0.3s ease;
}

.btn-arrow__icon::before {
	content: "";
	display: block;
	width: 1.1875rem;
	height: 1.1875rem;
	background-color: var(--white);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 0 18 18'%3E%3Cpath d='M23.25,17.52a1,1,0,0,1-.71-1.71L29.6,8.76,22.54,1.71A1,1,0,0,1,23.96.29L31.72,8.05a1,1,0,0,1,0,1.41L23.96,17.23a1,1,0,0,1-.71.29' fill='%23fff'/%3E%3Cpath d='M30.92,9.76H15a1,1,0,0,1,0-2H30.92a1,1,0,0,1,0,2' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 0 18 18'%3E%3Cpath d='M23.25,17.52a1,1,0,0,1-.71-1.71L29.6,8.76,22.54,1.71A1,1,0,0,1,23.96.29L31.72,8.05a1,1,0,0,1,0,1.41L23.96,17.23a1,1,0,0,1-.71.29' fill='%23fff'/%3E%3Cpath d='M30.92,9.76H15a1,1,0,0,1,0-2H30.92a1,1,0,0,1,0,2' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: background-color 0.15s ease;
}

/* 白バージョン（黒背景用） */

.btn-arrow--white {
	background-color: transparent;
	border-color: var(--white);
}

.btn-arrow--white .btn-arrow__text {
	color: var(--white);
}

.btn-arrow--white .btn-arrow__icon {
	background-color: var(--white);
}

.btn-arrow--white .btn-arrow__icon::before {
	background-color: #1f1f1f;
}

/* セクション見出しの上に置く吹き出しラベル */

.badge {
	position: relative;
	display: inline-block; /* SPはデザイン（top_SP_260925）：帯の高さ38・文字13.5px（750px時27px） */
	padding: 0.765625rem 1.40625rem;
	background-color: var(--green);
	font-size: 0.84375rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
}

.badge::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 45%;
	width: 0;
	height: 0;
	border-top: 0.84375rem solid var(--green);
	border-right: 0.84375rem solid transparent;
}

.section-title {
	font-size: max(1.875rem, 7.2vw);
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.1em;
	line-height: 1.3888888889;
	text-align: center;
}

.section-title--en {
	font-family: var(--roboto-font);
	letter-spacing: 0em;
}

/*
  ページ下部に固定で出るエントリーボタン（SPのみ）。
  デザイン：staff1_SP_260925 / top_SP_260925 の「ページ下部固定」グループ
    - 帯の高さ 91px（750px時 182px）。背景は下にいくほど濃くなる黒のグラデーション
    - ボタンは 236×61.5、帯の上端から10px下
  PCのデザインには無いので md 以上では出さない。
*/

.fixed-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0; /* ヘッダー（1000）・ドロワー（950）より後ろ */
	z-index: 900;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 5.6875rem;
	padding-top: 0.625rem; /* 影の部分はクリックを拾わない（下にあるリンクを押せるように） */
	pointer-events: none; /* デザインの黒グラデーション（下端で50%）。中間はデザインの実測に合わせている */
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.5) 100%);
}

.fixed-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14.75rem;
	height: 3.84375rem;
	border-radius: 1.921875rem; /* デザインの文字の高さ（750px時29px）に合わせた値 */
	font-size: 0.95625rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1; /* 帯はクリックを拾わないので、ボタンだけ戻す */
	pointer-events: auto;
	position: relative; /*
    ::before を z-index: -1 で敷くため、ここで重ね合わせの文脈をつくる。
    これで「ボタンの背景 → 反転グラデーション → 文字」の順に描かれる。
  */
	isolation: isolate;
	background-image: var(--grad-pink);
}

.fixed-cta__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--grad-pink-reverse);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/*
  下部固定のボタン（91px）にコピーライトが隠れないよう、SPだけフッターの下を広げる。
  デザインではコピーライトの下が38.5pxなので、合計がボタンの帯の高さ91pxになるぶんを足している。
*/

/* =========================
  下層ページの MV（共通）
========================= */

.page-mv {
	position: relative;
	overflow-x: clip;
}

.page-mv__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.page-mv--dark .page-mv__bg {
	background-image: var(--grad-dark);
}

.page-mv--green .page-mv__bg {
	background-image: var(--grad-green);
}

.page-mv__inner {
	position: relative;
	z-index: 3;
	padding-top: 7.5rem;
	padding-bottom: 3.5rem;
	color: var(--white);
	text-align: center;
}

.page-mv__badge {
	display: block;
}

.page-mv__title {
	margin-top: 1.5rem;
	font-size: 1.75rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.page-mv__en {
	margin-top: 1.125rem;
	font-size: 1rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--yellow-lime);
	letter-spacing: 0.1em;
	line-height: 1;
}

.page-mv__lead {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 2;
	text-align: left;
}

.page-mv__lead--bold {
	font-weight: var(--bold);
}

/* ---- 仕事内容・実績：上にはみ出す3枚の写真 ---- */

.page-mv--business .page-mv__inner { /*
    SPは上に写真のスライダーが乗るので、既定の120pxだと空きすぎる。
    映り込み（26px）ぶんを避けて、そこから30px空ける。
  */
	padding-top: 3.5rem;
}

/*
  横に流れ続ける写真の帯。トップの `.business__gallery` と同じ作り（流れる仕組みは _marquee.scss）。
  写真の間隔はデザイン通り SP12px / PC28px。
*/

.page-mv__gallery {
	display: flex;
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 5rem; /*
    左右は切って横スクロールを防ぎつつ、下だけは映り込みのぶん見せる。
    overflow: hidden のままだと映り込みが消えてしまう。
    （横のはみ出しは .page-mv の overflow-x: clip が受け持つ）
  */
	overflow: visible;
	clip-path: inset(0 0 -1.625rem 0);
}

/*
  1本（写真7枚）を流し切る秒数＝1本の幅 ÷ 1秒あたり60px（デザイン基準）。
  SP：7 ×（301.5 + 12）÷ 60 ≒ 36.6秒／PC：7 ×（602 + 28）÷ 60 ＝ 73.5秒
*/

.page-mv__gallery-track {
	--marquee-duration: 36.6s;
	gap: 0.75rem;
	padding-right: 0.75rem;
}

.page-mv__gallery-item {
	position: relative;
	flex-shrink: 0;
	width: 15rem;
	height: auto;
}

/*
  写真の下の映り込み。
  素材（mv_ref.png）はぼかしも減衰もない生の反転画像で、そのまま敷くと
  建物や足場がくっきり透けて見えてしまうため、CSSで作る。

  ・同じ画像を scaleY(-1) で反転 → 窓（64px）で上だけ見せる＝写真の下端が映る
  ・blur でぼかし、下へ向かってマスクで消す
  デザイン実測：写真の下端503pxから約64pxで背景の明るさに戻る
*/

.page-mv__gallery-reflection {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%; /* 写真の高さに対する割合はPCと同じ（64 / 344）。SPは写真が137pxなので26px */
	height: 1.625rem;
	overflow: hidden; /*
    濃さで薄くする（ぼかしでは消さない）。
    デザインの映り込みは道路の白線が分かる程度にくっきりしていて、
    ぼかしを強くすると「何も無い帯」になってしまう。
  */
	opacity: 0.3;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.page-mv__gallery-reflection img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 602/344;
	object-fit: cover; /* 上下反転。窓の上端＝写真の下端になる */
	transform: scaleY(-1); /*
    ぼかしは「窓の中の画像」にかける。
    窓（overflow: hidden）の外側にかけると、ぼけが上へにじんで
    写真の下端にモヤがかかってしまう。
    量はデザインに合わせて控えめ（2px）。写真が何か分かる程度を残す。
  */
	filter: blur(0.125rem);
}

.page-mv__gallery-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 602/344;
	object-fit: cover;
}

/* ---- 働く環境・制度：吹き出しつきの社員 ---- */

.page-mv--workplace .page-mv__inner { /* SPは上に社員のスライダーが乗るので、仕事内容・実績と同じ詰め方にする */
	padding-top: 3.5rem;
}

/* ---- 働く環境・制度：社員のスライダー ---- */

/*
  中央に来た1人だけが大きくなり、最前面に出る（デザインの「スライド」グループを再現）。
  人物ごとに切り抜きの大きさが違うので、高さをそろえてから中央だけ拡大する。
  そろえないと、たまたま大きい画像の人が常に大きく見えてしまう。
*/

.page-mv__people {
	position: relative;
	z-index: 2;
	height: 18.75rem;
	padding-top: 5rem;
	overflow: hidden;
	pointer-events: none;
}

.page-mv__people-slider {
	height: 100%; /*
    上は拡大した中央の人がはみ出せるように見せる。

    左右は 10px ぶん広げて切る。スライダーは画面中央合わせのために
    左右へ10pxずらしてあるので、`0` で切ると**画面の10px内側**で
    人物がまっすぐ切れてしまう（左端に切り口が見える）。
    -10px にすると切り口が画面の外＝`.page-mv` の overflow-x: clip の位置に来るので見えない。

    下は **y646 で切る**。デザインは人物グループに
    「y646 でスパッと切るマスク」が掛かっていて、脚は途中までしか見えない。
    切らないと人物が 720px（中央は752px）まで伸びて**足が長すぎて見える**。
    スライダーの箱は 0〜720 なので、下の inset は 720 − 646 = 74px。
  */
	overflow: visible; /*
    下の切り口はPCが「720の箱に対して74px」＝約10%。
    SPはスライダーの高さが220pxしかないので、74pxのままだと
    人物の1/3が切れて足が極端に短く見える。同じ割合の23pxにする。
  */
	clip-path: inset(-100% -0.625rem 1.4375rem -0.625rem);
}

.page-mv__people .swiper-wrapper { /* 全員を足元でそろえる */
	align-items: flex-end;
	height: 100%;
}

.page-mv__person-slide {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: auto;
	height: 100%;
}

/* 中央の1人は最前面へ */

.page-mv__people .swiper-slide-active {
	z-index: 3;
}

.page-mv__person {
	display: block;
	width: auto;
	height: 13.75rem; /* 足元を軸に拡大する */
	transform-origin: bottom center;
	transition: transform 0.5s ease;
}

/*
  拡大するのは人物だけ。スライドごと拡大すると吹き出しまで大きくなり、
  中央に来たときにヘッダーへ突き抜けてしまう。
  デザインでも吹き出しの大きさは人物ごとに固定。
*/

.page-mv__people .swiper-slide-active .page-mv__person { /*
    下げる量もPCの「720に対して56px」と同じ割合にする。
    56pxのままだとSP（220px）では下の切り口を突き抜けて、
    拡大したのに逆に短く見えてしまう。
  */
	transform: translateY(1.0625rem) scale(1.2);
}

/* ---- 吹き出し ---- */

/*
  吹き出しは画像（白フチ込み）で、中の文字だけHTML。
  デザインでは文字が約13.5度かたむいているので rotate で再現する。

  デザイン（1440）の実測：
    人物     x-110/119/361/583/868/1113/1327（幅185〜294）
    吹き出し x55/303/486/828/1061/1276（105角・中央だけ170×172）
  ここから共通のルールを出すと
    ・吹き出しの右端＝その人の左端＋人物幅の約26%（＝顔にはかからない）
  になる。前の人に少しかぶるのもデザインどおり。

  画像の作り（PSDの再現）：
    本体 105px角 ＋ 外側4pxの白フチ（PSDの Stroke／position: OutF）
    にじみ用に1pxずつ余白を足して、画像は 115px角＝$bubble-size。
    位置合わせはデザインと同じ「本体105px角」基準なので、
    余白ぶん（$bubble-pad）を right / bottom から引いている。
*/

/* 中央に来たときの倍率。デザイン実測どおり 105 → 170 */

/*
  本体の上端はMV上端から192px。
  デザインは179pxだが、それだとスライダーが回って吹き出しが左端に来たとき
  ヘッダーのロゴ（緑の四角・下端186px）に白フチごと隠れて四角く欠けて見える。
  （デザインでもロゴが吹き出しの上に乗っていて、同じ欠けが起きている）
  ロゴの下に完全に収まる位置まで下げた。
*/

.page-mv__bubble {
	display: none;
}

/*
  中央に来た人の吹き出しは、デザインの大きい吹き出し（170×172）にそろえる。
  デザインは 中央の人 x583〜877 に対して 吹き出し x486〜656・y98〜270。
  中央のスライドは必ず画面中央に来るので、右端を「画面中央から74px左」に
  すれば、人物の幅が違ってもデザインと同じ位置になる（顔にかからない）。
  105 → 170 なので 1.619倍。
*/

.page-mv__people .swiper-slide-active .page-mv__bubble { /*
    SPは中央に来た人の吹き出しだけ出す。
    SPの人物は幅約80px（PCの185〜294pxの約3割）しかないため、
    PCのように7個すべてを同じ割合で並べると吹き出しは本体35px角ほどになり、
    中の文字が4pxほどになって読めない・隣どうしが重なる。
    「中央の人が主役」というPCの作りはそのままに、吹き出しは
    本体105px角（＝PCと同じ実寸・文字もそのまま）で1つだけ見せる。
    中央のスライドは必ず画面中央に来るので、右端を画面中央から左にずらして
    顔にかからない位置に置く。
  */
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 4;
	right: calc(50% + 1.75rem);
	bottom: 3.4375rem;
	width: 7.1875rem;
	text-align: center;
	transform-origin: bottom right;
	transition: right 0.5s ease, bottom 0.5s ease, transform 0.5s ease;
}

.page-mv__bubble-img {
	display: block;
	width: 100%;
	height: auto;
}

.page-mv__bubble-text {
	position: absolute; /* デザインの文字ブロックは吹き出しのほぼ中央（6個の平均で 49.8% / 49.8%） */
	top: 50%;
	left: 50%;
	font-size: 0.75rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0; /* デザインの行送り（PSD：leading 30 / fontSize 20） */
	line-height: 1.5;
	white-space: nowrap; /* デザインの傾き（PSDのtransformから算出：約13.5度） */
	transform: translate(-50%, -50%) rotate(-13.5deg);
}

/* 吹き出しの色に合わせた文字色 */

.page-mv__bubble--green .page-mv__bubble-text {
	color: var(--green);
}

.page-mv__bubble--teal .page-mv__bubble-text {
	color: #00858d;
}

/*
  文字の大きさ。デザインも行の文字数に合わせて変えていて、
  12px のままだと長い行（「みんなやさしいので、」など）が丸からはみ出す。
  大きさは「回転後の文字ブロックが本体の円（半径52.5px）に
  4px以上内側で収まる」ことを実測して決めている。
*/

.page-mv__bubble--sm .page-mv__bubble-text {
	font-size: 0.71875rem;
}

.page-mv__bubble--xs .page-mv__bubble-text {
	font-size: 0.6875rem;
}

.page-mv__bubble--xxs .page-mv__bubble-text {
	font-size: 0.59375rem;
}

/* ---- 募集要項：シンプルな緑帯 ---- */

.page-mv--simple .page-mv__inner {
	padding-top: 7.5rem;
	padding-bottom: 3.5rem;
}

/*
  プライバシーポリシー：本文の白い枠（.policy__body）が緑帯の下端に重なる。
  デザイン（1440）：英字の下端 322 → 緑帯の下端 481（159px）。
  上の .page-mv--simple と詳細度が同じなので、必ずその後ろに書く。
  SPは枠を40px重ねるので、そのぶん帯を伸ばして英字との間を空ける。
*/

.page-mv--policy .page-mv__inner {
	padding-bottom: 6rem;
}

/* 下層ページのセクション見出し（中央・35px＋リード） */

.sec-head {
	text-align: center;
}

.sec-head__title { /* SPはデザイン750px時45px */
	font-size: 1.40625rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.714;
}

.sec-head__lead {
	margin-top: 0.75rem; /* SPはデザイン750px時26px・中央寄せ */
	font-size: 0.8125rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.8;
	text-align: center;
}

/* 全幅の写真帯 */

.page-photo {
	width: 100%;
	overflow-x: clip;
}

.page-photo__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.page-photo--inset .page-photo__img {
	width: calc(100% - 2.5rem);
	margin-inline: auto;
	aspect-ratio: 1308/652;
}

.page-photo--full .page-photo__img {
	aspect-ratio: 1440/652;
}

/*
  パララックス：セクションを「窓」にして、中の画像だけを動かす。
  セクションの高さは今までどおり 1440:652 のまま（ページの座標が動かない）。
  画像は窓より縦に大きくしておき、その差分ぶんだけスクロールで上下させる。
*/

.js-photo-parallax {
	aspect-ratio: 1440/652;
	overflow: hidden;
}

.js-photo-parallax .page-photo__img {
	width: 100%; /*
    窓に対する割合で大きくする。固定pxだとSPで窓が低くなったときに
    動く量が窓の高さに対して大きくなりすぎる。
  */
	height: 120%;
	aspect-ratio: auto;
	object-fit: cover;
	will-change: transform;
}

/* =========================
  テキストだけの下層ページ（プライバシーポリシー / 404）
  ※ どちらもデザインが無いため、他ページの作りに合わせた仮のレイアウト
========================= */

/* =========================
  プライバシーポリシー：SP（デザイン privacy_SP_260916 実測）
  750px時の値を1/2にして入れている。
========================= */

/* ---- プライバシーポリシー ---- */

.policy { /* 中の枠のマイナスマージンがセクションごと持ち上げないように（灰色の背景は緑帯の下から） */
	display: flow-root;
	padding-bottom: 4rem;
	background-color: var(--gray-bg);
}

/*
  デザイン（privacy_PC_260916）：白い枠は y399 から。緑帯（〜481）に 82px 重なる
  （募集要項のカード .req__card--head と同じ重なり）。
  枠の上端から最初の見出しの文字まで約161px。
  緑帯の文字の箱（.page-mv__inner / z-index: 3）より手前に出す。
*/

.policy__body {
	position: relative;
	z-index: 4;
	width: 100%;
	margin-top: -2.5rem;
	padding: 2.5rem 1.25rem 2.5rem;
	border-radius: 0.25rem;
	background-color: var(--white);
}

/*
  本文は管理画面の固定ページ「プライバシーポリシー」で編集する（エディタの h2 / p / ul がそのまま入る）。
  住所（太字）と制定日（右寄せ）だけ段落にクラスを付けている。
*/

.policy__body > h2 {
	font-size: 1.0625rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--green);
	letter-spacing: 0.05em;
	line-height: 1.6;
}

/* 見出しごとの区切り（旧 .policy__section + .policy__section） */

.policy__body > h2:not(:first-child) {
	margin-top: 2rem;
}

.policy__body > p {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 2;
}

.policy__body > ul {
	margin-top: 0.75rem;
}

.policy__body > ul > li {
	position: relative;
	padding-left: 1.125rem;
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 2;
}

.policy__body > ul > li::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	left: 0.125rem;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background-color: var(--green);
}

.policy__body > ul > li + li {
	margin-top: 0.25rem;
}

.policy__body > .policy__address {
	font-weight: var(--bold);
}

/* 制定日：大きさ・余白は本文と同じで、灰色の右寄せ */

.policy__body > .policy__date {
	color: var(--gray-text);
	text-align: right;
}

/* ---- 404 ---- */

.notfound {
	padding-block: 3rem 4rem;
	background-color: var(--gray-bg);
}

.notfound__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.notfound__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.notfound__link {
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.6;
	transition: color 0.3s ease;
}

.notfound__btn {
	margin-top: 2.5rem;
}

/* =========================
  仕事内容・実績ページ：SP（デザイン business_SP_260915 実測）
  750px時の値を1/2にして入れている。PCには影響させない。
========================= */

/* =========================
  事業カード（3つの事業）
========================= */

.biz-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3.5rem;
}

.biz-cards__figure {
	position: relative;
	width: 100%;
	aspect-ratio: 395/262;
}

.biz-cards__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.biz-cards__label {
	position: absolute;
	left: 50%;
	bottom: -1.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 12.625rem;
	height: 2.75rem;
	padding-inline: 1.5rem;
	background-color: var(--green);
	font-size: 1.125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
	white-space: nowrap;
	transform: translateX(-50%);
}

.biz-cards__title {
	margin-top: 3.3125rem;
	font-size: 1.25rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.636;
	text-align: center;
}

.biz-cards__text {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.867;
}

.biz-cards__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5.25rem;
	margin-top: 1.5rem;
	border-radius: 0.5rem;
	background-color: #7f7469;
}

.biz-cards__logo img {
	display: block;
	width: 10.75rem;
	height: auto;
}

/* =========================
  仕事カード（施工管理の仕事とは？）
========================= */

.work-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem 1rem; /* デザイン（business_PC_260915）：4列・写真 282×187・列の間 37〜38px（1242px の枠いっぱい） */
}

.work-cards__figure {
	width: 100%;
	aspect-ratio: 282/187;
}

.work-cards__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-cards__title {
	margin-top: 1.875rem;
	font-size: 1.125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.636;
	text-align: center;
}

.work-cards__en {
	margin-top: 0.875rem;
	font-size: 0.75rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--green);
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.work-cards__text {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.867;
}

/* =========================
  働く環境・制度ページ：SP（デザイン workplace_SP_260916 実測）
  750px時の値を1/2にして入れている。PCには影響させない。
========================= */

/* =========================
  制度カード（社内制度・福利厚生）
========================= */

/* 見出し＋英字のまとめ枠。PCでは無かったことにして、これまでの縦並びのまま */

.benefits__head {
	display: contents;
}

.benefits {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.benefits__item {
	display: flex;
	flex-direction: column;
	padding: 2rem 1.5rem 2.5rem;
	border-radius: 0.875rem;
	background-color: var(--white);
	box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.05);
}

.benefits__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 6.25rem;
}

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

.benefits__title {
	margin-top: 1.5rem;
	font-size: 1.25rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.636;
	text-align: center;
}

.benefits__en {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: #fb7f6a;
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
}

.benefits__lead {
	margin-top: 1.5rem;
	font-size: 0.9375rem; /* デザインは NotoSansJP-Black（900） */
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.75;
}

/*
  小見出しの改行は 500px 未満のときだけ効かせる（2026-09-23 指示）。
  それ以上の幅では改行を無視して、枠の幅なりに折り返す。
  管理画面（Lazy Blocks）で改行を入れても同じ挙動になるよう、CSS 側で切り替えている。
*/

.benefits__lead br {
	display: none;
}

/* この行だけは画面幅に関係なく、指定した位置で改行する（制服貸与） */

.benefits__lead--keep-break br {
	display: block;
}

.benefits__text {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.75;
}

/* =========================
  フォトギャラリー
========================= */

.gallery {
	position: relative;
}

.gallery__slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.gallery__slide {
	width: 18.75rem;
}

.gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1031/675; /* デザインの写真は角丸（実測 約10px） */
	border-radius: 0.625rem;
	object-fit: cover;
}

.gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 2.5rem;
	height: 3.9375rem;
	margin-top: -1.9375rem;
	cursor: pointer;
}

/*
  矢印の形はデザイン実測（白い「く」の字：ink 幅35 × 高さ58／線の横幅13px・45度）。
  正方形の上辺と右辺を引いて回転させる作りなので
    高さ  = 一辺 × √2  → 41 × 1.414 ≒ 58
    線の横幅 = 枠線 × √2 → 9 × 1.414 ≒ 13
  で、デザインと同じ大きさになる。
*/

.gallery__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%; /*
    SPは写真が 300px（PCの1031pxの約29%）しかないので、PCと同じ41pxだと
    写真の1/3を矢印が覆ってしまう。写真の縮尺に合わせて一辺を縮める。
    一辺14 → 高さ 14×1.414 ≒ 20／線の横幅 3×1.414 ≒ 4
  */
	width: 0.875rem;
	height: 0.875rem;
	margin-top: -0.4375rem;
	border-top: 0.1875rem solid var(--white);
	border-right: 0.1875rem solid var(--white);
}

/*
  矢印の位置は「画面の端から」ではなく「写真の端から」で決める。
  写真（md以上は1031px・中央ぞろえ）は画面が広くなっても大きさが変わらないので、
  画面の端を基準にすると矢印だけ外へ離れていく（1440pxより広い画面で顕著）。

  デザイン実測（1440）：写真 x205〜1237（中央±515.5）／矢印 x181〜221・1220〜1260
  → 矢印の外側の端は写真の端から 23.5px 外側。515.5 + 23.5 = 539
  SPは 写真150 + 17.5 = 167.5（現状の見え方のまま）。
*/

.gallery__arrow--prev {
	left: calc(50% - 10.46875rem);
}

.gallery__arrow--prev::before {
	transform: rotate(-135deg); /* 回転後の「く」の字は枠の中で左に寄るので、その分だけ戻して中央に置く（＝枠線ぶん） */
	margin-left: -0.1875rem;
}

.gallery__arrow--next {
	right: calc(50% - 10.46875rem);
}

.gallery__arrow--next::before {
	transform: rotate(45deg); /* こちらは逆向きに寄るので「一辺 − 枠線」ぶん戻す */
	margin-left: -0.6875rem;
}

.gallery__caption {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
}

.gallery__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5625rem;
	margin-top: 1.5rem;
}

.gallery__pagination .swiper-pagination-bullet {
	width: 0.6875rem;
	height: 0.6875rem;
	border-radius: 50%;
	background-color: #d5d5d5;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.gallery__pagination .swiper-pagination-bullet-active {
	background-color: var(--green);
}

/* =========================
  募集要項（採用の投稿）
========================= */

.req {
	background-color: var(--gray-bg);
	padding-bottom: 4rem;
}

.req__card {
	position: relative;
	z-index: 1;
	width: 100%;
	margin-inline: auto;
	padding: 2rem 1.25rem 3rem;
	border-radius: 0.25rem;
	background-color: var(--white);
}

.req__card + .req__card {
	margin-top: 2.5rem;
}

.req__card--head {
	margin-top: -2.5rem;
}

/* ---- 見出し部分 ---- */

.req__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.req__new {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background-color: var(--pink-strong);
	font-size: 0.6875rem;
	font-weight: var(--semi-bold);
	font-family: var(--manrope-font);
	color: var(--white);
	letter-spacing: 0.15em;
	line-height: 1;
	text-transform: uppercase;
}

.req__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	flex-shrink: 0;
	height: 2.625rem;
	padding-inline: 1rem;
	border: 0.0625rem solid #afafaf;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1;
}

.req__tag-icon {
	display: block;
	width: 1.0625rem;
	height: auto;
}

.req__back {
	display: none;
}

.req__back::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 0.375rem solid transparent;
	border-bottom: 0.375rem solid transparent;
	border-right: 0.625rem solid var(--green);
}

.req__title {
	margin-top: 1.5rem;
	font-size: 1.5rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.08em;
	line-height: 1.5;
}

/* ---- 募集要項テーブル ---- */

.req-table {
	margin-top: 2rem; /* デザインの罫線は 1px #d6d6d6 */
	border-top: 0.0625rem solid #d6d6d6;
}

.req-table__row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.125rem 0;
	border-bottom: 0.0625rem solid #d6d6d6;
}

.req-table__label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font); /* デザインでは■だけが緑で、見出しの文字は黒 */
	color: var(--black);
	letter-spacing: 0.1em;
	line-height: 2.308; /* 「資格取得支援」「入社後の育成」など6文字の項目名も1行で出す（デザインも1行） */
	white-space: nowrap;
}

.req-table__mark {
	display: block;
	flex-shrink: 0;
	width: 0.5625rem;
	height: 0.5625rem;
	background-color: #00a959;
}

.req-table__body {
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 2;
}

/* ---- エントリー ---- */

.req-entry__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4rem;
	background-color: var(--green);
	font-size: 1.0625rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
}

.req-entry__tel {
	margin-top: 1.5rem; /*
    SPは34pxだと「TEL:027-251-3057」がカードの幅（375px画面で295px）に収まらず
    2行に折り返してしまう。収まる大きさまで落とす（30pxで約280px）。
  */
	font-size: 1.875rem;
	font-weight: var(--regular);
	font-family: var(--mont-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
}

.req-entry__tel a {
	color: inherit;
}

.req-entry__hours {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-align: center;
}

/* かっこ書きはひとまとまりで折り返す（SPで「弊社／休業日」のように切れないように） */

.req-entry__hours-note {
	display: inline-block;
}

.req-entry__bar--mail {
	margin-top: 3rem;
}

.req-entry__lead {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 2;
	text-align: left;
}

/* デザイン：「*」14px・赤・ベースラインを5px下げる／「は必須入力項目です。」14px */

.req-entry__required {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: right;
}

/* ブラウザの「*」は小さく出るので1.2倍にし、デザインどおり文字の上端より2px下に置く */

.req-entry__required-mark {
	position: relative;
	top: 0.2em;
	margin-right: 0.15em;
	font-size: 1.2em;
	line-height: 1;
	color: #f00;
}

/* ---- フォーム ---- */

/*
  デザイン（entry_PC_260911）実測・1440px：
    罫線 … 1px・#d6d6d6（Photoshop で描画した実際の色。レイヤーの塗りは黒だが表示はこの色）。
           3pxの枠の2段目に引かれている。間隔 80px
           （特記事項は 250px。1行目＝希望職種はデザインでは 90px だが、指示でほかと同じ 80px）
    入力前 … 項目名 15px Medium。文字の上端が罫線の下から 28px
    入力後 … 項目名 12px Regular（上端 16px）＋入力値 18px Regular（上端 41px）
    必須の「*」… 半角・項目名と同じ大きさ・#ff0000。文字の上端にそろう（上寄せ）
    注記 … 13px Regular・黒。「*」の後ろ約16px
  罫線は border ではなく ::before / ::after で、3pxの枠の真ん中に1pxで引く
  （行の間隔をデザインの座標どおりに保つため、枠は3pxのまま）。
*/

.req-form {
	position: relative;
	margin-top: 1.5rem; /* 一番上の罫線ぶん */
	padding-top: 0.1875rem;
}

.req-form::before,
.req-form__row::after,
.req-form__confirm-row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #d6d6d6;
	pointer-events: none;
}

.req-form::before {
	top: 1px;
}

.req-form__row::after,
.req-form__confirm-row::after {
	bottom: 1px;
}

/*
  行は最初ラベルだけを見せておき、クリック（＝中の入力欄にフォーカス）で開く。
  フォーカスが外れても入力済みの行は開いたまま（.is-open は JS が付ける）。
  開くと上の余白が詰まり、項目名が縮みながら上へ移動する。
*/

.req-form__row {
	position: relative;
	min-height: 4rem; /* 下の余白は罫線3pxを含む */
	padding: 1rem 0.75rem 0.75rem; /* 行のどこを押しても入力欄が開くので、行全体をボタンらしく見せる */
	cursor: pointer;
	transition: background-color 0.3s ease, padding 0.35s ease;
}

/* 開いた行：上12 ＋ 項目名19.2 ＋ 間2 ＋ 入力欄32.4 ＋ 下15（罫線込み）＝ 80.6px（PC） */

.req-form__row:focus-within,
.req-form__row.is-open,
.req-form__row--fixed {
	padding-top: 0.5625rem;
}

/* 希望職種（1行目）はデザインでは10px高いが、ほかの行とそろえる（2026-09-17 指示） */

/* 特記事項（テキストエリア）の行は、入力前から高さ250px・項目名は上寄せ（上端31px） */

.req-form__row:has(textarea) {
	min-height: 11.25rem;
}

/* 入力中はデザインどおり行の背景を薄い緑（#e9f5ef）にする。文字色は変えない */

.req-form__row:focus-within {
	background-color: var(--form-active-bg);
}

/*
  希望職種は開いている募集要項ページの職種で決まっていて書き換えられない。
  押しても開く／閉じるが無いので、行をボタンらしく見せない。
*/

.req-form__row--fixed {
	cursor: default;
}

.req-form__row--fixed:focus-within {
	background-color: transparent;
}

/*
  入力不備の行はピンクの背景（デザインの非表示レイヤー error）。
  CF7 は不備のある入力欄に .wpcf7-not-valid を付け、直すと外すので :has() で追従させる。
  CF7 を使わない素のフォームでは、ブラウザの検証で JS が .is-error を付ける。
  入力中（緑）より後ろに書いて、直すまではピンクのままにする。
*/

.req-form__row.is-error,
.req-form__row:has(.wpcf7-not-valid) {
	background-color: var(--form-error-bg);
}

.req-form__field input[readonly] {
	cursor: default;
}

.req-form__label {
	display: block; /* 入力前の大きさ。開くと 12px に縮む（下） */
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.6; /* ラベルをクリックしても入力欄が開くので、テキスト選択にならないようにする */
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	transition: font-size 0.25s ease;
}

/*
  入力中の項目名。PSDの文字色は黒だが、Photoshop（アンチエイリアス「シャープ」）では
  12px の細い文字が薄く描かれ、ブラウザの黒より約22%淡く見える。見た目の濃さを合わせて #393939。
*/

.req-form__row:focus-within .req-form__label,
.req-form__row.is-open .req-form__label,
.req-form__row--fixed .req-form__label {
	font-size: 0.75rem;
	font-weight: var(--regular);
	color: #393939;
}

/*
  必須の印。デザインは半角の「*」（項目名と同じ大きさ）で、字形が高い位置にあるので上寄せに見える。
  CF7 のフォーム（管理画面）には全角の「＊」で書かれているため、中の文字は隠して
  「*」を描き直す（どちらの文字で書かれていても同じ見た目になる）。
*/

.req-form__required {
	font-size: 0;
	color: #f00;
}

/*
  ブラウザの「*」はデザイン（Photoshop）より一回り小さく低く出るので、1.2倍にして上端をそろえる。
  行の高さが変わらないよう line-height は 1。
*/

.req-form__required::before {
	content: "*";
	font-size: 1.0625rem;
	line-height: 1;
}

.req-form__row:focus-within .req-form__required::before,
.req-form__row.is-open .req-form__required::before,
.req-form__row--fixed .req-form__required::before {
	font-size: 0.875rem;
}

/* 漢字・かなで終わる項目名のあとは、デザインでは「*」が約5px離れている（JS が付ける。全角かっこの後は離さない） */

.req-form__required.is-after-cjk::before {
	margin-left: 0.3em;
}

.req-form__note {
	margin-left: 0.625rem;
	font-size: 0.6875rem;
	font-weight: var(--regular);
	color: var(--black);
}

/*
  デザインの入力後の状態には注記が無いが、入力中も出しておく（指示）。
  項目名が 15→12px に縮むのと同じ比率で小さくする。
*/

.req-form__row:focus-within .req-form__note,
.req-form__row.is-open .req-form__note {
	font-size: 0.625rem;
}

/*
  閉じているときは max-height: 0 で畳む。
  中身の高さはテキストエリアでも240px以内なので、これで開閉をアニメーションできる。
*/

.req-form__field {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}

.req-form__row:focus-within .req-form__field,
.req-form__row.is-open .req-form__field {
	max-height: 15rem;
	margin-top: 0.125rem;
	opacity: 1;
}

.req-form__field input[type=text],
.req-form__field input[type=tel],
.req-form__field input[type=email],
.req-form__field textarea { /* インラインのままだと下に文字の余白ができ、行が数px高くなる */
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background-color: transparent;
	font-size: 1rem;
	font-weight: var(--regular);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.8;
}

.req-form__field textarea {
	min-height: 7.5rem;
	resize: vertical;
}

/* 薄い緑の背景そのものがフォーカス表示になるので、枠線は出さない */

.req-form__field input:focus,
.req-form__field textarea:focus {
	outline: none;
}

/*
  Contact Form 7 に差し替えたときの調整。
  CF7 は入力欄を span で何重にも包むので、その包みをレイアウト上「無いもの」にして
  もとのデザイン（ラベル＋入力欄の1行）と同じ見え方にそろえる。
*/

.req-form .wpcf7-form-control-wrap {
	display: block;
}

.req-form__privacy .wpcf7-form-control-wrap,
.req-form__privacy .wpcf7-acceptance,
.req-form__privacy .wpcf7-list-item,
.req-form__privacy .wpcf7-list-item label {
	display: contents;
}

.req-form__privacy .wpcf7-list-item {
	margin: 0;
}

/* 同意にチェックが入るまで送信ボタンは押せない（CF7 の標準動作）ので、見た目でも伝える */

.req-form__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* 入力エラーの赤字。行の中に収める */

.req-form .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: #e8380d;
}

/*
  送信結果のメッセージ。CF7 はこれを .req-form の“外”（form 直下）に出すので、
  セクションを起点に指定する。
  CF7 は入力中に form の init クラスを外すので、そのままだと中身が空のまま
  「青い枠だけ」が出てしまう。中身が無いときは隠す。
  （aria-hidden はメッセージがあるときも true のままなので判定に使えない）
*/

.req-entry .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	text-align: center;
}

.req-entry .wpcf7-response-output:empty {
	display: none;
}

.req-form .wpcf7-spinner {
	display: block;
	margin: 0.75rem auto 0;
}

.req-form__privacy {
	display: flex; /*
    SPは文章が3行になる。真ん中ぞろえだとチェックボックスが2行目の高さに来てしまうので、
    1行目と同じ高さに置く。PCは1行に収まるので従来どおり中央ぞろえ。
  */
	align-items: flex-start;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
	font-size: 0.8125rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.8;
}

.req-form__privacy input[type=checkbox] {
	flex-shrink: 0; /*
    SPは文章が3行に折り返す。1行目の高さは 13px × 1.8 ＝ 23.4px しかないので、
    27px のままだと1行目に収まらず2行目にまたがって見える。
    20px に下げたうえで、行の高さとの差の半分
    （(23.4 − 20) ÷ 2 ＝ 1.7px）だけ下げて1行目の中央にそろえる。
    ※ align-items: flex-start なので、ここの上端＝1行目の行ボックスの上端。
  */
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.10625rem;
	accent-color: var(--green);
}

.req-form__privacy a {
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}

.req-form__submit {
	display: block;
	width: 15rem;
	height: 4rem;
	margin: 2rem auto 0;
	border: none;
	border-radius: 2.5625rem;
	font-size: 0.9375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
	cursor: pointer;
	position: relative; /*
    ::before を z-index: -1 で敷くため、ここで重ね合わせの文脈をつくる。
    これで「ボタンの背景 → 反転グラデーション → 文字」の順に描かれる。
  */
	isolation: isolate;
	background-image: var(--grad-pink);
}

.req-form__submit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--grad-pink-reverse);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* =========================
  入力 → 確認 → 送信完了
  画面の出し分けはクラスだけで行い、中身の組み立ては JS（script.js）が受け持つ。
========================= */

/* 確認画面はふだん隠しておく */

.req-form__confirm {
	display: none;
}

/* 確認中は入力欄・同意・「確認」ボタンを伏せて、確認画面だけを見せる */

.req-form.is-confirm .req-form__row,
.req-form.is-confirm .req-form__privacy,
.req-form.is-confirm .req-form__next {
	display: none;
}

.req-form.is-confirm .req-form__confirm {
	display: block;
}

/* 確認画面の一番上の罫線は .req-form::before が引く */

.req-form__confirm-row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	position: relative; /* 下の余白は罫線3pxを含む（罫線は ::after） */
	padding: 0.75rem 0.75rem 1.0625rem;
}

.req-form__confirm-label {
	font-size: 0.75rem;
	font-weight: var(--regular);
	font-family: var(--base-font);
	color: #767676;
	letter-spacing: 0.05em;
	line-height: 1.6;
}

.req-form__confirm-value {
	font-size: 1rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.8; /* 特記事項の改行をそのまま見せる */
	white-space: pre-wrap; /* 長いメールアドレスでも枠からはみ出さない */
	overflow-wrap: anywhere;
}

/* 「修正する」と「送信する」は SP でも横並び・左右中央ぞろえ */

.req-form__confirm-actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

/*
  ボタンは既定で240px幅なので、SPで2つ並べると収まらない。
  画面幅に合わせて縮め、PCではデザインどおりの幅に戻す。
*/

.req-form__confirm-actions .req-form__submit,
.req-form__confirm-actions .req-form__back-btn { /*
    flex の伸び幅にまかせると input[type=submit] だけ中の文字ぶん広くなるので、
    gap（12px）を差し引いた半分ずつで、はっきり同じ幅にする。
  */
	flex: 0 0 auto;
	width: calc(50% - 0.375rem);
	max-width: 10.625rem; /* 単体で置いたときの上マージンは、並べたときは要らない */
	margin: 0;
}

/* 送信中のぐるぐるは、ボタンの中央ぞろえがずれないように浮かせて下に置く */

.req-form__confirm-actions .wpcf7-spinner {
	position: absolute;
	top: 100%;
	left: 50%;
	margin: 0.75rem 0 0;
	transform: translateX(-50%);
}

.req-form__back-btn {
	display: block;
	width: 15rem;
	height: 4rem;
	border: 0.0625rem solid var(--black);
	border-radius: 2.5625rem;
	background-color: transparent;
	font-size: 0.9375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

/* ---- 送信完了 ---- */

/*
  デザイン（entry_PC_260911「entry完了」）実測・1440px：
    カード y560〜1263（緑帯 〜642 に 82px 重なる）＝ 募集要項の表のカードと同じ位置
    「メールでのエントリー」の帯 y679〜772（カード上端から119px）
    見出し 18px Bold（文字の上端 844）→ 1行空けて本文 16px Medium・行送り28px・中央
    「ホーム」ボタン 263×82（y1020〜1102）→ カード下端まで 161px
  電話でのエントリー・説明文・フォームは伏せ、募集要項の表のカードも出さない。
*/

.req-form__thanks {
	display: none;
	margin-top: 2.5rem;
	text-align: center;
}

/*
  確認中・送信後は、入力を促す説明文（「*は必須〜」など）を伏せる。
  送信後はフォームそのものも伏せて、完了画面に差し替える。
*/

.req-entry.is-confirm .req-entry__lead,
.req-entry.is-confirm .req-entry__required,
.req-entry.is-sent .req-entry__lead,
.req-entry.is-sent .req-entry__required,
.req-entry.is-sent .wpcf7 {
	display: none;
}

/* CF7 を使わない素のフォームのときは .wpcf7 が無いので、こちらで伏せる */

.req-entry.is-sent .req-form {
	display: none;
}

.req-entry.is-sent .req-form__thanks {
	display: block;
}

/* 電話でのエントリー（帯・番号・受付時間）も伏せる。メールの帯はカードの先頭へ */

.req-entry.is-sent .req-entry__bar:not(.req-entry__bar--mail),
.req-entry.is-sent .req-entry__tel,
.req-entry.is-sent .req-entry__hours {
	display: none;
}

.req-entry.is-sent .req-entry__bar--mail {
	margin-top: 0;
}

.req.is-sent .req__card--head {
	display: none;
}

/* 表のカードが消えるので、エントリーのカードが緑帯に重なる位置に上がる */

.req.is-sent .req-entry {
	margin-top: -2.5rem;
}

.req-form__thanks-title {
	font-size: 1rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.75;
}

/* SPで「（送 / 信完了）」と途中で折り返さないように */

.req-form__thanks-nowrap {
	display: inline-block;
}

/* デザインは見出しと本文の間に14px・行送り28pxの空行が1行 */

.req-form__thanks-text {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 2;
	text-align: left;
}

.req-form__home {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15rem;
	height: 4rem;
	margin: 2.5rem auto 0;
	border-radius: 2.5625rem;
	font-size: 0.9375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
	position: relative; /*
    ::before を z-index: -1 で敷くため、ここで重ね合わせの文脈をつくる。
    これで「ボタンの背景 → 反転グラデーション → 文字」の順に描かれる。
  */
	isolation: isolate;
	background-image: var(--grad-pink);
}

.req-form__home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--grad-pink-reverse);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* ---- 募集要項一覧（アーカイブ） ---- */

/*
  デザイン（entry_PC_260911 の index グループ）：
  1枚目のカードは y578 から。緑帯の下端 640 に **62px 重なる**（SPは40px）。
  中のリストのマイナスマージンでセクションごと持ち上がらないように flow-root。
*/

.req-archive {
	display: flow-root;
	background-color: var(--gray-bg);
	padding-block: 0 4rem;
}

/* =========================
  スタッフインタビュー詳細：MV
========================= */

.iv-mv {
	position: relative;
	overflow-x: clip;
}

/*
  緑の背景。PCは高さ固定（メイン写真が下に重なる前提のデザイン値）。
  SPは中身（見出し〜タブ）の高さが画面幅で変わるので、固定値だと
  足りない幅が出る（以前の560pxは 430px 以上でタブが背景からはみ出していた）。
  SPは .iv-mv__inner::before で「タブの下端＋8px」まで塗る。
*/

.iv-mv__bg {
	display: none;
}

.iv-mv__inner {
	position: relative; /* タブ（と吹き出しの先端）がメイン写真の上に重なる */
	z-index: 3;
	padding-top: 6.25rem;
}

/*
  SPの緑の背景。インナーの最後の要素がタブなので、インナーの下端＝タブの下端。
  そこから 8px 下まで塗る（375px で以前の見え方と同じ関係）。
  横は画面いっぱいに広げる（はみ出しは .iv-mv の overflow-x: clip で切れる）。
  z-index: -1 でインナーの中身（見出し・写真・タブ）より後ろに描く。
*/

.iv-mv__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: -0.5rem;
	left: 50%;
	width: 100vw;
	background-image: var(--grad-green);
	transform: translateX(-50%);
}

.iv-mv__title {
	font-size: 1.875rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0;
	line-height: 1.2;
}

.iv-mv__en {
	margin-top: 0.875rem;
	font-size: 1rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--yellow-lime);
	letter-spacing: 0.1em;
	line-height: 1;
}

.iv-mv__lead {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.867;
}

/* ---- 社員写真＋タブ（SPは横スクロール） ---- */

/*
  SPはタブ3つが画面幅に収まらず、「INTERVIEW.2」や「建築・住宅・土木全般」が
  2行に折れていた。タブに最小幅を持たせて横スクロールにする。
  写真（.iv-mv__people）はタブの3列に合わせて % で置いているので、
  タブだけ動かすとズレる。写真とタブを同じ枠に入れて一緒に動かす。
  PCは写真・タブとも絶対配置なので、枠は display: contents で消す。
*/

.iv-mv__members { /* インナーの左右余白のぶん外へ広げて、画面の端までスクロールできるようにする */
	margin-inline: -1.25rem;
	padding-inline: 1.25rem;
	overflow-x: auto; /* 端まで来たときに、ブラウザの「戻る」スワイプが誤発動しないように */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.iv-mv__members::-webkit-scrollbar {
	display: none;
}

/*
  ページ下部（.iv-others）に置いた同じパーツ。SPだけ使い、PCは従来の一覧（.iv-others__list）を出す。
*/

.iv-mv__members-track { /*
    中身（タブ3つ）の幅に合わせて広がり、画面より狭いときは画面幅いっぱいに伸ばす。
    ＝ 狭い画面だけ横スクロールになり、広い画面では従来どおり3等分。
  */
	width: -moz-max-content;
	width: max-content;
	min-width: 100%;
}

/* ---- 他メンバーへのタブ ---- */

.iv-mv__tabs {
	display: flex;
	gap: 0.5rem; /* SPは上の社員写真と地続きにする（写真の下端＝タブの上端） */
	margin-top: 0;
}

.iv-mv__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative; /*
    SPは最小幅つき（縮ませない）。144px は一番長い所属「建築・住宅・土木全般」
    （13px で約124px）＋左右padding 16px が1行に収まる幅。
    画面に余裕があるときは flex-grow で3等分に広がる。
  */
	flex: 1 0 9rem;
	padding: 0.75rem 0.5rem;
	border-radius: 0.625rem;
	background-color: var(--green);
	color: var(--white);
	text-align: center; /* 所属が今より長くなっても折り返さず、タブのほうが広がる（＝横スクロールで見せる） */
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.iv-mv__tab.is-current {
	background-color: var(--yellow);
	color: var(--black);
}

/* デザインは1つ目だけ1px狭い */

/* 現在のメンバーのタブだけ、下に吹き出しの先端を出す */

.iv-mv__tab-no {
	font-size: 0.75rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--yellow-lime);
	letter-spacing: 0.1em;
	line-height: 1;
	transition: color 0.3s ease;
}

/*
  番号だけ大きい。デザイン（staff_260918）の「INTERVIEW.3」は文字の高さ14px・
  数字の幅11px ＝ 12px に対して約1.6倍。
*/

.iv-mv__tab-num {
	font-size: 1.6em;
	line-height: 1;
}

.iv-mv__tab.is-current .iv-mv__tab-no {
	color: var(--green);
}

/* ホバーはアクティブ表示（.is-current）と同じ配色。吹き出しの先端は付けない */

.iv-mv__tab-name {
	margin-top: 0.375rem;
	font-size: 1.375rem;
	font-weight: var(--medium);
	font-family: var(--mont-font);
	letter-spacing: 0.1em;
	line-height: 1;
}

.iv-mv__tab-meta {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

/* 現在のメンバーのバッジ（丸） */

.iv-mv__mark {
	display: none;
}

/* デザインでは文字が15度かたむいている（PSDの transform 実測：-15.00度） */

/* 上部の社員写真 */

/*
  SPもPCと同じ「タブの上に3人が並ぶ」形にする。
  タブと同じ3等分のグリッドに見えるよう、人物の横位置・幅・縦位置は
  すべて枠に対する % で置き、枠の高さは aspect-ratio で幅から決める。
  こうすると画面幅が変わっても、PCの比率のまま拡大縮小する。
  比率はPCの実測値（タブ幅193 / 枠の高さ389 / 人物の上 154・125）から。
*/

.iv-mv__people {
	position: relative; /*
    PCは「タブ3つぶんの幅 : 枠の高さ」＝ 335 : 214 で、枠の上約4割は
    見出し・リード文が重なる領域として空けてある。
    SPは枠がリード文の下に置かれるので、その空きがそのまま緑の余白になり
    人物の頭まで100px以上空いてしまう。上を 56px ぶん（幅350px時）詰めた比率にする。
    人物の top も同じだけ上げてあるので、タブとの位置関係・切り取り方は変わらない。
  */
	aspect-ratio: 335/158;
	margin-top: 1.75rem; /* PCと同じく、タブの上端で断ち切る */
	overflow: hidden;
	pointer-events: none;
}

/*
  縦位置は「開いているページの人かどうか」で決まる。
  デザインでは1人目（＝そのページの人）だけ 125px と高い位置にいて、
  上半身が長く見える。他の2人は 154px。
  3人とも拡大率は同じ（切り抜き画像の1/2）で、大きさの差ではなく置き方の差。
*/

.iv-mv__person {
	position: absolute;
	height: auto; /* ホバーで「上がる＋大きくなる」ので、位置と幅をまとめて動かす */
	transition: top 0.4s ease, left 0.4s ease, width 0.4s ease;
}

/*
  別ポーズ（アクティブの大きさで置いてある）は、開いているページの人だけ表示。
  その人の通常ポーズは隠す。
  ホバーでは切り替えない（下部一覧のPCと同じく、同じ写真のまま大きくなるだけ）。
*/

.iv-mv__person--pose {
	opacity: 0;
}

.iv-mv__person--pose.is-shown {
	opacity: 1;
}

.iv-mv__person.is-swapped {
	opacity: 0;
}

/*
  横位置・幅・既定の高さは「下のタブの位置」と「その人の切り抜き」で決まる（デザイン実測）。
  SPはそれを % に置き直したもの（各列の中心にその人の幅で置く）。
  縦（top）はPCの px を枠の高さで割った値。SPは枠の上を詰めたぶん
  （PC基準で 39.59% → 18.48% のように）一律で上げてある。
*/

/*
  位置と大きさはデザイン（staff1/staff2_260918）の座標そのまま。
  PC … 1440px の座標をそのまま px で置く（枠は画面中央から左右720pxに広げてある）。
  SP … タブ3つぶんの幅（PCで 735〜1342＝607px）に対する % に置き換え、
       上端は「PCの枠の高さ389pxに対する比 − 21.1%」（枠の上を詰めているぶん）。
*/

.iv-mv__person--01 {
	top: 19.5%;
	left: -0.8%;
	width: 35.4%;
}

.iv-mv__person--02 {
	top: 18.2%;
	left: 37.1%;
	width: 26.9%;
}

.iv-mv__person--03 {
	top: 17.2%;
	left: 71.2%;
	width: 26.7%;
}

/*
  開いているページの人は別ポーズ（is-current）で、位置も大きさも変わる。
  デザインの active / hover の座標。
*/

.iv-mv__person--01.is-current {
	top: 11.3%;
	left: -8.4%;
	width: 42.2%;
}

.iv-mv__person--02.is-current {
	top: 10.5%;
	left: 35.9%;
	width: 30.2%;
}

.iv-mv__person--03.is-current {
	top: 9%;
	left: 67.4%;
	width: 31.8%;
}

/*
  タブにホバーすると、その人が**アクティブ表示とまったく同じ大きさ・位置**になる
  （上に上がるだけでなく、左右位置と幅も is-current と同じ値にする）。
  写真（.iv-mv__people）とタブ（.iv-mv__tabs）は別の箱なので :has() で結びつける。
  開いているページの人（.is-current）はもう大きくなっているので動かさない。
  SP用の切り抜き（--sp）は座標の持ち方が違うので対象外。
*/

/* メイン写真＋見出し */

.iv-mv__figure {
	position: relative;
	z-index: 2;
	width: calc(100% - 2.5rem);
	margin: 2rem auto 0;
}

.iv-mv__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1308/652;
	object-fit: cover;
}

.iv-mv__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2);
}

/* 膜なし（interview-data.php の 'mv_overlay' => false） */

.iv-mv__figure--no-overlay::after {
	content: none;
}

/*
  メイン写真に重なるキャプション。
  デザイン実測（写真枠 x66,y479 を原点にした相対値）：
    キャプション群   left 646 / top 238 / width 602
    INTERVIEW.1     left 649 / 文字の上 266（14px・ls 0.1・数字だけ1.7倍）
    見出し           left 646 / 文字の上 314（36px・行送り54・ls 0.05・枠幅566）
    N.T             left 655 / 文字の上 479（40px・ls 0.1）
    プロフィール      left 763 / 文字の上 476（16px・行送り32・ls 0.05）
    丸バッジ         left 1110 / top 238（138角）
  上ぞろえで置く（番号とバッジが写真の上端からの固定位置にあるため）。
*/

.iv-mv__caption {
	position: relative;
	z-index: 1;
	padding: 1.5rem 1.25rem 2rem;
	color: var(--white);
}

/*
  写真の左側に置くパターン（デザイン staff2_260918）。
  写真は x66〜1374 / y479〜。デザイン実測：
    INTERVIEW.2 の文字 x176・y726、見出し x174、氏名と経歴の右端 x701
  → 写真の左上からの相対で left 108 / top 247 / 幅 527
*/

/*
  右上の丸バッジ（施工管理／未経験）。
  デザイン：ピンクの円138角・文字18px×1.199＝21.6px・行送り27.6・24.8度回転。
  デザインでは**見出しの文字がバッジの上に乗る**（「近い。」の。が円にかぶる）ので、
  z-index: -1 で文字の背面に置く。
  （.iv-mv__caption 自体が position + z-index で重ね合わせの文脈を作っているので、
  　-1 にしても写真より後ろへは行かない）
*/

.iv-mv__caption-mark {
	display: none;
}

.iv-mv__caption-mark span {
	font-size: 1.35rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.278;
	transform: rotate(24.8deg);
}

.iv-mv__caption-no {
	font-size: 0.8125rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--yellow-lime);
	letter-spacing: 0.1em;
	line-height: 1;
}

/*
  番号だけ大きい（タブの INTERVIEW.N と同じ作り）。
  デザイン実測：「INTERVIEW.」の文字高さ10px に対し「1」は17px ＝ 1.7倍。
  行の高さが増えて下の見出しがずれないよう line-height: 1 にしておく。
*/

.iv-mv__caption-num {
	font-size: 1.7em;
	line-height: 1;
}

.iv-mv__caption-title {
	margin-top: 0.875rem;
	font-size: 1.375rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.iv-mv__caption-foot {
	display: flex;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.iv-mv__caption-name {
	flex-shrink: 0;
	font-size: 1.875rem;
	font-weight: var(--medium);
	font-family: var(--mont-font);
	letter-spacing: 0.1em;
	line-height: 1;
}

.iv-mv__caption-meta {
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 2;
}

/* =========================
  Q&A
========================= */

.qa {
	padding-block: 3.5rem 1.5rem;
}

/* SPの人物の上端（切り口の計算にも使う）。アニメーションできるよう型を登録しておく */

@property --iv-person-top {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

/* =========================
  SPのMV（デザイン staff1_SP_260925 / 375px換算でそのまま置く）
  ※PCには一切影響させないため max-width で囲う
========================= */

.qa__group {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.qa__group + .qa__group {
	margin-top: 3rem;
}

.qa__col--fig {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.qa__item + .qa__item {
	margin-top: 2.5rem;
}

/* 質問は吹き出し（左右は楕円の丸角＋左下に先端） */

.qa__question {
	display: inline-flex;
	align-items: center;
	position: relative;
	gap: 0.75rem;
	padding: 0.625rem 1.75rem 0.625rem 0.75rem;
	border-radius: 1.5rem/50%;
	background-color: var(--green);
}

.qa__question::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 1.5rem;
	width: 0;
	height: 0;
	border-top: 0.8125rem solid var(--green);
	border-right: 0.8125rem solid transparent;
}

.qa__q {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: var(--green);
	font-size: 1.875rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--yellow-lime);
	letter-spacing: 0.1em;
	line-height: 1;
}

.qa__question-text {
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

/*
  設問の改行（block-defaults.php の \n → <br>）はPC・SPとも活かす。
  SPデザイン（staff1_SP_260925）でも同じ位置で改行していて、吹き出しは文字なりの幅になる。
*/

.qa__question-text br {
	display: inline;
}

.qa__title {
	margin-top: 1.25rem;
	font-size: 1.375rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.688;
}

.qa__text {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 2;
}

.qa__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.qa__img--sub {
	aspect-ratio: 533/354;
}

/* 切り抜かずに写真の元の比率で出す（interview-data.php の 'image_natural' => true） */

.qa__img.qa__img--natural {
	aspect-ratio: auto;
}

/* =========================
  1日の仕事の流れ
========================= */

.flow {
	position: relative;
	margin-top: 3.5rem;
	padding-block: 3rem 3.5rem;
	background-image: var(--grad-green);
	color: var(--white);
	overflow-x: clip;
}

/*
  直後に全幅写真が重なるときだけ、写真が乗るぶんの緑を下に足す。
  デザイン（1440）の実測：緑の帯 y2394〜3197／カードの下端 2859
  → カードの下に 338px ぶん緑が残り、そこへ写真が 234px 乗る。
  写真が無い使い方（本文にブロックを置いた場合など）では 120px のまま。
*/

.flow__title {
	font-size: 1.5rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.688;
}

.flow__lead {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 2;
}

.flow__scroll {
	margin-top: 2rem;
	padding-inline: 1.25rem;
	overflow-x: auto;
}

/*
  PCは「時刻／見出し／本文」の3行のグリッドにして、各項目・カード・本文を subgrid で
  この行に乗せる。見出しが1行の項目と2行の項目が混ざっても、見出しの行の高さがそろい
  本文の書き出しが全項目で同じ高さになる。
*/

.flow__list {
	display: flex;
	gap: 2rem;
	width: -moz-max-content;
	width: max-content;
}

/*
  時刻 → 丸 → 線 → カード の縦の並び。
  デザイン（1440）の実測：
    時刻の文字 y2595〜2618（下端）／丸 y2629〜2663／線 y2644〜2648／写真 y2681
  → 時刻の文字の下端は丸の上端の **11px上**。線の上には乗らない。
  padding-top は「時刻を丸の上に逃がすための余白」なので、
  丸・線・カードの位置は変えずに時刻ぶんだけ確保する。
*/

.flow__item {
	position: relative; /*
    SPは横スクロール。カードの幅がそのまま本文（.flow__body）の幅になるので、
    文章が細切れに折り返さないよう広めに取る。
    内訳：320 － 右の余白24 － 写真100 － すき間16 ＝ 本文180px
  */
	flex: 0 0 20rem;
	padding-top: 1.875rem;
}

/*
  丸と丸をつなぐ線。丸の「右端」から次の丸の「左端」までを引く。
  丸の中心から引くと、丸は枠線だけ（中は透明）なので
  線がリングの内側に入り込んで見える（デザインでは入っていない）。
*/

.flow__item::before {
	content: "";
	position: absolute;
	top: 4.625rem;
	left: 1.875rem;
	right: -2rem;
	height: 0.25rem;
	background-color: var(--white);
}

/* 最後の1枚だけは次の丸が無いので、カードの右端で止める */

.flow__time {
	font-size: 1.5rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
}

/*
  デザイン実測（アートボードの画素）：黄色い丸は**外径30px・枠の太さ7px**。
  33px角・枠6pxだと穴が大きく、線が細く見える。
*/

.flow__dot {
	position: absolute;
	top: 3.75rem;
	left: 0;
	z-index: 1;
	width: 1.875rem;
	height: 1.875rem;
	border: 0.4375rem solid var(--yellow);
	border-radius: 50%;
}

/* 時刻を上げたぶん margin-top で戻し、カードの位置は変えない */

.flow__card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 4.125rem;
	padding-right: 1.5rem;
}

/*
  写真の丸には白い縁がある。
  デザインのアートボードを画素で走査した実測：
    左 x100〜106 が白（7px）／写真は x107 から
    右 x253〜259 が白／上 y2683〜2689 が白
    → 外径160px・縁7px・中の写真146px
*/

.flow__figure {
	flex-shrink: 0;
	width: 6.25rem;
	height: 6.25rem;
	border: 0.25rem solid var(--white);
	border-radius: 50%;
	overflow: hidden;
}

.flow__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flow__item-title {
	font-size: 1.0625rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.flow__text {
	margin-top: 0.625rem;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.714;
}

/* PC：写真は2行ぶん、本文は subgrid で「見出し／本文」の行に乗せる（行の高さは全項目でそろう） */

/* =========================
  最後のメッセージ
========================= */

/*
  セクションの高さは中身（カード）まかせのまま（デザイン実測：上142／下217）。
*/

.iv-msg {
	position: relative;
	margin-top: 3rem;
	padding-block: 3.5rem;
	overflow-x: clip;
}

/*
  背景写真は「上ぞろえ」で切る。
  セクションの高さは中身で決まるので、画面が広いほど写真は縦にはみ出す。
  既定の center だと上下が均等に切れて**人物の頭が切れる**ため、
  上端を固定して、切るのは下（足元側）だけにする。
*/

.iv-msg__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.iv-msg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2);
}

.iv-msg__inner {
	position: relative;
	z-index: 1;
}

.iv-msg__card {
	position: relative;
	width: 100%;
	max-width: 35.3125rem;
	border-radius: 1.25rem;
	padding: 2rem 1.5rem 2.5rem;
	background-color: rgba(255, 255, 255, 0.9);
}

.iv-msg__question {
	margin-bottom: 1.25rem;
}

.iv-msg__title {
	font-size: 1.375rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.688;
}

.iv-msg__text {
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 2;
}

.iv-msg__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 19rem;
	height: 4rem;
	margin: 2rem auto 0;
	border-radius: 2.5625rem;
	font-size: 1rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
	position: relative; /*
    ::before を z-index: -1 で敷くため、ここで重ね合わせの文脈をつくる。
    これで「ボタンの背景 → 反転グラデーション → 文字」の順に描かれる。
  */
	isolation: isolate;
	background-image: var(--grad-pink);
}

.iv-msg__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--grad-pink-reverse);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* =========================
  他のメンバー
========================= */

.iv-others {
	padding-block: 3rem 4rem;
	overflow-x: clip;
}

/*
  一覧ページでは前のセクションに食い込ませない。
  （マイナスマージンは詳細ページで iv-msg に重ねるためのもの）
*/

.iv-others__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5rem;
}

.iv-others__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 22.5rem;
	padding: 1.5rem 1.75rem 2.5rem;
	border-radius: 0.75rem;
	background-color: var(--green);
	color: var(--white); /* デザインは中央ぞろえ */
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.iv-others__item--current {
	background-color: var(--yellow);
	color: var(--black);
}

/*
  切り抜きの社員写真。
  デザインでは腰のあたりで断ち切られていて、全身は見えていない
  （マスクの下端はどのカードも「カード上端＋約274px」）。
  height を決めて object-fit: cover で上から切り出すことで同じ見え方にする。
  切らないと全身が出てカードの文字を覆ってしまう。
*/

.iv-others__person {
	position: absolute;
	top: -5rem;
	left: 50%;
	width: 11.25rem;
	height: 15.625rem;
	object-fit: cover;
	object-position: top center;
	transform: translateX(-50%);
	pointer-events: none; /* ホバーで上に伸びる（下端は固定のまま、上端だけ上がる） */
	transition: top 0.4s ease, height 0.4s ease;
}

/* 2人目・3人目はカード内の位置と幅が違う（デザイン実測） */

/*
  開いているページの人（黄色いカード）は別ポーズ。位置も大きさも変わる。
  デザインの active / hover の座標。
*/

/*
  ホバーはアクティブ表示（--current）と同じ見た目にする。
  人物は「開いているページの人」と同じ位置・大きさまで動く（下から上へ出てくる）。
*/

/* 一覧ページは「開いているページの人」が居ないので、従来どおり1人目を大きく見せる */

.iv-others__mark {
	position: absolute;
	top: -1.875rem;
	left: -0.625rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background-color: var(--pink-strong);
	font-size: 0.9375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.278;
	text-align: center;
}

.iv-others__link {
	display: block;
}

.iv-others__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.iv-others__no {
	display: block;
	position: relative;
	font-size: 0.8125rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--yellow-lime);
	letter-spacing: 0.1em;
	line-height: 1;
	transition: color 0.3s ease;
}

.iv-others__item--current .iv-others__no {
	color: var(--green);
}

/* デザインでは「INTERVIEW.」より末尾の番号だけが1.8倍（ベースラインは同じ） */

.iv-others__no-num {
	font-size: 1.8em;
}

.iv-others__name {
	display: block;
	position: relative;
	margin-top: 1rem;
	font-size: 2rem;
	font-weight: var(--medium);
	font-family: var(--mont-font);
	letter-spacing: 0.1em;
	line-height: 1;
}

.iv-others__meta {
	display: block;
	position: relative;
	margin-top: 0.875rem;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.733;
}

/* SP用の1行表記。PCでは使わない */

.iv-others__meta--sp {
	display: none;
}

/*
  流れセクションに重なる全幅写真。
  デザイン（1440）：写真 y2963〜3417／緑の帯の下端 3197／カードの下端 2859。
  → カードとの間は **104px**空き、写真の上から234pxが緑に乗る。
  マイナスマージンは「緑の下端から234px上げる」ぶん。
*/

.iv-photo {
	position: relative;
	z-index: 1;
	margin-top: -1.5rem;
}

.iv-photo .page-photo__img {
	aspect-ratio: 1307/454;
}

/* SP専用の切り抜き（下部の「他のメンバー」だけ）はPCでは出さない */

/* タブの小さいバッジはPCでは出さない */

.mv {
	position: relative; /*
    MESSAGE のコラージュ写真はMVに食い込んで置かれているので、
    MVより手前に出ないよう MV 側を持ち上げて重ね順を固定する（SP・PC共通）。
    （ヘッダーは z-index: 1000 なので影響しない）
  */
	z-index: 1; /*
    SPはデザイン（top_SP_260925 / 375px換算）どおり、
    緑の背景（高さ701px）の中に写真を右へ寄せて置き、
    その上にキャッチコピーを重ねる。
    ・写真 … 左30 / 上80 / 右端まで / 高さ430
    ・キャッチ … 文字の上が y=352（行の上は339）
    ・本文の下 … y=648 → 下の余白53
  */
	padding: 21.1875rem 1.25rem 3.3125rem;
	background-image: var(--grad-green);
}

/* 緑グラデーションの背景（PCは上部 782px のみ） */

.mv__bg {
	display: none;
}

.mv__image { /* SPはデザインの座標で置く（左30・上80・右端まで・高さ430） */
	position: absolute;
	top: 5rem;
	left: 1.875rem;
	right: 0;
	width: auto;
	height: 26.875rem;
}

/*
  写真を少し暗くする膜。
  重ね順は「写真（.mv__slider: 0）→ この膜（1）→ キャッチコピー（.mv__content: 2）」。
  .mv__image は z-index を持たない（＝重ね合わせの文脈を作らない）ので、
  この3つは同じ土俵で前後が決まる。
*/

.mv__image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

/* スライダー（フェードで数枚を切り替え） */

.mv__slider {
	position: absolute;
	inset: 0;
	z-index: 0;
	height: 100%;
	overflow: hidden;
}

.mv__slide {
	height: 100%;
	overflow: hidden;
}

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

/*
  表示中のスライドはゆっくり寄っていく。
  拡大は JS（script.js）がインラインの transform で動かしている。
  CSSアニメーションを active クラスに付けると、切り替わる瞬間に
  消えていく写真が一度もとの大きさに戻ってしまうため。
  （prefers-reduced-motion のときは JS 側で寄せない）
*/

.mv__content {
	position: relative; /* 写真を暗くする膜（.mv__image::after）より前に出す */
	z-index: 2;
}

.mv__catch {
	font-size: 3.4375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0;
	line-height: 1.3;
}

/* 1行ずつワイプで出すための行（改行もこの span が担う） */

.mv__catch-line {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
}

.mv__label {
	display: inline-block; /* デザイン：キャッチの文字下 470 → 帯の上 485 */
	margin-top: 0.1875rem;
	padding: 0.84375rem 0.875rem;
	background-image: var(--grad-pink);
	font-size: 1.25rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.15em;
	line-height: 1;
}

.mv__text { /* デザイン：帯の下 532 → 本文の文字上 551 */
	margin-top: 0.8125rem;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 2;
}

/*
  キャッチコピー周りのワイプ（左→右へ現れる）。
  JS に頼らず CSS アニメーションだけで動かす（JS が止まっても文字が消えたままにならない）。
  上下は -20% 広げてクリップし、字形のはみ出しが切れないようにしている。
  順番：1行目 → 2行目 → ピンクのラベル → 本文
*/

.message {
	position: relative; /* SPはデザイン（top_SP_260925）：写真はMVの緑に84px食い込み、下は57px空ける */
	padding: 0 0 3.5625rem;
	overflow-x: clip;
}

/* ---- 写真コラージュ ---- */

/*
  SPもPCと同じ「散らして重ねた」並びにする。
  PCで画面に見えている範囲（デザイン x=0〜638）を 375px に収める倍率（0.588倍）で
  デザイン座標を置き直したもの。左に見切れる写真（01・06）もPCと同じで、
  はみ出しは .message の overflow-x: clip が受け持つ。

  位置と大きさは箱に対する % なので、箱の幅が変われば並びごと拡大縮小する。
  箱の高さ654px（375px幅のとき）＝ 写真の並び624px ＋ パララックスで下に動くぶん30px。
  この30pxを持たせておくことで、動いても下の本文にかぶらない。
*/

.message__collage {
	position: relative;
	width: 100%; /* 写真の並びは339px。パララックスで下へ動くぶん30pxを足す */
	aspect-ratio: 375/369;
	margin-top: -5.25rem;
	margin-inline: auto;
}

.message__photo {
	display: block;
	position: absolute;
	height: auto; /*
    写真は切り抜きPNG（ふちがぼけているものもある）なので、
    box-shadow だと透明部分まで四角い影が出てしまう。
    アルファの形に沿う drop-shadow を使う。

    影はデザイン実測（右下120度・距離34 / ぼかしσ12.5 / 黒20%）。
    drop-shadow のぼかし値は box-shadow の約半分で同じ見た目になるため、
    box-shadow なら 25 相当のところを 13 にしている。
    SPは写真を0.59倍で並べているので、影も同じ割合に縮める。
  */
	filter: drop-shadow(0.5rem 0.875rem 0.4375rem rgba(0, 0, 0, 0.2));
}

/* 位置と大きさ：SPは上のコラージュの箱に対する%、PCはデザイン座標そのまま */

.message__photo--01 {
	top: 0;
	left: -18.93%;
	width: 40.53%;
}

.message__photo--02 {
	top: 8.4%;
	left: 58.4%;
	width: 40%;
}

.message__photo--03 {
	top: 12.06%;
	left: 7.33%;
	width: 30.4%;
}

.message__photo--04 {
	top: 29.4%;
	left: 29.2%;
	width: 56.53%;
}

.message__photo--05 {
	top: 59.08%;
	left: 65.33%;
	width: 30.67%;
}

.message__photo--06 {
	top: 36.45%;
	left: -48.93%;
	width: 75.2%;
}

/* ---- テキスト ---- */

.message__body { /*
    SPはデザインどおり「MESSAGE → 見出し2行 → 英字」の順で中央ぞろえ。
    HTMLは英字が見出しの前にあるので、SPだけ order で入れ替える。
  */
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-inline: auto; /* 写真の箱の下から67px戻した位置（デザイン y=920）から始める */
	margin-top: -4.1875rem;
	padding-inline: 1.875rem;
	text-align: center;
}

.message__label {
	order: 1;
	font-size: 0.8625rem;
	font-weight: var(--bold);
	font-family: var(--mont-font);
	color: var(--green);
	letter-spacing: 0.1em;
	line-height: 1;
}

.message__en {
	order: 3; /* 筆の下線（.message__underline）は絶対配置なので、英字を前面に出す */
	position: relative;
	z-index: 1;
	margin-top: 1.0625rem;
	font-size: 0.65625rem;
	font-weight: var(--bold);
	font-family: var(--mont-font);
	color: var(--green);
	letter-spacing: 0.05em;
	line-height: 1;
}

.message__title {
	order: 2;
	position: relative;
	margin-top: 1.0625rem;
}

.message__title-sm { /* SPは2行に分ける（デザイン top_SP_260925） */
	display: block;
	position: relative;
	font-size: 2.34375rem;
	font-weight: var(--regular);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0;
	line-height: 1.2;
}

.message__title-lg {
	display: block;
	position: relative;
	margin-top: 0.375rem;
	font-size: 3.75rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--green);
	letter-spacing: 0;
	line-height: 1;
}

.message__underline {
	position: absolute; /* デザイン：見出しの箱の上から99px・幅352px・画面中央 */
	top: 6.1875rem;
	bottom: auto;
	left: 50%;
	width: 22rem;
	max-width: none;
	height: auto;
	transform: translateX(-50%);
}

.message__text {
	order: 4;
	margin-top: 2.5625rem;
	font-size: 0.8125rem;
	text-align: left;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.02em;
	line-height: 2;
}

.message__strong {
	font-weight: var(--bold);
	color: var(--green);
}

.point {
	position: relative; /* SPはデザイン（top_SP_260925）の座標に合わせる */
	padding-top: 0.4375rem;
	padding-bottom: 4.6875rem;
}

/* SPは見出しの緑帯が画面幅いっぱい近くまで伸びるので、左右の余白を12pxにする */

.point__inner {
	padding-inline: 0.75rem;
}

.point__title { /*
    SPはデザイン750px時54px。マーカー内の文字だけPSDで120%に拡大されている
    （54×1.2＝64.8px → .point__title-mark の 32px）。
  */
	font-size: 1.6875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em; /*
    SPは2行に折り返す。緑のマーカーは文字より大きく（22px＋上下4pxの余白＝40px）
    行の高さ36pxを超えるため、1.8のままだと上下の行のマーカーがくっついてしまう。
    マーカーの高さ＋すき間6px ぶんを行の高さにする（20 × 2.3 ＝ 46px）。
    PCは1行に収まるので従来どおり。
  */ /* 行送りはデザインの43px（マーカーの上下が少し重なる）のまま */
	line-height: 1.5925925926;
	text-align: center;
}

/*
  マーカー（緑の帯）の大きさはデザイン実測に合わせてある。
  PSD（top_PC_260901）の緑の矩形：
    「圧倒的な裁量」  x165 y1740 / 292 × 74
    「無理のない労働環境」x497 y1740 / 419 × 74
  インライン要素の背景の高さは line-height ではなく
  「フォントの内容領域（Noto Sans JP で約 1.4545em）＋上下padding」で決まる。
    41px → 内容領域 60px ＋ 上下7px = 74px（デザインと一致）
    左右18px → 292.0px / 419.2px（デザインの 292 / 419 と一致）
  ※44px・上下14pxでは高さが92pxになり、デザインより18px（約24%）大きかった。
*/

.point__title-mark { /*
    上下のpaddingが非対称なのは、フォントのベースラインの位置のせい。
    インライン要素の背景は「内容領域＋padding」で描かれるが、
    Noto Sans JP は内容領域の中で文字が少し下寄りに座るため、
    上下を同じ値にすると**上の緑だけ厚く見える**（実測：上20px / 下15px）。
    上下の合計は変えずに配分だけずらして、デザインと同じ「上下ほぼ同じ」にそろえる。
      PC：合計14px を 4 / 10 に → 上17px / 下18px（デザインは上16 / 下17。変更前は上20 / 下15）
      SP：合計 8px を 2 / 6 に → 上9.2px / 下10.0px（変更前は上11.2 / 下8.0）
    ※合計を変えていないので、マーカーの高さ（PC 74px / SP 40px）はそのまま。
  */
	padding: 0.125rem 0.65625rem 0.34375rem;
	background-color: var(--green);
	font-size: 2rem; /* 行の高さは見出し（43px）にそろえる。既定の継承だと帯のぶん行間が広がる */
	line-height: 1.34375;
	color: var(--white);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---- 3カラム ---- */

.point__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3.1875rem; /* 写真はデザインで左右29px（インナー12＋17） */
	margin-top: 2.1875rem;
	padding-inline: 1.0625rem;
}

.point__item {
	position: relative;
}

.point__figure {
	position: relative;
	width: 100%;
	aspect-ratio: 317/212;
}

.point__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.point__num {
	position: absolute;
	left: 50%;
	bottom: -1.90625rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.3125rem;
	height: 4.3125rem;
	margin-left: -2.15625rem;
	border-radius: 50%;
	background-image: linear-gradient(180deg, #00b0c0 0%, #1893c4 100%);
	color: var(--white);
}

.point__num-label {
	font-size: 0.59375rem;
	font-weight: var(--bold);
	font-family: var(--mont-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.point__num-value {
	margin-top: 0.25rem;
	font-size: 2rem;
	font-weight: var(--regular);
	font-family: var(--mont-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.point__item-title {
	margin-top: 3.3125rem;
	font-size: 1.1rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-align: center;
}

.point__item-text {
	margin-top: 1.3125rem;
	font-size: 0.8125rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.83;
}

.business {
	position: relative; /* デザイン（top_SP_260925）：セクションの上から22.5px下に写真の帯 */
	padding-top: 1.40625rem;
	overflow-x: clip;
}

.business__bg {
	position: absolute; /*
    写真の途中から暗くなり始める。PCは写真の高さ343pxに対して53px下（＝15.5%）から。
    SPも写真の高さ（137px）に対して同じ割合にして、写真と写真のすき間や
    写真の下の映り込みが、PCと同じように暗い背景の上に乗るようにする。
  */ /* デザイン（top_SP_260925）：写真の上から49.5px＝セクション上から72pxで緑が始まる */
	top: 4.5rem;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: var(--grad-dark);
}

/* 上部にはみ出す写真（横に流れ続ける帯。流れる仕組みは _marquee.scss） */

.business__gallery {
	display: flex;
	position: relative;
	z-index: 2;
	width: 100%; /* デザイン：セクションの上から22.5px下に写真の帯（相殺しないよう .business 側で確保する） */ /*
    左右は切って横スクロールを防ぎつつ、下だけは映り込みのぶん見せる。
    overflow: hidden のままだと映り込みが消えてしまう。
    （横のはみ出しは .business の overflow-x: clip が受け持つ）
  */
	overflow: visible;
	clip-path: inset(0 0 -1.625rem 0);
}

/*
  1本（写真7枚）を流し切る秒数＝1本の幅 ÷ 1秒あたり60px（デザイン基準）。
  SP：7 ×（302 + 12）÷ 60 ≒ 36.6秒／PC：7 ×（602 + 28）÷ 60 ＝ 73.5秒
*/

.business__gallery-track {
	--marquee-duration: 36.6s;
	gap: 0.75rem;
	padding-right: 0.75rem;
}

.business__gallery-item {
	position: relative;
	flex-shrink: 0; /* デザイン：写真302×172・すき間13 */
	width: 18.875rem;
	height: auto;
}

/*
  写真の下の映り込み。下層MV（.page-mv__gallery-reflection）と同じ作り。
  素材（business_04.png）はぼかしも減衰もない生の反転画像で、そのまま敷くと
  写真がくっきり透けて見えるため、CSSで作る。

  ・同じ画像を scaleY(-1) で反転 → 窓（64px）で上だけ見せる＝写真の下端が映る
  ・blur でぼかし、下へ向かってマスクで消す
  デザイン実測：写真の下端2823pxから約67pxで背景の明るさに戻る
*/

.business__gallery-reflection {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%; /* 写真の高さに対する割合はPCと同じ（64 / 343）。SPは写真が137pxなので26px */
	height: 1.625rem;
	overflow: hidden; /*
    濃さで薄くする（ぼかしでは消さない）。
    デザインの映り込みは道路の白線が分かる程度にくっきりしていて、
    ぼかしを強くすると「何も無い帯」になってしまう。
  */
	opacity: 0.3;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.business__gallery-reflection img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 602/343;
	object-fit: cover; /* 上下反転。窓の上端＝写真の下端になる */
	transform: scaleY(-1); /*
    ぼかしは「窓の中の画像」にかける。
    窓（overflow: hidden）の外側にかけると、ぼけが上へにじんで
    写真の下端にモヤがかかってしまう。
    量はデザインに合わせて控えめ（2px）。写真が何か分かる程度を残す。
  */
	filter: blur(0.125rem);
}

.business__gallery-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 602/343;
	object-fit: cover;
}

.business__inner {
	position: relative;
	z-index: 3; /* デザイン：バッジは写真の帯に18.5px重なる */
	margin-top: -1.40625rem;
	padding-top: 0.25rem;
	padding-bottom: 5.65625rem;
	text-align: center;
}

.business__badge {
	display: block;
}

.business__title {
	margin-top: 1.40625rem; /* SPはデザイン750px時60px・行送り90px */
	font-size: 1.875rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.business__en { /* 見出しの下端から英字まで（デザイン：見出しink下端3445 → 英字3460.5） */
	margin-top: 0.375rem;
	font-size: 0.7375rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--yellow-lime);
	letter-spacing: 0.1em;
	line-height: 1;
}

.business__text {
	margin-top: 1.29375rem;
	font-size: 0.80625rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.837;
	text-align: center;
}

.business__btn {
	margin-top: 1.90625rem;
}

.numbers {
	position: relative;
	isolation: isolate; /* SPはデザイン（top_SP_260925）の座標 */
	padding-top: 6.89375rem;
	padding-bottom: 6.1875rem;
	background-image: var(--grad-green);
	color: var(--white);
	overflow-x: clip;
}

/* 背景の円（装飾） */

.numbers__circle {
	display: none;
}

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

.numbers__title { /*
    SPの文字サイズはデザイン（top_SP_260925）のPSD値そのまま（750px時の1/2）。
    以前は数字（Montserrat）が読み込めていない検証画面で合わせていたため小さかった。
  */
	font-size: 3.4375rem;
	font-weight: var(--bold);
	font-family: var(--mont-font);
	letter-spacing: 0.05em; /* デザインの行送り60px */
	line-height: 1.0909090909;
	text-align: center;
}

/* デザイン（top_SP_260925 / top_PC_260901）は BY だけ Montserrat-Light */

.numbers__title-by {
	font-weight: 300;
}

.numbers__title-accent {
	color: var(--yellow);
}

.numbers__sub {
	margin-top: 0.5rem;
	font-size: 1.40625rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
}

.numbers__lead {
	margin-top: 1.40625rem;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.8;
	text-align: center;
}

/* ---- 見出しの枠 ---- */

.numbers__group {
	margin-top: 2.8875rem;
}

/* SP：前のグループの下端から見出し枠まで 働きやすさ44 / 成長・技術力40（デザイン実測） */

.numbers__group--work {
	margin-top: 2.75rem;
}

.numbers__group--work + .numbers__group {
	margin-top: 2.5rem;
}

.numbers__group-title {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.3125rem;
	border: 0.0625rem solid var(--white);
	font-size: 1.40625rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.1em;
	line-height: 1;
}

/* ---- 会社の安定性（3カラム） ---- */

.numbers__stability {
	display: grid;
	grid-template-columns: 1fr; /* カードの箱は317px（インナー335の内側に9pxずつ） */
	gap: 2.15625rem;
	margin-top: 2.53125rem;
	padding-inline: 0.5625rem;
}

.numbers__stat {
	text-align: center;
}

/*
  アイコンはデザイン（top_SP_260925）では1つずつ大きさが違い、上端でそろっている。
  枠の高さで縦位置だけそろえ、大きさは画像ごとに指定する（PCは今までどおり高さでそろえる）。
*/

.numbers__stat-icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 4.125rem;
}

.numbers__stat-icon img {
	display: block;
	width: auto;
	height: auto;
	max-height: none;
}

/* デザインの実寸（375px換算） */

.numbers__stat:nth-child(1) .numbers__stat-icon img {
	width: 3.84375rem;
}

.numbers__stat:nth-child(2) .numbers__stat-icon img {
	width: 3.46875rem;
}

.numbers__stat:nth-child(3) .numbers__stat-icon img {
	width: 5.8125rem;
}

.numbers__stat-label {
	margin-top: 0.46875rem;
	font-size: 1.40625rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.numbers__stat-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-top: 0.5rem;
	color: var(--yellow);
}

.numbers__stat-num {
	font-size: 5.625rem;
	font-weight: var(--bold);
	font-family: var(--mont-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.numbers__stat-unit {
	font-size: 1.78125rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.numbers__stat-note {
	margin-top: 0.15625rem; /* デザイン（750px）で37.5px ＝ 375px換算18.75px */
	font-size: 1.171875rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

/* 吹き出しカード */

.numbers__card {
	position: relative;
	margin-top: 2.29375rem;
	padding: 1.5rem 1.4375rem 1.78125rem;
	border-radius: 0.625rem;
	background-color: var(--white);
	text-align: center;
}

.numbers__card::before {
	content: "";
	position: absolute;
	bottom: 100%; /* SPはデザイン実測：幅22×高さ17・中央 */
	left: calc(50% - 0.6875rem);
	width: 0;
	height: 0;
	border-left: 0.6875rem solid transparent;
	border-right: 0.6875rem solid transparent;
	border-bottom: 1.0625rem solid var(--white);
}

.numbers__card-title { /* デザイン（750px）で30px ＝ 375px換算15px。字間もデザインどおり0.05em */
	font-size: 0.9375rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--green-light);
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.numbers__card-text {
	margin-top: 0.5625rem; /* デザイン（750px）で24px ＝ 375px換算12px */
	font-size: 0.75rem;
	font-weight: var(--medium);
	font-family: var(--base-font);
	color: var(--black); /* SPはデザイン（top_SP_260925）どおり字間50（0.05em）。0だと1行に入る字数が増えて行数が減る */
	letter-spacing: 0.05em;
	line-height: 1.83;
}

/* ---- 働きやすさ（5カラム） ---- */

.numbers__work {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* デザイン（top_SP_260925）：カード159px・列間17・行間30.5 */
	gap: 1.90625rem 1.0625rem;
	margin-top: 2.21875rem;
}

.numbers__work-item {
	text-align: center;
}

/*
  SPは2列なので5つ目が1つだけ最後の行に残る。
  デザイン（top_SP_260925）では中央に置かれているので、2列ぶんに広げて真ん中へ。
*/

.numbers__work-item:nth-child(5) {
	grid-column: 1/-1;
	width: 9.9375rem;
	margin-inline: auto;
}

.numbers__work-icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 4.375rem;
}

.numbers__work-icon img {
	display: block;
	width: auto;
	height: auto;
	max-height: none;
}

/* デザインの実寸（375px換算） */

.numbers__work-item:nth-child(1) .numbers__work-icon img {
	width: 3.53125rem;
}

.numbers__work-item:nth-child(2) .numbers__work-icon img {
	width: 3.5625rem;
}

.numbers__work-item:nth-child(3) .numbers__work-icon img {
	width: 5.71875rem;
}

.numbers__work-item:nth-child(4) .numbers__work-icon img {
	width: 4.5625rem;
}

.numbers__work-item:nth-child(5) .numbers__work-icon img {
	width: 3.125rem;
}

/*
  SPは行ごとにアイコンの高さが違い、見出しの位置も行ごとに違う（デザイン実測：行の上端から
  1行目79.5 / 2行目92 / 3行目80.5）。アイコン枠の高さで合わせる。
  2行目の「有給消化率」のアイコンは隣より5px下から始まる。
*/

.numbers__work-label {
	margin-top: 0.46875rem;
	font-size: 1.03125rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.numbers__work-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-top: 0.59375rem;
	color: var(--yellow);
}

/* 数字の前に添える2行の文字（休日の「完全／週休」）。デザイン：30px・2行で数字と同じ高さ */

.numbers__work-prefix {
	align-self: center;
	margin-right: 0.5rem;
	font-size: 1.40625rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.05;
	text-align: left;
}

.numbers__work-num {
	font-size: 4.21875rem;
	font-weight: var(--bold);
	font-family: var(--mont-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.numbers__work-unit {
	font-size: 1.40625rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.numbers__work-unit--en {
	font-size: 1.875rem;
	font-family: var(--mont-font);
	font-weight: var(--bold);
}

.numbers__bubble {
	position: relative; /* デザイン：吹き出し159×69・文字11px（2行） */
	margin-top: 1.4375rem;
	padding: 1.03125rem 0.625rem;
	border-radius: 0.5rem;
	background-color: var(--white);
	font-size: 0.703125rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--green-mid);
	letter-spacing: 0.05em;
	line-height: 1.6;
	text-align: center;
}

.numbers__bubble::before {
	content: "";
	position: absolute;
	bottom: 100%; /* SPはデザイン実測：幅22×高さ17・中央 */
	left: calc(50% - 0.6875rem);
	width: 0;
	height: 0;
	border-left: 0.6875rem solid transparent;
	border-right: 0.6875rem solid transparent;
	border-bottom: 1.0625rem solid var(--white);
}

/* ---- 成長・技術力 ---- */

.numbers__skills {
	display: grid;
	grid-template-columns: 1fr;
	-moz-column-gap: 1.8125rem;
	column-gap: 1.8125rem;
	margin-top: 1.34375rem; /* SPは罫線が画面端から29px（インナーの内側に9.5pxずつ）＝デザイン実測 */
	padding-inline: 0.59375rem;
}

.numbers__skill {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	height: 3.75rem; /*
    SPも padding を入れないと、文字が行の上端に張り付いて
    罫線までの余白が空きすぎる（PCと違う見え方になる）。
    PCの値を行の高さの比（72 / 90 ＝ 0.8倍）で縮めたもの。
  */
	padding-top: 0.625rem;
	padding-right: 1rem;
	padding-left: 0.9375rem;
	border-bottom: 0.0625rem solid var(--white);
}

/*
  SPは1列に並ぶ。デザイン（top_SP_260925）はPCの「列」を上から順に読む並びなので、
  order で並べ替える（HTMLの順番＝PCの行順のままにしておく）。
*/

.numbers__skill:nth-child(1) {
	order: 0;
}

.numbers__skill:nth-child(2) {
	order: 3;
}

.numbers__skill:nth-child(3) {
	order: 6;
}

.numbers__skill:nth-child(4) {
	order: 1;
}

.numbers__skill:nth-child(5) {
	order: 4;
}

.numbers__skill:nth-child(6) {
	order: 7;
}

.numbers__skill:nth-child(7) {
	order: 2;
}

.numbers__skill:nth-child(8) {
	order: 5;
}

.numbers__skill:nth-child(9) {
	order: 8;
}

/* PCで3列に並べるための空きマス。SPは1列なので、ただの空行になってしまうため出さない */

.numbers__skill--empty {
	display: none;
	border-bottom: none;
}

.numbers__skill-label { /* SPはデザイン750px時26px */
	font-size: 0.8125rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.numbers__skill-value {
	color: var(--yellow);
	white-space: nowrap;
}

.numbers__skill-num {
	font-size: 2.34375rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.numbers__skill-unit {
	font-size: 0.84375rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1;
}

.interview {
	position: relative;
	z-index: 2; /* SPはデザイン（top_SP_260925）の座標 */
	padding-top: 4.90625rem;
	overflow-x: clip;
}

/* ---- 上部の流れる写真 ---- */

.interview__marquee {
	display: flex;
	flex-direction: column;
	gap: 0.375rem; /* デザイン：写真296×196・すき間6 */
}

.interview__marquee-row {
	display: flex;
	overflow: hidden;
}

/* 流れる仕組みは _marquee.scss（.marquee-track） */

.interview__marquee-track {
	--marquee-duration: 60s;
	gap: 0.375rem;
	padding-right: 0.375rem;
}

.interview__marquee-row--reverse .interview__marquee-track {
	animation-direction: reverse;
}

/*
  幅は flex-basis ではなく width で決める。
  Safari は flex-basis だけだと、帯（.marquee-track）の長さを写真の元の幅（788px）で計算してしまい、
  帯が想定の約2.6倍の長さになる → 流れる速さが変わり、逆向きの段は途中から空白が流れてくる。
*/

.interview__marquee-item {
	flex: none;
	width: 18.5rem;
}

.interview__marquee-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 394/262;
	border-radius: 0.625rem;
	object-fit: cover;
}

/* ---- 見出し ---- */

.interview__head { /* バッジは写真の帯に22.5px重なる（デザイン） */
	margin-top: -1.40625rem;
	text-align: center;
}

.interview__badge {
	margin-top: -1.25rem;
}

.interview__title { /* SP：ラベルの上端から見出しの文字の上端まで64px（デザイン実測） */
	margin-top: 1.15625rem; /*
    SPは26pxだと「ずっと群馬で、ずっと温かく。」が1行に収まらず（375px画面で
    352px必要／枠は335px）、閉じカッコだけが次の行に落ちて中途半端に折り返す。
    デザインどおり<br>の位置だけで2行になる大きさにする。
  */
	font-size: 2.5rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.25; /*
    SPはデザイン750px時80px・行送り100px。
    ただ40pxだと「ずっと群馬で、」が枠（335px）を1pxはみ出して「、」が次の行に落ちる。
    デザイン（Photoshop）は約物の前後を詰めて組んでいるので、同じく palt で約物を詰める。
  */
	font-feature-settings: "palt";
}

.interview__en {
	margin-top: 1.01875rem;
	font-size: 0.925rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--green);
	letter-spacing: 0.1em;
	line-height: 1;
}

.interview__lead {
	margin-top: 1.59375rem;
	font-size: 0.84375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.76;
	text-align: center;
}

/* ---- 3枚のカード ---- */

/*
  SPはスライダー。PCは今までどおりグリッド。
  ・インナーの左右余白を打ち消して画面いっぱいに出す（カードの左端19.5pxはSwiper側のオフセットで作る）
  ・切り抜きの社員（最大48px）とピンクの丸バッジ（26px）がカードの上にはみ出すので、
    そのぶん（50px）を箱の中に入れて切れないようにする
*/

.interview__slider {
	margin-top: 1.9375rem;
	margin-inline: -1.25rem; /* 左20（インナーぶん）＋デザインのカード左端19.5 */
	padding-top: 3.125rem;
	padding-left: 1.21875rem;
	overflow: hidden;
}

.interview__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

/* スライダーになったときのカード幅（デザイン296px） */

.interview__list.swiper-wrapper {
	display: flex;
	grid-template-columns: none;
	gap: 0;
}

.interview__card.swiper-slide {
	flex: 0 0 18.5rem;
	width: 18.5rem;
	height: auto;
}

/* ドット（デザイン：11px・間隔14px） */

.interview__pagination {
	display: flex;
	justify-content: center;
	gap: 0.875rem;
	margin-top: 1.09375rem;
}

.interview__pagination .swiper-pagination-bullet {
	width: 0.6875rem;
	height: 0.6875rem;
	border-radius: 50%;
	background-color: #d8d8d8;
	opacity: 1;
}

.interview__pagination .swiper-pagination-bullet-active {
	background-color: var(--green);
}

.interview__card {
	position: relative;
	padding-bottom: 2.5rem;
	border-radius: 0.625rem; /* デザイン（top_PC_260915）で緑 → ダークグレー #282828 に変更 */
	background-color: #282828;
	color: var(--white);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.interview__card-figure {
	width: 100%;
	aspect-ratio: 394/262;
	border-radius: 0.625rem 0.625rem 0 0;
	overflow: hidden;
}

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

/*
  切り抜きの社員写真（260925 デザインの写真に差し替え）。
  画像そのものが腰のあたりで水平に切れているので、枠で切り取る必要はない。
  位置と大きさはデザインの座標そのまま（カード左端・上端からの差）。
    1人目 left 183 / top -66 / 272×550
    2人目 left 211 / top -62 / 207×559
    3人目 left 198 / top -68 / 205×506
*/

/*
  SPもデザイン（top_SP_260925）では切り抜きの社員が出る。
  PCとは写り込む範囲が違うので、SP専用の画像（--sp）を使い、
  枠（カードの中＋上に50pxだけはみ出す）で切り取る。
*/

.interview__card-person {
	display: block;
	position: absolute;
	top: -3.125rem;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
}

.interview__card-person-img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.3s ease;
}

/*
  SPも切り抜きはPCと同じ素材（インタビューページの本人）。
  デザイン（top_SP_260925）の切り抜きは本人と別の仮の人物だったため差し替えた。
  素材は膝までしか無いので、PCと同じく写真の下の黒い面に少しかかる位置で下を切る。
  位置・幅・切る高さは PC の値 × カード幅の比（296 / 395）。
*/

/* ホバーの別ポーズはPCだけ */

.interview__card-person-img--hover {
	display: none;
}

/*
  ホバーで別ポーズに差し替える。
  腕を上げているぶん横幅が広く、位置も少しずれるので画像ごとに指定する
  （デザインの座標から、通常ポーズの枠を基準にした差分）。
*/

.interview__card-person-img--hover {
	position: absolute;
	top: -0.125rem;
	left: -3.625rem;
	width: 20.25rem; /*
    reset の img { max-width: 100% } が効くと、枠（通常ポーズの幅272px）に縮められて
    ホバーの人物だけ小さくなる。別ポーズは横に広いので上限を外す。
  */
	max-width: none;
	opacity: 0;
}

.interview__card:nth-child(2) .interview__card-person-img--hover {
	top: -0.3125rem;
	left: -0.0625rem;
	width: 14.4375rem;
}

.interview__card:nth-child(3) .interview__card-person-img--hover {
	top: -0.1875rem;
	left: -1.6875rem;
	width: 15.1875rem;
}

/*
  切り抜きは腰のあたりで水平に断ち切る。
  デザイン（top_PC_260925）ではグループのレイヤーマスクで切っていて、
  切り口は3人とも同じ高さ（カード上端から 372 / 378 / 377px）。
  画像そのものは膝まで写っているので、ここで下を切り落とす。
  枠（.interview__card-person）で切るとホバーの別ポーズが左にはみ出すぶんまで
  切れてしまうため、画像ごとに clip-path で下だけ切る。
*/

/*
  下の画像も同時に消す（クロスフェード）。
  重ねたままだと、新しいポーズの透明部分から元のポーズ（下ろした腕など）が透けて
  腕が2本あるように見えてしまうため。
*/

/* 別ポーズはPCだけなので、SP幅では入れ替えない */

.interview__card-mark {
	position: absolute; /* SPはデザイン（top_SP_260925）：76.5pxの円・カードの左上から -12 / -26 */
	top: -1.625rem;
	left: -0.75rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.78125rem;
	height: 4.78125rem;
	border-radius: 50%;
	background-color: var(--pink-strong);
	font-size: 0.84375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.278;
	text-align: center; /* カード全体のリンク（.interview__card-body::after）のクリックを邪魔しない */
	pointer-events: none;
}

/* 中の文字はデザイン（top_SP_260925 / top_PC_260901）どおり -15度かたむける */

.interview__card-mark span {
	display: block;
	transform: rotate(-15deg);
}

/*
  ホバーでカード全体が黄色になるので、リンクもカード全体に広げる（::after）。
  本文自体は position を持たせず、中の各行を relative にして
  切り抜き写真（.interview__card-person）より手前に出している。
*/

.interview__card-body {
	display: block;
	color: inherit;
	padding: 1.625rem 2rem 0;
}

.interview__card-body > * {
	position: relative;
}

.interview__card-body::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.interview__card-no {
	display: block;
	font-size: 0.6875rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--yellow-lime);
	letter-spacing: 0.1em;
	line-height: 1;
	transition: color 0.3s ease;
}

/*
  ホバー時は黄色地に黒文字（英語表記は緑）。
  インタビューページのタブ（.iv-mv__tab.is-current）と同じ配色。
*/

/* デザインでは「INTERVIEW.」より末尾の番号だけが1.8倍（ベースラインは同じ） */

.interview__card-no-num {
	font-size: 1.8em;
}

.interview__card-name {
	display: block;
	margin-top: 0.75rem;
	font-size: 1.875rem;
	font-weight: var(--medium);
	font-family: var(--mont-font);
	letter-spacing: 0.1em;
	line-height: 1;
}

.interview__card-meta {
	display: block;
	margin-top: 0.5625rem;
	font-size: 0.6875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0.05em;
	line-height: 1.95;
}

.interview__card-quote {
	display: block;
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	letter-spacing: 0;
	line-height: 1.84;
	text-align: center;
}

.workplace {
	position: relative;
	z-index: 1; /* SPはデザイン（top_SP_260925）：インタビューのカードに写真が重なる */
	margin-top: -3.28125rem;
	padding-top: 0;
	padding-bottom: 3.53125rem;
	overflow-x: clip;
}

/* ---- 斜めに重なる写真 ---- */

/*
  SPもPCと同じ「斜めに重ねた」並びにする。
  PCで写真が入っている範囲（デザイン x=0〜693）を375pxに収める倍率（0.541倍）で
  デザイン座標をそのまま置き直したもの。左の余白（デザイン28px→15px）も比率どおり残る。

  位置と大きさは箱に対する % なので、箱の幅が変われば並びごと拡大縮小する。
  箱の高さ358px（375px幅のとき）＝ 回転後の外接範囲（661px）を同じ倍率にしたもの。
*/

.workplace__photos {
	position: relative;
	width: 100%;
	aspect-ratio: 375/438;
	margin-inline: auto;
}

.workplace__photo {
	position: absolute;
	padding: 0.375rem;
	background-color: var(--white); /* 影はデザイン実測（右下120度・距離20 / ぼかしσ11.5 / 黒18%）。SPは 0.54 倍に縮める */
	box-shadow: 0.3125rem 0.5625rem 0.75rem rgba(0, 0, 0, 0.18);
}

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

.workplace__photo--01 {
	top: 13.2%;
	left: -2.73%;
	width: 50.1%;
	transform: rotate(13.3deg);
}

.workplace__photo--01 .workplace__photo-img {
	aspect-ratio: 345/227;
}

.workplace__photo--02 {
	top: 33.3%;
	left: 16.7%;
	width: 74.5%;
	transform: rotate(-9.4deg);
}

.workplace__photo--02 .workplace__photo-img {
	aspect-ratio: 523/342;
}

.workplace__photo--03 {
	top: 67.8%;
	left: 44.1%;
	width: 48.8%;
	transform: rotate(13.1deg);
}

.workplace__photo--03 .workplace__photo-img {
	aspect-ratio: 335/219;
}

/* ---- テキスト ---- */

.workplace__inner {
	position: relative;
	z-index: 1; /* SPはデザイン（top_SP_260925）：文字は左そろえで左右29px */
	padding-inline: 1.8125rem;
}

.workplace__body { /* デザイン：バッジが写真に70.5px重なる */
	margin-top: -4.40625rem;
}

.workplace__title {
	margin-top: 1.4375rem;
	font-size: 1.375rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.59;
}

.workplace__en {
	margin-top: 0.2875rem;
	font-size: 0.8625rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--green);
	letter-spacing: 0.1em;
	line-height: 1;
}

.workplace__text {
	margin-top: 1.375rem;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.877;
}

.workplace__btn {
	margin-top: 1.15rem;
}

.entry {
	position: relative;
	background-color: var(--gray-bg);
}

/* ---- 本文 ---- */

.entry__inner {
	position: relative;
	z-index: 1; /* SPはデザイン（top_SP_260925）の座標。文字は中央ぞろえ（PCは左そろえ） */
	padding-top: 8.5rem;
	padding-bottom: 7.21875rem;
	text-align: center;
}

.entry__title { /* SP：ラベル上端から見出しの文字まで64px／英字158.5／本文203／カード381（デザイン実測） */
	margin-top: 1.0625rem; /* SPはデザイン750px時60px・行送り90px */
	font-size: 1.875rem;
	font-weight: var(--black-weight);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

/*
  iPhone（Safari）のSPだけ1px小さくする。
  html の .is-ios は script.js が iOS の WebKit のときに付ける。
  （@supports で書くとビルドのメディアクエリまとめ処理で消えてしまうため）
*/

.entry__en {
	margin-top: 0.75rem;
	font-size: 0.8625rem;
	font-weight: var(--semi-bold);
	font-family: var(--mont-font);
	color: var(--green);
	letter-spacing: 0.1em;
	line-height: 1;
}

.entry__text {
	margin-top: 1.625rem; /* デザインは本文だけ左右13px内側 */
	padding-inline: 0.8125rem;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1.877;
}

/* ---- 募集一覧 ---- */

.entry__list {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	margin-top: 2.36875rem;
}

.entry__list--archive { /* 緑帯に重ねる。帯の文字の箱（.page-mv__inner / z-index: 3）より手前に出す */
	position: relative;
	z-index: 4;
	margin-top: -2.5rem;
}

.entry__job {
	position: relative;
	display: flex; /* SPは横幅が足りないので、タグと職種名を縦に積む（そろえは既定の左のまま） */
	flex-direction: column;
	gap: 0.84375rem;
	min-height: 7rem; /* SPは左右そろえる（PCだけ New バッジの逃げで左を広くする） */
	padding: 1.3125rem 1.9375rem;
	border-radius: 0.25rem;
	background-color: var(--white);
	transition: box-shadow 0.3s ease;
}

.entry__job-new {
	position: absolute; /*
    SPはカードが縦積み（タグ→職種名）なので、カードの上下中央に置くと
    タグと職種名のあいだに浮いてしまう。1段目のタグと高さをそろえる。
    20（カード上padding）+ 21（タグ42の半分）- 21.5（バッジ43の半分）= 19.5
  */
	top: 2.71875rem;
	left: -0.90625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--pink-strong);
	font-size: 0.46875rem;
	font-weight: var(--semi-bold);
	font-family: var(--manrope-font);
	color: var(--white);
	letter-spacing: 0.15em;
	line-height: 1;
}

.entry__job-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	flex-shrink: 0;
	width: 7.25rem;
	height: 2rem;
	border: 0.0625rem solid #afafaf; /* デザインの角丸は10px（白いカード側の4pxとは別の値） */
	border-radius: 0.625rem;
	font-size: 0.6875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1;
}

.entry__job-tag-icon {
	display: block; /* SPはデザイン（top_SP_260925）で12px。PCは17px */
	width: 0.75rem;
	height: auto;
}

.entry__job-title { /* インナーはSPだけ中央ぞろえだが、カードの中は左そろえ（デザインどおり） */
	text-align: left;
	font-size: 0.8125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.1em;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {

html:focus-within {
	scroll-behavior: auto;
}

*,
*::before,
*::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

.marquee-track {
	animation: none;
}

.js-photo-parallax .page-photo__img {
	height: 100%;
	transform: none !important;
}

}

@media (any-hover: hover) {

.header__cta:hover {
	opacity: 1;
	filter: none;
}

.header__cta:hover::before {
	opacity: 1;
}

.header__nav-link:hover {
	opacity: 0.6;
}

.header__drawer-cta:hover {
	opacity: 1;
	filter: none;
}

.header__drawer-cta:hover::before {
	opacity: 1;
}

.footer__cta:hover {
	opacity: 1;
	filter: none;
}

.footer__cta:hover::before {
	opacity: 1;
}

.footer__nav-link:hover,
.footer__privacy:hover,
.footer__official:hover {
	opacity: 0.7;
}

.btn--white:hover {
	background-color: var(--green);
	color: var(--white);
	opacity: 1;
}

.btn--dark:hover {
	background-color: var(--green);
	opacity: 1;
}

.btn-arrow:hover {
	background-color: #1f1f1f;
	opacity: 1;
}

.btn-arrow:hover .btn-arrow__text {
	color: var(--white);
}

.btn-arrow:hover .btn-arrow__icon {
	background-color: var(--white);
}

.btn-arrow:hover .btn-arrow__icon::before {
	background-color: #1f1f1f;
}

.btn-arrow--white:hover {
	background-color: var(--white);
}

.btn-arrow--white:hover .btn-arrow__text {
	color: #1f1f1f;
}

.btn-arrow--white:hover .btn-arrow__icon {
	background-color: #1f1f1f;
}

.btn-arrow--white:hover .btn-arrow__icon::before {
	background-color: var(--white);
}

.fixed-cta__btn:hover {
	opacity: 1;
	filter: none;
}

.fixed-cta__btn:hover::before {
	opacity: 1;
}

.notfound__link:hover {
	color: var(--green);
	opacity: 1;
}

.req-form__submit:hover {
	opacity: 1;
	filter: none;
}

.req-form__submit:hover::before {
	opacity: 1;
}

.req-form__back-btn:hover {
	opacity: 0.7;
}

.req-form__home:hover {
	opacity: 1;
	filter: none;
}

.req-form__home:hover::before {
	opacity: 1;
}

.req__back:hover {
	opacity: 0.7;
}

.iv-mv__tab:hover { /* a:hover の半透明（_base.scss）を打ち消す。薄いと黄色がくすむ */
	opacity: 1;
	background-color: var(--yellow);
	color: var(--black);
}

.iv-mv__tab:hover .iv-mv__tab-no {
	color: var(--green);
}

/*
    1人目のアクティブ座標は、左に広い別ポーズ（ヘルメットに手）用。ホバーは通常の写真のまま
    大きくなるので、同じ幅でも左位置は「通常時の中心」を保つ値にする（右を軸に左へはみ出さない）。
    通常時の中心 PC 730+215/2＝837.5 → 837.5−256/2＝709.5
  */

.iv-mv__members-track:has(.iv-mv__tab:nth-child(1):hover) .iv-mv__person--01:not(.is-current):not(.iv-mv__person--sp) {
	top: 11.3%;
	left: -8.4%;
	width: 42.2%;
}

.iv-mv__members-track:has(.iv-mv__tab:nth-child(2):hover) .iv-mv__person--02:not(.is-current):not(.iv-mv__person--sp) {
	top: 10.5%;
	left: 35.9%;
	width: 30.2%;
}

.iv-mv__members-track:has(.iv-mv__tab:nth-child(3):hover) .iv-mv__person--03:not(.is-current):not(.iv-mv__person--sp) {
	top: 9%;
	left: 67.4%;
	width: 31.8%;
}

.iv-msg__cta:hover {
	opacity: 1;
	filter: none;
}

.iv-msg__cta:hover::before {
	opacity: 1;
}

.iv-others__item:hover {
	background-color: var(--yellow);
	color: var(--black);
}

/* a:hover の半透明（_base.scss）を打ち消す。薄いと文字が黒になりきらない */

.iv-others__link:hover {
	opacity: 1;
}

.iv-others__item:hover .iv-others__no {
	color: var(--green);
}

.interview__card:hover {
	background-color: var(--yellow);
	color: var(--black);
}

/* a:hover の半透明（_base.scss）を打ち消す。薄いと文字が黒になりきらない */

.interview__card-body:hover {
	opacity: 1;
}

.interview__card:hover .interview__card-no {
	color: var(--green);
}

.entry__job:hover {
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
	opacity: 1;
}

}

@media (prefers-reduced-motion: no-preference) {

.mv__catch-line,
.mv__label,
.mv__text {
	animation: mv-wipe 0.9s cubic-bezier(0.77, 0, 0.18, 1) both;
}

.mv__catch-line:nth-child(1) {
	animation-delay: 0.3s;
}

.mv__catch-line:nth-child(2) {
	animation-delay: 0.5s;
}

.mv__label {
	animation-delay: 0.8s;
}

.mv__text {
	animation-delay: 1s;
}

}

@media (any-hover: hover) and (min-width: 768px) {

.interview__card:hover .interview__card-person-img {
	opacity: 0;
}

.interview__card:hover .interview__card-person-img--hover {
	opacity: 1;
}

}

@media screen and (min-width: 768px), print {

html {
	font-size: 1.1111111111vw;
}

html {
	scroll-padding-top: 4.375rem;
}

a:hover {
	opacity: 0.7;
}

.inner {
	max-width: 77.625rem;
	padding-inline: 0;
}

.inner--wide {
	max-width: 90rem;
	padding-inline: 2.4375rem 1.75rem;
}

.layout-section {
	padding-top: 4.75rem;
}

.layout-section__body {
	margin-top: 5rem;
}

.layout-section__body--wide {
	margin-top: 5.25rem;
}

.layout-section--biz {
	padding-bottom: 7.125rem;
}

.layout-section--work {
	padding-top: 4.5rem;
	padding-bottom: 12.25rem;
}

.layout-section--work .layout-section__body {
	margin-top: 5.25rem;
}

.layout-section--benefits {
	padding-top: 5.6875rem;
}

.layout-section--benefits .layout-section__body {
	margin-top: 5.6875rem;
}

.layout-section--gallery {
	padding-top: 7.875rem;
	padding-bottom: 10.5625rem;
}

.layout-section--gallery .layout-section__body {
	margin-top: 4.5rem;
}

.page-photo--overlap {
	margin-top: -5.75rem;
}

.header__inner {
	height: 8.75rem;
	padding-left: 2.4375rem;
	padding-right: 1.75rem;
}

.header.is-scrolled .header__inner {
	height: 7.5rem;
}

.header__logo {
	width: 9.3125rem;
	margin-top: 2.3125rem;
}

.header.is-scrolled .header__logo {
	width: 7.5rem;
	margin-top: 1.5rem;
}

.header__title {
	margin-top: 0;
	margin-left: 2.9375rem;
}

.header__title-ja {
	font-size: 1rem;
}

.header__title-en {
	margin-top: 0.75rem;
	font-size: 0.625rem;
	font-weight: var(--medium);
	font-family: var(--mont-font);
	letter-spacing: 0.1em;
	line-height: 1;
}

.header__nav {
	display: block;
	pointer-events: auto;
	margin-left: auto;
}

.header__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	flex-shrink: 0;
	width: 13.375rem;
	height: 3.875rem;
	margin-left: 2.6875rem;
	border-radius: 1.9375rem;
	font-size: 0.9375rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1;
}

.header__hamburger {
	display: none;
}

.header__drawer {
	display: none;
}

.footer {
	margin-top: 0;
	background-image: var(--grad-green);
	text-align: left;
}

.footer::before {
	display: none;
}

.footer__inner {
	padding-top: 6.5rem; /*
      3段目の組み方を変えてフッターが12px伸びたぶんを戻し、
      デザインどおり フッター下端 = y9689（ページ総高 9689px）を維持する。
    */
	padding-bottom: 7.5625rem;
}

.footer__logo {
	position: absolute;
	top: -3.75rem;
	left: 0;
	width: 9.25rem;
	margin-inline: 0;
}

.footer__row {
	flex-direction: row;
	align-items: center;
	gap: 0;
}

.footer__title {
	flex-shrink: 0;
	margin-top: 0;
	font-size: 1.125rem;
	line-height: 1;
}

.footer__nav {
	margin-top: 0;
	position: relative; /* 行の中央そろえだとデザインより3px下がるぶんを戻す */
	top: -0.1875rem;
	margin-left: auto;
}

.footer__nav-list {
	flex-direction: row;
	flex-wrap: nowrap; /* デザインは項目の間に全角スペース2つぶんの空き */
	gap: 2.1875rem;
}

.footer__nav-link {
	font-size: 0.9375rem;
	line-height: 1;
}

.footer__cta {
	flex-shrink: 0;
	width: 13.3125rem;
	max-width: none;
	height: 3.875rem;
	margin-top: 0;
	margin-left: 2.6875rem; /* デザインは左右が半円（角の丸み＝高さの半分）。SPの23のままだと角ばって見える */
	border-radius: 1.9375rem;
	font-size: 0.9375rem;
}

.footer__company {
	flex-direction: row;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.footer__address {
	margin-top: 0.5625rem;
	line-height: 1.6;
}

.footer__bottom {
	flex-direction: row; /*
      デザインではこの2つは下そろえではなく、
      コピーライトがプライバシーポリシーより14px下に置かれている。
    */
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 4.375rem;
}

.footer__copyright { /* デザインではプライバシーポリシーより11px下に置かれている */
	margin-top: 0.6875rem;
	font-size: 0.75rem;
	white-space: normal;
}

.footer__pagetop { /* デザインは画面右端から28px（インナー幅基準ではない） */
	right: 1.75rem;
}

.breadcrumb {
	padding-inline: 2rem;
	margin-top: 1rem;
}

.breadcrumb__inner {
	max-width: 70.5rem;
}

.breadcrumb__item {
	font-size: 0.875rem;
}

.breadcrumb__separator {
	margin-left: 0.5rem;
}

.breadcrumb__separator svg {
	width: 1rem;
	height: 1rem;
}

.breadcrumb__item--current {
	margin-left: 0.5rem;
}

.pagination {
	margin-top: 3rem;
}

.pagination__btn {
	min-width: 2.625rem;
	height: 2.625rem;
	padding-inline: 1rem;
	font-size: 1rem;
	margin-left: 0.5rem;
}

.pagination__btn--prev,
.pagination__btn--next {
	min-width: 4.125rem;
}

.loading__logo {
	width: 12.5rem;
}

.btn {
	width: 15.1875rem;
	height: 3.875rem;
	font-size: 0.9375rem;
}

.btn-arrow {
	height: 3.9375rem;
	padding: 0.25rem 0.625rem 0.25rem 1.875rem;
}

.btn-arrow__text {
	font-size: 1rem;
}

.btn-arrow__icon {
	width: 2.625rem;
	height: 2.625rem;
}

.badge {
	padding: 1.0625rem 1.5rem;
	font-size: 1.125rem;
}

.badge::after {
	border-top-width: 1.25rem;
	border-right-width: 1.25rem;
}

.section-title {
	font-size: 3.375rem;
	text-align: left;
}

.fixed-cta {
	display: none;
}

.page-mv__title {
	margin-top: 1.75rem;
	font-size: 3.4375rem;
	line-height: 1.3;
}

.page-mv__title--single {
	line-height: 1;
}

.page-mv__en {
	margin-top: 2.25rem;
	font-size: 1.25rem;
}

.page-mv--workplace .page-mv__en {
	margin-top: 1.1875rem;
}

.page-mv__lead {
	margin-top: 1.6875rem;
	font-size: 1rem;
	text-align: center;
}

.page-mv--workplace .page-mv__lead {
	margin-top: 1.875rem;
}

.page-mv--business .page-mv__inner {
	padding-top: 30.1875rem;
	padding-bottom: 10.75rem;
}

.page-mv__gallery {
	position: absolute;
	top: 9.9375rem;
	left: 0;
	right: 0;
	width: auto;
	padding-top: 0;
	clip-path: inset(0 0 -4rem 0);
}

.page-mv__gallery-track {
	--marquee-duration: 73.5s;
	gap: 1.75rem;
	padding-right: 1.75rem;
}

.page-mv__gallery-item {
	width: 37.625rem;
}

.page-mv__gallery-reflection {
	height: 4rem;
}

.page-mv--workplace .page-mv__inner {
	padding-top: 29.4375rem;
	padding-bottom: 6.875rem;
}

.page-mv__people {
	position: absolute;
	top: 0; /*
      デザインでは人の列が画面中央より10px右にある
      （中央の人 x583〜877＝中心730／画面中心は720）。
      左右を10pxずらして、中央に来た人がデザインと同じ位置に立つようにする。
    */
	left: 0.625rem;
	right: -0.625rem;
	height: 45rem;
	padding-top: 0;
	overflow: visible;
}

.page-mv__people-slider {
	clip-path: inset(-100% -0.625rem 4.625rem -0.625rem);
}

.page-mv__person { /*
      デザインは7人とも切り抜きの大きさがばらばら（527〜595px）で、
      頭の位置も1人ずつ違う。高さを1つの値にそろえると、
      デザインより大きい人・小さい人が出て、中央の人が相対的に小さく見える。
      1人ぶんの値（高さ・上下のずらし）は PHP から CSS変数で渡している。
      → parts/project/page-mv.php の $people
    */
	height: var(--mv-person-h, 35rem);
	transform: translateY(var(--mv-person-y, 0rem));
}

.page-mv__people .swiper-slide-active .page-mv__person { /*
      デザインの中央の人は 294×671・y105〜776。
      人によって元の高さが違うので、倍率も1人ずつ変えて
      「中央に来たら必ず高さ671・頭 y105」になるようにする。
      （足元を軸に拡大 → 720−671＝49 → 56px下げて105）
    */
	transform: translateY(3.5rem) scale(var(--mv-person-pop, 1.2));
}

.page-mv__bubble {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute; /*
      人物より前に出す。中央に来た人は 1.2倍に拡大されて
      右どなりの吹き出しに重なるので、`z-index: 1`（＝中央のスライドの3より下）だと
      吹き出しの左下が人物に隠れて欠けて見える。
      スライダーは順番が回るため「どの人がどの吹き出しの前か」を固定できない。
      吹き出しは常に最前面、で統一する。
    */
	z-index: 4;
	right: calc(74% - 0.3125rem);
	bottom: 26.125rem;
	width: 7.1875rem;
	text-align: center; /* 右下を軸にすると、中央に来たときに顔とは反対（左上）へ広がる */
	transform-origin: bottom right;
	transition: right 0.5s ease, bottom 0.5s ease, transform 0.5s ease;
}

.page-mv__people .swiper-slide-active .page-mv__bubble { /*
      拡大の軸が右下なので、余白ぶんも倍率ぶん大きくなる。
      本体の右端・下端がデザイン（右端＝中央から74px左／下端450px）に
      そろうように、拡大後の余白ぶんを引いておく。
    */
	right: calc(50% + 4.1190625rem);
	bottom: 27.6190625rem;
	transform: scale(1.619);
}

.page-mv--simple .page-mv__inner {
	padding-top: 11.5rem;
	padding-bottom: 10.25rem;
}

.page-mv--policy .page-mv__inner {
	padding-bottom: 9.875rem;
}

.sec-head__title {
	font-size: 2.1875rem;
}

.sec-head__lead {
	margin-top: 2rem;
	font-size: 1rem;
	line-height: 1;
}

.page-photo--inset .page-photo__img {
	width: 81.75rem;
}

.policy {
	padding-bottom: 10rem;
}

.policy__body { /* 募集要項のカードと同じ内寸にそろえる */
	max-width: 64.375rem;
	margin-top: -5.125rem;
	margin-inline: auto;
	padding: 9.6875rem 6.4375rem 5.5rem;
}

.policy__body > h2 {
	font-size: 1.25rem;
}

.policy__body > h2:not(:first-child) {
	margin-top: 3rem;
}

.policy__body > p {
	margin-top: 1rem;
	font-size: 0.9375rem;
}

.policy__body > ul {
	margin-top: 1rem;
}

.policy__body > ul > li {
	font-size: 0.9375rem;
}

.policy__body > ul > li::before {
	top: 0.8125rem;
}

.notfound {
	padding-block: 6rem 10rem;
}

.notfound__list {
	flex-direction: row;
	justify-content: center;
	gap: 2.5rem;
}

.notfound__btn {
	margin-top: 3.5rem;
}

.biz-cards {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8125rem;
}

.biz-cards__label {
	font-size: 1.25rem;
}

.biz-cards__title {
	font-size: 1.375rem;
}

.biz-cards__text {
	margin-top: 2.5rem; /*
      デザインのテキストフレームはカード幅（395）より少し狭い391px
      （1枚目 x100〜491 に対しカードは x98〜493）。
      395のままだと1行あたり1文字多く入って、折り返し位置がデザインとずれる。
    */
	max-width: 24.4375rem;
}

.biz-cards__logo {
	margin-top: 2rem;
}

.work-cards {
	grid-template-columns: repeat(4, 1fr);
	gap: 2.375rem;
}

.work-cards__title { /* 写真の下端 3719 → 見出しの文字の上端 3758（行送り36pxなので箱は約7px上） */
	margin-top: 2rem;
	font-size: 1.375rem;
}

.work-cards__en {
	margin-top: 1.1875rem;
	font-size: 0.8125rem;
}

.work-cards__text {
	margin-top: 2.0625rem;
	font-size: 0.9375rem;
}

.benefits { /* カードが6枚なので PC は 3列×2行（2026-09-24 指示） */
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.benefits__item { /*
      高さは中身なり。以前は min-height: rem(642) を入れていたが、
      これは4列（カード幅282px）だったときの値で、3列にすると下に余白が余るため外した。
      同じ行のカードの高さは grid が自動でそろえる。
    */
	padding: 3rem 1.875rem 2.5rem;
}

.benefits__icon {
	height: 7rem;
}

.benefits__title {
	margin-top: 1.4375rem;
	font-size: 1.375rem;
}

.benefits__en {
	margin-top: 0.5625rem;
	font-size: 0.8125rem;
}

.benefits__lead {
	margin-top: 2.1875rem;
	font-size: 1rem;
}

.benefits__text {
	font-size: 0.9375rem;
}

.gallery__slide {
	width: 64.4375rem;
}

.gallery__arrow::before {
	width: 2.5625rem;
	height: 2.5625rem;
	margin-top: -1.28125rem;
	border-top-width: 0.5625rem;
	border-right-width: 0.5625rem;
}

.gallery__arrow--prev {
	left: calc(50% - 33.6875rem);
}

.gallery__arrow--prev::before {
	margin-left: -0.5625rem;
}

.gallery__arrow--next {
	right: calc(50% - 33.6875rem);
}

.gallery__arrow--next::before {
	margin-left: -2rem;
}

.gallery__caption {
	margin-top: 1.1875rem;
}

.gallery__pagination {
	margin-top: 3.1875rem;
}

.req { /* デザインはエントリーカード下端からフッターまで185px */
	padding-bottom: 11.5625rem;
}

.req__card {
	max-width: 64.375rem; /* デザインは最後の罫線からカード下端まで141px */
	padding: 5.5625rem 6.4375rem 8.75rem;
}

.req__card + .req__card {
	margin-top: 3.5625rem;
}

.req__card--head {
	margin-top: -5.125rem;
}

.req__head {
	gap: 0.6875rem;
}

.req__new {
	width: 3.9375rem;
	height: 3.9375rem;
	font-size: 0.75rem;
}

.req__back {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	margin-left: auto;
	font-size: 0.875rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--black);
	letter-spacing: 0.05em;
	line-height: 1;
}

.req__title {
	margin-top: 0.625rem;
	font-size: 2.1875rem;
}

.req-table {
	margin-top: 5.4375rem;
}

.req-table__row {
	flex-direction: row;
	gap: 4.875rem; /*
      デザインは本文1行=30pxのグリッドで、1行の行の高さが60px。
      罫線1pxを含めて上下の余白が計30pxになるようにしている。
    */
	padding: 0.9375rem 0 0.875rem; /*
      デザイン（entry_PC_260911）は罫線の左端 310px に対して ■ が 332px、本文が 523px。
      中身だけ 24px 内側に入れる（■〜本文の間隔は 113 + 78 のまま）。
    */
	padding-left: 1.5rem;
}

.req-table__label {
	width: 7.0625rem;
	font-size: 0.9375rem; /* 本文と同じ30pxの行送りにそろえる */
	line-height: 2;
}

.req-table__body {
	width: 36.6875rem;
	font-size: 0.9375rem;
}

.req-entry {
	padding-top: 7.4375rem;
}

.req-entry__bar {
	height: 5.8125rem;
	font-size: 1.25rem;
}

.req-entry__tel {
	margin-top: 2.8125rem;
	font-size: 3.125rem;
}

.req-entry__hours {
	margin-top: 1.25rem;
	font-size: 1rem;
}

.req-entry__bar--mail {
	margin-top: 7.3125rem;
}

.req-entry__lead {
	margin-top: 1.8125rem;
	font-size: 1rem;
	text-align: center;
}

.req-entry__required {
	margin-top: 0.6875rem;
	font-size: 0.875rem;
	text-align: center;
}

.req-form {
	margin-top: 3.5rem;
}

.req-form__row { /* box-sizing: border-box なので下の罫線3pxを含めて80px */
	min-height: 5rem; /* 罫線の左端309pxに対して文字が336px＝27px内側 */
	padding: 1.5rem 1.6875rem 0.9375rem;
}

.req-form__row:focus-within,
.req-form__row.is-open,
.req-form__row--fixed {
	padding-top: 0.6875rem;
}

.req-form__row:has(textarea) {
	min-height: 15.625rem;
	padding-top: 1.625rem;
}

.req-form__row:has(textarea):focus-within,
.req-form__row:has(textarea).is-open {
	padding-top: 0.6875rem;
}

.req-form__label {
	font-size: 0.9375rem;
}

.req-form__required::before {
	font-size: 1.125rem;
}

.req-form__note {
	margin-left: 0.8125rem;
	font-size: 0.8125rem;
}

.req-form__row:focus-within .req-form__note,
.req-form__row.is-open .req-form__note {
	margin-left: 0.625rem;
	font-size: 0.6875rem;
}

.req-form__field input[type=text],
.req-form__field input[type=tel],
.req-form__field input[type=email],
.req-form__field textarea {
	font-size: 1.125rem;
}

.req-form__privacy {
	align-items: center;
	margin-top: 2.875rem;
	font-size: 0.875rem;
}

.req-form__privacy input[type=checkbox] { /* PCは1行に収まり align-items: center なので、ずらさずデザインどおりの27px */
	width: 1.6875rem;
	height: 1.6875rem;
	margin-top: 0;
}

.req-form__submit {
	width: 16.4375rem;
	height: 5.125rem;
	margin-top: 3.3125rem;
	font-size: 1rem;
}

.req-form__confirm-row {
	flex-direction: row;
	align-items: baseline;
	gap: 1.5rem;
	padding: 0.875rem 1.6875rem 1.1875rem;
}

.req-form__confirm-label {
	flex-shrink: 0;
	width: 11.875rem;
}

.req-form__confirm-value {
	font-size: 1.125rem;
}

.req-form__confirm-actions {
	gap: 1.5rem;
	margin-top: 3.3125rem;
}

.req-form__confirm-actions .req-form__submit,
.req-form__confirm-actions .req-form__back-btn {
	width: 16.4375rem;
	max-width: none;
}

.req-form__back-btn {
	width: 16.4375rem;
	height: 5.125rem;
	font-size: 1rem;
}

.req-form__thanks {
	margin-top: 4.125rem;
}

.req.is-sent .req-entry {
	margin-top: -5.125rem;
	padding-bottom: 10.0625rem;
}

.req-form__thanks-title {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.req-form__thanks-text {
	margin-top: 1.75rem;
	font-size: 1rem;
	line-height: 1.75rem;
	text-align: center;
}

.req-form__home {
	width: 16.4375rem;
	height: 5.125rem;
	margin-top: 4.375rem;
	font-size: 1rem;
}

.req-archive {
	padding-block: 0 7.5rem;
}

.iv-mv__bg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50.4375rem;
	background-image: var(--grad-green);
}

.iv-mv__inner {
	padding-top: 15.4375rem;
}

.iv-mv__inner::before {
	content: none;
}

.iv-mv__title {
	font-size: 3.4375rem;
	line-height: 1;
}

.iv-mv__en {
	margin-top: 1.4375rem;
	font-size: 1.25rem;
}

.iv-mv__lead {
	margin-top: 0.9375rem;
	font-size: 0.9375rem;
}

.iv-mv__members {
	display: contents;
}

.iv-mv__members--others {
	display: none;
}

.iv-mv__members-track {
	display: contents;
}

.iv-mv__tabs {
	position: absolute;
	top: 24.3125rem; /* デザイン（staff_260918）はタブ1つ目の左端が 735px（枠の基準位置＋643） */
	left: 40.1875rem; /* デザインは人物の切り抜きがタブの背面。人物（z-index: 1）より手前に出す */
	z-index: 2;
	gap: 0.8125rem;
	margin-top: 0;
	overflow: visible;
}

.iv-mv__tab {
	justify-content: flex-start; /* デザイン（staff_260918）の実測：1つ目193px・2つ目と3つ目194px（間隔13px） */
	flex: 0 0 12.125rem;
	white-space: normal;
	height: 7.625rem;
	padding: 1.0625rem 0 0;
}

.iv-mv__tab:first-child {
	flex-basis: 12.0625rem;
}

.iv-mv__tab.is-current::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -0.6875rem;
	border-top: 1rem solid var(--yellow);
	border-right: 0.6875rem solid transparent;
	border-left: 0.6875rem solid transparent;
}

.iv-mv__tab-name {
	margin-top: 0.6875rem;
	font-size: 1.5625rem;
}

.iv-mv__tab-meta {
	margin-top: 0.625rem; /* デザイン（staff_260918）は 13px Bold・字間0.05em */
	font-size: 0.8125rem;
}

.iv-mv__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 19.375rem;
	left: 37.75rem;
	z-index: 3;
	width: 6.4375rem;
	height: 6.4375rem;
	border-radius: 50%;
	background-color: var(--pink-strong);
	font-size: 1.125rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.278;
	text-align: center;
}

.iv-mv__mark span {
	display: block;
	transform: rotate(-15deg);
}

.iv-mv__people {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 90rem;
	aspect-ratio: auto;
	margin-top: 0; /*
      タブの上端（389px）で切る。
      写真はタブとメイン写真に隠れる前提の長さなので、タブとタブの
      すき間（13px）から下半身や切り抜きの端がのぞかないようにする。
    */ /* デザイン（staff_260918）はマスクの下端 396px で人物を断ち切っている */
	height: 24.75rem;
	margin-left: -45rem;
}

.iv-mv__person--01 {
	top: 9.875rem;
	left: 45.625rem;
	width: 13.4375rem;
}

.iv-mv__person--02 {
	top: 9.5625rem;
	left: 60rem;
	width: 10.1875rem;
}

.iv-mv__person--03 {
	top: 9.3125rem;
	left: 72.9375rem;
	width: 10.125rem;
}

.iv-mv__person--01.is-current {
	top: 7.875rem;
	left: 42.75rem;
	width: 16rem;
}

.iv-mv__person--02.is-current {
	top: 7.6875rem;
	left: 59.5625rem;
	width: 11.4375rem;
}

.iv-mv__person--03.is-current {
	top: 7.3125rem;
	left: 71.5rem;
	width: 12.0625rem;
}

.iv-mv__figure {
	width: 81.75rem;
	margin-top: 3.9375rem;
}

.iv-mv__caption {
	position: absolute;
	top: 16.5rem;
	left: 40.375rem; /*
      デザインの見出しの枠は566px。ぴったりにすると2行目
      「休日は大好きな野球に打ち込める、」（15文字＝567px）が1px溢れて折り返すので
      少しだけ広く取る。
    */
	width: 36.25rem;
	padding: 0;
}

.iv-mv__caption--left {
	top: 15.4375rem;
	left: 6.75rem; /*
      枠の幅は「いちばん長い行が折り返さない」ことだけが条件。
      2人目は524px、3人目（staff3_260925）は
      「大人の関係で、本当に良い「ものづくり」に」＝670px あるので、それに合わせる。
      改行位置はどちらもテキスト側の改行で決めている。
    */
	width: 43.125rem;
}

.iv-mv__caption-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -1.625rem;
	left: 29rem;
	z-index: -1;
	width: 8.625rem;
	height: 8.625rem;
	border-radius: 50%;
	background-color: var(--pink-strong);
	text-align: center;
}

.iv-mv__caption-no {
	font-size: 0.875rem;
}

.iv-mv__caption-title { /* デザイン：INTERVIEW.の文字の上266 → 見出しの文字の上314 ＝ 48px */
	margin-top: 0.9375rem;
	font-size: 2.25rem;
}

.iv-mv__caption-foot { /* デザイン：N.T の文字の右787 → プロフィールの左829 ＝ 42px */
	gap: 2.625rem; /* デザイン：見出しの文字の上314 → N.T の文字の上479 ＝ 165px */
	margin-top: 0.4375rem;
}

.iv-mv__caption-name {
	font-size: 2.5rem;
}

.iv-mv__caption-meta {
	font-size: 1rem;
}

.qa {
	padding-block: 14.0625rem 0rem;
}

.iv-photo + .qa {
	padding-top: 7.4375rem;
}

.qa__group {
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 6.6875rem;
	max-width: 77.625rem;
	padding-inline: 0;
}

.qa__group + .qa__group {
	margin-top: 9.1875rem;
}

.qa__group--left {
	flex-direction: row-reverse;
	gap: 8.25rem;
}

.qa__col--body {
	flex: 0 0 31rem;
}

.qa__col--fig {
	flex: 0 0 33.3125rem;
	gap: 0.375rem;
}

.qa__item + .qa__item {
	margin-top: 4.5625rem;
}

.qa__question {
	gap: 0.875rem;
	padding: 0.6875rem 2.25rem 0.6875rem 0.9375rem;
	border-radius: 2rem/50%;
}

.qa__item > .qa__question {
	margin-left: -1.75rem;
}

.qa__question::after {
	left: 1.8125rem;
	border-top-width: 1.0625rem;
	border-right-width: 1.0625rem;
}

.qa__q {
	font-size: 2.125rem;
}

.qa__question-text {
	font-size: 1rem;
}

.qa__title {
	margin-top: 2.1875rem;
	font-size: 2rem;
}

.qa__text {
	width: 31rem;
	margin-top: 1rem;
	font-size: 1rem;
}

.flow {
	margin-top: 9.1875rem; /*
      デザインは「セクション上端2394 → 見出しの文字の上2484」で90px。
      90 をそのまま padding にすると行の余白ぶん見出しが16px下がるので、その分引く。
    */
	padding-block: 4.625rem 0rem;
	padding-bottom: 7.5rem;
}

.flow:has(+ .iv-photo) {
	padding-bottom: 21.125rem;
}

.flow__head {
	display: flex;
	align-items: baseline;
	gap: 3.125rem;
}

.flow__title {
	flex-shrink: 0;
	font-size: 2rem;
}

.flow__lead {
	margin-top: 0;
	font-size: 1rem;
}

.flow__scroll { /* デザイン：見出しの文字の下2516 → 時刻の文字の上2595 ＝ 79px */
	margin-top: 1.1875rem;
	padding-left: calc(50% - 38.8125rem);
	padding-right: 2.5rem;
}

.flow__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 34.5rem; /*
      本文の段は 1fr。写真（160px）は見出し＋本文の2段にまたがるので、
      auto だけだと写真に足りない高さが見出しの段にも配られ、1行の見出しでも段が高くなる。
      余りは本文の段で受ける。
    */
	grid-template-rows: auto auto 1fr;
	gap: 0;
}

.flow__item {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 0;
	padding-top: 3rem;
}

.flow__item::before {
	top: 6.1875rem; /* 丸の右端（71 + 30）から、次の丸の左端（カード幅ぶん先の 71）まで */
	left: 6.3125rem;
	right: -4.4375rem;
}

.flow__item:last-child::before {
	right: 0;
}

.flow__time { /*
      デザインでは時刻が丸の真上（中央ぞろえ）にある。
      丸の中心は 71 + 30/2 = 86px なので、その2倍を幅にして中央ぞろえにすると
      「8:00」でも「12:00」でも丸の中心に来る。
    */
	width: 10.75rem;
	font-size: 1.875rem;
	text-align: center;
}

.flow__dot {
	top: 5.375rem; /* デザイン実測：丸は写真の左端から71px（x98→169 / 651→722 / 1200→1270） */
	left: 4.4375rem;
}

.flow__card {
	display: grid;
	grid-row: 2/span 2;
	grid-template-rows: subgrid; /* 写真の丸160 + 22 = 本文の左端182 → デザインの x281 に合う */
	grid-template-columns: 10rem 1fr;
	-moz-column-gap: 1.375rem;
	column-gap: 1.375rem;
	row-gap: 0;
	align-items: start; /* デザイン：時刻の文字の上2595 → 写真の丸2681 ＝ 86px */
	margin-top: 3.75rem;
	padding-right: 2.5rem;
}

.flow__figure {
	width: 10rem;
	height: 10rem;
	border-width: 0.4375rem;
}

.flow__item-title {
	font-size: 1.25rem;
}

.flow__text {
	margin-top: 0.875rem;
	font-size: 0.875rem;
}

.flow__figure {
	grid-row: 1/span 2;
	grid-column: 1;
}

.flow__body {
	display: grid;
	grid-row: 1/span 2;
	grid-column: 2;
	grid-template-rows: subgrid;
	row-gap: 0;
}

.iv-msg {
	margin-top: 8.6875rem;
	padding-block: 8.875rem 13.5625rem;
}

.iv-msg__card { /* デザインではインナー左端より 74px 内側（カード左端 x=173） */
	margin-left: 4.625rem; /*
      左右はデザインだと53pxだが、interview-03 の見出し
      「でも、一人で抱え込まなくていい。」が1行に収まらず折り返してしまうため
      少しだけ削っている（中身の幅 459 → 489px）。
    */
	padding: 6.125rem 2.375rem 3.5rem;
}

.iv-msg__question {
	position: absolute;
	top: -1.875rem;
	left: 2.5rem;
	margin-bottom: 0;
}

.iv-msg__title {
	font-size: 2rem;
}

.iv-msg__text {
	margin-top: 2.1875rem;
	font-size: 1rem;
}

.iv-msg__cta {
	height: 5.125rem;
	margin-top: 2.8125rem;
	font-size: 1.125rem;
}

.iv-others { /*
      デザイン実測：
        メッセージの写真の下端 5650／カードの上端 5595 → **食い込みは55px**
        カード下端 6097 からフッターの背景（6291）まで194px
    */
	margin-top: -3.4375rem;
	padding-block: 0rem 12.125rem;
}

.iv-others--archive {
	margin-top: 0;
}

.iv-others__list {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1875rem;
	max-width: 68.75rem;
	margin-inline: auto;
}

.iv-others__item {
	min-height: 31.375rem; /* 本文の下端がカード下端から46px上に来る（デザイン実測） */
	padding: 1.5rem 1.75rem 2.875rem;
}

.iv-others__person { /*
      デザイン（staff1_260918）の座標そのまま。カードは 355×502。
      1人目：カード左端 +64 / 上端 −44 / 幅272（画像の下端はカード下端で切る）
    */
	top: -2.75rem;
	left: 4rem;
	width: 17rem; /* デザインはマスクで腰の位置（カード上端＋273px）で断ち切っている */
	height: 19.8125rem;
	transform: none;
}

.iv-others__item:nth-child(2) .iv-others__person {
	top: -3.375rem;
	left: 4.9375rem;
	width: 12.9375rem;
	height: 20.4375rem;
}

.iv-others__item:nth-child(3) .iv-others__person {
	top: -3.25rem;
	left: 5rem;
	width: 12.8125rem; /* 3人目だけ断ち切りが5px下（カード上端＋278px） */
	height: 20.625rem;
}

.iv-others__item--current .iv-others__person { /* デザインどおり、アクティブのときは上に61px伸ばして大きく見せる */
	top: -6.5625rem;
	left: 1.3125rem;
	width: 20.25rem;
	height: 23.625rem;
}

.iv-others__item--current:nth-child(2) .iv-others__person {
	top: -7.25rem;
	left: 4.5rem;
	width: 14.4375rem;
	height: 24.3125rem;
}

.iv-others__item--current:nth-child(3) .iv-others__person {
	top: -7.1875rem;
	left: 3.3125rem;
	width: 15.1875rem;
	height: 24.5625rem;
}

.iv-others--archive .iv-others__item:nth-child(1) .iv-others__person { /* デザインどおり、アクティブのときは上に61px伸ばして大きく見せる */
	top: -6.5625rem;
	left: 1.3125rem;
	width: 20.25rem;
	height: 23.625rem;
}

.iv-others__mark {
	top: 11.625rem;
	left: 1.875rem;
	width: 6.375rem;
	height: 6.375rem;
	font-size: 1.125rem;
}

.iv-others__no {
	font-size: 0.875rem;
}

.iv-others__name {
	margin-top: 1.125rem;
	font-size: 2.5rem;
}

.iv-others__meta {
	margin-top: 0.4375rem;
	font-size: 0.9375rem;
}

.iv-photo {
	margin-top: -14.625rem;
}

.iv-others__person--sp {
	display: none;
}

.iv-mv__person-mark {
	display: none;
}

.mv {
	padding-inline: 0;
	padding-bottom: 0; /*
      高さは決め打ちにしない。
      決め打ちにすると、画面を広げたときに写真の枠だけ横に広がって
      高さが足りなくなり、写真の上下（または左右）が切れてしまう。
      デザインの「写真の上端 139px」だけ padding で確保して、
      あとは .mv__image の比率（1298:782）にセクションの高さを決めさせる。
    */
	padding-top: 8.6875rem;
	background-image: none;
}

.mv__bg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0; /*
      デザインはセクション921pxに対して緑が782px。
      % にしておくと、セクションが高くなっても同じ比率でついてくる。
    */
	height: 84.9%;
	background-image: var(--grad-green);
}

.mv__image { /*
      デザインは x142〜1440 / y139〜921（1298×782）。
      高さではなく比率で持たせているので、画面を広げると
      横に広がったぶんだけ縦にも伸びる（写真が切れない）。
      上端の139pxは .mv の padding-top で確保している。
    */
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	height: auto;
	margin-left: calc(50% + -36.125rem);
	width: auto;
	aspect-ratio: 1298/782;
}

.mv__image-img {
	object-position: left center;
}

.mv__content {
	position: absolute; /*
      デザインはセクション921pxに対して y=280（30.4%）。
      % にしておくと、セクションが高くなっても写真に対する位置が変わらない。
    */
	top: 30.4%;
	left: calc(50% + -38.875rem);
	width: 40rem;
}

.mv__catch {
	font-size: 6.3125rem;
}

.mv__label {
	margin-top: 1.9375rem;
	padding: 1.3125rem 1.75rem;
	font-size: 2rem;
}

.mv__text {
	margin-top: 1rem;
	font-size: 1rem;
}

.message {
	height: 49.375rem;
	padding: 0;
	overflow-x: visible;
}

.message__collage { /* PCは写真をセクション（.message）基準のデザイン座標で置くので、基準にしない */
	position: static;
	width: auto;
	max-width: none;
	aspect-ratio: auto;
	margin: 0;
}

.message__photo {
	width: auto;
	filter: drop-shadow(1.0625rem 1.8125rem 0.8125rem rgba(0, 0, 0, 0.2));
}

.message__photo--01 {
	top: -6.3125rem;
	left: calc(50% + -48rem);
	width: 19.0625rem;
}

.message__photo--02 {
	top: 5.8125rem;
	left: calc(50% + -25.1875rem);
	width: 18.6875rem;
}

.message__photo--03 {
	top: 12.0625rem;
	left: calc(50% + -42.3125rem);
	width: 14.25rem;
}

.message__photo--04 {
	top: 20.25rem;
	left: calc(50% + -36.125rem);
	width: 26.5625rem;
}

.message__photo--05 {
	top: 35.9375rem;
	left: calc(50% + -19.5rem);
	width: 14.375rem;
}

.message__photo--06 {
	top: 34.4375rem;
	left: calc(50% + -64.0625rem);
	width: 35.1875rem;
}

.message__body {
	display: block;
	text-align: left;
	position: absolute;
	top: 13.5625rem;
	left: calc(50% + -3.125rem);
	width: 42.9375rem;
	max-width: none;
	margin: 0;
	padding-inline: 0;
}

.message__label {
	display: block;
	margin-left: 32.8125rem;
	font-size: 1.25rem;
}

.message__en {
	margin-top: 2.375rem;
	font-size: 0.9375rem;
}

.message__title {
	margin-top: -2.25rem;
}

.message__title-sm {
	display: inline;
	font-size: 3.125rem;
	line-height: 1.5;
}

.message__title-lg {
	display: inline;
	margin-top: 0;
	font-size: 5.375rem;
	line-height: 1.3;
}

.message__underline {
	top: auto;
	max-width: 100%;
	transform: none;
	bottom: -3rem;
	left: 13.625rem;
	width: 29.3125rem;
}

.message__text {
	width: 39.4375rem;
	margin-top: 3.875rem;
	font-size: 1rem;
}

.point {
	padding-top: 2.6875rem;
	padding-bottom: 2.625rem;
}

.point__inner {
	padding-inline: 0;
}

.point__title {
	font-size: 2.25rem;
	line-height: 1;
}

.point__title-mark {
	padding: 0.25rem 1.125rem 0.625rem;
	font-size: 2.5625rem;
}

.point__list {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8125rem;
	margin-top: 3.0625rem;
	padding-inline: 0;
}

.point__figure {
	aspect-ratio: 395/262;
}

.point__num {
	bottom: -2.6875rem;
	width: 5.8125rem;
	height: 5.8125rem;
	margin-left: -2.90625rem;
}

.point__num-label {
	font-size: 0.8125rem;
}

.point__num-value {
	margin-top: 0.5rem;
	font-size: 2.8125rem;
}

.point__item-title {
	margin-top: 3.4375rem;
	font-size: 1.375rem;
	line-height: 1.636;
}

.point__item-text {
	margin-top: 1.875rem;
	font-size: 0.9375rem;
	line-height: 1.867;
}

.business {
	padding-top: 0;
}

.business__bg {
	top: 7.0625rem;
}

.business__gallery {
	position: absolute;
	top: 3.75rem;
	left: 0;
	right: 0;
	z-index: 2;
	width: auto;
	margin-top: 0;
	clip-path: inset(0 0 -4rem 0);
}

.business__gallery-track {
	--marquee-duration: 73.5s;
	gap: 1.75rem;
	padding-right: 1.75rem;
}

.business__gallery-item {
	width: 37.625rem;
}

.business__gallery-reflection {
	height: 4rem;
}

.business__inner {
	margin-top: 0;
	padding-top: 23.9375rem;
	padding-bottom: 8.625rem;
}

.business__title {
	margin-top: 2.25rem;
	font-size: 3.4375rem;
	line-height: 1;
	line-height: 1;
}

.business__en {
	margin-top: 1.9375rem;
	font-size: 1.25rem;
}

.business__text {
	margin-top: 1.875rem;
	font-size: 1rem;
	line-height: 2;
}

.business__btn {
	margin-top: 2.3125rem;
}

.numbers {
	padding-top: 14.0625rem; /*
      成長・技術力の罫線をデザイン（y=5556）に合わせるため
      .numbers__skills の margin-top を 1px 足した。
      セクション下端（y=5795）が動かないよう、その1pxをここで戻している。
    */
	padding-bottom: 9.25rem;
}

.numbers__circle {
	display: block;
	position: absolute;
	top: -0.0625rem; /*
      デザイン（1440）の x=-9 / 幅1538 を vw に置き換えている。
      rem だと 1440px より広い画面で画像が伸びず、両端に切れ目が見えてしまう。
      vw なら画面幅が変わっても常に画面いっぱい（画面幅の106.8%）になり、
      両端はいつも画面の外に出る。
    */
	left: -0.625vw;
	width: 106.8055555556vw; /* reset の img { max-width: 100% } に負けないようにする */
	max-width: none;
	height: auto;
	mix-blend-mode: multiply;
	pointer-events: none; /*
      画像の下端でそのまま切ると、そこで緑の濃さが変わって横一直線の境目が出る。
      下に向けて薄くして、背景の緑に溶け込ませる。
    */
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.numbers__title {
	font-size: 5.625rem;
	line-height: 1;
}

.numbers__sub {
	margin-top: 1.5rem;
	font-size: 1.875rem;
}

.numbers__lead {
	margin-top: 1.5rem;
	font-size: 1.125rem;
	line-height: 1;
}

.numbers__group {
	margin-top: 5.5rem;
}

.numbers__group--work {
	margin-top: 6.1875rem;
}

.numbers__group--work + .numbers__group {
	margin-top: 5.5rem;
}

.numbers__group-title {
	height: 5.75rem; /* PSD の枠線は2px。文字はデザインでは枠の中央よりわずかに上に置かれている */
	border-width: 0.125rem;
	padding-bottom: 0.5rem;
	font-size: 1.875rem;
}

.numbers__stability {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8125rem;
	margin-top: 4rem;
	padding-inline: 0;
}

.numbers__stat-icon {
	align-items: flex-end;
	height: 5.4375rem;
}

.numbers__stat-icon img {
	max-height: 100%;
}

.numbers__stat .numbers__stat-icon img {
	width: auto;
}

.numbers__stat-label {
	margin-top: 0.9375rem;
	font-size: 1.875rem;
}

.numbers__stat-value {
	margin-top: 0.5rem;
}

.numbers__stat-num {
	font-size: 7.5rem;
}

.numbers__stat-unit {
	font-size: 2.375rem;
}

.numbers__stat-note {
	margin-top: 0.3125rem;
	font-size: 1.5625rem;
}

.numbers__card {
	margin-top: 3.0625rem;
	padding: 2.5625rem 2rem 2rem;
}

.numbers__card::before {
	left: 44%;
	border-left-width: 1.0625rem;
	border-right-width: 1.0625rem;
	border-bottom-width: 1.5rem;
}

.numbers__card-title {
	font-size: 1.25rem;
}

.numbers__card-text {
	font-size: 0.9375rem;
	letter-spacing: 0;
	line-height: 1.867;
}

.numbers__work {
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
	margin-top: 2.6875rem;
}

.numbers__work-item:nth-child(5) {
	grid-column: auto;
	width: auto;
	margin-inline: 0;
}

.numbers__work-icon {
	align-items: flex-end;
	height: 6.6875rem;
}

.numbers__work-icon img {
	max-height: 100%;
}

.numbers__work-item .numbers__work-icon img {
	width: auto;
}

.numbers__work-label {
	margin-top: 1rem;
	font-size: 1.375rem;
}

.numbers__work-value {
	margin-top: 0.6875rem;
}

.numbers__work-prefix {
	margin-right: 0.6875rem;
	font-size: 1.875rem;
}

.numbers__work-num {
	font-size: 5.625rem;
}

.numbers__work-unit {
	font-size: 1.875rem;
}

.numbers__work-unit--en {
	font-size: 2.5rem;
}

.numbers__bubble {
	margin-top: 2rem;
	padding: 1.375rem 0.625rem;
	min-height: 5.75rem;
	font-size: 0.9375rem;
}

.numbers__bubble::before {
	left: 44%;
	border-left-width: 1.0625rem;
	border-right-width: 1.0625rem;
	border-bottom-width: 1.5rem;
}

.numbers__skills {
	grid-template-columns: repeat(3, 1fr);
	padding-inline: 0; /* デザイン（top_PC_260915）：見出し枠の下端 5427 → 1本目の罫線 5538（行80px） */
	margin-top: 1.9375rem;
}

.numbers__skill { /* デザイン（top_PC_260915）：罫線の間隔 80px、文字の下端が罫線の約21px上 */
	height: 5rem; /*
      罫線の両端より内側に文字が入り、下寄りに置かれている。
      左 21px / 右 22px。
    */
	padding-top: 0.875rem;
	padding-right: 1.25rem;
	padding-left: 1.3125rem;
}

.numbers__skill {
	order: 0;
}

.numbers__skill--empty {
	display: block;
}

.numbers__skill-label {
	font-size: 1.125rem;
}

.numbers__skill-num {
	font-size: 3.125rem;
}

.numbers__skill-unit { /* PSD: NotoSansJP-Black 18px / tracking 50 */
	font-size: 1.125rem;
}

.interview {
	padding-top: 8.4375rem;
}

.interview__marquee {
	gap: 0.5rem;
}

.interview__marquee-item {
	width: 24.625rem;
}

.interview__head {
	margin-top: 0;
}

.interview__badge {
	margin-top: -1.8125rem;
}

.interview__title {
	margin-top: 1.6875rem;
	font-size: 3.4375rem;
	line-height: 1.364;
	font-feature-settings: normal;
}

.interview__en {
	margin-top: 1.2375rem;
	font-size: 1.25rem;
}

.interview__lead {
	margin-top: 1.375rem;
	font-size: 1rem;
	line-height: 2;
}

.interview__slider {
	margin-top: 0;
	margin-inline: 0;
	padding-top: 0;
	padding-left: 0;
	overflow: visible;
}

.interview__list {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.8125rem;
	margin-top: 6rem;
}

.interview__pagination {
	display: none;
}

.interview__card {
	min-height: 40.125rem;
	padding-bottom: 0;
}

.interview__card-person {
	top: -4.125rem;
	left: 11.4375rem;
	right: auto;
	bottom: auto;
	width: 17rem;
	height: 34.375rem;
	overflow: visible;
}

.interview__card:nth-child(2) .interview__card-person {
	top: -3.875rem;
	left: 13.1875rem;
	width: 12.9375rem;
	height: 34.9375rem;
}

.interview__card:nth-child(3) .interview__card-person {
	top: -4.25rem;
	left: 12.375rem;
	width: 12.8125rem;
	height: 31.625rem;
}

.interview__card-person-img--hover {
	display: block;
}

.interview__card-person-img {
	clip-path: inset(0 0 6.9375rem 0);
}

.interview__card-person-img--hover {
	clip-path: inset(0 0 7.0625rem 0);
}

.interview__card:nth-child(2) .interview__card-person-img {
	clip-path: inset(0 0 7.375rem 0);
}

.interview__card:nth-child(2) .interview__card-person-img--hover {
	clip-path: inset(0 0 7.125rem 0);
}

.interview__card:nth-child(3) .interview__card-person-img {
	clip-path: inset(0 0 3.75rem 0);
}

.interview__card:nth-child(3) .interview__card-person-img--hover {
	clip-path: inset(0 0 4rem 0);
}

.interview__card-mark {
	top: -2.1875rem;
	left: -0.9375rem;
	width: 6.375rem;
	height: 6.375rem;
	font-size: 1.125rem;
}

.interview__card-body {
	padding-inline: 2.1875rem;
}

.interview__card-no,
.interview__card-name,
.interview__card-meta {
	padding-left: 0.625rem;
}

.interview__card-no {
	font-size: 0.875rem;
}

.interview__card-name {
	margin-top: 1.375rem;
	font-size: 2.5rem;
}

.interview__card-meta {
	margin-top: 0.6875rem;
	font-size: 0.9375rem;
	line-height: 1.733;
}

.interview__card-quote {
	margin-top: 2rem;
	font-size: 1.25rem;
	line-height: 1.6;
}

.workplace { /*
      デザイン（top_PC_260915）で下辺の社員の列が無くなり、
      VIEW MORE の文字 → 次のセクション（灰色）の間が 315px → 182px に。そのぶん 928 → 795px。
    */
	height: 49.6875rem;
	margin-top: -6.9375rem;
	padding: 0;
}

.workplace__photos { /* PCはデザイン幅1440の枠を画面中央に置き、その中の座標で配置する */
	position: absolute;
	top: 0;
	left: 50%;
	width: 90rem;
	max-width: none;
	height: 100%;
	aspect-ratio: auto;
	margin-left: -45rem;
	margin-inline-end: 0;
}

.workplace__photo {
	padding: 0.625rem;
	box-shadow: 0.625rem 1.0625rem 1.4375rem rgba(0, 0, 0, 0.18);
}

.workplace__photo--01 {
	top: 6.90625rem;
	left: 5.21875rem;
	width: 22.8125rem;
}

.workplace__photo--02 {
	top: 14.3125rem;
	left: 7.75rem;
	width: 33.9375rem;
}

.workplace__photo--03 {
	top: 28.5625rem;
	left: 3.15625rem;
	width: 22.1875rem;
}

.workplace__inner {
	padding-inline: 0;
}

.workplace__body {
	position: absolute;
	top: 13.625rem;
	left: 38.5rem;
	width: 36.875rem;
	margin-top: 0;
}

.workplace__title {
	margin-top: 1.625rem;
	font-size: 1.875rem;
	line-height: 1.5;
}

.workplace__en {
	margin-top: 0.875rem;
	font-size: 1rem;
}

.workplace__text {
	margin-top: 1.0625rem;
	font-size: 1rem;
	line-height: 2;
}

.workplace__btn {
	margin-top: 1.75rem;
}

.entry__inner {
	padding-top: 15.5rem;
	text-align: left;
	padding-bottom: 14.125rem;
}

.entry__title {
	margin-top: 1.375rem;
	font-size: 2.8125rem;
	line-height: 1.444;
}

.entry__en {
	margin-top: 0.8125rem;
	font-size: 1.25rem;
}

.entry__text {
	margin-top: 1.4375rem;
	padding-inline: 0;
	font-size: 1rem;
	line-height: 2;
}

.entry__list {
	position: absolute;
	top: 20rem;
	left: 35.75rem;
	width: 43.875rem;
	margin-top: 0;
}

.entry__list--archive { /* トップの絶対配置（.entry__list）は一覧ページでは使わない */
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	max-width: 64.375rem;
	margin-top: -3.875rem;
	margin-inline: auto;
}

.entry__job {
	flex-direction: row;
	align-items: center;
	gap: 2.25rem;
	min-height: 7.3125rem;
	padding: 0 1.5rem 0 2.5625rem;
}

.entry__job-new { /* PCは1行なので、カードの上下中央＝タグの高さになる */
	top: 50%;
	left: -1.25rem;
	width: 2.6875rem;
	height: 2.6875rem;
	margin-top: -1.34375rem;
	font-size: 0.625rem;
}

.entry__job-tag {
	gap: 0.375rem;
	width: 8.875rem;
	height: 2.625rem;
	font-size: 0.875rem;
}

.entry__job-tag-icon {
	width: 1.0625rem;
}

.entry__job-title {
	font-size: 1rem;
}

}

@media screen and (any-hover: hover) and (min-width: 768px), print and (any-hover: hover) {

.iv-mv__members-track:has(.iv-mv__tab:nth-child(1):hover) .iv-mv__person--01:not(.is-current):not(.iv-mv__person--sp) {
	top: 7.875rem;
	left: 44.34375rem;
	width: 16rem;
}

.iv-mv__members-track:has(.iv-mv__tab:nth-child(2):hover) .iv-mv__person--02:not(.is-current):not(.iv-mv__person--sp) {
	top: 7.6875rem;
	left: 59.5625rem;
	width: 11.4375rem;
}

.iv-mv__members-track:has(.iv-mv__tab:nth-child(3):hover) .iv-mv__person--03:not(.is-current):not(.iv-mv__person--sp) {
	top: 7.3125rem;
	left: 71.5rem;
	width: 12.0625rem;
}

.iv-others__item:not(.iv-others__item--current):hover .iv-others__person {
	top: -6.5625rem;
	left: 1.3125rem;
	width: 20.25rem;
	height: 23.625rem;
}

.iv-others__item:nth-child(2):not(.iv-others__item--current):hover .iv-others__person {
	top: -7.25rem;
	left: 4.5rem;
	width: 14.4375rem;
	height: 24.3125rem;
}

.iv-others__item:nth-child(3):not(.iv-others__item--current):hover .iv-others__person {
	top: -7.1875rem;
	left: 3.3125rem;
	width: 15.1875rem;
	height: 24.5625rem;
}

}

@media (min-width: 1440px) {

html {
	font-size: 16px;
}

}

@media (max-width: 767px) {

html {
	font-size: 4.2666666667vw;
}

}

@media screen and (max-width: 767px) {

.u-mtSp10 {
	margin-top: 10px !important;
	margin-top: prem(10) !important;
}

.u-mtSp20 {
	margin-top: 20px !important;
	margin-top: prem(20) !important;
}

.u-mtSp30 {
	margin-top: 30px !important;
	margin-top: prem(30) !important;
}

.u-mtSp40 {
	margin-top: 40px !important;
	margin-top: prem(40) !important;
}

.u-mtSp50 {
	margin-top: 50px !important;
	margin-top: prem(50) !important;
}

.u-mtSp60 {
	margin-top: 60px !important;
	margin-top: prem(60) !important;
}

.u-mtSp70 {
	margin-top: 70px !important;
	margin-top: prem(70) !important;
}

.u-mtSp80 {
	margin-top: 80px !important;
	margin-top: prem(80) !important;
}

.u-mtSp90 {
	margin-top: 90px !important;
	margin-top: prem(90) !important;
}

.u-mtSp100 {
	margin-top: 100px !important;
	margin-top: prem(100) !important;
}

.u-mtSp110 {
	margin-top: 110px !important;
	margin-top: prem(110) !important;
}

.u-mtSp120 {
	margin-top: 120px !important;
	margin-top: prem(120) !important;
}

.u-mtSp130 {
	margin-top: 130px !important;
	margin-top: prem(130) !important;
}

.u-mtSp140 {
	margin-top: 140px !important;
	margin-top: prem(140) !important;
}

.u-mtSp150 {
	margin-top: 150px !important;
	margin-top: prem(150) !important;
}

.u-mtSp160 {
	margin-top: 160px !important;
	margin-top: prem(160) !important;
}

.u-mtSp170 {
	margin-top: 170px !important;
	margin-top: prem(170) !important;
}

.u-mtSp180 {
	margin-top: 180px !important;
	margin-top: prem(180) !important;
}

.u-mtSp190 {
	margin-top: 190px !important;
	margin-top: prem(190) !important;
}

.u-mtSp200 {
	margin-top: 200px !important;
	margin-top: prem(200) !important;
}

.u-pc {
	display: none;
}

.u-sp {
	display: block;
}

.u-textMdLeft {
	text-align: Left !important;
}

.u-textMdCenter {
	text-align: Center !important;
}

.u-textMdRight {
	text-align: Right !important;
}

.u-textMdJustify {
	text-align: Justify !important;
}

.footer__inner {
	padding-bottom: 5.15625rem;
}

/* 緑帯：タイトルのink上端276 / 英字のink上端384 / 帯の下端641（750px時） */

.page-mv--policy .page-mv__inner {
	padding-top: 6.675rem;
	padding-bottom: 7.3125rem;
}

.page-mv--policy .page-mv__title {
	font-size: 1.98125rem;
}

.page-mv--policy .page-mv__en {
	margin-top: 0.9875rem;
	font-size: 0.78125rem;
	letter-spacing: 0.178em;
}

/* 白いカード：x20〜730（幅710）・上端512＝緑帯に129px重なる（750px時） */

.policy__inner {
	padding-inline: 0.625rem;
}

.policy__body {
	margin-top: -4.03125rem;
	padding: 3.8125rem 1.25rem 5.5rem;
	border-radius: 0.3125rem;
}

/* デザインの見出しは黒。本文と同じ大きさで太いだけ */

.policy__body > h2 {
	font-size: 0.8125rem;
	color: var(--black);
}

.policy__body > h2:not(:first-child) {
	margin-top: 2.5rem;
}

.policy__body > p,
.policy__body > ul > li {
	font-size: 0.8125rem;
	line-height: 1.7115384615;
}

.policy__body > h2 + p {
	margin-top: 0.34375rem;
}

.policy__body > p + p:not(.policy__address,
.policy__date) {
	margin-top: 0.34375rem;
}

.policy__body > .policy__date {
	font-size: 0.875rem;
	line-height: 2;
}

/* カードの下端からフッターまで77px（750px時） */

.policy {
	padding-bottom: 2.40625rem;
}

/* ---- MV ---- */

/* 写真は603×343（デザイン実測）。バッジが写真の下端に36px重なる */

.page-mv--business .page-mv__gallery-item {
	width: 18.84375rem;
}

.page-mv--business .page-mv__inner {
	margin-top: -1.21875rem;
	padding-top: 0;
	text-align: center;
}

.page-mv--business .page-mv__title {
	margin-top: 1.359375rem; /* デザイン（PSD）：750px時60px・行送り90px */
	font-size: 1.875rem;
	line-height: 1.5;
}

.page-mv--business .page-mv__en {
	margin-top: 0.40625rem;
	font-size: 0.625rem;
	letter-spacing: 0.178em;
}

.page-mv--business .page-mv__lead {
	margin-top: 1.515625rem;
	font-size: 0.8125rem;
	line-height: 1.8461538462;
	text-align: center;
}

.page-mv--business .page-mv__inner {
	padding-bottom: 8.46875rem;
}

/* ---- MVに重なる写真（712×353・左右19px） ---- */

.page-photo--overlap {
	margin-top: -5.28125rem;
}

.page-photo--overlap .page-photo__img {
	width: calc(100% - 1.1875rem);
	aspect-ratio: 712/353;
}

/* ---- 3つの事業 ---- */

.layout-section--biz {
	padding-top: 1.703125rem;
	padding-bottom: 5.9375rem;
}

/* デザイン（PSD）：750px時40px・行送り70px */

.layout-section--biz .sec-head__title {
	font-size: 1.25rem;
	line-height: 1.75;
}

.layout-section--biz .layout-section__body {
	margin-top: 3.609375rem;
}

.biz-cards {
	gap: 2.09375rem; /* デザインの写真は633px幅（インナーより10px内側） */
	padding-inline: 0.625rem;
}

.biz-cards__figure {
	aspect-ratio: 633/423;
}

.biz-cards__label {
	bottom: -0.9375rem;
	min-width: 11.34375rem;
	height: 2.28125rem; /* デザイン（PSD）：750px時32px */
	font-size: 1rem;
}

.biz-cards__title {
	margin-top: 2.25rem;
	font-size: 1.125rem;
	line-height: 1.5277777778;
}

.biz-cards__text {
	margin-top: 1.359375rem;
	font-size: 0.8125rem;
	line-height: 1.8461538462;
}

.biz-cards__logo {
	height: 3.84375rem; /* デザインは写真より左右9.5pxずつ内側 */
	margin-top: 1.78125rem;
	margin-inline: 0.59375rem;
}

.biz-cards__logo img {
	width: 8.0625rem;
}

/* ---- 全幅の写真（750×503） ---- */

/* パララックスの窓（中の画像は height:120% で動くので窓側に指定する） */

.page-photo--full.js-photo-parallax {
	aspect-ratio: 750/503;
}

/* ---- 施工管理の仕事とは? ---- */

/* 下の余白：最後のカードの本文下端 → フッターの緑まで 115.5（750px時231） */

.layout-section--work {
	padding-top: 2.90625rem;
	padding-bottom: 7.40625rem;
}

.layout-section--work .sec-head__lead {
	margin-top: 0.75rem;
	line-height: 1.6;
}

.layout-section--work .layout-section__body {
	margin-top: 3.09375rem;
}

.work-cards {
	grid-template-columns: 1fr;
	gap: 2.90625rem;
	padding-inline: 0.625rem;
}

.work-cards__figure {
	aspect-ratio: 633/423;
}

.work-cards__title {
	margin-top: 1.375rem;
	font-size: 1.125rem;
}

.work-cards__en {
	margin-top: 0.5rem; /* 750px時20px */
	font-size: 0.625rem;
}

.work-cards__text {
	margin-top: 1.1875rem;
	font-size: 0.8125rem;
	line-height: 1.8461538462;
}

/* ---- MV：社員のスライダー ---- */

/*
    デザインのSPは「PCのスライダー（720の箱）をまるごと0.6倍して42px下げた」配置。
    （頭の位置：PC 105/141/172… → SP 104.5/126.5/145… ＝ PC×0.6＋42 で全員一致）
    なので人物・吹き出しの値はすべてPCの0.6倍にしている。
      箱：42〜474（720×0.6＝432）／下の切り口：74×0.6＝44.4
      中央の人：PCと同じく --mv-person-pop で「必ず高さ402.6（671×0.6）」にそろえる。
      固定の1.2倍だと、元の切り抜きが大きい人ほど中央で大きくなり、
      中央の人の大きさが回るたびに変わってしまっていた。
    人の列はデザインで画面中央より14px右（中央の人 x113〜290.5）。
  */

.page-mv--workplace .page-mv__people {
	left: 0.875rem;
	height: 29.625rem;
	padding-top: 2.625rem;
	padding-bottom: 0;
	overflow: visible;
}

/* 左右の切り口は画面の外へ（14pxずらしたぶん） */

.page-mv--workplace .page-mv__people-slider {
	clip-path: inset(-100% -0.875rem 2.775rem -0.875rem);
}

.page-mv--workplace .page-mv__person {
	height: calc(var(--mv-person-h, 35rem) * 0.6);
	transform: translateY(calc(var(--mv-person-y, 0rem) * 0.6));
}

.page-mv--workplace .page-mv__people .swiper-slide-active .page-mv__person {
	transform: translateY(2.1rem) scale(var(--mv-person-pop, 1.2));
}

/*
    吹き出しはデザインどおり全員に出す（本体63px角＝PCの105×0.6）。
    文字の組み方をPCと変えないよう、PCと同じ大きさの吹き出しを0.6倍に縮めて置く。
    本体の上端はデザインの右どなりの人と同じ y145.5（スライドの下端から265.5）。
  */

.page-mv--workplace .page-mv__bubble {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 4;
	right: calc(74% - 0.1875rem);
	bottom: 16.40625rem;
	width: 7.1875rem;
	text-align: center;
	transform: scale(0.6);
	transform-origin: bottom right;
	transition: right 0.5s ease, bottom 0.5s ease, transform 0.5s ease;
}

/*
    中央の人の吹き出し（デザイン：本体102px角 x55.5〜158・y100.5〜203）。
    PCの 170px（1.619倍）×0.6＝0.971倍。
    右端は人の中心（x201.5）から43.5px左、下端はスライドの下端から271。
    拡大の軸が右下なので、画像の余白5px×0.971ぶんを引いている。
  */

.page-mv--workplace .page-mv__people .swiper-slide-active .page-mv__bubble {
	right: calc(50% + 2.415rem);
	bottom: 16.63375rem;
	width: 7.1875rem;
	transform: scale(0.9714);
}

/* ---- MV：文字は人物に重なる ---- */

.page-mv--workplace .page-mv__inner {
	margin-top: -9.9375rem;
	padding-top: 0;
	padding-bottom: 8.15625rem;
	text-align: center;
}

/* 見出しはデザイン750px時55px */

.page-mv--workplace .page-mv__title {
	margin-top: 1.375rem;
	font-size: 1.71875rem;
	line-height: 1.3482142857;
}

.page-mv--workplace .page-mv__en {
	margin-top: 1.015625rem;
	font-size: 0.9375rem;
	letter-spacing: 0.177em;
}

.page-mv--workplace .page-mv__lead {
	margin-top: 1.3125rem;
	font-size: 0.75rem;
	line-height: 1.8333333333;
	text-align: center;
}

/* ---- 社内制度・福利厚生 ---- */

.layout-section--benefits {
	padding-top: 7.96875rem;
}

.layout-section--benefits .sec-head__lead,
.layout-section--gallery .sec-head__lead {
	margin-top: 1.10625rem;
	line-height: 1.5161290323;
}

.benefits {
	gap: 0.53125rem;
}

/*
    デザインのSPは「アイコン左／見出し・英字が右」の横並び。
    本文はその下に全幅で入る。
  */

.benefits__item {
	display: grid;
	grid-template-columns: 6.84375rem 1fr;
	grid-template-rows: auto auto auto;
	align-items: center;
	padding: 1.59375rem 1.71875rem 2.0625rem;
}

.benefits__icon {
	grid-area: 1/1/2/2;
	align-items: center;
	height: 5.1875rem;
}

.benefits__head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	grid-area: 1/2/2/3;
}

.benefits__title {
	margin-top: 0;
	font-size: 1rem;
}

.benefits__en {
	margin-top: 0.515625rem;
	font-size: 0.625rem;
}

.benefits__lead {
	grid-area: 2/1/3/3;
	margin-top: 1.1875rem;
	font-size: 0.75rem;
	line-height: 1.7916666667;
}

.benefits__text {
	grid-area: 3/1/4/3;
	margin-top: 0;
	font-size: 0.75rem;
	line-height: 1.6666666667;
}

/* ---- フォトギャラリー ---- */

/* 下の余白：●の下端 → フッターの緑まで 116.5（750px時233） */

.layout-section--gallery {
	padding-top: 5.25rem;
	padding-bottom: 7.5rem;
}

.layout-section--gallery .layout-section__body {
	margin-top: 2.40625rem;
}

/* 写真はデザイン実測 673×441（ほぼ画面いっぱい） */

.gallery__slide {
	width: 21.03125rem;
}

.gallery__arrow {
	width: 1.25rem;
	height: 1.96875rem;
	margin-top: -0.984375rem;
}

/* 矢印は写真の左右端に少しはみ出す（デザイン実測：左端x=23・右端x=731／750px時） */

.gallery__arrow--prev {
	left: calc(50% - 11rem);
}

.gallery__arrow--next {
	right: calc(50% - 11.125rem);
}

.gallery__caption {
	margin-top: 0.9375rem;
	font-size: 0.75rem;
}

/*
    PSDの矢印レイヤーの実測（750px時）：ink 36×59・線の横幅14.1（＝線の太さ約9.6）。
    一辺s・線b の正方形を45度回すと 高さ s√2 なので s20.8。
    線は面積（187.8）から b5（＝2倍表示で10pxちょうど。4.8だと9pxに丸められて細くなる）。
  */

.gallery__arrow::before {
	width: 1.3rem;
	height: 1.3rem;
	margin-top: -0.65rem;
	border-top-width: 0.3125rem;
	border-right-width: 0.3125rem;
}

.gallery__arrow--prev::before {
	margin-left: -0.3125rem;
}

.gallery__arrow--next::before {
	margin-left: -0.9875rem;
}

/* ●はデザイン実測 16px・間隔30px（750px時） */

.gallery__pagination {
	gap: 0.4375rem;
	margin-top: 1.71875rem;
}

.gallery__pagination .swiper-pagination-bullet {
	width: 0.5rem;
	height: 0.5rem;
}

.iv-mv {
	height: 64.125rem;
	background-image: var(--grad-green);
}

.iv-mv__inner {
	padding-top: 7.4375rem;
	text-align: center;
}

.iv-mv__inner::before {
	content: none;
}

/* PSD（staff1_SP_260925）：見出し60px・英字30px・リード24px（750px時） */

.iv-mv__title {
	font-size: 1.875rem;
	line-height: 1;
}

.iv-mv__en {
	margin-top: 0.875rem;
	font-size: 0.9375rem;
}

/*
    デザインのテキスト枠はインナー（335px）より狭く、1行目が「…本音」で折り返す。
    同じ位置で折り返すよう、左右を9.5pxずつ詰める（1行25文字＝315pxが入る幅）。
  */

.iv-mv__lead {
	margin-top: 1.03125rem;
	padding-inline: 0.59375rem;
	font-size: 0.75rem;
	line-height: 1.8333333333;
}

/* 社員写真＋タブ（デザインの座標で絶対配置。横スクロールはしない） */

.iv-mv__members {
	position: absolute;
	top: 16.9375rem;
	left: 0;
	right: 0;
	height: 22.6875rem;
	margin-inline: 0;
	padding-inline: 0;
	overflow: visible;
}

.iv-mv__members-track {
	display: block;
	min-width: 0;
}

/*
    ページ下部の「他のメンバー」もMVと同じパーツ。MVでは絶対配置だが、ここでは流れの中に置く。
    高さはタブの下端まで（写真の上端161 + タブ73.5）。人物はその上にはみ出す。
    インナーの左右余白（20px）を打ち消して、MVと同じく画面の左端を基準にする。
  */

.iv-mv__members--others {
	position: relative;
	top: auto;
	height: 14.65625rem;
	margin-inline: -1.25rem;
}

.iv-mv__people {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 22.6875rem;
	aspect-ratio: auto;
	margin-top: 0;
	overflow: visible;
}

/*
    人物はタブの上端（枠の上から161px）で断ち切る（デザインどおり／PCと同じ考え方）。
    枠ごと切るとタブに重なるバッジ（.iv-mv__person-mark）まで切れるので、画像ごとに切る。
    切り口＝画像の上端から「161 − top」の位置なので、top は変数で持たせている。
  */

/*
    ホバーで上下するとき、top と切り口が同じ速さで動かないとタブとの間に隙間が開く
    （変数はそのままだと一瞬で切り替わる）。変数ごとアニメーションさせる（下の @property）。
  */

.iv-mv__person {
	position: absolute;
	height: auto;
	clip-path: inset(-50% -50% calc(100% - (10.0625rem - var(--iv-person-top))) -50%);
	transition: --iv-person-top 0.4s ease, left 0.4s ease, width 0.4s ease;
}

/*
    人物はPCとまったく同じ切り抜きを使う。
    位置・大きさは「PCでのタブとの位置関係」をSPのタブ幅（PC193.7 → SP106.5＝0.55倍）に
    そのまま縮めた値。アクティブ（is-current）の大きさもPCと同じ比率にしてある。
  */

.iv-mv__person--01 {
	--iv-person-top: 2.125rem;
	top: var(--iv-person-top);
	left: 0.84375rem;
	width: 7.375rem;
}

.iv-mv__person--02 {
	--iv-person-top: 1.9375rem;
	top: var(--iv-person-top);
	left: 8.8125rem;
	width: 5.59375rem;
}

.iv-mv__person--03 {
	--iv-person-top: 1.8125rem;
	top: var(--iv-person-top);
	left: 15.96875rem;
	width: 5.5625rem;
}

.iv-mv__person--01.is-current {
	--iv-person-top: 1.03125rem;
	top: var(--iv-person-top);
	left: -0.75rem;
	width: 8.78125rem;
}

.iv-mv__person--02.is-current {
	--iv-person-top: 0.9375rem;
	top: var(--iv-person-top);
	left: 8.5625rem;
	width: 6.28125rem;
}

.iv-mv__person--03.is-current {
	--iv-person-top: 0.71875rem;
	top: var(--iv-person-top);
	left: 15.1875rem;
	width: 6.625rem;
}

/*
    ホバー（マウスのある環境で画面が狭いとき）もPCと同じく、アクティブの位置・大きさへ
    そのまま上がっていく。共通のホバー指定は旧SPの % 座標なので、ここでSPの値に上書きする。
    1人目の left は通常時の中心（13.5＋118/2＝72.5）を保つ値（72.5−140.5/2＝2.25）。
  */

.iv-mv__tabs {
	position: absolute;
	top: 10.0625rem;
	left: 0;
	right: 0;
	z-index: 2;
	display: block;
}

.iv-mv__tab {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex: none;
	width: 6.65625rem;
	height: 4.59375rem;
	min-width: 0;
	padding: 0.625rem 0 0;
	text-align: center;
}

/* 現在のメンバーのタブだけ、下に吹き出しの先端（デザインは13×10） */

.iv-mv__tab.is-current::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -0.40625rem;
	border-top: 0.625rem solid var(--yellow);
	border-right: 0.40625rem solid transparent;
	border-left: 0.40625rem solid transparent;
}

.iv-mv__tab:nth-child(1) {
	left: 1.25rem;
}

.iv-mv__tab:nth-child(2) {
	left: 8.40625rem;
}

.iv-mv__tab:nth-child(3) {
	left: 15.5625rem;
}

/*
    MVのタブ（.iv-mv__tab）と下部の他メンバー（.iv-others__item）はデザイン上同じパーツ
    （staff1_SP_260925 で文字の大きさ・位置とも同一）。SPの文字はここで両方まとめて指定する。
    PSD：INTERVIEW. 14px・番号はその180%／名前30px／年代・部署18px（750px時）
  */

.iv-mv__tab-no,
.iv-others__no {
	font-size: 0.4375rem;
}

.iv-mv__tab-num,
.iv-others__no-num {
	font-size: 1.8em;
}

.iv-mv__tab-name,
.iv-others__name {
	margin-top: 0.4375rem;
	font-size: 0.9375rem;
}

/*
    年代・部署は全タブ同じ大きさ。いちばん長い「30代 / 建築・住宅・土木全般」が
    タブ幅（106.5px）の9割に収まる 7.6px（750px時15.2px）にそろえる。
  */

.iv-mv__tab-meta,
.iv-others__meta--sp {
	margin-top: 0.4375rem;
	font-size: 0.475rem;
	white-space: nowrap;
}

/* メイン写真はタブの下に重なって入る */

.iv-mv__figure {
	position: absolute;
	top: 30.625rem;
	left: 0.5625rem;
	right: 0.5625rem;
	z-index: 1;
	width: auto;
	margin: 0;
}

.iv-mv__img {
	aspect-ratio: 357/236.5;
}

/* 写真を暗くする膜はSPでは使わない（デザインは素の写真） */

.iv-mv__figure::after {
	content: none;
}

/* キャプションは写真の下に流す */

.iv-mv__caption,
.iv-mv__caption--left {
	position: static;
	width: auto;
	margin-top: 1.34375rem;
	padding: 0 1.15625rem;
	text-align: left;
}

.iv-mv__caption-no,
.iv-mv__caption-title,
.iv-mv__caption-foot {
	position: relative;
	z-index: 1;
}

/* PSD（staff1_SP_260925）：750px時24px・番号はその180% */

.iv-mv__caption-no {
	font-size: 0.75rem;
}

.iv-mv__caption-num {
	font-size: 1.8em;
}

.iv-mv__caption-title {
	margin-top: 0.625rem;
	width: auto;
	font-size: 1.25rem;
	line-height: 1.5;
}

.iv-mv__caption-foot {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
	margin-top: 0.96875rem;
}

/* デザイン750px時60px */

.iv-mv__caption-name {
	font-size: 1.875rem;
}

.iv-mv__caption-meta {
	margin-top: -0.25rem;
	font-size: 0.75rem;
	line-height: 1.8333333333;
	text-align: left;
}

/* 丸バッジ（施工管理／未経験）。写真の枠（top 490 / left 9）を基準にした位置 */

.iv-mv__caption-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute; /* デザイン：円は90px・写真の枠（top 490 / left 9）から right 259.5 / top 217 */
	top: 13.5625rem;
	left: 16.21875rem; /* 写真より前・見出しより後ろ */
	z-index: 0;
	width: 5.625rem;
	height: 5.625rem;
	border-radius: 50%;
	background-color: var(--pink-strong);
	color: var(--white);
	text-align: center;
}

.iv-mv__caption-mark span { /* PSD：750px時29.4px・行送り37.5px */
	font-size: 0.91875rem;
	font-weight: var(--bold);
	line-height: 1.2755102041;
	transform: rotate(24.8deg);
}

/* ---- Q&A（デザイン staff1_SP_260925） ---- */

/* セクション上端から吹き出しまで44px（デザイン実測） */

.qa {
	padding-top: 2.75rem;
}

/*
    SPは「質問→本文→その行の写真→次の質問」の順（デザイン staff1_SP_260925）。
    PC用の2カラム（本文列／写真列）を display: contents でほどいて並べ直す。
  */

.qa__group {
	gap: 0;
}

.qa__col {
	display: contents;
}

.qa__item {
	order: 1;
}

.qa__item + .qa__item {
	order: 3; /* 写真の下端から次の吹き出しまで53.5px（デザイン実測） */
	margin-top: 3.34375rem;
}

/* 写真はそのグループの1つ目の本文の下にまとめて入る */

.qa__img {
	order: 2; /* 本文より10.5px内側（デザインは375px時で314px幅） */
	width: calc(100% - 1.3125rem);
	margin-top: 2.8125rem;
	margin-inline: auto;
}

/*
    AVIF配信（func-avif.php）で img が <picture> に包まれるので、
    img どうしの隣接だけでなく picture どうしの隣接でも拾う。
  */

/*
    2枚目以降の写真は前の写真の4px下（デザイン実測：750px時8px）。
    比率はデザイン（staff1〜3_SP_260925）どれも2枚目は横長 316×209。
    PCは2つ目のまとまりが正方形なので、SPだけ横長にそろえる。
  */

.qa__img + .qa__img,
picture + picture > .qa__img {
	margin-top: 0.25rem;
	aspect-ratio: 316/209;
}

/* 下の余白は次のセクション側で持つ */

.qa {
	padding-bottom: 0;
}

.flow { /* 本文の下端から緑の帯まで53.5px（デザイン実測） */
	margin-top: 3.34375rem; /* 帯の上端から見出しまで105px（750px時） */
	padding-top: 2.8125rem; /* 帯の下端は最後の本文から320px下。写真がこの中に食い込む（デザイン実測） */
	padding-bottom: 10rem;
}

/* 帯の下端にまたがる写真（デザインは710×355＝2:1、左右は10pxずつ外側） */

.iv-photo {
	margin-top: -5.40625rem;
	margin-bottom: 0.3125rem;
}

.iv-photo .page-photo__img {
	width: calc(100% - 1.25rem);
	aspect-ratio: 2/1;
}

/* ---- 最後のメッセージ（デザイン staff1_SP_260925 実測） ---- */

.iv-msg { /* 本文の下端から背景写真まで68px（デザイン実測） */
	margin-top: 4.25rem; /*
      SPは「上が写真・下が緑」で、その境目にカードがまたがる。
      写真の上端からカードの上端まで710px、カードの下端から緑の下端まで143px（750px時）。
    */
	background-color: var(--green);
	padding-block: 22.1875rem 4.46875rem;
}

/* 写真は上だけ（デザインの縦長トリミング＝750×883）。下端は緑へフェードさせる */

.iv-msg__bg {
	inset: 0 0 auto;
	height: 27.59375rem;
	-webkit-mask-image: linear-gradient(to bottom, #000 22.75rem, transparent 27.59375rem);
	mask-image: linear-gradient(to bottom, #000 22.75rem, transparent 27.59375rem);
}

/* デザインは写真に暗い膜を掛けていない */

.iv-msg::after {
	content: none;
}

.iv-msg__card { /* デザインの薄いミントの面（半透明ではない） */
	border-radius: 0.625rem; /*
      左右は22.5px。30pxだと「「建設業だから仕方ない」と、」（375px画面で281px）が
      カードの内側（275px）に入らず、「と、」だけ次の行に落ちていた。
    */
	padding: 2.03125rem 1.40625rem 2.84375rem;
	background-color: #e6f6ee;
}

/* 吹き出しは文字なりの幅（デザインは301.5×54.5） */

.qa__question {
	align-self: flex-start;
	width: -moz-fit-content;
	width: fit-content; /* デザイン実測（750px時）：左26.5 / Qと本文の間24 / 右52.5 / 上下17 */
	gap: 0.75rem;
	padding: 0.53125rem 1.640625rem 0.53125rem 0.828125rem;
}

/* Q&Aの吹き出しは本文より10px左に出る（デザイン staff1_SP_260925） */

.qa__item > .qa__question {
	margin-left: -0.625rem;
}

.qa__q {
	width: 1.8125rem;
	height: 1.8125rem;
	font-size: 1.5rem;
}

.qa__question-text {
	font-size: 0.75rem;
}

.qa__title { /* デザイン：本文まわりは吹き出しより10px内側。見出しは右を詰める */
	margin-top: 1.78125rem;
	padding-inline: 0.625rem 0;
	font-size: 1.5rem;
	line-height: 1.625;
}

.qa__text {
	margin-top: 0.9375rem;
	padding-inline: 0.625rem;
	font-size: 0.8125rem;
	line-height: 1.8461538462;
}

/* ---- 他のメンバー（SPはMVのタブと同じ横並び） ---- */

.iv-others { /* 人物の頭がメッセージの背景に少し重なる（デザイン staff1_SP_260925） */
	margin-top: -5.8125rem;
	padding-block: 3rem 6.59375rem;
}

/* SPはMVと同じパーツ（.iv-mv__members--others）を出すので、PC用の一覧は隠す */

.iv-others__list {
	display: none;
}

.iv-others__item {
	position: absolute;
	top: 10.0625rem; /* 人物をカードの背面に置くための重なりの基準 */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 6.65625rem;
	height: 4.59375rem;
	min-height: 0;
	padding: 0.625rem 0 0;
	border-radius: 0.25rem;
}

.iv-others__item:nth-child(1) {
	left: 0rem;
}

.iv-others__item:nth-child(2) {
	left: 7.15625rem;
}

.iv-others__item:nth-child(3) {
	left: 14.3125rem;
}

/* 切り抜きはSP用のものを使う */

.iv-others__person--pc {
	display: none;
}

.iv-others__person--sp {
	position: absolute;
	left: auto; /* カードの背面に回す（カードは背景が塗られている） */
	z-index: -1;
	height: auto;
	max-width: none;
	object-fit: fill;
	transform: none;
}

.iv-others__item:nth-child(1) .iv-others__person--sp {
	top: -9.90625rem;
	left: -0.1875rem;
	width: 6.84375rem;
	clip-path: inset(0 0 9.78125rem 0);
}

.iv-others__item:nth-child(2) .iv-others__person--sp {
	top: -8.8125rem;
	left: 0.28125rem;
	width: 7.1875rem;
	clip-path: inset(0 0 3.21875rem 0);
}

.iv-others__item:nth-child(3) .iv-others__person--sp {
	top: -8.75rem;
	left: -0.1875rem;
	width: 5.875rem;
	clip-path: inset(0 0 3.59375rem 0);
}

.iv-others__mark {
	top: -3rem;
	left: -1.0625rem;
	z-index: 5;
	width: 3.875rem;
	height: 3.875rem;
	font-size: 0.625rem;
	line-height: 1.28; /* MVのバッジと同じく逆斜め */
	transform: rotate(-24.8deg);
}

/* 文字の大きさはMVのタブと共通（.iv-mv__tab-no などと同じルールで指定） */

/* SPはMVのタブと同じ1行表記に差し替える */

.iv-others__meta {
	display: none;
}

.iv-others__meta--sp {
	display: block;
}

/* ---- 最後のメッセージ：吹き出しの位置（デザイン staff1_SP_260925） ---- */

.iv-msg__question {
	position: absolute;
	top: -1.4375rem; /* カード左端から25px内側 */
	left: 1.5625rem; /* この吹き出しだけ右の余白が広い（デザイン実測） */
	padding-right: 2.25rem;
	margin-bottom: 0;
}

/* ---- 1日の仕事の流れ（SPは縦並び。デザイン staff1_SP_260925） ---- */

/* デザイン750px時40px */

.flow__title {
	font-size: 1.25rem;
}

.flow__lead { /* デザイン実測：見出しの下端から40px（750px時） */
	margin-top: 0.375rem; /* デザイン750px時26px（行送りは40のまま） */
	font-size: 0.8125rem;
	line-height: 1.5384615385;
}

.flow__scroll { /* デザイン実測：リードの下端から時刻まで98px（750px時） */
	margin-top: 2.71875rem;
	padding-inline: 0.5625rem;
	overflow-x: visible;
}

.flow__list {
	display: block;
	width: auto;
}

.flow__item {
	position: relative;
	flex: none; /* 丸写真112 ＋ すき間22.5 */
	padding-top: 0;
	padding-left: 8.40625rem;
	min-height: 7rem;
	text-align: left;
}

.flow__item + .flow__item {
	margin-top: 2.8125rem;
}

/* 丸と丸をつなぐ縦の線（丸の中心を通す） */

.flow__item::before {
	top: 3.5rem;
	bottom: -2.8125rem;
	left: 3.40625rem;
	right: auto;
	width: 0.21875rem;
	height: auto;
}

.flow__item:last-child::before {
	content: none;
}

/* SPは黄色いリングは使わない */

.flow__dot {
	display: none;
}

.flow__time { /* デザインは黄色 */
	color: var(--yellow); /* デザイン実測：750px時で38.4px（数字の高さ32px） */
	font-size: 1.2rem;
}

.flow__card {
	display: block;
	margin-top: 0;
	padding-right: 0;
}

.flow__figure {
	position: absolute;
	top: 0;
	left: 0;
	width: 7rem;
	height: 7rem; /* PCと同じく白い丸枠は残す */
	border-width: 0.25rem;
}

.flow__item-title { /* 時刻の文字を大きくした分だけ詰める（デザイン実測：時刻の下端から26px） */
	margin-top: 0.40625rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.flow__text {
	margin-top: 0.5625rem;
	font-size: 0.6875rem;
	line-height: 1.5227272727;
}

/* ---- 最後のメッセージ ---- */

.iv-msg__title {
	font-size: 1.375rem; /* デザインの行送りは82px（750px時） */
	line-height: 1.8636363636;
}

.iv-msg__text { /* 見出しの下から12px、行送りは48px（750px時） */
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.8461538462;
}

.iv-msg__cta { /* デザインは234×60（ページ下部固定のボタンと同じ大きさ） */
	max-width: 14.625rem;
	height: 3.75rem;
	margin-top: 1.6875rem;
	border-radius: 1.875rem;
	font-size: 0.95625rem;
}

/* タブの人物に付く小さいバッジ（タブや人物より前面・文字は斜め） */

.iv-mv__person-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 7.0625rem;
	left: 0.1875rem;
	z-index: 5;
	width: 3.875rem;
	height: 3.875rem;
	border-radius: 50%;
	background-color: var(--pink-strong);
	font-size: 0.625rem;
	font-weight: var(--bold);
	font-family: var(--base-font);
	color: var(--white);
	letter-spacing: 0.05em;
	line-height: 1.28;
	text-align: center;
}

.iv-mv__person-mark span {
	transform: rotate(-24.8deg);
}

.numbers__work-item:nth-child(3) .numbers__work-icon,
.numbers__work-item:nth-child(4) .numbers__work-icon {
	height: 5.21875rem;
}

.numbers__work-item:nth-child(3) .numbers__work-icon img {
	margin-top: 0.3125rem;
}

.numbers__work-item:nth-child(5) .numbers__work-icon {
	height: 4.5rem;
}

.interview__card-person-img--pc {
	position: absolute;
	top: 0.03125rem;
	left: 8.5625rem;
	width: 12.75rem;
	max-width: none;
	clip-path: inset(0 0 5.1875rem 0);
}

.interview__card:nth-child(2) .interview__card-person-img--pc {
	top: 0.21875rem;
	left: 9.875rem;
	width: 9.6875rem;
	clip-path: inset(0 0 5.53125rem 0);
}

.interview__card:nth-child(3) .interview__card-person-img--pc {
	top: -0.0625rem;
	left: 9.28125rem;
	width: 9.59375rem;
	clip-path: inset(0 0 2.8125rem 0);
}

.is-ios .entry__title {
	font-size: 1.8125rem;
}

}

@media screen and (max-width: 767px) and (any-hover: hover) {

.iv-mv__members .iv-mv__members-track:has(.iv-mv__tab:nth-child(1):hover) .iv-mv__person--01:not(.is-current):not(.iv-mv__person--sp) {
	--iv-person-top: 1.03125rem;
	top: var(--iv-person-top);
	left: 0.140625rem;
	width: 8.78125rem;
}

.iv-mv__members .iv-mv__members-track:has(.iv-mv__tab:nth-child(2):hover) .iv-mv__person--02:not(.is-current):not(.iv-mv__person--sp) {
	--iv-person-top: 0.9375rem;
	top: var(--iv-person-top);
	left: 8.5625rem;
	width: 6.28125rem;
}

.iv-mv__members .iv-mv__members-track:has(.iv-mv__tab:nth-child(3):hover) .iv-mv__person--03:not(.is-current):not(.iv-mv__person--sp) {
	--iv-person-top: 0.71875rem;
	top: var(--iv-person-top);
	left: 15.1875rem;
	width: 6.625rem;
}

}

@media screen and (max-width: 700px) {

.u-sp700 {
	display: block;
}

}

@media screen and (max-width: 650px) {

.u-sp650 {
	display: block;
}

}

@media screen and (max-width: 600px) {

.u-sp600 {
	display: block;
}

}

@media screen and (max-width: 550px) {

.u-sp550 {
	display: block;
}

}

@media screen and (max-width: 500px) {

.u-sp500 {
	display: block;
}

.benefits__lead br {
	display: block;
}

}

@media screen and (max-width: 450px) {

.u-sp450 {
	display: block;
}

}

@media screen and (max-width: 400px) {

.u-sp400 {
	display: block;
}

}

@keyframes marquee {

from {
	transform: translate3d(0, 0, 0);
}

to {
	transform: translate3d(-100%, 0, 0);
}

}

@keyframes mv-wipe {

from {
	clip-path: inset(-20% 100% -20% 0);
}

to {
	clip-path: inset(-20% 0 -20% 0);
}

}