/* =========================================================
   制作実績の一部（WORKS）
   index.html「低価格で続けられる理由」の直後、「お客様の声」の直前で使用。
   掲載は各お客様の許可を得たサイトのみ。追加するときは
   利用規約 第10条の適用（2026-08-14以降の申込みか）を確認すること。
   ========================================================= */

/* 背景は画面いっぱいに広げる。
   .main-content が max-width:1200px・background:#fff なので、
   ここで 100vw にしないと本文の幅だけ色が付き、左右に白が残って段差に見える
   （前後の .reason-section と同じ書き方にそろえている）。
   色は白。直後の .voice-section（白）と合わせて「実績＋お客様の声」で
   ひとつの塊に見せ、直前の「料金比較＋理由」(#f3f8f6) と交互にしている。
   ここを薄緑にすると上の塊と地続きに見えるので変えないこと（2026-09-23）。 */
.works-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 80px 20px;
  background: #ffffff;
}

.works-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.works-lead {
  text-align: center;
  font-size: 1.05rem;
  color: #555;
  line-height: 1.8;
  margin: 0 0 40px;
}

/* ---------- カードグリッド ---------- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.works-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;                    /* 画像の角をカードに合わせる */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.works-card:hover,
.works-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

/* 画面の幅が変わっても比率を保つ（撮影サイズ 1200×700 と同じ 12:7） */
.works-thumb {
  display: block;
  width: 100%;
  height: auto;                        /* ← これが無いと img の height 属性(583)がそのまま効き、縦長に切り抜かれる */
  aspect-ratio: 12 / 7;
  object-fit: cover;
  object-position: top center;
  background: #e8efeb;                 /* 読み込み中の下地 */
}

.works-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.works-cat {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0e5e45;
  background: #e3f2ea;
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 0 10px;
}

.works-name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin: 0 0 8px;
}

.works-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
  margin: 0 0 14px;
}

/* 語の途中で折り返させたくない部分に付ける（「ユーモ／ア系」のような割れを防ぐ） */
.works-nowrap {
  white-space: nowrap;
}

.works-link {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1d9e75;
}

.works-link::after {
  content: "\2197";                    /* 別タブで開くことを示す矢印 */
  margin-left: 4px;
}

.works-note {
  text-align: center;
  font-size: 0.85rem;
  color: #777;
  line-height: 1.8;
  margin: 32px 0 0;
}

/* ---------- タブレット ---------- */
@media (max-width: 900px) {
  .works-section {
    padding: 64px 18px;
  }

  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 640px) {
  .works-section {
    padding: 48px 16px;                /* reason-section のスマホ時と同じ */
  }

  .works-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .works-lead {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .works-name {
    font-size: 1.1rem;
  }
}