@charset "UTF-8";
/* ==========================================================================
   関西機工は なぜ、これだけ対応できるのか？ — Figma 10202:20202 / 1440x1998
   ========================================================================== */

.naze {
  padding: 100px;
  background: var(--c-white);
}

.naze__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: var(--w-wide);
  margin-inline: auto;
}

.naze__head {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* カンプ実測: 1行目「関西機工は」だけ40px（Figmaの文字単位上書き）。
   行ごとに高さが違うため block 化する（inlineだと親の strut 67.2px に揃ってしまう）。
   行高はカンプのテキストボックス126px（56+70）に合わせる */
.naze__title-sm,
.naze__title-lg { display: block; }
.naze__title-sm { font-size: 40px; line-height: 56px; letter-spacing: 1.6px; }
.naze__title-lg { font-size: 48px; line-height: 70px; }

.naze__lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.32px;
  color: var(--c-text);
  text-align: center;
}

/* --- 理由カード --- */
.naze__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.reason {
  display: flex;
  align-items: center;
  padding: 39px 99px;   /* border1px込みで内寸1040x392を確保 */
  border: 1px solid var(--c-border-mid);
  border-radius: 16px;
  background: var(--c-white);
}

/* カンプ実測: 図と本文の間隔はカードごとに異なる */
.reason--01 { gap: 100px; }
.reason--02 { gap: 20px; }
.reason--03 { gap: 45px; }

.reason__illust { flex-shrink: 0; width: 520px; }
.reason--01 .reason__illust { height: 392px; }
.reason--02 .reason__illust,
.reason--03 .reason__illust { height: 400px; }

.reason__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.reason--01 .reason__body { width: 420px; }
.reason--02 .reason__body { width: 500px; padding-left: 50px; }
.reason--03 .reason__body { width: 475px; }

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

.reason__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.32px;
  color: var(--c-main);
}
.reason__label::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--c-main);
}

.reason__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.6px;
  color: var(--c-text);
}

.reason__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.32px;
  color: var(--c-text);
}

/* --------------------------------------------------
   中間幅（769〜1365px）
   -------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1365px) {
  .naze { padding: 72px 40px; }
  .reason { padding: 32px 40px; gap: 32px; }
  .reason--01, .reason--02, .reason--03 { gap: 32px; }
  .reason__illust { width: 40%; height: auto; }
  .reason--01 .reason__illust,
  .reason--02 .reason__illust,
  .reason--03 .reason__illust { height: auto; }
  .reason--01 .reason__body,
  .reason--02 .reason__body,
  .reason--03 .reason__body { width: auto; flex: 1; padding-left: 0; }
  .reason__title { font-size: 30px; letter-spacing: 1.2px; }
}

/* --------------------------------------------------
   SP（〜768px）
   -------------------------------------------------- */
@media (max-width: 768px) {
  .naze { padding: 48px var(--sp-pad) 56px; }
  /* 「か？」だけが行末に落ちるのを防ぐ */
  .naze__title-sm { font-size: 26px; line-height: 1.5; letter-spacing: 1px; }
  .naze__title-lg { font-size: 34px; line-height: 1.45; }
  .naze__inner { gap: 32px; }
  .naze__head { gap: 16px; }
  .naze__lead { font-size: 14px; letter-spacing: 0.28px; text-align: left; }

  .naze__list { gap: 20px; }

  .reason {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 16px;
    border-radius: 12px;
  }
  .reason--01, .reason--02, .reason--03 { gap: 16px; }
  /* SPは常に「見出し → 図」の順にする */
  .reason__body { order: 1; }
  .reason__illust { order: 2; }

  .reason__illust,
  .reason--01 .reason__illust,
  .reason--02 .reason__illust,
  .reason--03 .reason__illust { width: 100%; height: auto; }

  .reason--01 .reason__body,
  .reason--02 .reason__body,
  .reason--03 .reason__body { width: 100%; padding-left: 0; }

  .reason__body { gap: 14px; }
  .reason__head { gap: 8px; }
  .reason__label { font-size: 13px; letter-spacing: 0.26px; }
  .reason__title { font-size: 22px; letter-spacing: 0.44px; }
  .reason__text { font-size: 14px; letter-spacing: 0.28px; text-wrap: pretty; }
  .reason__text br { display: none; }
}