/*
【編集ガイド／目次】
サイト独自のCSSはこのgmj.cssだけ。HTML・JS・参照元CSSは今回変更していません。
画面上の名称で検索し、「最終指定」から編集箇所を確認してください。

01｜デザイン設定：全体色・アクセント・ヘッダー高さ → :root
02｜基本設定：背景・本文・操作要素
03｜共通レイアウト：中央480px → .site-wrapper、通常画面 → .swipe-section、下部ナビ → .page-controls
04｜共通コンポーネント：見出し・本文・写真・弧・重なり表現
05｜ヘッダー：ロゴ → .brand、ボタン余白 → .header-actions>.header-cta
06｜動画：#test-video / .test-video-section video

【画面順の編集索引】
07-01｜FV・コンセプト：#concept → 「FV：重なりの最終指定」
07-02｜Message・会社からのメッセージ：#message → 「Message：写真との重なり」
07-03｜Our Work・仕事内容：#work → 「Our Work：写真との重なり」、本文は.roles
07-04｜Learning・未経験からの教育体制：#training → .feature / .type-overlap / 高い画面
07-05｜Your Career・成長と評価：#growth → .photo-overlap / .career-emphasis
07-06｜Possibilities・収入と将来性：#income → .income-number / 中央揃えの最終指定
07-07｜Work & Life・働きやすさ：#life → .feature / .type-overlap / 高さ621〜800px
07-08｜Craftsmanship・仕事と会社の強み：#craft → 共通.photo-overlap、本文.prose
07-09｜Your Passion・求める人物像：#person → .passion-list / .passion-frame / .type-overlap
07-10｜クロージング：#closing → 「写真と英字の重なりの最終指定」
07-11｜Company・会社概要：#company → 「会社概要のカプセル行」、写真は.photo-overlap
08｜募集要項：#requirements / #duties / #schedule / #benefits → .recruitment-accordion
09｜エントリー：#entry / #entry-form / #entry-review → 入力欄・送信ボタン
10｜フッター：.gmj-footer → ロゴ本体の中央配置
11｜PC専用UI：.desktop-side / PC背景画像（幅1024px以上）
12｜アニメーション・状態制御：--arc-reveal / .bounded-scroll / #main
13｜アクセシビリティ：[hidden] / :focus-visible / .sr-only / prefers-reduced-motion
R01〜R03｜複数セクション共通の高さ別調整（原位置を維持）

【よくある修正】
・見出しを写真に重ねる位置 → 04の.photo-overlap、MessageとOur Workは各個別指定
・フォームの項目間隔 → 09の#entry-formのgap
・募集要項の枠／内側余白 → 08の.recruitment-accordion / .accordion-body
・写真のトリミング → object-position（画像URLはHTML）
・基本フォント → 参照元index.Dd0p71ka.cssの--font-family-*を利用。独自変更はこのファイルで慎重に上書き

【読み込み順・変更時の注意】
1. ../external/fonts.googleapis.com/6a289e7641c7a7c6.css：ローカル化したフォント定義
2. index.CAJQywOA.css：参照元から取得した生成CSS
3. index.Dd0p71ka.css：参照元の基礎・フォント変数・ボタン等の生成CSS
4. gmj.css：GMJ独自の変更（このファイル）
参照元2ファイルはreference.jsのボタン表現等にも関係するため統合しません。
CSSは元と同じディレクトリに置き、画像・フォントの相対URLを維持してください。

【適用順を守るための構成】
索引はHTMLの表示順。実コードは「基礎 → 画面高さ別 → 個別の最終指定」の元の順序を維持しています。
複数セクションの結合セレクタや重なるメディア条件は、無理に分解・移動していません。
同名セレクタを見つけたら後続の個別・レスポンシブ指定も確認し、適切な既存ブロックを直接編集してください。
末尾への同一指定の追記、数値の一括置換、!importantの一括削除は避けてください。
今回の整理はコメントと整形のみ。宣言・セレクタ・条件・URL・詳細度・適用順は維持しています。
JSはopacity、--arc-reveal、hidden属性、bounded-scrollクラスを操作します。
スクロールは#mainとnavigation.js、登場効果はmotion.js / GSAPが担当します。
*/

/* ==================================================
01｜デザイン設定：全体の色・基準寸法
対象：:root
編集箇所：本文色 → --color-base、アクセント → --accent。
--site-width はPC左右UIの計算用。中央幅は03と05・下部ナビにも480pxの指定あり。
--header-height はヘッダーと画面高さに連動。高さ620px以下では60pxへ上書き。
--page-height は通常セクションの高さ。フォームや募集要項は後段で内容高へ変更。
--color-black / --color-white / --color-snow / --color-bg と --ease-quantum系は参照元CSSとの互換設定。
フォント変数は先に読み込む index.Dd0p71ka.css に定義済み。
--font-family-base：BIZ UDPMincho（和文）、--font-family-imbue：Imbue（大きな英字・数字）、
--font-family-noto-sans：Noto Sans（ラベル・フォーム）。値や単位の共通化は行っていない。
================================================== */
:root {
  --site-width:480px;
  --header-height:72px;
  --color-black:#010327;
  --color-black-rgb:1 3 39;
  --color-base:#010327;
  --color-white:#fff;
  --color-snow:#fff;
  --color-bg:#fff;
  --accent:#00178f;
  --page-height:calc(100dvh - var(--header-height));
  --ease-quantum:cubic-bezier(.42,.1,0,1);
  --ease-quantum-out:cubic-bezier(.15,.32,0,1);
  font-size:clamp(8px,2.5vw,10px);
}

/* ==================================================
02｜基本設定：ページ背景・スクロールの初期値
対象：html
編集箇所：画面外側の背景色。
注意：PC背景画像は「11｜PC専用UI：背景画像」、最終スクロール制御は「12｜スクロール領域」。
================================================== */
html {
  scroll-snap-type:none;
  scroll-behavior:auto;
  overflow-anchor:none;
  scroll-padding-top:var(--header-height);
  background:#e9eaf0;
}

body {
  margin:0;
  padding-top:var(--header-height);
  background:transparent;
  color:var(--color-base);
  font-size:1.5rem;
  line-height:1.85;
  overflow-x:clip;
}

/* ==================================================
13｜アクセシビリティ：フォーカス・非表示の基礎
対象：button,a,input,select,textarea
続く :focus-visible はキーボード操作時の枠。
[hidden] の !important はフォーム確認画面と動画中の下部ナビの非表示に必要。削除しない。
================================================== */
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}

button,a {
  cursor:pointer;
}

button {
  font:inherit;
}

button:disabled {
  opacity:.25;
  cursor:default;
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}

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

button[hidden],[hidden] {
  display:none!important;
}

/* ==================================================
03｜共通レイアウト：中央480pxのサイト領域
対象：.site-wrapper
編集箇所：最大幅 → max-width。
PCでもモバイル構造を維持。幅変更時はヘッダー・下部ナビ・--site-widthとの整合が必要。
================================================== */
.site-wrapper {
  width:100%;
  max-width:480px;
  margin:0 auto;
  background:#fff;
  position:relative;
}

