@charset "UTF-8";
/*---------------------------------------------------------------
 * お客様の声（CPT: case_study）専用スタイル
 * 一覧 archive-case_study.php / 詳細 single-case_study.php
 *
 * ⚠ このファイルは assets/scss/ に対応する SCSS を持たない。
 *    直接この .css を編集すること。
 * ⚠ base.css で html{font-size:62.5%} なので 1rem = 10px。
 * ⚠ base.css は li{list-style:none} を全体に当てている。
 *    箇条書きを出す箇所は list-style を明示的に戻す。
 *
 * 【記事本文まわりの寸法について】
 * 納品済みの静的事例ページ（/case/casefactory/draft/ に保管）と
 * 同じ見た目になるよう、原本の CSS をそのまま移植している。
 * 原本は html{font-size:17px} を基準に rem で書かれているので、
 * 「原本の値 × 17px ÷ 10px」でこちらの rem に換算してある。
 *   例) 原本 .callout .label{font-size:1.2rem} = 20.4px → ここでは 2.04rem
 * ⚠ 原本の SP ブレークポイントは 600px。テーマ標準は 767px だが、
 *    記事本文だけは原本に合わせて 600px を使う（見た目を一致させるため）。
 * ⚠ 記事内の青は原本の #2d84cd。サイト共通の #2d84cd とは別。
 *    ここを揃えたくなったら .cs-* の #2d84cd をまとめて置換する。
 *-------------------------------------------------------------*/

