/* ============================================================
   SHITSURAE ROOM - 共通スタイルシート
   ------------------------------------------------------------
   コンセプト：ダークモダン × ホテルライクな暮らしを、道具から整える。
   TikTok経由のスマホ流入がメインなので「モバイルファースト」で書く。
   → 先にスマホ用のスタイルを書き、画面が大きくなったら
     @media (min-width: ...) で「足していく」設計にする。
   ============================================================ */

/* ------------------------------------------------------------
   1. デザイントークン（CSSカスタムプロパティ）
   ------------------------------------------------------------
   色や余白などを:root に変数として定義しておくと、
   「サイト全体の色を変えたい」ときに1箇所直すだけで済む。
   後からCSSの中では var(--変数名) の形で呼び出す。
------------------------------------------------------------- */
:root {
	/* 背景色（ページ全体） */
	--bg: #0f0f0f;
	/* 背景色（カードなど、ページより一段明るい面） */
	--surface: #1a1a1a;
	/* 枠線の色。背景とのコントラストが強すぎないよう控えめに */
	--border: #2a2a2a;
	/* 基本の文字色（白に近いオフホワイトにして真っ白より柔らかく） */
	--text: #e8e6e3;
	/* 補足文字色（説明文・キャプションなど、主張を弱めたい場所用） */
	--text-sub: #9a9793;
	/* アクセントカラー（ホテルのような高級感を出す真鍮・ゴールド系） */
	--accent: #c9a227;

	/* レイアウト用の共通値もここにまとめておくと調整が楽になる */
	--max-width: 480px; /* スマホの記事幅の目安（読みやすい行長を保つ） */
	--radius: 4px; /* 角丸。ホテルライクな硬質さを出すため控えめに */
	--gap: 16px; /* 余白の基準値 */
}

/* ------------------------------------------------------------
   2. リセット・基本設定
   ------------------------------------------------------------
   ブラウザごとに異なるデフォルトの余白・箱の計算方法を統一する。
   box-sizing: border-box にすると「width指定にpaddingが
   足し算されて崩れる」という初心者がハマりがちな問題を防げる。
------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	/* スマホでの横スクロール発生を防ぐ保険 */
	overflow-x: hidden;
}

body {
	background-color: var(--bg);
	color: var(--text);
	/* 游ゴシック等、OSごとの標準的な明朝以外の可読フォントを優先指定 */
	font-family:
		"Hiragino Sans", "Yu Gothic", "Noto Sans JP", -apple-system,
		BlinkMacSystemFont, sans-serif;
	line-height: 1.8; /* 行間を広めにして高級感・読みやすさを両立 */
	-webkit-font-smoothing: antialiased;
}

img {
	/* 画像は親要素の幅を超えないようにする（レスポンシブの基本） */
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
}

/* ------------------------------------------------------------
   3. 見出し共通スタイル
   ------------------------------------------------------------
   要件：見出しは letter-spacing 0.08em で字間を広げる。
   字間を広げるとホテルのロゴのような「静かで上質な」印象になる。
   日本語は特に字間を詰めすぎると圧迫感が出るため、
   広げることで余白の美しさ＝高級感につながる。
------------------------------------------------------------- */
h1,
h2,
h3 {
	letter-spacing: 0.08em;
	font-weight: 700;
}

/* ------------------------------------------------------------
   4. 共通レイアウト（コンテナ）
   ------------------------------------------------------------
   記事幅を最大480px程度に制限し、中央寄せにする。
   スマホでは自然と画面幅いっぱいになり、
   PCで見たときも「スマホの記事を覗き見ている」ような
   TikTok的な縦長レイアウトを保てる。
------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto; /* 左右のmarginをautoにして中央寄せ */
	padding-inline: var(--gap);
}

/* ------------------------------------------------------------
   5. ヘッダー・ナビゲーション
------------------------------------------------------------- */
.site-header {
	position: sticky; /* スクロールしても常に見える位置に固定 */
	top: 0;
	z-index: 10;
	background-color: var(--bg);
	border-bottom: 1px solid var(--border);
	padding-block: 14px;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-logo {
	font-size: 1rem;
	letter-spacing: 0.12em; /* ロゴはさらに字間を広げてブランド感を強調 */
	font-weight: 700;
	color: var(--text);
}

.site-logo span {
	color: var(--accent); /* ロゴの一部だけアクセントカラーにして視線を誘導 */
}

.site-nav ul {
	display: flex;
	gap: 20px;
}

.site-nav a {
	font-size: 0.8rem;
	color: var(--text-sub);
	letter-spacing: 0.05em;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--accent);
}

