@charset "UTF-8";
/* 10thly Journal — 確定Design実装用CSS（子テーマ）
   デザイントークン・色・書体は 10thly Journal.html（確定Design）から抽出した値をそのまま使用。
   独自の色調整・新色追加は行っていない。 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300..700;1,300..700&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap');

.tenthly-page {
	--c-bg: #FCFBF8;
	--c-bg-soft: #E8E8E8;
	--c-bg-lavender-soft: #F4F0F8;
	--c-bg-hover: #F4F0F8;
	--c-text: #343238;
	--c-text-body: #707070;
	--c-text-body-strong: #343238;
	--c-text-meta: #707070;
	--c-border: #E8E8E8;
	--c-border-soft: #F0F0F0;
	--c-border-chip: #C3B5D9;
	--c-accent: #C3B5D9;
	--c-accent-hover-text: #766294;
	--c-theme-notebook: #C3B5D9;
	--c-theme-work-time: #B0C4DE;
	--c-theme-reflection: #E8C6C0;
	--c-theme-goals-habits: #C3B5D9;
	--c-theme-paper-digital: #E8E8E8;
	--f-heading: 'Zen Kaku Gothic New', sans-serif;
	--f-body: 'Noto Sans JP', sans-serif;
	--f-serif: Newsreader, serif;

	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-body);
}
.tenthly-page * { box-sizing: border-box; }
.tenthly-page a { text-decoration: none; color: inherit; }
.tenthly-page img { display: block; max-width: 100%; }
.tenthly-page ul { list-style: none; margin: 0; padding: 0; }

/* キーボード操作時のフォーカス表示（260827追加。既存の:hoverだけでは操作できないため） */
.tenthly-page a:focus-visible,
.tenthly-page button:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.tenthly-container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* ---------- ボタン ---------- */
.tenthly-btn-primary {
	display: inline-block;
	font: 500 14px/1 var(--f-heading);
	background: var(--c-accent);
	color: var(--c-text);
	border: 1px solid var(--c-accent);
	padding: 17px 30px;
	border-radius: 26px;
	text-align: center;
	transition: background .15s ease;
}
.tenthly-btn-primary:hover { background: var(--c-accent-hover-text); border-color: var(--c-accent-hover-text); color: #fff; }

.tenthly-btn-outline {
	display: inline-block;
	font: 500 14px/1 var(--f-heading);
	color: var(--c-text);
	border: 1px solid #D8D8D8;
	padding: 17px 28px;
	border-radius: 26px;
	transition: border-color .15s ease, background .15s ease;
}
.tenthly-btn-outline:hover { border-color: var(--c-accent); background: var(--c-bg-lavender-soft); }

/* テキスト＋丸矢印リンク */
.tenthly-arrow-link {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 13.5px/1 var(--f-heading);
	color: var(--c-text);
}
.tenthly-arrow-link:hover { color: var(--c-text-meta); }
.tenthly-arrow-circle {
	width: 30px; height: 30px; flex: none;
	border-radius: 50%;
	background: var(--c-accent);
	display: grid; place-items: center;
	font: 400 12px/1 var(--f-serif);
	color: var(--c-text);
}
.tenthly-arrow-circle.is-outline {
	background: #fff;
	border: 1px solid var(--c-border-chip);
}

/* カードリンク（写真・カテゴリ・タイトルを一体のクリック領域に） */
.tenthly-card-link { display: block; transition: background .15s ease, color .15s ease; }
.tenthly-card-link:hover { background: var(--c-bg-hover); color: var(--c-accent-hover-text); }

/* カテゴリタグ（色付き左罫線） */
.tenthly-cat-tag {
	display: block;
	font: 500 11px/1 var(--f-heading);
	border-left: 3px solid var(--c-border-chip);
	padding-left: 8px;
	margin: 0 0 10px;
}

/* ピル型チップ（悩みタグ・検索絞り込みのみで使用） */
.tenthly-chip {
	display: inline-block;
	font: 500 12.5px/1 var(--f-heading);
	background: var(--c-bg-hover);
	padding: 10px 14px;
	border-radius: 999px;
	transition: background .15s ease;
}
.tenthly-chip:hover { background: var(--c-accent); }

/* 検索フォーム（hidden属性で開閉。displayをinline styleに書くとhidden属性のUAスタイルに勝ってしまうためクラス側で持つ） */
.tenthly-search-form { display: flex; }
.tenthly-search-form[hidden] { display: none; }

/* プレースホルダー写真（実データ未接続を明示） */
.tenthly-photo-placeholder {
	width: 100%;
	box-sizing: border-box;
	background: #F5F6F7;
	background-image: repeating-linear-gradient(135deg, rgba(43,43,43,.035) 0 9px, transparent 9px 18px);
}

/* グリッド */
.tenthly-grid { display: grid; gap: 32px; }
.tenthly-grid.g-230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tenthly-grid.g-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tenthly-grid.g-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tenthly-grid.g-290 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.tenthly-grid.g-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tenthly-grid.g-330 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

/* 個別要素単位の出し分け（TOP等・単一DOMの中で一部要素だけ出し分ける用途・260820追加）
   .tenthly-desktop-view/.tenthly-mobile-view（丸ごと複製した塊の出し分け）とは別物。
   こちらは同じ内容を複製せず、要素の表示/非表示だけを切り替える。 */
@media (max-width: 1099.98px) {
	.tenthly-hide-mobile { display: none !important; }
}
@media (min-width: 1100px) {
	.tenthly-hide-desktop { display: none !important; }
}

/* ---------- デスクトップ／モバイル 出し分け（ヘッダー/フッター/記事詳細の目次配置等・丸ごと出し分けが必要な箇所のみ） ----------
   確定Designが定義した唯一の実測ブレークポイント(1100px)をそのまま使用。
   両ブロックともDOMには存在させ、CSSで表示を切り替える（JS非依存）。 */
/* コンポーネント側のdisplay指定（.tenthly-mheader等）より確実に優先させるため!importantを使用。
   ソース順に依存させると、後方で定義したコンポーネントのdisplay指定に上書きされるため。 */
.tenthly-mobile-view { display: none !important; }
.tenthly-desktop-view { display: block !important; }
@media (max-width: 1099.98px) {
	.tenthly-desktop-view { display: none !important; }
	.tenthly-mobile-view { display: block !important; }
}

/* ---------- 共通ヘッダー（デスクトップ／タブレット幅） ---------- */
.tenthly-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--c-border);
}
.tenthly-header-row {
	max-width: 1240px; margin: 0 auto; padding: 0 40px;
	height: 74px; display: flex; align-items: center; gap: 34px;
}
.tenthly-header-logo img { width: 100px; height: auto; }
.tenthly-header-nav { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; }
.tenthly-header-nav a {
	font: 500 14px/1 var(--f-heading);
	white-space: nowrap; display: flex; align-items: center; gap: 7px;
	padding: 4px 0; border-bottom: 2px solid transparent;
}
.tenthly-header-nav a:hover { border-color: var(--c-accent); }
.tenthly-header-nav .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
.tenthly-header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tenthly-search-btn, .tenthly-menu-btn {
	width: 36px; height: 36px; border: 1px solid var(--c-border); background: #fff;
	border-radius: 50%; cursor: pointer; display: grid; place-items: center;
	color: var(--c-text-meta); font: 400 13px/1 var(--f-serif);
}
.tenthly-menu-btn { border-radius: 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 38px; height: 38px; }
.tenthly-menu-btn span { width: 16px; height: 1.5px; background: var(--c-text); }
.tenthly-store-btn { white-space: nowrap; }