/* 見出し帯。/use-case と同じ背景画像を流用している（専用画像を用意したらここだけ差し替える） */
.h2-wrap--case-study-bg {
  background: url(../img/case/h2-bg-case.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

/*--------------------------------------------------------------
# 一覧 /case-study/
#   ⚠ 一覧はサイトの 1 ページなので配色はテーマ共通の #2d84cd。
#      記事本文（下の「詳細」セクション）だけ原本の #006bbc を使う。
--------------------------------------------------------------*/
.case-study-list-section {
  margin-bottom: 10rem;
}

@media (max-width: 767px) {
  .case-study-list-section {
    margin-bottom: 5rem;
  }
}

.case-study-list > li {
  margin-bottom: 5rem;
}

.case-study-card {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  color: #333;
  transition: 0.2s;
}

.case-study-card:hover {
  opacity: 1;
  box-shadow: 0 6px 20px rgba(45, 132, 205, 0.18);
  transform: translateY(-3px);
}

.case-study-card--img {
  margin: 0;
  background: #f6f6f6;
}

.case-study-card--img img {
  display: block;
  width: 100%;
  height: auto;
}

.case-study-card--body {
  padding: 2.4rem 2.4rem 3rem;
}

.case-study-card--client {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2d84cd;
  margin-bottom: 1rem;
}

.case-study-card--tit {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 1.4rem;
}

@media (max-width: 767px) {
  .case-study-card--tit {
    font-size: 1.7rem;
  }
}

.case-study-card--lead {
  font-size: 1.5rem;
  line-height: 1.9;
  margin-bottom: 2rem;
}

.case-study-card--more {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d84cd;
}

.case-study-empty {
  font-size: 1.6rem;
  text-align: center;
  padding: 6rem 0;
}

/* ページネーション */
.case-study-pagination {
  margin: 2rem 0 0;
  text-align: center;
}

.case-study-pagination .nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.case-study-pagination .page-numbers {
  display: block;
  min-width: 4rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid #2d84cd;
  border-radius: 4px;
  font-size: 1.5rem;
  color: #2d84cd;
}

.case-study-pagination .page-numbers.current {
  background: #2d84cd;
  color: #fff;
}

/*--------------------------------------------------------------
# 詳細 /case-study/{slug}/
#   ここから下は原本（静的事例ページ）の寸法をそのまま移植している。
--------------------------------------------------------------*/
/*
 * ⚠ style.css の `body.single{background:#f0f5fa}` はブログ記事のための指定だが、
 *    WordPress は CPT の詳細ページにも body へ `single` を付けるため、事例ページまで
 *    薄い青灰色になっていた。原本は白地なので、この投稿タイプだけ白に戻す。
 *    style.css 側を `body.single-post` に直せばこの打ち消しは不要になる。
 */
body.single-case_study {
  background: #fff;
}

/* 原本 .container{max-width:900px; padding:1.41rem 0.94rem; font-size:1rem} + body{line-height:1.8} */
.cs-article {
  width: 100%;
  /* 原本は content-box で内容幅 900px。こちらは border-box なので padding 分を足す */
  max-width: 93.2rem;
  margin: 0 auto;
  padding: 2.4rem 1.6rem 8rem;
  font-size: 1.7rem;
  line-height: 1.8;
  color: #333;
}

@media (max-width: 600px) {
  .cs-article {
    padding: 1.68rem 4vw 4rem;
    font-size: 1.6rem;
  }
}

/* 原本 .publisher-group{font-size:0.85rem; color:#808080} */
.cs-meta {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  color: #808080;
  font-size: 1.45rem;
  margin-bottom: 2.4rem;
}

@media (max-width: 600px) {
  .cs-meta {
    font-size: 1.41rem;
  }
}

/*
 * 記事タイトル。
 * ⚠ 原本はアイキャッチ画像そのものに見出しが描かれており、画像の外に
 *    文字の見出しは出していない。ここで h1 を見せると同じ文言が
 *    画像と文字で二重に出るため、読み上げ・検索エンジン向けに残したまま
 *    視覚的にだけ隠す。見出しの入っていないアイキャッチを使う事例を
 *    作るときは、この隠しを外すこと。
 */
.cs-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 原本 .hero-img{width:100%; margin-bottom:1.41rem} */
.cs-hero {
  margin: 0 0 2.4rem;
}

.cs-hero--img {
  display: block;
  width: 100%;
  height: auto;
}

/* 原本の導入文は素の <p>。下マージンは持たず、次の .summary-grid 側で空ける */
.cs-intro {
  margin: 0;
}

/*--------------------------------------------------------------
# 導入前の課題／導入理由（解決策）／導入効果
#   ⚠ 原本の .summary-grid は grid-template-columns を持たない ＝ 1 カラム。
#      3 カラムに並べると原本と見た目が変わるので横に並べないこと。
--------------------------------------------------------------*/
.cs-summary {
  display: grid;
  gap: 3.4rem;
  margin: 3.2rem 0;
}

.cs-callout {
  display: flex;
  flex-direction: column;
  border-radius: 0.8rem;
  background: #f6f6f6;
}

.cs-callout--label {
  color: #fff;
  background: #006bbc;
  font-size: 2.04rem;
  padding: 1.19rem;
  text-align: center;
  border-radius: 0.8rem 0.8rem 0 0;
}

.cs-callout--body {
  font-size: 1.7rem;
  line-height: 2;
  /* 原本は div.content(padding-left 42.5px) の中の ul(padding-left 19.89px)。合算値を持たせる */
  padding: 1.7rem 1.7rem 3.4rem 6.24rem;
  margin: 0;
}

.cs-callout--body li {
  list-style: disc;
}

@media (max-width: 600px) {
  .cs-callout--label {
    font-size: 1.6rem;
  }
  .cs-callout--body {
    font-size: 1.6rem;
    padding: 1.6rem 1.6rem 1.6rem 4.27rem;
  }
}

/*--------------------------------------------------------------
# 取材先プロフィール（原本 .interviewee-wrapper）
--------------------------------------------------------------*/
.cs-interviewee {
  border: 1px solid #e0e0e0;
  border-radius: 0.8rem;
  padding: 2.55rem;
  margin: 3.2rem 0;
  font-size: 1.7rem;
}

.cs-interviewee--head {
  display: flex;
  gap: 1.99rem;
  align-items: center;
}

.cs-interviewee--logo {
  /* ⚠ 原本はページごとに width を直接指定していた（横長ロゴ 119.85px / 正方形ロゴ 85px）。
     ここは 1 つの CSS で両方に合わせるため、幅と高さの上限で抑える。 */
  width: auto;
  height: auto;
  max-width: 11.99rem;
  max-height: 8.5rem;
  border-radius: 0.4rem;
  flex-shrink: 0;
}

.cs-interviewee--name {
  font-size: 1.99rem;
  font-weight: bold;
  margin: 0 0 0.4rem;
}

.cs-interviewee--profile {
  font-size: 1.7rem;
  line-height: 1.8;
  margin: 0.4rem 0 1.19rem;
  text-align: left;
}

@media (max-width: 600px) {
  .cs-interviewee {
    font-size: 1.6rem;
  }
  .cs-interviewee--head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cs-interviewee--logo {
    margin-bottom: 1.19rem;
  }
  .cs-interviewee--profile {
    font-size: 1.6rem;
  }
}

/* 会社概要（原本 .company-info） */
.cs-company {
  padding: 1.6rem 0;
  overflow-x: auto;
}

.cs-company table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.7rem;
}

.cs-company th {
  width: 11.99rem;
  text-align: left;
  padding: 0.6rem 1.7rem;
  background: #f6f6f6;
}

.cs-company td {
  padding: 0.6rem 0.8rem;
  word-break: break-word;
}

.cs-company a {
  color: #333;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .cs-company {
    padding-left: 0;
    padding-right: 0;
  }
  .cs-company th {
    width: 6.4rem;
    min-width: 5.6rem;
    padding-left: 0.96rem;
    padding-right: 0.48rem;
    font-size: 1.47rem;
  }
  .cs-company td {
    font-size: 1.52rem;
    padding-left: 0.96rem;
    padding-right: 0.48rem;
    word-break: break-all;
  }
}