/* ==================================================
05｜ヘッダー：ロゴ・募集要項・エントリー
対象：.gmj-header
編集箇所：外側余白 → .gmj-header、ロゴ → .brand。
ボタン内側余白 → .header-actions>.header-cta の padding。
幅360px以下・高さ620px以下の指定も検索して確認する。
================================================== */
.gmj-header {
  position:fixed;
  z-index:1000;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  height:var(--header-height);
  padding:20px 30px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand {
  display:block;
  text-align:left;
  width:118px;
  max-width:calc(100% - 155px);
  flex:0 1 118px;
  line-height:1;
}

.brand img {
  width:100%;
}

.brand span {
  display:block;
  font-family:var(--font-family-noto-sans);
  font-size:8px;
  letter-spacing:.13em;
  margin-top:5px;
}

.header-actions {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  flex-shrink:0;
}

.header-actions>.header-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  padding:8px 13px;
  width:auto;
  height:auto;
  box-sizing:border-box;
  flex:0 0 auto;
  white-space:nowrap;
  margin:0;
  line-height:1;
}

.header-cta .c-button-text,.side-cta .c-button-text {
  font:inherit;
}

.header-cta .c-button-bg,.side-cta .c-button-bg {
  background:var(--color-base);
}

/* ==================================================
11｜PC専用UI：左右のロゴとCTA
対象：.desktop-side
幅1024px以上で表示。中央コンテンツの左右の余白を基準に固定配置。
ロゴ幅 → .desktop-logo img、ボタン間隔 → .desktop-actions、高さ → .side-cta。
既存の適用順を守るため、このメディアクエリは元の位置に残している。
================================================== */
.desktop-side {
  display:none;
}

@media(min-width:1024px) {
  .desktop-side {
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    width:calc((100% - var(--site-width))/2);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:800;
  }

  .desktop-logo {
    left:0;
  }

  .desktop-logo img {
    width:153.4px;
    max-width:calc(100% - 48px);
    height:auto;
  }

  .desktop-actions {
    right:0;
    flex-direction:column;
    gap:14px;
  }

  .desktop-actions>.side-cta {
    width:225px;
    max-width:calc(100% - 40px);
    min-height:69px;
    padding:18.5px 30px;
    justify-content:center;
    font-size:16px;
    white-space:nowrap;
  }

}

/* ==================================================
03｜共通レイアウト：通常セクション
対象：.swipe-section
編集箇所：セクション余白 → padding、要素間隔 → .screen-content の gap。
後段の画面高さ別指定と個別指定が優先される。募集要項・エントリーには別の高さ指定あり。
================================================== */
.swipe-section {
  height:var(--page-height);
  min-height:var(--page-height);
  max-height:var(--page-height);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  width:100%;
  padding:24px 30px 52px;
  position:relative;
  display:flex;
  align-items:center;
}

.screen-content {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:2.2rem;
  margin:auto 0;
  position:relative;
  min-width:0;
}

/* ==================================================
04｜共通コンポーネント：見出しと本文
対象：.section-heading
英字 → .eyebrow、日本語 → h1 / h2、本文 → .prose。
重なりの最終表示は「04｜共通コンポーネント：重なり表現」を参照。
本文の冒頭線は .prose p:first-child:before。収入セクションでは後段で非表示。
================================================== */
.section-heading {
  text-align:center;
  line-height:1.3;
}

.eyebrow {
  font-family:var(--font-family-imbue);
  font-size:5.6rem;
  font-weight:400;
  line-height:.95;
  letter-spacing:-.02em;
  margin-bottom:1.8rem;
}

.section-heading h2,.hero-heading h1,.closing-copy {
  font-family:var(--font-family-base);
  font-size:3.2rem;
  line-height:1.5;
  font-weight:400;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.section-heading h2 {
  text-align:right;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:rgb(1 3 39 / 40%);
}

.prose {
  font-size:1.5rem;
  line-height:1.85;
  text-align:left;
  letter-spacing:.015em;
}

.prose p+p {
  margin-top:1.3em;
}

.prose p:first-child {
  text-indent:4.6rem;
  position:relative;
}

.prose p:first-child:before {
  content:"";
  height:1px;
  width:3.7rem;
  position:absolute;
  left:0;
  top:.9em;
  background:currentColor;
}

/* ==================================================
07-01｜FV・コンセプト：基礎指定
対象：.hero-heading
対象画面：本気になる場所を、変えればいい（#concept）。
本文 → .concept .prose、家族も仕事も本気 → .hero-motto。
大きなGMJは「07-01｜FV：大きな英字」と「07-01｜FV：重なりの最終指定」も確認。
================================================== */
.hero-heading {
  margin-top:1rem;
}

.hero-heading .eyebrow {
  font-size:3.2rem;
  text-align:left;
  margin-bottom:3.2rem;
}

.hero-heading h1 {
  text-align:right;
  font-size:3.5rem;
  line-height:1.6;
}

.hero-heading h1 span,.closing-copy span {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}

.hero-motto {
  font-size:2rem;
  text-align:right;
  line-height:1.5;
}

.concept .prose {
  margin-top:1.4rem;
}

.concept .prose p:first-child {
  text-indent:0;
}

.concept .prose p:first-child:before {
  display:none;
}

.hero-signature {
  font:2rem/1.15 var(--font-family-imbue);
  text-align:right;
  margin-top:.5rem;
}

.gmj-cta {
  align-self:center;
  margin-top:.6rem;
}

.gmj-cta .c-button-text {
  font-size:3.2rem;
}

.gmj-cta .c-button-bg {
  background:var(--color-base);
}

/* ==================================================
04｜共通コンポーネント：写真の形・切り抜き
対象：.section-photo
編集箇所：大きさ → width / height、切り抜き位置 → object-position。
.oval は横長、.circle は円形の基礎。現在は個別の重なり指定が後段で上書きする。
画像URLはHTML。装飾・フォントの相対パスを壊さないためCSSの配置は変更しない。
================================================== */
.section-photo {
  align-self:center;
  width:min(68%,22rem);
  height:min(24dvh,19rem);
  flex-shrink:0;
  margin:0;
}

.section-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.section-photo.oval {
  width:100%;
  height:min(22dvh,17rem);
}

.section-photo.oval img {
  border-radius:9999px;
}

.with-photo .screen-content {
  gap:1.8rem;
}

#message .section-photo img {
  object-position:50% 39%;
}

#work .section-photo img {
  object-position:46% 60%;
}

#company .section-photo img {
  object-position:50% 55%;
}

/* ==================================================
07-03｜Our Work：仕事内容の本文と職種リスト
対象：.short-lead
編集箇所：導入文 → .short-lead、職種説明 → .roles。
写真・見出しの最終表示は「07-03｜Our Work：写真との重なり」を参照。
================================================== */
.short-lead {
  font-size:1.5rem;
  text-align:center;
  line-height:1.7;
}

.roles {
  font-size:1.4rem;
  line-height:1.65;
}

.roles>div+div {
  margin-top:1.2rem;
}

.roles dt {
  font-size:1.8rem;
}

.roles dd {
  font-size:1.4rem;
  margin-top:.3rem;
}

.roles dt:before {
  content:"—";
  margin-right:.7rem;
}

/* ==================================================
04｜共通コンポーネント：上下の弧と端の点
対象：.bracket
編集箇所：内側余白 → padding、弧の高さ → 疑似要素のheight。
SVGは ../images/common/ 内。motion.js が --arc-reveal を操作する。
休日一覧ではこの装飾を使用せず、アコーディオンの枠のみを表示。
================================================== */
.bracket {
  position:relative;
  padding:4.2rem 0;
}

