@charset "UTF-8";
/**
 * ============================================
 * Base CSS - Fluid Typography 対応版
 * ============================================
 * 
 * ■ Fluid Typography（可変フォントサイズ）設計
 * 
 * clamp(最小値, 推奨値, 最大値) を使用
 * - 最小値: SPでの最小フォントサイズ
 * - 推奨値: rem + vw の組み合わせで画面幅に応じて可変
 * - 最大値: PCでの最大フォントサイズ
 * 
 * 例: clamp(1rem, 0.5rem + 1.5vw, 2rem)
 * - 320px幅: 1rem (16px) ← 最小値で固定
 * - 768px幅: 約1.5rem (24px) ← 滑らかに可変
 * - 1200px幅: 2rem (32px) ← 最大値で固定
 * 
 * ■ 計算式の考え方
 * 
 * 画面幅 320px〜1200px で min〜max にスケールさせる場合：
 * preferred = min + (max - min) * ((100vw - 320px) / (1200px - 320px))
 * 
 * これを簡略化して rem + vw の形に変換
 * 
 * ============================================
 */


/* ==========================================
   CSS Variables
========================================== */
:root {
   /* ----------------------------------------
       Font Family
       ※ Noto Sans JP を基準に、フォールバック設定
       ※ 英字は system-ui で各OSの標準フォントを使用
    ---------------------------------------- */
   --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
   --ff-heading: var(--ff-base);
   --ff-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

   /* ----------------------------------------
       Colors - Brand（メガネスーパー ブランドカラー）
    ---------------------------------------- */
   --ms_blue: #006EB2;
   --ms_blue_light: #1A92DC;
   --ms_blue_dark: #23577D;
   --ms_black: #221815;
   --ms_pink: #d9357b;
   --ms_line: #07c855;
   --ms_red: #c7321f;

   /* ----------------------------------------
       Colors - Blue Scale
    ---------------------------------------- */
   --blue000: #F6FBFF;
   --blue100: #E6F0F7;
   --blue200: #C4DDED;
   --blue300: #84BEE2;
   --blue400: #1A92DC;
   --blue500: #006EB2;
   --blue800: #2B5A7C;

   /* ----------------------------------------
       Colors - Gray Scale
    ---------------------------------------- */
   --gray000: #FCFCFC;
   --gray020: #F5F5F5;
   --gray050: #EDEDED;
   --gray100: #DEDEDE;
   --gray200: #CCCCCC;
   --gray300: #ABABAB;
   --gray400: #999999;
   --gray500: #787878;
   --gray600: #666666;
   --gray700: #454545;
   --gray800: #333333;
   --gray900: #121212;

   /* ----------------------------------------
       Colors - Gold Scale
    ---------------------------------------- */
   --gold000: #FFFDF7;
   --gold100: #FFFCF2;
   --gold200: #FFFBE6;
   --gold300: #F4E683;
   --gold400: #D7B94A;
   --gold500: #BF923D;
   --gold550: #B69200;
   --gold800: #856220;
   --gold900: #4E341B;

   /* ----------------------------------------
       Colors - Wood Scale
    ---------------------------------------- */
   --wood000: #FAF8F6;
   --wood100: #F8F2ED;
   --wood200: #EFE9E3;
   --wood300: #DEB794;
   --wood600: #6B492E;
   --wood800: #462809;

   /* ----------------------------------------
       Colors - Semantic（意味付けカラー）
    ---------------------------------------- */
   --c-primary: var(--ms_blue);
   --c-primary-light: var(--ms_blue_light);
   --c-primary-dark: var(--ms_blue_dark);
   --c-accent: var(--blue400);

   /* ----------------------------------------
       Colors - Text
    ---------------------------------------- */
   --c-text: var(--ms_black);
   --c-text-sub: var(--gray700);
   --c-text-light: var(--gray600);
   --c-text-muted: var(--gray400);
   --c-text-white: #ffffff;

   /* ----------------------------------------
       Colors - Background
    ---------------------------------------- */
   --c-bg: var(--blue000);
   --c-bg-light: var(--blue100);
   --c-bg-white: #ffffff;
   --c-bg-dark: var(--ms_blue_dark);

   /* ----------------------------------------
       Colors - Border
    ---------------------------------------- */
   --c-border: var(--gray100);
   --c-border-light: var(--gray050);

   /* ----------------------------------------
       Gradients
    ---------------------------------------- */
   --gradient-primary: linear-gradient(135deg, var(--ms_blue) 0%, var(--ms_blue_light) 100%);
   --gradient-gold: linear-gradient(135deg, var(--gold500) 0%, var(--gold400) 100%);

   /* ----------------------------------------
       Shadows
    ---------------------------------------- */
   --shadow-sm: 0 1px 3px rgba(0, 110, 178, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 110, 178, 0.10);
   --shadow-lg: 0 8px 24px rgba(0, 110, 178, 0.12);

   /* ----------------------------------------
       Border Radius
    ---------------------------------------- */
   --radius-sm: 0.375rem;
   --radius-md: 0.5rem;
   --radius-lg: 0.75rem;
   --radius-full: 1.875rem;
   --radius-circle: 50%;

   /* ----------------------------------------
       Transition
    ---------------------------------------- */
   --transition: 0.3s ease;

   /* ----------------------------------------
       Container
    ---------------------------------------- */
   --container-max: 75rem;
   --container-narrow: 50rem;
   --container-padding: clamp(1rem, 0.5rem + 2vw, 1.5rem);

   /* ----------------------------------------
       Z-index
    ---------------------------------------- */
   --z-dropdown: 100;
   --z-header: 1000;
   --z-modal: 2000;

   /* ----------------------------------------
       Fluid Font Sizes
       clamp(最小, 推奨, 最大)
       
       ※ 計算ツール: https://utopia.fyi/type/calculator/
       ※ 基準: 320px → 1200px でスケール
    ---------------------------------------- */
   --fs-hero: clamp(2rem, 1rem + 4vw, 3.5rem);
   /* 32px → 56px */
   --fs-xxl: clamp(1.625rem, 0.875rem + 3vw, 2.5rem);
   /* 26px → 40px */
   --fs-xl: clamp(1.375rem, 0.875rem + 2vw, 2rem);
   /* 22px → 32px */
   --fs-lg: clamp(1.125rem, 0.75rem + 1.5vw, 1.5rem);
   /* 18px → 24px */
   --fs-md: clamp(1rem, 0.875rem + 0.5vw, 1.125rem);
   /* 16px → 18px */
   --fs-base: clamp(0.9375rem, 0.875rem + 0.25vw, 1rem);
   /* 15px → 16px */
   --fs-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
   /* 13px → 14px */
   --fs-xs: 0.75rem;
   /* 12px 固定 */
   --fs-xxs: 0.625rem;
   /* 10px 固定 */

   /* ----------------------------------------
       Fluid Spacing
       セクション余白なども可変
    ---------------------------------------- */
   --space-section: clamp(3rem, 2rem + 4vw, 5rem);
   /* 48px → 80px */
   --space-section-sm: clamp(1.5rem, 1rem + 2vw, 2.5rem);
   /* 24px → 40px */
   --space-section-lg: clamp(4rem, 2.5rem + 6vw, 7.5rem);
   /* 64px → 120px */
   --space-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
   /* 24px → 40px */
   --space-element: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
   /* 12px → 20px */
}


