@charset "UTF-8";
/* ==========================================================================
   関西機工の3つの強み — Figma 10202:20788 / 1440x616
   ========================================================================== */

.tsuyomi {
  padding: 80px 200px 100px;
  background: var(--c-main);
}

.tsuyomi__inner {
  display: flex;
  flex-direction: column;
  gap: 120px;
  max-width: var(--w-slim);
  margin-inline: auto;
}

/* 見出しは1行内で文字サイズが3種（カンプの文字単位上書き）。
   サイズ混在だとベースライン合わせで行ボックスが膨らむため、
   行を明示的な高さ78px（カンプ実測）のブロックに固定する */
.tsuyomi__title { font-size: 48px; }
.tsuyomi__title-line {
  display: block;
  height: 78px;
  line-height: 78px;
}
.tsuyomi__title-sm { font-size: 40px; letter-spacing: 1.6px; }
.tsuyomi__title-lg { font-size: 56px; letter-spacing: 2.24px; }

/* --- カード --- */
.tsuyomi__list {
  display: flex;
  gap: 40px;
}

.strength {
  position: relative;
  width: 320px;
  padding: 64px 12px 24px;
  border-radius: 8px;
  background: var(--c-white);
  text-align: center;
}

/* イラストはカード上端から64px上にはみ出す（カンプ実測） */
.strength__illust {
  position: absolute;
  top: -64px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
}

.strength__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strength__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.96px;
  color: var(--c-main);
}

.strength__text {
  min-height: 78px;      /* カンプはテキスト枠が3行分固定 */
  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) {
  .tsuyomi { padding: 72px 40px 80px; }
  .tsuyomi__inner { gap: 96px; }
  .tsuyomi__list { gap: 24px; }
  .strength { width: auto; flex: 1; }
}

/* --------------------------------------------------
   SP（〜768px）
   -------------------------------------------------- */
@media (max-width: 768px) {
  .tsuyomi { padding: 48px var(--sp-pad) 56px; }
  .tsuyomi__inner { gap: 76px; }

  .tsuyomi__title { font-size: 26px; }
  .tsuyomi__title-line { height: auto; line-height: 42px; }
  .tsuyomi__title-sm { font-size: 22px; letter-spacing: 0.44px; }
  .tsuyomi__title-lg { font-size: 30px; letter-spacing: 0.6px; }

  .tsuyomi__list { flex-direction: column; gap: 68px; }
  .strength { width: 100%; padding: 52px 16px 20px; }
  .strength__illust { top: -48px; width: 96px; height: 96px; }
  .strength__title { font-size: 19px; letter-spacing: 0.38px; }
  .strength__text { min-height: 0; font-size: 14px; letter-spacing: 0.28px; }
}