@charset "UTF-8";

/* ==========================================================================
   デザイントークン v4.0
   Corporate / Trust（Fresh Mint Green）
   ブランドカラー: Fresh Green #52a96e × Light Mint bg
   参考: toms.or.jp の爽やかで信頼感ある緑系配色を反映
   ========================================================================== */

:root {

  /* ---------- プライマリカラー（Fresh Mint Green） ---------- */
  --color-primary:        #52a96e;   /* Fresh vibrant green (accent numbers, labels) */
  --color-primary-dark:   #2a6644;   /* Moderate dark green (buttons, CTAs) */
  --color-primary-darker: #1a4830;   /* Deep green (dark overlays) */
  --color-primary-mid:    #3d9058;   /* Medium fresh green */
  --color-primary-light:  #a3d4b4;   /* Soft light green */
  --color-primary-bg:     #eaefea;   /* Very subtle mint bg (nearly white) */

  /* ---------- アクセントカラー（Vivid Green） ---------- */
  --color-accent:         #52a96e;   /* Same as primary for simplicity */
  --color-accent-dark:    #2a6644;   /* Darker green */
  --color-accent-soft:    #e0f0e6;   /* Very light mint tint */

  /* ---------- エマージェンシーカラー（電話・緊急） ---------- */
  --color-emergency:      #B84A3E;
  --color-emergency-dark: #8F3529;

  /* ---------- ニュートラルカラー ---------- */
  --color-text-main:   #1c2c1e;   /* Near-black with subtle green */
  --color-text-body:   #2e3d2e;   /* Body text */
  --color-text-sub:    #5a6e5c;   /* Muted green-gray */
  --color-border:      #c8dece;   /* Soft green-gray border */
  --color-bg-white:    #FFFFFF;
  --color-bg-offwhite: #eaefea;   /* Very subtle mint off-white */
  --color-bg-dark:     #1a4830;   /* Deep green (dark sections) */

  /* ---------- タイポグラフィ ---------- */
  --font-sans:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
                -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;
  --font-serif: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
                "ＭＳ Ｐ明朝", "MS PMincho", "Noto Serif JP", serif;
  --font-en:    "Georgia", "Times New Roman", serif;

  /* ---------- フォントサイズ（Fluid） ---------- */
  --fs-hero:    clamp(28px, 5vw, 52px);
  --fs-h2:      clamp(24px, 4vw, 40px);
  --fs-h3:      clamp(18px, 2.5vw, 22px);
  --fs-lead:    clamp(15px, 1.8vw, 18px);
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-caption: 12px;
  --fs-label-en: 12px;

  /* ---------- 行間・文字間 ---------- */
  --lh-tight:  1.4;
  --lh-normal: 1.7;
  --lh-body:   1.9;
  --ls-normal: 0.02em;
  --ls-wide:   0.05em;
  --ls-wider:  0.1em;
  --ls-widest: 0.3em;

  /* ---------- ウェイト ---------- */
  --fw-normal:   400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- 余白（8pt グリッド） ---------- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  72px;
  --space-2xl: 112px;
  --space-3xl: 160px;
  --section-py: clamp(80px, 12vw, 160px);

  /* ---------- 角丸（最小限） ---------- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 9999px;

  /* ---------- シャドウ（控えめ） ---------- */
  --shadow-sm:  0 1px 2px rgba(26, 72, 48, 0.06);
  --shadow-md:  0 4px 12px rgba(26, 72, 48, 0.09);
  --shadow-lg:  0 8px 24px rgba(26, 72, 48, 0.13);
  --shadow-cta: 0 6px 16px rgba(184, 74, 62, 0.3);

  /* ---------- ボーダー ---------- */
  --border-thin:   1px solid var(--color-border);
  --border-medium: 2px solid var(--color-primary);
  --border-thick:  4px solid var(--color-accent);

  /* ---------- コンテナ幅 ---------- */
  --container-sm: 800px;
  --container-md: 1100px;
  --container-lg: 1250px;
  --container-xl: 1350px;

  /* ---------- z-index ---------- */
  --z-base:    0;
  --z-content: 1;
  --z-sticky:  100;
  --z-header:  500;
  --z-overlay: 800;
  --z-modal:   1000;
  --z-tooltip: 1100;
}

/* ==========================================================================
   セクション見出し共通コンポーネント
   構造: 英文ラベル（ゴールド）→ 明朝タイトル → 60px センターライン
   ========================================================================== */

.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-header__label {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-label-en);
  font-style: italic;
  letter-spacing: var(--ls-widest);
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-header__title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--color-text-main);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-sm);
}

.section-header__line {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-accent);
  margin: 0 auto;
}

/* ダーク背景上の見出し */
.section-header--light .section-header__label {
  color: var(--color-accent);
}
.section-header--light .section-header__title {
  color: var(--color-bg-white);
}

/* ==========================================================================
   共通ボタン
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 54px;
  padding: 16px 36px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.btn--primary {
  background: var(--color-primary-dark);
  color: var(--color-bg-white);
}
.btn--primary:hover {
  background: var(--color-primary-darker);
  transform: translateY(-1px);
  color: var(--color-bg-white);
}

.btn--emergency {
  background: var(--color-emergency);
  color: var(--color-bg-white);
  box-shadow: var(--shadow-cta);
}
.btn--emergency:hover {
  background: var(--color-emergency-dark);
  transform: translateY(-1px);
  color: var(--color-bg-white);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary-darker);
  border: 2px solid var(--color-primary-darker);
}
.btn--outline:hover {
  background: var(--color-primary-darker);
  color: var(--color-bg-white);
}

.btn--gold {
  background: var(--color-accent);
  color: var(--color-primary-darker);
}
.btn--gold:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  color: var(--color-primary-darker);
}

/* ==========================================================================
   アニメーション（デザイン定義書準拠）
   フェード距離: 20px 以内 / 時間: 1秒 / イージング: ease
   ========================================================================== */

.fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.active,
.fade-up.active,
.fade-in.is-visible,
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* モーション抑制 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* フォーカス表示（アクセシビリティ） */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   SWELLテーマ グローバルコンテナのフルワイドリセット（トップページ専用）
   ========================================================================== */

/* SWELLが付与する上部余白を除去 */
body:has(#top-page) .l-content,
body:has(#top-page) #content {
  padding-top: 0 !important;
}

/* サイドバーを非表示にしてメインカラムをフルワイドに */
body:has(#top-page) .l-sideBar,
body:has(#top-page) .l-sub,
body:has(#top-page) aside:not(.tp-main aside) {
  display: none !important;
}

/* SWELLのすべての親コンテナを完全フルワイドに（overflow も visible で解放） */
body:has(#top-page) #content,
body:has(#top-page) .l-content,
body:has(#top-page) .l-main,
body:has(#top-page) .l-main.is-twoColumn,
body:has(#top-page) .l-inner,
body:has(#top-page) .l-main__inner,
body:has(#top-page) article,
body:has(#top-page) .c-pageMain,
body:has(#top-page) .p-pageMain,
body:has(#top-page) .p-content__main,
body:has(#top-page) .l-content__main {
  width: 100% !important;
  max-width: none !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
  float: none !important;
  overflow-x: visible !important;
}