:root {
  font-size: 100%;
  --ink: #292b2c;
  --paper: #fffdf9;
  --tint: #edf4ec;
  --accent: #315c46;
  --accent-ink: #fff;
  --line: color-mix(in srgb, var(--accent) 24%, var(--paper));
  --content: 76rem;
  --reading: 48rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-wrap: anywhere;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 1.125rem;
  line-height: 1.9;
}
a { color: var(--accent); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 0; }
figure { margin: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; inset: -10rem auto auto 1rem; z-index: 20; padding: .8rem 1rem; background: #fff; }
.skip:focus { top: 1rem; }
.preview { padding: .35rem 1rem; background: var(--ink); color: #fff; text-align: center; font-size: .8rem; }
.header, .wrap, .footer-inner { width: min(100% - 4rem, var(--content)); margin-inline: auto; }
.header { padding-top: 1.35rem; }
.brand { color: var(--ink); font: 800 1.55rem/1.35 "Hiragino Mincho ProN", "Yu Mincho", serif; text-decoration: none; }
.brand span { display: block; margin-top: .2rem; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); font: 400 .82rem/1.5 -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif; }
.header nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin-top: 1rem; padding: .6rem 0; border-block: 1px solid var(--line); }
.header nav a { padding: .4rem 0; color: var(--ink); font-size: .94rem; text-decoration: none; }
.header nav a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px var(--accent); font-weight: 700; }
.crumb { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); font-size: .84rem; }
.hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(2.25rem, 6vw, 5rem) 0 3rem; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 .85rem; color: var(--accent); font-size: .92rem; font-weight: 800; letter-spacing: .06em; }
h1, h2, h3 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
h1 { margin: 0 0 1.35rem; font-size: clamp(2rem, 4.4vw, 3.15rem); line-height: 1.48; letter-spacing: .025em; text-wrap: balance; word-break: auto-phrase; }
h2 { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.5vw, 1.75rem); line-height: 1.65; text-wrap: pretty; word-break: auto-phrase; }
h3 { margin: .65rem 0 .85rem; font-size: 1.12rem; line-height: 1.6; }
p { margin: 0 0 1.15rem; }
.lead { margin: 0; }
.image-note { margin-top: .55rem; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); font-size: .78rem; line-height: 1.6; }
.site-ad-disclosure { width: min(100%, var(--reading)); margin: 0 auto 1.5rem; font-size: .8rem; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.reading { width: min(100%, var(--reading)); margin: 0 auto 4rem; }
.content-section { padding: 2.1rem 0; border-bottom: 1px solid var(--line); }
.section-num { margin: 0 0 .35rem; color: var(--accent); font-size: .84rem; font-weight: 800; letter-spacing: .12em; }
.content-section p:last-child, .content-section ul:last-child { margin-bottom: 0; }
.content-section ul { padding-left: 1.3em; }
.advert { width: min(100%, var(--reading)); margin: 1.4rem auto; padding: 1.4rem; border: 2px solid var(--accent); background: var(--tint); }
.ad-prompt { margin: 0; color: var(--accent); font-weight: 800; line-height: 1.7; }
.ad-material { margin-top: .85rem; }
.ad-line { margin: 0; font-weight: 700; }
.ad-line a { display: inline; color: var(--accent); text-decoration: underline; }
.related { margin-bottom: 4rem; padding: 2rem; border-block: 3px solid var(--accent); background: var(--tint); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card { display: block; padding: 1.3rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; }
.card > span:first-child { color: color-mix(in srgb, var(--ink) 72%, var(--paper)); font-size: .84rem; }
.arrow { color: var(--accent); font-size: .92rem; text-decoration: underline; }
.legal { width: min(100% - 4rem, 52rem); margin-inline: auto; padding-block: 3rem 5rem; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.legal h2 { margin-top: 2rem; }
footer { padding: 2.6rem 0; background: var(--tint); color: color-mix(in srgb, var(--ink) 72%, var(--paper)); font-size: .9rem; }
.footer-brand { color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.small { margin-top: 1.3rem; font-size: .78rem; }

/* 10サイトは余白、面、配置で差を付ける。装飾用の左縦棒は使わない。 */
.layout-trail .hero { border-block: 1px solid var(--line); }
.layout-label .hero { grid-template-columns: 1.08fr .92fr; background: linear-gradient(135deg, var(--tint), transparent 58%); padding-inline: clamp(1rem, 3vw, 2.5rem); }
.layout-journey .hero { grid-template-columns: .88fr 1.12fr; }
.layout-journey .hero figure { order: -1; box-shadow: .9rem .9rem 0 var(--tint); }
.layout-card .hero-copy { padding: 1.8rem; outline: 1px solid var(--line); outline-offset: -.55rem; background: var(--paper); }
.layout-clean .hero { border-bottom: .65rem solid var(--tint); }
.layout-device .hero { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 2.5rem 2.5rem; }
.layout-device .hero-copy { padding: 1.4rem; background: var(--paper); }
.layout-villa .hero { grid-template-columns: 1fr; }
.layout-villa .hero figure { order: -1; }
.layout-villa .hero-copy { width: min(100%, 54rem); margin: -3.5rem auto 0; padding: 1.6rem 2rem; background: var(--paper); box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--ink) 12%, transparent); }
.layout-route .hero { border-block: 3px double var(--accent); }
.layout-proof .hero { grid-template-columns: 1fr 1fr; background: linear-gradient(to bottom, transparent 14%, var(--tint) 14%, var(--tint) 86%, transparent 86%); }
.layout-team .hero { grid-template-columns: 1fr; text-align: center; }
.layout-team .hero figure { width: min(100%, 62rem); margin-inline: auto; }
.layout-team .hero-copy { width: min(100%, 54rem); margin-inline: auto; }

@media (max-width: 52rem) {
  .header, .wrap, .footer-inner { width: min(100% - 2.4rem, var(--content)); }
  .hero, .layout-label .hero, .layout-journey .hero, .layout-proof .hero { grid-template-columns: 1fr; }
  .layout-journey .hero figure { order: initial; box-shadow: .55rem .55rem 0 var(--tint); }
  .layout-villa .hero-copy { margin-top: -1.8rem; padding: 1.25rem; }
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 25rem) {
  .header, .wrap, .footer-inner, .legal { width: min(100% - 2rem, var(--content)); }
  .brand { font-size: 1.3rem; }
  .header nav { gap: .15rem .9rem; }
  .related { padding: 1.15rem; }
}

/* 広告枠：誘導文 2 行と▼行は囲まず背景なしで中央揃え（安達さん 07:55）。箱は［PR］＋素材リンクだけで、アクセント色の塗りに白文字（024 までの .cta-box と同じ、安達さん 07:53） */
.advert{padding:0;border:0;background:none}
.ad-prompt{background:none;text-align:center}
.ad-box{margin-top:.55rem;padding:.8rem 1rem;border:2px solid var(--accent);background:var(--accent);color:#fff;line-height:1.7;text-align:left}
.ad-box .pr{font-size:.75em;font-weight:700;color:#fff}
.ad-box .ad-material{display:inline;margin:0}
.ad-box .ad-material a{font-size:1.2em;color:#fff;text-decoration:underline;font-weight:700}
/* 一文：ヒーロー画像の直下（figcaption）。10px・本文色・背景なし・左寄せ */
figure figcaption.ad-disclosure{margin:8px 0 0;padding:0;font-size:10px;line-height:1.7;color:var(--ink);background:none;border:0;text-align:left}
figure figcaption.ad-disclosure .image-note{display:block;margin-top:.2rem;font-size:10px}
/* 画像の下の線と、文字の背景色をやめる */
.layout-trail .hero,.layout-route .hero{border-bottom:0}
.layout-clean .hero{border-bottom:0}
.layout-proof .hero{background:none}
/* 042・045：Codex 独自の 1 列のヒーローをやめ、ほかの 8 サイトと同じ構成・幅に（PC は 2 列、スマホは見出し → 画像 → 一文。安達さん 08:00） */
.layout-villa .hero,.layout-team .hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);text-align:left}
.layout-villa .hero figure,.layout-team .hero figure{order:0;width:auto;margin:0}
.layout-villa .hero-copy,.layout-team .hero-copy{width:auto;margin:0;padding:0;box-shadow:none;background:none}
@media (max-width:52rem){.layout-villa .hero,.layout-team .hero{grid-template-columns:1fr}}

.site-ad-disclosure{font-size:10px;color:var(--ink);background:none;border:0;line-height:1.7;text-align:left}
.ad-material img[width="1"][height="1"]{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0}