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

/* --- 下層FV タイトル小＋イラスト（Component 14）: lfv--s を継承。h1 は 48px / ls1.92 --- */
.lfv__h1--l{font-size:48px;letter-spacing:1.92px}
.lfv__lead p{line-height:2}
.lfv__deco{position:absolute;left:calc(50% - 90px);top:80px;width:929px;height:432px;pointer-events:none}
.lfv__deco img{width:100%;height:100%;transform:scaleX(-1)}
.lfv .breadcrumb li{line-height:19px}
/* イラスト 787×525: Figma はルート直下 left672 top120（FV高512を超え、右端1459）。右端19pxは Figma 上でも1440外に出る灰色帯だったので画像側でトリム（768幅）。main を基準に絶対配置 */
main{position:relative}
.lfv-illust-clip{position:absolute;left:0;top:0;width:100%;height:645px;overflow:hidden;pointer-events:none;z-index:1}
.lfv__illust{position:absolute;pointer-events:none}
.lfv__illust img{width:100%;height:100%}
.lfv__illust--si{left:calc(50% - 48px);top:120px;width:768px;height:525px}

/* --- 共通: セクション小見出し（Title コンポーネント） --- */
.l-title{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:245px}
.l-title--w360{width:360px}
.l-title--w215{width:215px;min-width:0}
.l-title__en{font-family:var(--font-en);font-weight:600;font-size:var(--fs-h2-en2);line-height:1;color:var(--c-text-sub);font-feature-settings:normal;white-space:nowrap}
/* 行高は Figma が整数に丸めた 58px（36×1.6=57.6）で固定し累積ズレを防ぐ */
.l-title__jp{font-size:var(--fs-concept);font-weight:500;line-height:58px;letter-spacing:1.44px;white-space:nowrap}

/* --- 3つの強み: base3 pt80 px120 pb100 / inner gap64 --- */
.feat{position:relative;width:100%;padding:var(--sp-under-btn) var(--pad-side) var(--sp-under-btn2);background:var(--c-base3)}
.feat__inner{display:flex;flex-direction:column;align-items:flex-start;gap:64px;width:100%;max-width:1200px;margin-inline:auto}
.feat__list{display:flex;align-items:flex-start;gap:36px}
.feat__item{position:relative;display:flex;align-items:flex-start;flex:none}
.feat__card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:376px}   /* 本文が写真幅で折り返す（Figma と同じ） */
/* 写真 376×251 r5 cover。左上に base3 の切欠き 20×152（右下角 r3） */
.feat__photo{position:relative;width:376px;height:251px;border-radius:var(--r-m);overflow:hidden}
.feat__photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-m)}
.feat__notch{position:absolute;left:0;top:0;width:20px;height:152px;background:var(--c-base3);border-bottom-right-radius:3px}
.feat__text{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%}
.feat__title{width:100%;font-size:var(--fs-h4);font-weight:500;line-height:1.6;letter-spacing:.24px}
.feat__desc{width:100%;font-size:var(--fs-body-m);font-weight:400;line-height:1.6;letter-spacing:.16px}
/* 縦ラベル: w16、"Feature 01"（Lato SemiBold 16px）を 90°回転（h77）＋ 縦線 1×60 */
.feat__label{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:8px;width:16px}
.feat__label-rot{position:relative;display:block;width:16px;height:77px}
.feat__label-text{position:absolute;left:50%;top:50%;width:77px;height:16px;transform:translate(-50%,-50%) rotate(90deg);font-family:var(--font-en);font-weight:600;font-size:var(--fs-h2-en2);line-height:1;color:var(--c-text-sub);white-space:nowrap;font-feature-settings:normal}
.feat__label-line{display:block;width:1px;height:60px;background:var(--c-main)}

/* --- 対応業務: 白 py100 px120 / inner gap64 / Title の下は gap80 相当（親frame gap） --- */
.svc2{width:100%;padding:var(--sp-under-btn2) var(--pad-side);background:var(--c-base);overflow:hidden}
.svc2__inner{display:flex;flex-direction:column;align-items:flex-start;gap:64px;width:100%;max-width:1200px;margin-inline:auto}
.svc2__list{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:24px;width:100%}
/* カード 384: base3 r5 py4、内枠 378（左右3px）border #c2cde0 r3 p20 → 内容 336 */
.svc2__card{display:flex;flex-direction:column;align-items:center;width:384px;padding:4px 0;background:var(--c-base3);border-radius:var(--r-m);overflow:hidden}
.svc2__card--fixed{height:164px}
.svc2__box{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:378px;padding:20px;border:1px solid var(--c-border);border-radius:var(--r-s);overflow:hidden}
.svc2__card--fixed .svc2__box{flex:1 0 0;min-height:1px}
.svc2__top{display:flex;align-items:flex-start;gap:24px;width:336px}
.svc2__title{flex:1 0 0;min-width:1px;font-size:var(--fs-h5);font-weight:500;line-height:1.6;letter-spacing:.2px}
.svc2__icon{display:block;flex:none;width:40px;height:40px;overflow:hidden}
.svc2__icon img{width:40px;height:40px}
.svc2__desc{width:336px;padding-right:64px;font-size:var(--fs-body-s);font-weight:400;line-height:1.6;letter-spacing:.14px}

