@charset "utf-8";
/* =========================================================================
   テーマ pax ／ 水色→青→紫のグラデーション（v4 既定）
   参考サイトのデザインの「採寸値」だけをもとに自作した配色。
   参考サイトの CSS・画像・文章は取り込んでいない。
   ------------------------------------------------------------------------
   明暗の差（WCAG 2.x 相対輝度で計算）
     本文 #163D65 / 白 ........................ 11.1:1
     本文 #163D65 / 淡い地 #EEF0FF ............ 9.8:1
     補助文 rgba(0,7,19,.62) / 白（≒#61656D）. 5.9:1
     見出し・リンク #1A33E3 / 白 .............. 8.0:1
     グラデ文字の端 #1A7FE0 / 白 .............. 4.0:1（見出し 3:1 以上）
     紫 #8245EC / 白 .......................... 5.2:1
     白文字 / #213491（暗い面の上端） ......... 10.7:1
     黄 #F0E435 / #1A33E3 ..................... 6.0:1
     部品の輪郭 #8B8D98 / 白 .................. 3.3:1
   ========================================================================= */
:root[data-theme="pax"] {
  --bg:           #FFFFFF;
  --bg-2:         #F9F9FB;
  --bg-3:         #EEF0FF;
  --ink:          #163D65;
  --ink-sub:      rgba(0, 7, 19, .62);
  --field:        #1A33E3;
  --field-2:      #213491;
  --field-label:  #F0E435;
  --field-soft:   #E1E6FF;
  --field2-label: #F0E435;
  --field2-soft:  #DDE2F7;
  --brand-ink:    #1A33E3;
  --accent:       #F0E435;
  --on-accent:    #1C2024;
  --cta:          #1A33E3;
  --cta-d:        #1428B0;
  --alert:        #B42318;
  --line:         #E4E4E9;
  --line-2:       #8B8D98;
  --map-sea:      #CEF3FD;
  --shade:        rgba(10, 15, 43, .55);
}

/* テーマに関係なく使う v4 の追加トークン */
:root {
  --text-primary:  #163D65;
  --text-sub:      rgba(0, 7, 19, .62);
  --grad-main:     linear-gradient(90deg, #3FD2FC 0%, #1A33E3 50%, #8245EC 100%);
  --grad-light:    linear-gradient(90deg, #3FD2FC 0%, #8245EC 100%);
  --grad-lightblue: linear-gradient(180deg, #FFFFFF 0%, #CEF3FD 100%);
  /* 白地に載せるグラデーション文字（読みやすさのため水色の端を少し濃くしてある） */
  --grad-text:     linear-gradient(90deg, #1A7FE0 0%, #1A33E3 45%, #8245EC 100%);
  --grad-card:     linear-gradient(135deg, #1A33E3 0%, #5B2FD6 100%);
  --grad-dark:     linear-gradient(180deg, #213491 0%, #0A0F2B 100%);
  --yellow:        #F0E435;
  --purple:        #8245EC;
  --gray-1:        #F9F9FB;
  --gray-2:        #E4E4E9;
  --gray-3:        #60646C;
  --gray-4:        #1C2024;
  --shadow-float:  0 4px 12px rgba(9, 28, 92, .12);
}