@charset "UTF-8";
/* =========================================================
   磯口建設有限会社 採用サイト
   共通スタイル / assets/css/style.css
   カラー・寸法は Figma 書き出し(assets/design/TOP.png)からの実測値
   ========================================================= */

/* ---------- 1. トークン ---------- */
:root{
  /* 背景 */
  --bg:        #fcf5e9;  /* クリーム: ヘッダー / About / People / フッター */
  --bg-soft:   #fdfbf7;  /* オフホワイト: Company / Benefits */
  --white:     #ffffff;  /* カード / CTAセクション */

  /* 文字 */
  --ink:       #000000;  /* 本文・見出し・黒ボタン */
  /* パレットの暗い黄色。文字用のベースカラーだが、デザイン全体で使われているのは
     以下の2箇所だけ（2026-08-27 クライアント確認）。ここ以外に広げないこと。
       ・TOP: FV下 About Us の「"当たり前"」
       ・会社を知るページ: FV下（デザイン未共有／実装時に適用）
     他の黄色い文字は指定がない限りパレットどおり #E4C108（= --yellow）を使う。 */
  --yellow-tx: #b39604;
  /* Company の英字見出し "C" 専用の黄色。ここ1箇所だけの特例（2026-08-27 指示）。
     他セクションの英字ラベルや他の黄色には使わないこと。
     黄色は指定がない限りパレットどおり #E4C108（文字は --yellow-tx）を使う。 */
  --yellow-lbl: #e3be00;

  /* 差し色（濃い） */
  --blue:      #197297;
  --maroon:    #892f44;
  --yellow:    #e4c108;
  /* ヒーローのコピー帯・タグの地色。#E4C108 の透過74%（2026-08-27 指示） */
  --yellow-74: rgba(228,193,8,.74);
  --green:     #0e6e5f;

  /* 差し色（薄い・タイトル用） */
  --green-lt:  #15a992;  /* "About Us" の A。旧 --blue-lt #328ca0 から置き換え */
  --pink:      #e96c8a;  /* "People" の P */

  /* ロゴ */
  --logo-navy: #04255d;
  --logo-green:#05b152;

  /* レイアウト */
  --hd-h:      clamp(52px, 4vw, 58px);
  --cw:        1100px;                      /* コンテンツ幅（セクションで上書き可） */
  --gut:       clamp(20px, 6vw, 60px);      /* 左右の最小余白 */
  --sec-py:    clamp(56px, 7.5vw, 116px);   /* セクション上下 */

  /* タイプスケール（1522px フレーム基準の実測値に合わせる） */
  /* デザイン基準幅1522pxで 44px。行送りは --lh-hero が比率で追従する */
  --fs-hero:  clamp(1.75rem, 2.9vw, 2.75rem);
  /* ヒーローコピーの行送り 88px = 44px の2倍。黄色い帯の間隔はこの値で決まる
     （帯の高さは文字の em ボックス分しかないので、余った分が帯と帯の隙間になる） */
  --lh-hero:  2;
  /* 英字見出しの下の日本語見出し（磯口建設について / 会社を知る 等）。
     1522pxで 40px。英字見出し（--fs-label）と同じ式にして、どの幅でも
     2つの見出しが同じサイズになるようにしている */
  --fs-h2:    clamp(1.5rem, 2.63vw, 2.5rem);
  /* 英字見出し（About Us / Company / People / Benefits）。1522pxで 40px */
  --fs-label: clamp(1.5rem, 2.63vw, 2.5rem);
  --fs-lead:  clamp(1.25rem, 2.1vw, 2rem);
  /* セクション説明文。14px 固定（2026-08-27 変更。旧: 最大16px） */
  --fs-intro: .875rem;
  /* 説明文の行送り。指示どおり 23px（14px 比 1.64）。文字サイズを固定にしたので
     px 直指定でも狭い画面で間延びしない */
  --lh-intro: 23px;
  /* リンクボタン（btn--md）の文字。説明文と別管理。旧 --fs-intro と同値 */
  --fs-btn:   clamp(.9375rem, 1.1vw, 1rem);
  /* ヒーローのタグ（建築 / 不動産 / キャンプ場）。1522pxで 22px */
  --fs-tag:   clamp(1rem, 1.45vw, 1.375rem);
  --fs-body:  clamp(.875rem, 1vw, .9375rem);
  --fs-card:  clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-cta:   clamp(1.25rem, 2.2vw, 2rem);
  --fs-nav:   clamp(.75rem, .95vw, .8125rem);

  /* 英字セクションラベル（About Us / Company / People / Benefits）の太さ。
     Zen Kaku Gothic New は可変フォントではないので、指定できるのは
     読み込んでいる 300 / 400 / 500 / 700 / 900 のいずれかだけ。
     中間値（600 など）を入れるとブラウザが近い方に丸めるか合成太字になる。
     デザインPNGの実測は 300 相当だったが、線が細すぎるため 500 に調整（2026-08-26）。 */
  --fw-label: 400;

  /* リンクカードの円形矢印ボタンの直径。はみ出し量の計算にも使う */
  --arrow-size: clamp(36px, 3.2vw, 48px);
  /* 円をカード右端からどれだけ外へ出すか（直径に対する比率）。
     0.333 = 三分の一。0 で完全にカード内、0.5 で半分はみ出し。
     ※1024px 未満では適用されない（カードが縦1列になるため） */
  --arrow-out: 0.333;
  /* リンクカードの内側余白（はみ出し位置の基準）。枠を細く見せるため上下は詰めている */
  --lcard-px: clamp(16px, 1.7vw, 24px);
  --lcard-pt: clamp(14px, 1.35vw, 19px);
  --lcard-pb: clamp(9px, .85vw, 12px);
  --lcard-r:  42px;   /* リンクカードの角丸 */
  /* 福利厚生カードの内側余白。デザイン実測は 16.3px（カード左端 x=221 に対し
     本文左端 x=243）。28px は取りすぎだったので実測値に合わせる（2026-09-01 指示） */
  --bcard-px: 16px;
  --bcard-py: 16px;
  --bcard-r:  27px;   /* 白枠の角丸（リンクカードより背が高いぶん控えめに） */

  /* 「詳しく見る」系ボタンがカード右端から外へ出る量。
     リンクカード / 社員インタビュー / 福利厚生で共通に使う */
  --out-x: calc(var(--arrow-size) * var(--arrow-out));
  /* ホバー時にボタンが右へ「ぴょこん」と動く量（3種類で共通） */
  --nudge: 4px;

  /* ズレ影の色調整（ボタンと影が同色になるカードだけに適用）
     dark  = 通常時、アクセント色をこの割合で残し残りを黒（--ink）に寄せる
     lift  = ホバー時、アクセント色をこの割合で残し残りを白に寄せる */
  --shadow-dark: 66%;
  --shadow-lift: 58%;

  --r-lg: 24px;   /* 大きい角丸（リンクカード） */
  --r-about: 42px; /* About の写真と白枠。デザイン実測（2026-08-28） */
  --r-md: 14px;   /* 中くらい（写真・ボタン） */
  --r-sm: 8px;    /* タグ */
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ---------- 3. ベース ---------- */
body{
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:var(--fs-body);
  /* 英字見出し（.sec-label / .stub__label）以外は Bold（2026-08-27 指示）。
     見出し類は個別に 900 を指定しているのでここでは変わらない */
  font-weight:700;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;              /* 横スクロール禁止（仕様書 §7） */
  font-feature-settings:"palt" 1;
}

/* ---------- 4. ユーティリティ ---------- */
.container{
  width:min(var(--cw), 100% - var(--gut) * 2);
  margin-inline:auto;
}
/* 縦積みレイアウト（1023px以下）でだけ効く改行 */
.br-stack{display:none;}
@media (max-width:1023.98px){ .br-stack{display:inline;} }

.u-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 画像プレースホルダ（仕様書 §3）
   アスペクト比を固定しているので、画像が無くてもレイアウトは崩れない。
   読み込み中は無地のグレー、読み込みに失敗したときだけ
   data-label のファイル名を出して差し替え漏れが分かるようにする。 */
.ph{position:relative;background:#e6e2da;overflow:hidden;}
.ph::after{
  content:"";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#8a857c;font-size:.75rem;text-align:center;padding:8px;line-height:1.4;
  font-family:"Zen Kaku Gothic New",sans-serif;
}
.ph.is-missing::after{content:attr(data-label);}
.ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.ph.is-missing img{display:none;}      /* 画像が無い間はラベルを見せる（main.js が付与） */
.ph.is-loaded::after{content:none;}

/* WordPress 版では header.php / footer.php が body の直接の子として出力されるので
   静的版にあった [data-include]{display:contents} は不要。
   代わりに、ログイン中に出る管理バー（固定 32px）の下にヘッダーが潜らないようにする。 */
body.admin-bar .hd{top:32px;}
@media screen and (max-width:782px){
  /* この幅では管理バーが position:absolute になり追従しないので top は 0 に戻す */
  body.admin-bar .hd{top:0;}
}

/* ---------- 5. ヘッダー ---------- */
.hd{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:stretch;justify-content:space-between;
  height:var(--hd-h);
  padding-left:clamp(12px,1vw,14px);
  background:var(--bg);
  transition:box-shadow .25s ease;
}
.hd.is-stuck{box-shadow:0 2px 14px rgba(13,13,13,.08);}
/* ロゴだけ左、ナビ〜応募ボタンは右端へ寄せる（2026-08-27 指示）。
   justify-content:space-between のままだとナビが中央に取り残される */
.hd__logo{display:flex;align-items:center;flex:0 0 auto;margin-right:auto;}
/* デザイン実測: ヘッダー 約42x39px / フッター 約82x75px */
.hd__logo .logo{height:calc(var(--hd-h) * .70);width:auto;}
.hd__nav{display:flex;align-items:stretch;}
.hd__list{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);padding-right:clamp(18px,2.4vw,34px);}
.hd__list a{
  font-size:var(--fs-nav);font-weight:700;letter-spacing:.08em;
  padding:4px 2px;position:relative;white-space:nowrap;
}
.hd__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:center;transition:transform .25s ease;
}
.hd__list a:hover::after,
.hd__list a.is-current::after{transform:scaleX(1);}
.hd__apply{
  display:flex;align-items:center;
  padding-inline:clamp(16px,1.9vw,26px);
  background:var(--ink);color:#fff;
  font-size:var(--fs-nav);font-weight:700;letter-spacing:.08em;white-space:nowrap;
  transition:opacity .2s ease;
}
.hd__apply:hover{opacity:.82;}
.hd__burger{display:none;}

