/* ===== page-service.css ｜ 事業案内（Figma 14486:41856）=====
   デザイン言語: 色/書体トークンは base.css。英大見出し＋和ラベルのペア、共通ボタン(.btn)、コンテンツ幅1200中央（--pad-side）を全ページで使い回す。 */

/* --- 下層FV 写真あり（Component 14 h1000）: 独自の2重グラデ＋写真を下端に敷く --- */
.lfv--service{height:1000px;padding-bottom:0}
.lfv--service .lfv__bg::before{content:"";position:absolute;inset:0;background:linear-gradient(176.04deg,#fff 4.5265%,#f0faff 50%)}
.lfv--service .lfv__bg::after{background:linear-gradient(157.3deg,#fff 16.393%,rgba(240,250,255,0) 52.653%)}
/* 写真 1440×628: 上辺が (0,152)→(1440,0) の斜めカット（Figma書き出しPNGのα形状を clip-path で再現） */
.lfv__photo{position:absolute;left:calc(50% - 721px);bottom:0;   /* Figma は w1438 内で中央寄せ＝1px左（画素照合で確認） */width:1440px;height:628px;pointer-events:none}
.lfv__photo img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 24.2%,100% 0,100% 100%,0 100%);max-width:none}
/* 1440超の画面では写真を全幅に広げる（左右に地色が出ないように。斜めカットは%指定なので追従） */
@media (min-width:1442px){.lfv__photo{left:0;width:100%}.lfv__photo img{object-position:center bottom}}
.lfv__en--service{letter-spacing:-1px}   /* インク幅 Figma 317px に合わせて実測補正 */
/* Figma は各テキストボックス高を整数に丸めるため、小数の行高（19.2/38.4）を整数に固定して累積ズレを防ぐ */
.lfv .breadcrumb li{line-height:19px}
.lfv .lfv__label{line-height:38px}
/* 右カラム: pt117 ＋ 白のアンカーナビ（pt20 pb28 px32）。角に16px角の水色を左下・右上 */
.lfv__side{display:flex;align-items:center;padding-top:117px;margin-right:2px}   /* Figma の Component 14 は w1438 のため右端が 1318 */
.anchor-nav{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:20px 32px 28px;background:var(--c-base)}
.anchor-nav::before,.anchor-nav::after{content:"";position:absolute;width:16px;height:16px;background:var(--c-main2)}
.anchor-nav::before{left:-16px;bottom:0}
.anchor-nav::after{right:-16px;top:-16px}
/* 箱幅は1行目（文字＋gap50＋矢印12）で決まり、2行目以降は w-full justify-between（Figma） */
.anchor-nav__item:first-child{gap:50px}
.anchor-nav__item{display:flex;align-items:center;justify-content:space-between;gap:0;width:100%;padding:12px 0;border-bottom:1px solid var(--c-border2);font-size:14px;font-weight:500;line-height:1.2;letter-spacing:.14px;white-space:nowrap;transition:color .35s var(--ease-out-quint)}
.anchor-nav__item span{min-width:100px}
.anchor-nav__arrow{width:12px;height:12px;flex:none;transform:rotate(90deg)}
.anchor-nav__arrow .ic-bar{fill:var(--c-main2)}
.anchor-nav__arrow .ic-chev{fill:none;stroke:var(--c-main);stroke-width:1.3}
@media (hover:hover){.anchor-nav__item:hover{color:var(--c-main)}}

/* --- サービス本体: base3 / pt120 px120 pb160 / ブロック間 gap100 --- */
.svc{display:flex;flex-direction:column;align-items:center;gap:100px;width:100%;padding:120px var(--pad-side) var(--sp-section-gap);background:var(--c-base3);overflow:hidden}
.svc-block{display:flex;align-items:flex-start;gap:120px;width:100%;max-width:1200px;padding-bottom:var(--sp-under-btn2);border-bottom:1px solid var(--c-border)}
.svc-block--last{padding-bottom:0;border-bottom:0}
.svc-block__body{display:flex;flex-direction:column;align-items:flex-start;gap:48px;flex:none;padding-top:12px}
.svc-block__body--fluid{flex:1 0 0;min-width:1px;gap:0}
.svc-block__texts{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.svc-block__main{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:580px}
.svc-block__body--fluid .svc-block__main{width:100%}
.svc-block__intro{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%}
/* 見出し＋本文の箱。背景の "Service 0N" はこの箱基準で right:0 top:-34px */
.svc-block__head{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-under-h3);width:100%}
.svc-block__bg{position:absolute;right:0;top:-34px;font-family:var(--font-en);font-weight:600;font-size:85px;line-height:1.2;color:var(--c-text-sub2);opacity:.1;white-space:nowrap;text-align:right;font-feature-settings:normal;pointer-events:none}
.svc-title{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:245px}
/* 行高は Figma が整数に丸めた値（16px×1.6=26 / 14px×1.6=22 / 36px×1.6=58）で固定し、行ごとの累積ズレを防ぐ */
.svc-title__tag{padding-bottom:0;border-bottom:1px solid var(--c-border2);font-size:var(--fs-body-m);font-weight:500;line-height:26px;letter-spacing:.16px;color:var(--c-gray);white-space:nowrap}
.svc-title__h2{font-size:var(--fs-concept);font-weight:500;line-height:58px;letter-spacing:1.44px;white-space:nowrap}
.svc-block__text{position:relative;width:100%;font-size:var(--fs-body-m);font-weight:400;line-height:26px;letter-spacing:.16px}
.svc-block__em{font-weight:500;color:var(--c-text-sub)}
/* Chrome は Noto の字面が Figma より下に出る（16px/26行: 1px、36px/58行: 2px。実測）→ 字面だけ引き上げて画素照合を合わせる */
.svc-block__text,.svc-feat__label{top:-1px}
.lfv--service .lfv__lead{position:relative;top:-1px}
.svc-title__h2{position:relative;top:-2px}
.svc-block__note{display:flex;align-items:flex-start;gap:2px;font-size:var(--fs-body-s);font-weight:400;line-height:22px;letter-spacing:.14px;color:var(--c-gray)}
.svc-block__note--wrap{width:100%}
.svc-block__note--wrap .svc-block__note-text{flex:1 0 0;min-width:1px}
.svc-block__note-mark{flex:none;white-space:nowrap}
/* 特長（Component 13）: 70×70 白の平行四辺形 ＋ 50px アイコン、gap4 で 16px lh1.4 */
.svc-feats{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 48px;width:100%}
.svc-feats--03{flex-wrap:nowrap;gap:48px}
.svc-feat{display:flex;align-items:center;gap:4px}
.svc-feat__icon{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:70px;height:70px;padding:10px}
.svc-feat__icon::before{content:"";position:absolute;inset:0;background:var(--c-base);clip-path:polygon(0 0,60.74% 0,100% 100%,39.26% 100%)}
.svc-feat__icon img{position:relative;width:50px;height:50px}
.svc-feat__label{position:relative;font-size:var(--fs-body-m);font-weight:400;line-height:22px;letter-spacing:.16px;white-space:nowrap}
.svc-feat__label small{font-size:var(--fs-body-s)}
/* 白の補足ボックス（01: px20 py12 / 02: チェックリスト px32 py16） */
.svc-block__box{width:580px;padding:12px 20px;background:var(--c-base);border-radius:var(--r-s);font-size:var(--fs-body-s);font-weight:400;line-height:22px;letter-spacing:.14px}
.svc-checks{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:580px;padding:16px 32px;background:var(--c-base);border-radius:var(--r-s)}
.svc-checks li{display:flex;align-items:center;gap:8px;width:100%;font-size:var(--fs-body-s);font-weight:400;line-height:22px;letter-spacing:.14px;white-space:nowrap}
.svc-checks img{flex:none;width:20px;height:20px}
.svc-block__btns{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
/* ビジュアル */
.svc-visual{position:relative;flex:none;border-radius:var(--r-m);overflow:hidden}
.svc-visual img{display:block;width:100%;height:100%;object-fit:cover}
.svc-visual--01{width:500px;height:613px;border-radius:0}
.svc-visual__arm{position:absolute;right:0;top:0;width:430px;height:522px;background:var(--c-base);border-radius:var(--r-m);overflow:hidden}
.svc-visual__arm img{position:absolute;left:73px;top:12px;width:308px;height:498px;object-fit:fill}
.svc-visual__tablet{position:absolute;left:0;bottom:0;width:220px;height:267px;border-radius:var(--r-m);overflow:hidden}
.svc-visual--02{width:500px;height:606px}
.svc-visual--03{width:532px;height:418px}

/* --- このページの Contact-footer は TOP と同じ pt140 ＋ フッター上罫線（Figma 14231:3432 インスタンス） --- */
.contact-footer--service{padding-top:140px}
.contact-footer--service .footer__top{padding-top:48px;border-top:1px solid var(--c-gray)}

/* ===== SP（768px以下）: SPカンプ無し → TOP-SP（375）のルール（左右24px・SPトークン・1カラム）から導出 ===== */
@media (max-width:768px){
  /* --- FV写真あり: 高さ固定を解除し、写真は本文の下に全幅で流し込む（TOP-SP Company の「文→写真」構図） --- */
  .lfv--service{height:auto;padding-bottom:0}
  .lfv__photo{position:relative;order:2;left:auto;bottom:auto;width:calc(100% + var(--sp-side-m) * 2);height:220px;margin:24px calc(var(--sp-side-m) * -1) 0}
  .lfv__photo img{object-position:center 30%}
  /* アンカーナビ: 右カラム→本文の下に全幅の白カード（縦リスト） */
  .lfv__side{width:100%;padding-top:0;margin-right:0}
  .anchor-nav{width:100%;padding:8px 20px 12px}
  .anchor-nav__item,.anchor-nav__item:first-child{gap:24px}
  .anchor-nav__item:last-child{border-bottom:0}

  /* --- サービス本体: 写真→見出し→本文→特長→ボタン の縦積み --- */
  .svc{gap:64px;padding:var(--sp-section-gap) var(--sp-side-m)}
  .svc-block{flex-direction:column;gap:40px;padding-bottom:64px}
  .svc-block--last{padding-bottom:0}
  .svc-visual{order:-1;width:100%;height:auto}
  .svc-block__body{width:100%;padding-top:0;gap:32px}
  .svc-block__main{width:100%}
  .svc-block__head{gap:var(--sp-under-h3)}
  .svc-block__bg{top:-40px;font-size:40px;line-height:1}
  .svc-title{min-width:0}
  .svc-title__h2{top:0;line-height:1.5;letter-spacing:1.12px;white-space:normal}
  .svc-block__text{top:0;line-height:1.8}
  .svc-block__note{line-height:1.7}
  .svc-feats{gap:8px 24px}
  .svc-feats--03{flex-wrap:wrap;gap:8px 24px}
  .svc-feat__label{top:0;line-height:1.4}
  .svc-block__box,.svc-checks{width:100%}
  .svc-checks{padding:16px 20px}
  .svc-checks li{align-items:flex-start;white-space:normal;line-height:1.7}
  .svc-checks img{margin-top:1px}
  /* ビジュアル: 500×613 の合成は比率固定の%配置でそのまま縮小（アーム／タブレットの比率は維持） */
  .svc-visual--01{aspect-ratio:500/613}
  .svc-visual__arm{width:86%;height:85.15%}
  .svc-visual__arm img{left:16.98%;top:2.3%;width:71.63%;height:95.4%}
  .svc-visual__tablet{width:44%;height:43.56%}
  .svc-visual--02{aspect-ratio:500/606}
  .svc-visual--03{aspect-ratio:532/418}
}