@charset "UTF-8";

/* =====================================================
   variables.css
   Design Tokens for IYOPLAN ADS（2025）
   - Color
   - Typography
   - Spacing / Layout
   - Motion / Z-index
   ===================================================== */

:root {

  /* =====================================================
     Color System
     ===================================================== */

  /* --- Brand Colors RGB--- */
  --color-main-rgb: 235, 97, 0; /* #eb6100; */
  /*--color-main-rgb: 30, 32, 127;  #1e207f; */
  /*--color-main-rgb: 235, 97, 0;  #eb6100 */

  /* --- Brand Colors --- */
  --color-main: rgb(var(--color-main-rgb));
  --color-main-light: color-mix(in srgb, var(--color-main), #fff 20%);
  --color-main-dark: color-mix(in srgb, var(--color-main), #000 20%);

  /*--color-main: #1e207f;
  --color-main-light: #017eff;
  --color-main-dark: #0100a0;*/

  /*--color-main-light-rgb: 95, 130, 255;  #5f82ff */
  /*--color-main-dark-rgb: 22, 47, 120;  #162f78 */

  /*　サブ画面のタイトル背景色 */
  --color-c-herosub: color-mix(in srgb, var(--color-main), #fff 90%);

  --color-accent: #999;
  --color-accent-rgb: 153, 153, 153;
  --color-accent-light: #e8e8e8;
  --color-accent-light-rgb: 247, 247, 247;
  --color-accent-dark: #333;
  
  --color-header-nav: rgba(0, 0, 0, .10);


  /* --- Text Colors --- */
  --color-text: #333;
  --color-text-light: #666;
  --color-text-muted: #999;
  --color-text-white: #fff;

  /* --- Base Colors --- */
  --color-white: #fff;
  --color-black: #000;
  --color-danger: #e5383b;

  /* --- Alpha Colors --- */
  --color-white-18: rgba(255, 255, 255, .18);
  --color-white-35: rgba(255, 255, 255, .35);
  --color-white-50: rgba(255, 255, 255, .50);

  /* --- Background Colors --- */
  --color-bg: #fff;
  --color-bg-soft: #f7f7f7;
  /*--color-bg-accent: #f0f6ff;*/
  --color-bg-accent: #fdefe6;
  --color-bg-accent-rgb: 255, 169, 74; /* #FFA94A */

  /* --- Border Colors --- */
  --color-border: #ddd;
  --color-border-light: #eee;
  --color-border-dark: #333;
  --color-border-main: var(--color-main);


  /* --- area Colors --- */
  --area-ehime-color: #F08300;      /* えひめ */
  --area-kagawa-color: #004E9D;    /* かがわ */
  --area-tokushima-color: #e4007f;         /* とくしま */
  --area-kouchi-color: #007A00;       /* こうち */


  /* =====================================================
     Typography
     ===================================================== */

  /* --- Font Family --- */
/*  --font-base: 'Manrope', 'Noto Sans JP', sans-serif;*/
/*  --font-title: 'Manrope', 'Noto Sans JP', sans-serif;*/
  --font-base: 'IBM Plex Sans JP', sans-serif;
  --font-title: 'IBM Plex Sans JP', sans-serif;

  /* --- Font Size --- */
  --fz-xxs: 0.7rem;
  --fz-xs: 0.8rem;
  --fz-sm: 0.9rem;
  --fz-md: 1rem;
  --fz-lg: 1.15rem;
  --fz-xl: 1.3rem;
  --fz-2xl: 1.8rem;
  --fz-3xl: 2.2rem;
  --fz-4xl: 2.4rem;
  --fz-5xl: 3.6rem;


  /* =====================================================
     Spacing System（8px base）
     ===================================================== */

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;


  /* =====================================================
     Radius
     ===================================================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;


  /* =====================================================
     Shadow
     ===================================================== */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, .1);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, .12);
  --shadow-card: 0 6px 18px rgba(0, 0, 0, .12);

  /* optional */
  --shadow-soft: .8rem .8rem 1.2rem rgba(0, 0, 0, .05),
                 -.8rem -.8rem 1.2rem #fff;
  --shadow-header: 0 2px 6px rgba(0, 0, 0, .05);


  /* =====================================================
     Layout
     ===================================================== */

  --layout-header-height: 60px;
  --layout-container-width: 1500px;
  --layout-container-padding: 20px;
  --layout-bottom-bar-height: 60px;


  /* =====================================================
     Z-index
     ===================================================== */

  --z-base: 1;
  --z-header: 3000;
  --z-dropdown: 1200;
  --z-floating: 1400;
  --z-side-tabs: 1450;
  --z-bottom-bar: 1500;
  --z-overlay: 1550;
  --z-toggle: 1600;
  --z-modal: 2000;


  /* =====================================================
     Breakpoints
     ===================================================== */

  --bp-sp: 480px;
  --bp-tab: 768px;
  --bp-pc: 1024px;
  --bp-large: 1440px;


  /* =====================================================
     Motion
     ===================================================== */

  --motion-easing: cubic-bezier(.2, 1, .2, 1);
  --motion-fast: .2s var(--motion-easing);
  --motion-base: .4s var(--motion-easing);


  --swiper-pagination-color: var(--color-main);

  /* =====================================================
     Effect / Mask
     ===================================================== */

  --ink-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<filter id='noise'>\
<feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23noise)'/>\
</svg>");
}