@charset "utf-8";

/* JetBrains Mono（自ホスト・完全版サブセット）＝スラッシュ付きゼロ(zero feature)対応。
   Google Fonts版はzero等のOpenTypeフィーチャーが省かれ効かないためセルフホスト */
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

/* =========================================================
   ① 変数（Figmaの色・寸法を集約）
   ========================================================= */
:root{
  --text:#222222;
  --green:#0A8470;          /* プライマリ緑 */
  --green-accent:#32D89C;   /* ENTRY矢印の明るい緑 */
  --white:#ffffff;
  /* CTA黄緑グラデ（Figma radial・左上中心の楕円。cx/cy≒(3%,8%)、stop 0/50/75/100%） */
  --cta-grad:radial-gradient(97% 112% at 3% 8%,#F5F2CE 0%,#E6ED89 50%,#DFEB66 75%,#D8E944 100%);
  --content:1160px;          /* コンテンツ最大幅（Figma基準） */
  --sp-max:390px;            /* SPコンテンツ最大幅＝カンプSP基準（幅拡大時はこれで中央固定） */
  --header-h-sp:64px;
  /* ブレークポイント=1025px（@mediaでは変数不可のため各所で直書き） */
}

/* =========================================================
   ② ベース（日本語タイポの鉄則）
   ========================================================= */
html{overflow-x:clip}   /* absolute配置のヘッダー等はbodyのclip対象外→html側でも横あふれを遮断（狭幅の右白余白防止） */
body{
  background:var(--white);
  color:var(--text);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  word-break:auto-phrase;   /* 文節で折り返す */
  line-break:strict;
  line-height:1.7;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* 横オーバーフローを抑止（狭幅の右白余白防止） */
}

/* =========================================================
   ③ 共通ユーティリティ
   ========================================================= */
.inner{max-width:var(--content);margin-inline:auto;padding-inline:24px}
.pc-only{display:none}
.sp-only{display:block}
@media (min-width:1025px){
  .pc-only{display:block}
  .sp-only{display:none}
  br.pc-only{display:inline}
}
br.sp-only{display:inline}
@media (min-width:1025px){ br.sp-only{display:none} }

/* レスポンシブ既定：コンテンツはカンプ幅で中央固定（幅拡大時は伸ばさない）。
   新セクションは <div class="sec-inner"> で囲む＝SP390/PC1160中央固定がデフォルトで効く。
   背景（地色/グラデ/スウォッシュ）はセクション側で全幅充填 or 原寸固定を指定する。 */
.sec-inner{width:100%;max-width:var(--sp-max);margin-inline:auto}
@media (min-width:1025px){ .sec-inner{max-width:var(--content)} }

/* CTAボタン（共通） */
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  background:var(--cta-grad);
  color:var(--green);
  font-weight:700;
  border-radius:10px;
  letter-spacing:.05em;
  box-shadow:0 0 4.714px rgba(3,66,56,.4);   /* Figma: 若干のシャドウ */
}
.btn-cta__arrow{width:20px;height:auto;flex:none;transform:scaleX(-1)}   /* 2色の下向き矢印。Figmaは水平反転で左右の色が入替わる */

/* =========================================================
   ④ ヘッダー（SPベース → PCで上書き）
   ========================================================= */
.header{
  position:absolute;top:0;left:0;right:0;z-index:100;
  height:var(--header-h-sp);
  display:flex;align-items:center;justify-content:space-between;
  padding-right:20px;   /* カンプ1:5090: ヘッダー背景は透明（FVが透ける）・右余白20px */
}
/* ロゴは白い不透明ボックス（カンプ1:5091: bg白・右下角丸2px・pl12/pr16/py16）。ヘッダー自体は透明 */
.header__logo{
  flex:0 1 auto;min-width:0;   /* 狭幅ではロゴボックスを収縮可に（右あふれ→白余白を防止） */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#fff;border-radius:0 0 2px 0;
  padding:16px 16px 16px 12px;
}
.header__logo-img{
  position:relative;width:272px;max-width:100%;height:auto;aspect-ratio:272 / 32;overflow:hidden;   /* 基本272×32。狭幅では親の収縮に追従して等比縮小（内側imgは%指定で連動） */
}
.header__logo-img img{
  position:absolute;top:-21.21%;left:-0.15%;
  width:100.31%;height:142.42%;max-width:none;
}
/* PCナビはSPでは非表示 */
.header__nav{display:none}

/* ハンバーガー */
.hamburger{
  width:40px;height:40px;flex:none;   /* カンプ1:5093: 40×40（右余白はheaderのpr:20px） */
  background:var(--green);border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.hamburger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease}   /* 2本線→開くと×へモーフ */
.hamburger.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}    /* 上線→＼ */
.hamburger.is-open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}  /* 下線→／（ボタンは緑・角丸6のまま＝閉じるボタンと同一） */

/* ---- PCヘッダー ----
   1440pxでFigma原寸(基準16px)、1025pxへ向けて約85%まで等比縮小して収める。
   基準font-sizeをvw連動のclampで作り、各寸法をemで持たせる（1箇所で全体が連動）。 */
