/* ===== PROCESS steps（sec-<id>配下限定・4ステップ1列・図のみ・崩れない） ===== */
.sec-process-steps-ogushi-0723 *,
.sec-process-steps-ogushi-0723 *::before,
.sec-process-steps-ogushi-0723 *::after{ box-sizing:border-box; }
.sec-process-steps-ogushi-0723 :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li){ margin:0; padding:0; }

.sec-process-steps-ogushi-0723{
  position:relative; overflow:hidden; background:transparent; color:#000;
  padding:40px 0 20px;
  font-family:'游ゴシック体',YuGothic,'游ゴシック Medium','Yu Gothic Medium','游ゴシック','Yu Gothic','メイリオ',sans-serif;
  letter-spacing:.05em; font-feature-settings:'palt'; -webkit-font-smoothing:antialiased;
}

/* 1列（4つ横並び）・平行四辺形の右はみ出し分を右padで確保して見切れ防止 */
.sec-process-steps-ogushi-0723 .inner{
  position:relative; z-index:1; display:flex; flex-wrap:nowrap; gap:16px;
  max-width:100%; margin:0 auto; padding:0 88px 0 24px; align-items:flex-start; justify-content:center;
}
.sec-process-steps-ogushi-0723 .inner .step{ flex:1 1 0; min-width:0; max-width:283px; margin:0; }

/* 平行四辺形（比率で内部要素を配置＝どの幅でも崩れない・図の下にテキスト無し） */
.sec-process-steps-ogushi-0723 .inner .step .figure{
  position:relative; width:100%; height:0; padding-bottom:53%; margin-bottom:0;
}
.sec-process-steps-ogushi-0723 .inner .step .figure::before{
  position:absolute; inset:0; content:'';
  transform:skewX(-27deg); transform-origin:bottom left; background:#d2d5d9;
}
.sec-process-steps-ogushi-0723 .inner .step .figure .no{
  font-family:DINNextLTPro-Medium,'DIN Next',Arial,sans-serif; font-weight:700;
  position:absolute; top:5%; left:28.3%; color:#fff; font-size:clamp(20px,2.5vw,36px); line-height:1;
}
.sec-process-steps-ogushi-0723 .inner .step .figure h3{
  position:absolute; top:50%; left:0; width:100%; padding-left:27.2%;
  transform:translateY(-50%); text-align:center; letter-spacing:.05em; color:#000; line-height:1.5;
  font-size:clamp(13px,1.55vw,20px);
}

/* step4 は黒（元 step6 と同じ・完了ステップ強調） */
.sec-process-steps-ogushi-0723 .inner .step.step4 .figure::before{ background:#000; }
.sec-process-steps-ogushi-0723 .inner .step.step4 .figure h3{ color:#fff; }

/* タブレット/スマホ: 2列に折り返し（1列だと狭すぎて崩れるため）＋右はみ出し分の余白 */
@media screen and (max-width:900px){
  .sec-process-steps-ogushi-0723{ padding:28px 0 12px; }
  .sec-process-steps-ogushi-0723 .inner{ flex-wrap:wrap; gap:0; padding:0 48px 0 6px; justify-content:flex-start; }
  .sec-process-steps-ogushi-0723 .inner .step{ flex:0 0 auto; width:44%; max-width:none; margin:0 6% 26px 0; }
  .sec-process-steps-ogushi-0723 .inner .step .figure .no{ font-size:clamp(16px,4.4vw,24px); }
  .sec-process-steps-ogushi-0723 .inner .step .figure h3{ font-size:clamp(12px,2.6vw,16px); }
}