/* =========================================================
   事例紹介ページ専用（一覧 /cases/ ＋ 個別事例詳細ページ）
   見本(事例紹介サンプル/assets/case-common.css)をベースに、
   ヘッダー・フッター・パンくずはサイト共通のものを使うため除外
========================================================= */
:root{
  --case-ink:#24313a; --case-muted:#66747d; --case-accent:#44bcc4; --case-accent-dark:#17808a; /* ラベル類のティール：技術・採用・会社紹介・homeと同じ色に統一（旧 #1899a4） */
  --case-line:#e8edef; --case-soft:#f6f9fa; --case-max:var(--main-max); /* common.css のサイト共通幅 */
  --case-col:calc(872px + var(--main-pad) * 2); /* 詳細の本文カラム（本文の読み幅872px＋左右余白） */
}

/* サイト共通CSS(unique.css)の section {clear:both;overflow:auto;padding:3rem 1rem} を無効化 */
.case-hero,.case-hero-image,.case-summary,.case-section,.case-cta,.case-index-hero{
  clear:none;overflow:visible;padding-top:0;padding-bottom:0;
}

/* 親テーマ body の letter-spacing:.1em で文字間が開きすぎるため、他ページ(design-base)に近い値に補正 */
body{letter-spacing:.04em}

/* 共通フッターのメール問い合わせ帯（footer.php）文字サイズ・下余白の補正 */
.footer-action-container p.fs-6{font-size:17.5px !important;line-height:1.9;margin-bottom:24px}