/* ==========================================
   Base Styles
========================================== */
html {
   font-size: 100%;
   /* 16px */
   scroll-behavior: smooth;
}

/*
body {
   font-family: var(--ff-base);
   font-size: var(--fs-base);
   line-height: 1.8;
   color: var(--c-text);
   background-color: var(--c-bg);
   font-feature-settings: "palt";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
*/

a {
   color: var(--c-accent);
   transition: color var(--transition);
}

a:hover {
   color: var(--c-primary);
}

::selection {
   background-color: var(--c-primary);
   color: var(--c-text-white);
}

:focus-visible {
   outline: 2px solid var(--c-accent);
   outline-offset: 2px;
}


/* ==========================================
   Color Classes
========================================== */

/* Text Color */
.c-primary {
   color: var(--c-primary) !important;
}

.c-primary-lt {
   color: var(--c-primary-light) !important;
}

.c-accent {
   color: var(--c-accent) !important;
}

.c-text {
   color: var(--c-text) !important;
}

.c-text-sub {
   color: var(--c-text-sub) !important;
}

.c-text-light {
   color: var(--c-text-light) !important;
}

.c-text-muted {
   color: var(--c-text-muted) !important;
}

.c-white {
   color: var(--c-text-white) !important;
}

/* Background Color */
.bg-primary {
   background-color: var(--c-primary) !important;
}