.bracket:before,.bracket:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2.5rem;
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  pointer-events:none;
}

.bracket:before {
  top:0;
  background-image:url('../images/common/paren_sp_m_t.svg');
}

.bracket:after {
  bottom:0;
  background-image:url('../images/common/paren_sp_m_b.svg');
}

/* ==================================================
07-04・07-07｜教育体制・働きやすさ：大きな英字
対象：.feature
#training と #life の共通表現。英字 → .feature-word、補足 → span。
教育体制の高い画面用指定は「07-04｜教育体制：高い画面」を参照。
================================================== */
.feature {
  text-align:center;
  margin-block:.5rem;
}

.feature-label {
  font-size:1.3rem;
  margin-bottom:1rem;
}

.feature-word {
  font:6rem/1 var(--font-family-imbue);
}

.feature-word span {
  display:block;
  font:1.4rem/1.5 var(--font-family-base);
  margin-top:1.2rem;
}

.statement {
  font-size:1.8rem;
  text-align:center;
  line-height:1.9;
}

/* ==================================================
07-06｜Possibilities：収入と将来性の基礎
対象：.income-feature
金額のサイズ → .income-number、単位 → span、まとまりの間隔 → gap。
中央揃えの最終指定は「07-06｜収入と将来性：中央揃え」。
================================================== */
.income-feature {
  display:flex;
  flex-direction:column;
  gap:1.3rem;
  text-align:center;
  padding-block:3.6rem;
}

.income-row>p:first-child {
  font-size:1.2rem;
}

.income-number {
  font:8rem/1 var(--font-family-imbue);
  letter-spacing:-.04em;
}

.income-number span {
  font:2rem/1 var(--font-family-base);
  margin-left:.7rem;
}

.caption {
  font:1.15rem/1.65 var(--font-family-noto-sans);
  color:#4e5065;
}

/* ==================================================
07-09｜Your Passion：求める人物像
対象：.passion-list
編集箇所：項目間隔 → gap、箇条書き → li と疑似要素。
左右の弧は .arc-sides / .passion-frame。見出しは共通 .type-overlap。
================================================== */
.passion-list {
  display:grid;
  gap:2rem;
  font-size:1.6rem;
}

.passion-list li {
  position:relative;
  padding-left:1em;
}

.passion-list li:before {
  content:"・";
  position:absolute;
  left:0;
}

.display-word {
  font:9rem/.83 var(--font-family-imbue);
  letter-spacing:-.035em;
}

/* ==================================================
07-10｜クロージング：基礎指定
対象：.closing .screen-content
最終の写真・英字・コピー配置は「07-10｜クロージング：写真と英字の重なり」。
ここは基礎値。後段の画面高さ別指定との順序を維持する。
================================================== */
.closing .screen-content {
  gap:3rem;
}

.closing-copy {
  text-align:right;
  margin-top:1rem;
}

.closing .section-photo {
  height:min(24dvh,18rem);
}

.text-link {
  font-size:1.3rem;
  text-align:center;
  text-decoration:underline;
  text-underline-offset:5px;
  align-self:center;
  padding:8px 0;
}

.text-link span {
  margin-left:10px;
}

/* ==================================================
08｜会社概要・募集要項：情報表の基礎
対象：.facts
項目名 → dt、内容 → dd、行の余白 → .facts>div。
会社概要は #company .facts、募集要項は .accordion-body .facts が後段で上書き。
================================================== */
.facts {
  font-size:1.5rem;
  line-height:1.7;
}

.facts>div {
  display:grid;
  grid-template-columns:6.5em 1fr;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid rgb(1 3 39 / 20%);
}

.facts dt {
  font-family:var(--font-family-noto-sans);
  font-size:1.25rem;
  font-weight:500;
}

.facts dd {
  overflow-wrap:anywhere;
}

.facts a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.facts.compact {
  font-size:1.4rem;
}

.section-note {
  text-align:center;
  font-size:1.3rem;
  letter-spacing:.1em;
  margin-top:-1rem;
}

.details-screen .eyebrow {
  font-size:5rem;
}

.details-screen .screen-content {
  gap:1.7rem;
}

.job-details {
  font-size:1.25rem;
  line-height:1.75;
}

.job-details h3 {
  font-size:1.5rem;
  margin-bottom:.6rem;
}

.job-details li:before,.simple-list li:before,.benefits-list li:before {
  content:"・";
}

.simple-list {
  font-size:1.6rem;
  line-height:2.1;
}

.leave-block {
  padding-inline:1rem;
}

.benefits-list {
  font-size:1.5rem;
  line-height:1.8;
}

.benefits-list>div {
  padding:1.8rem 0;
  border-bottom:1px solid rgb(1 3 39 / 25%);
}

.benefits-list dt {
  font-size:2rem;
  margin-bottom:.8rem;
}

.benefits-list dd+dd {
  margin-top:1rem;
}

.benefits-list ul {
  font-size:1.25rem;
}

.benefits-list small {
  font-size:1.2rem;
}

/* ==================================================
03｜共通レイアウト：下部ページナビ
対象：.page-controls
高さ・罫線・文字サイズを編集可能。navigation.js が番号・ラベル・disabled・hiddenを更新。
動画中は非表示、FVの01から表示。クラス名・IDを変更しない。
================================================== */
.page-controls {
  position:fixed;
  z-index:900;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  background:#fff;
  border-top:1px solid rgb(1 3 39 / 15%);
  font-family:var(--font-family-noto-sans);
}

.page-controls>button {
  width:40px;
  height:36px;
  text-align:center;
  font-size:20px;
}

.page-controls p {
  display:flex;
  gap:4px;
  align-items:center;
  font-size:10px;
}

.page-controls #page-number {
  font:22px/1 var(--font-family-imbue);
}

.page-count {
  color:#6b6d7b;
}

#page-label {
  margin-left:12px;
  font-size:10px;
}

/* ==================================================
09｜エントリー：長文領域とフォーム
対象：.swipe-section.is-long-section
編集箇所：フォーム間隔 → #entry-form の gap、入力欄 → input / select / textarea。
送信ボタン → .form-button、確認画面 → #entry-review。
app.js が hidden を切り替える。日時選択はHTMLの datetime-local。送信はメールアプリ方式。
================================================== */
.swipe-section.is-long-section {
  height:auto;
  min-height:var(--page-height);
  max-height:none;
  scroll-snap-stop:normal;
  padding-top:3.8rem;
  padding-bottom:70px;
  display:block;
}

.entry-intro {
  font-size:1.4rem;
  line-height:1.9;
  margin-block:1rem;
}

#entry-form {
  display:flex;
  flex-direction:column;
  gap:2.8rem;
}

#entry-form>label {
  display:block;
  font-size:1.5rem;
  line-height:1.6;
}

.required,.optional {
  font:1rem/1 var(--font-family-noto-sans);
  margin-left:10px;
}

.required {
  color:var(--accent);
}

.optional {
  color:#707080;
}

input,select,textarea {
  display:block;
  width:100%;
  margin-top:1rem;
  padding:1.2rem 1.3rem;
  border:1px solid rgb(1 3 39 / 45%);
  border-radius:0;
  background:white;
  color:var(--color-base);
  font-family:var(--font-family-noto-sans);
  font-size:16px;
  line-height:1.7;
  min-height:46px;
  box-sizing:border-box;
}

