/* ==========================================================================
   dx.css — 「ひがし北海道観光DXプロジェクト」専用ページ(page-dx-platform.php)
   is_page('dx-platform') 限定で enqueue。style.css のトークン(--c-*, --pad-x,
   --inner-max)と global .inner / .en を継承。色は蒼夜トークンのみ。
   ========================================================================== */

.eyebrow { font-family: var(--font-en); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--c-ice); }
.sec-ttl { font-family: "A1\660E\671D", "Hiragino Mincho ProN", "\6E38\660E\671D", serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: .04em; line-height: 1.4; }

/* ---------- HERO ---------- */
.pp-hero { position: relative; overflow: hidden; min-height: clamp(460px, 78vh, 760px); display: flex; align-items: flex-end; }
.pp-hero__bg { position: absolute; inset: 0; z-index: 0; }
.pp-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.82) brightness(.5) saturate(.7); }
.pp-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 19, 22, .96), rgba(16, 19, 22, .4) 55%, rgba(16, 19, 22, .7)); }
.pp-hero__in { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.pp-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; }
.pp-badge { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em; border: 1px solid var(--c-ice); border-radius: 999px; font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: var(--c-ice); }
.pp-badge--solid { background: var(--c-ice); color: #0c1014; border-color: var(--c-ice); font-weight: 600; }
.pp-hero__title { font-family: "A1\660E\671D", "Hiragino Mincho ProN", "\6E38\660E\671D", serif; font-weight: 700; font-size: clamp(2rem, 5.2vw, 3.6rem); letter-spacing: .03em; line-height: 1.35; margin: 0 0 1.2rem; max-width: 18em; }
.pp-hero__lead { max-width: 34em; font-size: clamp(14px, 1.5vw, 16px); line-height: 2; color: var(--c-text-dim); }
.pp-hero__credit { margin-top: 1.6rem; font-size: 12px; letter-spacing: .06em; color: var(--c-text-faint); }
.pp-hero__credit b { color: var(--c-text); font-weight: 600; }

/* ---------- セクション共通 ---------- */
section.pp { padding-block: clamp(3.5rem, 8vh, 6.5rem); border-top: 1px solid var(--c-line); }
.pp-head { margin-bottom: clamp(2rem, 4vh, 3rem); }
.pp-head .eyebrow { display: block; margin-bottom: .7rem; }

/* 概要 */
.pp-overview { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pp-overview p { font-size: 15px; line-height: 2.05; color: var(--c-text-dim); max-width: 34em; }
.pp-facts { border: 1px solid var(--c-line); border-radius: 3px; }
.pp-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--c-line); font-size: 13px; }
.pp-facts div:last-child { border-bottom: 0; }
.pp-facts dt { color: var(--c-text-faint); }
.pp-facts dd { color: var(--c-text); text-align: right; margin: 0; }

/* 体制 */
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.pp-grid > div { background: var(--c-bg); padding: 1.6rem 1.4rem; }
.pp-grid b { display: block; font-family: var(--font-en); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300; color: var(--c-ice); letter-spacing: .02em; }
.pp-grid span { display: block; margin-top: .3rem; font-size: 12.5px; color: var(--c-text-dim); }
.pp-grid small { display: block; margin-top: .4rem; font-size: 11px; color: var(--c-text-faint); line-height: 1.7; }

/* 仕組み */
.pp-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.pp-feat > div { background: var(--c-bg); padding: 1.6rem 1.5rem; }
.pp-feat .no { font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: var(--c-ice); }
.pp-feat h3 { font-size: 15px; font-weight: 600; margin: .5rem 0 .5rem; letter-spacing: .02em; }
.pp-feat p { font-size: 12.5px; line-height: 1.9; color: var(--c-text-dim); }

/* 成果 */
.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.pp-stat { border-left: 2px solid var(--c-ice); padding: .4rem 0 .4rem 1.3rem; }
.pp-stat b { display: block; font-family: var(--font-en); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 300; letter-spacing: .01em; }
.pp-stat span { display: block; margin-top: .4rem; font-size: 13px; color: var(--c-text-dim); line-height: 1.7; }

