:root { --collection-ink:#27324a; --collection-orange:#f46b22; --collection-mint:#c6eee8; --collection-peach:#ffe2d0; --collection-paper:#fffaf4; }
.collection-hero { position:relative; overflow:hidden; padding:82px max(7vw,28px) 74px; border-bottom:3px solid var(--collection-ink); background:linear-gradient(132deg,var(--collection-mint) 0 56%,var(--collection-paper) 56% 100%); color:var(--collection-ink); }
.collection-hero::before,.collection-hero::after { position:absolute; border:2px solid var(--collection-ink); border-radius:50%; content:""; }
.collection-hero::before { top:-130px; right:8vw; width:260px; height:260px; background:rgba(255,255,255,.3); }
.collection-hero::after { right:23vw; bottom:-125px; width:240px; height:240px; background:var(--collection-orange); }
.collection-hero__inner { position:relative; z-index:1; max-width:1120px; margin:0 auto; }
.collection-hero h1 { max-width:760px; margin:14px 0 17px; font-size:clamp(48px,7vw,88px); line-height:1.08; letter-spacing:-.075em; }
.collection-hero h1 em,.collection-section-head h2 em,.collection-cta h2 em { color:var(--collection-orange); font-style:normal; }
.collection-hero p:not(.eyebrow) { max-width:575px; margin:0; font-size:15px; font-weight:700; line-height:2; }
.collection-hero__map { position:absolute; right:max(2vw,8px); bottom:-38px; display:flex; width:208px; flex-direction:column; align-items:center; gap:8px; padding:13px 13px 23px; border:3px solid var(--collection-ink); border-radius:28px 28px 70px 28px; background:var(--collection-peach); box-shadow:6px 6px 0 var(--collection-ink); }
.collection-hero__map > span { align-self:start; color:var(--collection-orange); font-size:9px; font-weight:900; letter-spacing:.12em; }
.collection-hero__map svg { display:block; width:128px; height:auto; margin:0; filter:drop-shadow(2px 3px 0 rgba(39,50,74,.14)); }
.collection-hero__map path { stroke:var(--collection-ink); stroke-linejoin:round; stroke-width:4; }
.kyushu-map__fukuoka { fill:#ff8f61; }.kyushu-map__saga { fill:#ffe39f; }.kyushu-map__nagasaki { fill:#b8e6de; }.kyushu-map__oita { fill:#cdb8f2; }.kyushu-map__kumamoto { fill:#ffcfb8; }.kyushu-map__miyazaki { fill:#b9dfac; }.kyushu-map__kagoshima { fill:#ff7357; }.kyushu-map__island { fill:var(--collection-ink); }
.collection-hero__map b { color:var(--collection-ink); font-size:11px; font-weight:900; letter-spacing:.04em; line-height:1.45; text-align:center; }
.collection-feature,.collection-area,.collection-builders { padding:88px max(7vw,28px); }
.collection-feature { background:var(--collection-paper); }
.collection-section-head { max-width:1120px; margin:0 auto 35px; }
.collection-section-head h2,.collection-cta h2 { margin:11px 0 0; color:var(--collection-ink); font-size:clamp(30px,4vw,50px); letter-spacing:-.06em; line-height:1.25; }
.collection-section-head > p:not(.eyebrow) { max-width:590px; margin:16px 0 0; color:var(--collection-ink); font-size:14px; font-weight:600; line-height:1.9; }
.collection-feature-grid { display:grid; grid-template-columns:1.25fr .85fr; gap:22px; max-width:1120px; margin:0 auto; }
.collection-card { position:relative; display:flex; min-height:315px; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:30px; border:3px solid var(--collection-ink); border-radius:23px; color:var(--collection-ink); box-shadow:7px 7px 0 var(--collection-ink); transition:transform .18s ease,box-shadow .18s ease; }
.collection-card:hover { transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--collection-ink); }
.collection-card--hiraya { background:linear-gradient(142deg,rgba(255,255,255,.34),rgba(255,255,255,.72)),url("assets/hero-hiraya-exterior.png") center/cover; }
.collection-card--builders { background:var(--collection-peach); }
.collection-card--builders::before { position:absolute; top:-82px; right:-37px; width:225px; height:225px; border:2px solid var(--collection-ink); border-radius:50%; background:var(--collection-mint); content:""; }
.collection-card > * { position:relative; z-index:1; }
.collection-card span,.collection-area-grid span { color:var(--collection-orange); font-size:10px; font-weight:900; letter-spacing:.12em; }
.collection-card h3 { margin:9px 0 10px; font-size:clamp(28px,3.3vw,44px); line-height:1.15; letter-spacing:-.055em; }
.collection-card p { max-width:410px; margin:0; font-size:13px; font-weight:700; line-height:1.8; }
.collection-card b { margin-top:19px; font-size:13px; text-decoration:underline; text-decoration-color:var(--collection-orange); text-decoration-thickness:3px; text-underline-offset:6px; }
.collection-area { background:var(--collection-mint); border-top:3px solid var(--collection-ink); }
.collection-area-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; max-width:1120px; margin:0 auto; }
.collection-area-grid a { display:grid; grid-template-columns:1fr auto; min-height:125px; align-items:end; padding:17px; border:2px solid var(--collection-ink); border-radius:16px; background:#fffdf9; box-shadow:4px 4px 0 var(--collection-ink); color:var(--collection-ink); transition:transform .16s ease,background .16s ease; }
.collection-area-grid a:hover { background:var(--collection-peach); transform:translate(-2px,-2px); }
.collection-area-grid span { grid-column:1/-1; align-self:start; }
.collection-area-grid b { font-size:15px; line-height:1.45; }
.collection-area-grid i { align-self:end; color:var(--collection-orange); font-size:22px; font-style:normal; }
.collection-builders { background:var(--collection-paper); }
.collection-builder-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1120px; margin:0 auto; }
.collection-builder-card { overflow:hidden; border:3px solid var(--collection-ink); border-radius:20px; background:#fff; box-shadow:6px 6px 0 var(--collection-ink); }
.collection-builder-card img { width:100%; aspect-ratio:1.35; object-fit:cover; border-bottom:3px solid var(--collection-ink); }
.collection-builder-card > div { display:grid; gap:9px; padding:21px; }
.collection-builder-card p { margin:0; color:var(--collection-orange); font-size:11px; font-weight:900; }
.collection-builder-card h2 { margin:0; color:var(--collection-ink); font-size:21px; }
.collection-builder-card > div > span { min-height:48px; color:var(--collection-ink); font-size:13px; font-weight:600; line-height:1.7; }
.collection-builder-card__tags { display:flex; flex-wrap:wrap; gap:6px; }
.collection-builder-card__tags i { padding:4px 8px; border:1.5px solid var(--collection-ink); border-radius:999px; background:var(--collection-mint); color:var(--collection-ink); font-size:10px; font-style:normal; font-weight:800; }
.collection-empty { grid-column:1/-1; padding:35px; border:2px solid var(--collection-ink); border-radius:18px; background:#fff; text-align:center; }
.collection-cta { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:88px max(8vw,30px); background:var(--collection-peach); border-top:3px solid var(--collection-ink); }
.collection-cta > div { max-width:660px; }.collection-cta p:not(.eyebrow) { max-width:580px; color:var(--collection-ink); font-size:14px; font-weight:600; line-height:1.9; }.collection-cta .button { flex:none; }
@media (max-width:800px) {
  /* 特集一覧の地図は本文に重ねず、説明文の後ろに独立して配置する */
  .collection-hero { padding:56px 22px 54px; }
  .collection-hero::before,
  .collection-hero::after { display:none; }
  .collection-hero__inner { display:flex; flex-direction:column; }
  .collection-hero .eyebrow { align-self:flex-start; width:auto; padding:4px 12px; white-space:nowrap; }
  .collection-hero h1 { font-size:clamp(36px,9.5vw,40px); }
  .collection-hero p:not(.eyebrow) { font-size:13px; }
  .collection-hero__map { position:relative; right:auto; bottom:auto; align-self:flex-end; width:145px; gap:6px; margin:24px 4px 0 0; padding:9px 9px 17px; border-radius:20px 20px 52px 20px; box-shadow:4px 4px 0 var(--collection-ink); }
  .collection-hero__map > span { font-size:7px; }
  .collection-hero__map svg { width:79px; margin:0; }
  .collection-hero__map b { font-size:8px; }
  .collection-feature,.collection-area,.collection-builders { padding:61px 20px; }
  .collection-feature-grid,.collection-builder-grid { grid-template-columns:1fr; }
  .collection-card { min-height:270px; padding:24px; }
  .collection-card h3 { font-size:34px; }
  .collection-area-grid { grid-template-columns:1fr; }
  .collection-area-grid a { min-height:102px; }
  .collection-cta { align-items:flex-start; flex-direction:column; gap:23px; padding:61px 20px; }
  .collection-cta .button { width:100%; justify-content:center; }
}