input::placeholder,textarea::placeholder {
  color:#7e7e8c;
  font-size:13px;
}

textarea {
  min-height:160px;
  resize:vertical;
}

select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:48px;
  background-image:url("../images/common/select-chevron.svg");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:12px 8px;
}

.form-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:17px 24px;
  width:100%;
  border-radius:9999px;
  color:white;
  background:var(--color-base);
  font-size:1.5rem;
  line-height:1.4;
  text-align:center;
}

.form-button:hover {
  background:var(--accent);
}

#entry-review {
  display:flex;
  flex-direction:column;
  gap:2rem;
}

#entry-review h3 {
  font-size:2.2rem;
}

#review-values>div {
  display:block;
}

#review-values dd {
  white-space:pre-wrap;
  margin-top:.7rem;
}

/* ==================================================
10｜フッター：連絡先とロゴの基礎
対象：.gmj-footer
編集箇所：上側余白 → margin-top / padding-top、会社情報 → .footer-contact。
ロゴの最終配置は「10｜フッター：ロゴ本体の中央配置」。基礎のimg幅だけでは変更できない。
================================================== */
.gmj-footer {
  margin-top:6rem;
  border-top:1px solid currentColor;
  padding-top:5rem;
  text-align:center;
  position:relative;
}

.gmj-footer:before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  position:absolute;
  right:0;
  top:-3px;
  background:currentColor;
}

.gmj-footer img {
  width:85%;
  margin:0 auto 2rem;
}

.gmj-footer>p {
  font-size:1.5rem;
}

.gmj-footer .footer-contact {
  font-size:1.2rem;
  margin-top:3rem;
  line-height:1.9;
}

.gmj-footer .copyright {
  font:1.5rem/1 var(--font-family-imbue);
  margin-top:3rem;
}

.gmj-footer .text-link {
  margin-top:2rem;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ==================================================
R01｜共通レスポンシブ：高さ800px以下
対象：@media(max-height:800px)
複数セクションを横断する基礎調整。続く620px以下と、後段の範囲別調整も確認。
適用順で最終値が変わるため、セクションごとの分割・移動はしていない。
================================================== */
@media(max-height:800px) {
  .swipe-section {
    padding-top:14px;
    padding-bottom:46px;
  }

  .screen-content,.with-photo .screen-content {
    gap:1.4rem;
  }

  .eyebrow {
    font-size:4.4rem;
    margin-bottom:1rem;
  }

  .section-heading h2,.hero-heading h1,.closing-copy {
    font-size:2.9rem;
    line-height:1.4;
  }

  .section-photo {
    height:13dvh;
    max-width:15rem;
  }

  .section-photo.oval {
    height:14dvh;
    max-width:none;
  }

  .prose {
    line-height:1.7;
  }

  .prose p+p {
    margin-top:.85em;
  }

  .hero-heading .eyebrow {
    margin-bottom:2rem;
  }

  .concept .prose {
    margin-top:0;
  }

  .hero-signature {
    font-size:1.6rem;
  }

  .bracket {
    padding-block:3rem;
  }

  .feature-word {
    font-size:5rem;
  }

  .income-number {
    font-size:6.4rem;
  }

  .passion-list {
    gap:1.5rem;
  }

  .display-word {
    font-size:8rem;
  }

  .closing .screen-content {
    gap:2rem;
  }

  .facts>div {
    padding:.65rem 0;
  }

  .benefits-list>div {
    padding:1.2rem 0;
  }

}

@media(max-height:620px) {
  :root {
    --header-height:60px;
  }

  .gmj-header {
    padding:14px 24px;
  }

  .swipe-section {
    padding:10px 24px 44px;
  }

  .screen-content,.with-photo .screen-content {
    gap:1rem;
  }

  .eyebrow {
    font-size:3.4rem;
    margin-bottom:.7rem;
  }

  .section-heading h2,.hero-heading h1,.closing-copy {
    font-size:2.5rem;
    line-height:1.35;
  }

  .hero-heading {
    margin:0;
  }

  .hero-heading .eyebrow {
    font-size:2.4rem;
    margin-bottom:1.4rem;
  }

  .hero-motto {
    font-size:1.7rem;
  }

  .hero-signature {
    display:none;
  }

  .prose {
    font-size:1.4rem;
    line-height:1.6;
  }

  .prose p+p {
    margin-top:.6em;
  }

  .section-photo,.section-photo.oval {
    height:10dvh;
  }

  .section-photo {
    max-width:10rem;
  }

  .gmj-cta {
    padding:1rem 3rem;
    margin-top:0;
  }

  .gmj-cta .c-button-text {
    font-size:2.8rem;
  }

  .roles dt {
    font-size:1.6rem;
  }

  .roles>div+div {
    margin-top:.6rem;
  }

  .short-lead,.roles dd {
    font-size:1.3rem;
  }

  .bracket {
    padding-block:2.5rem;
  }

  .bracket:before,.bracket:after {
    height:1.7rem;
  }

  .feature-word {
    font-size:4.5rem;
  }

  .feature-word span {
    margin-top:.7rem;
    font-size:1.3rem;
  }

  .income-number {
    font-size:5.2rem;
  }

  .income-feature {
    gap:.6rem;
  }

  .income-row>p:first-child {
    font-size:1.1rem;
  }

  .caption {
    font-size:1.05rem;
  }

  .details-screen .eyebrow {
    font-size:3.2rem;
  }

  .details-screen .screen-content {
    gap:1rem;
  }

  .facts.compact {
    font-size:1.3rem;
  }

  .facts>div {
    padding:.45rem 0;
  }

  .job-details {
    font-size:1.2rem;
    line-height:1.6;
  }

  .benefits-list {
    font-size:1.4rem;
    line-height:1.65;
  }

  .benefits-list>div {
    padding:.8rem 0;
  }

  .benefits-list dt {
    font-size:1.7rem;
    margin-bottom:.4rem;
  }

  .closing .screen-content {
    gap:1.8rem;
  }

  .closing .section-photo {
    height:15dvh;
  }

  .display-word {
    font-size:7rem;
  }

}

/* ==================================================
13｜アクセシビリティ：動きを減らす設定
対象：@media(prefers-reduced-motion:reduce)
OS設定に合わせアニメーション・transitionを抑制する。!importantを維持。
motion.js / navigation.js も同じメディア条件を参照。
================================================== */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }

}

.swipe-section:not(.is-long-section) {
  touch-action:pan-x pinch-zoom;
}

/* ==================================================
R02｜共通レスポンシブ：本文の最小サイズ
対象：.prose,.benefits-list
320px幅でも本文が小さくなりすぎないclamp指定。
後続の741〜860px、621〜800pxなどの高さ条件は重複成立する。順番を変更しない。
================================================== */
.prose,.benefits-list {
  font-size:clamp(14px,1.5rem,15px);
}

.short-lead,.roles dd,.facts.compact {
  font-size:clamp(13px,1.4rem,14px);
}

.facts {
  font-size:clamp(14px,1.5rem,15px);
}

.job-details,.benefits-list ul,.caption {
  font-size:clamp(12px,1.25rem,13px);
}

.passion-list,.simple-list {
  font-size:clamp(14px,1.6rem,16px);
}

@media(min-height:741px) and (max-height:860px) {
  .screen-content {
    gap:1.8rem;
  }

  .section-photo {
    height:min(22dvh,17rem);
  }

  .income-feature {
    padding-block:3rem;
  }

  .income-number {
    font-size:7.2rem;
  }

}

#duties .job-details {
  font-size:clamp(14px,1.5rem,15px);
  line-height:1.9;
}

#duties .job-details li+li {
  margin-top:.6rem;
}

@media(max-height:620px) {
  #training .feature {
    padding-block:1.9rem;
    margin:0;
  }

  #training .feature-label {
    margin-bottom:.4rem;
  }

  #training .feature-word {
    font-size:3.4rem;
  }

  #training .feature-word span {
    margin-top:.3rem;
  }

  #duties .job-details {
    font-size:13px;
    line-height:1.65;
  }

  #duties .job-details li+li {
    margin-top:.3rem;
  }

}

.section-photo.circle {
  width:min(20rem,21dvh);
  height:min(20rem,21dvh);
  max-width:none;
}

@media(max-height:800px) {
  .section-photo.circle {
    width:14dvh;
    height:14dvh;
  }

}

@media(max-height:620px) {
  .section-photo.oval {
    height:80px;
  }

  .section-photo.circle {
    width:80px;
    height:80px;
  }

}

@media(min-height:621px) and (max-height:800px) {
  .screen-content {
    gap:1rem;
  }

  .feature-word {
    font-size:4.3rem;
  }

  .feature {
    padding-block:2.6rem;
  }

  .income-feature {
    padding-block:2.5rem;
    gap:.8rem;
  }

  .income-number {
    font-size:5.2rem;
  }

  .benefits-list {
    line-height:1.65;
  }

  .benefits-list>div {
    padding:.8rem 0;
  }

  .benefits-list dt {
    font-size:1.8rem;
    margin-bottom:.5rem;
  }

  .details-screen .screen-content {
    gap:1rem;
  }

}

@media(min-height:741px) and (max-height:860px) {
  .screen-content,.with-photo .screen-content,.details-screen .screen-content {
    gap:1.2rem;
  }

  .section-photo.oval {
    height:16rem;
  }

  .section-photo.circle {
    width:16rem;
    height:16rem;
  }

  .income-number {
    font-size:6.8rem;
  }

  .closing .screen-content {
    gap:2.2rem;
  }

  .benefits-list>div {
    padding:1.5rem 0;
  }

}

/* 07-07｜Work & Life：働きやすさ — 高さ621〜800pxの英字ブロック余白。見出しの最終表示は.type-overlap。 */
@media(min-height:621px) and (max-height:800px) {
  #life .feature {
    padding-block:2.3rem;
  }

}

@media(min-height:741px) and (max-height:860px) {
  .concept .screen-content {
    gap:1.1rem;
  }

}

.roles>p {
  margin-bottom:.4rem;
}

.roles li {
  padding-left:1em;
  position:relative;
}

.roles li:before {
  content:"・";
  position:absolute;
  left:0;
}

.roles li+li {
  margin-top:.6rem;
}

.roles li span {
  white-space:nowrap;
}

.income-row>p:not(.income-number),.income-bridge {
  font-size:14px;
  line-height:1.7;
}

.income-bridge {
  text-align:left;
}

.benefit-limit {
  font-size:14px;
}

@media(max-height:740px) {
  #schedule .simple-list {
    line-height:1.55;
  }

}

@media(max-height:620px) {
  #income .income-feature {
    padding-block:1.3rem;
  }

}

/* ==================================================
06｜動画：00セクション
対象：.swipe-section.test-video-section
対象：#test-video。動画サイズ・トリミングは video のobject-fit / object-position。
下部ナビの非表示はCSSでなくnavigation.jsのhidden属性制御。
================================================== */
.swipe-section.test-video-section {
  padding:0;
  gap:0;
  justify-content:center;
}

.test-video-section video {
  display:block;
  width:100%;
  height:100%;
  max-height:100%;
  object-fit:cover;
  object-position:center;
}

/* ==================================================
07-10｜クロージング：弧と大きな英字の基礎
対象：.closing-signature
ここは過去から継承する基礎値。後段の #closing 指定が最終レイアウトを決める。
高さ別条件も元の位置に維持している。
================================================== */
.closing-signature {
  text-align:center;
  padding-block:3.6rem;
}

.closing-wordmark {
  font:400 clamp(150px,46vw,210px)/.82 var(--font-family-imbue);
  letter-spacing:-.045em;
}

.closing-wordmark>span {
  display:block;
  font-size:2.8rem;
  line-height:1.2;
  letter-spacing:0;
  margin-top:1.2rem;
}

.closing-signature .closing-copy {
  text-align:right;
  margin-top:1.6rem;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:rgb(1 3 39 / 40%);
}

@media(max-height:740px) {
  .closing-wordmark {
    font-size:140px;
  }

  .closing-signature {
    padding-block:2.8rem;
  }

  .closing-wordmark>span {
    font-size:2.4rem;
    margin-top:.8rem;
  }

  .closing-signature .closing-copy {
    margin-top:1rem;
  }

  .closing .screen-content {
    gap:1.4rem;
  }

}

@media(max-height:620px) {
  .closing-wordmark {
    font-size:120px;
  }

  .closing-signature {
    padding-block:2.2rem;
  }

  .closing .section-photo {
    height:70px;
  }

  .closing .screen-content {
    gap:1rem;
  }

}

@media(min-height:741px) {
  .closing .screen-content {
    gap:1.6rem;
  }

  .closing .section-photo {
    max-height:140px;
  }

  .closing-wordmark {
    font-size:clamp(150px,46vw,190px);
  }

}

/* ==================================================
07-01｜FV：大きな英字と画面高さ別の基礎
対象：.hero-heading .hero-wordmark
GMJサイズ → font-size。条件が重なるため、以下のメディアクエリの並びは維持。
重ね方・色・Recruitmentの位置は「07-01｜FV：重なりの最終指定」。
================================================== */
.hero-heading .hero-wordmark {
  font-size:clamp(150px,48vw,220px);
  line-height:.8;
  letter-spacing:-.045em;
  text-align:center;
  margin-bottom:2rem;
}

.hero-wordmark>span {
  display:block;
  font-size:2.6rem;
  line-height:1.2;
  letter-spacing:0;
  margin-top:1rem;
}

@media(max-height:860px) {
  .concept .screen-content {
    gap:1rem;
  }

  .hero-heading .hero-wordmark {
    font-size:125px;
    margin-bottom:1.2rem;
  }

  .hero-wordmark>span {
    font-size:2.2rem;
    margin-top:.6rem;
  }

  .concept .hero-signature {
    display:none;
  }

}

@media(max-height:620px) {
  .hero-heading .hero-wordmark {
    font-size:105px;
    margin-bottom:.8rem;
  }

  .hero-wordmark>span {
    font-size:1.9rem;
    margin-top:.4rem;
  }

}

@media(min-height:621px) and (max-height:740px) {
  .hero-heading .hero-wordmark {
    font-size:150px;
  }

  .concept .screen-content {
    gap:.6rem;
  }

  .concept .prose {
    line-height:1.55;
  }

  .concept .prose p+p {
    margin-top:.5em;
  }

}

@media(min-height:741px) and (max-height:860px) {
  .hero-heading .hero-wordmark {
    font-size:160px;
  }

}

