@charset "UTF-8";

/*
 * Custom properties (variables)
 */
:root {
	/* Main colors */
	--main-color: #0c0806;
	--sub-color: #a48ee4;
	--accent-color: #12adb3;
	--accent-color-red: #f3342c;
	
	/* Grayscale */
	--color-white: #fff;
	--color-black: #000;
	--color-gray: #65655e;
	--color-gray-10: #f8f8f8;
	--color-gray-20: #eee;
	--color-gray-30: #ccc;
	--color-gray-40: #aaa;
	--color-gray-50: #999;
	--color-gray-60: #777;
	--color-gray-70: #555;
	--color-gray-80: #333;
	--color-gray-90: #111;
	
	/* Theme colors */
	--color-red: #e30500;
	--color-orange: #e37800;
	--color-blue: #1f449e;
	--color-yellow: #efee0e;
	--color-beige: #e7c3b2;
	--color-purple: #3e1e54;
	--color-light-purple: #f2effc;
	--color-pale-purple: #e4dbfc;
	--color-light-blue: DarkTurquoise;
	--color-dark-night: #2c233a;
	
	/* Background aliases */
	--bg-light-theme: #f6f5f5;
	--bg-dark-theme: #f6f5f5;
	--bg-main-color: var(--main-color);
	--bg-accent-color: var(--accent-color);
	--bg-white: var(--color-white);
	--bg-black: var(--color-black);
	--bg-gray: var(--color-gray);
	--bg-color: var(--color-gray-10);
	--bg-color-red: var(--color-red);
	--bg-color-blue: var(--color-blue);
	--bg-color-beige: var(--color-beige);
	--bg-color-light-pink: MistyRose;
	--bg-color-dark-night: var(--color-dark-night);
	
	/* Breakpoints */
	--sp-width: 576px;
	--tb-width: 768px;
	--pc-width: 1040px;
	--small-width: 420px;
	--wrapper-width: 768px;
	
	/* セクション間の余白 */
	--section-space: clamp(3rem, 1.2rem + 7.68vw, 6rem);
	
	/* Layout sizes */
	--h-header: 100px;
	--sp-min-h-header: 64px;
	
	/* Font sizes */
	--xxx-small: 0.6875rem;  /* 11px */
	--xx-small: 0.75rem;     /* 12px */
	--x-small: 0.8125rem;    /* 13px */
	--small: 0.875rem;       /* 14px */
	--small-plus: 0.9375rem; /* 15px */
	--medium: 1rem;          /* 16px */
	--large: 1.125rem;       /* 18px */
	--x-large: 1.25rem;      /* 20px */
	--xx-large: 1.5rem;      /* 24px */
	--xxx-large: 2rem;       /* 32px */
	
	/* Animation */
	--hover-transition: 0.3s ease-in-out;
	--anime-duration: 1s;
	--anime-delay: 1s;
	--anime-repeat: 1;
	
	/* お知らせ */
	--tag-color: var(--main-color);
	--filter-active-color: #5b3d8a; /* 濃い目の紫 */
	
	/* Misc */
	--d: " . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}