/* ------------------------------------------------------------
   6. ヒーローエリア（トップページ冒頭）
------------------------------------------------------------- */
.hero {
	padding-block: 56px 40px;
	text-align: center;
	border-bottom: 1px solid var(--border);
}

.hero-catch {
	font-size: 1.5rem;
	line-height: 1.6;
}

.hero-catch .accent {
	color: var(--accent);
}

.hero-lead {
	margin-top: 16px;
	color: var(--text-sub);
	font-size: 0.9rem;
}

/* ------------------------------------------------------------
   7. カテゴリーカード（トップページのグリッド）
   ------------------------------------------------------------
   grid-template-columns: 1fr の1カラムをモバイルの基本形にし、
   画面幅が広がったら2カラムに増やす（モバイルファーストの実践例）。
------------------------------------------------------------- */
.category-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	padding-block: 40px;
}

.category-card {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	transition: border-color 0.2s ease;
}

.category-card:hover,
.category-card:focus-within {
	border-color: var(--accent);
}

.category-card .label {
	font-size: 0.7rem;
	color: var(--accent);
	letter-spacing: 0.1em;
}

.category-card h3 {
	margin-top: 8px;
	font-size: 1.1rem;
}

.category-card p {
	margin-top: 8px;
	color: var(--text-sub);
	font-size: 0.85rem;
}

/* 未公開カテゴリー（Coming Soon）は少し薄く見せて区別する */
.category-card.is-disabled {
	opacity: 0.5;
	pointer-events: none; /* リンクとしてクリックできないようにする */
}

/* ------------------------------------------------------------
   8. 記事本文（kitchen.html などの記事ページ共通）
------------------------------------------------------------- */
.article-header {
	padding-block: 40px 24px;
	border-bottom: 1px solid var(--border);
}

.article-header .label {
	font-size: 0.75rem;
	color: var(--accent);
	letter-spacing: 0.1em;
}

.article-header h1 {
	margin-top: 12px;
	font-size: 1.6rem;
	line-height: 1.5;
}

.article-lead {
	margin-top: 16px;
	color: var(--text-sub);
	font-size: 0.9rem;
}

/* ------------------------------------------------------------
   9. ランキングカード（TOP5記事の中核パーツ）
------------------------------------------------------------- */
.ranking-list {
	padding-block: 32px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ranking-item {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden; /* 角丸からはみ出す画像や色帯を切り取る */
}

.ranking-item .rank-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 12px 20px;
	color: var(--accent);
	border-bottom: 1px solid var(--border);
	width: 100%;
}

.ranking-item .rank-badge .no {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
}

.ranking-item .rank-badge .num {
	font-size: 1.3rem;
	font-weight: 700;
}

/* 商品画像のプレースホルダー。実際の画像が入るまでの仮の箱 */
.product-thumb {
	aspect-ratio: 4 / 3; /* 縦横比を固定し、画像未挿入でもレイアウト崩れを防ぐ */
	background-color: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-sub);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--border);
}

.product-body {
	padding: 20px;
}

.product-body h2 {
	font-size: 1.05rem;
}

.product-price {
	margin-top: 6px;
	color: var(--accent);
	font-size: 0.95rem;
}

.product-desc {
	margin-top: 12px;
	color: var(--text-sub);
	font-size: 0.85rem;
}

