/* =============================================================================
   02-base.css
   リセット・body・共通ユーティリティ（.container / .breadcrumb / .img-box）
   ============================================================================= */

@layer base {

	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	html { scroll-behavior: smooth; }

	body {
		font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
		color: var(--color-text);
		line-height: 1.6;
		overflow-x: clip;
	}

	a { color: inherit; }

	/* ----- レイアウト用コンテナ ----- */
	.container {
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 32px;
		text-align: center;

		/* スマホでは横幅が狭いので余白を 16px まで詰める */
		@media (max-width: 600px) { padding: 0 16px; }
	}

	/* ----- パンくず（サイト共通） ----- */
	.breadcrumb {
		font-size: 0.875rem;
		color: var(--color-muted);
		margin-bottom: 1.5rem;
		text-align: left;

		a {
			color: var(--color-muted);
			text-decoration: underline;

			&:hover { color: var(--color-accent); }
		}
		.sep     { margin: 0 0.4em; color: #bbb; }
		.current { color: #333; font-weight: bold; }
	}

	/* ----- 画像プレースホルダ ----- */
	.img-box {
		background-color: var(--color-placeholder-bg);
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;

		&::before {
			content: "NO IMAGE";
			color: #999;
			font-size: 12px;
			position: absolute;
			z-index: 0;
		}
		img {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	/* ----- 表示制御ユーティリティ ----- */
	.sp-ib {
		display: none;

		@media (max-width: 600px) { display: inline-block; }
	}

}