@charset "utf-8";

/* =====================================================================
   Sheeto Blog  ―  style.css
   既存サイト(style.css)とは独立。デザインの方向性・カラーは踏襲。
   ===================================================================== */

:root {
	/* --- カラー（本体サイトと共通） --- */
	--bg:          #faf7f2;
	--surface:     #ffffff;
	--surface-2:   #fcf9f4;
	--ink:         #423b34;
	--ink-2:       #7c7269;
	--ink-3:       #a89e92;
	--line:        #e1dace;

	--accent:      #e2a07c;
	--accent-deep: #cd875e;
	--accent-tint: #fbeee2;
	--accent-tint2:#f7e3d3;

	--teal:        #8ab0aa;
	--teal-tint:   #e9f1ef;

	--ok:          #6aa888;
	--danger:      #cf7b6f;

	--r-lg: 2.2rem;
	--r-md: 1.4rem;
	--r-sm: 1rem;
	--shadow-sm: 0 1px 2px rgba(66,59,52,.05);
	--shadow:    0 1px 2px rgba(66,59,52,.04), 0 1rem 3rem -1.6rem rgba(102,77,53,.22);
	--shadow-lg: 0 2px 6px rgba(66,59,52,.05), 0 2.4rem 6rem -2.8rem rgba(102,77,53,.30);

	--maxw-read: 74rem;   /* 記事本文の読みやすい横幅 */
	--maxw:      112rem;  /* おすすめ等の広めエリア */
	--font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
	--font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
}

/* ---------- 最小リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
@media screen and (max-width: 330px) { html { font-size: 56%; } }

body.blog {
	font-family: var(--font-body);
	color: var(--ink);
	background-color: var(--bg);
	background-image:
		radial-gradient(110rem 54rem at 12% -8%, var(--accent-tint) 0%, transparent 55%),
		radial-gradient(90rem 50rem at 105% 4%, var(--teal-tint) 0%, transparent 50%);
	background-attachment: fixed;
	line-height: 1.85;
	font-size: 1.6rem;
	letter-spacing: .01em;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* =====================================================================
   サイトヘッダー / フッター
   ===================================================================== */
.blog-head {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 2.4rem 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}
.blog-head__logo { height: 4.6rem; width: auto; }
@media screen and (max-width: 600px) {
	.blog-head { padding: 1.8rem 5%; }
	.blog-head__logo { height: 3.8rem; }
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1;
	padding: 1.25rem 2rem;
	border-radius: 99.9rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary {
	color: #fff;
	background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
	box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover { transform: translateY(-1px); text-decoration: none; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.4); }

.blog-footer {
	margin-top: 8rem;
	border-top: 1px solid var(--line);
	background: var(--surface-2);
}
.blog-footer__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 4.4rem 4rem 5rem;
	text-align: center;
}
.blog-footer__brand { display: inline-block; }
.blog-footer__copy { color: var(--ink-3); font-size: 1.2rem; margin-top: 2rem; font-family: var(--font-display); }

/* =====================================================================
   記事レイアウト
   ===================================================================== */
.blog-wrap {
	max-width: var(--maxw-read);
	margin: 0 auto;
	padding: 1.6rem 4rem 0;
}
@media screen and (max-width: 600px) { .blog-wrap { padding: 1rem 6% 0; } }

/* ---------- 記事ヒーロー ---------- */
.article-hero { padding: 2.4rem 0 2.8rem; border-bottom: 1px dashed var(--line); margin-bottom: 3.6rem; }
.article-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 5.4vw, 3.8rem);
	line-height: 1.4;
	letter-spacing: .01em;
	margin: 1.6rem 0 0;
	color: var(--ink);
}
.article-meta { margin-top: 1.6rem; color: var(--ink-2); font-size: 1.35rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.article-meta__date { font-family: var(--font-display); }

.article-thumb { margin-top: 2.6rem; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.article-thumb img { width: 100%; }

/* ---------- タグ ---------- */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.tag {
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--teal);
	background: var(--teal-tint);
	border-radius: 99rem;
	padding: .45rem 1.1rem;
	line-height: 1.4;
}

/* =====================================================================
   記事本文タイポグラフィ（.article-body 配下を素のHTMLで書けるように）
   ===================================================================== */
.article-body { font-size: 1.6rem; }
.article-body > * + * { margin-top: 1.8rem; }

.article-body h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.1rem, 3.6vw, 2.6rem);
	line-height: 1.5;
	color: var(--ink);
	margin-top: 6.4rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--accent-tint2);
	position: relative;
}
.article-body h2::before {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 6rem; height: 2px;
	background: var(--accent-deep);
}
.article-body h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 3vw, 2.1rem);
	line-height: 1.5;
	color: var(--ink);
	margin-top: 3.6rem;
	padding-left: 1.4rem;
	border-left: 5px solid var(--accent);
}
.article-body h2 + *,
.article-body h3 + * { margin-top: 2rem; }

.article-body p { line-height: 2.2; }
.article-body a { color: var(--accent-deep); font-weight: 500; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: var(--accent-tint2); }
.article-body a:hover { text-decoration-color: var(--accent-deep); }
.article-body em {
	font-style: normal;
	font-weight: 700;
	color: var(--ink);
	background: linear-gradient(transparent 62%, var(--accent-tint) 62%);
	padding: 0 .1em;
}
.article-body small { font-size: 1.3rem; color: var(--ink-2); }

/* ---------- リスト ---------- */
.article-body ul,
.article-body ol { padding-left: 0; list-style: none; }
.article-body li { position: relative; padding-left: 2.6rem; margin-top: 1rem; line-height: 1.8; }
.article-body li + li { margin-top: 1rem; }

