/* ------------------------------------------------ COLOR ------------------------------------------------ */ :where(:root) { /* text color */ --color-base: #513939; --color-ocher: #998A62; --color-olive: #7E8520; --color-black: #000; /* border color */ --color-border: #C4C2C2; /* グラデーション */ --gradient-: linear-gradient(180deg, rgba(255, 230, 163, 0.9) 0%, rgba(153, 138, 98, 0.9) 100%); } /* ------------------------------------------------ GLOBAL ------------------------------------------------ */ :root { /* overlay */ --overlay: rgba(51, 51, 51, 0.15); /* z-index */ --zindex-back: -10; --zindex-none: 0; --zindex-middle: 10; --zindex-front: 100; --zindex-scroll: 200; --zindex-nav: 300; --zindex-modal: 1000; --zindex-max: 10000; /* family */ --fontFamily-base: "Hina Mincho", serif; /* weight */ --fontWeight-thin: 100; --fontWeight-extra-light: 200; --fontWeight-light: 300; --fontWeight-regular: 400; --fontWeight-medium: 500; --fontWeight-semi-bold: 600; --fontWeight-bold: 700; --fontWeight-extra-bold: 800; --fontWeight-black: 900; /* inner */ --width-inner-xs: clamp(320px, 70vw, 660px); --width-inner-s: clamp(360px, 72vw, 780px); --width-inner-m: clamp(400px, 72vw, 820px); --width-inner-l: clamp(480px, 74vw, 1000px); --width-inner-xl: clamp(560px, 76vw, 1200px); --width-inner-2xl: clamp(710px, 78vw, 1280px); --width-inner-3xl: clamp(720px, 80vw, 1400px); /* container余白 */ --padding-container: 5%; /* headerの高さ */ --height-header: 100px; /* ハーフレングスを打ち消す関数 */ --leading-trim: calc((1em - 1lh) / 2); } /* ------------------------------------------------ 関数 ------------------------------------------------ */ /* 固定フォントサイズ（定数用）------ */ /* 使用例: font-size: var(--fontSize-lg); */ :root { /* ビューポート設定 */ --clamp-viewport-min: 375; --clamp-viewport-max: 1600; /* フォントサイズ設定 */ --fontSize-2xs-min: 11; --fontSize-2xs-max: 12; --fontSize-xs-min: 12; --fontSize-xs-max: 13; --fontSize-sm-min: 12; --fontSize-sm-max: 14; --fontSize-base-min: 13; --fontSize-base-max: 15; --fontSize-md-min: 14; --fontSize-md-max: 18; --fontSize-lg-min: 15; --fontSize-lg-max: 20; --fontSize-xl-min: 18; --fontSize-xl-max: 24; --fontSize-2xl-min: 21; --fontSize-2xl-max: 28; --fontSize-3xl-min: 20; --fontSize-3xl-max: 32; --fontSize-4xl-min: 27; --fontSize-4xl-max: 48; --fontSize-5xl-min: 36; --fontSize-5xl-max: 64; /* スペース設定 */ --space-xxs-min: 2; --space-xxs-max: 4; --space-xs-min: 4; --space-xs-max: 8; --space-sm-min: 10; --space-sm-max: 16; --space-md-min: 16; --space-md-max: 24; --space-lg-min: 18; --space-lg-max: 32; --space-xl-min: 24; --space-xl-max: 40; --space-2xl-min: 30; --space-2xl-max: 48; --space-3xl-min: 36; --space-3xl-max: 56; --space-4xl-min: 40; --space-4xl-max: 72; --space-5xl-min: 46; --space-5xl-max: 80; --space-6xl-min: 50; --space-6xl-max: 96; --space-7xl-min: 70; --space-7xl-max: 120; --space-8xl-min: 90; --space-8xl-max: 160; --space-9xl-min: 100; --space-9xl-max: 180; --space-10xl-min: 140; --space-10xl-max: 220; --space-11xl-min: 180; --space-11xl-max: 280; /* -------------------------------- */ /* フォントサイズ変数の定義 */ --fontSize-2xs: clamp(calc(var(--fontSize-xs-min) * 1px), calc(var(--fontSize-2xs-min) * 1px + (var(--fontSize-2xs-max) - var(--fontSize-2xs-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-2xs-max) * 1px)); --fontSize-xs: clamp(calc(var(--fontSize-xs-min) * 1px), calc(var(--fontSize-xs-min) * 1px + (var(--fontSize-xs-max) - var(--fontSize-xs-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-xs-max) * 1px)); --fontSize-sm: clamp(calc(var(--fontSize-sm-min) * 1px), calc(var(--fontSize-sm-min) * 1px + (var(--fontSize-sm-max) - var(--fontSize-sm-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-sm-max) * 1px)); --fontSize-base: clamp(calc(var(--fontSize-base-min) * 1px), calc(var(--fontSize-base-min) * 1px + (var(--fontSize-base-max) - var(--fontSize-base-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-base-max) * 1px)); --fontSize-md: clamp(calc(var(--fontSize-md-min) * 1px), calc(var(--fontSize-md-min) * 1px + (var(--fontSize-md-max) - var(--fontSize-md-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-md-max) * 1px)); --fontSize-lg: clamp(calc(var(--fontSize-lg-min) * 1px), calc(var(--fontSize-lg-min) * 1px + (var(--fontSize-lg-max) - var(--fontSize-lg-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-lg-max) * 1px)); --fontSize-xl: clamp(calc(var(--fontSize-xl-min) * 1px), calc(var(--fontSize-xl-min) * 1px + (var(--fontSize-xl-max) - var(--fontSize-xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-xl-max) * 1px)); --fontSize-2xl: clamp(calc(var(--fontSize-2xl-min) * 1px), calc(var(--fontSize-2xl-min) * 1px + (var(--fontSize-2xl-max) - var(--fontSize-2xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-2xl-max) * 1px)); --fontSize-3xl: clamp(calc(var(--fontSize-3xl-min) * 1px), calc(var(--fontSize-3xl-min) * 1px + (var(--fontSize-3xl-max) - var(--fontSize-3xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-3xl-max) * 1px)); --fontSize-4xl: clamp(calc(var(--fontSize-4xl-min) * 1px), calc(var(--fontSize-4xl-min) * 1px + (var(--fontSize-4xl-max) - var(--fontSize-4xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-4xl-max) * 1px)); --fontSize-5xl: clamp(calc(var(--fontSize-5xl-min) * 1px), calc(var(--fontSize-5xl-min) * 1px + (var(--fontSize-5xl-max) - var(--fontSize-5xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--fontSize-5xl-max) * 1px)); /* スペース変数の定義 */ --space-xxs: clamp(calc(var(--space-xxs-min) * 1px), calc(var(--space-xxs-min) * 1px + (var(--space-xxs-max) - var(--space-xxs-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-xxs-max) * 1px)); --space-xs: clamp(calc(var(--space-xs-min) * 1px), calc(var(--space-xs-min) * 1px + (var(--space-xs-max) - var(--space-xs-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-xs-max) * 1px)); --space-sm: clamp(calc(var(--space-sm-min) * 1px), calc(var(--space-sm-min) * 1px + (var(--space-sm-max) - var(--space-sm-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-sm-max) * 1px)); --space-base: clamp(calc(var(--space-base-min) * 1px), calc(var(--space-base-min) * 1px + (var(--space-base-max) - var(--space-base-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-base-max) * 1px)); --space-md: clamp(calc(var(--space-md-min) * 1px), calc(var(--space-md-min) * 1px + (var(--space-md-max) - var(--space-md-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-md-max) * 1px)); --space-lg: clamp(calc(var(--space-lg-min) * 1px), calc(var(--space-lg-min) * 1px + (var(--space-lg-max) - var(--space-lg-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-lg-max) * 1px)); --space-xl: clamp(calc(var(--space-xl-min) * 1px), calc(var(--space-xl-min) * 1px + (var(--space-xl-max) - var(--space-xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-xl-max) * 1px)); --space-2xl: clamp(calc(var(--space-2xl-min) * 1px), calc(var(--space-2xl-min) * 1px + (var(--space-2xl-max) - var(--space-2xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-2xl-max) * 1px)); --space-3xl: clamp(calc(var(--space-3xl-min) * 1px), calc(var(--space-3xl-min) * 1px + (var(--space-3xl-max) - var(--space-3xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-3xl-max) * 1px)); --space-4xl: clamp(calc(var(--space-4xl-min) * 1px), calc(var(--space-4xl-min) * 1px + (var(--space-4xl-max) - var(--space-4xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-4xl-max) * 1px)); --space-5xl: clamp(calc(var(--space-5xl-min) * 1px), calc(var(--space-5xl-min) * 1px + (var(--space-5xl-max) - var(--space-5xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-5xl-max) * 1px)); --space-6xl: clamp(calc(var(--space-6xl-min) * 1px), calc(var(--space-6xl-min) * 1px + (var(--space-6xl-max) - var(--space-6xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-6xl-max) * 1px)); --space-7xl: clamp(calc(var(--space-7xl-min) * 1px), calc(var(--space-7xl-min) * 1px + (var(--space-7xl-max) - var(--space-7xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-7xl-max) * 1px)); --space-8xl: clamp(calc(var(--space-8xl-min) * 1px), calc(var(--space-8xl-min) * 1px + (var(--space-8xl-max) - var(--space-8xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-8xl-max) * 1px)); --space-9xl: clamp(calc(var(--space-9xl-min) * 1px), calc(var(--space-9xl-min) * 1px + (var(--space-9xl-max) - var(--space-9xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-9xl-max) * 1px)); --space-10xl: clamp(calc(var(--space-10xl-min) * 1px), calc(var(--space-10xl-min) * 1px + (var(--space-10xl-max) - var(--space-10xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-10xl-max) * 1px)); --space-11xl: clamp(calc(var(--space-11xl-min) * 1px), calc(var(--space-11xl-min) * 1px + (var(--space-11xl-max) - var(--space-11xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))), calc(var(--space-11xl-max) * 1px)); } /* Clamp計算式（カスタム用）---------- */ /* 使用例: --min-size: 16; --max-size: 24; でカスタマイズ */ *, *:before, :after { --min-size: 13; --max-size: 14; --min-viewport: 375; --max-viewport: 1600; /* スロープの計算を修正 */ --slope: calc((var(--max-size) - var(--min-size)) * 1.0 / (var(--max-viewport) - var(--min-viewport))); /* インターセプトの計算を修正 */ --fluid-size: calc((var(--slope) * (100vw - var(--min-viewport) * 1px)) + (var(--min-size) * 1px)); --clamp-size: clamp(var(--min-size) * 1px, var(--fluid-size), var(--max-size) * 1px); } /* ------------------------------------------------ BREAKPOINT ------------------------------------------------ */ /* PC（1024px以上） */ @media (width >=1024px) { :root { /* デスクトップ用の調整があればここに */ } } /* TABLET（768px以上、1024px未満） */ @media (768px <=width < 1024px) { :root { /* タブレット用の調整があればここに */ } } /* SP 768px未満 */ @media (width < 768px) { :root { /* container余白 */ --padding-container: max(20px, 5vw); --margin: 0 2rem; --height-header: 70px; } } @media (width < 480px) { :root { } }