/* --- 対応業種: base3 pt100 px120 pb160 / row gap100 items-start --- */
.ind{width:100%;padding:var(--sp-under-btn2) var(--pad-side) var(--sp-section-gap);background:var(--c-base3)}
.ind__row{display:flex;align-items:flex-start;gap:100px;width:100%;max-width:1200px;margin-inline:auto}
.ind__list{display:flex;align-items:center;gap:15px}
.ind__card{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;width:210px;padding:12px 16px 16px;background:var(--c-base);border-radius:var(--r-m)}
.ind__card--narrow{width:210px}   /* 最終Figma（9/15 14669:32708）で4枚目も210に統一（旧カンプの132px折返しは解消） */
/* アイコン枠 100×100（p2）: 67.88角を45°回転した枠線 ＋ 46px アイコン中央 */
.ind__icon{position:relative;display:block;flex:none;width:100px;height:100px;overflow:hidden}
.ind__diamond{position:absolute;left:50%;top:50%;width:67.882px;height:67.882px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid var(--c-main2);border-radius:var(--r-s)}
.ind__img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ind__img--1{width:44.65px;height:44.65px}
.ind__img--2{width:44.65px;height:31.7px;margin-top:-2.3px}
.ind__img--3{width:46px;height:46px}
.ind__img--4{width:46px;height:44px}
.ind__label{width:100%;font-size:var(--fs-h5);font-weight:500;line-height:1.6;letter-spacing:.2px;text-align:center}

/* ===== SP（768px以下）: SPカンプ無し → TOP-SP（375）のルール（左右24px・SPトークン・1カラム）から導出 ===== */
@media (max-width:768px){
  /* FV: h1 30px。装飾は非表示、イラストはリードの下に静的配置（縦横比維持） */
  .lfv__h1--l{font-size:30px;letter-spacing:1.2px}
  .lfv__lead p{line-height:1.8}
  .lfv__deco{display:none}
  .lfv-illust-clip{position:static;height:auto;width:100%;padding:0 var(--sp-side-m) 40px;background:var(--c-base3)}
  .lfv__illust--si{position:static;width:100%;max-width:327px;height:auto;margin:0 auto}
  .lfv__illust--si img{height:auto}
  .lfv--si{padding-bottom:16px}
  .l-title{gap:6px;min-width:0}
  .l-title--w360,.l-title--w215{width:100%}
  .l-title__jp{letter-spacing:1.12px;white-space:normal}
  /* 強み: 1列。写真は 376:251 の比率で幅100% */
  .feat{padding:var(--sp-section-gap) var(--sp-side-m)}
  .feat__inner{gap:32px}
  .feat__list{flex-direction:column;gap:40px;width:100%}
  .feat__item{width:100%}
  .feat__card{width:100%}
  .feat__photo{width:100%;height:auto;aspect-ratio:376/251}
  .feat__title{white-space:normal}
  /* 対応業務: 1列、内枠は幅に追従 */
  .svc2{padding:var(--sp-section-gap) var(--sp-side-m)}
  .svc2__inner{gap:32px}
  .svc2__list{flex-direction:column;flex-wrap:nowrap;gap:16px}
  .svc2__card{width:100%}
  .svc2__card--fixed{height:auto}
  .svc2__card--fixed .svc2__box{flex:none}
  .svc2__box{width:calc(100% - 6px);padding:16px}
  .svc2__top{width:100%;gap:16px}
  .svc2__desc{width:100%;padding-right:0;line-height:1.7}
  /* 対応業種: 2列グリッド（小カード）、4枚目も同幅 */
  .ind{padding:var(--sp-section-gap) var(--sp-side-m)}
  .ind__row{flex-direction:column;gap:32px}
  .ind__list{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
  .ind__card,.ind__card--narrow{width:100%}
  .ind__label{font-size:16px}
}

/* ===== タブレット（769〜1200px）: 3カラムは維持しつつカード幅を可変に ===== */
@media (min-width:769px) and (max-width:1200px){
  .feat__list{gap:24px;width:100%}
  .feat__item{flex:1 1 0;min-width:0}
  .feat__card{width:100%}
  .feat__photo{width:100%;height:auto;aspect-ratio:376/251}
  .ind__list{flex-wrap:wrap;gap:12px}
  .ind__row{flex-wrap:wrap}
  /* FVの装飾とイラストは1200px未満だと本文に被るため縮める */
  .lfv__deco{display:none}
  .lfv-illust-clip{height:520px}
  .lfv__illust--si{left:auto;right:0;width:min(560px,58%);height:auto}
  .lfv__illust--si img{height:auto}
}