/* ******************************************
   variables.css
   色、フォント、余白などの変数
****************************************** */
:root {

  /* === 基本テキスト色 === */
/*  --color-text:          #231815;  基本文・明朝系見出し用 */
  --color-text:          #595757;
  --color-text-subtle :  #666666;

  /* === 共通色 === */
  --color-main:          #002f6c; /* ネイビー（ナビ背景・H1など） */  
  --color-accent:        #eaa400;
  --color-white:         #ffffff; /* 白 */
  --color-gray-lightest: #f5f5f5; /* 背景 */
  --color-gray-light:    #e0e0e0; /* テーブルの線など */
  --color-gray:          #cccccc; /* フォーム枠など */
  --link-default:        #1a73e8;
  --link-hover:          #004cbf;

  /* === ヘッダー・フッター === */
  --top-grad-l:#D46F43;  /* 左：少し明るめ */
  --top-grad-m:#C14C36;  /* 中 */
  --top-grad-r:#B0312D;  /* 右：濃い赤 */
  --hamburger-bg:   #EBD2C8; /* 右の薄いボックス色 */
  --hamburger-line: #A44942; /* 三本線の色（赤茶） */
  --header-h: 138px;           /* ヘッダーの高さ　*/
  --ab-h: 0px;                 /* 黒バー */

  /* 簡単チェック */
  --check-accent:#b33737;     /* 強調色（赤系） */
  --check-text:#1f2937;
  --check-muted:#6b7280;
  --check-border:#DDE2E8;
  --check-bg:#FFF;
  --check-focus:#2563eb;      /* フォーカス枠 */


  --nav-underline: linear-gradient(to right,
    #a1811c, #f9dd51, #fff267);   /* ナビ下線用グラデ */
  --nav-text:            #ffffff;  /* ナビ内aタグ（白） */
  --footer-link:         #595757 ;  /* フッター内aタグ */
  --footer-link-hover:   #594c49;  /* ホバー時：少し明るめのこげ茶 */
  --footer-bg:           #d9d9d6;  /* フッター背景グレー */

  /* === ボタン === */
  --button-top-bg:        #1c2556; /* トップへ戻るボタン背景 */
/*  --button-back-bg:       #5c678d;  戻るボタン背景 */
  --button-back-bg:      #8b5e5e;
/*  --button-back-bg-hover: #3f496d;  戻るボタンhover */
  --button-back-bg-hover:#7a4f4f;  


  /* === セクション背景 === */
  --bg-greeting-section:  #d9e4f1; 




  /* === Font Family ===　最初の2つはMac対応 */
  --font-family-base: 
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif" ; 
/*    -apple-system, BlinkMacSystemFont, 
    "Segoe UI", 
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", 
    "Yu Gothic", "メイリオ", Meiryo, 
    sans-serif;*/

  --font-family-heading:
    "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3",
    "Yu Mincho", "游明朝", "MS PMincho", 
    serif;


  /* === Font Size === 15を基準にすると0.95remが14.25*/
  --font-size-base: 1rem;        /* =16px */
  --font-size-small: 0.875rem;   /* =14px */
  --font-size-large: 1.125rem;   /* =18px */


  /* === Font Size（画面幅によって大きくなる）=== */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.5vw, 0.875rem); /* 約12〜14px：補足・注釈用 */
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);    /* 約14〜16px：小さめ本文など */
  --font-size-md: clamp(1rem, 0.9rem + 0.7vw, 1.125rem);     /* 約16〜18px：基本本文サイズ */
  --font-size-lg: clamp(1.125rem, 1rem + 1vw, 1.5rem);       /* 約18〜24px：小見出しなど */
  --font-size-xl: clamp(1.4rem, 1.2rem + 1.5vw, 2.25rem);    /* 約24〜36px：大見出し・キャッチ系 */
  --font-size-header-title: clamp(1.4rem, 1rem + 1.3vw, 2rem); /* ：ヘッダタイトル */

  /* === Letter Spacing === */
  --ls-tight: -0.01em;   /* 詰め気味（欧文や大見出し向け） */
  --ls-normal: 0em;      /* デフォルト */
  --ls-wide: 0.03em;     /* やや広め（見やすい日本語向け） */
  --ls-wider: 0.05em;    /* 広め（本文や読み物系） */
  --ls-loose: 0.08em;    /* 大きく広げたいとき（目立たせ用） */

  /* === Line Height === */
  --line-height-tight: 1.3;   /* 見出し用など詰め気味 */
  --line-height-base: 1.6;    /* 本文の基本 */
  --line-height-loose: 1.8;   /* ゆったりした感じにしたいとき */

  /* === Spacing（余白サイズ／マージン・パディング共通）=== */
  --space-xxs: 0.25rem;  /* 4px：超・超小さい */
  --space-xs:  0.5rem;   /* 8px：超小さい */
  --space-sm:  1rem;     /* 16px：小さい（基本） */
  --space-md:  1.5rem;   /* 24px：やや大きい */
  --space-lg:  2rem;     /* 32px：大きめの余白 */
  --space-xl:  3rem;     /* 48px：セクション間など広い余白に */
  --space-xxl: 4rem;     /* 64px：ヒーローエリアなど特大用 */

  /* === Layout（レイアウト関連）=== */
  --container-narrow: 750px;
  --container-medium: 960px;  
/*  --container-max-width: 1080px;   コンテンツ最大幅 */
  --container-max-width: 980px;

  /* === Border / Radius === */
  --border-width: 1px;        /* 標準ボーダー */
  --border-radius-sm: 4px;    /* 角丸小 */
  --border-radius-md: 8px;    /* 標準角丸 */
  --border-radius-lg: 16px;   /* 大きい角丸 */

  /* === Z-index（重なり順）=== */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* === Transition（アニメーション時間）=== */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;

}

/* ヘッダーの高さ　管理バーの高さ */
body.admin-bar { --ab-h: 32px; }
@media (max-width: 768px){
  body.admin-bar { --ab-h: 46px; }
}

@media (max-width: 768px) {
  :root {
    --header-h: 120px; 
  }
}