@media(min-height:861px) and (max-height:1020px) {
  .concept .screen-content {
    gap:1rem;
  }

  .concept .hero-signature {
    display:none;
  }

  .hero-heading .hero-wordmark {
    font-size:200px;
    margin-bottom:1rem;
  }

}

@media(min-height:621px) and (max-height:740px) {
  .concept .hero-heading {
    margin-top:0;
  }

}

/* ==================================================
04｜共通コンポーネント：左右の弧
対象：.arc-sides
Messageの締め文と求める人物像に使用。margin-inlineの負値は装飾用。
疑似要素と --arc-reveal はJS連動。
================================================== */
.arc-sides {
  position:relative;
  padding:12px 16px;
  margin-inline:-16px;
}

.arc-sides:before,.arc-sides:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:12px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  pointer-events:none;
}

.arc-sides:before {
  left:0;
  background-image:url('../images/common/paren_pc_sm_l-fluid.svg');
}

.arc-sides:after {
  right:0;
  background-image:url('../images/common/paren_pc_sm_r-fluid.svg');
}

.passion-frame {
  padding-block:20px;
}

/* ==================================================
07-05｜Your Career：成長・評価の締め文
対象：#growth .career-emphasis
編集箇所：弧と文章の間隔 → padding-block、弧の高さ → 疑似要素。
写真と見出しは共通 .photo-overlap。
================================================== */
#growth .career-emphasis {
  padding-block:20px;
}

#growth .career-emphasis:before,#growth .career-emphasis:after {
  height:14px;
}

@media(max-height:740px) {
  #growth .career-emphasis {
    padding-block:15px;
  }

  #growth .career-emphasis:before,#growth .career-emphasis:after {
    height:10px;
  }

}

#growth .career-emphasis:before {
  background-image:url('../images/common/paren_sp_m_t-fluid.svg');
}

#growth .career-emphasis:after {
  background-image:url('../images/common/paren_sp_m_b-fluid.svg');
}

/* ==================================================
07-03｜Our Work：写真の基礎サイズ
対象：#work .section-photo.circle
後段の「07-03｜Our Work：写真との重なり」で形とサイズを上書き。
旧基礎値は画面条件との関係を壊さないよう残している。
================================================== */
#work .section-photo.circle {
  width:100%;
  height:clamp(80px,calc(100dvh - 640px),420px);
  max-width:none;
}

#work .section-photo.circle img {
  border-radius:50%;
  object-position:46% 60%;
}

/* ==================================================
R03｜高い画面：Messageの基礎指定
対象：@media(min-height:861px)
このブロックのMessage指定は後段の #message で上書きされる。
直後の教育体制の指定とは用途が異なるため一括統合しない。
================================================== */
@media(min-height:861px) {
  #work .section-photo.circle {
    width:min(100%,calc(100dvh - 640px),420px);
    height:auto;
    aspect-ratio:1;
  }

}

@media(max-height:620px) {
  #work .section-photo.circle {
    height:90px;
  }

}

@media(min-height:861px) {
  /* 07-02｜Message：高さ861px以上の基礎値。後段の写真との重なりの最終指定が優先。 */
#message .screen-content {
    min-height:calc(var(--page-height) - 140px);
    justify-content:space-between;
  }

  #message .section-photo.oval {
    height:min(calc(30dvh - 10px),300px);
  }

}

@media(min-height:861px) {
  /* ==================================================
07-04｜教育体制：高い画面
対象：#training .screen-content
高さ861px以上での余白・大きな英字。続く同じ条件の.feature指定も確認。
================================================== */
#training .screen-content {
    min-height:calc(var(--page-height) - 140px);
    justify-content:space-between;
  }

  #training .feature-word {
    font-size:8rem;
  }

  #training .feature {
    padding-block:5rem;
  }

}

@media(min-height:861px) {
  #training .feature {
    min-height:min(32dvh,360px);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
  }

  #training .feature-word {
    font-size:10rem;
  }

}

/* ==================================================
04｜共通コンポーネント：日本語の文字間
対象：.short-lead,.roles,.statement,.passion-list,.simple-list,.benefits-list,.entry-intro
本文・補足・フォームなどのletter-spacing。英字と金額は別指定を維持。
================================================== */
.short-lead,.roles,.statement,.passion-list,.simple-list,.benefits-list,.entry-intro {
  letter-spacing:.02em;
}

.facts,.job-details,.income-row>p:not(.income-number),.income-bridge,#entry-form>label {
  letter-spacing:.01em;
}

.hero-motto,.feature-word>span {
  letter-spacing:.025em;
}

#entry-form input,#entry-form select,#entry-form textarea {
  letter-spacing:.015em;
}

/* ==================================================
12｜アニメーション：弧の表示進行
対象：.bracket,.arc-sides
--arc-reveal は motion.js / GSAP が100%から0%へ変更。
opacityもJSが操作するため、アニメーション用のstyleや変数を削除しない。
================================================== */
.bracket,.arc-sides {
  --arc-reveal:0%;
}

.bracket:before {
  clip-path:inset(0 var(--arc-reveal) 0 0);
}

.bracket:after {
  clip-path:inset(0 0 0 var(--arc-reveal));
}

.arc-sides:before {
  clip-path:inset(0 0 var(--arc-reveal) 0);
}

.arc-sides:after {
  clip-path:inset(var(--arc-reveal) 0 0 0);
}

.section-photo {
  overflow:hidden;
  border-radius:50%;
}

@media(prefers-reduced-motion:reduce) {
  .bracket:before,.bracket:after,.arc-sides:before,.arc-sides:after {
    clip-path:none;
  }

}

.section-photo.oval {
  border-radius:9999px;
}

/* ==================================================
12｜スクロール状態：JSとの境界
対象：html.bounded-scroll
navigation.jsがhtmlへbounded-scrollを追加。CSSスナップとJS移動の競合を防ぐ。
続く募集要項の高さは後段アコーディオン指定でmin-height:0へ上書き。
================================================== */
html.bounded-scroll {
  scroll-snap-type:none;
  scroll-behavior:auto;
  overscroll-behavior-y:none;
  overflow-anchor:none;
}

#requirements,#duties,#schedule,#benefits,#entry {
  touch-action:pan-x pan-y pinch-zoom;
}

/* ==================================================
08｜募集要項：長文範囲の基礎
対象：#requirements,#duties,#schedule,#benefits
navigation.jsでは4セクション全体を1つの長文範囲として扱う。
最終の高さ・余白は下の「08｜募集要項：アコーディオン」で上書きする。
================================================== */
#requirements,#duties,#schedule,#benefits {
  height:auto;
  min-height:var(--page-height);
  max-height:none;
}

/* ==================================================
09｜エントリー：テキストエリア内スクロール
対象：#entry textarea
overscroll-behaviorはフォーム内スクロールとページ移動の競合を防ぐ指定。
================================================== */
#entry textarea {
  overscroll-behavior-y:contain;
}

/* 11｜PC専用UI：背景画像 — 背景URL・位置・サイズ。左右UIと同じ1024px条件。 */
@media(min-width:1024px) {
  html {
    background-color:#eef0f2;
    background-image:url('../images/desktop-background-v1.png');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
  }

}