.bg-primary-lt {
   background-color: var(--c-primary-light) !important;
}

.bg-accent {
   background-color: var(--c-accent) !important;
}

.bg-light {
   background-color: var(--c-bg-light) !important;
}

.bg-white {
   background-color: var(--c-bg-white) !important;
}

.bg-dark {
   background-color: var(--c-bg-dark) !important;
}

.bg-gradient {
   background: var(--gradient-primary) !important;
}

/* Border Color */
.bc-primary {
   border-color: var(--c-primary) !important;
}

.bc-border {
   border-color: var(--c-border) !important;
}

.bc-light {
   border-color: var(--c-border-light) !important;
}

.bc-white {
   border-color: var(--c-text-white) !important;
}


/* ==========================================
   Font Size Classes（Fluid Typography）
   
   clamp() で画面幅に応じて滑らかに可変
   メディアクエリ不要！
========================================== */
.fs-hero {
   font-size: var(--fs-hero);
}

.fs-xxl {
   font-size: var(--fs-xxl);
}

.fs-xl {
   font-size: var(--fs-xl);
}

.fs-lg {
   font-size: var(--fs-lg);
}

.fs-md {
   font-size: var(--fs-md);
}

.fs-base {
   font-size: var(--fs-base);
}

.fs-sm {
   font-size: var(--fs-sm);
}

.fs-xs {
   font-size: var(--fs-xs);
}

.fs-xxs {
   font-size: var(--fs-xxs);
}

/* Line Height */
.lh-1 {
   line-height: 1;
}

.lh-xs {
   line-height: 1.2;
}

.lh-sm {
   line-height: 1.4;
}

.lh-base {
   line-height: 1.8;
}

.lh-lg {
   line-height: 2.0;
}

/* Font Weight */
.fw-normal {
   font-weight: 400;
}

.fw-medium {
   font-weight: 500;
}

.fw-bold {
   font-weight: 700;
}


/* ==========================================
   Fluid Spacing Classes
   
   clamp() で可変 + em ベースの固定値も用意
========================================== */

/* ---- Fluid Margin（可変）---- */
.mt-fluid {
   margin-top: var(--space-element) !important;
}

.mt-fluid-md {
   margin-top: var(--space-block) !important;
}

.mt-fluid-lg {
   margin-top: var(--space-section) !important;
}

.mb-fluid {
   margin-bottom: var(--space-element) !important;
}

.mb-fluid-md {
   margin-bottom: var(--space-block) !important;
}

.mb-fluid-lg {
   margin-bottom: var(--space-section) !important;
}

/* ---- Fixed Margin（em基準）---- */
.mt-0 {
   margin-top: 0 !important;
}

.mt-5 {
   margin-top: 0.3125em !important;
}

.mt-10 {
   margin-top: 0.625em !important;
}

.mt-15 {
   margin-top: 0.9375em !important;
}

.mt-20 {
   margin-top: 1.25em !important;
}

.mt-25 {
   margin-top: 1.5625em !important;
}

.mt-30 {
   margin-top: 1.875em !important;
}

.mt-40 {
   margin-top: 2.5em !important;
}

.mt-50 {
   margin-top: 3.125em !important;
}

.mt-60 {
   margin-top: 3.75em !important;
}

.mt-80 {
   margin-top: 5em !important;
}

.mt-100 {
   margin-top: 6.25em !important;
}

.mt-auto {
   margin-top: auto !important;
}

.mb-0 {
   margin-bottom: 0 !important;
}

.mb-5 {
   margin-bottom: 0.3125em !important;
}

.mb-10 {
   margin-bottom: 0.625em !important;
}

.mb-15 {
   margin-bottom: 0.9375em !important;
}

.mb-20 {
   margin-bottom: 1.25em !important;
}

.mb-25 {
   margin-bottom: 1.5625em !important;
}

.mb-30 {
   margin-bottom: 1.875em !important;
}

.mb-40 {
   margin-bottom: 2.5em !important;
}

.mb-50 {
   margin-bottom: 3.125em !important;
}

.mb-60 {
   margin-bottom: 3.75em !important;
}

.mb-80 {
   margin-bottom: 5em !important;
}

.mb-100 {
   margin-bottom: 6.25em !important;
}

.mb-auto {
   margin-bottom: auto !important;
}

