/* TRISITE CSS 4.0  */
/* (C) 2023 TRISITE */
/* Initialize       */
/* 2025.11 追記       */

:root {
	--basic-font: "BIZ UDPGothic","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",system-ui,sans-serif;
    --width-limit: 1040px;
	--section-space: 60px;
	--margin: 1.8em;/*34.2*/
	--padding: 20px;
	--input-width: 260px;
	--container-main: 1000px; /*追記*/
	--gutter: calc(var(--margin) * 0.8); /*追記*/
	

	--radius: 0.6em;
	--radius-inner: 0.3em;

	--font-size: 19px;
	--step: 1.2;
	--line-height: 1.6;/*34.4px相当*/
	--transition: 0.2s;
	--small: 0.6em;/*11.4px相当*/
	--large: 1.4em;/*22.6px相当*/

	--brightness: 1.1;
	--outline: 1px;

	--trigger-size: 50px;
	--trigger-bar: 4px;

	--gap: calc( var(--margin) * var(--step) );/*41.04*/
	--header-offset: 96px;

	--color-light-glass:rgba(255, 254, 254,0.8);
	--color-dark-glass:rgba(38, 32, 32,0.8);

	--color-white: rgb(255, 254, 254);
	--color-blue: rgb(35, 137, 248);
	/* --color-red: rgb(231, 63, 63); */
	/* --color-green: rgb(46, 163, 105); */
	--color-yellow: rgb(248, 245, 46);
	--color-orange: rgb(252, 169, 16);
	--color-gray: rgb(156, 147, 147);
	--color-lightgray: rgb(239, 233, 233);
	--color-black: rgb(38, 32, 32);
}

:root{
	--color-body: var(--color-white);
	--color-text: var(--color-black);
	--color-border: var(--color-black);
	--color-table: var(--color-white);
	--color-table-odd: var(--color-lightgray);
	--color-agree-bg: var(--brand-primary);
	--color-agree-fr: var(--color-white);
	--color-disagree-bg: var(--color-red);
	--color-disagree-fr: var(--color-white);
	--color-cancel-bg: var(--color-lightgray);
	--color-cancel-fr: var(--color-black);
	--color-trigger-bg: var(--color-dark-glass);
	--color-trigger-fr: var(--color-white);
	--color-outline: var(--color-lightgray);
	--color-outline-focus: var(--color-blue);
	--color-outline-text: var(--color-black);
	--color-outline-focus-text: var(--color-white);
	--color-link: var(--color-blue);
	--color-hover: var(--color-red);
	--color-form: var(--color-white);
}



/* ================================
   Color Variables (2025-11 update)
   ================================ */

   :root {
	/* 基本ブランドカラー */
	--main-color: rgb(3 82 165);
	--color-green: rgb(3 165 102);
	--color-red: rgb(230 81 0);
	--color-white-rgb: 255 254 254;
	--main-color-light: rgba(3 82 165 / .05);
	--main-color-glass: rgba(3 82 165 / .8);
	--color-gray-rgb: 239 239 239;
	--color-light-blue: rgb(1 125 240);
	--color-yellow: rgb(255 255 0);

	/* 基本フォントカラー */
	--fc-black: rgb(22 22 22);
	--fc-blue: var(--color-request);

	/* カスタマイズ */
	--color-gray: rgb(239, 239, 239);
	--color-nav-custom:rgba(3, 82, 165,0.8);
  
	/* 教室別テーマカラー */
	--color-elem-main: rgb(251 148 0);   /* 小学部 */
	--color-junior-main: var(--color-green); /* 中学部 */
	--color-senior-main: var(--color-light-blue); /* 高校部 */
	--color-personal-main: var(--color-red); /* 個別指導 */
	--color-other-main: rgb(255 91 180);   /* 全学年共通（全体イベントなど） */
	/* グラデ用（スペース区切り） */
	--color-elem-main-g: 251 148 0;   /* 小学部 */
	--color-junior-main-g: 3 165 102; /* 中学部 */
	--color-senior-main-g: 1 125 240; /* 高校部 */
    --color-personal-main-g: 230 81 0; /* 個別指導 */
	/* 半透明（header用） */
	--color-elem-glass: rgb(251 148 0 / .8);/* 小学部 */
	--color-junior-glass: rgb(3 165 102 / .8);/* 中学部 */
	--color-senior-glass: rgb(1 125 240 / .8);/* 高校部 */
    --color-personal-glass: rgb(230 81 0 / .8);/* 個別指導 */
  
	/* アクション系（CTA） */
	--color-request: rgb(1, 186, 254);     /* 資料請求 */
	--color-trial: var(--color-green);       /* 無料体験（中学部カラーに準ずる） */
	--color-contact: var(--color-red);      /* お問い合わせ（個別指導カラーに準ずる） */
	--color-campaign: rgb(255, 240, 0);    /* キャンペーン（スポット使用） */
  
	/* 装飾・背景系 */
	--color-heading-en: rgb(188, 209, 231); /* 見出しの英語タイトル */
	--color-bg-light: rgb(237, 245, 251);   /* 一部背景（淡い青系） */
  
	/* 合格実績セクション */
	--color-result-junior-main: var(--color-junior-main);
	--color-result-junior-bg: rgb(238, 244, 240); /* 中学部 合格実績背景 */
	--color-result-senior-main: var(--color-senior-main);
	--color-result-senior-bg: rgb(220, 237, 253); /* 高校部 合格実績背景 */
  }