/* ロゴ画像が無いときのテキスト代替 */
.hd__logo .logo-alt,.ft__logo .logo-alt{display:none;font-weight:700;letter-spacing:.06em;font-size:.95rem;}
.hd__logo.is-missing .logo,.ft__logo.is-missing .logo{display:none;}
.hd__logo.is-missing .logo-alt,.ft__logo.is-missing .logo-alt{display:block;}

/* ---------- 6. セクション見出し ---------- */
.sec{position:relative;padding-block:var(--sec-py);overflow:hidden;}
.sec__head{margin-bottom:clamp(28px,3.4vw,50px);}
.sec__head--center{text-align:center;}
.sec-label{
  font-family:"Zen Kaku Gothic New",sans-serif;font-weight:var(--fw-label);
  font-size:var(--fs-label);line-height:1.2;letter-spacing:.01em;color:var(--ink);
}
/* アクセント色を「文字」に使う箇所は --accent-tx を優先し、
   指定がなければ --accent（＝塗りと同じ色）がそのまま使われる。
   現在 --accent-tx を指定しているのは Company セクションの1箇所だけで、
   英字見出し "C" を特例の --yellow-lbl(#E3BE00) にするためのもの。
   カード側の --accent-tx:initial は、この Company の指定が
   セクションから継承されてカード見出しまで #E3BE00 になるのを防ぐための打ち消し。 */
