/* =========================================
reset.css  |  リセット & ベーストークン
========================================= */

/* --- Reset (modern-min) --- */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
table{border-collapse:collapse;border-spacing:0}
button,input,select,textarea{font:inherit;color:inherit}
a{text-decoration:none;color:inherit}

/* --- Tokens (Root) --- */
:root {
	/* Colors */
	--color-main: #00AEBB;
	--color-text: #000000;
	--color-bg:   #F2F5F7;
	--color-muted:#5A6675;
	--color-line: rgba(0,0,0,.08);
	--color-surface: #ffffff;

	/* Spacing scale (px) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 56px;
	--space-9: 72px;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;

	/* Shadow */
	--shadow-sm: 0 1px 2px rgba(0,0,0,.07);
	--shadow-md: 0 6px 16px rgba(0,0,0,.08);
	--shadow-lg: 0 16px 32px rgba(0,0,0,.12);

	/* Typography */
	--ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-base: 1vw;     /* ベース：16px / 1.6 */
	--lh-body: 1.7;      /* 本文行間 */
	--lh-head: 1.3;      /* 見出し行間 */
	/* 見出しスケール（clamp・基準は h1:32, h2:28, h3:24, h4:20） */
	--fs-h1: clamp(1.8rem, 2vw, 2.0rem);
	--fs-h2: clamp(1.6rem, 1.8vw, 1.75rem);
	--fs-h3: clamp(1.4rem, 1.6vw, 1.5rem);
	--fs-h4: clamp(1.25rem, 1.4vw, 1.25rem);

	/* Breakpoints (mobile-first) */
	--bp-md: 768px;     /* タブ縦 */
	--bp-lg: 1024px;    /* タブ横/小型PC */
	--bp-xl: 1280px;    /* 標準ノートPC/基本レイアウト幅 */
	--bp-xxl:1600px;    /* ワイド */
	--bp-ultra:1920px;  /* フルHD基準・最大幅想定 */

	/* Container */
	--container-max: 1920px; /* 1920px以上は固定 */
	--container-width: 90vw; /* 1280–1920はfluid(90vw) */

	/* Timing/Easing */
	--ease: cubic-bezier(.2,.7,.2,1);
	--dur: .25s;
	
	--hv-cus: brightness(0) saturate(100%) invert(53%) sepia(92%) saturate(3400%) hue-rotate(151deg) brightness(94%) contrast(102%);
}


/* reset.css または utilities.css の冒頭で */
@font-face {
	font-family: 'NotoSansJP';
	src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


/* --- Base --- */
html, body { height: 100%; }
html { background: var(--color-bg); color-scheme: light; }
body {
	color: var(--color-text);
	background: var(--color-bg);
	font-family: var(--ff-base);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{line-height:var(--lh-head);font-weight:700}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}

a{color: var(--color-main)}
a:hover{opacity:1;text-decoration:none}

img[alt=""], img[role="presentation"]{ /* 装飾画像ルール */
	/* alt="" + role="presentation" を推奨（HTML側） */
}

.visually-hidden{
	position:absolute!important;clip:rect(1px,1px,1px,1px);
	width:1px;height:1px;overflow:hidden;white-space:nowrap
}

/* 画像・メディアの推奨挙動 */
img{height:auto;max-width:100%}
figure>img{width:100%}
.c-cover{object-fit:cover}
.has-aspect{aspect-ratio:var(--aspect, 16/9);overflow:hidden}


/* 初期状態：両方とも非表示 */
.pc_only { display: none; }
.sp_only { display: none; }

/* PC表示用（769px以上） */
@media (min-width: 769px) {
  .pc_only { display: block !important; }
  .sp_only { display: none !important; }
}

/* SP表示用（768px以下） */
@media (max-width: 768px) {
  .pc_only { display: none !important; }
  .sp_only { display: block !important; }
}

/* 全ページでアンカーをスムースに */
html {
  scroll-behavior: smooth;
  /* 固定ヘッダーのぶんだけ自動で余白を確保 */
  scroll-padding-top: var(--header-offset, 80px); /* 80pxは仮 */
}