/* =============================================================
   BizMow 導入事例 個別記事ページ — single-case.css
   single-column.css のデザイン言語を完全踏襲
   functions.php の is_singular('case') で読み込む
============================================================= */

/* ------------------------------------------------------------
   Lightning 親テーマ干渉リセット
------------------------------------------------------------ */
.single-case h1,
.single-case h2,
.single-case h3,
.single-case h4 {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.single-case h1::before, .single-case h1::after,
.single-case h2::before, .single-case h2::after,
.single-case h3::before, .single-case h3::after,
.single-case h4::before, .single-case h4::after {
  content: none !important;
}

/* ------------------------------------------------------------
   CSS 変数
------------------------------------------------------------ */
:root {
  --case-gold:      #FFB800;
  --case-gold-soft: #FFF9E0;
  --case-gold-dark: #7A5C00;
  --case-or:        #F97040;
  --case-tl:        #2FA3BD;
  --case-text:      #383838;
  --case-mute:      #888888;
  --case-border:    #E5E7EB;
  --case-surface:   #F7F6F3;
}

/* ============================================================
   ページ全体ラッパー
============================================================= */
.case-page-wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ============================================================
   メインカラム
============================================================= */
.case-main {
  min-width: 0;
}

/* ── 動画・メイン画像 ── */
.case-media {
  margin-bottom: 28px;
}
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--case-surface);
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 記事タイトル ── */
.case-article-title {
  font-size: clamp(22px, 3.5vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--case-text) !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ── 会社ヘッダー ── */
.case-header {
  padding: 20px 0;
  border-top: 1px solid var(--case-border);
  border-bottom: 1px solid var(--case-border);
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.case-header__company {
  display: flex;
  align-items: center;
  gap: 14px;
}
.case-header__logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.case-header__name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--case-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.case-header__industry {
  font-size: 13px;
  color: var(--case-mute);
  margin-bottom: 8px;
}
.case-header__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.case-header__tags li {
  font-size: 12px;
  font-weight: 600;
  color: var(--case-or);
  background: #fff3ee;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ============================================================
   ポイントボックス（元デザインを維持）
============================================================= */
.point-box {
  max-width: 900px;
  margin: 3rem auto;
  color: #333;
}
.point-header {
  border-bottom: 1px solid #e5d8c8;
  margin-bottom: 0;
  padding: 0;
  background: transparent !important;
}
.point-label {
  display: inline-block;
  background-color: #f1574d !important;
  color: #fff !important;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 4px;
  letter-spacing: normal;
  font-size: 14px;
}
.point-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #e5d8c8;
  border-top: none;
  gap: 0;
}
.point-title {
  color: #f39800;
  font-weight: bold;
  font-size: 14px;
}
.point-text {
  line-height: 1.6;
  font-size: 14px;
}

/* ============================================================
   会社概要（元デザインを維持）
============================================================= */
.company-wrap {
  max-width: 900px;
  margin: 0 auto;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
.company-ttl {
  display: flex !important;
  align-items: center !important;
  font-size: 20px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  gap: 0 !important;
}
/* アイコンは既存の .company-ttl-icon を使う */
.company-ttl::before {
  display: none !important; /* single-case.cssの::beforeを無効化 */
}
.company-ttl-icon {
  width: 16px;
  height: 16px;
  background-color: #f1574d;
  border-radius: 4px;
  margin-right: 10px;
  display: inline-block;
  flex-shrink: 0;
}
.company-table {
  border-top: 1px solid #e5d8c8;
  display: block;
}
.company-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid #e5d8c8;
  border-top: none;
  padding: 0;
  gap: 0;
}
.company-row dt {
  padding: 20px;
  font-weight: bold;
  font-size: 14px;
  color: var(--case-text);
}
.company-row dd {
  padding: 20px;
  margin: 0;
  line-height: 1.6;
  font-size: 14px;
  color: var(--case-text);
}
.company-row a {
  color: #f1574d;
  text-decoration: underline;
}

/* ============================================================
   本文（.case-content）— single-column.css と完全同一スタイル
============================================================= */
.case-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--case-text);
  margin-bottom: 48px;
}
.case-content p { margin-bottom: 1.6em; }