/* ---------- 詳細ページ：ヒーロー ---------- */
/* タイトルはWordPress標準の見出し帯(.wrapper-h1)を使うので、ここでは表示しない */
.case-hero{max-width:var(--case-max);margin:0 auto;padding:48px var(--main-pad) 26px;text-align:center}
.case-label{display:inline-block;color:var(--case-accent-dark);font-size:15px;font-weight:700;letter-spacing:.14em;margin-bottom:13px}
.case-hero-lead{max-width:860px;margin:0 auto;color:#2f3b43;font-size:18.5px;line-height:2;word-break:auto-phrase;text-wrap:balance}
.case-privacy-note{font-size:14px;color:#6f7c82;margin-top:20px}

.case-hero-image{max-width:var(--case-max);margin:18px auto 54px;padding:0 var(--main-pad)}
.case-hero-image figure{margin:0;aspect-ratio:16/8.6;overflow:hidden;border-radius:7px;box-shadow:0 12px 34px rgba(27,52,60,.10)}
.case-hero-image img{width:100%;height:100%;object-fit:cover}

/* ---------- 詳細ページ：3つの要点 ---------- */
.case-summary{max-width:var(--case-max);margin:0 auto 76px;padding:0 var(--main-pad);display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:22px}
.case-summary-card{border-top:3px solid var(--case-accent);background:#fff;padding:24px 22px 22px;box-shadow:0 8px 30px rgba(23,52,59,.075);border-radius:0 0 6px 6px;height:100%;box-sizing:border-box}
.case-summary-card h2{font-size:21.5px;margin:0 0 16px;line-height:1.45;color:var(--case-ink)}
.case-summary-card ul{margin:0;padding-left:1.25em;color:#42525b;font-size:17px;line-height:1.9}
.case-summary-card li+li{margin-top:10px}

/* ---------- 詳細ページ：課題/解決/効果 ---------- */
.case-section{border-top:1px solid var(--case-line)}
/* 左端を上のメイン写真・カード（--case-max）にそろえる。本文の読み幅は p の max-width:760px で保つ */
.case-section-inner{max-width:var(--case-max);margin:0 auto;padding:68px var(--main-pad)}
.case-section-kicker{display:flex;align-items:center;gap:14px;font-size:15px;letter-spacing:.14em;color:var(--case-accent-dark);font-weight:700;margin-bottom:8px}
.case-section-kicker::before{content:"";display:block;width:24px;height:1px;background:currentColor}
.case-section h2{font-size:32px;line-height:1.5;margin:0 0 24px;position:relative;padding-bottom:16px;color:var(--case-ink)}
.case-section h2::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;background:var(--case-accent)}
.case-section p{margin:0;max-width:760px;color:#2f3b43;font-size:17.5px;line-height:2}
.case-section p strong{display:inline-block;background:none;font-size:19.5px;font-weight:700;color:var(--case-ink);line-height:1.6}
.case-section.soft{background:var(--case-soft)}

/* ---------- 詳細ページ：業務フロー ---------- */
.case-flow{max-width:calc(760px + var(--main-pad) * 2);margin:0 auto 0 max(0px, calc((100% - var(--case-max)) / 2));padding:0 var(--main-pad) 74px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:16px}
.case-flow-box{display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--case-line);border-radius:7px;padding:18px 12px;font-size:16.5px;text-align:center;font-weight:700;color:var(--case-ink)}
.case-flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--case-accent-dark);font-size:25.5px}

/* ---------- 詳細ページ：CTA ---------- */
.case-cta{background:#203038;color:#fff}
.case-cta-inner{max-width:var(--case-col);margin:auto;padding:66px var(--main-pad);text-align:center}
.case-cta h2{font-size:30px;line-height:1.55;margin:0 0 10px}
.case-cta p{color:#dce5e8;margin:0 0 28px}
.case-btn{display:inline-flex;align-items:center;justify-content:center;min-width:230px;padding:14px 22px;background:var(--case-accent);color:#fff !important;border-radius:4px;font-weight:700;transition:.2s;text-decoration:none !important}
.case-btn:hover{background:var(--case-accent-dark);transform:translateY(-1px)}

/* ---------- 一覧ページ：/cases/ ---------- */
.case-index-hero{max-width:var(--case-max);margin:auto;padding:48px var(--main-pad);text-align:center}
.case-index-hero h1{font-size:45px;color:var(--case-ink)}
.case-index-hero p{color:#4d5c65;font-size:17.5px}
.case-index-grid{max-width:var(--case-max);margin:auto;padding:12px var(--main-pad) 80px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none}
/* 画像が読み込めないとimgのwidth属性で列が押し広げられるため、カードの最小幅を0にして列幅を均等に保つ */
.case-index-grid > li{min-width:0;display:flex} /* カードをマスいっぱいに広げ、同じ行のカードの高さをそろえる */
.case-card{border:1px solid var(--case-line);border-radius:8px;overflow:hidden;background:#fff;transition:.2s;box-shadow:0 5px 18px rgba(22,50,57,.04);display:block;width:100%;text-decoration:none !important}
a.case-card,a.case-card:link,a.case-card:visited{color:var(--case-ink)}
.case-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(22,50,57,.10)}
.case-card .case-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--case-soft)}
.case-card .case-thumb img{width:100%;height:100%;object-fit:cover}
.case-card .case-body{padding:22px}
.case-card .case-cat{color:var(--case-accent-dark);font-size:14px;font-weight:700;letter-spacing:.08em}
.case-card h2{font-size:19.5px;line-height:1.55;margin:7px 0 8px;color:var(--case-ink)}
.case-card p{font-size:16px;color:#4a5860;margin:0;line-height:1.8}
.case-badge{font-variant-numeric:tabular-nums;color:#7d8a90;font-size:13.5px}

@media(max-width:860px){
  .case-summary{grid-template-columns:1fr}
  .case-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-flow{grid-template-columns:1fr}
  .case-flow-arrow{transform:rotate(90deg)}
  .case-hero-image figure{aspect-ratio:4/3}
  .case-section-inner{padding-top:52px;padding-bottom:52px}
}
@media(max-width:560px){
  .case-hero{padding-top:34px}
  .case-hero h1,.case-hero-lead{font-size:16.5px}
  .case-index-grid{grid-template-columns:1fr}
  .case-index-hero h1{font-size:34px}
  .case-section h2{font-size:25.5px}
}

/* 一覧ページ：タイトル帯のh1の開始位置をカード一覧(.case-index-grid)にそろえる（個別事例ページには適用しない） */
body.page:not(.home) main .wrapper-h1 h1{max-width:var(--case-max);padding-left:var(--main-pad);padding-right:var(--main-pad)}

/* 個別事例ページ：タイトル帯のh1の開始位置をメイン写真(.case-hero-image)の左端にそろえる（長いタイトルが多いため文字サイズは変えない） */
body.single-case main .wrapper-h1 h1{max-width:var(--case-max);padding-left:var(--main-pad);padding-right:var(--main-pad)}

/* 一覧ページ：ヒーロー（ラベル→見出し→説明文を縦に積む。左端はタイトル帯・カード一覧にそろえる） */
.case-index-hero{display:block;padding:64px var(--main-pad) 48px;text-align:left}
.case-index-hero .case-index-label{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-size:14.5px;font-weight:700;letter-spacing:.18em;line-height:20px;color:var(--case-accent-dark)}
.case-index-label::before{content:"";display:block;width:24px;height:1px;background:currentColor}
.case-index-hero h2{margin:0;font-size:clamp(28px,3.4vw,38.5px) !important;font-weight:700;line-height:1.45;letter-spacing:.04em;color:#1c2b33}
.case-index-hero > p{margin:22px 0 0;font-size:16.5px;line-height:1.9;color:#4d5c65}
@media(max-width:760px){
  .case-index-hero{padding:40px var(--main-pad) 32px}
  .case-index-hero > p{margin-top:16px}
  .case-index-hero .case-index-label{font-size:13.5px;letter-spacing:.16em;margin-bottom:12px}
}

/* 詳細ページ：導入部分（ラベル＋分類タグ→導入文→注意書き）を左揃えに。左端はメイン写真・タイトル帯にそろえる */
.case-hero{padding:72px var(--main-pad) 0;text-align:left}
.case-hero .case-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font-size:14.5px;letter-spacing:0;line-height:1.6}
.case-hero .case-label-head{display:inline-flex;align-items:center;gap:14px;margin-right:4px;font-size:14.5px;font-weight:700;letter-spacing:.2em;color:var(--case-accent-dark)}
.case-hero .case-label-head::before{content:"";display:block;width:24px;height:1px;background:currentColor}
.case-hero .case-label-tag{padding:4px 12px;border-radius:999px;background:#e2f0f1;color:#1f5f66;font-size:13.5px;font-weight:500;letter-spacing:.04em}
.case-hero .case-hero-lead{max-width:none;margin:20px 0 0;font-size:20.5px;line-height:1.9;letter-spacing:.03em;font-weight:500;color:#1b2a33;text-wrap:wrap;word-break:auto-phrase} /* 幅は下の写真と同じ（.case-hero の幅）まで使い、折り返しは文節単位 */
.case-hero .case-privacy-note{margin:14px 0 0;font-size:13.5px;line-height:1.8;color:#5e6b73}
.case-hero-image{margin-top:56px}
@media(max-width:560px){
  .case-hero{padding-top:40px}
  .case-hero .case-hero-lead{font-size:17.5px}
  .case-hero-image{margin-top:32px}
}


/* ブロックごとの背景色：全ページ共通のルール（導入部は色なし→薄い青緑と白の交互）にそろえる
   導入（ヒーロー・概要カード）＝そのまま、課題＝薄い青緑、解決（soft）＝白、効果＝薄い青緑。色で区切るので、ブロック間の線は不要 */
.case-section{background:linear-gradient(120deg,#eef7f8 0%,#eef3fa 100%);border-top:none}
.case-section.soft{background:#fff}
/* 効果ブロックの下の流れ図（.case-flow）はセクションの外にあるため、直前のブロックと同じ青緑を画面幅いっぱいに敷いてひと続きに見せる
   （グラデーションは幅で伸びて継ぎ目が出るため、ここは右端寄りの単色にする） */
.case-section:not(.soft) + .case-flow{background:#eef5f9;box-shadow:0 0 0 100vmax #eef5f9;clip-path:inset(0 -100vmax)}

/* =========================================================
   一覧ページ：改善案のデザイン（大きな見出し＋薄い青緑の帯にソリューション絞り込みとカード一覧）
========================================================= */
.case-index-hero{padding:clamp(56px,7vw,104px) var(--main-pad) clamp(56px,6vw,80px)}
.case-index-hero h2{font-size:clamp(32px,4.4vw,52px) !important;line-height:1.35;letter-spacing:.02em}
.case-index-hero > p{margin-top:28px}
.case-index-list{clear:none;overflow:visible;padding:clamp(48px,6vw,72px) 0 clamp(72px,9vw,112px);background:linear-gradient(120deg,#eef7f8 0%,#eef3fa 100%)}
.case-index-list .case-index-grid{padding-top:0;padding-bottom:0;gap:20px}
/* 絞り込みボタン：白いピル、選択中は濃いティール */
.case-filter{max-width:var(--case-max);margin:0 auto;padding:0 var(--main-pad) 32px;display:flex;flex-wrap:wrap;gap:10px}
.case-filter-btn{padding:8px 20px;border:1px solid #d5e0e5;border-radius:999px;background:#fff;font:inherit;font-size:13.5px;font-weight:700;letter-spacing:.04em;color:#1c2b33;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.case-filter-btn:hover{border-color:#17808a}
.case-filter-btn.is-active{background:#17808a;border-color:#17808a;color:#fff}
.case-index-grid > li[hidden]{display:none}
/* カード：枠線なしの白、番号と分類を1行に */
.case-card{border:none;box-shadow:0 4px 16px rgba(22,50,57,.05)}
.case-card .case-body{padding:22px 22px 24px}
.case-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.case-card .case-badge{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:#17808a}
.case-card .case-cat{font-size:12.5px;letter-spacing:.04em}
.case-card h2{margin:10px 0 10px;font-size:19px}
.case-card p{font-size:14.5px;line-height:1.85}
/* 成果（カスタムフィールド case_result があるときだけ表示） */
.case-result{margin-top:18px;padding:10px 14px;border-radius:4px;background:#eef6f8;font-size:13.5px;line-height:1.7;color:#1c2b33}
.case-result span{margin-right:.8em;font-weight:700;color:#17808a}

/* =========================================================
   詳細ページ：改善案デザイン（技術・ソリューション・事例一覧）の見た目にそろえる
========================================================= */
/* 導入：一覧ページと同じ余白感に */
.case-hero{padding-top:clamp(56px,7vw,104px)}
.case-hero-image figure{border-radius:8px;box-shadow:none}
/* 3つの要点：上の太線＋影 → 枠線の白いカード（箇条書きはソリューションの Feature と同じティールの短い線） */
.case-summary{gap:16px;margin-bottom:clamp(72px,9vw,112px)}
.case-summary-card{padding:26px 26px 28px;border:1px solid #e3eaee;border-radius:8px;box-shadow:none}
.case-summary-card h2{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid #e3eaee;font-size:18px;color:#1c2b33}
.case-summary-card ul{padding-left:0;list-style:none;font-size:15px;line-height:1.75;color:#1c2b33}
.case-summary-card li{position:relative;padding-left:22px}
.case-summary-card li::before{content:"";position:absolute;left:0;top:.85em;width:10px;height:2px;background:#17808a}
/* 課題/解決/効果：ラベル＋大きめの見出し（下線のアクセントはやめ、他ページのセクション見出しと同じ形に） */
.case-section-inner{padding-top:clamp(72px,9vw,112px);padding-bottom:clamp(72px,9vw,112px)}
.case-section-kicker{gap:14px;margin-bottom:0;font-size:14.5px;letter-spacing:.18em;line-height:20px;color:#17808a}
.case-section h2{margin:22px 0 28px;padding-bottom:0;font-size:clamp(24px,3vw,34px);line-height:1.5;color:#1c2b33}
.case-section h2::after{display:none}
.case-section p{font-size:16.5px;line-height:1.95;color:var(--sub)}
.case-section p strong{font-size:19px;color:#1c2b33}
/* 流れ図：枠線なしの白いカード */
.case-flow{padding-bottom:clamp(72px,9vw,112px)}
.case-flow-box{border:none;border-radius:8px;font-size:15.5px;color:#1c2b33}
.case-flow-arrow{font-size:22px;color:#17808a}
@media(max-width:860px){.case-summary{gap:12px}}