.ml-0 {
   margin-left: 0 !important;
}

.ml-5 {
   margin-left: 0.3125em !important;
}

.ml-10 {
   margin-left: 0.625em !important;
}

.ml-15 {
   margin-left: 0.9375em !important;
}

.ml-20 {
   margin-left: 1.25em !important;
}

.ml-auto {
   margin-left: auto !important;
}

.mr-0 {
   margin-right: 0 !important;
}

.mr-5 {
   margin-right: 0.3125em !important;
}

.mr-10 {
   margin-right: 0.625em !important;
}

.mr-15 {
   margin-right: 0.9375em !important;
}

.mr-20 {
   margin-right: 1.25em !important;
}

.mr-auto {
   margin-right: auto !important;
}

.mx-auto {
   margin-left: auto !important;
   margin-right: auto !important;
}

.my-0 {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}

.my-10 {
   margin-top: 0.625em !important;
   margin-bottom: 0.625em !important;
}

.my-20 {
   margin-top: 1.25em !important;
   margin-bottom: 1.25em !important;
}


/* ---- Fluid Padding（可変）---- */
.p-fluid {
   padding: var(--space-element) !important;
}

.p-fluid-md {
   padding: var(--space-block) !important;
}

.p-fluid-lg {
   padding: var(--space-section) !important;
}

.py-fluid {
   padding-top: var(--space-element) !important;
   padding-bottom: var(--space-element) !important;
}

.py-fluid-md {
   padding-top: var(--space-block) !important;
   padding-bottom: var(--space-block) !important;
}

/* ---- Fixed Padding（em基準）---- */
.pt-0 {
   padding-top: 0 !important;
}

.pt-5 {
   padding-top: 0.3125em !important;
}

.pt-10 {
   padding-top: 0.625em !important;
}

.pt-15 {
   padding-top: 0.9375em !important;
}

.pt-20 {
   padding-top: 1.25em !important;
}

.pt-30 {
   padding-top: 1.875em !important;
}

.pt-40 {
   padding-top: 2.5em !important;
}

.pt-50 {
   padding-top: 3.125em !important;
}

.pt-60 {
   padding-top: 3.75em !important;
}

.pt-80 {
   padding-top: 5em !important;
}

.pb-0 {
   padding-bottom: 0 !important;
}

.pb-5 {
   padding-bottom: 0.3125em !important;
}

.pb-10 {
   padding-bottom: 0.625em !important;
}

.pb-15 {
   padding-bottom: 0.9375em !important;
}

.pb-20 {
   padding-bottom: 1.25em !important;
}

.pb-30 {
   padding-bottom: 1.875em !important;
}

.pb-40 {
   padding-bottom: 2.5em !important;
}

.pb-50 {
   padding-bottom: 3.125em !important;
}

.pb-60 {
   padding-bottom: 3.75em !important;
}

.pb-80 {
   padding-bottom: 5em !important;
}

.pl-0 {
   padding-left: 0 !important;
}

.pl-5 {
   padding-left: 0.3125em !important;
}

.pl-10 {
   padding-left: 0.625em !important;
}

.pl-15 {
   padding-left: 0.9375em !important;
}

.pl-20 {
   padding-left: 1.25em !important;
}

.pl-30 {
   padding-left: 1.875em !important;
}

.pr-0 {
   padding-right: 0 !important;
}

.pr-5 {
   padding-right: 0.3125em !important;
}

.pr-10 {
   padding-right: 0.625em !important;
}

.pr-15 {
   padding-right: 0.9375em !important;
}

.pr-20 {
   padding-right: 1.25em !important;
}

.pr-30 {
   padding-right: 1.875em !important;
}

.p-0 {
   padding: 0 !important;
}

.p-5 {
   padding: 0.3125em !important;
}

.p-10 {
   padding: 0.625em !important;
}

.p-15 {
   padding: 0.9375em !important;
}

.p-20 {
   padding: 1.25em !important;
}

.p-30 {
   padding: 1.875em !important;
}

.px-0 {
   padding-left: 0 !important;
   padding-right: 0 !important;
}

.px-10 {
   padding-left: 0.625em !important;
   padding-right: 0.625em !important;
}

.px-20 {
   padding-left: 1.25em !important;
   padding-right: 1.25em !important;
}

.py-0 {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
}

.py-10 {
   padding-top: 0.625em !important;
   padding-bottom: 0.625em !important;
}