.sec-label span{color:var(--accent-tx,var(--accent,var(--blue)));}
.sec-h2{
  /* 太さは 900（Black）→ 700（Bold）に変更（2026-08-27 指示） */
  font-size:var(--fs-h2);font-weight:700;line-height:1.35;letter-spacing:.04em;
  margin-top:.15em;
}
.sec-h2 .lead-char{color:var(--accent-tx,var(--accent,var(--blue)));}
.sec-intro{
  font-size:var(--fs-intro);line-height:var(--lh-intro);font-weight:700;
  margin-top:clamp(20px,2.4vw,34px);
}

/* ---------- 7. 波線ディバイダ（セクション上端の曲線境界） ---------- */
.wave{
  position:absolute;top:0;left:0;width:100%;
  height:clamp(70px,15.6vw,238px);
  pointer-events:none;z-index:0;
}
.wave--short{height:clamp(48px,9.8vw,149px);}
.wave svg{width:100%;height:100%;display:block;}
.wave__fill{fill:var(--bg);}
.wave__line{
  fill:none;stroke:var(--yellow);
  stroke-width:clamp(3px,.55vw,8px);
  vector-effect:non-scaling-stroke;stroke-linecap:round;
}

/* ---------- 8. ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  background:var(--ink);color:#fff;font-weight:700;letter-spacing:.08em;
  border-radius:var(--r-md);transition:opacity .2s ease,transform .2s ease;
}
.btn:hover{opacity:.85;transform:translateY(-2px);}
.btn--md{padding:.85em 2.4em;font-size:var(--fs-btn);}
.btn--xl{
  /* 「応募はこちら」は 32px 固定（2026-09-01 指示）。
     SP幅だけは 767px 以下のメディアクエリで縮める（§20） */
  display:flex;width:min(100%,985px);
  padding:clamp(20px,2.4vw,34px) 1em;
  font-size:2rem;margin-inline:auto;
}

/* 円形の矢印ボタン（Company / People カード） */
.arrow-c{
  flex:0 0 auto;display:grid;place-items:center;
  width:var(--arrow-size);aspect-ratio:1;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.9rem;
  transition:translate .2s ease;
}
/* ピル型ボタン（Benefits カード） */
.pill{
  /* 高さ27px・角丸15pxの固定指定（2026-09-01 指示）。
     文字サイズが変わっても高さが揺れないよう、上下パディングではなく height で決める */
  display:inline-flex;align-items:center;gap:.5em;
  height:27px;padding:0 1.15em;border-radius:15px;
  background:var(--accent);color:#fff;font-weight:700;font-size:var(--fs-body);
  letter-spacing:.06em;transition:opacity .2s ease,translate .2s ease;
}
.pill:hover{opacity:.85;}
/* ホバー：リンクカードの丸ボタンと同じく右へ「ぴょこん」 */
.bcard:hover .pill{translate:var(--nudge) 0;}

/* ---------- 9. ヒーロー ---------- */
.hero{position:relative;height:clamp(460px,45vw,700px);}
.hero__media{position:absolute;inset:0;}
/* <picture> が箱を作ると .ph img のレイアウトが崩れるので透過させる */
.hero__media picture{display:contents;}
/* ヒーロー写真の表示位置。枠より画像が大きいときに、どこを残すかを決める。
   --hero-x : 0%=左端を残す / 50%=中央 / 100%=右端を残す
   --hero-y : 0%=上端を残す / 50%=中央 / 100%=下端を残す
   SP用の値は §20 のメディアクエリ側で上書きする。 */
.hero__media img{object-position:var(--hero-x,50%) var(--hero-y,50%);}
.hero__media.ph::after{font-size:1rem;}
.hero__inner{
  position:absolute;z-index:2;
  left:clamp(20px,7.5vw,115px);
  /* ヒーロー画像の下辺と、タグ下端との余白（2026-09-01 指示）。
     数値を変えるとコピー＋タグのかたまりが上下に動く。 */
  bottom:var(--hero-pad-b,45px);
  right:clamp(20px,7.5vw,115px);
}
.hero__copy{
  font-size:var(--fs-hero);font-weight:700;line-height:var(--lh-hero);letter-spacing:.02em;
  color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);
}
/* 各行を inline のまま帯にする。box-decoration-break:clone で
   折り返しても左右の padding が両端に付く。
   帯の高さ＝文字の em ボックス（≒ font-size × 1.44）なので、
   line-height 88px との差が上下に振り分けられて行間の隙間になる。 */
.hero__copy span{
  display:inline;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:var(--yellow-74);
  /* padding-block は行ボックスの高さを変えない（inline 要素なので）。
     line-height 88px の余りが隙間として残るぶんだけ帯を厚くしている */
  padding-block:.14em;padding-inline:.3em;
}
.hero__tags{display:flex;flex-wrap:wrap;gap:clamp(8px,.9vw,13px);margin-top:clamp(16px,1.8vw,26px);}
.hero__tags li{
  background:var(--yellow);color:#fff;
  font-weight:700;font-size:var(--fs-tag);letter-spacing:.1em;
  /* 箱の大きさは文字を22pxにする前（文字15px・padding .5em 1.15em・行送り1.65）の
     実寸のまま。em や継承の行送りのままだと文字を大きくした分だけ箱も膨らんで、
     デザインより角丸のピルが太くなるため、px で固定している。
     高さ = 24.75 + 7.5×2 = 39.75px（変更前と同じ）。横幅だけ文字の分だけ伸びる。 */
  line-height:var(--tag-lh,24.75px);
  padding:var(--tag-py,7.5px) var(--tag-px,17.25px);border-radius:var(--r-sm);
}
/* 360px未満ではタグが2段に折り返して写真を隠すので、
   折り返す代わりに文字とタグの箱を縮める（2026-09-01 指示）。
   幅320pxでは 必要296px > 使える272px と24px足りなかった。
   各値は「360pxのときちょうど通常サイズになる」係数にしてあるので、
   境目で急に大きさが変わらず、320pxへ向かってなめらかに縮む。 */
