/* =========================================================
   ZEH Page CSS (WordPress / page-template-page-zeh-php)
   - 画像は .zeh-ph（div背景）で統一
   - 上余白は --zeh-top-gap で調整
   ========================================================= */

/* ---- Variables ---- */
:root{
  --ink:#0b1020;
  --muted:#55607a;
  --line:rgba(15,23,42,.14);
  --paper:#ffffff;
  --bg:#f4f6fb;
  --navy:#0b2a5b;
  --navy2:#123c7c;
  --gold:#b9a26a;
  --radius:18px;
  --shadow2:0 10px 22px rgba(0,0,0,.08);
  --max:1100px;

  /* ヘッダー下に白い余白が残る時だけ増やす（例: 60〜110px） */
  --zeh-top-gap: 80px;

  /* Benefitsアイコン */
  --benefit-icon-size: 56px;
  --benefit-icon-radius: 18px;

  /* ✅「ZEH-M Orientedとは」の画像は切らない設定（ここだけ） */
  /* 画像の縦横比に合わせて調整したい時はここを変更 */
  /* 例：横長16:9なら 16 / 9、今回みたいに横長で高さが必要なら 16 / 8〜16 / 9 推奨 */
  --zeh-about-ratio: 16 / 9;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  color:var(--ink);
  background: linear-gradient(180deg, #eef2fb 0%, var(--bg) 18%, #fff 60%);
}

a{ color:inherit; text-decoration:none; }
.zeh-container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

/* =========================================================
   WP Theme Override (ZEH page only)
   ========================================================= */
body.page-template-page-zeh-php .page-head,
body.page-template-page-zeh-php .page-top,
body.page-template-page-zeh-php .lower-mv,
body.page-template-page-zeh-php .mv,
body.page-template-page-zeh-php .p-mv,
body.page-template-page-zeh-php .c-mv,
body.page-template-page-zeh-php .page-mv,
body.page-template-page-zeh-php .page-kv,
body.page-template-page-zeh-php .page-header,
body.page-template-page-zeh-php .page-title-area,
body.page-template-page-zeh-php .page-title,
body.page-template-page-zeh-php .title-area{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

body.page-template-page-zeh-php .header-space,
body.page-template-page-zeh-php .header-spacer,
body.page-template-page-zeh-php .fixed-header-space,
body.page-template-page-zeh-php .fixed-header-spacer{
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

body.page-template-page-zeh-php .page-contents,
body.page-template-page-zeh-php .contents-inner,
body.page-template-page-zeh-php .main,
body.page-template-page-zeh-php .zeh-main,
body.page-template-page-zeh-php #content,
body.page-template-page-zeh-php .site-content,
body.page-template-page-zeh-php .l-wrapper{
  padding-top:0 !important;
  margin-top:0 !important;
}

body.page-template-page-zeh-php .page-contents > *:first-child,
body.page-template-page-zeh-php .contents-inner > *:first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}

body.page-template-page-zeh-php{ overflow-x:clip; }
@supports not (overflow: clip){
  body.page-template-page-zeh-php{ overflow-x:hidden; }
}

/* =========================================================
   Hero
   ========================================================= */
.zeh-hero{
  position:relative;
  min-height: 340px;
  display:flex;
  align-items:flex-end;
  padding: 56px 0 44px;
  overflow:hidden;

  /* 白い余白が残る場合の相殺 */
  margin-top: calc(var(--zeh-top-gap) * -1);
}

.zeh-hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(11,42,91,.55), rgba(11,42,91,.15)),
    radial-gradient(1000px 520px at 20% 0%, rgba(185,162,106,.30), transparent 55%),
    url("https://www.real-link.co.jp/wp-content/uploads/2026/01/c4a6be9021365f9b1757da44c015459c.jpg");
  background-size: cover;
  background-position:center;
  transform: scale(1.02);
}

.zeh-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.50) 70%, rgba(0,0,0,.62) 100%);
  mix-blend-mode:multiply;
}

.zeh-hero__inner{ position:relative; z-index:1; }