/* 受賞 */
.pp-award { background: linear-gradient(180deg, rgba(135, 184, 214, .06), transparent); }
.pp-award__box { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.4rem; border: 1px solid var(--c-ice); border-radius: 4px; padding: clamp(1.8rem, 4vw, 2.8rem); }
.pp-award__mark { font-family: var(--font-en); font-size: 11px; letter-spacing: .24em; color: var(--c-ice); }
.pp-award__name { font-family: "A1\660E\671D", "Hiragino Mincho ProN", "\6E38\660E\671D", serif; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 600; }
.pp-award__sub { font-size: 13px; color: var(--c-text-dim); flex: 1 1 18em; }

/* 関与 */
.pp-role p { max-width: 36em; font-size: 15px; line-height: 2.1; color: var(--c-text); }

/* timeline */
.pp-tl { display: flex; flex-wrap: wrap; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); margin-top: 1.6rem; }
.pp-tl div { flex: 1 1 160px; background: var(--c-bg); padding: 1.1rem 1.3rem; }
.pp-tl b { font-family: var(--font-en); font-size: 13px; letter-spacing: .1em; color: var(--c-ice); }
.pp-tl span { display: block; margin-top: .3rem; font-size: 12.5px; color: var(--c-text-dim); }

/* CTA */
.pp-cta { text-align: center; }
.pp-cta a { display: inline-flex; align-items: center; gap: .7em; margin-top: 1.6rem; padding: 1em 2.2em; border: 1px solid var(--c-ice); border-radius: 999px; color: var(--c-ice); text-decoration: none; font-size: 13px; letter-spacing: .12em; transition: color .3s ease, background .3s ease; }
.pp-cta a:hover { background: var(--c-ice); color: #0c1014; }

@media (max-width: 820px) {
  .pp-overview { grid-template-columns: 1fr; }
  .pp-grid, .pp-feat, .pp-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .pp-grid, .pp-feat, .pp-stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   観光地開発ページ(page-development) 追加: ヒーロー番号 / アプローチ / 実績ケース
   ========================================================================== */
.pp-hero__no { font-family: var(--font-en); font-size: 12px; letter-spacing: .3em; color: var(--c-ice); }
.pp-hero__title small { display: block; font-family: var(--font-en); font-size: .32em; font-weight: 300; letter-spacing: .26em; color: var(--c-text-dim); margin-top: .7em; text-transform: uppercase; }
.pp-approach { max-width: 40em; font-size: 15px; line-height: 2.05; color: var(--c-text-dim); }

.pp-case { border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; background: rgba(16, 19, 22, .5); }
.pp-case + .pp-case { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.pp-case__head { padding: clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid var(--c-line); background: linear-gradient(180deg, rgba(135, 184, 214, .05), transparent); }
.pp-case__no { font-family: var(--font-en); font-size: 11px; letter-spacing: .24em; color: var(--c-ice); }
.pp-case__title { font-family: "A1\660E\671D", "Hiragino Mincho ProN", "\6E38\660E\671D", serif; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 600; letter-spacing: .03em; line-height: 1.45; margin: .5rem 0 .3rem; }
.pp-case__sub { font-size: 13px; color: var(--c-text-dim); }
.pp-case__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.pp-case__meta span { font-size: 10.5px; letter-spacing: .1em; color: var(--c-text-dim); border: 1px solid var(--c-line); border-radius: 999px; padding: .4em .95em; }
.pp-case__meta .role { color: var(--c-ice); border-color: rgba(135, 184, 214, .5); }
.pp-case__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line); }
.pp-case__body > div { background: var(--c-bg); padding: clamp(1.4rem, 2.5vw, 1.9rem); }
.pp-case__body h4 { font-family: var(--font-en); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-ice); margin-bottom: .8rem; }
.pp-case__body p { font-size: 13px; line-height: 1.95; color: var(--c-text-dim); }

@media (max-width: 820px) { .pp-case__body { grid-template-columns: 1fr; } }