@charset "UTF-8";
/* =====================================================================
   update-customers.css  2026/11/04 三輪
   クライアント事例（CUSTOMERS）一覧・詳細を読みやすく（ブログと同じゴシック基調）
   読み込み：archive-customers.php / single-customers.php
   ===================================================================== */

/* ---------- 一覧：タイトル・お客様名 ---------- */
body.customers .case-cmpt__item .case-cmpt__item__title a{
  font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #3a3a3a;
}
body.customers .case-cmpt__item .case-cmpt__item__meta,
body.customers .case-cmpt__item .case-cmpt__item__meta span{
  font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", Meiryo, sans-serif;
  font-feature-settings: normal;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #555;
}

/* ---------- 詳細：記事タイトル ---------- */
body.customers .case-cmpt__detail__title{
  font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", Meiryo, sans-serif;
  font-feature-settings: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #3a3a3a;
}

/* ---------- 詳細：① 質問（Q.〜） ---------- */
body.customers .customers__detail__quest + .customers__detail__quest{
  margin-top: 96px;
}
body.customers .customers__detail__quest > .titleB{
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #3a3a3a;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 16px;
  margin-bottom: 32px;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ---------- 詳細：② お客様の回答のキャッチコピー（緑の見出し） ---------- */
body.customers .customers__detail__content h2{
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-weight: 700;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #3f8a76 !important;   /* 記事内のインライン指定（薄い緑）より少し濃く・読みやすく */
  margin: 48px 0 20px;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ---------- 詳細：③ お客様の回答の言葉（斜体→通常） ---------- */
body.customers .customers__detail__content p{
  font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", Meiryo, sans-serif;
  font-feature-settings: normal;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0;
  color: #3a3a3a;
  margin: 0 0 1.6em;
  word-break: normal;
  overflow-wrap: anywhere;
}
body.customers .customers__detail__content p em{
  font-style: normal;       /* 日本語の斜体は読みにくいため解除 */
  color: inherit;
}
body.customers .customers__detail__content p span{
  color: inherit;
}
body.customers .customers__detail__content p b,
body.customers .customers__detail__content p strong{
  font-weight: 700;
  color: #3a3a3a;
}
/* 画像と、その下のキャプション */
body.customers .customers__detail__content p:has(> img){
  margin-bottom: 12px;
}
body.customers .customers__detail__content p:has(> img) + p{
  font-size: 13px;
  line-height: 1.7;
  color: #6b7176;
  text-align: center;
  margin-bottom: 40px;
}

/* ---------- 詳細：④ アライブのポイント（緑の枠） ---------- */
body.customers .customers__detail__content > div{
  border-radius: 8px;
  padding: 28px 32px !important;
  margin: 40px 0;
}
body.customers .customers__detail__content > div > p{
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 1em;
}
body.customers .customers__detail__content > div > p:last-child{
  margin-bottom: 0;
}
body.customers .customers__detail__content > div > p:first-child{   /* 「アライブのポイント」ラベル */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #3f8a76;
  margin-bottom: 12px;
}

/* ---------- 詳細：そのほかの見出し ---------- */
body.customers .titleD,
body.customers .postListTitle{
  font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Noto Sans JP", Meiryo, sans-serif;
  font-feature-settings: normal;
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px){
  body.customers .case-cmpt__detail__title{ font-size: 22px; }
  body.customers .customers__detail__quest + .customers__detail__quest{ margin-top: 64px; }
  body.customers .customers__detail__quest > .titleB{ font-size: 19px; }
  body.customers .customers__detail__content h2{ font-size: 18px; margin-top: 36px; }
  body.customers .customers__detail__content p{ font-size: 16px; }
  body.customers .customers__detail__content > div{ padding: 20px !important; }
  body.customers .customers__detail__content > div > p{ font-size: 15px; }
}

/* 2026/11/04 追加：記事によっては斜体が <em> ではなく <i> で入っているため、<i> とその中身も通常の文字に */
body.customers .customers__detail__content p i,
body.customers .customers__detail__content p em,
body.customers .customers__detail__content p i *,
body.customers .customers__detail__content p em *{
  font-style: normal !important;
}
body.customers .customers__detail__content p i{
  color: inherit;
}

/* 2026/11/05 三輪：本文の箇条書き(ul/ol)をブログと同じ見え方に（「・」と番号を表示） */
body.customers .customers__detail__content > ul,
body.customers .customers__detail__content > ol{
  margin: 1.2em 0 1.8em 1.4em;
  padding-left: 0.4em;
}
body.customers .customers__detail__content > ul{ list-style: disc outside; }
body.customers .customers__detail__content > ol{ list-style: decimal outside; }
body.customers .customers__detail__content > ul > li,
body.customers .customers__detail__content > ol > li{
  display: list-item;
  list-style: inherit;
  font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", Meiryo, sans-serif;
  font-feature-settings: normal;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0;
  color: #3a3a3a;
  margin-bottom: 0.4em;
}
@media screen and (max-width: 767px){
  body.customers .customers__detail__content > ul > li,
  body.customers .customers__detail__content > ol > li{ font-size: 16px; }
}

/* 2026/11/05 三輪：一覧のタイトルを少し細く（700→500、Works一覧と同じ太さ） */
body.customers .case-cmpt__item .case-cmpt__item__title a{ font-weight:500; }

/* 2026/11/05 三輪：詳細ページのタイトル・見出し・サムネイルのタイトルを少し細く（700→500、ブログと同じ） */
body.customers .case-cmpt__detail__title,
body.customers .customers__detail__quest > .titleB,
body.customers .customers__detail__content h2{ font-weight:500; }

/* 2026/11/05 三輪：「アライブのポイント」ラベルもほかの見出しと同じ太さに */
body.customers .customers__detail__content > div > p:first-child{ font-weight:500; }

/* 2026/11/05 三輪：本文の文字色を少し柔らかい黒（#3a3a3a）に統一（太字も同じ色） */
body.customers .customers__detail__content p,
body.customers .customers__detail__content > ul > li,
body.customers .customers__detail__content > ol > li,
body.customers .customers__detail__content p b,
body.customers .customers__detail__content p strong,
body.customers .customers__detail__content li b,
body.customers .customers__detail__content li strong,
body.customers .customers__detail__content p span:not([style*="color"]),
body.customers .customers__detail__content td,
body.customers .customers__detail__content th,
body.customers .customers__detail__content td b,
body.customers .customers__detail__content td strong,
body.customers .customers__detail__content th b,
body.customers .customers__detail__content th strong{ color:#3a3a3a; }
body.customers .customers__detail__content p em:not([style*="color"]),
body.customers .customers__detail__content p em span:not([style*="color"]){ color:#3a3a3a; }

/* 2026/11/05 三輪：本文の太字を日本語600・英数字は一段細い太さに（ブログと同じ） */
@font-face{
  font-family: "AliveBoldLatin";
  src: local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"), local("SegoeUI-Semibold"), local("Segoe UI Semibold");
  font-weight: 600;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027;
}
body.customers .customers__detail__content b,
body.customers .customers__detail__content strong,
body.customers .customers__detail__content p b,
body.customers .customers__detail__content p strong,
body.customers .customers__detail__content li b,
body.customers .customers__detail__content li strong{
  font-weight: 600;
  font-family: "AliveBoldLatin", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

/* 2026/11/05 三輪：記事タイトル・h2・h3を日本語600・英数字は一段細い太さに */
body.customers .case-cmpt__detail__title,
body.customers .customers__detail__quest > .titleB,
body.customers .customers__detail__content h2,
body.customers .customers__detail__content h3{
  font-weight: 600;
  font-family: "AliveBoldLatin", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

/* 2026/11/05 三輪：詳細のページタイトル・一覧の記事タイトルを日本語500・英数字400に */
@font-face{
  font-family: "AliveRegLatin";
  src: local("HelveticaNeue"), local("Helvetica Neue"), local("SegoeUI"), local("Segoe UI");
  font-weight: 500;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027;
}
body.customers .case-cmpt__detail__title,
body.customers .case-cmpt__item .case-cmpt__item__title a{
  font-weight: 500;
  font-family: "AliveRegLatin", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

/* 2026/11/05 三輪：詳細の本文h2を日本語500・英数字400に */
body.customers .customers__detail__quest > .titleB,
body.customers .customers__detail__content h2{
  font-weight: 500;
  font-family: "AliveRegLatin", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

/* 2026/11/05 三輪：お客様の声詳細の緑の見出し（回答のキャッチ）を24pxに */
body.customers .customers__detail__content h2{ font-size: 24px; }
@media screen and (max-width: 767px){
  body.customers .customers__detail__content h2{ font-size: 20px; }
}

/* 2026/11/05 三輪：お客様の声詳細の本文を16pxに（PC・スマホ共通）
   画像の説明文（13px）・アライブのポイントのラベルは今のまま */
body.customers .customers__detail__content p,
body.customers .customers__detail__content > ul > li,
body.customers .customers__detail__content > ol > li{ font-size: 16px; }

/* =====================================================================
   2026/11/06 三輪：お客様の声修正依頼（AUN「アライブweb クライアント事例 261105」）
   ===================================================================== */
/* ① メイン画像まわりの余白 */
@media screen and (min-width: 768px){
  body.customers .case-cmpt__detail__thumb{
    margin-bottom: 40px;
    padding: 40px 40px 0;
  }
}
/* ② 回答のキャッチ（緑の見出し）の色 */
body.customers .customers__detail__content h2{ color: #40ab91 !important; }
/* ③ 「アライブのポイント」の枠：角丸なし・左の線なし・背景 #f5f5f5（記事内の直接指定より優先） */
body.customers .customers__detail__content > div{
  border-radius: 0 !important;
  border-left: none !important;
  background-color: #f5f5f5 !important;
}
/* ④ 「アライブのポイント」ラベルの色 */
body.customers .customers__detail__content > div > p:first-child,
body.customers .customers__detail__content > div > p:first-child *{ color: #40ab91 !important; }