:root{
  --max: 1200px;
  --gap: 28px;
  --imgH: 560px;   /* ★PCでの“左画像エリアの高さ”をここで固定 */
  --radius: 14px;
  --text: #111;
  --muted: #666;
  --line: #e9e9e9;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; color:var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; }
a{ color: inherit; text-decoration: none; }

.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}
.brand{ font-weight: 700; letter-spacing: .08em; }
.nav{ display:flex; gap: 14px; color: var(--muted); font-size: 14px; }
.nav a:hover{ color: var(--text); }

.wrap{ background:#fff; }

.section{
  border-bottom: 1px solid var(--line);
}
.section .grid{
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 18px;
  display: grid;
  grid-template-columns: 1.7fr 1fr; /* ★左：右 = だいたいPDFの比率 */
  gap: var(--gap);
  align-items: start;
}

/* 左の画像エリア（サイズ指定の中心） */
.media{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f3f3f3;
  height: var(--imgH);     /* ★ここで高さ固定 */
}
.media img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* ★トリミングしてでも枠にフィット */
  display:block;
}

/* 右カラム（文章） */
.copy{
  padding: 8px 4px;
}
.copy h2{
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: .02em;
}
.lead{
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.75;
  font-weight: 600;
}
.copy p{
  margin: 0 0 10px;
  line-height: 1.85;
  color: var(--muted);
  font-size: 15px;
}

.buttons{ display:flex; flex-wrap:wrap; gap: 10px; margin: 14px 0 6px; }
.btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--text);
  background: var(--text);
  color:#fff;
  font-size: 14px;
}
.btn.ghost{
  background: transparent;
  color: var(--text);
}
.note{ font-size: 12px; color: var(--muted); }

.site-footer .inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 18px 36px;
  color: var(--muted);
}

/* ====== スマホ：縦積み＋画像高さを可変に ====== */
@media (max-width: 900px){
  :root{ --imgH: 52vh; }      /* ★スマホでは画面高さ基準に */
  .section .grid{
    grid-template-columns: 1fr;
  }
  .nav{ display:none; }
  .copy h2{ font-size: 22px; }
}

/* ====== さらに小さい：画像が長すぎる場合の保険 ====== */
@media (max-width: 420px){
  :root{ --imgH: 44vh; }
}