/* ==================================================
09｜エントリー：入力操作の優先
対象：#entry input,#entry textarea,#entry select,#entry [contenteditable="true"]
touch-action はネイティブの入力・スクロール・ピンチ操作を守る。
================================================== */
#entry input,#entry textarea,#entry select,#entry [contenteditable="true"] {
  touch-action:pan-x pan-y pinch-zoom;
}

/* ==================================================
12｜スクロール領域：専用コンテナ
対象：html,body
#mainのみが縦スクロールを所有。navigation.jsのscrollTop / scrollToと連動。
overflowやscroll-behaviorを変更すると全ページの操作へ影響する。
================================================== */
html,body {
  overflow:hidden;
}

#main {
  height:calc(100dvh - var(--header-height));
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
  scroll-behavior:auto;
  overflow-anchor:none;
}

#main::-webkit-scrollbar {
  display:none;
}

/* ==================================================
07-02｜Message：写真との重なりの最終指定
対象：#message .screen-content
左の見出しと右寄せ写真。画像幅 → #message .section-photo.oval。
マスク濃度・範囲 → ::after のlinear-gradient。高さ700px以下の後続調整も確認。
================================================== */
#message .screen-content {
  min-height:0;
  justify-content:center;
}

/* ==================================================
04｜共通コンポーネント：写真と見出しの重ね台
対象：.editorial-visual
grid-area:1/1で同じ領域に配置する。Message、Our Work、.photo-overlapが利用。
================================================== */
.editorial-visual {
  display:grid;
  isolation:isolate;
  position:relative;
  flex-shrink:0;
}

.editorial-visual>.section-heading,.editorial-visual>.section-photo {
  grid-area:1/1;
}

.editorial-visual>.section-heading {
  position:relative;
  z-index:2;
}

#message .editorial-visual {
  min-height:clamp(180px,26dvh,260px);
}

#message .section-heading {
  align-self:center;
  width:76%;
}

#message .eyebrow {
  text-align:left;
  font-size:4.8rem;
  margin-bottom:1.4rem;
}

#message .section-heading h2 {
  text-align:left;
  font-size:2.6rem;
  line-height:1.55;
}

#message .section-photo.oval {
  justify-self:end;
  align-self:stretch;
  position:relative;
  width:84%;
  height:100%;
  margin:0;
  border-radius:9999px;
  overflow:hidden;
}

#message .section-photo.oval img {
  object-position:62% 39%;
}

#message .section-photo.oval::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,.95),rgba(255,255,255,.76) 28%,rgba(255,255,255,0) 73%);
}

/* ==================================================
07-03｜Our Work：写真との重なりの最終指定
対象：#work .editorial-visual
編集箇所：英字位置 → .eyebrow、日本語 → h2、写真サイズ → .section-photo.circle。
写真上の白いマスク → ::after。続く高さ700px以下も同時に確認。
================================================== */
#work .editorial-visual {
  padding-top:1.2rem;
}

#work .section-heading {
  align-self:start;
  margin-top:-1.2rem;
}

#work .eyebrow {
  text-align:left;
  font-size:5.6rem;
  margin-left:2rem;
  margin-bottom:.8rem;
}

#work .section-heading h2 {
  font-size:2.6rem;
  line-height:1.5;
  margin-right:1.6rem;
}

#work .section-photo.circle {
  position:relative;
  width:100%;
  height:clamp(170px,26dvh,260px);
  aspect-ratio:auto;
  max-width:none;
  overflow:hidden;
  border-radius:9999px;
}

#work .section-photo.circle img {
  border-radius:inherit;
  object-position:46% 60%;
}

#work .section-photo.circle::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.83),rgba(255,255,255,.55) 32%,rgba(255,255,255,0) 68%);
}

@media(max-height:700px) {
  #message .editorial-visual {
    min-height:150px;
  }

  #work .section-photo.circle {
    height:160px;
  }

  #message .eyebrow,#work .eyebrow {
    font-size:4rem;
  }

  #message .section-heading h2,#work .section-heading h2 {
    font-size:2.4rem;
  }

}

/* ==================================================
05｜ヘッダー：幅360px以下
対象：@media(max-width:360px)
ボタンの内側余白とgap。通常指定を探すときは「05｜ヘッダー：ロゴ」を参照。
================================================== */
@media(max-width:360px) {
  .gmj-header {
    padding-inline:18px;
  }

  .header-actions {
    gap:6px;
  }

  .header-actions>.header-cta {
    padding-inline:11px;
  }

}

/* ==================================================
07-11｜Company：会社概要のカプセル行
対象：#company .facts
行間 → gap、枠と丸み → .facts>div、縦の点線 → ddのborder-left。
写真と見出しは「04｜共通コンポーネント：重なり表現」の .photo-overlap。
直後の幅360px以下・高さ700px以下はこの会社概要専用。
================================================== */
#company .facts {
  display:grid;
  gap:8px;
}

#company .facts>div {
  grid-template-columns:7em minmax(0,1fr);
  gap:0;
  align-items:center;
  min-height:48px;
  padding:10px 18px;
  border:1px solid rgb(1 3 39 / 35%);
  border-radius:9999px;
}

#company .facts dt {
  padding-right:12px;
}

#company .facts dd {
  border-left:1px dotted rgb(1 3 39 / 45%);
  padding:3px 0 3px 14px;
}

@media(max-width:360px) {
  #company .facts>div {
    grid-template-columns:6em minmax(0,1fr);
    padding-inline:14px;
  }

  #company .facts dd {
    padding-left:10px;
  }

  #company .facts dt {
    padding-right:8px;
  }

}

@media(max-height:700px) {
  #company .facts {
    gap:6px;
  }

  #company .facts>div {
    min-height:40px;
    padding-block:6px;
  }

}

/* ==================================================
08｜募集要項：アコーディオンの最終指定
対象：#requirements / #duties / #schedule / #benefits
枠 → .recruitment-accordion、内側余白 → .accordion-body、開閉ボタン → .accordion-symbol。
HTMLのdetails / summaryによる開閉。[open]で＋／−を切り替える。
枠の高さは内容に追従。画面高さへ固定しない。
================================================== */
#requirements,#duties,#schedule,#benefits {
  height:auto;
  min-height:0;
  max-height:none;
  padding-block:8px;
}

#requirements {
  padding-top:28px;
}

#benefits {
  padding-bottom:56px;
}

.recruitment-accordion {
  width:100%;
  border:1px solid rgb(1 3 39 / 40%);
  border-radius:26px;
}

.recruitment-accordion>summary {
  list-style:none;
  position:relative;
  padding:20px 64px 20px 20px;
  cursor:pointer;
  min-height:64px;
}

.recruitment-accordion>summary::-webkit-details-marker {
  display:none;
}

.recruitment-accordion>summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:26px;
}

.recruitment-label {
  display:block;
  font:2.4rem/1.1 var(--font-family-imbue);
  margin-bottom:6px;
}

.recruitment-title {
  display:block;
  font-size:1.6rem;
  line-height:1.65;
}

.accordion-symbol {
  position:absolute;
  right:14px;
  top:16px;
  width:38px;
  height:30px;
  border-radius:9999px;
  background:var(--color-base);
  color:white;
}

.accordion-symbol:before,.accordion-symbol:after {
  content:"";
  position:absolute;
  left:14px;
  top:14px;
  width:10px;
  height:1px;
  background:currentColor;
}

.accordion-symbol:after {
  transform:rotate(90deg);
}

.recruitment-accordion[open] .accordion-symbol:after {
  display:none;
}

