/* ===== Service（Figma 14536:55294）1440×1200 / 白 / pl120 pr30 pb160 / gap80 ===== */
/* overflow は hidden ではなく clip にする。hidden だと .service 自体がスクロールコンテナ扱いになり、
   左カラムの position:sticky が効かなくなる（clip は見た目のクリップだけで sticky を殺さない） */
.service{position:relative;display:flex;align-items:flex-start;gap:80px;width:100%;padding:0 var(--pad-side-wide) var(--sp-section-gap) var(--pad-side);background:var(--c-base);overflow:clip}
/* 左カラム（sticky・あおさん指示 A-2）: 441px / py160 / gap56
   固定位置 = 固定ヘッダー（--header-h・未定義なら80px）から 80px 空けた位置に見出しが止まる。
   カラム自体は上パディング160pxを持つので、その分を引いた値を top にする（1440では top:0 と同値） */
.service__side{position:sticky;top:calc(var(--header-h,80px) + 80px - 160px);display:flex;flex-direction:column;align-items:flex-start;gap:56px;flex:none;width:441px;padding:160px 0}
.service__intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-lead)}
/* セクション見出し共通（.sec-title 一式）は base.css へ移動 */
.service__lead{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-under-h3)}
.service__h3{font-size:var(--fs-h3);font-weight:500;line-height:1.6;letter-spacing:.28px;width:100%}
.service__text{font-size:var(--fs-body-m);font-weight:400;line-height:1.6;letter-spacing:.16px;white-space:nowrap}
/* 右カラム: flex1 / pt160 / カード×3 */
.service__list{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;min-width:1px;padding-top:160px}
.service-card{min-height:293px;display:flex;align-items:flex-start;gap:40px;width:100%;padding:45px 20px;border-top:1px solid var(--c-border2)}
.service-card:last-child{min-height:294px;border-bottom:1px solid var(--c-border2)}
.service-card__img{position:relative;flex:none;width:165px;height:200px;border-radius:var(--r-m);overflow:hidden}
.service-card__img img{position:absolute;max-width:none}
/* 各カードのクロップ値（Figma design_context の%指定を再現） */
.service-card__img--01 .is-under{inset:0;width:100%;height:100%;object-fit:contain}
.service-card__img--01 .is-main{left:-78.49%;top:-40.41%;width:255.25%;height:140.36%}
.service-card__img--02 .is-main{inset:0;width:100%;height:100%;object-fit:cover}
.service-card__img--03 .is-main{inset:0;width:100%;height:100%;object-fit:cover}
.service-card__img--03 .is-over{inset:0;width:100%;height:100%;object-fit:cover}
.service-card__body{display:flex;flex-direction:column;align-items:flex-end;gap:16px;flex:1 0 0;min-width:1px}
.service-card__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-under-h4);width:100%}
.service-card__title{display:flex;align-items:center;gap:12px;width:100%}
.service-card__num{display:flex;align-items:center;justify-content:center;padding:8px 0;font-family:var(--font-en);font-weight:600;font-size:24px;line-height:1;color:var(--c-text-sub);white-space:nowrap;font-feature-settings:normal}
.service-card__h4{font-size:var(--fs-h4);font-weight:500;line-height:1.6;letter-spacing:.24px;white-space:nowrap}
.service-card__text{width:100%;font-size:var(--fs-body-m);font-weight:400;line-height:1.6;letter-spacing:.16px}
/* サブボタン（Figma button propValue=サブ） */
.btn--sub{padding:6px 8px 6px 20px;background:var(--c-base3);border-color:var(--c-border2);color:var(--c-text-sub)}
.btn--sub .btn__label{font-size:15px;letter-spacing:.15px}
.btn--sub .btn__icon{background:var(--c-main)}
/* あおさん指示 B-2「Frame 125 内の写真のホバーアニメーションを削除」
   拡大（scale 1.05）は animation.css（共通ファイル）側にあるため、ここで打ち消す。
   animation.css の該当行（.service-card:hover .service-card__img img）を削除できたらこの打ち消しも不要になる */
@media (hover:hover){
  .service .service-card:hover .service-card__img img{transform:none}
}

/* ===== 区切り帯（Figma 14511:47861）1440×180 ===== */
.divider{width:100%;height:180px}
.divider img{width:100%;height:100%}

/* ===== SP（768px以下）: Service（Figma 14600:69392）375×2102 / px24 py80 / gap64 / カード縦積み ===== */
@media (max-width:768px){
  .service{flex-direction:column;align-items:stretch;gap:64px;padding:var(--sp-section-gap) var(--sp-side-m)}
  /* 左カラムは通常フローに戻す（sticky解除）: gap40 */
  .service__side{position:static;width:100%;padding:0;gap:var(--sp-under-btn)}
  /* セクション見出し（SP: gap4 / ラベル gap6 16px / アイコン13×9 / 英字64px） */
  .service .sec-title{gap:4px}
  .service .sec-title__label{gap:6px;letter-spacing:.16px}
  .service .sec-title__label img{width:13px;height:9px}
  .service .sec-title__en--service{letter-spacing:0}
  .service__h3{letter-spacing:.24px}
  .service__br-pc{display:none}
  .service__text{letter-spacing:.15px}
  /* SPボタン: 199×56 / gap24 / pl20 pr12 py10 / ラベル中央 */
  .service__side .btn{width:199px;max-width:299px;gap:24px;padding:10px 12px 10px 20px}
  .service__side .btn__label{flex:1 0 0;min-width:0}
  /* カード: w327 / gap48 / border-t / px12 py16 / gap16 / 画像 303×200 */
  .service__list{width:100%;padding-top:0;gap:48px}
  .service-card{flex-direction:column;align-items:flex-start;gap:16px;min-height:0;padding:16px 12px}
  .service-card:last-child{min-height:0;border-bottom:0}
  /* 画像枠は高さ固定（200px）をやめ、Figma SP（303×200）の比率で可変にする（あおさん指示 B-2）。
     高さ固定だと 375 以外の幅で枠が横長になり、01 の%クロップが横に潰れていた（600px幅で比率2.61 / 自然比1.50） */
  .service-card__img{width:100%;height:auto;aspect-ratio:303/200}
  /* 01のクロップ（SP: w172.7% left-38.35% top-59.44%）。高さは auto で自然比を保つ
     （枠の比率が固定なので、%指定の切り抜き範囲はどの幅でも 375 と同じ範囲になる） */
  .service-card__img--01 .is-main{left:-38.35%;top:-59.44%;width:172.7%;height:auto}
  .service-card__img--02 .is-main,.service-card__img--03 .is-main,.service-card__img--03 .is-over{object-fit:cover}
  .service-card__body{width:100%;flex:none}
  .service-card__head{gap:8px}
  .service-card__title{gap:8px}
  .service-card__num{font-size:20px}
  .service-card__h4{letter-spacing:.2px}
  .service-card__text{letter-spacing:.15px}
}
.divider picture{display:contents}
/* SP: 区切り帯 375×60（img/sp/divider_sp.svg を picture で出し分け） */
@media (max-width:768px){
  .divider{height:60px}
}