:root { --ink: #1d2528; --paper: #f5f5f0; --accent: #b3480b; --link: #b3480b; --line: #cbd0cc; --surface: #fffefa; --muted: #4d5959; --case: #e9ece2; }
/* Independent site theme; shared semantic structure, no external UI library. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 16px; line-height: 1.85; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.container { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 10px; background: white; color: #111; z-index: 100; }
.skip-link:focus { top: 10px; }
.header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-container { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { color: var(--ink); text-decoration: none; flex-shrink: 0; }
.brand-caption { display: block; margin: 0; font-family: Consolas, monospace; font-size: .78rem; letter-spacing: .16em; line-height: 1.6; }
.brand-name { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.nav-menu { display: flex; flex-wrap: wrap; gap: 7px 18px; list-style: none; padding: 0; margin: 0; justify-content: flex-end; max-width: 650px; }
.nav-link { display: block; padding: 8px 0; font-size: .86rem; color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav-link:hover { border-color: var(--accent); }
.mobile-menu-toggle { display: none; border: 1px solid var(--line); width: 48px; height: 48px; padding: 12px; background: transparent; border-radius: 0; }
.mobile-menu-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; }
.mobile-nav { padding: 20px 30px; background: var(--paper); border-bottom: 1px solid var(--line); max-height: calc(100dvh - 80px); overflow-y: auto; }
.mobile-nav-link { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,18,30,.93), rgba(8,18,30,.55) 50%, rgba(8,18,30,.08)); z-index: -1; }
.hero-content { padding-block: 86px 95px; }
.home-hero { min-height: 650px; }
.hero h1 { font-size: clamp(2.3rem, 4.3vw, 4.2rem); font-weight: 700; line-height: 1.4; letter-spacing: -.035em; max-width: 850px; margin: 20px 0 26px; color: #fff; text-shadow: 0 3px 16px #000, 0 1px 3px #000; text-wrap: balance; }
.hero-keyword { display: block; font-family: "Yu Gothic", sans-serif; font-size: 1rem; letter-spacing: .08em; margin-bottom: 18px; }
.eyebrow { font-size: .79rem; letter-spacing: .12em; margin: 0; color: #fff; text-shadow: 0 2px 5px #000; }
.hero-lead { max-width: 560px; color: #fff; font-size: 1rem; text-shadow: 0 2px 5px #000; line-height: 2; }
.hero-link { display: inline-flex; gap: 30px; align-items: center; margin-top: 24px; padding: 12px 0; border-bottom: 2px solid #fff; color: #fff; font-size: .9rem; text-decoration: none; }
.image-note { position: absolute; bottom: 10px; right: 18px; font-size: .65rem; color: white; background: rgba(0,0,0,.65); padding: 3px 8px; margin: 0; }
.overview { display: grid; grid-template-columns: 1fr 3fr; gap: 50px; padding-block: 78px; }
.section-label { font-size: .8rem; font-weight: 700; color: var(--accent); letter-spacing: .09em; }
h2 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.6; letter-spacing: -.015em; margin-top: 0; text-wrap: balance; }
.overview p { max-width: 850px; }
.editorial-note { color: var(--muted); font-size: .85rem; }
.framework { padding-block: 34px; background: var(--ink); color: white; }
.process-chart { margin: 24px 0; }
.process-chart figcaption { font-size: .85rem; margin-bottom: 18px; }
.process-chart ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; gap: 16px; }
.process-chart li { border: 1px solid currentColor; padding: 18px 14px; display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; }
.step-number { font-family: Consolas, monospace; font-weight: 700; opacity: .7; }
.reports { padding-block: 78px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 36px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.section-heading p { font-size: .85rem; }
.section-heading h2 { margin-bottom: 0; }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.report-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); }
.card-image { display: block; overflow: hidden; }
.card-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s; }
.card-image:hover .card-photo { transform: scale(1.025); }
.card-body { padding: 26px; }
.card-kicker { color: var(--accent); font-size: .72rem; font-family: Consolas, "Yu Gothic", sans-serif; margin: 0 0 13px; letter-spacing: .025em; }
.report-card h3 { font-size: 1.2rem; line-height: 1.6; margin: 0 0 18px; }
.report-card h3 a { text-decoration: none; color: var(--ink); }
.card-body p:not(.card-kicker) { font-size: .87rem; color: var(--muted); }
.card-link { display: inline-flex; width: 100%; justify-content: space-between; font-size: .82rem; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 15px; }
.editorial { padding-block: 55px 80px; display: grid; grid-template-columns: 1fr 2fr; gap: 65px; border-top: 1px solid var(--line); }
.editorial p { font-size: .9rem; }
.footer { background: var(--ink); color: #e7e9e8; padding: 60px 0 30px; }
.footer a { color: #e7e9e8; font-size: .8rem; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr; gap: 24px 60px; }
.footer-title { font-size: 1.2rem; font-weight: 700; }
.footer p { font-size: .8rem; }
.footer-pages { display: flex; flex-direction: column; gap: 10px; }
.footer-related, .footer-links, .copyright { grid-column: 1 / -1; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; border-top: 1px solid #ffffff3d; padding-top: 25px; }
.copyright { opacity: .7; }
.breadcrumb { display: flex; gap: 12px; padding-block: 18px; font-size: .78rem; color: var(--muted); }
.page-hero .hero-content { padding-block: 50px 62px; }
.page-hero h1 { font-size: clamp(1.8rem, 3.1vw, 3rem); max-width: 980px; }
.page-hero .hero-lead { max-width: 720px; font-size: .9rem; }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 65px; padding-block: 60px 90px; align-items: start; }
.article-body { min-width: 0; }
.article-meta { font-size: .77rem; color: var(--muted); padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.article-intro { font-size: 1.05rem; padding: 22px 28px; border-left: 4px solid var(--accent); background: var(--surface); margin: 30px 0 48px; }
.article-body section { margin-bottom: 52px; }
.article-body h2 { font-size: 1.45rem; border-top: 2px solid var(--accent); padding-top: 22px; }
.article-body p { line-height: 2.1; margin: 0 0 24px; }
.section-source { font-size: .75rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 510px; background: var(--surface); }
caption { text-align: left; padding: 10px 0; font-size: .75rem; color: var(--muted); }
th, td { padding: 14px 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--ink); color: #fff; }
.article-body .process-chart ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
.article-body .process-chart li { border-color: var(--line); background: var(--surface); color: var(--ink); }
.case-study { padding: 28px; background: var(--case); border: 1px solid var(--line); }
.case-study h2 { border-top: 0; padding-top: 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: .95rem; }
.faq details p { margin-top: 18px; font-size: .9rem; }
.sources ul, .related-panel ul { padding-left: 20px; }
.sources li { margin-bottom: 16px; font-size: .85rem; }
.sources li span { display: block; font-size: .73rem; color: var(--muted); }
.share-links { display: flex; flex-wrap: wrap; gap: 22px; border-top: 1px solid var(--line); padding-top: 25px; font-size: .85rem; }
.sidebar { min-width: 0; font-size: .82rem; }
.sidebar section { border: 1px solid var(--line); background: var(--surface); padding: 22px; margin-bottom: 24px; }
.sidebar h2 { font-size: 1rem; margin-bottom: 15px; }
.sidebar li { margin-bottom: 12px; }
.toc-panel ol { padding-left: 20px; }
.sidebar-note { font-size: .73rem; color: var(--muted); }
.amazon-banner { font-size: .8rem; padding: 15px; border: 1px solid var(--line); background: var(--surface); margin: 18px 0; }
.article-body > div[style], .sidebar > div[style] { max-width: 100% !important; }
.sidebar img, .article-body img { max-width: 100%; height: auto; }
.latest-commentary { padding-block: 28px; background: var(--surface); border-block: 1px solid var(--line); }
.latest-commentary h2 { font-size: 1.25rem; }
.latest-commentary-list { list-style: none; margin: 0; padding: 0; }
.latest-commentary-list li { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding-block: 10px; font-size: .9rem; }
.latest-commentary-list time { font-size: .8rem; color: var(--muted); }
.latest-commentary-more { font-size: .8rem; }
.blog-empty { padding: 35px; background: var(--surface); border-left: 4px solid var(--accent); }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
.blog-card { min-width: 0; padding: 24px; background: var(--surface); }
.blog-card h2 { font-size: 1.2rem; }
.blog-listing { padding-block: 60px 90px; }
.theme-wafer .brand-caption { color: var(--accent); }
.theme-wafer .home-hero::after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid #ffffff30; border-radius: 50%; right: -160px; top: -150px; pointer-events: none; }
.theme-wafer .report-card:first-child { grid-column: span 2; display: grid; grid-template-columns: 1.2fr 1fr; }
.theme-wafer .report-card:first-child .card-photo { height: 100%; aspect-ratio: auto; }
.theme-wafer .report-card:first-child .card-body { align-self: center; }
.theme-wafer .framework { border-top: 5px solid var(--accent); }
.theme-cell .header-container { min-height: 92px; }
.theme-cell .brand { border-left: 7px solid var(--accent); padding-left: 14px; }
.theme-cell .home-hero .hero-photo { left: 38%; width: 62%; }
.theme-cell .home-hero .hero-shade { background: linear-gradient(90deg,#1d2528 38%,#1d2528bb 49%,transparent 76%); }
.theme-cell .home-hero h1 { max-width: 760px; font-size: clamp(2rem,3.7vw,3.5rem); }
.theme-cell .home-hero .hero-lead { max-width: 490px; }
.theme-cell .hero-link { background: #e68136; color: #171f22; border: 0; padding: 12px 20px; font-weight: 700; }
.theme-cell .overview { border-left: 7px solid var(--accent); padding: 45px 32px; margin-block: 55px; }
.theme-cell .framework { background: #dddeda; color: var(--ink); }
.theme-cell .process-chart li { background: var(--surface); border: 0; border-top: 5px solid var(--accent); }
.theme-cell .report-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.theme-cell .report-card { display: grid; grid-template-columns: 38% 1fr; border: 0; border-top: 1px solid var(--line); }
.theme-cell .card-photo { height: 100%; aspect-ratio: auto; min-height: 240px; }
.theme-cell .card-body { padding: 24px; }
.theme-cell .section-label { font-family: Consolas,"Yu Gothic",sans-serif; }
.theme-cell .article-body h2 { border-top: 0; border-left: 5px solid var(--accent); padding: 0 0 0 15px; }
.theme-culture h1, .theme-culture h2, .theme-culture .brand-name, .theme-culture .report-card h3 { font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif; font-weight: 600; }
.theme-culture .header { border-top: 4px solid var(--ink); }
.theme-culture .home-hero { width: min(1440px,calc(100% - 56px)); margin: 28px auto 0; border-radius: 4px 80px 4px 4px; min-height: 630px; }
.theme-culture .hero-shade { background: linear-gradient(90deg,#12332feb,#12332f94 52%,#12332f15); }
.theme-culture .home-hero .hero-content { width: min(1280px,calc(100% - 80px)); padding-block: 75px; }
.theme-culture .hero h1 { line-height: 1.55; letter-spacing: .02em; }
.theme-culture .hero-link { border-bottom-width: 1px; }
.theme-culture .overview { grid-template-columns: 1fr 2.5fr; }
.theme-culture .framework { background: #e5e7db; color: var(--ink); }
.theme-culture .process-chart li { border-radius: 30px; border-color: #46635b; }
.theme-culture .report-card { background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.theme-culture .card-image { border-radius: 55px 4px 4px 4px; }
.theme-culture .card-body { padding: 24px 6px 28px; }
.theme-culture .card-kicker { font-family: "Yu Gothic",sans-serif; }
.theme-culture .article-intro { border: 1px solid var(--line); border-radius: 20px; }
.theme-culture .article-body h2 { border-top-width: 1px; }
.theme-culture .case-study { border-radius: 20px; }
@media (max-width: 1100px) {
  .container { width: calc(100% - 48px); }
  .header-container { gap: 18px; }
  .nav-menu { gap: 4px 12px; }
  .brand-name { font-size: .95rem; }
  .article-layout { gap: 32px; grid-template-columns: minmax(0,1fr) 280px; }
  .theme-cell .report-card { display: block; }
  .theme-cell .card-photo { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .mobile-menu-toggle { display: block; flex-shrink: 0; }
  .header-container, .theme-cell .header-container { min-height: 80px; }
  .report-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .theme-wafer .report-card:first-child { grid-column: span 2; }
  .article-layout { grid-template-columns: minmax(0,1fr); }
  .sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .sidebar > * { min-width: 0; }
  .sidebar-note { grid-column: 1 / -1; }
  .home-hero { min-height: 560px; }
  .overview, .theme-culture .overview { grid-template-columns: 1fr; gap: 15px; padding-block: 45px; }
  .editorial { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 36px); }
  .brand-name { font-size: .78rem; }
  .brand-caption { font-size: .66rem; }
  .header-container { gap: 10px; }
  .hero-content { padding-block: 56px 68px; }
  .home-hero { min-height: 590px; }
  .hero h1 { font-size: 2.1rem; }
  .hero-lead { font-size: .88rem; }
  .hero-shade { background: linear-gradient(90deg,#08121ee8,#08121e8a); }
  .hero-photo { object-position: 65% center; }
  .theme-cell .home-hero .hero-photo { left: 0; width: 100%; }
  .theme-cell .home-hero .hero-shade { background: linear-gradient(90deg,#1d2528ef,#1d252894); }
  .theme-cell .home-hero h1 { font-size: 2rem; }
  .theme-cell .overview { padding: 30px 20px; width: calc(100% - 36px); }
  .theme-culture .home-hero { width: calc(100% - 24px); margin-top: 12px; border-radius: 4px 45px 4px 4px; min-height: 580px; }
  .theme-culture .home-hero .hero-content { width: calc(100% - 36px); padding-block: 50px 66px; }
  .theme-culture .hero h1 { font-size: 2rem; }
  .process-chart ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .process-chart li { padding: 14px 10px; font-size: .8rem; }
  .section-heading { display: block; }
  .reports { padding-block: 45px; }
  .report-grid, .theme-cell .report-grid { grid-template-columns: 1fr; gap: 28px; }
  .theme-wafer .report-card:first-child { grid-column: auto; display: block; }
  .theme-wafer .report-card:first-child .card-photo { aspect-ratio: 16 / 9; height: auto; }
  .card-body { padding: 23px; }
  .footer-inner { grid-template-columns: 1fr; gap: 20px; }
  .footer-links { gap: 12px 18px; }
  .page-hero .hero-content { padding-block: 36px 48px; }
  .page-hero h1, .theme-culture .page-hero h1 { font-size: 1.65rem; }
  .breadcrumb { font-size: .7rem; }
  .article-layout { padding-block: 35px 55px; }
  .article-intro, .case-study { padding: 20px; }
  .article-body { font-size: .95rem; }
  .article-body h2 { font-size: 1.23rem; }
  .article-body p { line-height: 2; }
  .sidebar { display: block; }
  .latest-commentary-list li { grid-template-columns: 1fr; gap: 2px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-empty { padding: 24px; }
}
@media (max-width: 768px) {
  .blog-article .article-layout.container {
    width: calc(100% - 32px);
  }
  .blog-article .article-content {
    min-width: 0;
    padding-inline: 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-photo { transition: none; }
}

/* LATEST-COMMENTARY:START */
.latest-commentary {
  padding: 3rem 0;
}
/* .container を持たないサイトでも端に張り付かないための保険。
   :where() は詳細度0なので、サイト側の .container 定義が常に優先される。 */
:where(.latest-commentary .container) {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}
.latest-commentary h2 {
  margin-bottom: 1.25rem;
}
.latest-commentary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.latest-commentary-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line, #e5e5e5);
}
.latest-commentary-list time {
  flex: 0 0 auto;
  color: var(--muted, #666);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.latest-commentary-list a {
  flex: 1 1 16rem;
  min-width: 0;
  color: var(--ink, #222);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.latest-commentary-list a:hover {
  color: var(--accent, #0b5);
  text-decoration: underline;
}
.latest-commentary-more {
  margin-top: 1.25rem;
}
.latest-commentary-more a {
  color: var(--accent, #0b5);
  text-decoration: none;
  font-weight: 600;
}
.latest-commentary-more a:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .latest-commentary-list li {
    flex-direction: column;
    gap: 0.2rem;
  }
  /* 縦積み時に flex-basis(16rem) が高さに効かないよう auto に戻す */
  .latest-commentary-list a,
  .latest-commentary-list time {
    flex: 0 0 auto;
  }
}
/* LATEST-COMMENTARY:END */

/* HEADING-WRAP:START 見出し最終行孤立文字対策 (AGENTS.md NoGo) */
h1,h2,h3,h4,.hero-title,.page-title,.card-title{text-wrap:balance;word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
/* HEADING-WRAP:END */