/* ============================================================================
   ワークスHP スマートフォン（SP）レスポンシブ — 全ページ共通で最後に読み込む
   ----------------------------------------------------------------------------
   PC版は 1920px 設計を transform: scale() で等比縮小しているが、
   390px 幅では約0.2倍（本文18px → 3.7px相当）になり実用にならない。
   そこで 767px 以下では

     ・縮小（transform: scale）をやめる … 各ページ末尾のスクリプトが早期リターン
     ・.stage の絶対配置をすべて解除し、DOM順の縦1カラムに流す
     ・1920px 前提の <br> と white-space: nowrap を無効化して自然折り返しに
     ・ヘッダーはハンバーガー＋ドロワー

   という作り方にしている。PC側のCSS・座標には一切手を入れていない。

   ■ 背景（PCのものをそのまま使う）
     PCの背景はセクションごとの絶対座標に置かれているが、SPは縦の流れが変わる。
     そこで下地（.bg-main / .bg-base / .bizbg / .msgbg / .bg167 / .wide-bg）は
     ページ全面に敷き直し、z-index:0 で本文の後ろに置いている。
     .stage の白背景より前に出す必要があるので、本文側は
     position:relative + z-index:1 にしてある（static ではない）。
     Entry/Contact の写真帯と関連コンテンツの白帯も、下の .sp-wrap で復活させた。

   ■ .sp-wrap （HTML側に入れたグルーピング div）
     PCは「カードの下敷き（白い角丸）」と「中身」が兄弟の絶対配置なので、
     SPで縦積みにすると下敷きが中身を包めない。そこで両者を .sp-wrap で囲み、
     SPではこの div にカードの背景・角丸・影を持たせている。
     PCでは .sp-wrap 自身を position:static、中身を absolute にしているので
     座標は .stage 基準のまま変わらない（css/style.css）。
       ecwrap   … Entry/Contact の写真帯＋パネル2枚（全ページ）
       relwrap  … 関連コンテンツの白帯（about/strengths/message/company）
       bwrap    … 仕事を知る の事業カード7枚
       pfwrap   … 代表メッセージ のプロフィールカード
       listwrap … ニュース一覧のカード
       artwrap  … ニュース記事のカード

   ■ SPで意図的に省いているもの
     ・HOME と 仕事を知る の「事業アイコン7つ」（丸＋アイコン＋ラベル）
       … 3種が兄弟要素で縦積みすると順序が崩れるため。内容は下の事業カードと
         重複しているので、SPでは非表示にしている。
     ・HOMEのニュースカードの「お知らせ」タグ
       … カード3枚より後ろにまとまって置かれているため、カードごとに
         対応付けられない（HTMLの順序を変える必要がある）。
     ・ヒーローの暗幕（.hero-veil）
       … 写真に白文字を重ねるための下敷き。SPは文字を写真の下に出すので不要。
     ・各ヒーローの写真は、文字を重ねず「写真バナー＋紺の文字ブロック」に分離
       （白文字を写真に重ねると小画面で読みにくいため）
     ・斜めの装飾バー（.deco*）は、FVぶんだけSP用の座標を与えて残し、
       ページ途中のもの（1920px幅を前提にした長い帯）は出していない。
   ========================================================================== */

/* ============================================================================
   ハンバーガー（PCでは style.css 側で display:none）
   ========================================================================== */