.py-20 {
   padding-top: 1.25em !important;
   padding-bottom: 1.25em !important;
}


/* ==========================================
   Width / Height Classes
========================================== */
.w-auto {
   width: auto;
}

.w-10 {
   width: 10%;
}

.w-20 {
   width: 20%;
}

.w-25 {
   width: 25%;
}

.w-30 {
   width: 30%;
}

.w-33 {
   width: 33.333%;
}

.w-40 {
   width: 40%;
}

.w-50 {
   width: 50%;
}

.w-60 {
   width: 60%;
}

.w-66 {
   width: 66.666%;
}

.w-70 {
   width: 70%;
}

.w-75 {
   width: 75%;
}

.w-80 {
   width: 80%;
}

.w-90 {
   width: 90%;
}

.w-100 {
   width: 100%;
}

.mw-200 {
   max-width: 12.5rem;
}

.mw-300 {
   max-width: 18.75rem;
}

.mw-400 {
   max-width: 25rem;
}

.mw-500 {
   max-width: 31.25rem;
}

.mw-600 {
   max-width: 37.5rem;
}

.mw-800 {
   max-width: 50rem;
}

.mw-1000 {
   max-width: 62.5rem;
}

.mw-1200 {
   max-width: 75rem;
}

.mw-full {
   max-width: 100%;
}

.mw-none {
   max-width: none;
}

.h-auto {
   height: auto;
}

.h-100 {
   height: 100%;
}

.h-100vh {
   height: 100vh;
}

.min-h-100vh {
   min-height: 100vh;
}


/* ==========================================
   Display Classes
========================================== */
.d-none {
   display: none !important;
}

.d-block {
   display: block !important;
}

.d-inline {
   display: inline !important;
}

.d-inline-block {
   display: inline-block !important;
}

.d-flex {
   display: flex !important;
}

.d-inline-flex {
   display: inline-flex !important;
}

.d-grid {
   display: grid !important;
}

.invisible {
   visibility: hidden !important;
}

.visible {
   visibility: visible !important;
}


/* ==========================================
   Flexbox Classes
========================================== */
.flex-row {
   flex-direction: row;
}

.flex-column {
   flex-direction: column;
}

.flex-row-rev {
   flex-direction: row-reverse;
}

.flex-col-rev {
   flex-direction: column-reverse;
}

.flex-wrap {
   flex-wrap: wrap;
}

.flex-nowrap {
   flex-wrap: nowrap;
}

.jc-start {
   justify-content: flex-start;
}

.jc-end {
   justify-content: flex-end;
}

.jc-center {
   justify-content: center;
}

.jc-between {
   justify-content: space-between;
}

.jc-around {
   justify-content: space-around;
}

.jc-evenly {
   justify-content: space-evenly;
}

.ai-start {
   align-items: flex-start;
}

.ai-end {
   align-items: flex-end;
}

.ai-center {
   align-items: center;
}

.ai-baseline {
   align-items: baseline;
}

.ai-stretch {
   align-items: stretch;
}

.as-start {
   align-self: flex-start;
}

.as-end {
   align-self: flex-end;
}

.as-center {
   align-self: center;
}

.as-stretch {
   align-self: stretch;
}

.flex-1 {
   flex: 1;
}

.flex-auto {
   flex: auto;
}

.flex-none {
   flex: none;
}

/* Fluid Gap */
.gap-fluid {
   gap: var(--space-element);
}

.gap-fluid-md {
   gap: var(--space-block);
}

/* Fixed Gap */
.gap-0 {
   gap: 0;
}

.gap-5 {
   gap: 0.3125em;
}

.gap-10 {
   gap: 0.625em;
}

.gap-15 {
   gap: 0.9375em;
}

.gap-20 {
   gap: 1.25em;
}

.gap-25 {
   gap: 1.5625em;
}

.gap-30 {
   gap: 1.875em;
}

.gap-40 {
   gap: 2.5em;
}

/* Shorthand */
.flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
}

