@charset "utf-8";
/* /demerit.html（ワーホリのデメリット・後悔）の見た目。2026-10-28 マキ
   上位の記事を分解して決めた型：冒頭の写真＋題名／結論から（マーカー）／この記事でわかること／章ごとの扉（写真＋番号）／見出し行に色の付いた表
   章の扉は「写真の帯＋大きな番号＋英語の小見出し＋日本語の見出し」の1つの決まりでそろえる。色は紺と赤の2色＋マーカーの黄 */

.dm {
	--dm-navy: #1b3a5c;
	--dm-navy-d: #12283f;
	--dm-red: #c8392b;
	--dm-ink: #23272b;
	--dm-mut: #5d6670;
	--dm-line: #dfe3e8;
	--dm-paper: #f6f4ef;
	--dm-mark: #ffe25c;
	color: var(--dm-ink);
	font-size: 16px;
	line-height: 1.9;
	padding: 0 0 40px;
}
.dm p { margin: 0 0 1em; }
/* サイト共通の css が #maincontent の中の p・li・td の大きさを個別に決めているので、ここでそろえる */
#maincontent .dm p, #maincontent .dm li, #maincontent .dm td, #maincontent .dm th { font-size: 16px; line-height: 1.9; }
#maincontent .dm .dm-lead { font-size: 17px; }
#maincontent .dm .dm-src, #maincontent .dm .dm-scroll { font-size: 13px; line-height: 1.7; }
#maincontent .dm .dm-tbl td, #maincontent .dm .dm-tbl th { font-size: 15px; line-height: 1.6; }
.dm a { color: var(--dm-navy); }
.dm strong { font-weight: 700; }
.dm .dm-mk { font-weight: 700; background: linear-gradient(transparent 60%, var(--dm-mark) 60%); }