/* =========================================
   THEME BASE (drop-in)
   使い方：<section class="theme-junior"> … </section>
   ========================================= */

.theme-elem {
    --brand-primary: var(--color-elem-main);
	--brand-primary-g: var(--color-elem-main-g);
	--brand-gradient-sub-g: 255 211 150;/*classで使用*/
    --brand-tag-primary: var(--color-elem-main);
    --brand-secondary: var(--color-bg-light);
    --brand-font-color: var(--color-elem-main);
    --brand-glass-color: var(--color-elem-glass);
}
.theme-junior {
	--brand-primary: var(--color-junior-main);
	--brand-primary-g: var(--color-junior-main-g);
	--brand-gradient-sub-g: 103 215 153;/*classで使用*/
	--brand-tag-primary: var(--color-junior-main);
	--brand-secondary: var(--color-result-junior-bg);
	--brand-font-color: var(--color-junior-main);
    --brand-glass-color: var(--color-junior-glass);
}
.theme-senior {
	--brand-primary: var(--color-senior-main);
	--brand-primary-g: var(--color-senior-main-g);
	--brand-gradient-sub-g: 138 198 255;/*classで使用*/
	--brand-tag-primary: var(--color-senior-main);
	--brand-secondary: var(--color-result-senior-bg);
	--brand-font-color: var(--color-senior-main);
    --brand-glass-color: var(--color-senior-glass);
}
.theme-personal {
	--brand-primary: var(--color-personal-main);
    --brand-primary-g: var(--color-personal-main-g);
    --brand-gradient-sub-g: 240 146 86;/*classで使用*/
	--brand-tag-primary: var(--color-personal-main);
	--brand-secondary: var(--color-bg-light);
	--brand-font-color: var(--color-personal-main);
    --brand-glass-color: var(--color-personal-glass);
}
.theme-other { /* 全学年 */
	--brand-primary: var(--color-other-main);
	--brand-tag-primary: var(--color-other-main);
	--brand-secondary: var(--color-bg-light);
	--brand-font-color: var(--color-other-main);
}
.theme-default {
	--brand-primary: var(--main-color);
	--brand-primary: var(--main-color);
	--brand-font-color: var(--color-black);
	--color-hover: var(--main-color);
}


