@charset "UTF-8";
/*
 * tn-decor.css : とーんと♡日本橋 独自装飾システム（脱SWELL P4・2026-07-26・決定D）
 *
 *   SWELL記法(swl-マーカー・is-style-ボックス/リスト・capbox・faq・accordion・columns・
 *   fullWide・button・疑似swell-blocks)をDB置換した先の受け皿。新旧マッピングの正本は
 *   docs/DESWELL_P4_MAPPING_20260726.md。
 *
 *   デザイン原則(inputs/サイト制作_AI生成感排除マニュアル.md 厳守):
 *   - border-left装飾・英字eyebrow・上部アクセント線・装飾下線・::beforeの文字content 禁止
 *   - 色は 茜#ca3a1c・深茜#9e1a20・墨#1e1e1e・強調赤#c9412b ＋ 暖色の地のみ(多色カラフル禁止)
 *   - 種別の差は「地色・枠・質感」で表す(ラベル/アイコンの散らしはしない)
 *   - ::before/::afterは機能アイコン(チェック・×・シェブロン・番号)のみ=図形描画・文字なし
 */

/* ============================================================
   0. 共有トークン
   ============================================================ */
:root {
	--tnd-akane:   #ca3a1c;
	--tnd-deep:    #9e1a20;
	--tnd-ink:     #1e1e1e;
	--tnd-red:     #c9412b;                 /* 本文の強調赤(旧swl-deep-01 #ff7f7fの刷新) */
	--tnd-body:    #333;
	--tnd-line:    rgba(30, 30, 30, 0.14);
	--tnd-akaline: rgba(202, 58, 28, 0.26);
	--tnd-usuakane:#faf3ee;                 /* 薄茜の地 */
	--tnd-beige:   #f7f4f2;                 /* 暖ベージュの地 */
	--tnd-cream:   #fbf6ec;                 /* クリームの地 */
	--tnd-kiiro:   #f9f2d8;                 /* 淡黄(付箋・ハイライト背景) */
}

/* ============================================================
   1. マーカー(旧 swl-marker mark_yellow/orange/blue)
   ============================================================ */
.tn-marker { padding: 0 0.05em; }
.tn-marker--yellow { background: linear-gradient(transparent 62%, rgba(244, 212, 90, 0.55) 62%); }
.tn-marker--orange { background: linear-gradient(transparent 62%, rgba(240, 158, 84, 0.50) 62%); }
.tn-marker--blue   { background: linear-gradient(transparent 62%, rgba(126, 170, 210, 0.45) 62%); }

/* ============================================================
   2. インライン(旧 swl-inline-color / swl-bg-color / swl-fz u-fz-系)
      色・背景はspanのインラインstyleが実体。クラスは意味マーカーとして温存
   ============================================================ */
.tn-inline-color, .tn-inline-bg { border-radius: 1px; }
.tn-fz { line-height: 1.7; }
.tn-fz--xs { font-size: 0.8em; }
.tn-fz--s  { font-size: 0.9em; }
.tn-fz--l  { font-size: 1.15em; }
.tn-fz--xl { font-size: 1.35em; }