@media (max-width:359.98px){
  :root{--fs-tag:clamp(14px, 4.444vw, 1rem);}
  .hero__tags{gap:clamp(6px, 2.222vw, 8px);}
  .hero__tags li{
    --tag-lh:clamp(21px, 6.875vw, 24.75px);
    --tag-py:clamp(6px, 2.083vw, 7.5px);
    --tag-px:clamp(12px, 4.792vw, 17.25px);
  }
}

/* ---------- 10. About ---------- */
/* 左右の高さ合わせ（2026-08-28 指示）
   ゴール: 写真の高さと「見出し＋白枠」の高さを一致させる。
   写真の縦横比・文字サイズ・行送りは変えられないので、次の3つで調整している。
     1. 枠外の見出し（.about__lead / h3.about__subhead）と白枠の間の余白を 0 に
     2. 白枠の上下 padding を画面幅に応じて可変に
     3. 白枠内の段落間マージンを画面幅に応じて可変に
   そのうえで白枠を flex で写真の高さまで伸ばし、中身を上下中央に置く。
   → 白枠の「素の高さ」が写真より低ければ、伸びた分がそのまま余白になって
      左右の高さがピタリと揃う。
   ※ 余白の確保を優先しているため、揃うのは 1280〜1366px 付近だけ。
      それ以外の幅では本文のほうが背が高くなる（2026-08-28 指示で余白優先に変更）。
      各幅の実測値は README「About セクションの余白と高さ合わせ」参照。 */
/* コンテナ幅の上限を 1100 → 1320px に。
   上限に達する（＝写真が伸びなくなる）幅が 1220px → 1440px に上がる。
   計算: 上限に達する幅 = --cw + --gut×2 = 1320 + 60×2 = 1440（2026-09-01 指示）。
   左右余白を削って写真を大きくする方向なので、1440px時の余白は 170px → 60px。 */
.s-about{--cw:1320px;}
.about__grid{
  display:grid;grid-template-columns:minmax(0,475fr) minmax(0,585fr);
  gap:clamp(24px,2.8vw,40px);align-items:stretch;
}
/* 写真は縦横比を保ちたいので伸ばさない（stretch されると比率が崩れる） */
.about__photo,.about__subphoto{align-self:start;}
/* テキスト側のカラム。白枠を余りいっぱいまで伸ばすため縦フレックスにする */
.about__col{display:flex;flex-direction:column;}
.about__photo{border-radius:var(--r-about);aspect-ratio:475/438;}
.about__lead{
  font-size:var(--fs-lead);font-weight:700;line-height:1.6;letter-spacing:.03em;
}
.about__lead em{font-style:normal;color:var(--yellow-tx);}
.about__box{
  background:var(--white);border-radius:var(--r-about);
  /* 余白の下限（2026-08-28 指示で見直し）。
     上下は 1440px 時の見え方（16px）を最低ラインにした。flex:1 で写真の高さまで
     伸びるぶんには余白が増えるが、ここより狭くはならない。
     左右は 18px → 30〜44px に拡大。左右を広げると本文の折り返しが増えて
     背が高くなるため、高さが揃う幅は狭まる（指示どおり余白を優先）。 */
  padding:clamp(16px, 1.45vw, 22px) clamp(30px, 2.9vw, 44px);
  margin-top:0;                       /* 枠外の見出しと枠の間はあけない */
  flex:1;                             /* 写真の高さまで伸びる */
  display:flex;flex-direction:column;justify-content:center;
}
/* 段落間も可変。1522pxで15px、狭いほど詰める */
/* 段落間はデザインどおり「1行分」＝ line-height と同じ高さ（2026-08-28 指示）。
   lh 単位が使えない古い環境向けに em のフォールバックを先に書いておく
   （1.65em = body の line-height と同値）。 */
.about__box p + p{margin-top:1.65em;margin-top:1lh;}

.about__sub{
  display:grid;grid-template-columns:minmax(0,640fr) minmax(0,422fr);
  gap:clamp(24px,2.9vw,44px);align-items:stretch;
  margin-top:clamp(40px,5vw,80px);
}
.about__subhead{font-size:var(--fs-lead);font-weight:700;line-height:1.5;letter-spacing:.03em;}
/* 白カードの外に出る見出しは、カード内テキストの左端に揃える */
h3.about__subhead{padding-left:clamp(0px,2.1vw,32px);margin-bottom:0;}
.about__subhead--accent{color:var(--green);}
.about__subphoto{border-radius:var(--r-about);aspect-ratio:418/356;}

/* ---------- 11. リンクカード（Company / People 共通） ---------- */
.lcard{
  /* --accent-tx はセクションから継承されてしまうので、カード側でいったん打ち消す。
     initial を入れた独自プロパティは「無効値」扱いになり、var() はフォールバック
     （= そのカードの --accent）を使う。黄色のカードだけ HTML 側で改めて指定する。 */
  --accent-tx:initial;
  display:block;position:relative;background:var(--white);
  border-radius:var(--lcard-r);
  padding:var(--lcard-pt) var(--lcard-px) var(--lcard-pb);
  /* ズレ影はアクセント色を暗く寄せる。
     丸ボタンが同じアクセント色なので、同色だと影に溶けて
     はみ出しが見えなくなるため（color-mix 非対応時は下段が効かず素のアクセント色） */
  box-shadow:10px 10px 0 var(--accent);
  box-shadow:10px 10px 0 color-mix(in srgb, var(--accent) var(--shadow-dark), var(--ink));
  transition:translate .22s ease,box-shadow .22s ease;
}
/* ホバー：カードが影のほうへ沈み込み、影に白を足して明度を上げる。
   移動は transform ではなく translate プロパティを使う。transform を使う他の
   指定（.iv__badge の translateY など）と合成でき、打ち消し合わないため。 */