.accordion-body {
  padding:0 20px 22px;
}

.accordion-body .facts>div {
  grid-template-columns:1fr;
  gap:5px;
  padding-block:12px;
}

.accordion-body .facts>div:first-child {
  padding-top:0;
}

.accordion-body .facts>div:last-child {
  border-bottom:0;
}

.accordion-body .section-photo {
  margin-bottom:20px;
}

.accordion-body .gmj-cta {
  display:flex;
  margin:22px auto 0;
}

.accordion-body .benefits-list>div:first-child {
  padding-top:0;
}

.accordion-body .benefits-list>div:last-child {
  border-bottom:0;
}

/* ==================================================
10｜フッター：ロゴ本体の中央配置
対象：.gmj-footer .footer-logo
PNGは300×59px、見える部分はx=13〜216の203px。透明余白をCSSで除外。
表示サイズは .footer-logo のwidthで調整。imgの比率とleftはロゴ画像を替えない限り変更しない。
================================================== */
.gmj-footer .footer-logo {
  width:57.5167%;
  aspect-ratio:203/59;
  position:relative;
  overflow:hidden;
  margin:0 auto 2rem;
}

.gmj-footer .footer-logo img {
  position:absolute;
  top:0;
  left:-6.40394%;
  width:147.78325%;
  max-width:none;
  height:auto;
  margin:0;
}

/* ==================================================
08｜募集要項：勤務と休日の一覧
対象：#schedule .leave-block
一覧はアコーディオンの枠内へ配置。内側の弧は使わない。
余白 → padding、折り返し → .simple-list。
================================================== */
#schedule .leave-block {
  width:100%;
  min-width:0;
  padding:18px 0 0;
}

#schedule .simple-list {
  padding:0;
  margin:0;
  overflow-wrap:anywhere;
}

#schedule .simple-list li {
  position:relative;
  padding-left:1em;
}

#schedule .simple-list li:before {
  position:absolute;
  left:0;
}

.accordion-body {
  min-width:0;
  overflow-wrap:anywhere;
}

/* ==================================================
07-06｜収入と将来性：中央揃えの最終指定
対象：#income .section-heading h2,#income .prose,#income .income-bridge
見出し・本文・橋渡し文を中央に統一。
金額と万円の位置 → .income-numberのflexとgap。サイズは前段の高さ別指定を参照。
================================================== */
#income .section-heading h2,#income .prose,#income .income-bridge {
  text-align:center;
}

#income .prose p:first-child {
  text-indent:0;
}

#income .prose p:first-child:before {
  display:none;
}

#income .income-number {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.7rem;
}

#income .income-number span {
  margin-left:0;
}

#income .income-row>p:not(.income-number),#income .income-bridge {
  text-wrap:pretty;
}

/* ==================================================
07-10｜クロージング：写真と英字の重なりの最終指定
対象：#closing .closing-visual
写真サイズ → .closing-visual .section-photo、GMJ位置 → .closing-wordmark。
日本語と弧 → .closing-signature。直後の高さ700px以下も確認。
================================================== */
#closing .closing-visual {
  position:relative;
  padding-top:3rem;
  isolation:isolate;
}

#closing .closing-wordmark {
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:1.4rem;
  font-size:clamp(96px,28vw,134px);
  line-height:.82;
  text-align:left;
}

#closing .closing-wordmark>span {
  display:block;
  font-size:3rem;
  line-height:1.1;
  letter-spacing:0;
  margin-top:.8rem;
}

#closing .closing-visual .section-photo {
  position:relative;
  width:100%;
  height:clamp(160px,22dvh,210px);
  max-height:none;
  max-width:none;
  border-radius:9999px;
  margin:0;
  overflow:hidden;
}

#closing .closing-visual img {
  object-position:50% 50%;
  border-radius:inherit;
}

#closing .closing-visual .section-photo:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.68),transparent 42%);
}

#closing .closing-signature {
  padding-block:3rem;
}

#closing .closing-signature .closing-copy {
  margin-top:0;
  text-align:center;
}

@media(max-height:700px) {
  #closing .closing-visual .section-photo {
    height:160px;
  }

  #closing .closing-wordmark {
    font-size:92px;
  }

  #closing .closing-wordmark>span {
    font-size:2.6rem;
  }

  #closing .closing-signature {
    padding-block:2.2rem;
  }

}

/* ==================================================
04｜共通コンポーネント：重なり表現の最終指定
対象：.photo-overlap
写真型：#growth（成長・評価）、#craft（仕事の強み）、#company（会社概要）。
写真サイズ → .photo-overlap>.section-photo.oval、白マスク → :after。
文字型：#training / #income / #life / #person / #requirements / #entry の .type-overlap。
英字の薄さ → color、重なり量 → margin-bottom。後続の高さ700px以下も確認。
募集要項の内容・フォームの操作部品には重ねない。
================================================== */
/* 07-08｜Craftsmanship：仕事と会社の強み — 下記.photo-overlapを成長・評価／会社概要と共有。本文は.prose。 */
.photo-overlap {
  padding-top:1.2rem;
}

.photo-overlap>.section-heading {
  align-self:start;
  margin-top:-1.2rem;
}

.photo-overlap .eyebrow {
  text-align:left;
  font-size:5.6rem;
  margin-left:1.6rem;
  margin-bottom:1rem;
}

.photo-overlap .section-heading h2 {
  font-size:2.6rem;
  line-height:1.5;
  margin-right:1.6rem;
}

.photo-overlap>.section-photo.oval {
  position:relative;
  width:100%;
  height:clamp(170px,24dvh,230px);
  max-width:none;
  border-radius:9999px;
  margin:0;
}

.photo-overlap>.section-photo:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,.76) 48%,transparent 84%);
}

.type-overlap {
  position:relative;
  isolation:isolate;
}

.type-overlap .eyebrow {
  position:relative;
  z-index:-1;
  color:rgb(1 3 39 / 24%);
  font-size:6.6rem;
  line-height:1.05;
  margin-bottom:-1.6rem;
}

.type-overlap h2 {
  position:relative;
}

/* ==================================================
07-01｜FV：重なりの最終指定
対象：#concept .hero-heading
GMJの色 → .hero-wordmark、Recruitmentの位置 → span、日本語位置 → h1。
直後の共通高さ700px以下にFVのpadding-top指定も含まれるため、位置を維持している。
================================================== */
#concept .hero-heading {
  display:grid;
  position:relative;
  isolation:isolate;
}

#concept .hero-heading .hero-wordmark {
  grid-area:1/1;
  text-align:left;
  color:rgb(1 3 39 / 20%);
  margin:0 0 2rem;
}

#concept .hero-wordmark>span {
  position:absolute;
  right:0;
  top:0;
  margin:0;
  color:var(--color-base);
  font-size:2.4rem;
}

#concept .hero-heading h1 {
  grid-area:1/1;
  align-self:end;
  position:relative;
  padding-top:6rem;
}

@media(max-height:700px) {
  .photo-overlap>.section-photo.oval {
    height:150px;
  }

  .photo-overlap .eyebrow {
    font-size:4.4rem;
  }

  .photo-overlap .section-heading h2 {
    font-size:2.4rem;
  }

  .type-overlap .eyebrow {
    font-size:5.4rem;
  }

  #concept .hero-heading h1 {
    padding-top:4rem;
  }

}