@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ========================================
   カラー変数（デザイン仕様書準拠）
   ======================================== */
:root {
  /* 深海グリーン — 構造・権威・信頼 */
  --ds-deep: #1a3a4a;
  --ds-base: #2a5a6a;
  --ds-pale: #e4edf0;
  --ds-bg: #f0f5f6;

  /* セージグリーン — 行動・親しみ・安心 */
  --ds-sage: #5c9a80;
  --ds-sage-light: #7aad96;
  --ds-sage-pale: #e9f3ee;
  --ds-sage-bg: #f3f9f6;

  /* ゴールド — 装飾 */
  --ds-gold: #b8973f;
  --ds-gold-pale: #f5f0e2;

  /* テキスト */
  --ds-text: #1e2a2e;
  --ds-text-sub: #4a5558;
  --ds-text-light: #7e8a8d;
  --ds-text-caption: #95a0a2;

  /* ベース・ボーダー */
  --ds-page-bg: #f3f2ee;
  --ds-border: #d8d5ce;
  --ds-border-light: #e8e5de;
}


/* ========================================
   見出しデザイン（デザイン仕様書準拠）

   ■ 対応するSWELLカスタマイザー設定：
     H2 → 帯
     H3 → 2色の下線（メイン・グレー）
     H4 → 左に縦線

   ■ SWELLデフォルトに戻したい場合：
     各見出しのブロック（START〜END）を
     コメントアウトしてください

   ======================================== */


/* ----------------------------------------
   H2：帯 → シンプル下線 + SECTIONラベルに変更
   仕様書「見出し1」：19px / Bold 700 / line-height 1.6
   上部に「SECTION 01」ゴールド文字を自動番号で表示
   SWELLの帯スタイルをリセットし、下部に細い線を配置
   ----------------------------------------
   ★ START — H2カスタマイズ（SWELL「帯」選択時用） */

/* H2のセクション番号カウンター */
.post_content {
  counter-reset: section-counter;
}

.post_content h2 {
  counter-increment: section-counter;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ds-text);
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--ds-deep) !important;
  padding: 0 0 10px 0 !important;
  margin-bottom: 1.5em;
  position: relative;
}

/* SECTION ラベル（H2の上にゴールド文字で表示） */
.post_content h2::before {
  content: "SECTION " counter(section-counter, decimal-leading-zero) !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--ds-gold) !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.post_content h2::after {
  content: none !important;
}

/* ★ END — H2カスタマイズ */


/* ----------------------------------------
   H3：2色下線 → ゴールドグラデーション下線に変更
   仕様書「見出し2」：17px / Bold 700
   下線：左28% #b8973f（ゴールド） → 右72% #f5f0e2（ゴールド淡）
   ----------------------------------------
   ★ START — H3カスタマイズ（SWELL「2色の下線」選択時用） */

.post_content h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ds-text);
  background: none !important;
  border: none !important;
  border-bottom: 3px solid var(--ds-gold-pale) !important;
  padding: 0 0 10px 0 !important;
  margin: 36px 0 16px;
  position: relative;
}

.post_content h3::before {
  content: none !important;
}

.post_content h3::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(
    to right,
    var(--ds-gold) 0%,
    var(--ds-gold) 28%,
    var(--ds-gold-pale) 28%,
    var(--ds-gold-pale) 100%
  ) !important;
  border-radius: 0;
}

/* ★ END — H3カスタマイズ */


/* ----------------------------------------
   H4：左に縦線 → 深海グリーンの左ボーダー
   仕様書「見出し3」：15px / Bold 700
   左ボーダー：4px solid #1a3a4a
   ----------------------------------------
   ★ START — H4カスタマイズ（SWELL「左に縦線」選択時用） */

.post_content h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text);
  background: none !important;
  border: none !important;
  border-left: 4px solid var(--ds-deep) !important;
  padding: 6px 0 6px 16px !important;
  margin: 28px 0 12px;
}

.post_content h4::before,
.post_content h4::after {
  content: none !important;
}

/* ★ END — H4カスタマイズ */


/* ----------------------------------------
   H5：点線の下線
   仕様書「見出し4」：14px / Bold 700 / テキスト色：#4a5558
   ----------------------------------------
   ★ START — H5カスタマイズ */

.post_content h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text-sub);
  background: none !important;
  border: none !important;
  border-bottom: 1px dashed var(--ds-border) !important;
  padding: 0 0 6px 0 !important;
  margin: 24px 0 10px;
}

.post_content h5::before,
.post_content h5::after {
  content: none !important;
}

/* ★ END — H5カスタマイズ */


/* ========================================
   ベースフォントサイズ（PC）
   SWELLカスタマイザー設定（18px）をCSSで上書き
   追加CSSの同設定と統一：20px
   ======================================== */
@media (min-width: 769px) {
  body {
    font-size: 20px;
  }
}


/* ========================================
   SWELLデフォルトCSS（バックアップ）
   戻したい場合：上のカスタムCSSをコメントアウトし、
   以下のコメントを外してください
   ========================================

.post_content h2 {
  --- SWELLデフォルト（帯）がそのまま適用されます ---
}

.post_content h3 {
  --- SWELLデフォルト（2色下線）がそのまま適用されます ---
}

.post_content h4 {
  --- SWELLデフォルト（左に縦線）がそのまま適用されます ---
}

*/