@media (min-width:1025px){
  .header{
    height:auto;background:transparent;
    padding:20px;
    /* 基準サイズ: 1025px→13.6px / 1440px以上→16px */
    font-size:clamp(13.6px, calc(2.16px + 1.116vw), 16px);   /* 1240pxで上限16px（ナビが収まる幅）→以上は固定 */
  }
  .header__logo{
    background:var(--white);
    padding:1.5em;              /* 24px */
    border-radius:0 0 4px 0;
  }
  .header__logo-img{width:17em;height:2em}   /* 272 / 32 */
  .hamburger{display:none}

  .header__nav{
    display:flex;align-items:center;gap:2.5em;   /* 40px */
  }
  .nav-list{
    display:flex;align-items:center;gap:1.5em;    /* 24px */
  }
  .nav-list__item,.nav-more{
    font-weight:500;font-size:1em;line-height:1.2;
    letter-spacing:0.1em;color:var(--text);white-space:nowrap;   /* 1.6px相当 */
  }
  .nav-more{display:flex;align-items:center;gap:.5em;cursor:pointer}
  .nav-more__chevron{width:.625em;height:auto;transform:rotate(90deg);transition:transform .25s ease}   /* 10px */

  /* 会社についてもっと知る ドロップダウン（Figma専用デザインなし・サイトのトーンに合わせて作成） */
  .nav-item-more{position:relative}
  .nav-dropdown{
    position:absolute;top:calc(100% + .75em);right:0;z-index:120;
    min-width:20em;
    background:var(--white);
    border-radius:.5em;
    box-shadow:0 .5em 1.5em rgba(0,0,0,.12);
    padding:.5em 0;
    opacity:0;visibility:hidden;transform:translateY(.5em);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  /* ホバー(マウス) / クリック(キーボード・タッチ) の両対応 */
  .nav-item-more:hover .nav-dropdown,
  .nav-dropdown.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-item-more:hover .nav-more__chevron,
  .nav-more[aria-expanded="true"] .nav-more__chevron{transform:rotate(-90deg)}

  .nav-dropdown__list li+li{border-top:1px solid #eef1f0}
  .nav-dropdown__list a{
    display:block;padding:.85em 1.5em;transition:background .15s ease;
  }
  .nav-dropdown__list a:hover{background:#f4f8f6}
  .dd-ja{display:block;font-weight:700;font-size:1em;color:var(--text);line-height:1.4;letter-spacing:.02em}
  .dd-en{display:block;font-weight:700;font-size:.7em;color:var(--green);letter-spacing:.08em;margin-top:.15em}

  .header__entry{
    display:inline-flex;align-items:center;gap:1em;   /* 16px */
    height:3.5em;padding:0 2em;border-radius:8px;      /* 56 / 32 */
    background:var(--cta-grad);
    color:var(--green);font-weight:700;font-size:1.25em;   /* 20px */
    letter-spacing:0.04em;white-space:nowrap;              /* 0.8px相当 */
  }
  .header__entry-arrow{width:.7em;height:.6em;flex:none;transform:rotate(90deg) scaleY(-1)}   /* 下向きVアセットを右向き＞に（Figma同変換） */
}

/* =========================================================
   ⑤ ドロワー（SPメニュー展開）
   ========================================================= */
.drawer{
  position:fixed;inset:0;z-index:99;   /* ヘッダー(z:100)の下＝別のメニューヘッダーを重ねず、単一ヘッダーを上に残す */
  padding-top:var(--header-h-sp);      /* パネルはヘッダーの下から始める（ヘッダーは重複させない） */
  background:rgba(255,255,255,.1);   /* カンプ Rectangle58: 白10%スクリム */
  backdrop-filter:blur(12px);        /* カンプ: 背後のFVにぼかし（背景ブラー） */
  -webkit-backdrop-filter:blur(12px);
  display:flex;flex-direction:column;
  overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
/* 開いている間はヘッダーを固定（スクロール位置に関わらず×が最上部に見える） */
body.menu-open .header{position:fixed}
.drawer.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.drawer__head{
  flex:none;height:var(--header-h-sp);
  display:flex;align-items:center;justify-content:space-between;
  padding-right:20px;   /* カンプ 1:6282: ヘッダー右余白20px・左はロゴ白箱を端に密着 */
}
/* ドロワーのロゴ白ボックスは base .header__logo と同一（カンプ1:6283＝1:5091）。追加指定不要 */
.drawer__close{margin-left:auto}
/* ヘッダー下の白パネル（カンプ Rectangle59: 白94%・角丸12px・y82〜） */
.drawer__panel{
  background:rgba(255,255,255,.94);
  border-radius:12px;
  margin-top:18px;
}
.drawer__close{
  width:40px;height:40px;flex:none;   /* カンプ 1:6285: 40×40 */
  background:var(--green);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
.drawer__close::before,.drawer__close::after{
  content:"";position:absolute;width:18px;height:2px;background:#fff;border-radius:2px;
}
.drawer__close::before{transform:rotate(45deg)}
.drawer__close::after{transform:rotate(-45deg)}
.drawer__close{position:relative}

.drawer__list{padding:24px 24px 8px}
.drawer__list li+li{margin-top:26px}
.drawer__list a{display:block}
.drawer__ja{display:block;font-weight:700;font-size:18px;color:var(--text);line-height:1.4}
.drawer__en{display:block;font-weight:700;font-size:12px;color:var(--green);letter-spacing:.08em;margin-top:2px}

.drawer__cta{margin:16px 24px 40px}
.drawer .btn-cta{width:100%;height:64px;font-size:16px}

@media (min-width:1025px){
  .drawer{display:none}
}

/* =========================================================
   ⑥ FV
   ========================================================= */
.fv{
  position:relative;
  /* SP: クライアント支給の緑スウォッシュ背景(2x・透過)を1枚画像として全幅表示。
     高さは画像比率(780:2046)に追従＝画面幅いっぱい＆比率どおりに自動で伸びる */
  background-color:#fff;   /* 地色＝白＋#00686Eノイズ合成。スウォッシュ画像はその上 */
  background-image:url(../images/fv/fv-bg-sp.webp?v=2),url(../images/data/noise.webp);
  background-repeat:no-repeat,repeat;
  background-position:center top,0 0;
  background-size:100% 1023px,20px 20px;   /* 横幅は全幅で伸縮／高さは1023pxで固定＝スウォッシュの高さは変えない */
  height:1023px;                 /* SP FV高さ固定（画像の390px時の高さ＝780:2046比） */
  overflow:hidden;
}
.fv__bg{
  display:none;                      /* SP(≤1024)は.fvのfv-bg-sp.webpを使用。PCスウォッシュは非表示 */
  position:absolute;top:0;left:0;width:100%;
  height:1195px;                     /* 高さ固定→緑バンドのY位置が幅に依存しない（キャッチが常に緑上） */
  /* スウォッシュ画像は地色を透過済み→下の .fv ベース(白+ノイズ)が透けて他セクションと一致 */
  background:url(../images/fv/fv-bg.webp) no-repeat top center;
  background-size:100% 100%;
  pointer-events:none;z-index:0;
}
.fv > *:not(.fv__bg){position:relative;z-index:1}

/* ---- カルーセル ---- */
.fv-carousel{overflow:hidden;max-width:390px;margin-inline:auto}   /* SP:コンテンツは390px中央寄せ固定（幅が広くても伸ばさない）。背景のみ全幅。PCは全幅マーキーに上書き */
.fv-carousel__track{
  display:flex;align-items:center;   /* 待機カードを上下中央に（アクティブ基準で±38） */
  padding:110px 0 10px;padding-left:16px;   /* 上余白でカードをカンプ位置(y107)へ→スウォッシュ上の乗り位置を合わせる。下端→nav=10px */
  height:424px;                       /* 高さ固定＝切替時に下のコンテンツが揺れない */
}
/* SP: 矢印クリックでtransform移動 */
.fv-carousel.is-slider .fv-carousel__track{transition:transform .45s ease;will-change:transform}
@keyframes fv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SPナビ（カウンター＋進捗バー＋矢印） */
.fv-carousel__nav{
  display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;
  padding:0 16px;   /* nav高さ≒19.46px（カンプ準拠）。カード下との間隔はtrack側10px */
  max-width:390px;margin-inline:auto;   /* SP:390px中央寄せ固定 */
}
.fv-carousel__progress{width:150px;display:flex;flex-direction:column;gap:3px;min-width:0}
.fv-carousel__count{
  display:flex;align-items:baseline;gap:5px;padding-left:4px;
  color:var(--green);font-family:Helvetica,Arial,"Noto Sans JP",sans-serif;line-height:1;
}
.fv-carousel__count .cur{font-size:12px}
.fv-carousel__count .sep{font-size:8px}
.fv-carousel__count .total{font-size:12px;letter-spacing:.96px}
.fv-carousel__bar{position:relative;width:100%;height:1px;background:rgba(73,177,110,.46)}
.fv-carousel__bar-fill{
  position:absolute;left:0;top:0;height:1px;width:34%;
  background:var(--green);transition:width .35s ease;
}
.fv-carousel__arrows{display:flex;align-items:center;gap:16px;padding-bottom:2px}
.fv-carousel__arrow{padding:2px 4px}
.fv-carousel__arrow img{width:5px;height:auto;display:block}
.fv-carousel__arrow--prev img{transform:rotate(180deg)}

/* ---- カード（Figma書き出しのフラット画像＋非アクティブ用グラデ） ---- */
/* SP: フォーカス型（アクティブ=大きく上／その他=小さく下にずらす＋霞ませる） */
.fv-card{
  position:relative;flex:none;
  width:168px;
  margin-right:25px;
  filter:drop-shadow(0 1px 5px rgba(0,87,90,.28));
  transition:width .35s ease;
}
.fv-card > img{display:block;width:100%;height:auto;border-radius:2px 13px 13px 13px}
.fv-card__veil{
  position:absolute;inset:0;border-radius:2px 13px 13px 13px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,58,85,.26) 0%,rgba(0,58,85,.78) 100%);
  transition:opacity .35s ease;
}
.fv-card__link{position:absolute;inset:0;z-index:3;border-radius:2px 13px 13px 13px}   /* カード全面をクリック可能に（ホバーでマーキー停止＝355行→そのままクリックで求人へ） */
.fv-carousel.is-snapping .fv-card,
.fv-carousel.is-snapping .fv-card__veil{transition:none}
.fv-card.is-active{width:224px}
.fv-card.is-active .fv-card__veil{opacity:0}   /* アクティブは霞なし */

/* ---- キャッチコピー ＋ PM/PL ---- */
.fv-lead{
  padding:27px 16px 48px;   /* nav→キャッチ=27px／キャッチ→CTA=48px（カンプ1:5147→1:5197） */
  display:flex;flex-direction:column;gap:16px;
  max-width:390px;margin-inline:auto;   /* SP:390px中央寄せ固定 */
}
.fv-lead__copy img{height:30px;width:auto}          /* カンプ: 約29.9〜30px */
.fv-lead__copy img+img{margin-top:16px}             /* カンプ: 行間16px */
.fv-lead__tags{display:flex;align-items:flex-end;gap:4px;flex-wrap:wrap}   /* カンプ: バッジ間4px・を積極採用はバッジと下揃え(1:5178) */
.fv-pmpl{
  background:rgba(34,34,34,.8);border-radius:2.554px;   /* カンプ 1:5170/1:5174 */
  display:inline-flex;align-items:center;justify-content:center;
  width:68px;height:36px;flex:none;   /* カンプ: PM/PLとも68×36固定 */
}
.fv-pmpl img{height:22.29px;width:auto}   /* カンプ: 文字高22.288 */
.fv-lead__sekkyoku{height:22px;width:auto}          /* カンプ: 22px */

/* ---- CTA ---- */
.fv-cta-wrap{padding:0 16px;max-width:390px;margin-inline:auto}   /* SP:390px中央寄せ固定 */
.fv-cta{
  width:100%;max-width:483px;height:56px;font-size:15px;letter-spacing:.04em;   /* カンプSP: 56px / 15px */
  justify-content:space-between;gap:0;padding:0 32px 0 72px;   /* テキスト左寄り・矢印右端（カンプ） */
}
/* FV CTA 追従フローティング：ピルを画面下部中央に固定。JSでis-visible切替 */
.fv-cta-float{position:fixed;left:0;right:0;bottom:16px;z-index:90;display:flex;justify-content:center;padding:0 16px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.fv-cta-float.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
@media(min-width:1025px){.fv-cta-float{bottom:24px}}

/* ---- 職種ボタン ---- */
.fv-positions{
  padding:24px 16px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;   /* SP:2列・行間16px（カンプ） */
  max-width:390px;margin-inline:auto;   /* SP:390px中央寄せ固定（幅が広がってもボタンを伸ばさない） */
}
.fv-positions li:last-child{grid-column:1 / -1;margin-top:8px}   /* その他は全幅・グリッドから24px空ける */
.fv-pos-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:38px;padding:0 12px;border-radius:31px;   /* カンプSP: 38px */
  background:var(--green);color:#fff;
  font-weight:700;font-size:12px;text-align:center;line-height:1.2;   /* カンプSP: 12px */
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.25);
}
.fv-pos-btn img{display:none}   /* SPは矢印なし */

/* ---- FV PC ---- */
@media (min-width:1025px){
  .fv{padding-bottom:96px;background:url(../images/data/grain-fine.webp) 0 0/96px 96px repeat,#fff;height:auto}   /* PC地色＝白＋#00686Eノイズ合成。高さ固定解除 */
  .fv__bg{display:block}   /* PC(≥1025)はスウォッシュ fv-bg.webp を表示 */
  .fv-carousel{max-width:none;margin-inline:0}   /* PC:カルーセルは全幅マーキー（SPの390px上限を解除） */
  .fv-carousel__track{padding:205px 0 48px;height:auto}   /* PCマーキー。上余白でキャッチをカンプ位置(y663)へ→緑バンド上に乗る */
  /* PC: 右→左へ流れる自動スライダー（マーキー） */
  .fv-carousel.is-marquee .fv-carousel__track{
    width:max-content;
    animation:fv-marquee 45s linear infinite;
  }
  .fv-carousel.is-marquee:hover .fv-carousel__track{animation-play-state:paused}
  .fv-carousel__nav{display:none}
  .fv-card,.fv-card.is-active{width:auto;height:411px;margin-right:64px;margin-top:0}
  .fv-card > img{height:411px;width:auto;border-radius:2px 16px 16px 16px}
  .fv-card__veil{display:none}   /* PCマーキーは全カード通常表示 */

  /* キャッチ＋タグ：1160px未満でも見切れないよう左右padding＋流動スケール＋折り返し保険 */
  /* 流動スケールは1160px(=コンテンツ最大幅)で上限。1160px以上は固定＝広げても高さ不変 */
  .fv-lead{
    max-width:1160px;margin-inline:max(0px,calc((100% - 1160px)/2 - 10px)) auto;padding:0 0 48px;
    flex-direction:row;align-items:flex-end;flex-wrap:wrap;
    gap:clamp(16px,2.76vw,32px);
  }
  .fv-lead__copy{flex:0 1 auto;min-width:0}
  .fv-lead__copy img{height:clamp(45px,5.52vw,64px);width:auto;max-width:100%}
  .fv-lead__copy img+img{margin-top:16px}
  .fv-lead__tags{gap:clamp(8px,1.03vw,12px);flex-wrap:nowrap}   /* PC: padding-bottom除去→「みんなで実現する。」と下揃え(1:4826) */
  .fv-pmpl{width:auto;height:auto;padding:clamp(8px,1.03vw,12px) clamp(14px,2.07vw,24px);min-width:clamp(96px,10.69vw,124px)}
  .fv-pmpl img{height:clamp(23px,2.76vw,32px)}
  .fv-lead__sekkyoku{height:clamp(29px,3.45vw,40px)}

  .fv-cta-wrap{max-width:1160px;margin-inline:max(0px,calc((100% - 1160px)/2 - 10px)) auto;padding:0}
  .fv-cta{max-width:483px;height:80px;font-size:20px;justify-content:center;gap:16px;padding:0}   /* PCは中央寄せ維持 */

  .fv-positions{
    max-width:1160px;margin-inline:max(0px,calc((100% - 1160px)/2 - 10px)) auto;padding:40px 0 0;
    grid-template-columns:repeat(3,1fr);gap:16px;
  }
  .fv-positions li:last-child{grid-column:auto}   /* PCは全幅にしない（row3 col1） */
  .fv-pos-btn{height:48px;padding:0 40px;font-size:16px}
  .fv-pos-btn img{display:block;right:48px}
}

/* =========================================================
   ⑦ About
   ========================================================= */
.about{
  position:relative;
  /* SP: 支給のSP用背景(緑＋スウォッシュ/2x=390×1315)。FVと同仕様＝全幅・高さ1315px固定（横のみ伸縮）。
     背後#0a8470で縦長コンテンツ下部も緑で埋める。PCはメディアクエリでabout-bg.webpに差替 */
  background:#0a8470 url(../images/about/about-bg-sp.webp) no-repeat top center;
  background-size:390px 1315px;   /* SP:スウォッシュはカンプ原寸390px固定・中央（横伸びさせない）。緑地#0a8470が左右を全幅で埋める */
  border-radius:24px;
  overflow:hidden;
  color:#fff;
}
.about__deco{display:none}   /* スウォッシュは背景画像に内包 */
.about__inner{
  position:relative;z-index:1;
  max-width:390px;margin-inline:auto;padding:64px 20px;   /* SP:コンテンツは390px中央固定（幅が広くても伸ばさない）。PCは1160pxに上書き */
}
.about__en,.about__contents-title{
  font-family:'Hanken Grotesk',sans-serif;font-weight:400;
  color:#fff;line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;   /* SPは大文字（ABOUT / CONTENTS）。PCは下記@mediaで解除 */
}

/* ---- イントロ ---- */
.about__head{position:relative;margin-bottom:16px}
.about__en{font-size:40px}
.about__sub{
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;
  font-size:16px;letter-spacing:.08em;margin-top:12px;
}
.about__x{position:absolute;left:56px;top:37px;width:20px;height:auto}   /* 隙間・下端がPERSOL上端に触れる位置（PC同様） */
.about__copy{
  font-weight:700;font-size:24px;line-height:1.5;letter-spacing:.04em;
  margin-bottom:24px;
}
.about__intro{position:relative;margin-bottom:40px}
/* イントロ写真＋装飾はPCのみ（SP設計には無い） */
.about__ph{display:none;overflow:hidden;border-radius:2px 16px 16px 16px;line-height:0}
.about__ph img{width:100%;height:100%;object-fit:cover}
.about__ph-deco{display:none}
/* PC/SP出し分けユーティリティ */
.u-pc{display:none}
.u-sp{display:inline}

/* ---- 実績カード（SP=スワイプスライダー / PC=3カラム） ---- */
.about__stats-slider{position:relative;margin-bottom:56px}
.about__stats{
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.about__stats::-webkit-scrollbar{display:none}
.stat-card{
  flex:0 0 100%;scroll-snap-align:center;
  position:relative;background:#fff;border-radius:2px 10px 10px 10px;
  overflow:hidden;padding:32px;height:176px;color:var(--green);   /* SPカンプ240:8189: 349×176・padding32 */
}
/* 送り矢印（►） */
.about__stats-arrow{
  position:absolute;z-index:2;
  right:-16px;                       /* カンプ: カード右端をまたぐ（中心が右端） */
  top:calc((100% - 32px)/2);         /* ドット領域(32px)を除いたカード中央 */
  transform:translateY(-50%);
  width:32px;height:32px;   /* カンプ1:4959: 白丸＋緑▶のSVG1枚 */
}
.about__stats-arrow img{width:100%;height:100%;display:block}
/* ページャードット */
.about__stats-dots{display:flex;justify-content:center;gap:6px;margin-top:24px}
.about__stats-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s}
.about__stats-dots span.is-active{background:#fff}
.stat-card__x{position:absolute;left:-6px;top:-11px;width:45px;height:auto;pointer-events:none}
.stat-card__deco{position:absolute;right:0;top:22px;height:auto;pointer-events:none}   /* 支給の緑黄グラデ装飾(2x) */
.about__stats li:nth-child(1) .stat-card__deco{width:69px;top:22px}
.about__stats li:nth-child(2) .stat-card__deco{width:66px;top:18px}
.about__stats li:nth-child(3) .stat-card__deco{width:75px;top:22px}
.stat-card__title{font-family:"游ゴシック体",YuGothic,"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;font-weight:700;font-size:18px;letter-spacing:.04em;line-height:1;position:relative;z-index:1}   /* SPカンプ240:8195: Yu Gothic 18px（PCは@1025で24px）*/
.stat-card__body{margin-top:26px;position:relative;z-index:1}   /* SP:ラベル下→本文（カンプ body top52/pt24基準）*/
.stat-card__lead{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px;letter-spacing:.04em;margin-bottom:4px;font-feature-settings:"zero" 1}   /* SP18px・スラッシュ付き0（PCは@1025で24px）*/
.stat-card__num{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:48px;line-height:1;letter-spacing:-.01em;   /* SP48px（PCは@1025で50px）letter-spacingはem追従 */
  display:flex;align-items:baseline;
}
.stat-card__unit{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:18px;letter-spacing:.04em;margin-left:2px}   /* SP18px（PCは@1025で24px）*/
.stat-card__note{font-size:14px;font-weight:400;color:rgba(30,30,30,.8);letter-spacing:.04em;line-height:1.5;margin-top:4px}   /* SP:段間4（カンプgap4）*/

/* ---- Contents ---- */
.about__contents-title{font-size:40px;margin-bottom:24px}
.about__thumbs{display:flex;flex-direction:column;gap:24px}
.thumb__label{
  display:flex;align-items:flex-start;gap:8px;
  font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.04em;color:#fff;margin-bottom:8px;
}
.thumb__icon{width:12px;height:auto;flex:none;margin-top:2px}   /* SP動画アイコン 12×11（カンプ1:4971） */
.about__thumbs li:last-child .thumb__icon{width:9px}   /* SP資料アイコン 9×13.5（12×18の縮小） */
.thumb__sub{font-size:12px}
.thumb__link{display:block;line-height:0;border-radius:2px;overflow:hidden}
.thumb__link img{width:100%;height:auto;display:block}
/* Coming Soon（PM紹介3枚）：黒半透明＋白文字を画像に重ね、クリック無効化 */
.thumb__link--soon{position:relative;pointer-events:none;cursor:default}
.thumb__link--soon::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.8)}
.thumb__soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:.04em;line-height:1}

/* 動画サムネにYouTube再生ボタンを重ねる（Figma 240:6984。旧サムネの焼き込みボタン実測99px幅/画像740px=13.4%相当を60pxボックスで再現） */
.thumb__link--video{position:relative}
.thumb__link--video::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;pointer-events:none;
  background:url(../images/about/icon-play-yt.svg) center/contain no-repeat;
}

@media (min-width:1025px){
  .about{background-image:url(../images/about/about-bg.webp);background-size:1440px 1458px}   /* PC:スウォッシュはカンプ原寸1440px固定・中央（横伸びさせない）。緑地#0a8470が左右を全幅で埋める */
  .about__inner{max-width:1160px;padding:100px 0}
  .about__en,.about__contents-title{font-size:64px;text-transform:none}   /* PCはtitle case（About / Contents） */
  .about__sub{font-size:20px;letter-spacing:.08em;margin-top:16px}
  .about__x{left:89px;top:57px;width:27px}   /* カンプ1:3661(座標53.51)。×は隙間・下端がPERSOL上端に触れる位置に実測調整 */
  .about__copy{font-size:32px;line-height:1.5;letter-spacing:.04em}

  .u-pc{display:inline}
  .u-sp{display:none}

  /* イントロ：テキスト＋会議写真（上端・下揃え）＋ノートPC写真（右下にはみ出し重ね）※PCのみ表示 */
  .about__intro{display:flex;align-items:flex-end;gap:39px;padding-bottom:73px;margin-bottom:40px}   /* 会議写真をイントロ上端(top0)へ＝ノートPC写真が下にはみ出す */
  .about__lead{flex:none}
  .about__ph{display:block}
  .about__ph--meeting{width:408px;height:272px;max-width:none;aspect-ratio:auto;margin-bottom:0;flex:none}
  .about__ph--laptop{
    position:absolute;left:882px;top:120px;width:278px;height:225px;max-width:none;aspect-ratio:auto;margin:0;   /* カンプ1:3667: left=882(グループ805+77) */
  }
  .about__ph-deco{
    display:block;position:absolute;left:805px;top:231px;width:140px;height:auto;pointer-events:none;
  }

  /* カード：PCは3カラム（スライダー解除） */
  .about__stats-slider{margin-bottom:100px}
  .about__stats{flex-direction:row;gap:24px;overflow:visible;scroll-snap-type:none}
  .stat-card{flex:1;padding:33.9px 33.9px 25.4px;height:186.6px;scroll-snap-align:none}   /* カンプ準拠: 固定高186.6px・下pad25.4px（240:6916）*/
  .stat-card__title{font-size:24px}   /* PCカンプ240:6922: 24px（SPは18px）*/
  .stat-card__lead{font-size:24px}    /* PC24px（SPは18px）*/
  .stat-card__num{font-size:50px}     /* PC50px（SPは48px）*/
  .stat-card__unit{font-size:24px}    /* PC24px（SPは18px）*/
  .stat-card__body{margin-top:22.6px}   /* カンプ: ラベル下→数値（body top55.13/pt25.4基準）*/
  .stat-card__body:has(.stat-card__lead){margin-top:17.2px}   /* リード行があるカード1は詰める（pt20）*/
  .stat-card__note{margin-top:4.2px}   /* カンプ: 段間gap4.24 */
  .about__stats-arrow,.about__stats-dots{display:none}

  /* Contents：3カラム折り返し */
  .about__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .thumb__icon{width:16px}   /* PC動画アイコン 16×15（カンプ1:3724） */
  .about__thumbs li:last-child .thumb__icon{width:12px}   /* PC資料アイコン 12×18（カンプ1:3812） */
  .thumb__soon{font-size:22px}   /* PCはサムネが大きいのでComing Soonを拡大 */
}

/* =========================================================
   ⑧ エンジニアファースト
   ========================================================= */
.eng{
  position:relative;color:var(--green);
  background-color:#fff;   /* 地色＝白＋AI版grainグレーノイズ。グラデはその上 */
  background-image:url(../images/engineer/bg-grad-sp.webp),url(../images/data/grain-fine.webp);
  background-repeat:no-repeat,repeat;
  background-position:center calc(100% - 30px),0 0;   /* SP:グラデ下端をセクション下端−30pxに */
  background-size:100% 798px,96px 96px;   /* グラデ(390×798)＋ノイズタイル(AI版grain-fine 96px) */
  overflow:hidden;
}
.eng__inner{max-width:390px;margin-inline:auto;padding:64px 20px 0}   /* SP:390px中央寄せ固定（幅が広くても動かさない）。PCは1160px上書き */
.eng__h{font-weight:700;font-size:24px;line-height:1.4;letter-spacing:.04em;color:var(--green)}

/* イントロ */
.eng__head{position:relative;margin-bottom:40px}
.eng__en{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:16px;line-height:1;letter-spacing:.08em;color:var(--green);margin-bottom:16px}
.eng__title{font-weight:700;font-size:24px;letter-spacing:.04em;color:var(--green);line-height:1.2}
.eng__lead{font-weight:500;font-size:16px;line-height:1.6;letter-spacing:.04em;color:#222;margin-top:16px}
.eng__deco{position:absolute;pointer-events:none}
.eng__deco--top{display:none}
.eng__gradline{display:block;width:100%;height:auto;align-self:stretch}   /* SP:見出し下グラデ線 */

/* 強みバナー（SP=カンプ1:5231：段違い＋左下透かしPERSOL CROSS TECHNOLOGY／390基準） */
.eng__banner{position:relative;height:151px;margin:0 -20px 40px}
.eng__str{position:absolute;display:flex;align-items:center;color:#fff;
  text-shadow:0 1px 1px rgba(10,132,112,.32)}
.eng__str-t{white-space:nowrap}
.eng__str-t>span{vertical-align:baseline}
.eng__str--you{left:0;top:0;width:195px;height:48px;padding-left:32px;justify-content:flex-start;border-radius:1px 0 0 1px;
  background:linear-gradient(294.31deg,rgb(10,132,112) 35.46%,rgba(0,201,30,.471) 96.97%,rgba(77,239,134,0) 116.36%)}
.eng__str--persol{left:147px;top:88px;width:267px;height:63px;padding-left:16px;gap:7px;justify-content:flex-start;border-radius:1px 0 0 1px;
  background:linear-gradient(119.51deg,rgb(10,132,112) 54.35%,rgba(0,201,30,.471) 103.57%,rgba(77,239,134,0) 132.48%)}
.eng__str--persol .eng__str-t{display:flex;align-items:center;gap:7px}
.eng__str--persol .eng__str-md{line-height:1.046}
.eng__str-lg{font-weight:700;font-size:24px;letter-spacing:.05em}
.eng__str--persol .eng__str-lg{font-size:32px;line-height:.95}
.eng__str-sm{font-weight:700;font-size:18px;letter-spacing:.05em}
.eng__str-md{font-weight:700;font-size:16px;letter-spacing:.05em}
.eng__banner-x{position:absolute;left:170px;top:44px;width:41px;height:auto;z-index:2}
.eng__banner-wm{position:absolute;left:20px;top:86px;margin:0;font-family:'Hanken Grotesk',sans-serif;
  font-weight:500;font-size:14px;line-height:1.7;letter-spacing:.08em;color:rgba(10,132,112,.5)}

/* 写真＋見出し（SP=カンプ1:5243：見出し2行→グラデ線→写真の縦並び。背景文字なし） */
.eng__intro2{display:flex;flex-direction:column-reverse;gap:24px;margin-bottom:56px}
.eng__ph1{border-radius:1px 12px 12px 12px;overflow:hidden;line-height:0;height:224px}
.eng__ph1 img{width:100%;height:100%;object-fit:cover;display:block}
.eng__intro2-txt{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.eng__intro2-txt .eng__h{font-size:24px;line-height:1.5;text-align:left}   /* leading1.2+gap7≒1.5 */
.eng__bgtext{display:none}   /* SPは背景文字なし（バナー側の透かしに移動） */
.eng__h--skills{font-size:16px;margin-bottom:16px;line-height:1.6}   /* SP16px・見出し→図16px（カンプ1:5287 y68-h52）。PCは40px/margin0上書き */

/* スキル図（SP=カンプ1:5287） */
.eng__skills{position:relative;margin-bottom:-12px}   /* SP:写真ブロックを図下端に約12px重ねる（カンプ:Frame287が図に重なる） */
.eng__deco--skills{top:11px;right:-20px;width:94px;height:auto}   /* SP:スキル右上の装飾。親.eng__skills（390px中央列内）基準で固定。幅が広がっても390px時の位置から動かさない（右端は列右端＝-20pxで見切れ）。比率維持 */
.eng__deco--bottom-sp{right:calc(50% - 215px);bottom:-20px;width:218px;height:auto;z-index:0}   /* SP:右下装飾。390px中央列の右端＋20px(見切れ)に固定。50%-215=(50%-195列右端)-20。幅が広がっても390px時の位置から動かさない。比率維持 */
.eng__diagram{width:100%;max-width:none;height:auto;margin:0 auto}
.eng__diagram--pc{display:none}
.eng__diagram--sp{display:block;width:380px;max-width:none;margin-left:calc(50% - 190px)}   /* カンプ379px実寸・横幅中心。コンテンツ幅より広くても中央に来るよう margin-left=50%-図半幅 */

/* 下部CTA（SP=カンプ1:5257：段違い小写真＋白ボックス350×40＋サブ4行） */
.eng__cta{position:relative;max-width:390px;margin:0 auto;padding:0 0 96px}   /* SP:390px中央寄せ固定。PCはmax-width:none上書き */
.eng__cta-photos{position:relative;height:189px;margin:0}   /* .eng__ctaは全幅。写真leftはセクション基準（photo1 x-14/photo2 x127/photo3 x288） */
.eng__cta-ph{position:absolute;line-height:0}
.eng__cta-ph img{width:100%;height:auto;display:block}   /* 焼き込み済み完成画像。原寸比率で表示 */
.eng__cta-ph--l{left:-14px;top:0;width:117px}
.eng__cta-ph--c{left:127px;top:35px;width:137px}
.eng__cta-ph--r{left:288px;top:73px;width:159px}
.eng__cta-inner{position:relative;z-index:2;margin-top:-72px;padding:0 20px;text-align:center}
.eng__cta-banner{background:#fff;border-radius:1px 6px 1px 6px;display:flex;align-items:center;justify-content:center;gap:5px;height:40px;width:350px;max-width:100%;margin:0 auto 32px}   /* カンプ1:5276:350px固定・×前後の余白5px */
.eng__cta-banner p{font-weight:700;font-size:16px;line-height:1;color:var(--green);letter-spacing:.05em;font-feature-settings:normal}   /* palt無効化：括弧・句読点は全角幅 */
.eng__cta-x{width:25px;height:auto}
.eng__cta-sub{font-weight:700;font-size:16px;line-height:1.6;color:#fff;letter-spacing:.04em;text-align:left}   /* SP:カンプは左揃え（4行とも左端x≈24で揃う）。PCは中央 */
.eng__deco--bottom{display:none}

@media (min-width:1025px){
  .eng{background-image:url(../images/engineer/deco-bottom-pc.webp),url(../images/engineer/bg-grad-pc.webp),url(../images/data/grain-fine.webp);background-repeat:no-repeat,no-repeat,repeat;background-position:right bottom,top center,0 0;background-size:322px 140px,100% 100%,96px 96px}   /* PC:装飾・グラデ・地色ノイズ層を分離（地色=白+AI版grainグレーノイズ、グラデはその上） */
  .eng__inner{max-width:1160px;padding:100px 0 0}
  .eng__h{font-size:40px}

  /* イントロ：左見出し＋右サブ（下揃え） */
  .eng__head{display:flex;align-items:flex-end;justify-content:space-between;max-width:1160px;margin:0 auto 56px}
  .eng__en{font-size:24px;letter-spacing:.08em;margin-bottom:16px}
  .eng__title{font-size:56px;letter-spacing:.04em}
  .eng__lead{font-size:18px;margin-top:0;padding-bottom:8px;color:var(--green)}   /* PC説明文は緑(1:3833)。SPは#222 */
  .eng__deco--top{display:block;top:-44px;right:-140px;width:143px;height:auto}   /* 透明度は画像に内包（opacity指定しない） */

  /* 強みバナー（全幅ブリード・帯93px） */
  .eng__banner{position:relative;display:block;height:139px;width:min(100vw,1440px);margin-left:max(calc(50% - 50vw),-140px);margin-bottom:48px}   /* PC:バナー→intro2 48px（カンプ1:3839→1:3851）。1440px超は背景グラデを伸ばさず中央寄せで打ち止め（-140=(1440-1160)/2、.eng__inner=1160基準） */
  .eng__str{position:absolute;height:93px;padding:0}
  .eng__str--you{left:0;right:54.4%;top:0;width:auto;padding:0 40px 0 0;justify-content:flex-end;border-radius:0;
    background:linear-gradient(90deg,rgba(77,239,134,0) 0%,rgba(0,201,30,.47) 25%,#0a8470 70%)}
  .eng__str--persol{left:54.4%;right:0;top:46px;width:auto;gap:0;padding:0 0 0 40px;justify-content:flex-start;border-radius:0;
    background:linear-gradient(90deg,#0a8470 30%,rgba(0,201,30,.47) 75%,rgba(77,239,134,0) 100%)}
  .eng__str--persol .eng__str-t{display:flex;align-items:center;gap:8px}   /* カンプ1:3846/1:3847:「パーソル〜」と「強み」を高さ中央で揃える（別テキスト2つを中央配置） */
  .eng__str-lg{font-size:48px;letter-spacing:.05em}
  .eng__str--persol .eng__str-lg{font-size:48px;line-height:1}
  .eng__str-sm{font-size:27px}
  .eng__str-md{font-size:24px;line-height:1}
  .eng__banner-x{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:70px;height:80px;z-index:2}
  .eng__banner-wm{display:none}

  /* 写真＋見出し：写真左・テキスト右（下揃え） */
  .eng__intro2{display:flex;flex-direction:row;gap:0;align-items:flex-end;justify-content:space-between;max-width:1160px;margin:0 auto 56px}
  .eng__ph1{width:558px;height:322px;flex:none;margin-bottom:0}
  .eng__ph1 img{height:100%;object-fit:cover}
  .eng__intro2-txt{display:block;width:540px;text-align:left;padding-bottom:8px}
  .eng__bgtext{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:47px;line-height:1.2;letter-spacing:.06em;color:rgba(10,132,112,.12);text-align:right;margin-bottom:0;position:absolute;right:0;top:-88px;z-index:0}   /* カンプ1:3864: 薄い緑透かし・右揃え・見出し背面(z-index0)。※baseがdisplay:noneのため色/フォント等をここで再指定 */
  .eng__intro2-txt .eng__h{font-size:40px;line-height:1.4;text-align:left;position:relative;z-index:1}
  .eng__gradline{display:block;width:100%;height:auto;margin-top:14px}   /* カンプ1:3861: 見出し下のグラデ線 */

  /* スキル図：見出し左・図右 */
  .eng__skills{display:flex;align-items:flex-start;justify-content:space-between;max-width:1160px;margin:0 auto 0;padding-bottom:60px}
  .eng__h--skills{padding-top:48px;margin-bottom:0}
  .eng__diagram--pc{display:block}
  .eng__diagram--sp{display:none}
  .eng__diagram{width:581px;max-width:none;margin:0;position:relative;z-index:3}

  /* 下部CTA：写真を段違いに重ねる（カンプ1:3866） */
  .eng__cta{max-width:none;padding:0 0 145px;margin:-350px auto 0}   /* サブテキスト下の余白をカンプに合わせる */
  .eng__cta-photos{position:relative;max-width:1440px;margin:0 auto;height:581px;display:block;gap:0}
  .eng__cta-ph{position:absolute}
  .eng__cta-ph--l{left:-5px;top:0;width:25.5%}
  .eng__cta-ph--c{left:calc(50% - 68px);transform:translateX(-50%);top:117px;width:29.8%}
  .eng__cta-ph--r{left:auto;right:0;top:217px;width:34.6%}
  .eng__cta-inner{position:relative;z-index:2;margin:-171px auto 0;max-width:1088px;padding:0 20px}   /* 白ボックスを実幅1048pxに（カンプFrame10185=1048） */
  .eng__cta-banner{border-radius:2px 16px 2px 16px;height:auto;width:auto;gap:8px;padding:13px 40px;margin:0 auto 40px}   /* 上下対称でテキストを高さ中央に（箱高さ78px維持：×52+13+13） */
  .eng__cta-banner p{font-size:40px;letter-spacing:.05em}
  .eng__cta-x{width:47px}
  .eng__cta-sub{font-size:20px;text-align:center}   /* PCは中央（カンプ1:3885） */
}

/* =========================================================
   ⑨ POSITIONS 募集ポジションを探す
   ========================================================= */
.pos{padding:64px 0;background:url(../images/data/grain-fine.webp) 0 0/96px 96px repeat,#fff;--pos-accent:#3ACA98}   /* 地色＝白＋#00686Eノイズ合成（DATAと同じタイル）。合成で薄緑に見える */
.pos__head{margin-bottom:24px;padding-inline:20px}   /* SP:左右20px。タイトル↔パネルの余白（SP24/PC48） */
.pos__eyebrow{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:16px;letter-spacing:.08em;color:var(--green);margin-bottom:8px}
.pos__title{font-weight:700;font-size:24px;line-height:1.4;letter-spacing:.04em;color:var(--green);font-feature-settings:"palt" 1}   /* SP24px。カーニング（palt）でカンプの字間に */
.pos__sub{font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--green);margin-top:12px}

/* ラッパー（タブ＝折りタブ と 本体パネル を内包）。タブは左上に飛び出す“山”、本体はその下。 */
.pos__wrap{position:relative}

/* タブ（SP=アクセント緑#3ACA98のセグメント型ピル・角丸6px・パネル内上部に配置。PCはダーク緑の折りタブに上書き） */
.pos__tabs{position:relative;z-index:1;display:flex;padding:4px;background:var(--pos-accent);border-radius:6px;margin-bottom:16px}
.pos__tab.is-active{background:#fff;color:var(--green)}

/* 本体パネル。SP:全角丸・padding-top56（タブ上のダーク緑余白）。PCは左上角なし・折りタブ上書き。スウォッシュ下端固定。 */
.pos__panel{position:relative;background:url(../images/positions/swoosh-sp.webp) center calc(100% + 30px)/100% auto no-repeat,var(--green);border-radius:16px;padding:56px 20px 56px;color:#fff}   /* SP:スウォッシュを30px下げ（15+15） */
.pos__tab{flex:1;display:flex;align-items:center;justify-content:center;height:48px;font-weight:700;font-size:14px;line-height:1;color:#fff;border-radius:4px;background:transparent;transition:background .2s,color .2s;white-space:nowrap}   /* SP:2等分のセグメント。PCはコンパクト上書き */

/* カードグリッド */
.pos__grid{list-style:none;display:grid;grid-template-columns:1fr;gap:16px;margin-top:0}
.pos-card{position:relative;background:#fff;border-radius:8px;overflow:hidden;padding:44px 16px 20px;color:var(--text)}   /* 白背景は4角すべて8px丸。overflow:hiddenでタグを角に沿わせる（PC/SP全12枚共通） */
.pos-card__tag{position:absolute;left:0;top:0;max-width:calc(100% - 16px);background:var(--pos-accent);color:#fff;font-weight:700;font-size:15px;line-height:1.3;letter-spacing:.02em;padding:5px 16px;border-radius:2px 2px 8px 2px}   /* カンプ:右下のみ8px(他≒角なし)。右上を丸すぎないよう2pxに */

/* ビュー（折りたたみ） */
.pos-card__view{position:relative;overflow:hidden;max-height:118px;transition:max-height .3s ease}   /* SP折りたたみ表示量。PCは96pxに上書き */
.pos-card.is-open .pos-card__view{max-height:1500px}
.pos-card__view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;transition:opacity .2s}
.pos-card.is-open .pos-card__view::after{opacity:0}

/* 行（ラベル＋箇条書き） */
.pos-row{display:flex;gap:16px;padding:10px 0;border-top:1px solid #D4D4D4}
.pos-row:first-child{border-top:0}
.pos-row__label{flex:none;width:48px;font-weight:700;font-size:12px;line-height:1.4;color:rgba(51,51,51,.52)}
.pos-row__list{list-style:none;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pos-row__list li{position:relative;padding-left:14px;font-weight:500;font-size:12px;line-height:1.5;color:#556966}
.pos-row__list li::before{content:"";position:absolute;left:2px;top:.42em;width:4px;height:4px;border-top:1.5px solid var(--pos-accent);border-right:1.5px solid var(--pos-accent);transform:rotate(45deg)}

/* トリガー */
.pos-card__foot{margin-top:14px;display:flex;align-items:center}
.pos-card__toggle{display:inline-flex;align-items:center;cursor:pointer;background:transparent;border:0;padding:0}
.pos-card.is-open .pos-card__foot{justify-content:flex-end}   /* 展開時のピルはカード右下へ右寄せ */
.pos-card.is-open .pos-card__toggle{display:none}   /* 展開時は「続きを読む」を隠し、詳細リンクのみ表示 */
.pos-card__toggle-ov{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--green)}
.pos-card__toggle-ov::after{content:"";flex:none;width:7px;height:7px;margin-top:-1px;border-bottom:2px solid var(--green);border-right:2px solid var(--green);transform:rotate(45deg);transition:transform .2s}   /* ⌄をテキストと縦中央（apexが下なので-1pxで微調整） */
.pos-card.is-open .pos-card__toggle-ov::after{margin-top:3px;transform:rotate(-135deg)}
/* 詳細を見る（緑ピル・白＞矢印付き）。カンプ:角丸31/padding上9下10左28右20/矢印 */
.pos-card__toggle-sk{display:none;align-items:center;gap:14px;font-weight:700;font-size:14px;color:#fff;background:var(--pos-accent);border-radius:31px;padding:9px 20px 10px 28px;box-shadow:inset 0 -2px 2px rgba(0,0,0,.25);text-decoration:none}
.pos-card__toggle-sk::after{content:"";flex:none;width:8px;height:11px;background:url(../images/common/chevron-white.svg) center/contain no-repeat}   /* カンプ矢印8×10.6px */
/* 折りたたみ/展開でトリガー表記を切替（タブ問わず共通）：折=続きを読む⌄／展開=詳細を見る（ピル） */
.pos-card.is-open .pos-card__toggle-ov{display:none}
.pos-card.is-open .pos-card__toggle-sk{display:inline-flex}

/* JOIN US */
.pos__join{position:relative;text-align:left;margin-top:40px;padding-top:8px}   /* SP:左寄せ。PCは中央 */
.pos__join-eyebrow{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:32px;letter-spacing:.08em;color:#fff;margin-bottom:24px}   /* SP32px */
.pos__join-copy{font-weight:700;font-size:16px;line-height:1.6;letter-spacing:.04em;color:#fff;margin-bottom:24px}   /* SP16px */
.pos__join-cta{position:relative;max-width:350px;width:100%;height:56px;margin:0 auto;font-size:15px}   /* SP:350×56 */
.pos__join>*{position:relative;z-index:1}   /* JOIN US要素はスウォッシュ(パネル背景)より前面 */
.pos__join-cta .btn-cta__arrow{position:absolute;right:24px;top:50%;width:auto;height:18px;transform:translateY(-50%)}   /* 2色の＞を右端に配置（基底のscaleX反転も解除） */

/* ---- POSITIONS PC ---- */
@media (min-width:1025px){
  .pos{padding:100px 0}
  .pos__head{margin-bottom:48px;padding-inline:0}
  .pos__eyebrow{font-size:24px}
  .pos__title{font-size:40px;letter-spacing:.04em}
  .pos__panel{background:url(../images/positions/swoosh-pc.webp) center calc(100% - 20px)/100% auto no-repeat,var(--green);border-radius:0 16px 16px 16px;padding:40px 40px 100px;margin-top:104px}   /* margin-top=48(余白)+56(折りタブ)。スウォッシュを20px上げ（10+10） */
  .pos__tabs{position:absolute;left:0;bottom:100%;width:max-content;padding:4px;background:var(--green);border-radius:8px 8px 0 0;margin:0 0 -1px 0}   /* PC:ダーク緑の折りタブ（パネル上へ飛び出す） */
  .pos__tab{flex:0 0 auto;height:48px;font-size:16px;padding:0 24px}
  .pos__join-cta .btn-cta__arrow{right:40px;height:20px}
  .pos__grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0;padding-top:0;max-width:1080px;margin-inline:auto;align-items:start}
  .pos-card{padding:48px 16px 24px}
  .pos-card__view{max-height:96px}
  .pos__join{margin-top:8px;text-align:center}
  .pos__join-eyebrow{font-size:64px;letter-spacing:.08em;margin-bottom:24px}
  .pos__join-copy{font-size:24px;line-height:1.6;letter-spacing:.04em;margin-bottom:32px}
  .pos__join-cta{max-width:483px;height:80px;font-size:20px}
}

/* ============================================================
   organization — 組織を知る
   ============================================================ */
.org{padding:72px 0 0;background:url(../images/data/grain-fine.webp) 0 0/96px 96px repeat,#fff}   /* 地色＝白＋#00686Eノイズ合成（fv/eng/posと同じ） */
.org__head{padding-inline:20px;display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.org__eyebrow{font-family:"Hanken Grotesk",sans-serif;font-weight:500;font-size:16px;letter-spacing:1.28px;line-height:1;color:var(--green);text-transform:uppercase}
.org__title{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:24px;letter-spacing:.96px;line-height:1.2;color:var(--green)}
.org__inner{width:100%;max-width:351.5px;margin-inline:auto}

/* サブ見出し */
.org__subhead{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:16px;letter-spacing:.64px;line-height:1.2;color:#222}
.org__subicon{width:17.75px;height:13.89px;flex:none}

/* 組織図ツリー */
.org__tree{display:flex;flex-direction:column;gap:12px}
.org__box{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;border-radius:4px;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:14px}
.org__box--top{height:48px;background:#fff;color:#222;box-shadow:0 0 1px rgba(0,85,71,.24)}
.org__box--green{background:var(--green);color:#fff;line-height:1.4;padding:8px 12px}
.org__down{display:block;width:16px;height:10px;margin:0 0 0 32px;background:url(../images/organization/tree-arrow.svg) center/contain no-repeat}
.org__row{display:flex;flex-direction:column;gap:8px}
.org__others{display:flex;align-items:center;gap:10px}
.org__tag{flex:none;background:rgba(10,132,112,.75);color:#fff;border-radius:9px;padding:2px 7px;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:10px;line-height:1.4;white-space:nowrap}
.org__links{font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:12px;line-height:1.5;color:#006F73}
.org__links a{color:#006F73;text-decoration:none}
.org__sep{color:#006F73;margin:0 2px}

/* カード */
.org__cards{list-style:none;margin:48px 0 0;padding:0;display:flex;flex-direction:column;gap:32px}
.org-card{position:relative;background:#fff;border-radius:8px;padding:0 16px 24px;display:flex;flex-direction:column;gap:16px}
.org-card__tag{align-self:flex-start;box-sizing:border-box;width:81px;padding:4px 10px;text-align:center;background:var(--green);color:#fff;border-radius:0 0 2px 2px;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:14px;line-height:1.3}
.org-card__head{display:flex;flex-direction:column;gap:9px}
.org-card__title{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:19px;line-height:1.4;color:#0E2B30;min-height:2.8em}
.org-card__body{position:relative;max-height:76px;overflow:hidden;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:12px;line-height:1.6;color:rgba(34,34,34,.8)}
.org-card__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:59px;background:linear-gradient(to bottom,rgba(255,255,255,0) 44.7%,#fff);pointer-events:none}
.org-card.is-open .org-card__body{max-height:none}
.org-card.is-open .org-card__body::after{display:none}
.org-card__more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:0;border:0;background:none;cursor:pointer;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:14px;line-height:1;color:var(--green)}
.org-chev{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.org-card.is-open .org-card__more .org-chev{transform:translateY(1px) rotate(-135deg)}
.org-card__more-txt--close{display:none}
.org-card.is-open .org-card__more-txt--open{display:none}
.org-card.is-open .org-card__more-txt--close{display:inline}

/* メディア */
.org-card__media{display:flex;flex-direction:column;gap:16px}
.org-card__photo{display:block;width:318px;max-width:100%;height:152px;object-fit:cover}
.org-card__jobs{display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 32px;border:1px solid rgba(10,132,112,.17);border-radius:6px;background:linear-gradient(171.31deg,#5CB471,#0F8770);color:#fff;cursor:pointer;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:14px;letter-spacing:.84px;line-height:1}
.org-card__jobs .org-chev{transition:transform .25s}
.org-card.is-jobs-open .org-card__jobs .org-chev{transform:translateY(1px) rotate(-135deg)}
/* 募集職種はこちら 展開パネル（実測: node 240:11125系） */
.org-card__jobs-panel{display:none;flex-direction:column;gap:16px;width:100%}
.org-card.is-jobs-open .org-card__jobs-panel{display:flex}
.org-card.is-jobs-open .org-card__jobs{display:none}
.org-card__job{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:8px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(174.28deg,#CDEEBD,#ADE2ED) border-box;border:2px solid transparent;border-radius:6px;padding:30px 16px 12px;text-decoration:none}
.org-card__job-cat{position:absolute;left:-2px;top:-2px;background:var(--green);color:#fff;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:12px;letter-spacing:.48px;line-height:1.3;padding:3px 6px;border-radius:6px 0 1px 0;white-space:nowrap}
.org-card__job-title{align-self:flex-start;color:var(--green);font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:14px;letter-spacing:.56px;line-height:1.4}
.org-card__job-more{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:12px;line-height:1;border-bottom:1px solid rgba(10,132,112,.5);padding-bottom:3px}
.org-card__job-chev{display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.org-card__jobs-close{display:flex;align-items:center;justify-content:space-between;width:100%;height:40px;padding:0 32px;background:#E0EFEB;border:1px solid rgba(10,132,112,.17);border-radius:6px;color:var(--green);font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.56px;line-height:1;cursor:pointer}
.org-chev--up{transform:translateY(1px) rotate(-135deg)}

/* ---- PC (>=1025px) ---- */
@media (min-width:1025px){
  .org{padding:100px 0}
  .org__head{padding-inline:20px;margin-bottom:48px}
  .org__eyebrow{font-size:24px;letter-spacing:1.92px;text-transform:none}
  .org__title{font-size:40px;letter-spacing:1.6px}
  .org__inner{max-width:var(--content)}
  .org__subhead{font-size:18px;letter-spacing:.72px}

  .org__tree{gap:16px}
  .org__box--top{height:56px;font-size:16px}
  .org__box--green{font-size:16px;padding:10px 32px}
  .org__row{flex-direction:row;align-items:center;gap:24px}
  .org__box--green{flex:none;width:556px}
  .org__others{flex:1;gap:16px}
  .org__tag{border-radius:16px;padding:6px 15px;font-size:14px}
  .org__links{font-size:16px}
  .org__sep{font-size:14px}
  .org__down{width:21px;height:13px;margin-left:250px}

  .org__cards{flex-direction:row;align-items:flex-start;gap:24px;margin-top:48px}
  .org-card{flex:1;min-width:0;padding:0 16px 24px}
  .org-card__title{font-size:20px}
  .org-card__body{max-height:84px;font-size:14px}
  .org-card__body::after{height:70px}
  .org-card__more{font-size:16px}
  .org-card__photo{width:100%;height:161.56px}
  .org-card__jobs{height:42px;border-radius:6.316px;font-size:16px;letter-spacing:.96px;background:linear-gradient(171.31deg,#5CB471,#0F8770)}
}

/* ============================================================
   求人詳細モーダル（FV職種ボタン）
   ============================================================ */
body.modal-open{overflow:hidden}
.job-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.job-modal[hidden]{display:none}
.job-modal__overlay{position:fixed;inset:0;background:rgba(6,42,34,.62)}
.job-modal__dialog{position:relative;width:100%;max-width:400px;margin:auto;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 48px)}
.job-modal__dialog:focus{outline:none}
.job-modal__close:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.job-modal__card{flex:1;min-height:0;overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:28px 20px 22px}
.job-modal__title{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:19px;line-height:1.4;color:var(--green)}
.job-modal__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.job-modal__tags li{background:rgba(10,132,112,.1);color:var(--green);font-size:12px;font-weight:500;line-height:1;padding:6px 10px;border-radius:17px;white-space:nowrap}
.job-modal__more{display:flex;align-items:center;justify-content:center;gap:10px;height:40px;margin-top:16px;background:#f0a340;border-radius:6px;color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.job-modal__more-ico{display:inline-flex;align-items:center;justify-content:center;transform:translateY(2px)}   /* 2色シェブロン(上=白/下=#32D89C)のSVGラッパー。flexで垂直中央＋和文グリフに合わせ2px下げ（高く見える対策） */
.job-modal__sec{margin-top:22px}
.job-modal__h{font-weight:700;font-size:15px;color:#222;margin-bottom:8px}
.job-modal__text{font-size:13px;line-height:1.75;color:#333;white-space:pre-line}
/* CLOSEはカード外・右寄せの薄グレーピル（カンプ 252:1865） */
.job-modal__close{flex:none;align-self:flex-end;margin:0;padding:4px 12px;background:#dddddd;border:0;border-radius:39px;color:#333;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:12px;letter-spacing:.48px;line-height:1.3;cursor:pointer}
@media (min-width:1025px){
  .job-modal{align-items:center;padding:40px}
  .job-modal__dialog{max-width:420px;max-height:calc(100vh - 80px)}
}

/* ============================================================
   skill / MEMBER STORY — 社員のスキルとプロジェクトを知る
   ============================================================ */
.skl{padding:64px 0 0;overflow:hidden;background:url(../images/data/grain-fine.webp) 0 0/96px 96px repeat,#fff}   /* MEMBER STORY上部の地色＝白＋#00686Eノイズ（下はskl__panelグラデが上に乗る） */
.skl__head{padding-inline:20px;display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.skl__eyebrow{font-family:"Hanken Grotesk",sans-serif;font-weight:500;font-size:16px;letter-spacing:1.28px;line-height:1;color:var(--green)}
.skl__title{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:.96px;color:var(--green)}

.skl__panel{position:relative;background:linear-gradient(132.6deg,rgba(169,226,115,.4) 9%,rgba(69,143,159,.4) 108%),#fff;border-radius:12px 12px 0 0;overflow:hidden;padding:40px 0 64px}
.skl__panel-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:40px;max-width:350px}
.skl__deco{position:absolute;height:auto;pointer-events:none;z-index:0}
/* SP装飾(240:8978): パネル上部 y133・中央追従・加工なし(そのまま)。PC装飾(240:7583): 下端。出し分け(pc-only/sp-only) */
.skl__deco--sp{top:133px;left:calc(50% - 98px);width:293px}
.skl__deco--pc{bottom:0;left:calc(50% - 189px);width:744px;opacity:.8;mix-blend-mode:multiply}

.skl-item{position:relative}
.skl-item__no{position:relative;z-index:5;display:flex;align-items:baseline;gap:8px;color:var(--green);margin-bottom:-14px}
.skl-item__no-en{font-family:"Hanken Grotesk",sans-serif;font-weight:500;font-size:16px;letter-spacing:1.28px}
.skl-item__no-num{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:32px;letter-spacing:-.64px;line-height:1;font-feature-settings:"zero" 1}

/* SP実測(Frame185/240:8982): 写真は右寄せ(左62px空け288幅)、タグ/スキル/×/キャッチは左端x0から写真にはみ出し重なる。座標は写真上端(=media上端)基準 */
.skl-item__media{position:relative;width:100%}
.skl-item__photo{width:288px;height:174px;margin-left:auto;border-radius:2px 12px 12px 12px;overflow:hidden;line-height:0}
.skl-item__photo img{width:100%;height:100%;object-fit:cover;object-position:bottom;display:block}
.skl-item__tag{position:absolute;left:0;top:90px;z-index:2;background:#E0EFEB;color:var(--green);font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:12px;letter-spacing:.96px;line-height:1;padding:5px 10px 6px;border-radius:0 3px 0 0;white-space:nowrap}
.skl-item__skill{position:absolute;left:0;top:108px;z-index:2;background:var(--green);color:#fff;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:14px;letter-spacing:1.12px;line-height:1;padding:5px 10px 6px;border-radius:0 1px 1px 0;white-space:nowrap}
.skl-item__x{position:absolute;left:52px;top:131px;z-index:3;width:21px;height:24px;background:url(../images/skill/x-mark.webp) center/contain no-repeat}
.skl-item__catch{position:absolute;left:0;top:153px;z-index:2;width:max-content;max-width:100%;background:linear-gradient(#f5f7f7,#f5f7f7) padding-box,linear-gradient(178deg,#32D89C,#458F9F) border-box;border:1px solid transparent;border-radius:4px;padding:8px 16px 10px 10px;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:14px;letter-spacing:.56px;line-height:1.3;color:var(--green)}

.skl-item__body{align-self:flex-start;width:331px;max-width:100%;margin-top:31px;background:#fff;border-radius:2px;padding:16px;display:flex;flex-direction:column;gap:8px}
.skl-item__text{font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:12px;line-height:1.4;color:var(--text)}
.skl-item__text p+p{margin-top:1em}
.skl-item__more{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;color:var(--green);font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:12px;text-decoration:none}
.skl-item__more-ico{width:7px;height:7px;border-right:2px solid var(--green);border-top:2px solid var(--green);transform:rotate(45deg)}

/* ---- PC ---- */
@media (min-width:1025px){
  .skl{padding:100px 0 0}
  .skl__head{padding-inline:0;margin-bottom:0}
  .skl__eyebrow{font-size:24px;letter-spacing:1.92px}
  .skl__title{font-size:40px;letter-spacing:1.6px}

  .skl__panel{margin-top:32px;padding:64px 0 76px}
  .skl__panel-inner{gap:48px;max-width:var(--content)}

  .skl-item{position:relative}
  .skl-item__no{position:absolute;top:-18px;left:0;margin:0;z-index:4}
  .skl-item__no-en{font-size:20px;letter-spacing:1.6px}
  .skl-item__no-num{font-size:40px;letter-spacing:-.8px}

  .skl-item__row{display:flex;align-items:stretch}
  .skl-item__media{width:499px;flex:none}
  .skl-item__photo{width:100%;height:100%;margin-left:0;border-radius:2px 0 0 8px}
  /* Frame21実測: 写真内でスキル帯 y183-214 / キャッチ y234-278（gap20）/ × left71 y211。写真下端基準の絶対配置 */
  .skl-item__tag{top:auto;bottom:92px;left:0;font-size:14px;letter-spacing:1.12px;padding:6px 12px 7px}
  .skl-item__skill{top:auto;bottom:61px;left:0;font-size:20px;letter-spacing:1.6px;padding:5px 10px 6px}
  .skl-item__x{top:auto;bottom:36px;left:71px;width:24px;height:28px}
  /* キャッチ枠: 上・右のみグラデ枠、左・下はカード外枠に密着(枠なし)。左下角はカードと同じ8px */
  .skl-item__catch{top:auto;bottom:0;left:0;border-width:1px 1px 0 0;border-radius:4px 4px 4px 8px;padding:8px 16px 10px 10px;font-size:20px;letter-spacing:.8px}

  .skl-item__body{margin-top:0;flex:1;min-width:0;min-height:275px;border-radius:0 12px 12px 0;padding:32px 24px;gap:24px}
  .skl-item__text{font-size:17px}
  .skl-item__more{font-size:16px}
  .skl-item__more-ico{width:8px;height:8px}
}

/* =========================================================
   FEATURE 強みを知る（node 252:6795 / SP 240:9038）
   ========================================================= */
.feat{position:relative;overflow:hidden;background:#00362d}
/* 濃緑でも見えるノイズ：明るい微粒(grain-fine)を薄く重ねる */
.feat::before{content:"";position:absolute;inset:0;background:url(../images/data/feat-grain.webp?v=3) 0 0/96px 96px repeat;pointer-events:none;z-index:0}
/* スウォッシュ背景（支給・原寸表示。SP=全幅top53 / PC=1440基準left37を中央基準に固定） */
.feat__swoosh{position:absolute;pointer-events:none;z-index:0;height:auto;mix-blend-mode:soft-light}
.feat__swoosh--sp{left:50%;transform:translateX(-50%);bottom:-151px;width:390px}   /* カンプ実測(soft-light同士でCTA基準一致)：下カーブがCTA上端の約202px上。原寸390px・中央アンカー（幅拡大でも動かない） */
.feat__swoosh--pc{left:calc(50% - 686px);top:0;width:1136px;height:100%}   /* カンプ通りセクション全体を満たす背景（クリップ領域=セクション高）。上下端とも揃う。縦は約0.8%フィットのみ（不可視） */

.feat__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:40px;padding-top:72px;padding-bottom:72px;padding-inline:20px}

/* 見出し */
.feat__head{display:flex;flex-direction:column;gap:16px}
.feat__en{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:16px;line-height:1;letter-spacing:1.28px;color:#fff;font-feature-settings:normal}
.feat__title{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:.96px;color:#fff}

/* カード群 */
.feat__cards{display:flex;flex-direction:column;gap:16px}

/* 01 PRIME 大カード */
.feat-lead{position:relative;overflow:hidden;border-radius:2px 12px 2px 12px;padding:16px 20px 24px;
  background:linear-gradient(139.3deg,#359C8B 6.2%,#0A8470 30%,#046858 99.5%);
  display:flex;flex-direction:column;gap:16px}
.feat-lead__x{position:absolute;right:-8px;top:-34px;width:95px;height:auto;mix-blend-mode:multiply;pointer-events:none}
.feat-lead__head{display:flex;flex-direction:column;gap:16px}
.feat-lead__idx{display:flex;align-items:flex-end;gap:8px;color:#fff}
.feat-lead__no{font-family:'JetBrains Mono',monospace;font-size:32px;line-height:1;font-feature-settings:"zero" 1}
.feat-lead__label{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:16px;line-height:1;opacity:.79;transform:translateY(-3px);font-feature-settings:"zero" 1}
.feat-lead__title{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:24px;line-height:1.4;color:#fff}
.feat-lead__body{font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:14px;line-height:1.4;color:#fff}

/* 02-07 グリッド */
.feat__grid{display:flex;flex-direction:column;gap:16px}
.feat-card{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:2px 12px 2px 12px;padding:18px 20px 20px;overflow:hidden}
.feat-card__head{display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid rgba(10,132,112,.22);padding-bottom:10px}
.feat-card__idx{display:flex;flex-direction:column;gap:2px;padding-top:3px;flex:none}
.feat-card__no{font-family:'JetBrains Mono',monospace;font-size:20px;line-height:1;color:var(--green);font-feature-settings:"zero" 1}
.feat-card__label{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:12px;line-height:1;color:rgba(10,132,112,.5);font-feature-settings:"zero" 1}
.feat-card__title{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:16px;line-height:1.4;color:var(--green);padding-top:2px}
.feat-card__body{font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:12px;line-height:1.6;color:var(--text)}
.feat-card__note,.feat-card__note-inline{color:#7d7d7d;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:12px;line-height:1.4}
/* 「※2026年4月時点」はPC/SPとも別行・カード05注記と同じ（12px・本文との余白8px）。
   PCのみ、横並びのカード05(3行本文)と注記高さを揃えるため本文テキストを3行分の高さで固定（折り返し行数のブラウザ差に依存しない）。 */
.feat-card__note-inline{display:block;margin-top:8px}
@media (min-width:1025px){
  .feat-card__bodytext{display:block;min-height:calc(1.4em * 3)}
}

/* CTA（共通btn-cta再利用） */
.feat__cta{display:flex;justify-content:center}
.feat-cta{position:relative;width:350px;max-width:100%;height:56px;font-size:15px;border-radius:6px;letter-spacing:.04em}
.feat-cta .btn-cta__arrow{position:absolute;right:32px;top:50%;transform:translateY(-50%);width:auto;height:14px}   /* カンプ:右向き＞を右端に配置（基底のscaleX反転を解除） */

/* ---- PC (≥1025px) ---- */
@media (min-width:1025px){
  .feat__inner{gap:48px;padding-top:100px;padding-bottom:100px;padding-inline:0}
  .feat__head{padding-left:20px}
  .feat__en{font-size:24px;letter-spacing:1.92px}
  .feat__title{font-size:40px;letter-spacing:1.6px}

  .feat-lead{padding:24px 20px;background:linear-gradient(171.63deg,#359C8B 6.2%,#0A8470 30%,#046858 99.5%)}
  .feat-lead__x{right:0;top:-6px;width:122px}
  .feat-lead__head{flex-direction:row;align-items:center;gap:16px}
  .feat-lead__no{font-size:40px}
  .feat-lead__label{transform:translateY(-5px)}
  .feat-lead__title{font-size:32px;white-space:nowrap}
  .feat-lead__body{font-size:18px}

  .feat__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .feat-card__idx{gap:5px}
  .feat-card__no{font-size:24px}
  .feat-card__label{font-size:16px}
  .feat-card__title{font-size:20px;line-height:1.2}
  .feat-card__body{font-size:14px;line-height:1.4}

  .feat-cta{width:483px;height:80px;font-size:20px;border-radius:8.571px}
  .feat-cta .btn-cta__arrow{right:40px;height:20px}
}

/* =========================================================
   DATA 数字を知る（PC 240:9948 展開 / SP 240:9707 / 折りたたみ 240:7735,240:9129）
   ========================================================= */
.data{background:#ecf3f3;position:relative}
/* Figma背景エフェクト noise（サイズ0.5・密度100%・#00686E 12%）を再現。#00686Eの微細グレインを全面に敷き、平均色を#ECF3F3→#DDEDEC相当に。タイル200px→100px表示で0.5px粒 */
.data::before{content:"";position:absolute;inset:0;background:url(../images/data/noise.webp) 0 0/20px 20px repeat;pointer-events:none;z-index:0}
.data__inner{display:flex;flex-direction:column;gap:24px;padding-top:72px;padding-bottom:72px;padding-inline:20px;position:relative;z-index:1}
.data__head{display:flex;flex-direction:column;gap:16px}
.data__en{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:16px;line-height:1;letter-spacing:1.28px;color:var(--green)}
.data__title{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:.96px;color:var(--green)}

/* 折りたたみ本体 */
/* 折りたたみ：mask-imageで最終カードを「透明」に溶かす（色オーバーレイではなく透過）。透けた先は.data背景(#ecf3f3)+.data::beforeノイズ=実背景そのものなので、白カードの残像＝白枠が原理的に出ない。カンプの「行下端をゴースト化」と一致 */
.data__body{display:flex;flex-direction:column;gap:24px;position:relative;max-height:490px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}
.data.is-open .data__body{max-height:none;-webkit-mask-image:none;mask-image:none}

.data__group{display:flex;flex-direction:column;gap:16px}
.data__subhead{display:flex;align-items:center;gap:12px}
.data__subicon{width:17.75px;height:13.89px;flex:none;opacity:.78}
.data__subttl{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.64px;color:#222}

.data__grid{display:flex;flex-direction:column;gap:16px}

/* 数字カード */
.dstat{background:#fff;border-radius:2px 12px 2px 12px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.dstat__label{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:16px;line-height:1.1}
.dstat__label::before{content:"";width:8px;height:2px;flex:none;border-radius:1px;background:#8edb45}
.dstat__label span{background:linear-gradient(160deg,#8edb45 18%,#0a8470 105%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.dstat__value{display:inline-flex;align-items:baseline;justify-content:center;color:var(--green);font-family:'JetBrains Mono',monospace;font-feature-settings:"zero" 1;line-height:1;white-space:nowrap}
.dstat__value .n{font-size:51px}
.dstat__value .d{font-size:37px}
.dstat__value .c{font-size:25.5px}
.dstat__value .u{font-size:20.4px}
.dstat__value .u--pre{margin-right:6px}
.dstat__gap{display:inline-block;width:14px}

.dstat__note{font-size:12px;line-height:1.4;color:#00473b;font-family:"Noto Sans JP",sans-serif;align-self:center}
.dstat__note--multi{align-self:center;text-align:left}   /* SP:従業員数の注記ブロックは中央・テキストは左揃え（上の行を下の行の左端に合わせる）*/
.dstat__nrow{display:flex;align-items:baseline;justify-content:center;column-gap:6px}   /* SP:数値＋注記を1行に（注記=数値の右・下寄せ）カンプ240:9750/9760/9770 */
.dstat__nrow .dstat__note{align-self:baseline}
.dstat__nrow:has(.dstat__gap){position:relative}   /* 外国人カード（数値2連）は幅が広いので注記を名以上の上に配置（カンプ240:9770）*/
.dstat__nrow:has(.dstat__gap) .dstat__note{position:absolute;right:0;top:0;align-self:auto}
.dstat__nrow--push{transform:translateX(25px)}   /* SP:部活同好会の数字＋注記を右へ25px（10+15。PCはdisplay:contentsで無効）*/
.dstat__nrow--r25{transform:translateX(25px)}   /* SP:産休取得率の数字＋注記を右へ25px（15+10）*/

.dstat__box{width:100%;background:rgba(10,132,112,.08);border-radius:2px;padding:3px 8px;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#00473b}
.dstat__box--notes{padding:9px 8px;font-size:12px}

/* 育休カード（男性/女性の2値） */
.dstat--iku .dstat__label{margin-bottom:0}
.dstat__value--iku{flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;gap:0 16px;align-self:flex-start}
.iku-fig{display:inline-flex;align-items:baseline;white-space:nowrap}
.iku-fig .lbl{font-size:20.4px}
.dstat__note--iku{font-size:13px;color:rgba(0,71,59,.7);align-self:flex-end;margin-bottom:4px;transform:translateY(3px)}   /* SP:育休の注記を3px下へ */

/* トグルボタン */
.data__toggle{display:flex;justify-content:center}
.data__toggle-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:350px;max-width:100%;height:56px;background:#0a8470;border:none;border-radius:6px;box-shadow:0 0 2px rgba(10,132,112,.32);cursor:pointer;padding:0 40px;
  font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:15px;letter-spacing:.6px;color:#fff;white-space:nowrap}
.data__toggle-ico{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:14px;height:auto;flex:none;transition:transform .25s}
.data.is-open .data__toggle-ico{transform:translateY(-50%) scaleY(-1)}

/* ---- PC (≥1025px) ---- */
@media (min-width:1025px){
  .data__inner{gap:48px;padding-top:100px;padding-bottom:100px;padding-inline:0}
  .data__en{font-size:24px;letter-spacing:1.92px}
  .data__title{font-size:40px;letter-spacing:1.6px}

  .data__body{gap:48px;max-height:290px;
    -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}   /* PC：行1(〜227px)を鮮明に見せ、行2(外国人/部活)はラベルだけ薄く透過させて溶かす（カンプ一致）。maskで実背景が透けるため白枠なし */
  .data__group{gap:16px}
  .data__subttl--lg{font-size:20px;letter-spacing:.8px}

  .data__grid{flex-direction:row;flex-wrap:wrap;gap:16px}
  .data__grid--01{align-items:flex-start}   /* PC:01は各カード自然高さ（本文なしカードを伸ばさない）カンプ240:9963 */
  .data__grid--02{align-items:flex-start}   /* PC:02も自然高さ（産休を育休に合わせて伸ばさない）カンプ240:10024 */
  .dstat{width:auto}
  .dstat__nrow{display:contents}   /* PCは現状維持（注記は数値の下・中央）*/
  .dstat__nrow .dstat__note{align-self:center;position:static}
  .dstat__nrow:has(.dstat__gap){display:flex;align-items:baseline;justify-content:center;column-gap:6px}   /* PC:外国人も1行flex（注記は上付き＝baseの絶対配置が効く）カンプ240:10002 */
  .dstat__nrow--push{display:flex;align-items:baseline;justify-content:center;column-gap:6px}   /* PC:部活同好会は数字＋注記を1行に（SPと同じ）。右25pxは.dstat__nrow--pushのtransformを継承 */
  .dstat__nrow--push .dstat__note{align-self:baseline;position:static}
  .dstat__nrow--pc{display:flex;align-items:baseline;justify-content:center;column-gap:6px;transform:none}   /* PC:産休・顧客数・取引社数も注記を数値の右横に（SPの--r25シフトはPCでは無効化）カンプ240:10024/10063 */
  .dstat__nrow--pc .dstat__note{align-self:baseline;position:static}
  .dstat__note--iku{transform:none}   /* 3px下げはSPのみ */
  .dstat--w278{width:278px}
  .dstat--w350{width:350px}
  .dstat--w451{width:451px}
  .data__grid--03{max-width:1082px}

  .data__toggle{justify-content:flex-start}
  .data__toggle-btn{width:310px}
}

/* =========================================================
   EMPLOYEE BENEFITS 福利厚生・学べる環境を知る（PC 240:7819 / SP 240:9211）
   ========================================================= */
.ben{background:url(../images/data/grain-fine.webp) 0 0/96px 96px repeat,#fff;overflow-x:clip}   /* 地色＝白＋#00686Eノイズ合成（fv/eng/pos/org/sklと同じ）。装飾の横はみ出し防止 */
.ben__inner{display:flex;flex-direction:column;gap:48px;padding-top:72px;padding-bottom:72px;padding-inline:20px}   /* 他セクション同様SPは左右20pxインセット（見出し・リード・カードをx=20に。これが抜けていて全て左端ベタ付けになっていた） */

/* 上段：見出し＋写真 */
.ben__top{display:flex;flex-direction:column;gap:24px}
.ben__headwrap{display:flex;flex-direction:column;gap:16px}
.ben__head{position:relative}
.ben__en{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:16px;line-height:1;letter-spacing:1.28px;color:var(--green);margin-bottom:16px}
.ben__title{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:.96px;color:var(--green)}
/* SP見出し背後のスウォッシュ装飾（2枚グラデ矩形・240:9213） */
.ben__en,.ben__title{position:relative;z-index:1}
.ben__deco-sp{position:absolute;right:0;top:22px;width:112px;height:48px;background:url(../images/benefits/deco-sp.webp) center/contain no-repeat;pointer-events:none;z-index:0}   /* 支給画像 Frame124(大判・240:9213)。カンプ実測(px)：装飾右端x≈370。.ben__inner padding-inline:20pxで.ben__head右端が370になったのでright:0で右端370に一致 */
.ben__lead{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;color:#222}
.ben__lead--sp{font-size:16px;line-height:1.7;letter-spacing:.64px}
.ben__lead--pc{font-size:18px;line-height:1.6;letter-spacing:.72px}

/* 写真＋ラベル（SP：写真右・ラベル左重ね） */
.ben__photo{position:relative;width:353px;max-width:100%;height:262px;margin:24px auto 0}
.ben__photo>img{position:absolute;right:0;top:0;width:245px;height:262px;object-fit:cover;object-position:78% center;border-radius:2px 12px 12px 12px;display:block}
.ben__labels{position:absolute;left:0;top:131px;display:flex;flex-direction:column;gap:24px}
.ben__label{position:relative;display:flex;align-items:center;height:40px;padding-left:18px;color:#fff;font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:18px;letter-spacing:.9px;white-space:nowrap;border-radius:1px 6px 1px 6px}
.ben__label--1{width:130px;background:linear-gradient(135deg,#5FD299,#0A8470)}   /* カンプ実測（左上明→右下濃） */
.ben__label--2{width:231px;background:linear-gradient(135deg,#36AB85,#0A8470)}
.ben__x{position:absolute;left:51px;top:38px;width:26.25px;height:29.227px}

/* カード群 */
.ben__cards{display:flex;flex-direction:column;gap:24px}
.ben-card{position:relative;z-index:2;overflow:hidden;background:#fff;border-radius:2px 12px 12px 12px;box-shadow:0 0 2px rgba(19,128,102,.24);padding:20px 16px;display:flex;flex-direction:column;gap:8px}   /* z-index:2＝食い込むMESSAGEグラデ背景(z-index:1)より前面に。カードが背景の上に来る */
.ben-card__head{display:flex;gap:5px;align-items:flex-start;width:100%}
.ben-card__no{position:relative;flex:none;font-family:'JetBrains Mono',monospace;font-size:20px;line-height:1;color:var(--green);font-feature-settings:"zero" 1;padding-right:6px}
.ben-card__no::after{content:"";position:absolute;left:9px;top:12px;width:18.6px;height:18.6px;background:url(../images/benefits/num-slash.svg) center/contain no-repeat}
.ben-card__title{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:20px;line-height:1.4;color:var(--green)}
.ben-card__icon{position:absolute;top:4px;right:4px;width:48px;height:48px;border-radius:8px}   /* 02〜05は枠が画像端まで=正方形→01の角丸に合わせて角丸化 */
.ben-card__icon--lg{width:56px;height:56px;top:0;right:1px}
.ben-card__body{font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:#222}
/* 右下グラデ装飾（支給画像 Frame124=deco.webp・下辺で約半分クリップ） */
.ben-card__deco{position:absolute;right:0;bottom:0;width:56px;height:17.5px;background:url(../images/benefits/deco.webp) right bottom/contain no-repeat;pointer-events:none}

/* 詳細を読む（SP：本文トグル） */
/* 折りたたみ時「詳細を読む」＝オレンジ塗り・白文字・インデント32px */
.ben-card__more{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-left:32px;padding:3px 10px 2px;background:#f2a13e;border:0;border-radius:2px;color:#fff;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:12px;cursor:pointer}
.ben-card__more-ico{width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-1px)}
/* 展開時「詳細を閉じる」＝背景なし・グラデ文字・上矢印オレンジ・インデントなし（カンプ240:9879） */
.ben-card.is-open .ben-card__more{background:transparent;margin-left:0}
.ben-card.is-open .ben-card__more-txt{background:linear-gradient(90deg,#F2A03D,#F7FFAE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ben-card.is-open .ben-card__more-ico{border-right-color:#F2A03D;border-bottom-color:#F2A03D;transform:rotate(-135deg) translate(-1px,-1px)}
.ben-card__body{display:none}
.ben-card.is-open .ben-card__body{display:block}

/* ---- PC (≥1025px) ---- */
@media (min-width:1025px){
  .ben__inner{gap:48px;padding-top:100px;padding-bottom:140px;padding-inline:0}
  .ben__top{flex-direction:row;gap:48px;align-items:flex-start}
  .ben__headwrap{width:612px;gap:24px}
  .ben__en{font-size:24px;letter-spacing:1.92px}
  .ben__title{font-size:40px;letter-spacing:1.6px}

  .ben__photo{width:500px;height:288px;margin:0;flex:none}
  .ben__photo>img{position:static;width:500px;height:288px;border-radius:1px 12px 12px 12px}
  .ben__labels{top:148px;gap:32px}
  .ben__label{height:54px;font-size:24px;letter-spacing:1.2px;padding-left:24px;border-radius:1px 8px 1px 8px}
  .ben__label--1{width:176px}
  .ben__label--2{width:298px}
  .ben__x{left:69px;top:51px;width:35.4px;height:39.5px}

  .ben__cards{flex-direction:row;flex-wrap:wrap;gap:24px}
  .ben-card{width:370px;border-radius:2px 16px 16px 16px;padding:24px 16px}
  .ben-card__head{flex-direction:column;gap:5px}   /* PCは番号を上・タイトルを下（フル幅） */
  .ben-card__no{font-size:24px}
  .ben-card__no::after{left:10px;top:13px;width:19.7px;height:19.7px}
  .ben-card__title{font-size:24px}
  .ben-card__icon{width:48px;height:48px;top:10px;right:11px}
  .ben-card__icon--lg{width:64px;height:64px;top:2px;right:3px}
  .ben-card__more{display:none}
  .ben-card__body{display:block;font-size:14px}
  .ben-card__deco{right:0;bottom:0;width:59px;height:18.4px}
}

/* =========================================================
   MESSAGE ＋ フッター（コピーライト）  PC:240:6834 / SP:240:8135
   背景=支給グラデ画像(全幅) / 写真3枚=焼き込みcrop・そのまま / 全要素は.msg__inner基準の絶対配置(実測座標1:1)
   ========================================================= */
.msg{position:relative;z-index:1;overflow:hidden;margin-top:-274px;background:url(../images/message/bg-sp.webp) 0 0/100% 100% no-repeat}   /* SP:実表示調整で計-274px上げ（カンプ204px食い込み＋微調整）。z-index:1で背景グラデはBENEFITS背景の上、ただしカード(z-index:2)より下 */
.msg__inner{position:relative;width:100%;max-width:390px;height:869px;margin-inline:auto}

/* 写真（SP：上部に斜め配置。crop焼き込み済みのためそのまま表示） */
.msg__ph{position:absolute;object-fit:cover;border-radius:6px;box-shadow:0 4px 16px rgba(0,54,45,.12)}
.msg__ph--1{left:-24px;top:258px;width:117px;height:137px;overflow:hidden}   /* フレーム */
.msg__ph--1 img{display:block;width:100%;height:100%;object-fit:cover;position:relative;left:18px}   /* SP:フレーム位置は固定のまま、画像のみ右へ18px（左の隙間は左ブリード24px内で画面外） */
.msg__ph--2{left:117px;top:293px;width:137px;height:114px}
.msg__ph--3{left:278px;top:331px;width:122px;height:116px;overflow:hidden}   /* フレーム(写真1と同じ2層構造)。位置・サイズ固定 */
.msg__ph--3 img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%}   /* 内側の写真。枠をちょうど覆う=余白が出ないギリギリの下限(cover)。縦長支給→横長枠を最小フィル。2人可視 */

/* テキスト */
.msg__en{position:absolute;left:20px;top:447px;font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:16px;line-height:1;letter-spacing:.08em;color:#fff}
.msg__title{position:absolute;left:20px;top:487px;width:351px;font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:24px;line-height:1.55;letter-spacing:.04em;color:#fff}
.msg__lead{position:absolute;left:20px;top:587px;width:351px;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:14px;line-height:1.85;letter-spacing:.02em;color:#fff}   /* カンプは本文も太字(PC/SP共通) */

/* CTA：本体は横グラデ #F3F1C4→#D7E843、矢印は2色(arrow-cta.svg #0A8470/#32D89C) */
.msg__cta{position:absolute;left:20px;top:723px;width:350px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(90deg,#F3F1C4 0%,#D7E843 100%);box-shadow:0 4px 12px rgba(0,54,45,.14);text-decoration:none}
.msg__cta-txt{font-family:"Yu Gothic","游ゴシック","Noto Sans JP",sans-serif;font-weight:700;font-size:16px;letter-spacing:.05em;color:var(--green)}
.msg__cta-arrow{position:absolute;top:50%;right:32px;transform:translateY(-50%);width:11px;height:14px}

/* コピーライト */
.msg__copyright{position:absolute;left:0;right:0;top:833px;text-align:center;font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:12px;letter-spacing:.05em;color:#BFE8D7}

@media (min-width:1025px){
  .msg{background-image:url(../images/message/bg-pc.webp);margin-top:-542px}   /* カンプでMESSAGEフレーム(y10200)はBENEFITS(下端10742)に542px食い込む＝グラデ背景がBENEFITS下部に重なり、全要素が542px上がる */
  .msg__inner{max-width:none;height:1181px}
  /* 写真（PC：右側に斜め、右端へブリード。右アンカーで広幅でも右端に固定） */
  .msg__ph{border-radius:10px;box-shadow:0 8px 28px rgba(0,54,45,.16)}
  .msg__ph--1{left:auto;right:494px;top:542px;width:227px;height:266px}
  .msg__ph--1 img{left:0}   /* PCはシフトなし */
  .msg__ph--2{left:auto;right:204px;top:649px;width:266px;height:221px}
  .msg__ph--3{left:auto;right:0;top:741px;width:181px;height:225px}
  /* テキスト：左端はコンテンツ左端(1160中央寄せ)に追従。狭幅でも24px確保 */
  .msg__en{left:clamp(24px,calc(50% - 580px),50%);top:588px;font-size:56px;letter-spacing:.12em}   /* カンプ実測幅306pxに合わせトラッキング調整 */
  .msg__title{left:clamp(24px,calc(50% - 580px),50%);top:680px;width:560px;font-size:42px;line-height:1.55}
  .msg__lead{left:clamp(24px,calc(50% - 580px),50%);top:832px;width:664px;font-size:18px;line-height:1.78}
  .msg__cta{left:clamp(24px,calc(50% - 580px),50%);top:936px;width:483px;height:80px}
  .msg__cta-txt{font-size:19px}
  .msg__cta-arrow{right:57px;width:16px;height:20px}
  .msg__copyright{top:1116px}
}