.lcard:hover{
  translate:4px 4px;
  box-shadow:5px 5px 0 var(--accent);
  box-shadow:5px 5px 0 color-mix(in srgb, var(--accent) var(--shadow-lift), #fff);
}
.lcard:hover .arrow-c{translate:var(--nudge) 0;}
.lcard__ttl{
  font-size:var(--fs-card);font-weight:700;letter-spacing:.12em;color:var(--accent-tx,var(--accent));
  line-height:1.4;
}
.lcard__txt{font-size:var(--fs-body);margin-top:.5em;line-height:1.7;}
.lcard__more{
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,1vw,16px);
  margin-top:clamp(2px,.4vw,6px);
  font-size:var(--fs-body);font-weight:700;letter-spacing:.08em;color:var(--accent-tx,var(--accent));
}

/* PC: 丸ボタンをカード右端にまたがせ、直径の 1/3 を外へはみ出させる。
   1023px 以下（カードが縦1列になる幅）では通常のフロー配置のまま。 */
@media (min-width:1024px){
  .lcard__more{
    /* 矢印がフローから抜けた分の高さを確保して、カードの縦寸法を維持する */
    min-height:var(--arrow-size);
    /* テキストが円の下に潜らないよう、円がカード内にかかる分だけ空ける */
    padding-right:calc(
      var(--arrow-size) * (1 - var(--arrow-out)) - var(--lcard-px) + clamp(10px,1vw,16px)
    );
  }
  .lcard .arrow-c{
    position:absolute;
    right:calc(var(--out-x) * -1);   /* 直径の 1/3 がカードの外へ */
    bottom:var(--lcard-pb);
  }
}

/* ---------- 12. Company ---------- */
.s-company{background:var(--bg-soft);padding-top:clamp(96px,12vw,182px);--cw:1100px;}
/* 英字ラベル・日本語見出し・導入文の左端を揃える。
   fit-content で「導入文の1行ぶんの幅」の箱を作り、それをセンタリングする。
   ラベルと見出しは箱の左端に揃い、導入文は箱の中で中央揃え（1行なら見た目は左揃えと同じ、
   折り返したときだけ中央に寄る）。 */
.s-company .sec__head{width:fit-content;max-width:100%;margin-inline:auto;}
.s-company .sec-intro{text-align:center;}
.s-company .lcards{
  /* カード間のアキは 18/2vw/30px の 1.5倍（2026-08-27 指示） */
  display:flex;flex-direction:column;gap:clamp(27px,3vw,45px);
  margin-top:clamp(30px,3.4vw,50px);
}
/* デザイン実測: カード幅 約480px、右端からのオフセットは 253 / 0 / 102px の互い違い。
   幅は本文が1行に収まるよう 500px に微増（実測 432px + 左右余白） */
.s-company .lcard{width:min(100%,500px);}
.s-company .lcard:nth-child(1){margin-left:auto;margin-right:clamp(0px,16.6vw,253px);}
.s-company .lcard:nth-child(2){margin-left:auto;margin-right:0;}
.s-company .lcard:nth-child(3){margin-left:auto;margin-right:clamp(0px,6.7vw,102px);}

/* 円形コラージュ。円の位置・大きさは箱に対する割合なので、
   箱の大きさが変わっても配置の相対関係（円どうしの接点）は保たれる。 */
.collage .circ{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  aspect-ratio:1;border-radius:50%;
}
/* PC は絶対配置でセクション全体の背景、SP は通常フローの箱として同じ配置を縮小表示 */
@media (min-width:1024px){
  /* コラージュの箱はデザイン（幅2048 : 高さ1393）の比率で固定する。
     セクションの高さは中身で変わるため inset:0 にすると --y(%) が伸び縮みし、
     円どうしが接している配置が崩れてしまう。幅に連動させて接点を保つ。 */
  .collage{
    display:block;position:absolute;top:0;left:0;width:100%;
    aspect-ratio:2048 / 1393;
    z-index:0;pointer-events:none;
  }
  /* コラージュの箱は幅に比例して伸びる（高さ = 幅 × 1393/2048 = 0.6802）が、
     セクションの高さは中身どまり（コンテナ幅1100pxで頭打ち＝約1041px）なので、
     1760px あたりから下の円が overflow:hidden で切れていた。
     セクションに下限の高さを与えて、足りないぶんは下の余白として伸ばす（2026-09-01 指示）。
     vw はスクロールバーを含むぶん実幅より少し大きく、常に安全側（少し余る）に働く。 */
  .s-company{min-height:68.1vw;}
  /* コラージュは .container の中にあるが、絶対配置の基準は .sec（position:relative）。
     .container を positioned にすると基準がコンテナ幅になってしまうので positioned にしない。
     代わりに文字とカードだけ重ね順を上げる。 */
  .s-company .sec__head,
  .s-company .lcards{position:relative;z-index:1;}
}
@media (max-width:1023.98px){
  /* SP専用の並び（2026-09-01 指示）。
     PCでは右に離れている「代表」も含めて5枚すべてを一番大きい円（社屋）に接地させ、
     箱の左右いっぱい（左端0% / 右端100%）に広げる。
     座標は HTML 側の --sx / --sy / --sw を使う（PC用の --x/--y/--w とは別系統）。
     箱の比率 1482:1000 は、5枚が接した状態の外接矩形から算出した値。 */
  .collage{
    /* width:auto にしないと負マージンで左へ寄るだけで幅が広がらない
       （flex の stretch に任せて、負マージンぶん横に伸ばす） */
    display:block;position:relative;width:auto;
    aspect-ratio:1482 / 1000;
  }
  .collage .circ{left:var(--sx);top:var(--sy);width:var(--sw);}
  /* 会社を知る: 縦並びのときは英字・日本語見出しも中央寄せ（2026-09-01 指示） */
  .s-company .sec__head{text-align:center;}
  /* コンテナの左右余白を打ち消して画面幅いっぱいに広げる（100vw だとPCのスクロールバーぶん溢れるため
     --gut の負マージンで正確に画面幅へ合わせる） */
  .collage--company{margin-inline:calc(var(--gut) * -1);}
  .s-company .sec__head{width:auto;}
}

