/*
Theme Name: Beyond Child
Theme URI:
Description: WordPressテーマTCD「Beyond」の子テーマ
Template: beyond_tcd094
Author:
Version: 1.15
*/

/* =====================
   カラー変数
   ===================== */
:root {
  --color-primary: #39c6f9;
  --color-primary-dark: #2dbdb6;
  --color-bg-light: #f8fafa;
  --color-bg-section: #e8f7f9;
  --color-white: #ffffff;
  --color-text: #555555;
  --color-text-light: #666666;
  --color-heading: #333333;
  --color-heading-dark: #2d3748;
}

/* =====================
   H2見出しの装飾（横棒）
   ===================== */
.styled_h2:before,
body.single-case h2.wp-block-heading:before {
  content: "" !important;
  display: inline-block !important;
  width: 1em !important;
  height: 4px !important;
  background: var(--color-primary-dark) !important;
  margin-right: 0.5em !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -2px !important;
}

/* =====================
   画像スタイル
   ===================== */
.wp-block-image {
  margin-bottom: 2.5em;
}

.wp-block-image img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* =====================
   タグスタイル（パンくず下）
   ===================== */
.case-tags {
  max-width: 860px;
  margin: 15px auto 15px;
  padding: 0;
}

.case-tag {
  display: inline-block;
  background: var(--color-primary-dark);
  color: var(--color-white);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  text-decoration: none;
  margin-right: 8px;
  transition: background 0.3s ease;
}

.case-tag:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* =====================
   ボタンスタイル
   ===================== */
.wp-block-button__link {
  background-color: var(--color-primary) !important;
  border-radius: 30px !important;
  padding: 12px 30px !important;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
  background-color: var(--color-primary-dark) !important;
  transform: translateY(-2px);
}

/* =====================
   見出しスタイル
   ===================== */
body.single-case h2.wp-block-heading,
body.single-case .styled_h2 {
  color: var(--color-heading);
  font-weight: bold;
  border-left-color: var(--color-primary) !important;
}

body.single-case h3.wp-block-heading,
body.single-case .styled_h3 {
  color: var(--color-heading);
  font-weight: bold;
}

body.single-case h4.wp-block-heading,
body.single-case .styled_h4 {
  color: var(--color-heading);
  font-weight: bold;
}

/* =====================
   本文スタイル
   ===================== */
body.single-case .post_content {
  color: var(--color-text);
  line-height: 1.9;
}

body.single-case .post_content p {
  color: var(--color-text-light);
  margin-bottom: 1.5em;
}

body.single-case .post_content a {
  color: var(--color-primary);
}

body.single-case .post_content a:hover {
  color: var(--color-primary-dark);
}

/* =====================
   記事エリア背景
   ===================== */
#single_case {
  background: var(--color-white);
}

/* =====================
   関連記事スタイル
   ===================== */
#related_case {
  background: var(--color-bg-section);
  padding: 40px 20px;
}

#related_case .headline {
  color: var(--color-heading);
}

/* =====================
   タグアーカイブページ
   ===================== */
.tag .page-title {
  color: var(--color-primary);
}

/* =====================
   フッターボックス非表示
   ===================== */
#footer_box_content {
  display: none !important;
}

/* =====================
   ヘッダーロゴサイズ制限
   ===================== */
#header .logo img,
.header_logo img,
#header_logo img {
  max-width: 200px !important;
  height: auto !important;
}

/* =====================
   記事内ボタンスタイル
   ===================== */
.wp-block-button__link.wp-element-button {
  background-color: #2dbdb6 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  padding: 16px 48px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.wp-block-button__link.wp-element-button:hover {
  background-color: #259a94 !important;
  opacity: 1 !important;
}

/* =====================
   ヘッドラインフォント修正
   ===================== */
.headline {
  font-family: 'Noto Sans JP', sans-serif !important;
}