.zeh-kicker{
  display:inline-block;
  margin:0 0 10px;
  padding: 6px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  letter-spacing:.10em;
  font-size: 12px;
}

.zeh-title{
  margin:0;
  color:#fff;
  font-weight: 700;
  letter-spacing:.02em;
  font-size: clamp(30px, 3.8vw, 44px);
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* =========================================================
   Breadcrumb
   ========================================================= */
.zeh-breadcrumb{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.zeh-breadcrumb__list{
  list-style:none;
  display:flex;
  gap:10px;
  padding: 14px 0;
  margin:0;
  align-items:center;
  color: var(--muted);
  font-size: 13px;
}
.zeh-breadcrumb__list a{
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zeh-breadcrumb__sep{ opacity:.6; }

/* =========================================================
   Sections
   ========================================================= */
.zeh-main{ padding: 26px 0 54px; }

.zeh-sec{
  margin-top: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 22px;
}

.zeh-sec__head{
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  margin-bottom: 16px;
}

.zeh-sec__eyebrow{
  margin:0 0 8px;
  color: var(--gold);
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.zeh-sec__title{
  margin:0;
  font-size: 22px;
  letter-spacing:.01em;
}

/* =========================================================
   Layout Helpers
   ========================================================= */
.zeh-two{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items:start;
}

.zeh-prose p{
  margin:0;
  line-height:1.95;
  color: var(--muted);
  font-size: 15px;
}

.zeh-figure{ margin:0; }
.zeh-figcap{
  margin-top:10px;
  color: rgba(85,96,122,.85);
  font-size: 12px;
}

/* =========================================================
   Image Placeholder (背景画像で統一)
   ========================================================= */
.zeh-ph{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  position: relative;
  overflow: hidden;

  /* デフォは cover（見た目優先） */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* “差し替えてください”は非表示（本番想定） */
.zeh-ph::after{ content:""; display:none; }

/* 比率（必要に応じて個別上書きOK） */
.zeh-ph--wide{ aspect-ratio: 16/9; }
.zeh-ph--card{ aspect-ratio: 4/3; }

/* ✅ここがポイント：about は切れやすいので “contain” にする */
.zeh-ph--about{
  margin-top: 14px;

  /* 切れないように */
  background-size: contain;
  background-color: #fff;

  /* 画像に合わせて比率を調整できるよう変数化 */
  aspect-ratio: var(--zeh-about-ratio);
}

.zeh-ph--spec{ aspect-ratio: 16/10; border-radius: 18px; }
.zeh-ph--org{ aspect-ratio: 16/7; }

/* 個別画像（背景） */
#zeh-banner{
  background-image: url("https://www.real-link.co.jp/wp-content/uploads/2026/01/360_F_232412483_FLyYBIp3ZMaNlooL7sRbSEn6RaC6QHnW.jpg") !important;
}

#zeh-banner01{
  background-image: url("https://www.real-link.co.jp/wp-content/uploads/2026/01/br01-1.png") !important;
  aspect-ratio: 16 / 6;
  width: 100%;
  border-radius: 12px;
  background-size: contain;
  background-color: #fff;
}

#zeh-banner02{
  background-image: url("https://www.real-link.co.jp/wp-content/uploads/2026/01/4da77518507e37851c2e891e94693686.jpg") !important;
}

/* 体制図：切らない（contain） */
#zeh-org-chart{
  background-image: url("https://www.real-link.co.jp/wp-content/uploads/2026/01/system-1.png") !important;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
}

/* =========================================================
   Callout
   ========================================================= */
.zeh-callout{
  margin-top: 16px;
  border-radius: 18px;
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(185,162,106,.18), transparent 60%),
    linear-gradient(135deg, rgba(11,42,91,.08), rgba(11,42,91,.02));
  border: 1px solid rgba(15,23,42,.10);
  padding: 16px;
}

.zeh-callout__inner{
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:space-between;
}

.zeh-callout__lead{
  margin:0;
  line-height:1.9;
  color: var(--muted);
  font-size: 14px;
}

.zeh-callout__mark{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.08em;
  box-shadow: var(--shadow2);
}

/* =========================================================
   Performance（縦並び固定）
   ========================================================= */
.zeh-performance{
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items: stretch;
}

.zeh-performance__text{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, #fbfcff);
  width: 100%;
}

.zeh-performance__text p{
  margin:0;
  line-height:1.95;
  color: var(--muted);
  font-size: 15px;
}

.zeh-performance__media{
  width:100%;
  display:block;
}

/* WordPressで img を挿入しても “切れずに収まる” */
.zeh-performance__media img{
  display:block;
  width:100%;
  height:auto !important;
}

/* =========================================================
   Benefits
   ========================================================= */
.zeh-benefits{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.zeh-benefit{
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.zeh-benefit__icon{
  width: var(--benefit-icon-size);
  height: var(--benefit-icon-size);
  border-radius: var(--benefit-icon-radius);
  border: 1px solid rgba(15,23,42,.10);
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}

.zeh-benefits .zeh-benefit:nth-child(1) .zeh-benefit__icon{
  background-image: url("https://www.real-link.co.jp/wp-content/uploads/2026/01/istockphoto-1323550608-612x612-1.jpg");
}
.zeh-benefits .zeh-benefit:nth-child(2) .zeh-benefit__icon{
  background-image: url("https://www.real-link.co.jp/wp-content/uploads/2026/01/pngtree-green-vegan-heart-leaf-icon-representing-a-healthy-and-eco-friendly-png-image_17811753.png");
}
.zeh-benefits .zeh-benefit:nth-child(3) .zeh-benefit__icon{
  background-image: url("https://www.real-link.co.jp/wp-content/uploads/2026/01/360_F_553850327_8KeZTQ1Qf9lo7Mt1vlQDa7mIDT1gROXk.jpg");
}

.zeh-benefit__tag{
  margin:0 0 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.12em;
}

.zeh-benefit__title{
  margin:0 0 6px;
  font-size: 16px;
  letter-spacing:.01em;
}

.zeh-benefit__text{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}

/* =========================================================
   Specs
   ========================================================= */
.zeh-specs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.zeh-spec{
  overflow:hidden;
  border-radius: 18px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.zeh-spec__meta{ padding: 14px 14px 16px; }
.zeh-spec__lead{
  margin:0 0 6px;
  color: var(--muted);
  font-size: 13px;
}
.zeh-spec__title{
  margin:0;
  font-size: 16px;
}

/* =========================================================
   Org
   ========================================================= */
.zeh-org{
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, #fbfbff);
  border: 1px dashed rgba(15,23,42,.18);
}

/* =========================================================
   Footer
   ========================================================= */
.zeh-footer{
  padding: 28px 0 44px;
  color: rgba(85,96,122,.9);
  font-size: 13px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .zeh-two{ grid-template-columns: 1fr; }
  .zeh-benefits{ grid-template-columns: 1fr; }
  .zeh-specs{ grid-template-columns: 1fr; }

  .zeh-container{ width: min(var(--max), calc(100% - 24px)); }

  .zeh-hero{
    min-height: 280px;
    padding: 40px 0 34px;
  }

  .zeh-title{
    font-size: clamp(26px, 6vw, 36px);
    line-height: 1.2;
  }
}

@media (max-width: 600px){
  .zeh-sec{ padding: 16px; }
  .zeh-sec__head{ padding-bottom: 12px; margin-bottom: 12px; }
  .zeh-sec__title{ font-size: 18px; }

  .zeh-prose p,
  .zeh-performance__text p{
    font-size: 14px;
    line-height: 1.9;
  }

  .zeh-benefit{ padding: 14px; }

  /* スマホだけアイコン小さめ */
  :root{
    --benefit-icon-size: 44px;
    --benefit-icon-radius: 14px;
  }

  /* スマホは縦が足りなくなりやすいので比率を少し高める */
  body{
    /* ここは安全策：スマホは 16/10 くらいが見やすい */
  }
}

/* 画像・要素のはみ出し対策 */
.zeh-wp, .zeh-wp *{ max-width: 100%; }
.zeh-wp img, .zeh-wp svg, .zeh-wp video, .zeh-wp iframe{
  max-width: 100%;
  height: auto;
}