.product-points {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.product-points li {
	font-size: 0.8rem;
	color: var(--text);
	padding-left: 1em;
	position: relative;
}

/* リストの先頭にアクセントカラーの小さな印をCSSだけで追加する */
.product-points li::before {
	content: "―";
	position: absolute;
	left: 0;
	color: var(--accent);
}

/* ------------------------------------------------------------
   10. アフィリリンクボタン
   ------------------------------------------------------------
   ボタンは指で押しやすいよう縦幅（padding）を大きめに確保する。
   スマホでのタップ領域は44px以上が目安とされている。
------------------------------------------------------------- */
.btn-affiliate {
	display: block;
	margin-top: 18px;
	padding: 14px 0;
	text-align: center;
	background-color: var(--accent);
	color: var(--bg); /* ボタン内は背景が明るいので文字は暗色にして読みやすく */
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	border-radius: var(--radius);
}

.btn-affiliate:hover,
.btn-affiliate:focus-visible {
	opacity: 0.85;
}

/* ------------------------------------------------------------
   11. フッター
   ------------------------------------------------------------
   ステマ規制（景品表示法）対応として、
   「本サイトにはアフィリエイト広告が含まれます」旨を
   全ページ共通のフッターに明記する。
------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--border);
	padding-block: 32px 40px;
	margin-top: 40px;
}

.site-footer .disclaimer {
	font-size: 0.75rem;
	color: var(--text-sub);
	line-height: 1.7;
}

.site-footer .footer-nav {
	margin-top: 16px;
	display: flex;
	gap: 16px;
}

.site-footer .footer-nav a {
	font-size: 0.75rem;
	color: var(--text-sub);
}

.site-footer .footer-nav a:hover {
	color: var(--accent);
}

.site-footer .copyright {
	margin-top: 20px;
	font-size: 0.7rem;
	color: var(--text-sub);
}

/* ------------------------------------------------------------
   12. 静的ページ共通（about / privacy / contact）
   ------------------------------------------------------------
   運営者情報・プライバシーポリシー・お問い合わせなど、
   ランキング形式ではない「読み物ページ」用の共通クラス。
   タイトル部分はkitchen.htmlと同じ .article-header を使い回し、
   本文だけこの .prose 配下のスタイルで整形する。
   （＝新しいクラスを"追記"する形にして、既存の構造は変えない）
------------------------------------------------------------- */
.prose {
	padding-block: 32px 48px;
}

/* 本文中の見出し。記事タイトル(h1)より一段小さくし、
   セクションの区切りとして上の余白を多めに取る */
.prose h2 {
	margin-top: 40px;
	font-size: 1.05rem;
}

/* 最初の見出しだけは直前の余白が要らないので打ち消す */
.prose h2:first-child {
	margin-top: 0;
}

.prose p {
	margin-top: 12px;
	color: var(--text-sub);
	font-size: 0.9rem;
}

/* 冒頭のリセット（2.）で ul の list-style を消しているため、
   読み物ページでは改めてマーカーを表示させ直す。
   olはリセットの対象外なので数字はもともと表示される。 */
.prose ul,
.prose ol {
	margin-top: 12px;
	padding-left: 1.4em;
}

.prose ul {
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose li {
	margin-top: 6px;
	color: var(--text-sub);
	font-size: 0.9rem;
}

/* リスト項目内の強調文字（見出し的に使う語）はメイン文字色に */
.prose li strong {
	color: var(--text);
}

/* 本文中のリンク（contact.htmlへの誘導など）は下線をつけて
   「クリックできる」ことが分かるようにする */
.prose a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 運営者プロフィールのような「項目名：内容」の対を表す定義リスト(dl) */
.profile-list {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.profile-list div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}

.profile-list dt {
	font-size: 0.7rem;
	color: var(--accent);
	letter-spacing: 0.08em;
}

.profile-list dd {
	font-size: 0.9rem;
	color: var(--text);
}

/* ------------------------------------------------------------
   13. Googleフォーム埋め込み（contact.html）
   ------------------------------------------------------------
   iframeはwidthを指定しないと中身の既定サイズのまま表示され、
   スマホ画面からはみ出して横スクロールの原因になりやすい。
   親要素・iframe自体をどちらもwidth:100%にして、
   画面幅に追従させる（レスポンシブ対応）。
------------------------------------------------------------- */
.form-embed {
	margin-top: 24px;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden; /* 角丸の外にiframeの中身がはみ出さないように切り取る */
}

.form-embed iframe {
	display: block;
	width: 100%;
	height: 900px; /* Googleフォームの一般的な縦の長さの目安 */
	border: none; /* iframeに標準でつく枠線を消し、外側のborderだけ見せる */
}

/* ------------------------------------------------------------
   14. レスポンシブ対応（タブレット・PC幅）
   ------------------------------------------------------------
   min-width を使うのがモバイルファーストの書き方の鍵。
   「画面が広くなってきたら、これを追加で適用する」という考え方。
------------------------------------------------------------- */
@media (min-width: 600px) {
	:root {
		--max-width: 640px;
	}

	.category-grid {
		grid-template-columns: 1fr 1fr; /* 画面が広がったら2カラムに */
	}

	.hero-catch {
		font-size: 1.9rem;
	}
}