/* 色パレット(旧 has-swl-*)。文字色は刷新した強調赤/茜、背景は上品な淡地へ */
.has-tn-red-color   { color: var(--tnd-red); }
.has-tn-main-color  { color: var(--tnd-akane); }
.has-tn-blue-color  { color: #3e6ca8; }
.has-tn-cream-background-color     { background-color: var(--tnd-kiiro); }
.has-tn-pale-background-color      { background-color: #fdf1ee; }
.has-tn-paleblue-background-color  { background-color: #f2f7fb; }
.has-tn-palegreen-background-color { background-color: #f1f7ee; }
.has-tn-blue-background-color      { background-color: #eef4fb; }

/* ============================================================
   3. tn-box 装飾ボックス(旧 is-style-icon_* / big_icon_* / balloon / sticky ほか)
      種別は地色と枠の質感で出し分ける(全幅・本文が狭まらない)
   ============================================================ */
.tn-box {
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.1em 0;
	padding: 0.95em 1.2em;
	background: #fff;
	border: 1px solid var(--tnd-line);
	border-radius: 3px;
	line-height: 1.85;
	overflow-wrap: break-word;
}
.tn-box > .wp-block-group__inner-container { padding: 0; margin: 0; }
.tn-box > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.tn-box > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.tn-box > :first-child { margin-top: 0; }
.tn-box > :last-child { margin-bottom: 0; }
.tn-box strong { color: var(--tnd-red); }

/* 要点・結論(旧 big_icon_point / icon_point): 薄茜の地＋茜ヘアライン */
.tn-box--point { background: var(--tnd-usuakane); border-color: var(--tnd-akaline); }

/* メリット・推奨(旧 icon_good / big_icon_good / big_icon_check): クリーム地 */
.tn-box--good { background: var(--tnd-cream); }

/* メモ(旧 big_icon_memo / icon_pen / bg_grid / bg_stripe): 暖ベージュ地 */
.tn-box--memo { background: var(--tnd-beige); }

/* 補足・お知らせ(旧 icon_info / icon_announce): 白地＋ヘアライン枠 */
.tn-box--info { background: #fff; }

/* 注意(旧 icon_attention): 淡い茜ウォッシュ */
.tn-box--attention { background: rgba(202, 58, 28, 0.05); border-color: var(--tnd-akaline); }

/* 強い警告(旧 big_icon_caution): 茜ウォッシュ濃いめ＋深茜の枠 */
.tn-box--caution { background: rgba(202, 58, 28, 0.09); border-color: rgba(158, 26, 32, 0.42); }
.tn-box--caution strong { color: var(--tnd-deep); }

/* NG・避けるべき(旧 icon_bad / big_icon_batsu): 淡グレー地 */
.tn-box--batsu { background: #f4f4f4; border-color: rgba(30, 30, 30, 0.18); color: #444; }
.tn-box--batsu strong { color: var(--tnd-ink); }

/* 声・コメント風(旧 balloon_box / balloon_box2 / balloon): 生成りの地＋点線枠 */
.tn-box--voice { background: #f7f4ee; border: 1px dashed rgba(30, 30, 30, 0.28); }

/* 付箋・余談(旧 sticky_box / crease): 淡黄の地 */
.tn-box--aside { background: var(--tnd-kiiro); border-color: rgba(30, 30, 30, 0.10); }

/* 枠のみ(旧 border_sg / border_left / border_box / kakko_box): 白地＋ヘアライン */
.tn-box--line { background: #fff; }

/* ============================================================
   4. tn-list 装飾リスト(旧 check-list / check_list / good_list / bad_list /
      note-list / circle-list / num_circle / ol-circle / times-list)
   ============================================================ */
ul.tn-list, ol.tn-list { list-style: none; padding-left: 0.2em; }
.tn-list > li { position: relative; padding-left: 1.6em; margin: 0.4em 0; }
.tn-list > li::marker { content: none; }

/* チェック(茜の機能アイコン) */
.tn-list--check > li::before {
	content: '';
	position: absolute;
	left: 0.1em;
	top: 0.5em;
	width: 0.8em;
	height: 0.42em;
	border-left: 2px solid var(--tnd-akane);
	border-bottom: 2px solid var(--tnd-akane);
	transform: rotate(-45deg);
}

/* ×(避けること) */
.tn-list--batsu > li::before,
.tn-list--batsu > li::after {
	content: '';
	position: absolute;
	left: 0.45em;
	top: 0.32em;
	width: 2px;
	height: 0.85em;
	background: #9a9a9a;
}
.tn-list--batsu > li::before { transform: rotate(45deg); }
.tn-list--batsu > li::after { transform: rotate(-45deg); }

/* 番号(丸数字・機能ラベル) */
.tn-list--num { counter-reset: tn-num; }
.tn-list--num > li { padding-left: 1.9em; }
.tn-list--num > li::before {
	counter-increment: tn-num;
	content: counter(tn-num);
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.35em;
	height: 1.35em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tnd-akane);
	color: #fff;
	font-size: 0.82em;
	font-weight: 700;
	border-radius: 50%;
	line-height: 1;
}

/* 補足リスト(小さめ・控えめドット) */
.tn-list--note { font-size: 0.94em; color: #555; }
.tn-list--note > li { padding-left: 1.2em; }
.tn-list--note > li::before {
	content: '';
	position: absolute;
	left: 0.15em;
	top: 0.72em;
	width: 0.32em;
	height: 0.32em;
	border-radius: 50%;
	background: #b5b5b5;
}

/* 素直なドット(旧 circle-list=無装飾だった変種の受け) */
.tn-list--dot > li { padding-left: 1.2em; }
.tn-list--dot > li::before {
	content: '';
	position: absolute;
	left: 0.12em;
	top: 0.66em;
	width: 0.38em;
	height: 0.38em;
	border-radius: 50%;
	background: rgba(30, 30, 30, 0.45);
}

/* ============================================================
   5. tn-capbox キャプション付き枠(旧 swell-block-capbox cap_box / 疑似 c-capbox)
      既定=タイトルが枠線上に乗る和の囲み(旧 onborder_ttl 238/246件の踏襲)
   ============================================================ */
.tn-capbox {
	position: relative;
	margin: 2.1em 0 1.6em;
	padding: 1.5em 1.2em 1.1em;
	background: #fff;
	border: 1px solid rgba(30, 30, 30, 0.24);
	border-radius: 2px;
}
.tn-capbox__ttl {
	position: absolute;
	top: 0;
	left: 14px;
	transform: translateY(-55%);
	background: #fff;
	padding: 0 10px;
	font-weight: 700;
	font-size: 0.95em;
	color: var(--tnd-ink);
	line-height: 1.5;
	margin: 0;
	max-width: calc(100% - 28px);
}
.tn-capbox__ttl span { display: inline; }
.tn-capbox__body { margin: 0; }
.tn-capbox__body > :first-child { margin-top: 0; }
.tn-capbox__body > :last-child { margin-bottom: 0; }

/* タイトルを枠内に置く変種(旧 is-style-intext) */
.tn-capbox--intext { padding-top: 1.1em; }
.tn-capbox--intext .tn-capbox__ttl {
	position: static;
	transform: none;
	padding: 0 0 0.5em;
	display: block;
	border-bottom: 1px solid var(--tnd-line);
	margin-bottom: 0.8em;
	max-width: none;
}

/* ============================================================
   6. tn-faq(旧 loos/faq=swell-block-faq＋faq_q/faq_a・疑似 faq-item 系)
   ============================================================ */
.tn-faq { margin: 1.4em 0; padding: 0; }
dl.tn-faq__item, div.tn-faq__item {
	margin: 0 0 0.9em;
	padding: 1em 1.1em;
	background: #fff;
	border: 1px solid var(--tnd-line);
	border-radius: 3px;
}
.tn-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	margin: 0;
	padding: 0 0 0.7em;
	font-weight: 700;
	color: var(--tnd-ink);
	border-bottom: 1px dashed rgba(30, 30, 30, 0.18);
}
.tn-faq__a {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	margin: 0.7em 0 0;
	color: var(--tnd-body);
}
.tn-faq__a > p:first-child { margin-top: 0; }
.tn-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55em;
	height: 1.55em;
	border-radius: 50%;
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1;
	font-style: normal;
}
.tn-faq__icon--q { background: var(--tnd-akane); color: #fff; }
.tn-faq__icon--a { background: var(--tnd-ink); color: #fff; }
.tn-faq__title { min-width: 0; }
.tn-faq__body { min-width: 0; }
.tn-faq__body > :first-child { margin-top: 0; }
.tn-faq__body > :last-child { margin-bottom: 0; }

/* 記事8186の見出し型FAQ(旧 h3.faq-question) */
h3.tn-faq-h, .tn-faq-h {
	background: var(--tnd-usuakane);
	padding: 0.55em 0.85em;
	font-size: 1.02em;
	border-radius: 2px;
	margin: 1.8em 0 0.6em;
}

/* ============================================================
   7. tn-acc アコーディオン(旧 swell-block-accordion・details/summaryネイティブ)
   ============================================================ */
.tn-acc { margin: 1.4em 0; }
.tn-acc__item {
	margin: 0 0 0.6em;
	background: #fff;
	border: 1px solid var(--tnd-line);
	border-radius: 3px;
}
.tn-acc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
	padding: 0.85em 1.05em;
	cursor: pointer;
	font-weight: 700;
	color: var(--tnd-ink);
	list-style: none;
}
.tn-acc__title::-webkit-details-marker { display: none; }
.tn-acc__label { min-width: 0; }
.tn-acc__icon { flex: 0 0 auto; position: relative; width: 1em; height: 1em; }
.tn-acc__icon i { display: none; }
.tn-acc__icon::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 38%;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid #8a8a8a;
	border-bottom: 2px solid #8a8a8a;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform 0.2s ease;
}
.tn-acc__item[open] > .tn-acc__title .tn-acc__icon::before {
	top: 58%;
	transform: translate(-50%, -50%) rotate(-135deg);
}
.tn-acc__body { padding: 0 1.05em 1em; }
.tn-acc__body > :first-child { margin-top: 0; }
.tn-acc__body > :last-child { margin-bottom: 0; }

/* ============================================================
   8. tn-step 手順・タイムライン(旧 疑似 swell-blocks/step)
   ============================================================ */
.tn-step { margin: 1.4em 0; }
.tn-step__item { margin: 0 0 1.1em; }
.tn-step__head {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 700;
	color: var(--tnd-ink);
	margin: 0 0 0.35em;
}
.tn-step__number {
	flex: 0 0 auto;
	background: var(--tnd-ink);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	padding: 0.22em 0.6em;
	border-radius: 2px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
.tn-step__title { min-width: 0; }
.tn-step__body { margin: 0; color: var(--tnd-body); }
.tn-step__body > :first-child { margin-top: 0; }
.tn-step__body > :last-child { margin-bottom: 0; }

/* ============================================================
   9. tn-cols 2カラム(旧 swell-block-columns)
   ============================================================ */
.tn-cols { margin: 1.2em 0; }
.tn-cols__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.tn-cols__col { min-width: 0; margin: 0; }
.tn-cols__col > :first-child { margin-top: 0; }
@media screen and (max-width: 600px) {
	.tn-cols__inner { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   10. ボタン(旧 疑似 swell-button / loos/button 非more_btn)
   ============================================================ */
.tn-btn { text-align: center; margin: 1.5em 0; }
a.tn-btn__link {
	display: inline-block;
	min-width: min(100%, 320px);
	box-sizing: border-box;
	padding: 0.9em 2.2em;
	background: var(--tnd-akane);
	color: #fff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	transition: background 0.2s ease;
	line-height: 1.6;
}
a.tn-btn__link:hover { background: var(--tnd-deep); color: #fff; }
.tn-btn__text { display: inline; }

/* ============================================================
   11. tn-postlink 関連記事リンク(旧 loos/post-link の静的置換)
   ============================================================ */
.tn-postlink { margin: 1.3em 0; }
.tn-postlink__link {
	display: block;
	padding: 0.85em 1.1em;
	background: #fff;
	border: 1px solid var(--tnd-line);
	border-radius: 3px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.tn-postlink__link:hover { border-color: var(--tnd-akane); background: var(--tnd-usuakane); }
.tn-postlink__label {
	display: block;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--tnd-akane);
	letter-spacing: 0.04em;
	margin-bottom: 0.2em;
}
.tn-postlink__title { font-weight: 700; line-height: 1.6; }

/* ============================================================
   12. テーブル(旧 is-style-stripes/double・is-all-centered)
   ============================================================ */
.tn-table--stripes table tbody tr:nth-child(odd) { background: var(--tnd-beige); }
figure.tn-table--stripes tbody tr:nth-child(odd) { background: var(--tnd-beige); }
.tn-table--double table { border: 3px double rgba(30, 30, 30, 0.35); }
.tn-center td, .tn-center th { text-align: center; }

/* ============================================================
   13. 表示制御・余白ユーティリティ(旧 pc_only/sp_only・u-mb-系・pc/sp-py-系)
   ============================================================ */
@media screen and (max-width: 959px) { .tn-pc-only { display: none !important; } }
@media screen and (min-width: 960px) { .tn-sp-only { display: none !important; } }

.tn-mb-0  { margin-bottom: 0 !important; }
.tn-mb-5  { margin-bottom: 0.5em !important; }
.tn-mb-10 { margin-bottom: 1em !important; }
.tn-mb-15 { margin-bottom: 1.5em !important; }
.tn-mb-20 { margin-bottom: 2em !important; }
.tn-mb-30 { margin-bottom: 3em !important; }
.tn-mb--s { margin-bottom: 0.5em; }
.tn-mb--m { margin-bottom: 1em; }
.tn-mb--l { margin-bottom: 2em; }

/* 帯のpadding変種(旧 pc-py-N/sp-py-N。tn-band本体は site.css) */
.tn-band.tn-pypc-0 { padding-top: 0; padding-bottom: 0; }
.tn-band.tn-pypc-20 { padding-top: 20px; padding-bottom: 20px; }
.tn-band.tn-pypc-40 { padding-top: 40px; padding-bottom: 40px; }
@media screen and (max-width: 768px) {
	.tn-band.tn-pysp-0 { padding-top: 0; padding-bottom: 0; }
	.tn-band.tn-pysp-20 { padding-top: 20px; padding-bottom: 20px; }
}

/* 固定ページ本文内の帯を全幅ブレイクアウト(旧 fullWide alignfull) */
.entry-content .tn-band.alignfull,
.entry-content .tn-band {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* 100vwはスクロールバー幅ぶん実ビューポートより広く、横スクロールが出るため
   ブレイクアウト帯を含むページだけ横方向をclipする(実測: aboutで+30px) */
html:has(.entry-content .tn-band),
body:has(.entry-content .tn-band) { overflow-x: clip; }