.article-body ul > li::before {
	content: "";
	position: absolute;
	left: .4rem; top: .65em;
	width: .9rem; height: .9rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 .35rem var(--accent-tint);
}
.article-body ol { counter-reset: ol-counter; }
.article-body ol > li { counter-increment: ol-counter; }
.article-body ol > li::before {
	content: counter(ol-counter);
	position: absolute;
	left: 0; top: .4em;
	width: 2rem; height: 2rem;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display);
	font-weight: 700; font-size: 1.2rem;
	color: #fff;
	background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
	border-radius: 50%;
	line-height: 1;
	padding-bottom: 0.15em;
}
/* ネストしたリスト */
.article-body li > ul,
.article-body li > ol { margin-top: 1rem; }

/* 定義リスト */
.article-body dl { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); padding: 2rem 3rem;}
.article-body dt { font-family: var(--font-display); font-weight: 700; color: var(--accent-deep); padding: 0; }
.article-body dd { padding: 0; color: var(--ink); }
.article-body dl dt + dd { margin-top: 0.4rem; }
.article-body dl dd + dt { margin-top: 2rem; }

/* ---------- 区切り線 ---------- */
.article-body hr { border: 0; height: 1px; background: var(--line); margin: 4rem auto; width: 100%; }

/* ---------- 画像 / 図 ----------
   画像は既定で width:100%。最大サイズは <img data-max="480"> のように指定でき、
   その値が max-width に反映されます（footer の小さなスクリプトで適用）。
   data-max を付けた画像は中央寄せになります。 */
.article-body figure { margin: 2.4rem 0; }
.article-body figure img,
.article-body p > img,
.article-body > img {
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
.article-body img[data-max] { margin-inline: auto; margin: 0;}
.article-body figcaption { margin-top: .9rem; text-align: center; font-size: 1.3rem; color: var(--ink-3); }

/* ---------- コード ---------- */
.article-body code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: .92em;
	background: var(--accent-tint);
	color: var(--accent-deep);
	padding: .15em .45em;
	border-radius: 5px;
}
.article-body pre {
	background: #2f2a25;
	color: #f6efe6;
	border-radius: var(--r-md);
	padding: 1.8rem 2rem;
	overflow-x: auto;
	box-shadow: var(--shadow);
	line-height: 1.7;
}
.article-body pre code { background: none; color: inherit; padding: 0; font-size: 1.4rem; }
.article-body kbd {
	font-family: var(--font-display);
	font-size: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 6px;
	padding: .2rem .6rem;
	color: var(--ink);
}

/* =====================================================================
   注釈（footnote / 補足）
   ===================================================================== */
.note {
	display: block;
	font-size: 1.35rem;
	line-height: 1.75;
	color: var(--ink-2);
	background: var(--surface-2);
	border: 1px dashed var(--line);
	border-radius: var(--r-sm);
	padding: 1.2rem 1.4rem 1.2rem 3.4rem;
	position: relative;
}
.note::before {
	content: "※";
	position: absolute;
	left: 1.2rem; top: 1.1rem;
	color: var(--accent-deep);
	font-weight: 700;
}

/* =====================================================================
   デザインされたコンテンツエリア（callout / box）
   ===================================================================== */
.callout {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	padding: 2rem 2.2rem;
}
.callout__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
	color: var(--ink);
	margin-bottom: .8rem;
	display: flex; align-items: center; gap: 1rem;
}
.callout__title::before {
	content: "";
	width: 2rem;
	height: 2rem;
	border-radius: 25%;
	background: var(--teal);
	flex: none;
}
.callout > * + * { margin-top: 1rem; }
.callout p { line-height: 1.85; }

/* =====================================================================
   Sheeto 誘導バナー（画像差し替え用）
   ===================================================================== */
.promo-banner { margin: 5rem 0 0; }
.promo-banner__link {
	display: block;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
	border: 1px solid var(--line);
	background: linear-gradient(150deg, var(--accent-tint) 0%, var(--surface) 60%);
	transition: transform .15s ease, box-shadow .2s ease;
}
.promo-banner__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
/* 画像未設定（src="")でも高さが潰れないように最低限の枠を確保 */
.promo-banner__link img { width: 100%; display: block; min-height: 9rem; background: transparent; }

/* =====================================================================
   おすすめ記事（自動選定）
   ===================================================================== */
.related {
	max-width: var(--maxw);
	margin: 6.4rem auto 0;
	padding: 0;
}
@media screen and (max-width: 600px) { .related { padding: 0 6%; } }
.related__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.2rem;
	color: var(--ink);
	text-align: center;
	margin-bottom: 2.8rem;
}
.related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media screen and (max-width: 820px) { .related__grid { grid-template-columns: 1fr; max-width: 52rem; margin: 0 auto; } }

.related-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-tint2); text-decoration: none; }
.related-card__thumb { aspect-ratio: 16 / 9; background: var(--surface-2); }
.related-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-card__thumb.is-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
}
.related-card__mark { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 2rem; letter-spacing: .04em; opacity: .92; }
.related-card__body { padding: 1.6rem 1.8rem 2rem; display: flex; flex-direction: column; gap: .6rem; }
.related-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.35; color: var(--ink); }
.related-card__desc {
	font-size: 1.3rem; color: var(--ink-2); line-height: 1.7;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.related-card__tags {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.4rem;
	row-gap: 0.4rem;
}
.related-card__tags .tag {
	width: fit-content;
	list-style: none;
	white-space: nowrap;
	font-size: 1rem;
}

/* =====================================================================
   アクセシビリティ / その他
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}