.flex-between {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.flex-start {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.flex-end {
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

.flex-col-center {
   display: flex;
   flex-direction: column;
   align-items: center;
}


/* ==========================================
   Grid Classes
========================================== */
.grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
}


/* ==========================================
   Text Utilities
========================================== */
.ta-left {
   text-align: left !important;
}

.ta-center {
   text-align: center !important;
}

.ta-right {
   text-align: right !important;
}

.va-top {
   vertical-align: top;
}

.va-middle {
   vertical-align: middle;
}

.va-bottom {
   vertical-align: bottom;
}

.tt-upper {
   text-transform: uppercase;
}

.tt-lower {
   text-transform: lowercase;
}

.tt-cap {
   text-transform: capitalize;
}

.tt-none {
   text-transform: none;
}

.td-none {
   text-decoration: none !important;
}

.td-under {
   text-decoration: underline;
}

.td-through {
   text-decoration: line-through;
}

.ws-nowrap {
   white-space: nowrap;
}

.ws-normal {
   white-space: normal;
}

.ws-pre {
   white-space: pre-wrap;
}

.truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.line-clamp-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}


/* ==========================================
   Position Classes
========================================== */
.pos-relative {
   position: relative;
}

.pos-absolute {
   position: absolute;
}

.pos-fixed {
   position: fixed;
}

.pos-sticky {
   position: sticky;
   top: 0;
}

.pos-static {
   position: static;
}

.top-0 {
   top: 0;
}

.right-0 {
   right: 0;
}

.bottom-0 {
   bottom: 0;
}

.left-0 {
   left: 0;
}

.inset-0 {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}


/* ==========================================
   Border & Radius Classes
========================================== */
.border {
   border: 1px solid var(--c-border);
}

.border-t {
   border-top: 1px solid var(--c-border);
}

.border-b {
   border-bottom: 1px solid var(--c-border);
}

.border-l {
   border-left: 1px solid var(--c-border);
}

.border-r {
   border-right: 1px solid var(--c-border);
}

.border-0 {
   border: none !important;
}

.bw-1 {
   border-width: 1px;
}

.bw-2 {
   border-width: 2px;
}

.bw-3 {
   border-width: 3px;
}

.bw-4 {
   border-width: 4px;
}

.rounded-0 {
   border-radius: 0 !important;
}

.rounded-sm {
   border-radius: var(--radius-sm);
}

.rounded-md {
   border-radius: var(--radius-md);
}

.rounded-lg {
   border-radius: var(--radius-lg);
}

.rounded-full {
   border-radius: var(--radius-full);
}

.rounded-circle {
   border-radius: var(--radius-circle);
}


/* ==========================================
   Shadow Classes
========================================== */
.shadow-none {
   box-shadow: none !important;
}

.shadow-sm {
   box-shadow: var(--shadow-sm);
}

.shadow-md {
   box-shadow: var(--shadow-md);
}

.shadow-lg {
   box-shadow: var(--shadow-lg);
}


/* ==========================================
   Overflow Classes
========================================== */
.overflow-hidden {
   overflow: hidden;
}

.overflow-auto {
   overflow: auto;
}

.overflow-scroll {
   overflow: scroll;
}

.overflow-visible {
   overflow: visible;
}

.overflow-x-auto {
   overflow-x: auto;
   overflow-y: hidden;
}

.overflow-y-auto {
   overflow-x: hidden;
   overflow-y: auto;
}


/* ==========================================
   Cursor Classes
========================================== */
.cursor-pointer {
   cursor: pointer;
}

.cursor-default {
   cursor: default;
}

.cursor-not-allowed {
   cursor: not-allowed;
}


/* ==========================================
   Misc Utilities
========================================== */
.obj-cover {
   object-fit: cover;
}

.obj-contain {
   object-fit: contain;
}

.obj-fill {
   object-fit: fill;
}

.select-none {
   user-select: none;
}

.select-all {
   user-select: all;
}

.select-auto {
   user-select: auto;
}

.pe-none {
   pointer-events: none;
}

.pe-auto {
   pointer-events: auto;
}

.opacity-0 {
   opacity: 0;
}

.opacity-25 {
   opacity: 0.25;
}

.opacity-50 {
   opacity: 0.5;
}

.opacity-75 {
   opacity: 0.75;
}

.opacity-100 {
   opacity: 1;
}

.z-0 {
   z-index: 0;
}

.z-10 {
   z-index: 10;
}

.z-50 {
   z-index: 50;
}

.z-100 {
   z-index: 100;
}

.z-1000 {
   z-index: 1000;
}

.z-auto {
   z-index: auto;
}

.transition {
   transition: all var(--transition);
}

.transition-none {
   transition: none;
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}