:root {
	/* ===== margin scale ===== */
	/* --margin: 1.8em; = 34.2px（1em=19px基準） */
	--space-1: calc(var(--margin) * 0.5);  /* 約17.1px */
	--space-2: var(--margin);              /* 約34.2px */
	--space-3: calc(var(--margin) * 1.5);  /* 約51.3px */
	--space-4: calc(var(--margin) * 2);    /* 約68.4px */
	--space-5: calc(var(--margin) * 2.5);  /* 約85.5px */
	--space-6: calc(var(--margin) * 3);    /* 約102.6px */
	--space-7: calc(var(--margin) * 3.5);  /* 約119.7px */
	--space-8: calc(var(--margin) * 4);    /* 約136.8px */

	/* ===== Padding scale ===== */
	--pad-1: calc(var(--padding) * 0.5);   /* 10px */
	--pad-2: var(--padding);               /* 20px */
	--pad-3: calc(var(--padding) * 1.5);   /* 30px */
	--pad-4: calc(var(--padding) * 2);     /* 40px */
	--pad-5: calc(var(--padding) * 2.5);   /* 50px */
	--pad-6: calc(var(--padding) * 3);     /* 60px */
	--pad-7: calc(var(--padding) * 4);     /* 80px */
	--pad-8: calc(var(--padding) * 5);     /* 100px */
	--pad-9: calc(var(--padding) * 6);     /* 120px */
	--pad-10: calc(var(--padding) * 8);    /* 160px */
	
	/* ===== Gap scale ===== */
	--gap-1: calc(var(--margin) * 0.25);  /* 8.5px */
	--gap-2: calc(var(--margin) * 0.5);   /* 17px */
	--gap-3: calc(var(--margin) * 0.75);  /* 25px */
	--gap-4: var(--margin);               /* 34px */
	--gap-5: calc(var(--margin) * 1.25);  /* 43px */
	--gap-6: calc(var(--margin) * 1.5);   /* 51px */
	--gap-7: calc(var(--margin) * 2);     /* 68px */
	--gap-8: calc(var(--margin) * 2.5);   /* 85px */
  }
  

  /* === Utility spacing === */
.u-pr-0 { padding-right: 0 !important; }
.u-pl-0 { padding-left: 0 !important; }


/* ===============================
   Responsive Utilities (PC/TB/SP)
   PC(>=1200px): px固定
   1199.98px以下: vw換算
   920px以下: 920基準で再補正
   520px以下: 520基準で再補正（必要なら係数を変えて締めてもOK）
   =============================== */

/* margin-bottom */
.rsp-mb { margin-bottom: calc(var(--mb, 30) * 1px); }
@media (max-width:1199.98px){
  .rsp-mb { margin-bottom: calc((var(--mb,30) / 12) * 1vw); } /* 1200基準: 1vw=12px */
}
@media (max-width:920px){
  .rsp-mb { margin-bottom: calc((var(--mb,30) / 9.2) * 1vw); } /* 920基準: 1vw=9.2px */
}
@media (max-width:520px){
  .rsp-mb { margin-bottom: calc((var(--mb,30) / 5.2) * 1vw); } /* 520基準: 1vw=5.2px（強めにしたいなら /6.5 等に） */
}

/* padding-block（上下） */
.rsp-pb { padding-block: calc(var(--pb, 60) * 1px); }
@media (max-width:1199.98px){
  .rsp-pb { padding-block: calc((var(--pb,60) / 12) * 1vw); }
}
@media (max-width:920px){
  .rsp-pb { padding-block: calc((var(--pb,60) / 9.2) * 1vw); }
}
@media (max-width:520px){
  .rsp-pb { padding-block: calc((var(--pb,60) / 5.2) * 1vw); }
}

/* gap（Grid/Flexの間隔） */
.rsp-gap { gap: calc(var(--gapx, 30) * 1px); }
@media (max-width:1199.98px){
  .rsp-gap { gap: calc((var(--gapx,30) / 12) * 1vw); }
}
@media (max-width:920px){
  .rsp-gap { gap: calc((var(--gapx,30) / 9.2) * 1vw); }
}
@media (max-width:520px){
  .rsp-gap { gap: calc((var(--gapx,30) / 5.2) * 1vw); }
}

/* font-size（最小/最大を必要なら上書き可能） */
.rsp-fs { font-size: calc(var(--fs,19) * 1px); }
@media (max-width:1199.98px){
  .rsp-fs { font-size: calc((var(--fs,19) / 12) * 1vw); }
}
@media (max-width:920px){
  .rsp-fs { font-size: calc((var(--fs,19) / 9.2) * 1vw); }
}
@media (max-width:520px){
  /* 文字は潰れやすいので最低値を守りたい場合は clamp を使う */
  .rsp-fs { font-size: clamp(var(--fs-min,14px), calc((var(--fs,19) / 5.2) * 1vw), var(--fs-max,999px)); }
}