/* h2：左ボーダー＋グレー背景 */
.case-content h2 {
  font-size: clamp(18px, 2.4vw, 22px) !important;
  font-weight: 700 !important;
  padding: 12px 16px 12px 20px !important;
  border-left: 4px solid var(--case-or) !important;
  background: var(--case-surface) !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 2.4em 0 1.2em !important;
  line-height: 1.45 !important;
  color: var(--case-text) !important;
}

/* h3：黄色下線 */
.case-content h3 {
  font-size: clamp(16px, 2vw, 18px) !important;
  font-weight: 700 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--case-gold) !important;
  margin: 2em 0 1em !important;
  line-height: 1.5 !important;
  color: var(--case-text) !important;
  background: transparent !important;
}

/* h4 */
.case-content h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 1.8em 0 .8em !important;
  color: var(--case-text) !important;
}

/* リスト */
.case-content ul,
.case-content ol {
  padding-left: 1.6em;
  margin-bottom: 1.4em;
}
.case-content ul { list-style: disc !important; }
.case-content ol { list-style: decimal !important; }
.case-content li {
  list-style: inherit !important;
  margin-bottom: .5em;
}

/* 引用 */
.case-content blockquote {
  border-left: 4px solid var(--case-border) !important;
  background: var(--case-surface) !important;
  padding: 12px 20px !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 1.6em 0 !important;
  color: var(--case-mute);
  font-style: normal !important;
}

/* 画像 */
.case-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.2em 0;
}

/* リンク */
.case-content a {
  color: var(--case-or);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.case-content a:hover { opacity: .75; }
.case-content strong { font-weight: 700; }

/* テーブル */
.case-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.6em;
  font-size: 14px;
}
.case-content th,
.case-content td {
  border: 1px solid var(--case-border);
  padding: 10px 14px;
}
.case-content th {
  background: var(--case-surface);
  font-weight: 700;
}

/* ── 戻るボタン ── */
.back-to-list {
  text-align: center;
  margin-top: 32px;
}
.btn-back {
  display: inline-block;
  padding: 12px 32px;
  border: 2px solid var(--case-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--case-text);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.btn-back:hover {
  border-color: var(--case-or);
  color: var(--case-or);
}

/* ============================================================
   サイドバー
============================================================= */
.case-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  will-change: transform;
}

.case-widget {
  background: transparent;
}
.case-widget h3,
.case-widget h4 {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--case-text) !important;
  background: transparent !important;
  padding: 0 0 8px !important;
  border-bottom: 2px solid var(--case-border) !important;
  margin: 0 0 8px !important;
}
.case-widget ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.case-widget li {
  border-bottom: 1px solid var(--case-border);
  list-style: none !important;
}
.case-widget li:last-child { border-bottom: none; }
.case-widget li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--case-text);
  text-decoration: none;
  background: #fff;
  transition: background .15s, color .15s;
}
.case-widget li a:hover {
  background: var(--case-gold-soft) !important;
  color: var(--case-gold-dark) !important;
}

/* サイドCTAボタン */
.btn-cta {
  display: block;
  background: var(--case-or);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  transition: opacity .2s, transform .18s;
}
.btn-cta:hover { opacity: .88; transform: translateY(-2px); }

/* ============================================================
   レスポンシブ
============================================================= */
@media screen and (max-width: 1024px) {
  .case-page-wrapper {
    grid-template-columns: 1fr 250px;
    gap: 36px;
  }
}

@media screen and (max-width: 768px) {
  .case-page-wrapper {
    grid-template-columns: 1fr;
    padding: 24px 16px 56px;
    gap: 0;
  }
  .case-side {
    position: static;
    margin-top: 48px;
  }
  .case-article-title {
    font-size: 22px !important;
  }
  .point-row {
    grid-template-columns: 60px 1fr;
  }
  .company-row {
    grid-template-columns: 1fr;
  }
  .company-row dt,
  .company-row dd {
    padding: 10px 16px;
  }
  .company-row dt { padding-bottom: 0; }
  .video-wrapper {
    border-radius: 0;
  }
}