/* ---------- 13. People ---------- */
.s-people{--cw:1140px;}
.people__grid{
  display:grid;grid-template-columns:minmax(0,498fr) minmax(0,567fr);
  gap:clamp(24px,4.8vw,74px);align-items:start;
  margin-top:clamp(30px,3.4vw,50px);
}
.people__cards{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,42px);}
/* 左のカード3枚と右の写真の高さを 1440px で揃えるための調整（2026-08-27 指示）。
   左は 500px / 右は 464.9px と 35.1px 差があったので、
   写真の上下アキを +14px、カードの上下パディングを 1枚あたり -7px に振り分けた。
   文字サイズは変更していない。Company のカードには影響させない。 */
.people__cards .lcard{
  --lcard-pt: clamp(11px, 1.04vw, 16px);
  --lcard-pb: clamp(7px,  .67vw, 11px);
}
.people__photos{display:grid;gap:clamp(20px,2.9vw,46px);align-content:start;}
.people__photos .ph{border-radius:var(--r-md);}
.people__photos .wide{aspect-ratio:566/184;}
.people__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);}
.people__pair .ph{aspect-ratio:265/247;}

/* ---------- 14. 社員インタビュー ---------- */
.s-interview{--cw:1120px;padding-top:0;}
.iv__grid{
  /* 左右のアキを詰めてカード幅を稼ぎ、1180px 幅まで「一言」が1行に収まるようにする
     （2026-08-27 指示）。旧値 clamp(20px,6vw,92px) */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,5.6vw,68px);
}
.iv{
  /* --accent-tx はセクションから継承されてしまうので、カード側でいったん打ち消す。
     initial を入れた独自プロパティは「無効値」扱いになり、var() はフォールバック
     （= そのカードの --accent）を使う。黄色のカードだけ HTML 側で改めて指定する。 */
  --accent-tx:initial;
  display:block;position:relative;background:var(--white);
  border-radius:var(--r-md);
  box-shadow:10px 10px 0 var(--shadow);
  transition:translate .22s ease,box-shadow .22s ease;
}
.iv:hover{translate:4px 4px;box-shadow:5px 5px 0 var(--shadow);}
.iv__photo{aspect-ratio:307/207;border-radius:var(--r-md) var(--r-md) 0 0;}
/* 左右の内側余白はデザイン実測が約18px（役職の左端がカード左端から17.1px）。
   26px は取りすぎだったので実測値に合わせる。これも「一言」の1行化に効く。 */
.iv__body{position:relative;padding:clamp(16px,1.7vw,24px) clamp(14px,1.25vw,18px) clamp(20px,2vw,28px);}
.iv__badge{
  /* z-index: .ph img が z-index:1 を持つため、指定しないと写真の下に潜る */
  position:absolute;z-index:2;top:0;right:clamp(12px,1.4vw,20px);transform:translateY(-52%);
  display:grid;place-content:center;text-align:center;
  width:clamp(70px,6.6vw,100px);aspect-ratio:1;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:clamp(.625rem,.85vw,.8125rem);font-weight:700;letter-spacing:.04em;line-height:1.4;
  transition:translate .2s ease;
}
/* ホバー：リンクカードの丸ボタンと同じく右へ「ぴょこん」。
   縦のズラし(transform)はそのまま残り、translate と合成される */
.iv:hover .iv__badge{translate:var(--nudge) 0;}
/* 役職と氏名だけ 16px 固定。氏名の色は役職に合わせる（2026-08-27 指示） */
.iv__role{font-size:1rem;font-weight:700;letter-spacing:.1em;color:var(--accent-tx,var(--accent));}
.iv__name{font-size:1rem;font-weight:700;letter-spacing:.08em;margin-top:.15em;color:var(--accent-tx,var(--accent));}
.iv__rule{border:0;border-top:2px dotted var(--accent);margin:clamp(12px,1.3vw,18px) 0 clamp(14px,1.5vw,20px);}
.iv__quote{font-size:var(--fs-body);font-weight:700;line-height:1.7;}
/* PC: リンクカードと同じ量だけカード右端から外へ出す。
   ズレ影(--shadow)はバッジ(--accent)と別色なので、影のダーク化は不要。 */
@media (min-width:1024px){
  .iv__badge{right:calc(var(--out-x) * -1);}
}
.iv__more{text-align:center;margin-top:clamp(32px,4vw,60px);}

/* ---------- 15. Benefits ---------- */
/* コンテナ幅は 1210px → 1300px。カード幅を稼いで「保険・制度」の本文（31字・最長）を
   1行に収めるため（2026-09-01 C案）。他セクション（About 1100 / People 1140 /
   インタビュー 1120）より広いので、このセクションだけ左右に張り出す。 */
.s-benefits{background:var(--bg-soft);padding-top:clamp(80px,10vw,150px);--cw:1300px;}
.benefits__grid{
  display:grid;grid-template-columns:minmax(0,473fr) minmax(0,670fr);
  gap:clamp(24px,4.6vw,71px);align-items:center;
  margin-top:clamp(30px,3.4vw,50px);
}
.benefits__cards{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,34px);}
.bcard{
  /* --accent-tx はセクションから継承されてしまうので、カード側でいったん打ち消す。
     initial を入れた独自プロパティは「無効値」扱いになり、var() はフォールバック
     （= そのカードの --accent）を使う。黄色のカードだけ HTML 側で改めて指定する。 */
  --accent-tx:initial;
  display:block;position:relative;background:var(--white);border-radius:var(--bcard-r);
  padding:var(--bcard-py) var(--bcard-px);
  transition:translate .2s ease;
}
.bcard:hover{translate:0 -3px;}
.bcard__ttl{font-size:var(--fs-card);font-weight:700;letter-spacing:.1em;color:var(--accent-tx,var(--accent));}
.bcard__txt{font-size:var(--fs-body);margin-top:.5em;}
.bcard__act{display:flex;justify-content:flex-end;margin-top:clamp(10px,1.2vw,16px);}
/* PC: ピルボタンもリンクカードと同じ量だけカード右端から外へ出す。
   負のマージンで押し出すのでカードの高さは変わらない。
   このカードにはズレ影が無いので、影のダーク化は適用しない。 */
