@charset "UTF-8";
/*	◆ CSS Reset & Base 1rem ≒ 16px ◆
こちらにはReset用のCSSや、ベースになるコード、:rootで変数にしたもの、よく使う項目の設定を置いています。
各項目に対するCSS設定はcommon.cssに記入します。
*/

/*--------------------------------------------------
	Reset
--------------------------------------------------*/

*, *::before, *::after {
	box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* 動きを減らす設定の人にはスムーススクロールを強制しない */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* リスト */
ul, ol {
	list-style: none;
	padding: 0;
}

/* 画像・メディア */
img, picture, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}
svg {
	max-width: 100%;
	height: auto;
}

/* テーブル */
table {
	border-collapse: collapse;
}

/* フォーム要素：見た目は潰さずフォントだけ合わせる */
input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}
	button:disabled,
	button[aria-disabled="true"] {
		cursor: default;
	}

/* リンク：ベースはアクセント色＋下線。ナビ等で必要に応じて上書き */
a {
	color: var(--color-accent, #f00);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
	text-decoration-skip-ink: auto;
	transition: opacity 0.2s ease-out, color 0.2s ease-out;
}
	a:hover {
		opacity: 0.8;
	}

/* hidden 属性 */
[hidden] {
	display: none !important;
}

/*--------------------------------------------------
	CSS Custom Properties トークンまとめ
--------------------------------------------------*/

:root {
	/* フォント */
	--font-sans: 'Noto Sans JP', system-ui, -apple-system,
		BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* 色 */
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-text: #201e87;
	--color-border: #dddddd;

	--color-accent: #3b5e92;
	--color-accent-soft: #ffe5e5;
	--color-accent-strong: #b30000;

	--color-success: #0a8a3a;
	--color-warning: #f6a700;
	--color-danger: #d00000;

	/* 余白スケール */
	--space-2xs: 0.25rem; /* 4px */
	--space-xs: 0.5rem; /* 8px */
	--space-sm: 0.75rem; /* 12px */
	--space-md: 1rem; /* 16px */
	--space-lg: 1.5rem; /* 24px */
	--space-xl: 2rem; /* 32px */
	--space-2xl: 3rem; /* 48px */

	/* コンテナ幅 */
	--container-sm: 62.5rem; /* 1000px */
	--container-md: 67.5rem; /* 1080px */
	--container-lg: 80rem; /* 1280px */

	/* 角丸・影・トランジション */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-pill: 9999px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
	--shadow-md: 0 4px 10px rgba(0, 0, 0, .08);

	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
}

/*--------------------------------------------------
	Base - 超基礎部分
--------------------------------------------------*/

html {
	font-family: var(--font-sans);
}

body {
	min-height: 100%;
	font-family: inherit;
	font-size: 1rem; /* ベース文字サイズ（必要なら 0.9375rem 等に変更） */
	line-height: 1.7;
	color: var(--color-text);
	background-color: var(--color-bg);
}

/* PC / SP 切り分け（既存クラス名そのまま） */
@media (min-width: 769px) {
	.sp {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.pc {
		display: none !important;
	}
}

/*--------------------------------------------------
	コンテナ設定
--------------------------------------------------*/

.container_big {
	max-width: var(--container-lg);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.container_middle {
	max-width: var(--container-md);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.container_small {
	max-width: var(--container-sm);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/*--------------------------------------------------
	BOX内マージン
--------------------------------------------------*/

.stack {
	--stack-space: var(--space-md);
}
	.stack>*+* {
		margin-block-start: var(--stack-space);
	}

	/* バリエーションはカスタムプロパティだけ変える */
	.stack--xs {
		--stack-space: var(--space-xs);
	}
	.stack--sm {
		--stack-space: var(--space-sm);
	}
	.stack--lg {
		--stack-space: var(--space-lg);
	}
	.stack--xl {
		--stack-space: var(--space-xl);
	}
	.stack--2xl {
		--stack-space: var(--space-2xl);
	}
	/* flexと組み合わせたい時 */
	.stack-flex {
		display: flex;
		flex-direction: column;
		gap: var(--stack-space, var(--space-md));
	}

/*--------------------------------------------------
	要素毎のフォントサイズ（normal rem 用）
--------------------------------------------------*/

h1 {
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
}

h2 {
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
}

p {
	font-size: 1rem;
}

/*--------------------------------------------------
	画像サイズ
--------------------------------------------------*/

.thumbnail {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/*--------------------------------------------------
	あるあるレイアウト
--------------------------------------------------*/
.section {
	padding-block: var(--space-xl);
}
.section__inner {
	max-width: var(--container-lg);
	margin-inline: auto;
	padding-inline: 1.5rem;
}


/*--------------------------------------------------
	Flex ユーティリティ
--------------------------------------------------*/

.flex {
	display: flex;
}

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

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

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

.flex_column_center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* スマホで縦積みにしたいとき用 */
@media (max-width: 768px) {
	.flex_responsive {
		flex-direction: column;
	}
}

/*--------------------------------------------------
	ダークモード（使う案件でだけコメントアウトを外す）
--------------------------------------------------*/
/*
@media (prefers-color-scheme: dark) {
	body {
    background-color: #121212;
    color: #ffffff;
	}
}
*/