.tenthly-drawer { display: none; border-top: 1px solid var(--c-border); background: #fff; padding: 8px 40px 20px; }
.tenthly-drawer.is-open { display: block; }
.tenthly-drawer-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; }
.tenthly-drawer-inner a { font: 500 15px/1 var(--f-heading); padding: 16px 0; border-bottom: 1px solid var(--c-border-soft); display: flex; align-items: center; gap: 8px; }
.tenthly-header-lead { white-space: nowrap; font: 500 13px/1 var(--f-heading); color: var(--c-text); }

@media (min-width: 1100px) { .tenthly-header-nav-wrap { display: block; } .tenthly-menu-btn { display: none; } }
@media (max-width: 1099.98px) { .tenthly-header-nav-wrap { display: none; } }

/* ---------- 共通フッター ---------- */
.tenthly-footer { background: #F4F4F4; border-top: 1px solid var(--c-border); }
.tenthly-footer-main { max-width: 1240px; margin: 0 auto; padding: 60px 40px 36px; display: flex; flex-wrap: wrap; gap: 48px; }
.tenthly-footer-col-brand { flex: 1 1 300px; }
.tenthly-footer-col-brand img { width: 170px; height: auto; margin: 0 0 16px; }
.tenthly-footer-col-brand p { margin: 0; max-width: 26em; font: 400 13px/1.9 var(--f-body); color: var(--c-text-meta); }
.tenthly-footer-col { flex: 0 1 170px; }
.tenthly-footer-col p.head { margin: 0 0 14px; font: 400 11px/1 var(--f-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-meta); }
.tenthly-footer-col-links { display: flex; flex-direction: column; gap: 11px; }
.tenthly-footer-col-links a { font: 400 13px/1.6 var(--f-body); color: #4A4A4A; }
.tenthly-footer-bottom { max-width: 1240px; margin: 0 auto; padding: 22px 40px 40px; border-top: 1px solid #DCDCDC; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.tenthly-footer-bottom p { margin: 0; font: 400 11.5px/1.6 var(--f-serif); color: var(--c-text-meta); }
.tenthly-footer-bottom-links { display: flex; gap: 20px; }
.tenthly-footer-bottom-links a { font: 400 11.5px/1.6 var(--f-body); color: var(--c-text-meta); }

/* ---------- モバイル専用チロム（<1100px：TOP/記事詳細/一覧 共通） ---------- */
.tenthly-mheader {
	/* 260827修正：position:stickyだと自分が入っている.tenthly-mobile-view（<main>と別の短いラッパー）の
	   高さ分しか浮く余地が無く、実質固定されずページと一緒にスクロールで流れていた。
	   position:fixedに変更し、下記#tenthly-mainのpadding-topで本文側の食い込みを吸収する。 */
	position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100;
	height: 54px; padding: 0 18px; background: rgba(255,255,255,.97);
	backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: space-between;
	border-bottom: 1px solid var(--c-border-soft);
}
.tenthly-mheader img { width: 72px; height: auto; }
/* 260827追加：mheaderをposition:fixedにした影響で、開いた時にmheaderの下(54px)へ
   ずれて出ていたsearch-form/drawerが元の位置(headerの真下)からズレる。margin-topで補正。 */
#tenthly-msearch-form, #tenthly-mdrawer { margin-top: 54px; }
.tenthly-mheader-actions { display: flex; gap: 8px; align-items: center; }
.tenthly-mheader-actions button {
	width: 34px; height: 34px; border: 1px solid var(--c-border);
	background: #fff; cursor: pointer;
}
.tenthly-mheader-actions .search-btn { border-radius: 50%; display: grid; place-items: center; font: 400 12px/1 var(--f-serif); color: var(--c-text-meta); }
.tenthly-mheader-actions .menu-btn { border-radius: 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.tenthly-mheader-actions .menu-btn span { width: 15px; height: 1.5px; background: var(--c-text); }

.tenthly-mdrawer { display: none; background: #fff; border-bottom: 1px solid var(--c-border-soft); padding: 8px 18px 20px; }
.tenthly-mdrawer.is-open { display: block; }
.tenthly-mdrawer a { font: 500 15px/1 var(--f-heading); padding: 16px 0; border-bottom: 1px solid var(--c-border-soft); display: flex; align-items: center; gap: 8px; }

.tenthly-tabbar {
	/* 260827修正：mheaderと同じ理由でposition:stickyが機能していなかったためfixedに変更。
	   下の.tenthly-mobile-view footerのpadding-bottomで最終コンテンツの隠れを吸収する。 */
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
	background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
	border-top: 1px solid var(--c-border);
	display: grid; grid-template-columns: repeat(4,1fr);
	padding: 8px 6px 10px;
}

@media (max-width: 1099.98px) {
	#tenthly-main { padding-top: 54px; }
}
.tenthly-tabbar-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; }
.tenthly-tabbar-item .bar { width: 16px; height: 2px; background: var(--c-border); }
.tenthly-tabbar-item.is-active .bar { background: var(--c-accent); }
.tenthly-tabbar-item .label { font: 500 11px/1 var(--f-heading); color: var(--c-text-meta); }
.tenthly-tabbar-item.is-active .label { color: var(--c-text); }

/* ---------- 記事詳細サイドバー ---------- */
.tenthly-article-aside {
	flex: 0 1 260px; width: 260px; max-width: 100%;
	position: sticky; top: 96px;
	display: flex; flex-direction: column; gap: 38px;
}
.tenthly-toc-label { margin: 0 0 16px; font: 400 12px/1 var(--f-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-meta); }
.tenthly-toc-list { display: flex; flex-direction: column; gap: 14px; }
.tenthly-toc-list a { font: 400 13.5px/1.75 var(--f-body); color: var(--c-text-meta); padding-left: 16px; }
.tenthly-toc-list a.is-current { font-weight: 500; color: var(--c-text); border-left: 2px solid var(--c-accent); padding-left: 14px; }
.tenthly-toc-list a:hover { color: var(--c-text); }

/* ---------- 記事詳細：単一DOM＋Gridで出し分け（H1・本文の重複防止・260819修正） ---------- */
.tenthly-article-breadcrumb,
.tenthly-article-head,
.tenthly-article-hero,
.tenthly-article-points,
.tenthly-article-layout { max-width: 720px; margin-left: auto; margin-right: auto; }
.tenthly-article-breadcrumb { padding: 16px 18px 0; font-size: 11px; }
.tenthly-article-head { padding: 22px 18px 0; }
.tenthly-article-head-inner { max-width: none; }
.tenthly-article-h1 { margin: 0 0 20px; font: 700 26px/1.5 var(--f-heading); color: var(--c-text); text-wrap: pretty; }
.tenthly-article-lead { margin: 0 0 16px; font: 400 15px/1.95 var(--f-body); color: #2E2E2E; text-wrap: pretty; }
.tenthly-article-hero { padding: 0; max-width: none; }
.tenthly-article-hero-img { width: 100%; height: 230px; object-fit: cover; }
.tenthly-article-points { padding: 28px 18px 0; }
.tenthly-article-points-box { padding: 18px 20px; background: var(--c-bg-soft); }
.tenthly-article-points-label { margin: 0 0 12px; font: 700 13px/1 var(--f-heading); color: var(--c-text); }
.tenthly-article-points-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tenthly-article-points-list li { position: relative; padding-left: 22px; font: 400 14px/1.8 var(--f-body); color: var(--c-text-body-strong); }
.tenthly-article-points-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.tenthly-article-prevnext { display: flex; flex-direction: column; gap: 20px; padding: 40px 0 0; }
.tenthly-article-prevnext > span:empty { display: none; }
.tenthly-article-prevnext:not(:has(a)) { display: none; }

.tenthly-article-layout {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "toc" "body";
	gap: 28px;
	padding: 28px 18px 0;
}
.tenthly-article-layout .ta-toc { grid-area: toc; }
.tenthly-article-layout .ta-body { grid-area: body; font: 400 16px/2.0 var(--f-body); color: #2E2E2E; }

/* 記事本文タイポグラフィ（260828追加・監査指摘対応：.ta-bodyの子要素に一切CSSが当たっていなかった） */
.tenthly-article-layout .ta-body p { margin: 0 0 1.9em; }
.tenthly-article-layout .ta-body h2 { font: 700 22px/1.55 var(--f-heading); color: var(--c-text); margin: 48px 0 14px; }
.tenthly-article-layout .ta-body h3 { font: 700 17px/1.6 var(--f-heading); color: var(--c-text); margin: 2em 0 0.8em; }
.tenthly-article-layout .ta-body h2:first-child, .tenthly-article-layout .ta-body h3:first-child { margin-top: 0; }
.tenthly-article-layout .ta-body ul, .tenthly-article-layout .ta-body ol { margin: 0 0 1.9em; padding-left: 1.4em; }
.tenthly-article-layout .ta-body ul { list-style: disc; }
.tenthly-article-layout .ta-body ol { list-style: decimal; }
.tenthly-article-layout .ta-body li { margin: 0 0 .6em; }
.tenthly-article-layout .ta-body img { margin: 0 0 1.9em; }
.tenthly-article-layout .ta-body blockquote {
	margin: 0 0 1.9em; padding: 16px 18px;
	background: var(--c-bg-soft); border-left: 3px solid var(--c-accent);
}
.tenthly-article-layout .ta-body blockquote p:last-child { margin-bottom: 0; }
.tenthly-article-layout .ta-body a { color: var(--c-text); border-bottom: 1px solid var(--c-accent); }
.tenthly-article-layout .ta-body a:hover { color: var(--c-accent-hover-text); }
.tenthly-article-layout .ta-body > *:last-child { margin-bottom: 0; }

.tenthly-toc-box { }
.tenthly-toc-box { background: var(--c-bg-soft); padding: 20px; margin: 0 0 24px; }
.tenthly-toc-heading-label { margin: 0 0 14px; font: 700 12.5px/1 var(--f-heading); }

/* ---------- 記事本文直後CTA ---------- */
.tenthly-article-ctas {
	order: 5;
	width: 100%;
	max-width: 680px;
	margin: 44px auto 0;
}
.tenthly-article-cta-card.is-primary {
	display: grid;
	gap: 20px;
	padding: 24px;
	background: var(--c-bg-lavender-soft);
	border: 1px solid var(--c-border-chip);
	border-radius: 5px;
}
.tenthly-article-cta-media {
	height: 180px;
	overflow: hidden;
	border-radius: 4px;
}
.tenthly-article-cta-media img { width: 100%; height: 100%; object-fit: cover; }
.tenthly-article-cta-copy h2 { margin: 0 0 10px; font: 700 21px/1.55 var(--f-heading); color: var(--c-text); }
.tenthly-article-cta-subhead,
.tenthly-article-cta-teaser { margin: 0 0 18px; font: 400 14px/1.8 var(--f-body); color: var(--c-text-body); }
.tenthly-article-cta-card.is-primary .tenthly-btn-primary { min-height: 48px; }
.tenthly-article-cta-card.is-secondary {
	margin-top: 22px;
	padding: 18px 4px 0;
	border-top: 1px solid var(--c-border);
}
.tenthly-article-cta-card.is-secondary .tenthly-article-cta-teaser { margin-bottom: 10px; font-size: 13px; }
.tenthly-article-cta-secondary-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 500 13.5px/1.5 var(--f-heading);
	color: var(--c-text);
	border-bottom: 1px solid var(--c-border-chip);
}
.tenthly-article-cta-secondary-link:hover { color: var(--c-accent-hover-text); }
.tenthly-article-related-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.tenthly-article-related .tenthly-archive-card-title {
	font-size: 15px; color: #2E2E2E;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 1100px) {
	.tenthly-article-related-grid { grid-template-columns: repeat(3, 1fr); }
}

.tenthly-article-cta { border-top: 1px solid var(--c-border); margin-top: 56px; }
/* 260828：写真未定のため一時非表示。画像決定後に解除すること */
.tenthly-article-cta .tenthly-photo-placeholder { display: none; }
.tenthly-article-cta-inner { flex-direction: column; align-items: flex-start; }

@media (min-width: 1100px) {
	.tenthly-article-cta-card.is-primary { grid-template-columns: minmax(0, 240px) 1fr; align-items: center; padding: 28px; }
	.tenthly-article-cta-card.is-primary:not(.is-product) { grid-template-columns: 1fr; }
	.tenthly-article-breadcrumb,
	.tenthly-article-head,
	.tenthly-article-layout { max-width: 1240px; margin-left: auto; margin-right: auto; }
	.tenthly-article-breadcrumb { padding: 20px 40px 0; font-size: 12px; }
	.tenthly-article-head { padding: 38px 40px 0; }
	.tenthly-article-head-inner { max-width: 820px; }
	.tenthly-article-h1 { margin: 0 0 28px; font: 700 clamp(30px,3vw,42px)/1.5 var(--f-heading); }
	.tenthly-article-lead { margin: 0 0 22px; max-width: 640px; font: 400 17px/1.95 var(--f-body); }
	.tenthly-article-hero { padding: 38px 40px 0; max-width: 1240px; margin: 0 auto; }
	.tenthly-article-hero-img { height: 460px; }
	.tenthly-article-points { max-width: 820px; margin: 0 auto; padding: 32px 40px 0; }
	.tenthly-article-points-box { padding: 24px 28px; }
	.tenthly-article-prevnext { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 36px; max-width: 860px; }
	.tenthly-article-prevnext > a { flex: 1 1 280px; }

	.tenthly-article-layout {
		grid-template-columns: minmax(0, 680px) 260px;
		grid-template-areas: "body toc";
		column-gap: 80px;
		row-gap: 0;
		padding: 56px 40px 0;
		align-items: start;
		justify-content: center;
	}
	.tenthly-article-layout .ta-toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 38px; }
	.tenthly-article-layout .ta-body { font: 400 16.5px/2.05 var(--f-body); max-width: 680px; }
	.tenthly-article-layout .ta-body h2 { font-size: 24px; margin: 2.6em 0 1em; }
	.tenthly-article-layout .ta-body h3 { font-size: 19px; }
	.tenthly-toc-box { background: none; padding: 0; margin: 0; }
}

/* ---------- 悩みが見つからない・データ0件時の空状態 ---------- */
.tenthly-empty-note {
	font: 400 14px/1.9 var(--f-body);
	color: var(--c-text-meta);
	padding: 24px 0;
}

/* ================================================================
   TOP（単一DOM・260820修正）
   モバイルを基準値とし、min-width:1100pxでデスクトップ値へ切り替える。
   要素の増減はマークアップ側の .tenthly-hide-mobile / .tenthly-hide-desktop で対応し、
   ここでは主に寸法・配置（flex/grid切替）のみを扱う。
   ================================================================ */

.th-eyebrow { margin: 0 0 14px; font: 500 11.5px/1.5 var(--f-heading); color: var(--c-text-meta); display: flex; align-items: center; gap: 9px; }
.th-eyebrow-bar { width: 18px; height: 2px; background: var(--c-accent); flex: none; }
.th-eyebrow-heading { margin: 0; font: 400 11.5px/1 var(--f-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-meta); }
.th-h2 { margin: 0 0 12px; font: 700 22px/1.5 var(--f-heading); color: var(--c-text); }
.th-section-sub { margin: 0; font: 700 22px/1.3 var(--f-heading); color: var(--c-text); }
.th-section-lead { margin: 0 0 20px; font: 400 14px/1.9 var(--f-body); color: var(--c-text-body); }
.th-section-pad { padding: 30px 18px 10px; }
.th-section-pad-nobottom { padding: 30px 18px 0; }
.th-hero,
.th-section-pad,
.th-section-pad-nobottom,
.th-themes-bar,
.th-about-inner,
.th-store-inner { max-width: 720px; margin-left: auto; margin-right: auto; }
.th-section-head { margin: 0 0 18px; }
.th-section-head-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }

/* HERO */
.th-hero { margin: 0 auto; padding: 24px 18px 32px; }
.th-hero-h1 { margin: 0 0 16px; font: 700 28px/1.45 var(--f-heading); color: var(--c-text); }
.th-hero-br { display: inline; }
.th-hero-lead { margin: 0 0 20px; font: 400 14px/1.95 var(--f-body); color: var(--c-text-body); }
.th-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.th-hero-actions .tenthly-btn-primary { display: block; text-align: center; flex: 1 1 auto; }
.th-hero-features { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.th-hero-feature-item { display: flex; align-items: center; gap: 10px; font: 500 13px/1.6 var(--f-heading); color: var(--c-text-body); }
.th-hero-feature-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); flex: none; }
.th-hero-trust { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.th-hero-trust .tenthly-photo-placeholder { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.th-hero-trust p { margin: 0; font: 400 12.5px/1.85 var(--f-body); color: var(--c-text-body); }
.th-hero-trust-link { color: var(--c-text); border-bottom: 2px solid var(--c-accent); white-space: nowrap; }
.th-hero-media { display: flex; gap: 16px; align-items: stretch; }
.th-hero-media-main { flex: 1; }
.th-hero-media-main .tenthly-photo-placeholder { width: 100%; height: 210px; }
.th-hero-media-side { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.th-hero-media-small .tenthly-photo-placeholder { width: 100%; height: 100%; }

/* THEMES */
.th-themes-section { background: #fff; }
.th-themes-bar { padding: 20px 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.th-themes-label { font: 400 11.5px/1 var(--f-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-meta); flex-basis: 100%; }
.th-themes-link { font: 500 13.5px/1.4 var(--f-heading); display: flex; align-items: center; gap: 8px; }
.th-themes-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* PICK UP */
.th-pickup { display: flex; flex-direction: column; gap: 24px; }
.th-pickup-feature { display: block; padding: 12px; margin: -12px; }
.th-pickup-feature-img .tenthly-photo-placeholder { width: 100%; height: 220px; margin: 0 0 18px; }
.th-pickup-feature-title { margin: 10px 0 10px; font: 700 22px/1.5 var(--f-heading); max-width: 22em; }
.th-pickup-feature-excerpt { margin: 0; font: 400 14px/1.9 var(--f-body); color: var(--c-text-body); max-width: 38em; }
.th-pickup-small { display: flex; gap: 16px; align-items: center; padding: 10px; margin: -10px; }
.th-pickup-small-img { width: 90px; flex: none; }
.th-pickup-small-img .tenthly-photo-placeholder { width: 100%; height: 90px; }
.th-pickup-small-title { margin: 0; font: 700 15.5px/1.6 var(--f-heading); }

/* いま困っていることから探す */
.th-concern-section { background: var(--c-bg-hover); }
.th-concern-head { max-width: 38em; margin: 0 0 24px; }
.th-concern-lead { margin: 0; font: 400 14px/1.9 var(--f-body); color: var(--c-text-body); }
.th-concern-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 4px; transition: background .15s ease, color .15s ease; }
.th-concern-link:hover { background: var(--c-bg); }
.th-concern-link:hover .th-concern-text { color: var(--c-accent-hover-text); }
.th-concern-body { display: flex; flex-direction: column; gap: 4px; }
.th-concern-text { font: 700 16px/1.55 var(--f-heading); }
.th-concern-sub { font: 400 12.5px/1.6 var(--f-body); color: var(--c-text-meta); }

/* 記事メタ日付（260827追加。テーマ別の記事・新着記事） */
.th-meta-date { display: block; margin: 0 0 8px; font: 400 11.5px/1 var(--f-serif); letter-spacing: .02em; color: var(--c-text-meta); }

/* みんなの使い方 */
.th-usage-feature { display: block; margin: 0 0 24px; }
.th-usage-feature-img .tenthly-photo-placeholder { width: 100%; height: 200px; }
.th-usage-feature-title { margin: 16px 0 0; font: 700 20px/1.5 var(--f-heading); max-width: 24em; }
.th-usage-grid { padding-bottom: 8px; }
.th-usage-grid-img .tenthly-photo-placeholder { width: 100%; height: 200px; margin: 0 0 12px; }
.th-usage-grid-title { margin: 0; font: 700 17px/1.6 var(--f-heading); }
.th-usage-mobile-more { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px 32px; }

/* テーマ別の記事 */
.th-theme-section { background: #fff; border-bottom: 1px solid var(--c-border); }
.th-theme-feature-wrap { margin: 0 0 20px; }
.th-theme-feature { display: block; padding: 12px; margin: -12px 0 0 -12px; }
.th-theme-feature-img .tenthly-photo-placeholder { width: 100%; height: 180px; border-radius: 0 60px 0 0; margin: 0 0 16px; }
.th-theme-feature-cat { margin: 0 0 10px; font: 700 13px/1 var(--f-heading); border-left: 3px solid var(--c-border-chip); padding-left: 8px; }
.th-theme-feature-title { margin: 0 0 10px; font: 700 19px/1.55 var(--f-heading); max-width: 22em; }
.th-theme-feature-excerpt { margin: 0; font: 400 13.5px/1.9 var(--f-body); color: var(--c-text-body); max-width: 32em; }
.th-theme-feature-more { margin: 14px 0 0; display: inline-flex; }
.th-theme-rest-grid { display: flex; flex-direction: column; gap: 4px; }
.th-theme-rest-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; }
.th-theme-rest-cat { margin: 0; font: 500 14.5px/1.5 var(--f-heading); display: flex; align-items: center; flex: 1; border-left: 3px solid var(--c-border-chip); padding-left: 8px; }
.th-theme-rest-catname { white-space: nowrap; flex-shrink: 0; }
.th-theme-rest-title-mobile { font-weight: 700; font-size: 15px; }
.th-theme-rest-title { margin: 0; }
.th-theme-rest-arrow { flex: none; }

/* 新着記事 */
.th-new-grid { display: flex; flex-direction: column; gap: 2px; }
.th-new-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; }
.th-new-img .tenthly-photo-placeholder { width: 100%; height: 220px; }
.th-new-cat { margin: 0 0 10px; }
.th-new-title { margin: 0; font: 700 15px/1.7 var(--f-heading); flex: 1; }
.th-new-arrow { flex: none; }

/* ABOUT */
.th-about-section { background: var(--c-bg-lavender-soft); }
.th-about-inner { padding: 42px 18px 16px; }
.th-about-media { display: flex; gap: 12px; margin: 0 0 20px; }
.th-about-media-item { flex: 1; }
.th-about-media-item .tenthly-photo-placeholder { width: 100%; height: 190px; }
.th-about-list { display: flex; flex-direction: column; gap: 16px; margin: 0 0 24px; }
.th-about-list p { margin: 0; font: 400 14px/1.85 var(--f-body); }
.th-about-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ONLINE STORE */
.th-store-inner { padding: 16px 18px 48px; }
.th-store-media { margin: 0 0 24px; }
.th-store-media .tenthly-photo-placeholder { width: 100%; height: 220px; }
.th-store-body .tenthly-btn-primary { display: inline-block; }

@media (max-width: 1099.98px) {
	/* A-8: カテゴリ名とタイトルを縦積みにし、タイトルへ全幅を渡す */
	.th-theme-rest-cat { flex-wrap: wrap; align-items: center; }
	.th-theme-rest-title-mobile { flex-basis: 100%; margin-top: 8px; line-height: 1.65; }

	/* A-9: 1行1リンクの縦リスト3種の行間を36pxに統一（gapを0にしpaddingで確保） */
	.th-theme-rest-grid,
	.th-new-grid,
	.th-concern-section .tenthly-grid { gap: 0; }
	.th-theme-rest-link,
	.th-new-item,
	.th-concern-link { padding-top: 18px; padding-bottom: 18px; }
}

@media (min-width: 1100px) {
	.th-hero,
	.th-section-pad,
	.th-section-pad-nobottom,
	.th-themes-bar,
	.th-about-inner,
	.th-store-inner { max-width: 1240px; }

	.th-eyebrow { margin: 0 0 18px; font-size: 12.5px; }
	.th-eyebrow-bar { width: 22px; }
	.th-h2 { font: 700 clamp(27px,2.6vw,35px)/1.5 var(--f-heading); margin: 0 0 14px; }
	.th-section-sub { font: 700 clamp(27px,2.6vw,35px)/1.3 var(--f-heading); }
	.th-section-lead { font: 400 15px/1.9 var(--f-body); max-width: 36em; margin: 0; }
	.th-concern-lead { font-size: 15px; }
	.th-about-list p { font-size: 15px; }
	.th-theme-feature-excerpt { font-size: 14px; }
	.th-section-pad { padding: 84px 40px 88px; }
	.th-section-pad-nobottom { padding: 88px 40px 0; }
	.th-section-head { margin: 0 0 32px; }
	.th-section-head-cta { margin: 0 0 44px; }

	.th-hero { padding: 64px 40px 64px; display: flex; flex-wrap: wrap; gap: 60px; align-items: center; }
	.th-hero-text { flex: 1 1 400px; min-width: 300px; }
	.th-hero-h1 { font: 700 clamp(32px,3.3vw,46px)/1.42 var(--f-heading); margin: 0 0 24px; }
	.th-hero-lead { font: 400 15px/1.95 var(--f-body); max-width: 31em; margin: 0 0 36px; }
	.th-hero-actions { margin: 0 0 36px; }
	.th-hero-actions .tenthly-btn-primary, .th-hero-actions .tenthly-btn-outline { flex: none; }
	.th-hero-features { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 36px; }
	.th-hero-trust { margin: 0; }
	.th-hero-trust .tenthly-photo-placeholder { width: 64px; height: 64px; }
	.th-hero-media { flex: 1 1 500px; min-width: 300px; padding-top: 0; }
	.th-hero-media-main .tenthly-photo-placeholder { height: 430px; }
	.th-hero-media-main { flex: 1.4; }
	.th-hero-media-side { padding-top: 34px; }
	.th-hero-media-small .tenthly-photo-placeholder { height: 190px; }

	.th-themes-bar { padding: 20px 40px; gap: 10px 26px; }
	.th-themes-label { flex-basis: auto; margin-right: 6px; }
	.th-themes-link { font-size: 14px; }

	.th-pickup { flex-direction: row; flex-wrap: wrap; gap: 48px; }
	.th-pickup-feature { flex: 1 1 560px; min-width: 300px; padding: 16px; margin: -16px; }
	.th-pickup-feature-img .tenthly-photo-placeholder { height: 410px; margin: 0 0 24px; }
	.th-pickup-feature-title { font: 700 clamp(23px,2.1vw,29px)/1.55 var(--f-heading); }
	.th-pickup-small-wrap { flex: 1 1 300px; }
	.th-pickup .th-pickup-small { flex: 1 1 300px; min-width: 280px; }
	.th-pickup { }
	.th-pickup-small-img { width: 120px; }
	.th-pickup-small-img .tenthly-photo-placeholder { height: 120px; }
	.th-pickup-small-title { font-size: 17px; }

	.th-concern-section { background: var(--c-bg-lavender-soft); }
	.th-concern-head { margin: 0 0 44px; }
	.th-concern-link { padding: 6px 4px; }
	.th-concern-text { font: 700 20px/1.55 var(--f-heading); }
	.th-concern-sub { font-size: 13.5px; }

	.th-usage-feature-img .tenthly-photo-placeholder { height: 520px; }
	.th-usage-feature-title { font: 700 clamp(23px,2.2vw,31px)/1.55 var(--f-heading); max-width: 24em; margin: 28px 0 0; }
	.th-usage-grid { padding-bottom: 88px; }
	.th-usage-grid-img .tenthly-photo-placeholder { height: 300px; }
	.th-usage-grid-title { font-size: 20px; }
	.th-usage-mobile-more { display: none; }

	.th-theme-feature-wrap { margin: 0 0 56px; }
	.th-theme-feature { display: flex; flex-wrap: wrap; gap: 52px; align-items: center; padding: 16px; margin: -16px 0 20px -16px; }
	.th-theme-feature-img { flex: 1 1 480px; min-width: 280px; }
	.th-theme-feature-img .tenthly-photo-placeholder { height: 370px; border-radius: 0 90px 0 0; margin: 0; }
	.th-theme-feature-body { flex: 1 1 380px; min-width: 280px; }
	.th-theme-feature-cat { font-size: 15px; margin: 0 0 20px; }
	.th-theme-feature-title { font: 700 clamp(23px,2.2vw,30px)/1.55 var(--f-heading); margin: 0 0 18px; }
	.th-theme-rest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 52px; }
	.th-theme-rest-item { display: block; }
	.th-theme-rest-link { display: block; padding: 0; }
	.th-theme-rest-cat { margin: 0 0 18px; font-size: 15px; }
	.th-theme-rest-img { display: block; margin: 0 0 18px; }
	.th-theme-rest-img .tenthly-photo-placeholder { width: 100%; height: 320px; }
	.th-theme-rest-title { display: block; font: 700 21px/1.6 var(--f-heading); margin: 0 0 16px; }

	.th-new-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
	.th-new-item { display: block; padding: 12px; margin: -12px; }
	.th-new-img { display: block; margin: 0 0 18px; }
	.th-new-img .tenthly-photo-placeholder { height: 220px; }
	.th-new-cat { display: block; }
	.th-new-title { font: 700 16.5px/1.7 var(--f-heading); }

	.th-about-inner { padding: 88px 40px; display: flex; flex-wrap: wrap; gap: 60px; align-items: center; }
	.th-about-media { flex: 1 1 360px; min-width: 280px; gap: 18px; margin: 0; }
	.th-about-media-item .tenthly-photo-placeholder { height: 370px; }
	.th-about-media-item:first-child .tenthly-photo-placeholder { border-radius: 120px 120px 0 0; }
	.th-about-media-item:last-child { margin-top: 40px; }
	.th-about-body { flex: 1 1 420px; min-width: 300px; }
	.th-about-body .th-h2 { line-height: 1.55; margin: 0 0 20px; }
	.th-about-body .th-section-lead { max-width: 33em; margin: 0 0 32px; }

	.th-store-inner { padding: 88px 40px 100px; display: flex; flex-wrap: wrap; align-items: center; gap: 60px; }
	.th-store-media { flex: 1 1 320px; min-width: 260px; margin: 0; }
	.th-store-media .tenthly-photo-placeholder { height: 280px; border-radius: 0 0 0 100px; }
	.th-store-body { flex: 1 1 420px; min-width: 300px; }
	.th-store-body .th-h2 { line-height: 1.55; margin: 0 0 16px; }
	.th-store-body .th-section-lead { max-width: 30em; margin: 0 0 32px; }
}

/* ---------- カテゴリアーカイブ／検索結果 共通カード（category.php・search.php・260820追加） ---------- */
.tenthly-archive-card-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; margin: 0 0 14px; }
.tenthly-archive-card-title { margin: 0; font: 700 16px/1.6 var(--f-heading); text-wrap: pretty; }
.tenthly-archive-card-concerns { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }