/*
Theme Name: SUNPLACE
Theme URI: https://sunplace-jp.com
Author: SUNPLACE Inc.
Author URI: https://sunplace-jp.com
Description: 株式会社SUNPLACEのコーポレートサイト用カスタムテーマ
Version: 1.0.0
Text Domain: sunplace
*/

:root {
  /* ================================================================
     ブランドカラー
  ================================================================ */
  --navy:       #151515;
  --navy-dark:  #0d0d0d;
  --gold:       #f39800;
  --gold-light: #ff5307;

  /* ---- Gold alpha ---- */
  --gold-05: rgba(243, 152, 0, 0.05);
  --gold-06: rgba(243, 152, 0, 0.06);
  --gold-08: rgba(243, 152, 0, 0.08);
  --gold-10: rgba(243, 152, 0, 0.1);
  --gold-12: rgba(243, 152, 0, 0.12);
  --gold-15: rgba(243, 152, 0, 0.15);
  --gold-18: rgba(243, 152, 0, 0.18);
  --gold-20: rgba(243, 152, 0, 0.2);
  --gold-25: rgba(243, 152, 0, 0.25);
  --gold-30: rgba(243, 152, 0, 0.3);
  --gold-35: rgba(243, 152, 0, 0.35);
  --gold-40: rgba(243, 152, 0, 0.4);
  --gold-50: rgba(243, 152, 0, 0.5);
  --gold-60: rgba(243, 152, 0, 0.6);
  --gold-90: rgba(243, 152, 0, 0.9);

  /* ---- Navy alpha ---- */
  --navy-15: rgba(21, 21, 21, 0.15);

  /* ---- ボーダー用アクセント ---- */
  --gold-border-25: rgba(243, 152, 0, 0.25);

  --grad-gold: linear-gradient(90deg, #ffaa00 0%, #ff5307 100%);

  /* ---- White alpha ---- */
  --white-025: rgba(255, 255, 255, 0.025);
  --white-03:  rgba(255, 255, 255, 0.03);
  --white-04:  rgba(255, 255, 255, 0.04);
  --white-05:  rgba(255, 255, 255, 0.05);
  --white-06:  rgba(255, 255, 255, 0.06);
  --white-10:  rgba(255, 255, 255, 0.1);
  --white-15:  rgba(255, 255, 255, 0.15);
  --white-20:  rgba(255, 255, 255, 0.2);
  --white-30:  rgba(255, 255, 255, 0.3);
  --white-40:  rgba(255, 255, 255, 0.4);
  --white-50:  rgba(255, 255, 255, 0.5);
  --white-55:  rgba(255, 255, 255, 0.55);
  --white-70:  rgba(255, 255, 255, 0.7);
  --white-80:  rgba(255, 255, 255, 0.8);

  /* ---- Black alpha ---- */
  --black-04: rgba(0, 0, 0, 0.04);
  --black-05: rgba(0, 0, 0, 0.05);
  --black-08: rgba(0, 0, 0, 0.08);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-70: rgba(0, 0, 0, 0.7);

  /* ================================================================
     テキストカラー
  ================================================================ */
  --color-text:         #151515;
  --color-text-dark:    #2b2b2b;
  --color-text-medium:  #333333;
  --color-text-muted:   #646464;
  --color-text-lighter: #9a9a9a;
  --color-text-sub:     #ffffff;
  --color-black:        #000;

  /* ================================================================
     背景カラー
  ================================================================ */
  --color-bg:         #ffffff;
  --color-bg-gray:    #f8f8f4;
  --color-bg-section: #f0f0ea;
  --color-bg-hover:   #f8f8f4;
  --color-bg-cream:   #f0f0ea;
  --color-bg-card:    #f0f0ea;

  /* ================================================================
     ボーダー
  ================================================================ */
  --color-border: #e3e3e3;

  /* ================================================================
     アクセント
  ================================================================ */
  --color-indigo-light: #EEF2FF;
  --color-indigo:       #C7D2FE;

  /* ================================================================
     UI / セマンティックカラー
  ================================================================ */
  --color-error:        #F87171;
  --color-instagram:    #E1306C;
  --color-youtube:      #FF0000;
  --color-error-bg: rgba(239,68,68,.2);
  --gradient-instagram: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

  /* フッター */
  --color-footer-text:   #666;
  --color-footer-muted:  #999;
  --color-footer-light:  #ccc;
  --color-footer-border: #333;

  /* ================================================================
     シャドウ
  ================================================================ */
  --shadow-xs:      0 2px 6px rgba(0, 0, 0, 0.15);
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md:      0 3px 20px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg:      0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-deep:    0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-gold:    0 4px 20px rgba(243, 152, 0, 0.4);
  --shadow-gold-md: 0 4px 20px rgba(243, 152, 0, 0.35);
  --shadow-gold-sm: 0 4px 16px rgba(243, 152, 0, 0.3);
  --shadow-gold-xs: 0 4px 12px rgba(243, 152, 0, 0.3);

  /* ================================================================
     タイポグラフィ
  ================================================================ */
  --font-sans:  'Heebo', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
  --font-serif: 'Georgia', serif;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* フォントサイズ */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  1.875rem;  /* 30px */
  --fs-3xl:  2.25rem;   /* 36px */
  --fs-4xl:  3rem;      /* 48px */

  /* レタースペーシング */
  --ls-tight:  0.02em;
  --ls-normal: 0.03em;
  --ls-wide:   0.06em;
  --ls-wider:  0.08em;
  --ls-widest: 0.1em;
  --ls-label:  0.28em;

  /* 行間 */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;
  --lh-body:    1.85;
  --lh-loose:   1.95;

  /* ================================================================
     ボーダー半径
  ================================================================ */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   26px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* ================================================================
     トランジション
  ================================================================ */
  --transition-fast: 0.2s;
  --transition-base: 0.25s;
  --transition-slow: 0.3s;

  /* ================================================================
     レイアウト
  ================================================================ */
  --container-max:    1200px;
  --container-narrow: 760px;
  --container-footer: 1100px;
  --header-height:    60px;

  /* ================================================================
     z-index
  ================================================================ */
  --z-menu-bg: 9996;
  --z-menu:    9997;
  --z-burger:  9999;
  --z-logo:    9999;
}

body {
  overflow-x: hidden;
  background-color: var(--color-bg);
  font-family: 'Heebo', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }