/* 画像の縦横比を保ったまま縮める（width/height 属性はレイアウトのずれ防止用） */
img { max-width: 100%; height: auto; }
/* ほかのツールにも共通で使う、白地のサイト枠と基本部品。 */
:root { color-scheme: light; --ink: #222; --muted: #606060; --line: #ddd; --accent: #1a5fb4; --good: #27633c; --warn: #805b0a; --bad: #ad2626; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.8 "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; }
a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-width { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); padding: 20px 0 14px; }
.site-name { font-size: 1.4rem; font-weight: 700; color: var(--ink); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-header nav { margin-top: 10px; font-size: .875rem; }
.breadcrumb { display: block; padding: 18px 0; font-size: .8rem; color: var(--muted); }
.site-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
main, aside { min-width: 0; }
.page-header { margin-bottom: 28px; }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.55; margin: 4px 0 16px; }
h2 { font-size: 1.25rem; line-height: 1.6; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 0 0 18px; }
h3 { font-size: 1.05rem; border-left: 2px solid var(--line); padding-left: 10px; margin: 28px 0 12px; }
p { margin: 12px 0; }
section { margin-bottom: 36px; }
small, .hint, .count { font-size: .875rem; color: var(--muted); }
ul { padding-left: 1.4em; }
li { margin: 8px 0; }
label { display: block; font-weight: 600; margin: 10px 0 6px; }
input, select, button { font: inherit; min-height: 44px; max-width: 100%; border-radius: 3px; }
input, select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #999; color: var(--ink); background: #fff; }
button { cursor: pointer; padding: 8px 16px; border: 1px solid var(--accent); color: #fff; background: var(--accent); }
button.secondary { background: #fff; color: var(--accent); }
button:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 3px; padding: 12px 16px 16px; margin: 22px 0 16px; }
legend { font-weight: 700; padding: 0 6px; }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.row-head label { margin: 0; }
.row-head button { font-size: .875rem; }
.inputs { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
[hidden] { display: none !important; }
details { border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; margin: 22px 0; }
summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .875rem; }
.ad { width: 336px; max-width: 100%; text-align: center; color: var(--muted); font-size: .75rem; margin: 36px auto; }
.ad-placeholder { width: 100%; height: 280px; background: #f3f3f3; border: 1px solid var(--line); margin-top: 6px; }
table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: .9375rem; }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
thead th { background: #f5f5f5; }
tbody th { font-weight: 400; }
caption { text-align: left; color: var(--muted); font-size: .875rem; margin-bottom: 6px; }
.faq dt { font-weight: 700; margin: 22px 0 6px; }
.faq dd { margin: 0; }
.explanation h2:not(:first-child) { margin-top: 36px; }
.sidebar { display: none; }
.site-footer { border-top: 1px solid var(--line); padding: 24px 0 32px; margin-top: 24px; font-size: .8rem; color: var(--muted); }
.skip-link { position: absolute; left: 12px; top: -100px; background: #fff; padding: 8px; }
.skip-link:focus { top: 8px; }
/* チェッカーの結果表示。背景色に頼らず、文章とラベルで区別する。 */
.result { border: 1px solid var(--line); padding: 20px; border-radius: 3px; }
.result.allowed { border-color: var(--good); }
.result.conditional { border-color: var(--warn); }
.result.blocked { border-color: var(--bad); }
.status-label { border: 1px solid currentColor; border-radius: 2px; font-size: .8rem; padding: 2px 8px; }
#conclusion { font-size: 1.5rem; font-weight: 700; line-height: 1.6; margin: 10px 0; }
.allowed #conclusion, .allowed .status-label { color: var(--good); }
.conditional #conclusion, .conditional .status-label, .warning { color: var(--warn); }
.blocked #conclusion, .blocked .status-label, .error, noscript { color: var(--bad); }
.item-result { border-top: 1px solid var(--line); padding: 14px 0 0; margin-top: 16px; }
.warning, .error { font-weight: 600; }
@media (min-width: 1024px) {
  .site-layout { grid-template-columns: minmax(0, 720px) 300px; gap: 60px; }
  .sidebar { display: block; border-left: 1px solid var(--line); padding-left: 0; }
  .sidebar section { padding-left: 20px; }
  .sidebar .ad { width: 300px; margin-top: 8px; }
  .sidebar .ad-placeholder { height: 250px; }
  .sidebar h2 { font-size: 1.05rem; }
  .sidebar li { font-size: .875rem; }
}
@media (max-width: 480px) {
  .site-width { width: calc(100% - 32px); }
  nav { gap: 8px 16px; }
  fieldset, details { padding: 12px; }
  .result { padding: 16px; }
  th, td { padding: 8px; }
}
.photo{margin:16px 0}.photo img{display:block;max-width:320px;width:100%;height:auto;border:1px solid #ddd}.photo figcaption{font-size:.875rem;color:#555;margin-top:6px}
.photo.wide img{max-width:480px}

/* サイト共通ページ。既存チェッカーの白地の見た目を引き継ぐ。 */
.site-header { border-bottom-color: #F29B38; }
.site-name { display: inline-flex; align-items: center; gap: 10px; }
.site-name img, .mascot { image-rendering: pixelated; }
.content-page { padding-block: 32px; min-height: 55vh; overflow-wrap: anywhere; }
.content-page > section, .content-page > p, .profile { max-width: 760px; }
.intro { display: flex; align-items: center; gap: 40px; margin-bottom: 40px; max-width: 900px; }
.intro > div { flex: 1; min-width: 0; }
.mascot { max-width: 100%; height: auto; flex-shrink: 0; }
.tool-list { list-style: none; padding: 0; max-width: 760px; }
.tool-list > li { padding: 18px 0; margin: 0; border-bottom: 1px solid var(--line); }
.tool-list p { margin: 4px 0; }
.tool-list a { font-weight: 700; }
.profile { margin-bottom: 36px; }
.profile dt { font-weight: 700; }
.profile dd { margin: 0 0 12px; }
blockquote { margin-inline: 0; padding-left: 16px; border-left: 2px solid var(--line); }
th, td { overflow-wrap: anywhere; }
@media (max-width: 600px) { .intro { flex-direction: column-reverse; align-items: flex-start; gap: 20px; } .intro .mascot { width: 112px; height: 112px; } }

/* 広告の審査が通るまでは広告枠を隠す（公開中の空枠を見せないため）。AdSense 導入時にこの行を消す */
.ad { display: none; }

/* 共通のドット飾りと記事部品。ぼかしのない4px角を繰り返す。 */
:root { --cream: #FFF1D0; --orange: #F29B38; --brand-ink: #2B2622; }
.site-header { position: relative; border-bottom: 0; padding-bottom: 22px; overflow: hidden; color: var(--brand-ink); }
.site-header::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: var(--cream); }
.site-header::after { content: ""; position: absolute; bottom: 1px; left: 8px; width: 4px; height: 4px; background: var(--orange); box-shadow: 16px 0 #F29B38, 32px 0 #F29B38, 48px 0 #F29B38, 64px 0 #F29B38, 80px 0 #F29B38, 96px 0 #F29B38, 112px 0 #F29B38, 128px 0 #F29B38, 144px 0 #F29B38, 160px 0 #F29B38, 176px 0 #F29B38, 192px 0 #F29B38, 208px 0 #F29B38, 224px 0 #F29B38, 240px 0 #F29B38, 256px 0 #F29B38, 272px 0 #F29B38, 288px 0 #F29B38, 304px 0 #F29B38, 320px 0 #F29B38, 336px 0 #F29B38, 352px 0 #F29B38, 368px 0 #F29B38, 384px 0 #F29B38, 400px 0 #F29B38, 416px 0 #F29B38, 432px 0 #F29B38, 448px 0 #F29B38, 464px 0 #F29B38, 480px 0 #F29B38, 496px 0 #F29B38, 512px 0 #F29B38, 528px 0 #F29B38, 544px 0 #F29B38, 560px 0 #F29B38, 576px 0 #F29B38, 592px 0 #F29B38, 608px 0 #F29B38, 624px 0 #F29B38, 640px 0 #F29B38, 656px 0 #F29B38, 672px 0 #F29B38, 688px 0 #F29B38, 704px 0 #F29B38, 720px 0 #F29B38, 736px 0 #F29B38, 752px 0 #F29B38, 768px 0 #F29B38, 784px 0 #F29B38, 800px 0 #F29B38, 816px 0 #F29B38, 832px 0 #F29B38, 848px 0 #F29B38, 864px 0 #F29B38, 880px 0 #F29B38, 896px 0 #F29B38, 912px 0 #F29B38, 928px 0 #F29B38, 944px 0 #F29B38, 960px 0 #F29B38, 976px 0 #F29B38, 992px 0 #F29B38, 1008px 0 #F29B38, 1024px 0 #F29B38, 1040px 0 #F29B38, 1056px 0 #F29B38, 1072px 0 #F29B38, 1088px 0 #F29B38, 1104px 0 #F29B38, 1120px 0 #F29B38, 1136px 0 #F29B38, 1152px 0 #F29B38, 1168px 0 #F29B38, 1184px 0 #F29B38, 1200px 0 #F29B38, 1216px 0 #F29B38, 1232px 0 #F29B38, 1248px 0 #F29B38, 1264px 0 #F29B38, 1280px 0 #F29B38, 1296px 0 #F29B38, 1312px 0 #F29B38, 1328px 0 #F29B38, 1344px 0 #F29B38, 1360px 0 #F29B38, 1376px 0 #F29B38, 1392px 0 #F29B38, 1408px 0 #F29B38, 1424px 0 #F29B38, 1440px 0 #F29B38, 1456px 0 #F29B38, 1472px 0 #F29B38, 1488px 0 #F29B38, 1504px 0 #F29B38, 1520px 0 #F29B38, 1536px 0 #F29B38, 1552px 0 #F29B38, 1568px 0 #F29B38, 1584px 0 #F29B38, 1600px 0 #F29B38, 1616px 0 #F29B38, 1632px 0 #F29B38, 1648px 0 #F29B38, 1664px 0 #F29B38, 1680px 0 #F29B38, 1696px 0 #F29B38, 1712px 0 #F29B38, 1728px 0 #F29B38, 1744px 0 #F29B38, 1760px 0 #F29B38, 1776px 0 #F29B38, 1792px 0 #F29B38, 1808px 0 #F29B38, 1824px 0 #F29B38, 1840px 0 #F29B38, 1856px 0 #F29B38, 1872px 0 #F29B38, 1888px 0 #F29B38, 1904px 0 #F29B38, 1920px 0 #F29B38, 1936px 0 #F29B38, 1952px 0 #F29B38, 1968px 0 #F29B38, 1984px 0 #F29B38, 2000px 0 #F29B38, 2016px 0 #F29B38, 2032px 0 #F29B38, 2048px 0 #F29B38, 2064px 0 #F29B38, 2080px 0 #F29B38, 2096px 0 #F29B38, 2112px 0 #F29B38, 2128px 0 #F29B38, 2144px 0 #F29B38, 2160px 0 #F29B38, 2176px 0 #F29B38, 2192px 0 #F29B38, 2208px 0 #F29B38, 2224px 0 #F29B38, 2240px 0 #F29B38, 2256px 0 #F29B38, 2272px 0 #F29B38, 2288px 0 #F29B38, 2304px 0 #F29B38, 2320px 0 #F29B38, 2336px 0 #F29B38, 2352px 0 #F29B38, 2368px 0 #F29B38, 2384px 0 #F29B38, 2400px 0 #F29B38, 2416px 0 #F29B38, 2432px 0 #F29B38, 2448px 0 #F29B38, 2464px 0 #F29B38, 2480px 0 #F29B38, 2496px 0 #F29B38, 2512px 0 #F29B38, 2528px 0 #F29B38, 2544px 0 #F29B38, 2560px 0 #F29B38; }
.site-name, .site-header nav a { color: var(--brand-ink); }
.home-hero, .article-card, .review-page, .categories { color: var(--brand-ink); }
.home-hero { max-width: none; padding: 36px; background: var(--cream); }
.home-hero h1 { font-size: clamp(1.65rem, 3.3vw, 2.6rem); }
.categories { margin: -12px 0 40px; gap: 10px; }
.category-label { display: inline-block; padding: 3px 10px; background: var(--cream); border: 1px solid var(--brand-ink); font-size: .8rem; font-weight: 700; color: var(--brand-ink); text-decoration: none; }
.categories .category-label::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--orange); margin-right: 7px; vertical-align: middle; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.section-heading h2 { border: 0; margin: 0; }
.section-heading > a { font-size: .875rem; }
.article-list { max-width: 760px; }
.article-card { border: 1px solid var(--line); margin-bottom: 24px; }
.article-card-link { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; color: inherit; text-decoration: none; }
.article-card-link > img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.article-card-link > div { padding: 24px; min-width: 0; }
.article-card h3 { border: 0; padding: 0; margin: 12px 0; font-size: 1.1rem; line-height: 1.7; }
.article-card time, .article-meta, .article-note { font-size: .875rem; color: var(--muted); }
.article-card-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.review-page { max-width: 800px; }
.review-page .breadcrumb { padding-top: 0; }
.review-header { margin: 16px 0 28px; }
.review-header h1 { margin-top: 16px; }
.review-photo { width: 100%; max-width: 720px; margin: 24px auto; }
.review-photo img { display: block; width: 100%; height: auto; }
.review-photo figcaption { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.article-toc { display: block; padding: 20px 24px; border: 1px solid var(--line); margin: 32px 0 40px; }
.article-toc p { margin-top: 0; }
.article-toc ol { margin-bottom: 0; padding-left: 1.5em; }
.review-body { max-width: 720px; margin-inline: auto; }
.review-body section { margin-bottom: 48px; }
.review-body h2 { scroll-margin-top: 24px; }
.review-body h3 { border-left-color: var(--orange); }
.mascot-speech { display: flex; align-items: flex-start; gap: 18px; margin: 24px 0; }
.mascot-speech > img { flex: 0 0 48px; image-rendering: pixelated; margin-top: 12px; }
.mascot-speech p { position: relative; margin: 0; padding: 16px; border: 2px solid var(--brand-ink); border-radius: 4px; background: #fff; }
.mascot-speech p::before, .mascot-speech p::after { content: ""; position: absolute; width: 0; height: 0; top: 20px; border-style: solid; }
.mascot-speech p::before { left: -12px; border-width: 9px 10px 9px 0; border-color: transparent var(--brand-ink) transparent transparent; }
.mascot-speech p::after { left: -9px; top: 22px; border-width: 7px 8px 7px 0; border-color: transparent white transparent transparent; }
.verdict-grid, .photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.verdict-grid > div { border: 1px solid var(--line); border-top: 4px solid var(--orange); padding: 20px; background: var(--cream); }
.verdict-grid > div + div { border-top-color: var(--brand-ink); background: white; }
.verdict-grid h3 { margin: 0; padding: 0; border: 0; }
.verdict-grid p { margin-bottom: 0; }
.positive-heading::before, .concern-heading::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; background: var(--orange); vertical-align: middle; }
.concern-heading::before { background: var(--brand-ink); }
.photo-pair .review-photo { margin: 12px 0; }
.photo-pair img { aspect-ratio: 1; object-fit: contain; }
.spec-table thead th { background: var(--cream); }
.spec-table tbody th { width: 35%; }
.related-tool { border: 1px solid var(--brand-ink); border-left: 4px solid var(--orange); padding: 12px 20px; margin-top: 24px; }
.product-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: center; border: 1px solid var(--line); padding: 24px; }
.product-box img { display: block; width: 100%; height: auto; }
.product-button { display: inline-block; min-height: 44px; padding: 10px 18px; background: var(--orange); color: var(--brand-ink); font-weight: 700; border: 1px solid var(--brand-ink); border-radius: 4px; text-decoration: none; }
.product-button:hover { text-decoration: underline; }
.new-tab { font-size: .75rem; font-weight: 400; }
.article-note { border-top: 1px solid var(--line); padding-top: 20px; }
@media (max-width: 600px) {
 .home-hero { flex-direction: row; align-items: center; padding: 24px 20px; gap: 12px; }
 .home-hero .mascot { width: 64px; height: 64px; }
 .home-hero h1 { font-size: 1.4rem; }
 .categories { gap: 6px; }
 .categories .category-label { padding: 4px 7px; font-size: .75rem; }
 .article-card-link, .verdict-grid, .photo-pair, .product-box { grid-template-columns: minmax(0, 1fr); }
 .article-card-link > div { padding: 20px; }
 .article-toc { padding: 16px; }
 .review-header h1 { font-size: 1.5rem; }
 .product-box img { max-width: 240px; margin-inline: auto; }
}

.content-page { --ink: var(--brand-ink); --accent: var(--brand-ink); color: var(--brand-ink); }
@media (max-width: 600px) { .photo-pair img { aspect-ratio: auto; } }