@charset "utf-8";
/*
  制作実績 詳細（single-case.php）専用CSS
  テクニカルSEO監査（2026-11-10）#11 #16 対応で追加した要素のみを扱う。クラスは wd_ プレフィックス。
  既存の basic.css / common.css / style.css は触らない（コーディング規約）。
*/

/* 実績名（h1） */
#works2 .wd_title { margin: 0 0 30px; font-size: 28px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; }
#works2 .wd_title .wd_title__sub { display: block; margin-top: 6px; font-size: 14px; letter-spacing: 0.2em; color: #666; }

/* 定型4項目（ご相談の背景／提案理由／実施内容／公開後の成果） */
#works2 .wd_story { margin: 0 0 80px; }
#works2 .wd_story__ttl { position: relative; margin: 0 0 16px; padding: 0 0 10px 18px; font-size: 20px; font-weight: 500; letter-spacing: 0.1em; border-bottom: 1px solid #d8d8d8; }
#works2 .wd_story__ttl::before { content: ''; position: absolute; left: 2px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fc4e4f; }
#works2 .wd_story__body { margin: 0 0 40px; font-size: 15px; line-height: 2; }
#works2 .wd_story__body p { margin: 0 0 1em; }

/* 同じ業種の実績 */
#works2 .wd_related { margin: 0 0 60px; clear: both; }
#works2 .wd_related__ttl { margin: 0 0 20px; font-size: 20px; font-weight: 500; letter-spacing: 0.1em; }
#works2 .wd_related__list { display: flex; flex-wrap: wrap; gap: 30px; list-style: none; margin: 0 0 30px; padding: 0; }
#works2 .wd_related__list li { width: calc((100% - 60px) / 3); }
#works2 .wd_related__list a { display: block; color: #191919; text-decoration: none; }
#works2 .wd_related__pic { display: block; aspect-ratio: 315 / 218; overflow: hidden; margin: 0 0 12px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15); }
#works2 .wd_related__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
#works2 .wd_related__name { display: block; font-weight: bold; font-size: 15px; line-height: 1.5; }
#works2 .wd_related__kind { display: inline-block; margin-top: 6px; padding: 5px; font-size: 11px; line-height: 1.2; background: #ededed; }

/* 対応サービス・料金・制作の流れへの本文リンク */
#works2 .wd_links { margin: 0; padding: 20px 24px; font-size: 15px; line-height: 2; background: #f6f6f6; }
#works2 .wd_links a { color: #fc4e4f; text-decoration: underline; }

@media screen and (max-width: 640px) {
  #works2 .wd_title { margin: 0 0 5vw; font-size: 5.3vw; }
  #works2 .wd_title .wd_title__sub { font-size: 3.2vw; }
  #works2 .wd_story { margin: 0 0 12vw; }
  #works2 .wd_story__ttl { font-size: 4.5vw; }
  #works2 .wd_story__body { font-size: 3.7vw; }
  #works2 .wd_related__list { gap: 4vw; }
  #works2 .wd_related__list li { width: calc((100% - 4vw) / 2); }
  #works2 .wd_related__name { font-size: 3.5vw; }
  #works2 .wd_links { padding: 4vw; font-size: 3.5vw; }
}