/* 求人ページ：レスポンシブ（タブレット・PC・大画面）。2026-11-02
   トップ（v2/top-d/c/add-pc.css・資料70〜73）と同じ決まりで組む。スマホ（〜599px）の形は変えない
   （例外：見出しの下の日本語とフッターの住所の字間・太さは、トップが 11-02 にスマホもそろえたので、全部の幅で同じにした）

   ■ 幅の段階：〜599 スマホ ／ 600〜1023 タブレット（1列・中身 720 まで）／ 1024〜 PC（2列・中身 1320 まで）／ 1600〜 大画面（1320 で止まる）
   ■ 左右の余白 --gutter：24（600）→ 50（1024）→ 76（1440）→ 最大 120（トップと同じ式）
   ■ 文字と余白は clamp() で、600 のスマホの値から 1024 の PC の値まで、画面の幅に合わせてなめらかに（境目で跳ばない）
     本文 14→16／注記 12→14／見出しの下の日本語 12→16／英字の大きな見出し 36→56／小見出し 16→20／キャッチ 24→36
     白い面どうし（片側）64→100／写真・色の面との境目 96→140／見出しの下 40→64／応募の帯 → フッター 96→180
     （11-03 松原さん「セクションの間・タイトルの下が狭い」→ トップの PC を測ると白い面どうし 180〜216・コンセプト→メニュー 200。
       求人は 160 だったので、片側 80 → 100（間 200）に。見出しの下も 48 → 64、応募の帯の下はトップの求人の写真 → フッターと同じ 180）
   ■ PC の並び（トップのサロン情報と同じ 2列・596：644 か 644：596・間 80。写真と文を左右交互に）
     Message：写真｜文 ／ Point：写真2枚（スクロールしてもついてくる）｜カード4枚 ／ Welcome：文｜写真 ／ Support：写真｜文
     Requirements：表は読みやすい幅 880 の1列 ／ Flow：4つを横に並べ、丸を線でつなぐ ／ Entry：横長の帯にボタン2つを横並び
   ■ ヘッダー・メニュー画面・下のバー・フッターは、トップの PC と同じ数字（四隅 40・メニューの丸 60・バー 384×60・フッターは左右2列）
   このファイルを外せば、スマホ版を横に伸ばした形に戻る */

/* ---------- 全部の幅：トップにそろえる（トップ 11-02 23時32分「SP もフォントウェイトなど PC とそろえて」） ---------- */
/* 本文・注記の字間 .05em → .10em（11-03 松原さん「本文の字間はそろえて」。トップの本文・注記と同じ） */
body,.h3,.req-label,.pay,.pill,.wf-info,.sm-addr,:is(.field>label,.field>legend,.choice span,.req-tag,.opt-tag){letter-spacing:.1em}
/* 文字の太さもトップにそろえる（11-03 松原さん「本文などのサイズやウェイトも揃ってる？」→ 測るとトップは本文・注記・項目名が 500、求人は 400 だった）
   トップ：コンセプトの文・店の情報（住所・営業時間・項目名・注記）は 500。フッターの住所は 400 → 求人も、本文の中身（main の中）を 500 に。フッターは 400 のまま
   字間は親の px を受け継ぐため、注記など小さい文字は .12em になっていた → 小さい文字にも .10em を書く */
main{font-weight:500}
.pay th,.pay td{font-weight:500}
:is(.pay thead th,.pay td small,.req dt,.req dd small,.steps small,.entry .note,.hint,.err,.privacy){letter-spacing:.1em}
/* 下のバーの字間：トップと同じ（スマホ・タブレット .06em／PC .05em） */
.a-bar .ab-phone,.a-bar .ab-hol{letter-spacing:.06em}
.sec-title small{font-weight:500;letter-spacing:.1em}
.wf-info,.wf-info a{letter-spacing:.1em}
/* 流れの図は中央に（11-03 松原さん「フローの図はセンタリングに」）：縦に並ぶスマホ・タブレットは、図の幅を中身に合わせて中央に置く（PC は4つを横に並べて中央ぞろえ） */
.steps{width:fit-content;max-width:100%;margin-inline:auto}
/* PC だけで使う部品（フッターの右の箱・郵便番号）。スマホ・タブレットでは無いものとして扱う */
.wf-right{display:contents}
.wf-zip{display:none}
/* 最初の画面の PC 用の写真（<picture>）。スマホ・タブレットは今までの写真 */
.fv>picture{position:absolute;inset:0}
.fv>picture img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* Welcome の箇条書きは本文より 2px 大きく（11-03 松原さん「少し大きく。18px」）：スマホ 16 → PC 18。点は1行目の中央に */
.list{font-size:var(--fs-list,16px)}
.list li::before{top:calc(1.05em - 3px)}

/* ---------- タブレットから上（600px〜） ---------- */
@media (min-width:600px){
  :root{
    --gutter:clamp(24px,calc(6.25vw - 13.5px),120px);
    --wide:720px;                                              /* 中身の幅（タブレット） */
    --fs-body:clamp(14px,calc(11.17px + .472vw),16px);
    --fs-note:clamp(12px,calc(9.17px + .472vw),14px);
    --fs-list:clamp(16px,calc(13.17px + .472vw),18px);         /* Welcome の箇条書き */
    --fs-label:clamp(12px,calc(6.34px + .943vw),16px);         /* 大きな見出しの下の日本語 */
    --fs-h2:clamp(36px,calc(4.717vw + 7.7px),56px);            /* 英字の大きな見出し */
    --fs-h3:clamp(16px,calc(10.34px + .943vw),20px);           /* 小見出し・カードの見出し */
    --fs-catch:clamp(24px,calc(7.02px + 2.83vw),36px);         /* 写真の下のキャッチ */
    --fs-fvlabel:clamp(13px,calc(8.75px + .708vw),16px);       /* 最初の画面の「スタッフ募集」 */
    --sp-white:clamp(64px,calc(13.06px + 8.491vw),100px);      /* 白い面どうし（片側）。PC で間 200（トップのコンセプト → メニューと同じ） */
    --sp-color:clamp(96px,calc(33.74px + 10.377vw),140px);     /* 写真・色の面との境目 */
    --sp-head:clamp(40px,calc(6.04px + 5.66vw),64px);          /* 大きな見出しの下 */
    --sp-last:clamp(96px,calc(19.811vw - 22.87px),180px);      /* 応募の帯 → フッター（トップの求人の写真 → フッターと同じ） */
    --ic:clamp(112px,calc(72.4px + 6.604vw),140px);            /* 働く魅力の絵の幅（高さは 0.607 倍） */
  }

  /* 文字 */
  body{font-size:var(--fs-body)}
  .sec-title,.fv-title{font-size:var(--fs-h2);line-height:1}
  .sec-title small{font-size:var(--fs-label)}
  .fv-title small{font-size:var(--fs-fvlabel)}
  .catch p{font-size:var(--fs-catch)}
  .h3{font-size:var(--fs-h3)}
  .req-label,.pay,.pill{font-size:var(--fs-body)}
  .req-label::before{height:1.15em}
  :is(.pay thead th,.pay td small,.req dt,.req dd small,.steps small,.entry .note){font-size:var(--fs-note)}
  .point-no{font-size:clamp(20px,calc(14.34px + .943vw),24px)}
  .point-no small{font-size:clamp(13px,calc(11.585px + .236vw),14px)}
  /* 点の位置は文字の大きさに合わせる（スマホの 13px は 14px×2.1 の行の中央） */
  .list li::before{top:calc(1.05em - 3px)}
  .dots li::before{top:calc(1.05em - 2px)}

  /* 余白 */
  .sec-title{margin-bottom:var(--sp-head)}
  .catch{padding:var(--sp-color) var(--gutter) var(--sp-white)}
  .catch+.message{padding-top:var(--sp-white)}
  .message{padding:0 var(--gutter) var(--sp-white)}
  .after-msg{padding-top:var(--sp-white)}
  .blk{padding:var(--sp-white) var(--gutter)}
  .blk.last{padding-bottom:var(--sp-last)}

  /* 中身の幅：720 まで（1列） */
  .blk .body,.message .copy,.msg-photo{max-width:var(--wide)}
  /* 写真2枚：右の写真の下げ幅を、右の写真の幅に対する割合で（スマホ 136 で 120 下げる＝88.2%）。幅が変わっても同じ形 */
  .pair{column-gap:24px}
  .pair .p-b{margin-top:88.2%}
  /* 働く魅力：2×2 に並べる。絵は少し大きく */
  .points{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .point-ic{width:var(--ic);height:calc(var(--ic) * .607)}
  /* 見出しが1字だけ次の行に落ちないように、文節で折り返して2行の長さをそろえる（2列のカードは幅が狭いため） */
  .point .h3{word-break:auto-phrase;text-wrap:balance}
  /* 1行の長さは 40字まで（W3C 日本語組版の要件・WCAG 1.4.8）。写真は 720 のまま、長い文だけ幅を絞って中央に */
  .message .copy,.support .body>div{max-width:min(var(--wide),42em);margin-inline:auto}
  /* 募集要項の項目名の列：「受動喫煙対策」が1行に入る幅 */
  .req>div{grid-template-columns:128px 1fr}
  /* 流れ：段の高さは文字の大きさから（見出し1行＋補足1行） */
  .steps{--step:calc(var(--fs-body) * 2.1 + var(--fs-note) * 2.1 + 2px)}
  /* 応募：ボタンを横に2つ */
  .entry{padding:clamp(56px,calc(37.13px + 3.145vw),72px) var(--gutter)}
  .entry-btns{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .pill{width:min(100%,300px)}

  /* フッター */
  .w-footer{--ft:clamp(96px,calc(62.04px + 5.66vw),120px);padding-top:var(--ft);padding-bottom:calc(var(--ft) + 74px + env(safe-area-inset-bottom,0px))} /* 下＝上＋バーの分 74 */
  .wf-info{font-size:var(--fs-body)}
  .wf-info a{font-size:max(15px,var(--fs-body))}
  .w-footer small{font-size:var(--fs-note)}

  /* メニュー画面（トップのタブレットと同じ）：英字 24 → 32・和文 12 → 13・ボタン幅 320・ロゴ 120 */
  .sm-nav{gap:8px}
  .sm-nav a{min-height:64px;gap:16px}
  .sm-en{font-size:32px}
  .sm-ja{font-size:13px}
  .sm-bar{width:320px}
  .sm-addr{font-size:13px;letter-spacing:.1em}
  .sm-logo img{width:120px;height:auto}
}

/* ---------- PC（1024px〜）：2列。大画面（1600px〜）は中身 1320 で止まる ---------- */
@media (min-width:1024px){
  :root{--wide:1320px}

  /* ヘッダー：ロゴ 左 40・幅 120／メニューの丸 60・右 40・上 40（トップと同じ） */
  .site-header .brand{top:20px;left:40px}
  .site-header .brand img{width:120px;height:81.34px}
  .menu-button{top:40px;right:40px;width:60px;height:60px;gap:5.25px;padding:0}
  .menu-button .menu-disc{left:0;top:0;width:60px;height:60px}
  .menu-button span{width:24.2px;height:2.1px}
  .sm-close{top:40px;right:40px;width:60px;height:60px;background:radial-gradient(circle,#fff 29.5px,transparent 30.5px)}
  .sm-close span{left:17.9px;top:28.95px;width:24.2px;height:2.1px}

  /* 下のバー：右下（右 40・下 40・384×60・角丸 60） */
  .a-bar{left:auto;right:40px;bottom:40px;transform:none;width:384px;max-width:none;height:60px;border-radius:60px}
  .a-bar>a,.a-bar>button{min-height:60px}
  .a-bar .ab-phone,.a-bar .ab-hol{font-size:15px;letter-spacing:.05em}
  .a-bar .ab-hol::before{top:14px;bottom:14px}
  .a-bar:has(>:active),.a-bar.is-press{transform:scale(.98)}
  .a-bar>a::after,.a-bar>button::after{border-radius:30px}

  /* 最初の画面：横長の写真（fv-pc.webp・松原さんにもらった元の写真から切り出し）。高さは画面の 62%（480〜680） */
  .fv{height:clamp(480px,62svh,680px);max-height:none}
  .fv>picture img{object-position:50% 50%} /* PC の写真は fv-pc.webp（11-03 松原さんにもらった元の写真 1817×1536 から、ハサミを中心に横長 1817×673 に切り出し） */
  .fv::after{height:180px} /* ロゴが大きくなった分、白いぼかしを長く */
  .fv-title{top:calc(50% + 40px);gap:8px}
  .fv-title small{line-height:1.8}

  /* 大きな見出し：行の箱 .75 → 8 → 日本語（トップの PC と同じ） */
  .sec-title{line-height:.75;gap:8px}
  .sec-title small{line-height:1.8}

  /* 2列の決まり：596：644・間 80（トップのサロン情報・フッターと同じ） */
  .message{max-width:calc(1320px + var(--gutter) * 2)}
  .message{margin:0 auto;display:grid;grid-template-columns:minmax(0,644fr) minmax(0,596fr);grid-template-areas:"t t" "ph co";column-gap:80px;align-items:center}
  .message .sec-title{grid-area:t}
  .msg-photo{grid-area:ph;max-width:none;width:100%;margin:0}
  .message .copy{grid-area:co;max-width:none;margin:0}
  .blk .body{max-width:1320px}

  /* Point：左に写真2枚（スクロールしてもついてくる）、右にカード4枚 */
  #point .body{display:grid;grid-template-columns:minmax(0,644fr) minmax(0,596fr);grid-template-areas:"t t" "pr pt";column-gap:80px;align-items:start}
  #point .sec-title{grid-area:t}
  .pair{grid-area:pr;position:sticky;top:max(140px,calc(50vh - 300px));margin-bottom:0}
  .points{grid-area:pt;grid-template-columns:1fr}
  .point{padding:72px 40px 40px}
  .point-no{top:28px}

  /* Welcome：左に文、右に写真 */
  #welcome .body{display:grid;grid-template-columns:minmax(0,596fr) minmax(0,644fr);grid-template-areas:"t t" "li so";column-gap:80px;align-items:center}
  #welcome .sec-title{grid-area:t}
  .list{grid-area:li}
  .solo{grid-area:so;margin:0}

  /* Requirements：表は読みやすい幅（880）の1列。2つの表の間は 48 */
  #requirements .body{max-width:880px}
  .req-label+*{margin-bottom:64px}
  .req>div{grid-template-columns:160px 1fr}
  .req dt{padding:16px 20px}
  .req dd{padding:14px 20px}
  .pay th,.pay td{padding:16px 20px}
  .pay thead th{padding:12px 16px}
  /* 列の幅をそろえる（職種 26%・正社員 37%・パート 37%。中身の長さで幅が変わらないように） */
  .pay{table-layout:fixed}
  .pay thead th:first-child{width:26%}
  .pay thead br{display:none} /* 「パート・アルバイト」を1行に（列の幅 37% で入る） */

  /* Support：左に写真、右に文 */
  .support .body{display:grid;grid-template-columns:minmax(0,644fr) minmax(0,596fr);grid-template-areas:"t t" "ph tx";column-gap:80px;align-items:center}
  .support .sec-title{grid-area:t}
  .sup-photo{grid-area:ph;margin:0}
  .support .body>div{grid-area:tx}

  /* Flow：4つを横に並べ、丸（40）を細い線でつなぐ。線は1つ目の丸の中心から4つ目の丸の中心まで */
  /* 4つの段は丸と文を中央にそろえ、線は1つ目の丸の中心から4つ目の丸の中心まで（11-03 松原さん「センタリングに」） */
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;width:100%}
  .steps::before{left:calc((100% - 72px) / 8);right:calc((100% - 72px) / 8);top:20px;bottom:auto;width:auto;height:1px}
  .steps li{display:flex;flex-direction:column;align-items:center;gap:20px;height:auto;text-align:center}
  .steps .no{width:40px;height:40px;font-size:18px;align-self:center;padding:5px 0 0 1px} /* 数字を丸の中央に（実測で補正） */

  /* Entry：横長の帯（中身の幅いっぱい）。上下 80。ボタンは 320×60 を横に2つ */
  .entry{padding:80px 40px}
  .entry .sec-title{margin-bottom:24px}
  .entry-btns{gap:24px}
  .pill{width:320px;min-height:60px;font-size:16px}
  .pill .num{font-size:18px}

  /* フッター（トップの PC と同じ）：左にロゴ 200 と住所、右にメニュー 2×2 と SNS。© は右下。上下 120 */
  .w-footer{display:grid;grid-template-columns:minmax(0,644fr) minmax(0,596fr);grid-template-rows:auto auto;column-gap:80px;row-gap:0;align-items:start;justify-items:start;text-align:left;padding:120px max(var(--gutter),calc((100vw - 1320px) / 2)) 120px;grid-template-rows:auto auto auto}
  .wf-logo{grid-column:1;grid-row:1}
  .wf-logo img{width:200px;height:auto}
  .wf-info{grid-column:1;grid-row:2;margin-top:42px;font-size:16px;line-height:2.1;opacity:1}
  .wf-zip{display:inline}
  .wf-info a{display:block;width:max-content;min-height:0;margin-top:16px;font-size:16px;line-height:2.1}
  .wf-right{grid-column:2;grid-row:1 / 4;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:40px}
  .wf-nav{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;column-gap:42px;row-gap:24px;justify-content:start}
  .wf-nav a{position:relative;min-height:0;padding:0;font-size:24px;line-height:1;letter-spacing:.04em}
  .wf-nav a::after{content:'';position:absolute;inset:-10px -8px} /* 押せる範囲だけ 44 に */
  .wf-sns{gap:40px}
  .wf-sns a{width:30px;height:30px}
  .wf-sns svg{width:30px;height:30px}
  .wf-sns a,.wf-info a{position:relative}
  .wf-sns a::after{content:'';position:absolute;inset:-7px} /* 押せる範囲だけ 44 に（見た目はトップと同じ 30） */
  .wf-info a::after{content:'';position:absolute;inset:-5px 0}
  /* © は左の列（電話の下）へ。右下に置くと、右下に浮いているバー（下から 40〜100）と 20px しか離れず窮屈だったため。上下とも 120 で、右下の空いた所にバーが来る */
  .w-footer small{position:static;grid-column:1;grid-row:3;margin-top:40px;font-size:14px}

  /* メニュー画面（トップの PC と同じ）：2列。左＝項目、右＝ロゴ → 住所 → 電話で予約する → SNS。2つの列は画面の上下の中央 */
  dialog.sm[open]{display:grid;grid-template-columns:minmax(0,644fr) minmax(0,596fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:80px;padding:0 max(var(--gutter),calc((100vw - 1320px) / 2))}
  .sm .sm-head{position:absolute;top:0;left:0;right:0;height:0}
  .sm .sm-nav{grid-column:1;grid-row:2 / 6;align-self:center;align-items:flex-start;gap:20px;margin:0;padding:0}
  .sm .sm-nav a{justify-content:flex-start;gap:24px;min-height:0;padding:4px 0;transition:translate .5s cubic-bezier(.22,1,.36,1)}
  .sm .sm-nav a:hover{translate:8px 0}
  .sm .sm-en{font-size:48px;line-height:1.1;letter-spacing:-.005em}
  .sm .sm-ja{font-size:14px;letter-spacing:.14em}
  .sm .sm-logo{grid-column:2;grid-row:2;align-self:end;justify-self:start;margin:0;padding:0}
  .sm .sm-logo img{width:160px;height:auto}
  .sm .sm-foot{display:contents}
  .sm .sm-addr{grid-column:2;grid-row:3;justify-self:start;margin:40px 0 0;font-size:16px;line-height:2;letter-spacing:.1em;text-align:left;opacity:1}
  .sm .sm-bar{grid-column:2;grid-row:4;justify-self:start;align-self:start;width:320px;height:60px;margin:32px 0 0;font-size:16px}
  .sm .sm-bar>a{min-height:60px}
  .sm .sm-sns{grid-column:2;grid-row:5;justify-self:start;align-self:start;margin:24px 0 0 -10px;gap:16px}
  .sm .sm-sns svg{width:24px;height:24px}
}

/* ---------- 応募フォーム（form.html）：タブレットから上は、読みやすい幅 640 の1列 ---------- */
@media (min-width:600px){
  .form-top{max-width:calc(640px + var(--gutter) * 2);margin:0 auto;padding-top:clamp(120px,calc(91.7px + 4.717vw),140px)} /* 「求人ページにもどる」もフォームと同じ列に */
  .form-top .lead,.sample{max-width:640px}
  .form{max-width:calc(640px + var(--gutter) * 2);padding-bottom:var(--sp-color)}
  :is(.field>label,.field>legend,.choice span,.agree){font-size:var(--fs-body)}
  :is(.hint,.err,.privacy){font-size:var(--fs-note)}
}
@media (min-width:1024px){
  .form-top{padding-top:180px}
  .submit{min-height:60px;font-size:16px}
}