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

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

	--radius: 0.6em;
	--radius-inner: 50rem;
	--button-radius: 50rem;

	--font-size: 16px;
	--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: 100px;
	--trigger-bar: 4px;

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

	--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-pink: rgb(237, 65, 153);
	--color-green: rgb(171, 205, 3);
	--color-yellow: rgb(249, 230, 0);
	--color-orange: rgb(252, 169, 16);
	--color-gray: rgb(238, 238, 238);
	--color-lightgray: rgb(236, 236, 239);
	--color-black: rgb(0, 0, 0);
}

: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-light-gray);
	--color-trigger-fr: var(--color-white);
	--color-outline: #ccc;
	--color-outline-focus: var(--color-blue);
	--color-outline-text: var(--color-black);
	--color-outline-focus-text: var(--color-white);
	--color-link: var(--color-black);
	--color-hover: var(--color-black);
	--color-form: var(--color-white);
}



/* ================================
   Color Variables (2026-03 update)
   ================================ */

   :root {
	/* 基本ブランドカラー */
	--main-color: rgb(171, 205, 3);
	--brand-primary: var(--main-color);

	/* 基本カラー */
	--color-light-pink: rgb(254, 245, 250);
	--color-light-green: rgb(247, 250, 230);

	/* category */
	--color-news: rgb(240, 240, 240);

	/* nav, Location */
	--color-light-gray: rgb(236, 236, 239);

	/* btn */
	--button-black-border: var(--color-white);
	--button-gray-border: rgb(51, 51, 51);
	--button-pink-border: rgb(241, 103, 173);
	--button-green-border: rgb(188, 215, 53);

	/* sns */
	--sns-instagram: rgb(237, 65, 153);
	--sns-line: rgb(6, 199, 85);

	--border-base: 4px solid var(--color-black);

    --benefit-pink: rgb(241, 103, 173);
    --benefit-soft-pink: rgb(250, 217, 235);
    --benefit-soft-green: rgb(238, 245, 205);
    --benefit-soft-yellow: rgb(254, 250, 204);

	--table-gray: rgb(199, 199, 199);
	/*form*/
	--form-gray: rgb(178, 178, 178);
	--form-input-white: rgb(254, 254, 254);
	--form-light-gray: rgb(204, 204, 204);
  }



: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; }
.d-none { display: none !important; }

@media (max-width: 520px) {
    :root {
        /* ===== Padding scale ===== */
    
        --pad-3: calc(var(--padding) * 1.2);
        --pad-4: calc(var(--padding) * 1.4);  
        --pad-5: calc(var(--padding) * 1.6);
        --pad-6: calc(var(--padding) * 1.8);  
        --pad-7: calc(var(--padding) * 2.0);  
        --pad-8: calc(var(--padding) * 2.2);  
        --pad-9: calc(var(--padding) * 2.4);  
        --pad-10: calc(var(--padding) * 2.6); 
    }
}