@media (max-width: 767px) {

  /* ---------- 土台 ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  body.nav-open { overflow: hidden; }

  .stage-wrap { height: auto !important; overflow: visible; }
  .stage {
    /* PCと同じ position:relative のまま。全面に敷く背景レイヤーと
       FVの装飾バーの包含ブロックにするため（static にすると
       絶対配置の基準が画面全体になり、overflow:hidden でも切れない）。 */
    position: relative;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    /* 画面外にはみ出す装飾バーを切る（PCの .stage と同じ扱い） */
    overflow: hidden;
    /* FVを「375pxデザインの相対値」で組むため、この要素をコンテナにする。
       vw だとデザイン基準とズレる場面があるので cqw（コンテナ幅の1%）を使う。 */
    container-type: inline-size;
    padding: 64px 0 0;          /* 固定ヘッダーの高さ */
  }
  /* 1920px設計の絶対座標を解除してDOM順に流す。
     .sp-wrap（SPでカード／帯にまとめるためのグルーピングdiv／PCでは無効）の
     中身も同じように流す。position は static ではなく relative にして、
     ページ全面に敷いた背景レイヤー（z-index:0）より前に出す。 */
  .stage > *,
  .stage .sp-wrap > *,
  .stage .sp-band > * {
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important;
    max-width: 100%;
    box-shadow: none;
    z-index: 1;
  }
  /* 文字は自然折り返しに戻す */
  .stage, .stage * { white-space: normal !important; }
  /* 1920px幅に合わせた <br> は無効化（住所や箇条書きなど意味のある改行は残す） */
  .fv-lead br, .st-sub br, .frame .lead br, .news-body br, .news-title br,
  .hero-lead br, .hero-sub br, .hero-h1 br, .mv-p br, .sec-p br, .vcard .vtxt br,
  /* .pg-h1 は改行位置の指定があるので <br> を残す（下でフォントサイズを詰める） */
  .cbody br, .pg-lead br, .bbody br, .sbody br, .ssub br,
  .mtext .body br, .r-body br, .ec-txt br, .art-body br, .tl-text br,
  .p-form br, .g-note br { display: none; }

  /* 画像は基本フル幅 */
  .stage > img,
  .stage .sp-wrap > img,
  .stage .sp-band > img { width: 100% !important; height: auto !important; display: block; }

  /* .stage 直下の <a> や <span> は、PCでは絶対配置でブロック化されていたが、
     position を戻すと inline に戻って幅・余白が効かなくなるのでブロックにする */
  .stage > a, .stage > span,
  .stage .sp-wrap > a, .stage .sp-wrap > span,
  .stage .sp-band > a, .stage .sp-band > span { display: block; }

  /* ---------- ヘッダー ---------- */
  .hd {
    width: 100% !important; height: 64px;
    transform: none !important; margin-left: 0 !important;
    padding: 0 8px 0 20px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .hd > a { display: block; line-height: 0; }
  .hd-logo { position: static !important; width: 148px; height: auto; }

  .hd-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; padding: 0 11px;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hd-burger span {
    display: block; height: 2px; width: 100%;
    background: var(--navy); border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  body.nav-open .hd-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .hd-burger span:nth-child(2) { opacity: 0; }
  body.nav-open .hd-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ドロワー */
  .hd-menu {
    position: fixed; left: 0; top: 64px;
    width: 100%; height: calc(100vh - 64px);
    background: #FFFFFF;
    padding: 8px 24px 48px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0.3s;
    visibility: hidden;
  }
  body.nav-open .hd-menu { transform: translateX(0); visibility: visible; }

  .hd-nav {
    position: static !important;
    width: auto !important; height: auto !important;
    /* PC は align-items:center（横並び）。縦積みではこれが残ると
       各リンクが中央寄せ＋シュリンク幅になるので stretch に戻す */
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
  }
  .hd-nav a {
    width: auto !important; height: auto !important;
    padding: 18px 2px;
    font-size: 16px; line-height: 1.5; text-align: left;
    border-bottom: 1px solid rgba(0, 27, 68, 0.12);
  }
  .hd-actions {
    position: static !important;
    width: auto !important; height: auto !important;
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    margin-top: 28px;
  }
  .hd-btn { width: 100% !important; height: 56px; font-size: 15px; }

  /* ---------- 共通：写真の上に文字を重ねる枠 ----------
     ・.fvwrap … about / company / contact のFV（写真＋バッジ＋見出し＋本文）
     ・.stwrap … HOMEのステートメント帯（写真＋見出し＋サブ）
     どちらもPCと同じ重ね方。HTMLの .sp-wrap（PCでは無効なグルーピングdiv）を
     枠に見立て、写真を枠の全面＝本文の下端まで広げているので、
     文章量が増えても写真が足りなくなることはない。
     暗幕は .hero-veil（PCは横方向のグラデーション）ではなく ::after の
     縦グラデーションで作っている。縦積みでは下ほど暗くしたいため。
     FVは js/anim.js の SKIP に 'fvwrap' を入れてアニメーション対象外。 */
  .stage > .fvwrap,
  .stage > .stwrap {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 330px;
    padding: 96px 24px 34px;
    overflow: hidden;
  }
  .stage > .fvwrap::after,
  .stage > .stwrap::after {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg,
      rgba(0, 20, 52, 0.12) 0%,
      rgba(0, 20, 52, 0.60) 52%,
      rgba(0, 20, 52, 0.82) 100%);
    z-index: 0;
  }
  /* 写真は枠の全面に敷く（about は <img>、company/contact は <div><img>） */
  .stage > .fvwrap > img.hero-img,
  .stage > .fvwrap > .hero-photo,
  .stage > .stwrap > img.st-img {
    display: block !important;
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    max-width: none;
    overflow: hidden;
    object-fit: cover; object-position: center 32%;
    z-index: 0;
  }
  .fvwrap .hero-photo img {
    position: absolute !important;
    left: 0; top: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center 32% !important;
  }
  /* 文字（z-index は土台の「.stage > .sp-wrap > *」で 1、暗幕の 0 より前） */
  .fvwrap .hero-badge {
    display: flex !important; align-items: center; gap: 14px;
    margin: 0 0 14px;
  }
  .fvwrap .hero-badge .bar { width: 5px !important; height: 26px !important; flex: none; }
  .fvwrap .hero-badge span {
    width: auto !important; height: auto !important;
    font-size: 15px; line-height: 1.4;
  }

  /* ---------- 共通：見出しの型 ---------- */
  .lb {
    display: block;
    height: auto !important;
    padding: 0 24px;
    font-size: 12px; line-height: 1.4; letter-spacing: 0.28em;
    margin: 0 0 6px;
  }
  .sec-h {
    height: auto !important;
    padding: 0 24px;
    font-size: 24px; line-height: 1.55; letter-spacing: 0.06em;
    margin: 0 0 20px;
  }
  .sec-p {
    padding: 0 24px;
    font-size: 15px; line-height: 1.9; letter-spacing: 0.04em;
    margin: 0 0 28px;
  }

  /* ---------- 共通：紺の角丸ボタン ----------
     .stage を頭に付けているのは、土台の「.stage > *」「.stage > .sp-wrap > *」
     （詳細度 0,2,0）と並べて後勝ちさせるため。
     .bbtn は .sp-wrap.bwrap の中にあるので、これがないと高さ・幅が auto に戻る。 */
  .stage .btn, .stage .btn-company, .stage .ft-btn, .stage .bbtn {
    position: relative !important;
    left: auto !important; top: auto !important;
    /* display は「.stage > a」（詳細度0,1,1）より弱いので !important が必要 */
    display: flex !important; align-items: center; justify-content: center;
    width: 100% !important; max-width: 320px;
    height: 58px !important;
    margin: 0 auto !important;
    border-radius: 117px;
  }
  .btn .lbl, .btn-company .lbl, .ft-btn .lbl, .bbtn .lbl {
    position: static !important;
    width: auto !important; height: auto !important;
    font-size: 15px; line-height: 1; letter-spacing: 0.1em;
  }
  .btn .arw, .btn-company .arw, .ft-btn .arw, .bbtn .arw {
    position: absolute !important;
    left: auto !important; right: 24px; top: 50% !important;
    margin-top: -7px;
    border-left-width: 7px; border-top-width: 7px; border-bottom-width: 7px;
  }

  /* ---------- 共通：関連コンテンツ ----------
     PCは .white-329（全幅の白帯）の上に並んでいる。SPは .sp-wrap.relwrap を
     その白帯に見立てる（.white-329 自体は中身を持てないので非表示）。 */
  .stage > .relwrap {
    background: #FFFFFF;
    margin: 8px 0 0 !important;
    padding: 48px 0 8px;
  }
  .lb-related, .h-related { padding: 0 24px; }
  .lb-related { font-size: 12px; line-height: 1.4; letter-spacing: 0.28em; margin: 0 0 6px; }
  .h-related { font-size: 24px; line-height: 1.55; margin: 0 0 20px; }
  .rel-btn {
    position: relative !important;
    display: block;
    width: calc(100% - 48px) !important;
    height: auto !important;
    margin: 0 24px 16px !important;
    border-radius: 12px;
    overflow: hidden;
  }
  /* カードは横幅いっぱいだと背が高すぎるので、元画像（395×249）を
     395×150 相当に切り詰めて低いカードにしている */
  .rel-btn img {
    width: 100% !important; height: auto !important;
    aspect-ratio: 395 / 150;
    object-fit: cover;
  }
  .rel-ttl {
    position: absolute !important;
    left: 18px !important; top: 15px !important;
    width: auto !important; height: auto !important;
    font-size: 17px; line-height: 1.4;
  }
  .rel-dot {
    position: absolute !important;
    left: auto !important; right: 14px; top: auto !important; bottom: 14px !important;
    width: 30px !important; height: 30px !important;
  }
  .rel-arw {
    position: absolute !important;
    left: auto !important; right: 14px; top: auto !important; bottom: 14px !important;
    width: 30px !important; height: 30px !important;
    margin: 0 !important;
    padding: 7px 11px;
    box-sizing: border-box;
  }
  .white-329 { display: none; }

  /* ---------- 共通：Entry / Contact 帯 ----------
     PCは「写真＋暗幕」の帯の上に半透明の白いパネル2枚。SPも同じ構造にする。
     HTMLの .sp-wrap.ecwrap（PCでは無効なグルーピングdiv）を帯に見立て、
     .ec-band を背面に絶対配置し、パネルはその上に縦積みする。 */
  .stage > .ecwrap {
    padding: 26px 24px 30px;
    margin: 0 !important;
    overflow: hidden;
  }
  .stage > .ecwrap > .ec-band {
    display: block !important;
    position: absolute !important;
    left: 0 !important; right: auto !important;
    top: 0 !important; bottom: auto !important;
    width: 100% !important; height: 100% !important;
    max-width: none;
    overflow: hidden;
    z-index: 0;
  }
  .ecwrap .ec-band img.ec-photo {
    position: absolute !important;
    left: 0; top: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center !important;
  }
  /* 暗幕。PCは rgba(0,0,0,.27) だが、SPは帯が低くて object-fit:cover が
     写真の明るい部分を拾うので、白文字が読めるように濃くしている。 */
  .ecwrap .ec-band .ec-veil {
    position: absolute !important; inset: 0;
    background: rgba(0, 20, 52, 0.55);
  }

  .ec-panel {
    display: block;
    margin: 0 0 14px !important;
    padding: 22px 20px 24px;
    /* 背景（半透明の白）と角丸はPCの .ec-panel をそのまま使う */
    border-radius: 18px;
    z-index: 1;
  }
  .ec-panel:last-child { margin-bottom: 0 !important; }
  .ec-panel .ec-en {
    position: static !important;
    width: auto !important; height: auto !important;
    font-size: 30px; line-height: 1.2;
  }
  .ec-panel .ec-txt {
    position: static !important;
    width: auto !important; height: auto !important;
    padding-right: 40px;
    font-size: 14px; line-height: 1.85; letter-spacing: 0.04em;
    margin: 10px 0 0;
  }
  /* ロゴマークはPCと同じくパネル右側に置く */
  .ec-panel .ec-mark {
    display: block !important;
    position: absolute !important;
    left: auto !important; right: 18px !important;
    top: 24px !important;
    width: 24px !important; height: auto !important;
  }

  /* ---------- 共通：フッター ----------
     SPは「ロゴ・住所・お問い合わせ（見出し＋ボタン）・コピーライト」だけにする。
     リンク列（会社を知る／仕事を知る／ニュース／採用情報）を縦に積むと
     フッターだけで900px近くになるため、SPでは出していない。 */
  .ft { height: auto !important; padding: 48px 24px 0; }
  .ft-h.c1, .ft-h.c2, .ft-h.c3, .ft-h.c5,
  .ft-list { display: none !important; }

  /* コピーライト帯は左右いっぱいに（フッターの padding を打ち消す） */
  .ft-copy {
    position: relative;
    left: auto; bottom: auto;
    width: auto; height: auto;
    display: block; text-align: center;
    margin: 44px -24px 0;
    padding: 18px 24px;
    font-size: 12px; line-height: 1.9; letter-spacing: 0.06em;
  }
  .ft-logo { position: static !important; width: 176px !important; height: auto !important; }
  .ft-address {
    position: static !important;
    width: auto !important; height: auto !important;
    font-size: 13px; line-height: 2; margin: 18px 0 28px;
  }
  .ft-h {
    position: static !important;
    width: auto !important; height: auto !important;
    font-size: 17px; line-height: 1.6;
    margin: 22px 0 10px;
    text-align: left !important;
  }
  .ft-list {
    position: static !important;
    width: auto !important; height: auto !important;
    gap: 9px;
  }
  .ft-list a { height: auto !important; font-size: 14px; line-height: 1.6; }
  .stage .ft-btn { margin: 16px 0 0 !important; max-width: none; }

  /* ---------- 共通：ページ全面の下地（PCの背景をそのまま使う） ----------
     PCではセクションごとの座標に置かれているが、SPは縦の流れが変わるので
     ページ全面に敷き直す。z-index:0 なので .stage の白背景より前・本文より後ろ。
     高さは height:100% ではなく top/bottom:0 で伸ばす
     （SPの .stage は height:auto のため % が解決できない）。 */
  /* グラデーションだけの下地はページ全面に伸ばす */
  .stage > .bg-main,
  .stage > .bg-base,
  .stage > .wide-bg {
    display: block !important;
    position: absolute !important;
    left: 0 !important; right: auto !important;
    top: 0 !important; bottom: auto !important;
    width: 100% !important; height: 100% !important;
    max-width: none;
    z-index: 0;
    pointer-events: none;
  }

  /* 画像の下地（about / business / message）は 1920px幅前提の斜めの意匠なので、
     縦長のSP画面いっぱいに伸ばすと筋状の帯に見えてしまう。
     そこで <img> は隠し、同じ画像を .stage の背景として上端に等倍で敷き、
     その下は他ページと同じ淡いグラデーションでつないでいる。 */
  .stage > img.bg167,
  .stage > img.bizbg,
  .stage > img.msgbg { display: none !important; }

  .p-about .stage,
  .p-business .stage,
  .p-message .stage {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
  }
  .p-about .stage {
    background-image: url(/hp2-assets/img/Group%20167.jpg),
                      linear-gradient(180deg, #FBFCFD 0%, #EEF5FC 24.1%);
  }
  .p-business .stage {
    background-image: url(/hp2-assets/img/business_bg.jpg),
                      linear-gradient(180deg, #FBFCFD 0%, #EEF5FC 24.1%);
  }
  .p-message .stage {
    background-image: url(/hp2-assets/img/massege_bg.jpg),
                      linear-gradient(180deg, #FBFCFD 0%, #EEF5FC 24.1%);
  }

  /* ---------- 共通：背景のあしらい ----------
     PCの .deco* は 1920px の座標に置かれているのでSPに流用できない。
     そこで ぼかし・グラデーション・不透明度を内包した単体SVGを使う。

     ■ 使うファイル
       assets/decp_0N_p.svg（_p 付き）。元の書き出しは図形が canvas ぎりぎりまで
       伸びていて端が切れて見えたので、四辺に24pxの余白を足したもの。
       縦横比はボックスの aspect-ratio に元サイズを入れて維持している。

     ■ 置き方
       ページ全面に散らすと必ず本文と重なるので、
       「セクション間の余白」または「写真の上」だけに置いている。
       いずれも親要素（見出し等）からの相対位置なので、画面幅が変わって
       行数が増えてもズレない。z-index:0 で本文より後ろ、クリックも拾わない。 */
  .stage > .spdeco { display: none !important; }

  .p-home .f88::before,
  .p-home .f89::before,
  .p-about .lb-vision::before,
  .p-about .lb-value::before,
  .p-about .lb-culture::before,
  .p-about .relwrap::before,
  .p-business .bt2::before,
  .p-business .bt5::before,
  .p-strengths .sn2::before,
  .p-strengths .sn4::before,
  .p-strengths .relwrap::before,
  .p-message .pg-label::before,
  .p-company .lb-profile::before,
  .p-company .acc-list::before,
  .p-contact .lb-route::before,
  .p-news .pg-h::before {
    content: '';
    position: absolute;
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  /* HOME：白い帯の中、写真の上（.strength-img / .profile-img の上）に置く */
  .p-home .f88::before { right: 8px;  top: -250px; width: 128px; aspect-ratio: 517/506; background-image: url(/hp2-assets/img/decp_02_p.svg); }
  .p-home .f89::before { left:  8px;  top: -250px; width: 120px; aspect-ratio: 1;       background-image: url(/hp2-assets/img/decp_06_p.svg); }

  /* 会社を知る：セクション間の130pxの余白に収める（118px角なので文字にかからない） */
  .p-about .lb-vision::before  { right: 6px; top: -126px; width: 118px; aspect-ratio: 517/506; background-image: url(/hp2-assets/img/decp_02_p.svg); }
  .p-about .lb-value::before   { left:  6px; top: -126px; width: 118px; aspect-ratio: 1;       background-image: url(/hp2-assets/img/decp_05_p.svg); }
  .p-about .lb-culture::before { right: 6px; top: -126px; width: 118px; aspect-ratio: 1;       background-image: url(/hp2-assets/img/decp_06_p.svg); }
  .p-about .relwrap::before    { left:  6px; top:    8px; width: 112px; aspect-ratio: 1;       background-image: url(/hp2-assets/img/decp_04_p.svg); }

  /* 仕事を知る：カードの写真の上 */
  .p-business .bt2::before { right: 6px; top: -250px; width: 126px; aspect-ratio: 1;       background-image: url(/hp2-assets/img/decp_07_p.svg); }
  .p-business .bt5::before { left:  6px; top: -250px; width: 118px; aspect-ratio: 375/391; background-image: url(/hp2-assets/img/decp_08_p.svg); }

  /* 私たちの強み：写真の上（.snum の上に写真がある） */
  .p-strengths .sn2::before     { right: 6px; top: -230px; width: 126px; aspect-ratio: 1;       background-image: url(/hp2-assets/img/decp_06_p.svg); }
  .p-strengths .sn4::before     { left:  6px; top: -230px; width: 118px; aspect-ratio: 517/506; background-image: url(/hp2-assets/img/decp_02_p.svg); }
  .p-strengths .relwrap::before { right: 6px; top:    8px; width: 112px; aspect-ratio: 1;       background-image: url(/hp2-assets/img/decp_04_p.svg); }

  /* 代表メッセージ：FVのラベルの右のアキだけ（このページは他に置かない） */
  .p-message .pg-label::before { right: 10px; top: -18px; width: 118px; aspect-ratio: 1; background-image: url(/hp2-assets/img/decp_05_p.svg); }

  /* 会社概要：FV写真の上と、地図の上 */
  .p-company .lb-profile::before { right: 6px; top: -150px; width: 122px; aspect-ratio: 1;       background-image: url(/hp2-assets/img/decp_07_p.svg); }
  .p-company .acc-list::before   { left:  6px; top: -190px; width: 114px; aspect-ratio: 517/506; background-image: url(/hp2-assets/img/decp_02_p.svg); }

  /* お問い合わせ：FV写真の上 */
  .p-contact .lb-route::before { right: 6px; top: -140px; width: 122px; aspect-ratio: 1; background-image: url(/hp2-assets/img/decp_06_p.svg); }

  /* ニュース：FV写真の上 */
  .p-news .pg-h::before { left: 6px; top: -150px; width: 118px; aspect-ratio: 1; background-image: url(/hp2-assets/img/decp_05_p.svg); }

  /* 使いどころのない装飾は出さない。
     ・deco*      … 1920px座標の斜めバー。FVぶんだけ下でSP座標を与えて復活させる
     ・hero-veil  … 写真に白文字を重ねるための暗幕。SPは文字を写真の下に出すので不要
     ・news-bg    … HOMEは .wide-bg を下地に使うので重複 */
  [class*="deco"], .watermark, .news-bg, .hero-veil, .quote { display: none !important; }

  /* ============================================================================
     HOME
     ----------------------------------------------------------------------------
     縦の間隔は2種類だけ。
       --sp-pair = 40px  … 写真と、それに対応する文章（＝ひとつのグループの中）
       --sp-gap  = 130px … グループとグループのあいだ
     グループの分かれ方はPCの並びに合わせている（写真が文章の前か後かが変わる）。
       ① FV写真 ＋ タイトル・リード
       ② ステートメント帯（写真と文字が重なっているので1つ）
       ③ 会社を知る ＋ オフィスの写真
       ④ 仕事を知る（対応する写真＝事業アイコン7つはSPでは非表示のため単独）
       ⑤ 社員の写真 ＋ 私たちの強み
       ⑥ 代表の写真 ＋ 代表メッセージ
       ⑦ ニュース見出し ＋ 一覧カード ＋ 一覧ボタン
       ⑧ Entry / Contact
     ========================================================================== */
  .p-home { --sp-pair: 40px; --sp-gap: 130px; }

  .p-home .news-tag { display: none !important; }

  /* ---- ④ 事業アイコン7つ（PCと同じ 白丸＋絵＋ラベル）----
     HTMLでは1件ずつ .wgroup にまとめ、7件を .wgrid で3列に並べている
     （PCは4＋3だが、SPの幅では3列＝3＋3＋1のほうが丸を大きく取れる）。
     丸・背景・角丸はPCの .wcircle をそのまま使用。
     絵は丸の兄弟要素なので、グループの中で丸の中心に重ねている。 */
  .p-home .wgrid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 26px 0;
    padding: 0 24px;
    margin: 0 0 var(--sp-pair);
  }
  .p-home .wgroup {
    position: relative !important;
    flex: 0 0 33.333%;
    display: flex; flex-direction: column; align-items: center;
  }
  /* 「.wgroup 〜」と重ねているのは、土台のリセット（詳細度0,2,0／0,2,1）に勝たせるため */
  .p-home .wgroup .wcircle {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 84px !important; height: 84px !important;
    flex: none;
    box-shadow: 0 2px 14px rgba(0, 27, 68, 0.10);
  }
  .p-home .wgroup [class^="wicon-"] {
    position: absolute !important;
    left: 50% !important; top: 42px !important;   /* 丸の中心（84 ÷ 2） */
    width: auto !important; height: 28px !important;
    transform: translate(-50%, -50%);
  }
  .p-home .wgroup .wlabel {
    position: static !important;
    width: auto !important; height: auto !important;
    margin: 12px 0 0 !important;
    font-size: 12px; line-height: 1.5; text-align: center;
  }
  .p-home .wl5 { font-size: 11px; }   /* クリニック事業だけ長い */

  /* ---- セクションごとの背景（.sp-band）----
     ページ全体に敷くのではなく、セクション単位で色を切り替える。
     px指定ではなく実際のボックスで区切っているので、画面幅が変わって
     文章の行数が増えても帯と中身がずれない。
     上下 65px ＋ 隣の帯の 65px ＝ グループ間の 130px になるよう、
     帯の最後の要素の margin-bottom は 0 にしている。 */
  .p-home .sec-blue,
  .p-home .sec-white,
  .p-home .sec-news {
    position: relative !important;
    padding: 65px 0;
    overflow: hidden;         /* 中の margin が帯の外に抜けないように */
  }
  .p-home .stwrap { margin-bottom: 65px; }          /* 帯の padding と合わせて130 */
  .p-home .f87 { margin-bottom: 0 !important; }     /* sec-blue の最後 */
  .p-home .f89 { margin-bottom: 0 !important; }     /* sec-white の最後 */

  /* ③④「会社を知る／仕事を知る」＝水色。横に流れるパターンはこの帯の中だけ。
     .wide-bg 側でやると位置をpxで合わせることになるので、帯の ::before に移した。
     タイルは 1200×368px＝元画像（4508.58×1381）と同じ縦横比なので歪まない。 */
  .p-home .sec-blue { background: #EEF5FC; }
  /* 素材は1枚だけ。aspect-ratio に元画像の比（4508.58 : 1381）を入れ、
     height:100% で帯と同じ高さにしているので、縦横比を崩さず・上下に分かれない。
     横方向のループは、同じものを ::before と ::after の2枚だけ使い、
     自分自身の幅（＝素材1枚ぶん）で translateX するので継ぎ目が出ない。 */
  .p-home .sec-blue::before,
  .p-home .sec-blue::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 100%; width: auto;
    aspect-ratio: 4508.58 / 1381;
    background: url(/hp2-assets/img/home_wide_bg.webp) no-repeat 0 0 / 100% 100%;
    opacity: 0.5;
    pointer-events: none;
  }
  .p-home .sec-blue::before { animation: wide-bg-a 90s linear infinite; }
  .p-home .sec-blue::after  { animation: wide-bg-b 90s linear infinite; }
  .p-home .sec-blue > * { z-index: 1; }
  @keyframes wide-bg-a {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }
  @keyframes wide-bg-b {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  /* ページ全面の .wide-bg は下地のグラデーションだけに戻す（流れる帯は上の帯へ） */
  .p-home .wide-bg::before { display: none; }

  /* ⑤⑥「私たちの強み／代表メッセージ」＝白。
     あしらいは上の「写真の上」ルール（.f88::before / .f89::before）で置いている。 */
  .p-home .sec-white { background: #FFFFFF; }
  .p-home .sec-white > * { z-index: 1; }

  /* ⑦「ニュース」＝また水色 */
  .p-home .sec-news { background: #EEF5FC; }

  /* ページ全面のあしらい（.spdeco）はHOMEでは使わない。
     あしらいは上の白い帯（.sec-white）の中だけに置く指示のため。 */
  .p-home .spdeco { display: none !important; }

  /* ============================================================================
     ①ファーストビュー — 参照デザイン 375×735
       assets/sankou/ワークスHP_HOME_SPFV.png ／ Figma「ワークスHP_HOME_SPFV」
     ----------------------------------------------------------------------------
     デザインの座標をそのまま「375分のいくつ」に換算して入れている。
     px 固定にすると実機（390〜430px）で版面だけスカスカになるため、
     長さは % と cqw（.stage に container-type: inline-size）で比例させる。

     ■ Figma の書き出し座標の読み方（重要）
       回転した要素は width/height が「回転前の寸法」、left/top が
       「回転後のバウンディングボックスの左上」で出てくる。CSS の left/top は
       回転前の位置なので、斜めバー（decp_*）は
         left = bboxLeft + (bboxW - w)/2 ／ top = bboxTop + (bboxH - h)/2
       に直してある（bboxW = bboxH = (w + h) × cos45°）。
       写真3枚は回転していないグループなので、書き出し値をそのまま使える。

     ■ デザインの座標（375×735、ページ最上部が y=0）
       home_image_01  386.42 × 386.42 @ (-70.83, -21)
       home_image_02  263.31 × 263.31 @ (246,    104.69)
       home_image_03  224.69 × 120.9  @ (150.43, 219.25)
       タイトル       282.4  × 137.58 @ (22,     392)
       本文           324    × 156    @ (23,     551)  12px / 26px / 0.1em
       decp_04（濃）   99.07 ×  34.2  @ (292,    25)   ※bbox 94.24 角
       decp_01（ぼかし）132.34 × 24.18 @ (-12,    33)   ※bbox 110.68 角
       decp_01（ぼかし）112.11 × 20.49 @ (145.46, 210.46) ※bbox 93.77 角
     ========================================================================== */

  /* FV全体の白帯。デザインのFVは #FFFFFF で、ページ全面に敷いた
     .wide-bg の淡いグラデーションは出ない。
     デザインではヘッダーが写真の上に重なるので、.stage の padding-top
     （64px＝固定ヘッダーの高さ）を負マージンで打ち消してページ最上部から始める。
     下は次の帯（.sec-blue の padding-top 65px）と合わせて130pxになるようにしている。 */
  .p-home .sec-fv {
    position: relative !important;
    background: #FFFFFF;
    margin-top: -64px;
    padding-bottom: 65px;
    overflow: hidden;   /* 中の margin が帯の外に抜けないように */
  }

  /* 写真3枚のコラージュ。枠はページ最上部から写真の下端（y=368）まで。
     中の3枚は枠に対する % なので幅が変わっても崩れない。 */
  .p-home .fvpair {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 375 / 368;
    padding: 0;
    margin: 0;
    overflow: hidden;   /* 参照デザインと同じく、枠の外へはみ出させない */
  }
  /* 「.fvpair .fv-imgXX」と3つ重ねているのは、土台の
     「.stage .sp-wrap > img{width:100%}」（詳細度0,2,1）に勝たせるため */
  .p-home .fvpair img {
    position: absolute !important;
    height: auto !important;
    /* 土台の max-width:100% を外す。fv-img01 は枠より広い（103%）ので、
       これがないと375pxに頭打ちになって写真だけ小さくなる */
    max-width: none !important;
  }
  /* left / width は枠の幅（375）、top は枠の高さ（368）に対する % */
  .p-home .fvpair .fv-img01 { left: -18.888%  !important; top:  -5.7065% !important; width: 103.0453% !important; }
  .p-home .fvpair .fv-img02 { left:  65.6%    !important; top:  28.4484% !important; width:  70.216%  !important; }
  .p-home .fvpair .fv-img03 { left:  40.1147% !important; top:  59.5788% !important; width:  59.9173% !important; }

  /* 斜めバー3本。色・角丸・回転・ぼかしはPCの .deco-bar / .deco-r8 のまま。
     .stage を基準に絶対配置するので、デザインの座標がそのまま使える
     （絶対配置は .stage の padding ボックス基準＝ページ最上部が原点）。 */
  .p-home .deco-r8,
  .p-home .deco-r9,
  .p-home .deco-r10 {
    display: block !important;
    position: absolute !important;
    right: auto !important; bottom: auto !important;
    z-index: 2;
  }
  /* decp_04 … 右上の濃いネイビー。デザインではぼかしなしなので、
     .deco-bar から継いでいる blur を外す（PC側はそのまま） */
  .p-home .deco-r8 {
    left: 77.2213cqw !important; top: 14.672cqw !important;
    width: 26.4187cqw !important; height: 9.12cqw !important;
    filter: none;
  }
  /* decp_01 … 左上のぼかし */
  .p-home .deco-r10 {
    left: -6.088cqw !important; top: 20.3333cqw !important;
    width: 35.2907cqw !important; height: 6.448cqw !important;
    opacity: 0.76;
  }
  /* decp_01 … コラージュ中央のぼかし */
  .p-home .deco-r9 {
    left: 36.344cqw !important; top: 65.8933cqw !important;
    width: 29.896cqw !important; height: 5.464cqw !important;
    opacity: 0.76;
  }

  /* タイトル：左22px／幅282.4px／上端 y=392（写真の下端368から24px）
     h1でラップしたため対象は .fv-title（h1）本体。セレクタに祖先を足しているのは、
     土台の「.stage .sp-band > * { width:auto !important }」（詳細度0,2,0）に勝たせるため */
  .p-home .sec-fv .fv-title {
    width: 75.3067% !important;
    margin: 6.4% 0 0 5.8667%;
  }
  /* 本文：左23px・右28px／12px／行送り26px／字間0.1em／上端 y=551
     （タイトルの下端 392 + 282.4×288/590 = 529.85 から 21.15px） */
  .p-home .fv-lead {
    padding: 0 7.4667% 0 6.1333%;
    font-size: 3.2cqw; line-height: 6.9333cqw; letter-spacing: 0.1em;
    margin: 5.64% 0 0;
  }
  /* 改行はSP用のものだけ有効にする（上の「.fv-lead br { display:none }」を戻す） */
  .p-home .fv-lead br.br-both,
  .p-home .fv-lead br.br-sp { display: inline !important; }
  /* FVのボタンはSPでは出さない（すぐ下のステートメント帯に同じ「私たちについて」がある） */
  .p-home .fv-btn { display: none !important; }

  /* ステートメント帯：写真の上に見出し・サブ・ボタンを重ねる（型は共通の .stwrap 側）。
     文字色と text-shadow はPCの .st-h / .st-sub をそのまま使う。 */
  .p-home .stwrap {
    min-height: 400px;
    padding: 120px 24px 38px;
    /* 下の余白は帯側（.sec-blue の padding-top 65px）と合わせて130pxになる */
  }
  .p-home .st-h { font-size: 24px; line-height: 1.55; margin: 0 0 12px; }
  .p-home .st-sub { font-size: 15px; line-height: 1.9; margin: 0; }
  .p-home .st-btn { margin: 26px auto 0 !important; }

  /* 会社を知る / 仕事を知る / 私たちの強み / 代表メッセージ */
  /* 「仕事を知る」はPCでは右寄せ（.to-right）だが、SPでは他と同じ左寄せに揃える */
  .p-home .frame,
  .p-home .frame.to-right {
    width: auto !important;
    align-items: stretch !important;
    gap: 14px;
    padding: 0 24px;
    margin: 0 0 var(--sp-gap);
  }
  .p-home .frame .h2 {
    width: auto !important; height: auto !important;
    font-size: 24px; line-height: 1.5;
    /* .f87（仕事を知る）だけPCで text-align:right。SPでは左揃えに戻す */
    text-align: left;
  }
  .p-home .frame .lead {
    width: auto !important; height: auto !important;
    font-size: 15px; line-height: 1.9;
  }
  .p-home .frame .btn { margin-top: 6px !important; }

  /* グループの切れ目（③〜⑥）。③〜⑥はすべて「写真 → 文章」の順 */
  .p-home .company-img { margin: 0 20px var(--sp-pair); }      /* ③ 写真 → 会社を知る */
  .p-home .f86 { margin-bottom: var(--sp-gap) !important; }
  .p-home .wgrid { margin-bottom: var(--sp-pair); }            /* ④ アイコン7つ → 仕事を知る */
  .p-home .strength-img { margin: 0 20px var(--sp-pair); }     /* ⑤ 写真 → 私たちの強み */
  .p-home .f88 { margin-bottom: var(--sp-gap) !important; }
  .p-home .profile-img { margin: 0 0 var(--sp-pair); }         /* ⑥ 写真 → 代表メッセージ */
  /* .f87 / .f89 は帯（.sec-blue / .sec-white）の最後なので margin は 0（上の帯ブロック） */

  /* この2枚だけ左右に20pxのアキを取る（角丸はPCの指定をそのまま使う）。
     img.〜 と書いているのは土台の「.stage .sp-band > img」（0,2,1）に勝たせるため */
  .p-home img.company-img,
  .p-home img.strength-img { width: calc(100% - 40px) !important; }
  /* profile_01.png は縦長の切り抜き（526×682）でSPだと背が高すぎるので、
     .strength-img（625×404）と同じ縦横比の枠に入れて高さを揃える。
     切り抜き画像なので cover ではなく contain（頭が切れるのを避ける）。 */
  .p-home .profile-img {
    aspect-ratio: 625 / 404;
    object-fit: contain;
  }

  /* ニュース */
  .p-home .news-h {
    padding: 0 24px; font-size: 24px; line-height: 1.5; margin: 0 0 20px;
  }
  /* 3枚を1枚のカードにまとめる。カードの見た目は news.html の一覧カード
     （.p-news .listwrap）と完全に同じ値。各件は点線で区切った「行」になる。 */
  .p-home .nlistwrap {
    width: calc(100% - 48px) !important;
    margin: 0 24px !important;
    padding: 6px 0 8px;
    background: rgba(255, 255, 255, 0.74);
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 27, 68, 0.14);
    overflow: hidden;
  }
  /* 1件ぶんの「行」。体裁は news.html の一覧（.p-news .row-*）と同じ値にしている。
     ・お知らせタグ … PCは画像のピル（home_news_deco.png）だが、
       news.html と揃えるため画像は隠して <span> をCSSのピルにする
     ・日付 … PCのデザインには無いのでHTMLに追加し、PCでは display:none
     ・本文 … 参照デザインはタグ＋日付＋タイトルのみなので出さない */
  .p-home .news-card {
    display: block;
    margin: 0 !important;
    padding: 20px;
    background: none;
    border-radius: 0;
  }
  .p-home .news-tag {
    display: inline-block !important;
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
  }
  .p-home .news-tag img { display: none !important; }
  .p-home .news-tag span {
    position: static !important;
    display: inline-block;
    width: auto !important; height: auto !important;
    padding: 3px 14px;
    background: var(--grad-navy-bar);
    border-radius: 220px;
    font-size: 12px; line-height: 1.6;
  }
  .p-home .news-date {
    display: inline-block !important;
    position: static !important;
    width: auto !important; height: auto !important;
    margin: 0 0 0 12px !important;
    font-size: 13px; line-height: 1.6; font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--blue);
  }
  .p-home .news-body { display: none !important; }
  /* 2件目以降の区切り線（news.html の .row-sep と同じ。左右20px内側） */
  .p-home .nc2::before,
  .p-home .nc3::before {
    content: '';
    position: absolute;
    left: 20px; right: 20px; top: 0;
    border-top: 1px dashed rgba(0, 27, 68, 0.5);
  }
  .p-home .news-title {
    position: static !important;
    width: auto !important; height: auto !important;
    font-size: 16px; line-height: 1.6; margin: 10px 0 0;
  }
  .p-home .news-btn { margin: var(--sp-pair) auto 0 !important; }   /* sec-news の最後 */

  /* ============================================================================
     会社を知る（about）
     ========================================================================== */
  /* FV（写真の上に重ねる。型は共通の .fvwrap 側）。
     SPではリード文2つ（.hero-sub / .hero-lead）を出さず、見出しだけにしている。 */
  .p-about .fvwrap { min-height: 330px; }
  .p-about .hero-h1 { font-size: 25px; line-height: 1.5; margin: 0; }
  .p-about .hero-sub,
  .p-about .hero-lead,
  .p-about .watermark { display: none !important; }

  /* 各セクションの間隔は130px */
  .p-about .lb-mission, .p-about .lb-vision { margin-top: 130px; }
  .p-about .mv-h {
    padding: 0 24px; font-size: 23px; line-height: 1.55; height: auto !important;
    margin: 0 0 16px;
  }
  .p-about .mv-p { padding: 0 24px; font-size: 15px; line-height: 1.9; }

  .p-about .lb-value, .p-about .lb-culture { margin-top: 130px; }
  .p-about .vcard {
    width: calc(100% - 48px) !important;
    margin: 0 24px 14px !important;
    padding: 26px 24px 28px !important;
    border-radius: 16px;
  }
  .p-about .vcard .vnum { height: auto !important; font-size: 40px; line-height: 1; margin: 0 0 10px; }
  .p-about .vcard .vttl { height: auto !important; font-size: 19px; line-height: 1.5; margin: 0 0 8px; }
  .p-about .vcard .vtxt { font-size: 14px; line-height: 1.85; }

  .p-about .ccard {
    width: calc(100% - 48px) !important;
    margin: 0 24px 14px !important;
    padding: 24px !important;
    border-radius: 16px;
  }
  .p-about .cinner { position: static !important; width: auto !important; }
  .p-about .crow { height: auto !important; gap: 14px !important; align-items: center; }
  .p-about .crow img { width: 34px !important; height: auto !important; flex: none; }
  .p-about .ctext { width: auto !important; }
  .p-about .clabel { height: auto !important; font-size: 12px; line-height: 1.4; letter-spacing: 0.24em; }
  .p-about .ctitle { height: auto !important; font-size: 18px; line-height: 1.5; }
  .p-about .cbody { width: auto !important; height: auto !important; font-size: 14px; line-height: 1.85; margin: 12px 0 0; }

  /* カルチャー写真：2列グリッド風に並べる */
  .p-about .ci {
    width: calc(50% - 28px) !important;
    display: inline-block;
    margin: 0 0 8px 0;
    vertical-align: top;
    border-radius: 10px;
  }
  .p-about .ci1 { width: calc(100% - 48px) !important; display: block; margin: 24px 24px 8px; }
  .p-about .ci2, .p-about .ci4 { margin-left: 24px; }
  .p-about .ci3, .p-about .ci5 { margin-left: 6px; }
  /* 6枚目はSPでは出さない（2列×2段＋1枚でちょうど収まる） */
  .p-about .ci6 { display: none !important; }
  .p-about .ci5 { margin-bottom: 0; }

  /* 関連コンテンツの白帯も上下130px */
  .p-about .relwrap { padding: 130px 0 !important; margin: 0 !important; }
  .p-about .lb-related { margin-top: 0; }
  .p-about .btn-company { margin: 12px auto 0 !important; }

  /* ============================================================================
     仕事を知る（business）
     ========================================================================== */
  .p-business .wcircle,
  .p-business [class^="wicon-"],
  .p-business .wlabel { display: none !important; }

  /* 青いバーはラベルの左横。兄弟要素なので、バーを1行ぶん出したあと
     ラベルを負のマージンで同じ行に引き上げ、左に 24＋5＋12 ＝ 41px 空けている。 */
  /* ラベルの上に65pxのアキ。バーとラベルは同じ行に並ぶので、
     バーの上マージンでまとめて下げている（8 + 65 = 73px）。 */
  .p-business .pg-bar {
    display: block !important;
    width: 5px !important; height: 26px !important;
    background: var(--blue); border-radius: 19px;
    margin: 73px 0 0 24px;
  }
  .p-business .pg-label {
    padding: 3px 24px 0 41px;
    font-size: 15px; line-height: 1.4;
    margin: -26px 0 14px;
  }
  /* 改行位置は <br> のまま。「「人の一生涯に寄り添う」」が360px幅でも
     1行に収まるサイズ（12文字 × 22px × 1.1 ＝ 約290px）にしている */
  .p-business .pg-h1 { padding: 0 24px; font-size: 22px; line-height: 1.6; margin: 0 0 18px; }
  .p-business .pg-lead { padding: 0 24px; font-size: 15px; line-height: 1.9; margin: 0 0 40px; }

  /* 事業カード：PCの .bcard（白・角丸40・写真とテキストを内包）と同じ見え方を
     .sp-wrap.bwrap で作る。.bcard は中身を持てない下敷きなので非表示。 */
  .p-business .bwrap {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 27, 68, 0.12);
    margin: 0 24px 24px !important;
    padding: 0 0 26px;
    overflow: hidden;
  }
  .p-business .bcard { display: none !important; }
  .p-business .bimg { margin: 0 !important; }
  .p-business .btext {
    display: block;
    padding: 24px 22px 0;
  }
  .p-business .btag { height: auto !important; font-size: 13px; line-height: 1.5; }
  .p-business .btitle { height: auto !important; font-size: 22px; line-height: 1.5; margin: 4px 0 14px !important; }
  .p-business .bbody { font-size: 14px; line-height: 1.9; margin: 0 !important; }
  /* ロゴは「タグ／タイトルのうち幅が長いほうの右端から40px」の位置、
     かつ「タグ＋タイトル」の高さの中央に置く。
     グリッドの max-content 列にすると本文（.bbody）の1行ぶんの幅まで
     列が広がってしまうので、タグ／タイトルを max-content 幅にして
     実測し、カードごとに left を入れている（文言は固定なので幅も固定）。
     .btext の padding-left が22px。中央は上端から 24 + (20+4+33)/2 ≒ 52px。 */
  .p-business .btext { position: relative !important; }
  .p-business .btag,
  .p-business .btitle { width: max-content; max-width: 100%; }
  .p-business img.blogo {
    position: absolute !important;
    top: 52px !important;
    transform: translateY(-50%);
    width: auto !important; height: 42px !important;
    margin: 0 !important;
  }
  /* left = padding22 ＋ max(タグ幅, タイトル幅) ＋ 40（実測値）
       bt2 tag157 / title97  → 22+157+40 = 219
       bt4 tag157 / title48  → 219
       bt5 tag157 / title169 → 22+169+40 = 231
       bt7 tag143 / title73  → 22+143+40 = 205 */
  .p-business .blogo2 { left: 219px !important; }
  .p-business .blogo4 { left: 219px !important; }
  .p-business .blogo5 { left: 231px !important; }
  .p-business .blogo7 { left: 205px !important; }
  .p-business .bbtn {
    width: calc(100% - 44px) !important; max-width: none;
    margin: 20px 22px 0 !important;
  }

  /* ============================================================================
     私たちの強み（strengths）
     ========================================================================== */
  /* FVは他ページ（about / company / contact）と同じ
     「写真＋暗幕のグラデーション＋文字を重ねる」形（型は共通の .fvwrap 側）。
     紺の帯は使わない。頭が切れないよう切り出し位置だけ上寄せにしている。 */
  .p-strengths .fvwrap .hero-photo img { object-position: center 8% !important; }
  .p-strengths .hero-lead { font-size: 16px; line-height: 1.7; margin: 0; }

  .p-strengths .sec-h { margin-top: 48px; }
  .p-strengths .sec-lead { padding: 0 24px; font-size: 15px; line-height: 1.9; margin: 0 0 40px; }

  .p-strengths .simg { border-radius: 12px; margin: 0 24px 18px; width: calc(100% - 48px) !important; }
  .p-strengths .snum { height: auto !important; padding: 0 24px; font-size: 40px; line-height: 1; margin: 0 0 6px; }
  .p-strengths .srule { display: none !important; }
  .p-strengths .sttl { height: auto !important; padding: 0 24px; font-size: 21px; line-height: 1.5; margin: 0 0 10px; }
  .p-strengths .ssub {
    height: auto !important; padding: 0 24px;
    display: block !important;
    font-size: 15px; line-height: 1.7; margin: 0 0 12px;
  }
  .p-strengths .ssub .sep { display: none; }
  .p-strengths .ssub .key { display: block; }
  /* 「写真＋その直下のテキスト」で1グループ。グループ間は130px空ける
     （＝各グループ最後の .sbody の下マージン）。 */
  .p-strengths .sbody { padding: 0 24px; font-size: 14px; line-height: 1.9; margin: 0 0 130px; }
  /* 最後のグループは関連コンテンツの白帯（上padding 48px）と合わせて130pxにする */
  .p-strengths .sb5 { margin-bottom: 82px; }

  .p-strengths .lb-related { margin-top: 8px; }

  /* ============================================================================
     代表メッセージ（message）
     ========================================================================== */
  .p-message .pg-label {
    display: flex !important; align-items: center; gap: 14px;
    height: auto !important; padding: 8px 24px 20px;
  }
  .p-message .pg-label .bar { width: 5px !important; height: 26px !important; flex: none; }
  .p-message .pg-label span { width: auto !important; height: auto !important; font-size: 15px; line-height: 1.4; }

  /* 引用符（PCは見出しの左右に2つ）。SPは見出しの上に開き側だけ置く */
  .p-message .quote { display: block !important; width: 26px !important; margin: 0 0 8px 24px; }
  .p-message .q2 { display: none !important; }

  .p-message .hero-photo { width: 62% !important; margin: 0 auto 20px; }
  .p-message .hero-h1 { padding: 0 24px; font-size: 22px; line-height: 1.6; margin: 0 0 18px; }
  .p-message .hero-role { padding: 0 24px; height: auto !important; font-size: 14px; line-height: 1.6; margin: 0 0 4px; }
  .p-message .hero-name { padding: 0 24px; margin: 0 0 44px; }
  /* 氏名：PCと同じく欧文は漢字の真下（.col ごとに縦積み、2つを横並び） */
  .p-message .hero-name .col {
    position: static !important;
    display: inline-block; vertical-align: top;
    width: auto !important;
  }
  .p-message .hero-name .c2 { margin-left: 22px; }
  .p-message .hero-name .ja {
    display: block !important; height: auto !important;
    font-size: 26px; line-height: 1.3;
  }
  .p-message .hero-name .en {
    display: block !important; height: auto !important;
    font-size: 12px; line-height: 1.4;
    margin: 2px 0 0 !important;
  }

  .p-message .mimg { width: 100% !important; margin: 0 0 20px; }
  .p-message .mtext { width: auto !important; padding: 0 24px; margin: 0 0 48px; }
  .p-message .mtext .ttl { height: auto !important; font-size: 21px; line-height: 1.5; margin: 0 0 12px; }
  .p-message .mtext .body { height: auto !important; font-size: 14px; line-height: 1.9; margin: 0 !important; }

  /* プロフィール：PCの .pf-card（白の下敷き）を .sp-wrap.pfwrap で作る */
  .p-message .pfwrap {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 27, 68, 0.10);
    margin: 8px 24px 48px !important;
    padding: 28px 0 30px;
  }
  .p-message .pf-card { display: none !important; }
  .p-message img.pf-photo { width: 72% !important; margin: 0 auto 26px; }
  .p-message .pf-lb { padding: 0 22px; height: auto !important; font-size: 12px; line-height: 1.4; letter-spacing: 0.28em; margin: 0 0 6px; }
  .p-message .pf-h { padding: 0 22px; height: auto !important; font-size: 24px; line-height: 1.5; margin: 0 0 20px; }
  .p-message .pf-item { padding: 0 22px; margin: 0 0 16px; }
  .p-message .pf-item .lb { padding: 0 !important; height: auto !important; font-size: 13px; line-height: 1.6; letter-spacing: 0.1em; margin: 0 0 2px; }
  .p-message .pf-item .vl { font-size: 14px; line-height: 1.85; margin: 0 !important; }
  .p-message .pf-rule { width: calc(100% - 44px) !important; margin: 0 22px 16px !important; }
  .p-message .pi6 { margin-bottom: 0; }

  .p-message .lb-related { padding: 0 24px; height: auto !important; font-size: 12px; letter-spacing: 0.28em; margin: 0 0 6px; }
  .p-message .h-related { padding: 0 24px; height: auto !important; font-size: 24px; line-height: 1.5; margin: 0 0 20px; }

  /* ============================================================================
     ニュース（news）
     ========================================================================== */
  /* FV 写真：PC は 45°回転したカプセル型。SP では回転を解いて
     他ページ（company/contact/strengths）と同じ横帯バナーに揃える。 */
  .p-news .news-photo {
    display: block !important;
    height: 200px !important;
    overflow: hidden;
    border-radius: 0 !important;
    transform: none !important;
  }
  .p-news .news-photo img {
    position: static !important;
    width: 100% !important; height: 200px !important;
    object-fit: cover; object-position: center 40%;
    transform: none !important;
  }

  .p-news .pg-h {
    width: auto !important; height: auto !important;
    padding: 28px 24px 0;
    font-size: 44px; line-height: 1.1;
  }
  .p-news .pg-lead {
    width: auto !important; height: auto !important;
    padding: 12px 24px 0;
    font-size: 16px; line-height: 1.7;
  }
  /* 一覧：PCの .list-card（半透明の白・角丸40・影）を .sp-wrap.listwrap で作る */
  .p-news .listwrap {
    background: rgba(255, 255, 255, 0.74);
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 27, 68, 0.14);
    margin: 30px 24px 0 !important;
    padding: 6px 0 8px;
    overflow: hidden;
  }
  .p-news .list-card { display: none !important; }
  .p-news .row-hit {
    display: block;
    padding: 20px;
    margin: 0;
  }
  .p-news .row-hit > * { position: static !important; }
  .p-news .row-tag { display: none !important; }
  .p-news .row-tagtxt {
    display: inline-block;
    width: auto !important; height: auto !important;
    padding: 3px 14px;
    background: var(--grad-navy-bar);
    border-radius: 220px;
    font-size: 12px; line-height: 1.6;
  }
  .p-news .row-date {
    display: inline-block;
    width: auto !important; height: auto !important;
    font-size: 13px; line-height: 1.6;
    margin: 0 0 0 12px !important;
  }
  .p-news .row-ttl {
    width: auto !important; height: auto !important;
    font-size: 16px; line-height: 1.6;
    margin: 10px 0 0 !important;
  }
  .p-news .row-dot, .p-news .row-arw { display: none !important; }
  .p-news .row-sep {
    width: calc(100% - 40px) !important;
    margin: 0 20px !important;
    border-top-style: dashed;
  }

  /* 一覧カードと Entry/Contact 帯のあいだの余白 */
  .p-news .listwrap + .ecwrap,
  .p-news .artwrap + .ecwrap { margin-top: 48px !important; }

  /* 記事詳細：PCの .art-card（白・角丸40・影）を .sp-wrap.artwrap で作る */
  .p-news .artwrap {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 27, 68, 0.14);
    margin: 30px 24px 0 !important;
    padding: 28px 22px 30px;
  }
  .p-news .art-card { display: none !important; }
  .p-news .art-ttl {
    width: auto !important; height: auto !important;
    padding: 0;
    font-size: 22px; line-height: 1.55;
  }
  .p-news .art-date {
    width: auto !important; height: auto !important;
    padding: 12px 0 0; font-size: 13px;
  }
  .p-news .art-body {
    width: auto !important; height: auto !important;
    padding: 16px 0 0;
    font-size: 15px; line-height: 1.95;
  }
  /* .stage .sp-wrap > a { display:block } が効いてしまい内部のflexが
     崩れるため、ボタンだけ上書きして復元する */
  .p-news .artwrap > a.art-link-btn {
    display: inline-flex !important;
    width: auto !important; height: auto !important;
    padding: 14px 24px;
    margin: 12px 0 0;
    font-size: 15px;
  }

  /* FVの斜めバー（PCの装飾を縮めて残す。本文より後ろ＝z-index:0） */
  .p-news .deco-11, .p-privacy .deco-11 {
    display: block !important; position: absolute !important;
    left: -40px !important; top: 268px !important;
    width: 280px !important; height: 72px !important;
    z-index: 0;
  }
  .p-news .deco-8, .p-privacy .deco-8 {
    display: block !important; position: absolute !important;
    left: auto !important; right: 22px !important; top: 292px !important;
    width: 62px !important; height: 22px !important;
    z-index: 0;
  }
  .p-news .deco-9, .p-privacy .deco-9 {
    display: block !important; position: absolute !important;
    left: auto !important; right: -46px !important; top: 344px !important;
    width: 170px !important; height: 32px !important;
    z-index: 0;
  }
  /* privacy は写真バナーがなく、すぐ下に白いカードが来る。
     カードに隠れない見出しの高さに寄せ、長い1本（deco-9）は出さない。 */
  .p-privacy .deco-11 { top: 92px !important; left: -56px !important; width: 240px !important; height: 62px !important; }
  .p-privacy .deco-8  { top: 98px !important; right: 30px !important; }
  .p-privacy .deco-9  { display: none !important; }

  /* ============================================================================
     会社概要（company）
     ========================================================================== */
  /* FV（写真の上に重ねる。型は共通の .fvwrap 側）。
     写真は culture_image_03.webp に差し替え。この素材は角丸が透明で
     焼き込まれているので、145% まで拡大して四隅を枠の外へ追い出している
     （cover ちょうどだと角丸が見えてしまう）。 */
  .p-company .fvwrap {
    background: url(/hp2-assets/img/culture_image_03.webp) no-repeat center center / 145% auto;
  }
  .p-company .fvwrap > .hero-photo { display: none !important; }
  .p-company .hero-lead { font-size: 16px; line-height: 1.7; margin: 0; }

  .p-company .lb-profile { margin-top: 48px; }

  /* 会社概要テーブル：ラベルを上、値を下に積む */
  .p-company .pf-card {
    width: calc(100% - 48px) !important;
    margin: 0 24px !important;
    padding: 8px 22px !important;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 27, 68, 0.08);
  }
  .p-company .pf-row { display: block; padding: 20px 0; }
  .p-company .pf-row dt { width: auto !important; font-size: 13px; line-height: 1.6; margin: 0 0 4px; }
  .p-company .pf-row dd { font-size: 14px; line-height: 1.8; }

  /* グループ会社 */
  .p-company .lb-group { margin-top: 56px; }
  .p-company .gcard {
    width: calc(100% - 48px) !important;
    margin: 0 24px 14px !important;
    padding: 26px 22px 24px !important;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 27, 68, 0.08);
  }
  .p-company .g-logo { height: 62px !important; }
  .p-company .g-logo img { height: 62px !important; width: auto !important; }
  .p-company .g-name { height: auto !important; font-size: 17px; line-height: 1.5; margin: 18px 0 0; }
  .p-company .g1 .g-name { font-size: 16px; }
  .p-company .g-note { height: auto !important; font-size: 13px; line-height: 1.8; margin: 8px 0 0; }
  .p-company .g-link { height: auto !important; font-size: 13px; margin: 12px 0 0; }

  /* アクセス */
  .p-company .lb-access { margin-top: 56px; }
  .p-company .acc-map {
    width: calc(100% - 48px) !important;
    height: 260px !important;
    margin: 0 24px 24px !important;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 27, 68, 0.12);
  }
  .p-company .acc-list { padding: 0 24px; margin: 0 0 48px; }
  .p-company .acc-row { padding-bottom: 20px; margin-bottom: 20px; }
  .p-company .acc-row dt { height: auto !important; font-size: 13px; line-height: 1.6; margin: 0 0 4px; }
  .p-company .acc-row dd { font-size: 14px; line-height: 1.8; }

  .p-company .btn-company { margin: 12px auto 56px !important; }

  /* ============================================================================
     お問い合わせ（contact）
     ========================================================================== */
  /* FV（写真の上に重ねる。型は共通の .fvwrap 側）。
     写真は culture_image_05.webp に差し替え。company と同じ理由で
     135% に拡大し、焼き込まれた角丸を枠の外へ出している。 */
  .p-contact .fvwrap {
    background: url(/hp2-assets/img/culture_image_05.webp) no-repeat center center / 135% auto;
  }
  .p-contact .fvwrap > .hero-photo { display: none !important; }
  .p-contact .hero-lead { font-size: 15px; line-height: 1.7; margin: 0; }

  .p-contact .lb-route { margin-top: 48px; }
  .p-contact .route {
    width: calc(100% - 48px) !important;
    margin: 0 24px 14px !important;
    padding: 24px 22px !important;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 27, 68, 0.08);
  }
  .p-contact .r-ttl { height: auto !important; font-size: 18px; line-height: 1.5; }
  .p-contact .r-body { height: auto !important; font-size: 13px; line-height: 1.8; margin: 10px 0 0; }
  .p-contact .r-link { height: auto !important; font-size: 13px; margin: 14px 0 0; }

  .p-contact .lb-form { margin-top: 56px; }
  .p-contact .p-form { padding: 0 24px; font-size: 13px; line-height: 1.8; margin: 0 0 24px; }
  .p-contact .form-card {
    width: calc(100% - 48px) !important;
    margin: 0 24px !important;
    padding: 28px 22px 32px !important;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 27, 68, 0.08);
  }
  .p-contact .f-row { margin-bottom: 20px; }
  .p-contact .f-row.cols { display: block; }
  .p-contact .f-row.cols > div + div { margin-top: 20px; }
  .p-contact .f-label { height: auto !important; font-size: 14px; margin-bottom: 8px; flex-wrap: wrap; }
  .p-contact .form-card input[type="text"],
  .p-contact .form-card input[type="email"],
  .p-contact .form-card input[type="tel"],
  .p-contact .form-card select { height: 52px; line-height: 50px; padding: 0 16px; font-size: 15px; }
  .p-contact .form-card select { padding-right: 44px; background-position: right 16px center; }
  .p-contact .form-card textarea { height: 180px; padding: 14px 16px; line-height: 1.8; font-size: 15px; }
  .p-contact .f-check { height: auto !important; margin-bottom: 28px; font-size: 14px; flex-wrap: wrap; justify-content: flex-start; }
  .p-contact .f-submit .btn { max-width: none; }

  .p-contact .tel-card {
    display: block;
    width: calc(100% - 48px) !important;
    height: auto !important;
    margin: 40px 24px 48px !important;
    padding: 26px 22px !important;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 27, 68, 0.08);
  }
  .p-contact .tel-col + .tel-col {
    padding-left: 0; border-left: 0;
    border-top: 1px dashed var(--rule);
    margin-top: 22px; padding-top: 22px;
  }
  .p-contact .tel-h { height: auto !important; font-size: 13px; line-height: 1.6; }
  .p-contact .tel-num { height: auto !important; font-size: 24px; line-height: 1.4; margin: 6px 0 0; word-break: break-all; }
  .p-contact .tel-sub, .p-contact .tel-addr { font-size: 13px; line-height: 1.8; margin: 8px 0 0; }

  /* ============================================================================
     プライバシーポリシー（privacy）
     ========================================================================== */
  .p-privacy .lb-page { margin-top: 24px; }
  .p-privacy .policy {
    width: calc(100% - 48px) !important;
    margin: 0 24px 48px !important;
    padding: 28px 22px 32px !important;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 27, 68, 0.08);
  }
  .p-privacy .policy h2 { font-size: 20px; line-height: 1.55; margin: 44px 0 20px; padding-bottom: 14px; }
  .p-privacy .policy h3 { font-size: 17px; line-height: 1.55; margin: 30px 0 12px; }
  .p-privacy .policy h4 { font-size: 15px; line-height: 1.6; margin: 22px 0 10px; }
  .p-privacy .policy p { font-size: 14px; line-height: 1.9; margin: 0 0 16px; }
  .p-privacy .policy li { font-size: 14px; line-height: 1.9; padding-left: 20px; }
  .p-privacy .policy li::before { left: 2px; top: 11px; width: 6px; height: 6px; }
  .p-privacy .policy .sign { margin-top: 28px; }
  .p-privacy .policy .sign p { font-size: 13px; line-height: 1.8; }
  .p-privacy .policy .contact-box { margin-top: 40px; padding: 22px 20px; border-radius: 14px; }
  .p-privacy .policy .contact-box h4 { font-size: 14px; margin: 0 0 6px; }
}