@charset "utf-8";

/* =============================================
TLNT_Design_v1: Common Rules (Variable Definitions)
================================================ */
:root {
	--header-h: 64px;

	/* ---------------------------------------
    Color Information
    --------------------------------------- */
	--color-main: #000000;
	--color-main-wh: #ffffff;
	--color-text-main: #333333;
	--color-text-sub: #666666;

	--color-bg-base: #ffffff;
	--color-bg-black: #000000;
	--color-bg-light: #f9f9f9;

	--color-border-wh: #ffffff;
	--color-border-light: #eeeeee;
	--color-border-dark: #000000;

	/* ---------------------------------------
    Font Information
    --------------------------------------- */
	--font-base: 'Noto Sans JP', sans-serif;
	--font-en: 'Roboto', sans-serif;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-bold: 800;

	/* Line Height (Updated: Use these instead of OLD ones) */
	--lh-050: 0.5;
	--lh-075: 0.75;
	--lh-100: 1;
	--lh-125: 1.25; /* 見出し用 */
	--lh-150: 1.5;
	--lh-175: 1.75; /* 本文推奨 */
	--lh-200: 2;

	/* ---------------------------------------
    Size Information
    --------------------------------------- */
	--bd-thin: 1px;
	--bd-base: 2px;
	--bd-thick: 4px;
	--bd-circle: 40px;

	/* Font Size (Desktop Default) */
	--fs-xxl: 3rem; /* 48px */
	--fs-xl: 2rem; /* 32px */
	--fs-lg: 1.5rem; /* 24px */
	--fs-md: 1.125rem; /* 18px */
	--fs-base: 0.875rem; /* 14px */
	--fs-sm: 0.75rem; /* 12px */
	--fs-xs: 0.625rem; /* 10px */

	/* Space */
	--space-xxs: 2px;
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-xxl: 64px;

	--sp-carousel-gap: 24px;

	/* Layout Width */
	--width-wide: 1100px;
	--width-narrow: 800px;

	/* Animation */
	--transition-base: 0.3s ease;
}

/* =============================================
スマホ(SP)用の自動調整 (Mobile View Optimization)
================================================ */
@media (max-width: 768px) {
	:root {
		/* フォントサイズを一段階下げ、圧迫感を軽減 */
		--fs-xxl: 1.75rem; /* 28px (旧 32px) */
		--fs-xl: 1.375rem; /* 22px (旧 24px) */
		--fs-lg: 1.125rem; /* 18px (旧 20px) */
		--fs-md: 1rem; /* 16px (現状維持) */
		--fs-base: 0.875rem; /* 14px (PCと同じ14pxに戻し、読みやすさを確保) */
		--fs-sm: 0.75rem; /* 12px (旧 13px相当) */
		--fs-xs: 0.6875rem; /* 11px (旧 12px) */

		--sp-carousel-gap: 12px;
	}
}

/* =============================================
Base & Reset
============================================= */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-base);
	color: var(--color-text-main);
	background-color: var(--color-bg-base);
	font-size: var(--fs-base);
	/* 重要: 行間を広げて可読性を向上。1.0だと文字が重く見えすぎるため修正 */
	line-height: var(--lh-175);
	letter-spacing: 0.05em;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
	padding-top: var(--header-h);
}

a {
	color: var(--color-main);
	text-decoration: none;
	transition: all var(--transition-base);
}

a:hover {
	opacity: 0.7;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}