/*--------------------------------------------------------------
# 写真とキャプション（原本 .customer-photo / .caption）
--------------------------------------------------------------*/
.cs-photo {
  margin: 0;
  text-align: center;
}

.cs-photo--img,
.cs-body figure img {
  display: block;
  max-width: 54rem;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0 auto 1.28rem;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.cs-caption,
.cs-body figcaption {
  display: block;
  margin-top: 0.43rem;
  font-size: 1.49rem;
  color: #888;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .cs-photo--img,
  .cs-body figure img {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# 本文（原本 .section 相当。ブロックエディタで書く部分）
#   原本は各見出しを <section class="section"> で包み、
#     .section  { margin: 2.35rem 0 4rem; line-height: 1.75 }
#     .section h2 { margin: 0 0 2rem }
#     .section p  { margin-bottom: 2.5rem }
#   としている。こちらは section で包まないので、見出しの上マージンで
#   同じ間隔（セクション間 68px）を作る。
--------------------------------------------------------------*/
.cs-body {
  font-size: 1.7rem;
  line-height: 1.75;
}

@media (max-width: 600px) {
  .cs-body {
    font-size: 1.6rem;
  }
}

.cs-body h2 {
  font-size: 2.55rem;
  font-weight: bold;
  line-height: 1.4;
  color: #006bbc;
  border-left: 0.35rem solid #006bbc;
  padding-left: 1.19rem;
  margin: 6.8rem 0 3.4rem;
}

/* 本文の先頭だけは原本の .section の上マージン（2.35rem = 40px）に合わせる */
.cs-body > h2:first-child {
  margin-top: 4rem;
}

@media (max-width: 600px) {
  .cs-body h2 {
    font-size: 1.92rem;
  }
}

.cs-body h3 {
  font-size: 2rem;
  font-weight: bold;
  margin: 3.5rem 0 1.6rem;
}

.cs-body p {
  line-height: 1.75;
  margin-bottom: 4.25rem;
}

/* エディタ由来の空 <p> は余白が二重になるので潰す */
.cs-body p:empty {
  display: none;
}

.cs-body ul,
.cs-body ol {
  margin: 0 0 4.25rem 2rem;
}

.cs-body ul li {
  list-style: disc;
}

.cs-body ol li {
  list-style: decimal;
}

.cs-body img {
  height: auto;
}

.cs-body figure {
  margin: 0 0 4rem;
  text-align: center;
}

.cs-body a {
  color: #006bbc;
  text-decoration: underline;
}

/* 本文中のマーカー（原本 .mark はベタ塗り。下線グラデにしない） */
.cs-body .mark {
  background: #fff9b1;
  font-weight: bold;
  border-radius: 0.15em;
  padding: 0.08em 0.18em;
}

/*--------------------------------------------------------------
# 記事下（原本 footer 相当 ＋ WP 側で足した一覧への導線）
--------------------------------------------------------------*/
.cs-credit {
  margin-top: 4.79rem;
  text-align: right;
  font-size: 1.19rem;
  color: #333;
}

/* 原本のクレジットはリンク。base.css が a の下線を消しているので戻す（原本は黒＋下線） */
.cs-credit a {
  color: #000;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .cs-credit {
    margin-top: 4.512rem;
    font-size: 1.12rem;
  }
}

.cs-back {
  text-align: center;
  margin-top: 4rem;
}

.cs-back a {
  display: inline-block;
  padding: 1.6rem 4rem;
  border: 2px solid #006bbc;
  border-radius: 50px;
  font-size: 1.6rem;
  font-weight: 600;
  color: #006bbc;
}