@media (min-width:1024px){
  .bcard .pill{margin-right:calc((var(--bcard-px) + var(--out-x)) * -1);}
}
.benefits__photos{position:relative;aspect-ratio:901/562;}
.benefits__photos .circ{position:absolute;border-radius:50%;aspect-ratio:1;}
.benefits__photos .circ:nth-child(1){left:0;top:0;width:56.6%;}
.benefits__photos .circ:nth-child(2){right:0;bottom:0;width:46.3%;}

/* ---------- 16. CTA ---------- */
.s-cta{background:var(--white);text-align:center;}
.cta__head{
  /* 「一緒に、未来を作りませんか？」は 24px 固定（2026-09-01 指示）。
     SP幅だけは 767px 以下のメディアクエリで縮める（§20） */
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,34px);
  font-size:1.5rem;font-weight:700;letter-spacing:.05em;
}
.cta__head::before,.cta__head::after{
  content:"";width:clamp(28px,3vw,46px);height:2px;background:var(--ink);flex:0 0 auto;
}
.cta__head::before{transform:rotate(58deg);}
.cta__head::after{transform:rotate(-58deg);}
.cta__btn-wrap{margin-top:clamp(26px,3vw,46px);}

/* ---------- 17. フッター ---------- */
.ft{background:var(--bg);}
.ft__inner{
  --cw:1780px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,60px);
  padding-block:clamp(34px,4vw,60px);
}
.ft__brand{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);}
.ft__logo .logo{height:clamp(52px,4.95vw,75px);width:auto;}
/* フッターの文字は 16px 固定（2026-09-01 指示）。社名・住所・ナビが対象 */
.ft__name{font-size:1rem;font-weight:700;letter-spacing:.06em;}
/* 社名と住所のアキ。1.9em だと社名+住所の箱がロゴより36px高くなり、
   上下中央揃えのぶん社名がロゴの上端より18px上に飛び出していた。
   デザイン実測（社名の上端がロゴ上端より約5px上）に合わせて詰める（2026-09-01 指示） */
.ft__addr{font-style:normal;font-size:1rem;font-weight:700;line-height:1.6;margin-top:.35em;}
.ft__nav{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,44px);}
.ft__nav a{font-size:1rem;font-weight:700;letter-spacing:.1em;white-space:nowrap;}
.ft__nav a:hover{opacity:.65;}
.ft__copy{
  background:var(--ink);color:#fff;text-align:center;
  padding-block:clamp(14px,1.6vw,22px);
  font-size:clamp(.6875rem,.85vw,.75rem);font-weight:700;letter-spacing:.06em;
}

/* ---------- 18. 準備中スタブページ ---------- */
.stub{
  display:grid;place-content:center;justify-items:center;text-align:center;
  gap:clamp(18px,2.4vw,32px);
  min-height:56svh;
  padding-block:clamp(80px,12vw,160px);
}
.stub__label{
  font-family:"Zen Kaku Gothic New",sans-serif;font-weight:var(--fw-label);
  font-size:var(--fs-label);color:var(--blue);
}
.stub__ttl{font-size:var(--fs-h2);font-weight:700;letter-spacing:.06em;}
.stub__txt{font-size:var(--fs-intro);line-height:var(--lh-intro);}

/* ---------- 19-b. 画像読み込み後の後始末 ----------
   支給画像は円形・角丸がアルファに焼き込み済み。
   そのままだとプレースホルダのグレー地が透明な角から透け、
   CSS の角丸と画像の角丸が二重にかかるので、読み込み後は両方を無効化する。
   （このブロックはコンポーネント定義より後に置いて、同詳細度でも勝たせている） */
.ph.is-loaded{background:none;border-radius:0;}

/* ---------- 20. レスポンシブ ---------- */
@media (min-width:768px){
  .hd__apply--in{display:none;}
}

@media (max-width:1023.98px){
  /* 縦並びのときは左右の余白が足りないという指摘。約1.8倍に広げる（2026-09-01 指示）
     20/6vw/60px → 36/10.8vw/96px。.container と、コラージュの画面幅いっぱい指定に効く。 */
  :root{--gut:clamp(36px, 10.8vw, 96px);}

  .about__grid,.about__sub,.people__grid,.benefits__grid{grid-template-columns:minmax(0,1fr);}
  /* 枠の比率を画像の実比率に合わせ、中心切り抜きではなく全体が入るようにする
     （2026-09-01 指示）。01.webp=475×438 / 02.webp=418×356 */
  .about__photo{aspect-ratio:475/438;}
  .about__subphoto{aspect-ratio:418/356;}
  /* 社員を知る: 説明 → 写真 → リンク の順に並べ替え */
  .people__photos{order:1;}
  .people__cards{order:2;}
  /* 「社員インタビュー」見出しの上に余白を足す */
  .s-interview{padding-top:clamp(40px,9vw,72px);}
  /* About Us: 白枠なし。写真 → 小見出し → 説明 の順に縦積み（2026-09-01 指示） */
  .about__col{display:block;}
  .about__box{
    flex:none;display:block;
    background:none;border-radius:0;padding:0;
    margin-top:clamp(14px,3.2vw,20px);
  }
  h3.about__subhead{padding-left:0;margin-bottom:clamp(10px,1.2vw,18px);}
  /* 下段の「前を向ける人へ。」は、上の「はじめてでも、／経験があっても。」の
     続きの行として同じ行間で並べる（2026-09-01 指示）。
     見出しと本文ブロックのアキを 0 にすると、どちらも .about__subhead で
     同じ font-size / line-height なので、そのまま3行目として続く。 */
  .about__sub h3.about__subhead{margin-bottom:0;}
  .about__sub .about__box{margin-top:0;}
  /* 下段は写真が先、その下に小見出し＋説明 */
  .about__sub .about__subphoto{order:1;}
  .about__sub .about__col{order:2;}

  /* 会社を知る: 見出し → 説明 → リンク → 写真 */
  .s-company .container{display:flex;flex-direction:column;}
  .s-company .sec__head{order:1;}
  .s-company .lcards{order:2;}
  .collage--company{order:3;margin-top:clamp(28px,6vw,44px);}
  .s-company .lcard{width:100%;}
  .s-company .lcard:nth-child(1),
  .s-company .lcard:nth-child(2),
  .s-company .lcard:nth-child(3){margin-left:0;margin-right:0;}

  /* 福利厚生: 見出し → 説明 → 写真 → リンク */
  .benefits__photos{order:1;}
  .benefits__cards{order:2;}

  .iv__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,40px);}
  .benefits__photos{aspect-ratio:16/9;}
}