/* 冒頭 */
/* PC ではサイト共通の css で幅が0になる（10/28 確認）ので、幅と回り込みを明示する */
.dm-hero { width: 100%; float: none; clear: both; box-sizing: border-box; }
.dm-hero { position: relative; margin: 0 0 28px; border-radius: 6px; overflow: hidden; background: var(--dm-navy-d); }
.dm-hero img { display: block; width: 100%; height: 360px; object-fit: cover; opacity: .92; }
.dm-hero-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 28px 24px; background: linear-gradient(transparent, rgba(10, 22, 36, .88)); color: #fff; }
.dm-hero-kicker { display: inline-block; margin: 0 0 8px; padding: 2px 10px; background: var(--dm-red); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.dm-hero h2 { margin: 0; font-size: 30px; line-height: 1.4; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.dm-hero h2 span { display: block; font-size: 18px; font-weight: 700; margin-top: 6px; color: #e8edf3; }

.dm-lead { font-size: 17px; }

/* サイト共通の h2・h3 の飾り（背景・高さ・余白）を消す */
#maincontent .dm h2, #maincontent .dm h3 { height: auto; min-height: 0; background: none; border: 0; padding: 0; box-shadow: none; float: none; width: auto; }
#maincontent .dm .dm-hero h2 { font-size: 30px; line-height: 1.4; color: #fff; }
#maincontent .dm .dm-door h2 { font-size: 24px; line-height: 1.4; color: #fff; margin: 2px 0 0; }
#maincontent .dm .dm-item-h h3 { font-size: 21px; line-height: 1.45; color: var(--dm-navy); }
#maincontent .dm .dm-sub { padding-left: 12px; border-left: 5px solid var(--dm-navy); font-size: 19px; color: var(--dm-navy); margin: 28px 0 8px; }
#maincontent .dm .dm-faq h3 { padding-left: 30px; font-size: 17px; color: var(--dm-navy); margin: 24px 0 6px; }

/* この記事でわかること */
.dm-learn { margin: 24px 0; border: 2px solid var(--dm-navy); border-radius: 6px; overflow: hidden; }
.dm-learn-h { margin: 0 !important; padding: 8px 16px; background: var(--dm-navy); color: #fff; font-weight: 700; letter-spacing: .04em; }
.dm-learn ul { margin: 0; padding: 12px 18px 14px; list-style: none; }
.dm-learn li { position: relative; padding: 5px 0 5px 28px; border-bottom: 1px dashed var(--dm-line); }
.dm-learn li:last-child { border-bottom: 0; }
.dm-learn li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 11px; height: 6px; border-left: 3px solid var(--dm-red); border-bottom: 3px solid var(--dm-red); transform: rotate(-45deg); }

/* 目次：章の扉と同じ番号（01〜05）で並べ、押せる行にする。02 の下に10個のデメリットへの近道 */
.dm-toc { margin: 0 0 40px; border-top: 3px solid var(--dm-navy); }
#maincontent .dm .dm-toc-h { margin: 0; padding: 10px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--dm-mut); }
.dm-toc-list { margin: 0; padding: 0; list-style: none; }
.dm-toc-list > li { border-bottom: 1px solid var(--dm-line); }
.dm-toc-list > li > a { display: flex; align-items: center; gap: 16px; padding: 12px 8px; text-decoration: none; color: var(--dm-ink); transition: background .2s, padding-left .2s; }
.dm-toc-list > li > a:hover { background: var(--dm-paper); padding-left: 14px; }
.dm-toc-list > li > a::after { content: "↓"; margin-left: auto; color: var(--dm-red); font-weight: 700; }
.dm-toc-no { flex: none; width: 44px; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 700; line-height: 1; color: var(--dm-navy); }
#maincontent .dm .dm-toc-t { font-size: 16px; font-weight: 700; }
.dm-toc-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 14px 68px; padding: 0; list-style: none; }
#maincontent .dm .dm-toc-chips li { font-size: 13px; line-height: 1.4; }
.dm-toc-chips a { display: flex; align-items: center; gap: 6px; height: 100%; padding: 7px 8px; background: var(--dm-paper); border-radius: 4px; text-decoration: none; color: var(--dm-ink); transition: background .2s, color .2s; }
.dm-toc-chips a:hover { background: var(--dm-navy); color: #fff; }
.dm-toc-chips i { font-style: normal; font-family: Georgia, serif; font-weight: 700; color: var(--dm-red); }
.dm-toc-chips a:hover i { color: var(--dm-mark); }
@media (max-width: 640px) {
	.dm-toc-list > li > a { gap: 12px; padding: 11px 4px; }
	.dm-toc-no { width: 34px; font-size: 22px; }
	#maincontent .dm .dm-toc-t { font-size: 15px; }
	.dm-toc-chips { grid-template-columns: repeat(2, 1fr); margin-left: 0; }
}

/* 章の扉：写真の帯＋番号＋英語＋見出し（全章この形） */
.dm-door { position: relative; margin: 56px 0 24px; border-radius: 6px; overflow: hidden; background: var(--dm-navy-d); min-height: 170px; display: flex; align-items: flex-end; }
.dm-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .6s ease; }
.dm-door:hover img { transform: scale(1.03); }
.dm-door-txt { position: relative; padding: 20px 26px; color: #fff; display: flex; align-items: flex-end; gap: 18px; }
.dm-door-no { font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: .9; font-weight: 700; color: #fff; }
.dm-door-en { display: block; font-size: 12px; letter-spacing: .2em; color: var(--dm-mark); font-weight: 700; }
.dm-door h2 { margin: 2px 0 0; font-size: 24px; line-height: 1.4; color: #fff; }

/* 表（見出し行に色） */
.dm-tbl-wrap { margin: 16px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dm-tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; background: #fff; }
.dm-tbl th, .dm-tbl td { padding: 10px 12px; border: 1px solid var(--dm-line); text-align: left; vertical-align: top; }
.dm-tbl thead th { background: var(--dm-navy); color: #fff; font-weight: 700; border-color: var(--dm-navy); }
.dm-tbl tbody th { background: var(--dm-paper); font-weight: 700; white-space: nowrap; }
.dm-tbl tbody tr:nth-child(even) td { background: #fafbfc; }
.dm-tbl a { font-weight: 700; }
.dm-cmp { min-width: 680px; }
.dm-cmp tbody th { position: sticky; left: 0; z-index: 1; }
.dm-judge td:nth-child(2) { font-weight: 700; color: var(--dm-navy); }
.dm-judge th:nth-child(1), .dm-judge td:nth-child(1) { width: 28%; }
.dm-judge th:nth-child(2), .dm-judge td:nth-child(2) { width: 26%; }
.dm-scroll { display: none; margin: 0 0 4px; font-size: 13px; color: var(--dm-mut); }
.dm-src { font-size: 13px; line-height: 1.7; color: var(--dm-mut); }

/* デメリット1つずつ */
.dm-item { margin: 0 0 40px; }
.dm-item-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--dm-navy); }
.dm-item-no { font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 700; line-height: 1; color: var(--dm-red); }
.dm-item-h h3 { margin: 0; font-size: 21px; line-height: 1.45; color: var(--dm-navy); }
.dm-prep { margin: 14px 0 0; padding: 14px 18px; background: var(--dm-paper); border-left: 5px solid var(--dm-red); border-radius: 0 6px 6px 0; }
.dm-prep b { display: block; margin-bottom: 2px; color: var(--dm-red); font-size: 14px; letter-spacing: .06em; }
.dm-prep p { margin: 0; }

.dm-sub { margin: 28px 0 8px; padding-left: 12px; border-left: 5px solid var(--dm-navy); font-size: 19px; color: var(--dm-navy); }

/* よくある質問 */
.dm-faq h3 { margin: 24px 0 6px; padding-left: 30px; text-indent: -30px; font-size: 17px; color: var(--dm-navy); }
.dm-faq h3::before { content: "Q"; display: inline-block; width: 30px; text-indent: 0; font-family: Georgia, serif; font-size: 20px; color: var(--dm-red); }
.dm-faq p { padding-left: 30px; }

/* 相談の案内 */
.dm-cta { margin: 48px 0 0; padding: 30px 24px; background: var(--dm-navy); color: #fff; border-radius: 6px; text-align: center; }
.dm-cta p { margin: 0 0 8px; }
.dm-cta-lead { font-size: 21px; font-weight: 700; line-height: 1.5; }
.dm-cta-lead span { display: inline-block; }
.dm-btn { display: inline-block; margin-top: 14px; padding: 15px 26px; background: var(--dm-mark); color: var(--dm-ink) !important; font-weight: 700; text-decoration: none; border-radius: 999px; box-shadow: 0 4px 0 #c9a925; transition: transform .15s, box-shadow .15s; }
.dm-btn:hover { transform: translateY(1px); box-shadow: 0 3px 0 #c9a925; }
.dm-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9a925; }
.dm-cta-sub { margin-top: 14px !important; font-size: 14px; }
.dm-cta-sub a { color: #fff; }

/* 10/28 点検で直した崩れ：相談の案内が左寄せになる・ボタンの文字が1語だけ折り返す・目次の小項目が語の途中で折り返す */
#maincontent .dm .dm-cta, #maincontent .dm .dm-cta p { text-align: center; }
#maincontent .dm .dm-cta-lead { font-size: 21px; }
.dm-btn { max-width: 100%; box-sizing: border-box; text-wrap: balance; }

/* スマホ */
@media (max-width: 640px) {
	.dm { font-size: 15px; }
	.dm-hero img { height: 240px; }
	.dm-hero-txt { padding: 56px 16px 16px; }
	.dm-hero h2 { font-size: 22px; }
	.dm-hero h2 span { font-size: 15px; }
	.dm-door { min-height: 130px; margin-top: 44px; }
	.dm-door-txt { padding: 14px 16px; gap: 12px; }
	.dm-door-no { font-size: 46px; }
	.dm-door h2 { font-size: 18px; text-wrap: balance; }
	#maincontent .dm .dm-hero h2 { font-size: 22px; }
	#maincontent .dm .dm-cta-lead { font-size: 18px; }
	.dm-btn { padding: 14px 18px; font-size: 15px; }
	#maincontent .dm .dm-door h2 { font-size: 18px; }
	#maincontent .dm .dm-item-h h3 { font-size: 18px; }
	#maincontent .dm p, #maincontent .dm li { font-size: 15px; }
	#maincontent .dm .dm-lead { font-size: 16px; }
	#maincontent .dm .dm-tbl td, #maincontent .dm .dm-tbl th { font-size: 14px; }
	.dm-item-h h3 { font-size: 18px; }
	.dm-item-no { font-size: 28px; }
	.dm-scroll { display: block; }
	/* 比較表：左の列を細くして、スマホでも2か国目まで見えるように */
	.dm-cmp { min-width: 540px; }
	.dm-cmp th, .dm-cmp td { padding: 8px 8px; }
	.dm-cmp tbody th { white-space: normal; width: 76px; }
	/* 早見表はスマホでは1行ずつのカードに */
	.dm-quick thead { display: none; }
	.dm-quick tr { display: block; margin-bottom: 10px; border: 1px solid var(--dm-line); border-top: 4px solid var(--dm-navy); }
	.dm-quick td { display: block; border: 0; padding: 4px 12px; }
	.dm-quick td:first-child { padding-top: 10px; font-size: 16px; }
	.dm-quick td:nth-child(2)::before { content: "現地で困ること："; color: var(--dm-mut); font-weight: 700; }
	.dm-quick td:nth-child(3) { padding-bottom: 10px; }
	.dm-quick td:nth-child(3)::before { content: "出発前に："; color: var(--dm-red); font-weight: 700; }
	.dm-quick tbody tr:nth-child(even) td { background: #fff; }
}

/* ボタンと下のリンクは、語の切れ目でだけ折り返す */
.dm-btn span, .dm-cta-sub a { display: inline-block; }
@media (max-width: 640px) { .dm-cta-sub .dm-sep { display: none; } .dm-cta-sub a { display: block; margin: 4px 0; } }

/* 国選びの目安：スマホでは1行ずつのカードに */
@media (max-width: 640px) {
	.dm-judge thead { display: none; }
	.dm-judge tr { display: block; margin-bottom: 10px; border: 1px solid var(--dm-line); border-top: 4px solid var(--dm-red); }
	.dm-judge td { display: block; border: 0; padding: 4px 12px; white-space: normal !important; }
	.dm-judge td:first-child { padding-top: 10px; font-weight: 700; }
	.dm-judge td:nth-child(2)::before { content: "合う国："; color: var(--dm-red); }
	.dm-judge td:nth-child(3) { padding-bottom: 10px; color: var(--dm-mut); }
	.dm-judge tbody tr:nth-child(even) td { background: #fff; }
}
.dm-nb { display: inline-block; }

/* 目次の近道：サイト共通の li の余白・背景を消し、1つずつ枠で分ける。PC は横幅に合わせて並べる */
#maincontent .dm .dm-toc-chips li { margin: 0; padding: 0; background: none; list-style: none; }
#maincontent .dm .dm-toc-chips a { background: #fff; border: 1px solid var(--dm-line); white-space: nowrap; }
#maincontent .dm .dm-toc-chips a:hover { background: var(--dm-navy); border-color: var(--dm-navy); }
.dm-toc-chips { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#maincontent .dm .dm-toc-list > li > a, #maincontent .dm .dm-toc-list > li > a:visited { color: var(--dm-ink); }
#maincontent .dm .dm-toc-list > li > a::after { color: var(--dm-red); }
@media (max-width: 640px) { .dm-toc-chips { grid-template-columns: repeat(2, 1fr); } }
#maincontent .dm .dm-toc-chips { display: grid; gap: 8px; row-gap: 8px; }
#maincontent .dm .dm-toc-chips a { box-sizing: border-box; height: auto; }
#maincontent .dm .dm-toc-chips { grid-template-columns: repeat(2, 1fr); }
#maincontent .dm .dm-toc-list > li > a:visited::after, #maincontent .dm .dm-toc-list > li > a:link::after { color: #c8392b; }
@media (max-width: 640px) {
	/* カードにしたときは PC 用の列の幅を外す */
	.dm-judge th, .dm-judge td { width: auto !important; }
	/* 3か国の比較表：国名を語の途中で切らない */
	.dm-cmp { min-width: 500px; }
	#maincontent .dm .dm-cmp thead th { font-size: 13px; word-break: keep-all; }
}

/* 3か国の比較表（PC）：左の列を細くし、国の列を同じ幅にそろえて、国名を1行で出す */
.dm-cmp { table-layout: fixed; }
.dm-cmp thead th:first-child { width: 22%; }
#maincontent .dm .dm-cmp thead th { white-space: nowrap; }
#maincontent .dm .dm-cmp tbody th { white-space: normal; }
@media (max-width: 640px) {
	.dm-cmp thead th:first-child { width: 84px; }
}
#maincontent .dm .dm-note { font-size: 12px; color: var(--dm-mut); }
.dm-cmp thead th:first-child { width: 17%; }
@media (max-width: 640px) { .dm-cmp thead th:first-child { width: 84px; } }
@media (max-width: 640px) { .dm-cmp { min-width: 600px; } .dm-cmp thead th:first-child { width: 96px; } }