@media (max-width:767.98px){
  /* SPの見出しサイズ（2026-09-01 指示・FB反映で縮小）
     42px/40px は 425px 幅でも大きすぎるとの指摘。画面幅に比例する式に変え、
     425px のとき 英字34px / 日本語32px（従来比 約-20%）になる係数にした。
     英字と日本語の比（42:40 = 1.05）はそのまま維持。
     上限は従来の 42/40px（幅525px前後で到達）、下限は 23/22px。 */
  :root{
    --fs-label: clamp(1.4375rem, 8.0vw,  2.625rem);
    --fs-h2:    clamp(1.375rem,  7.53vw, 2.5rem);
  }
  /* 準備中ページの見出しは最長10文字（プライバシーポリシー）なので別係数 */
  .stub__ttl{font-size:clamp(1.5rem, 7.6vw, 2.5rem);}
  .stub__label{font-size:clamp(1.575rem, 7.98vw, 2.625rem);}

  /* ヘッダー: ハンバーガー */
  /* ハンバーガーは黒地に白線（2026-09-01 指示）。ヘッダー全体の地色は変えない */
  .hd__burger{
    display:grid;place-content:center;gap:5px;
    width:var(--hd-h);height:var(--hd-h);flex:0 0 auto;order:3;
    background:var(--ink);
  }
  .hd__burger span:not(.u-sr){
    display:block;width:22px;height:2px;background:#fff;
    transition:transform .25s ease,opacity .25s ease;
  }
  .hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ヒーロー（SP）。原本 fv03 の高さをフルに使った 764×1108 に差し替え済みなので、
     320〜428px では上下左右いずれも切れずに全体が入る。 */
  .hero{height:clamp(460px,145vw,620px);}
  /* ★ SPのヒーロー写真の位置調整はこの2つの数値だけを変える
        --hero-x  左右: 0%=左寄せ / 50%=中央 / 100%=右寄せ
        --hero-y  上下: 0%=上寄せ / 50%=中央 / 100%=下寄せ  */
  :root{
    --hero-x:50%;
    --hero-y:50%;
  }

  .hd > .hd__apply{display:none;}
  .hd__nav{
    position:fixed;inset:var(--hd-h) 0 auto 0;
    flex-direction:column;align-items:stretch;
    background:var(--bg);
    padding:8px clamp(20px,6vw,32px) 28px;
    box-shadow:0 14px 24px rgba(13,13,13,.1);
    max-height:calc(100svh - var(--hd-h));overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .hd__nav.is-open{transform:none;opacity:1;visibility:visible;}
  .hd__list{flex-direction:column;align-items:stretch;gap:0;padding-right:0;}
  .hd__list a{display:block;padding:15px 2px;font-size:.9375rem;border-bottom:1px solid rgba(13,13,13,.1);}
  .hd__list a::after{display:none;}
  .hd__list a.is-current{color:var(--blue);}
  .hd__apply--in{justify-content:center;margin-top:18px;padding:15px;border-radius:var(--r-md);}

  .iv__grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,8vw,44px);}
  .lcard{box-shadow:7px 7px 0 var(--accent);}
  .iv{box-shadow:7px 7px 0 var(--shadow);}
  /* フッターはメニューが上、会社情報が下。メニューは縦並び。
     会社情報はデザインどおりロゴと社名・住所を横並びのまま（2026-09-01 指示） */
  .ft__inner{flex-direction:column;align-items:flex-start;gap:clamp(28px,7vw,40px);}
  .ft__nav{order:1;flex-direction:column;gap:clamp(12px,3.4vw,16px);}
  .ft__brand{order:2;}
  /* SP: 24px/32px のままだと1行に収まらないので、この幅だけ縮める（上限は指定値） */
  .cta__head{gap:10px;font-size:clamp(1.0625rem,4.4vw,1.5rem);}
  .btn--xl{font-size:clamp(1.25rem,5.6vw,2rem);}
}

@media (max-width:359.98px){
  .cta__head::before,.cta__head::after{width:20px;}
}

/* ---------- 14. ブログ土台（お知らせ）---------- */
/* 当面は非公開。テーマとして成立させるための最小限のスタイル。 */
.blog__list{list-style:none;margin:0 auto;padding:0;max-width:760px;}
.blog__item + .blog__item{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
.blog__link{
  display:flex;gap:clamp(12px,2vw,24px);align-items:baseline;
  padding:clamp(14px,1.6vw,20px) 4px;
  color:var(--ink);text-decoration:none;
}
.blog__link:hover .blog__ttl{text-decoration:underline;}
.blog__date{flex:0 0 auto;font-size:var(--fs-body);opacity:.7;font-feature-settings:"palt";}
.blog__ttl{font-size:var(--fs-card);line-height:1.6;}
.blog__single{max-width:760px;margin:0 auto;}
.blog__body{font-size:var(--fs-body);line-height:2;}
.blog__body > * + *{margin-top:1.2em;}
.blog__body img{height:auto;border-radius:12px;}

@media (max-width:559.98px){
  .blog__link{flex-direction:column;gap:4px;}
}