/* 全ページ共通の固定背景。濃さ・大きさをここでまとめて調整する。 */
:root {
  --backdrop-map-opacity:.085;
  --backdrop-logo-opacity:.04;
}
body { isolation:isolate; }
.site-backdrop {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  /* 最初の画面は隠し、スクロールに合わせて本文側だけを表示する。 */
  clip-path:inset(var(--backdrop-top-clip, 100%) 0 0);
}
.site-backdrop img {
  position:absolute;
  display:block;
  max-width:none;
  height:auto;
  object-fit:contain;
  opacity:var(--backdrop-map-opacity);
  top:50%;
  transform:translate(-50%,-50%);
}
.site-backdrop .backdrop-japan {
  width:min(23vw,360px);
  left:17%;
}
.site-backdrop .backdrop-logo {
  width:min(27vw,440px);
  left:50%;
  opacity:var(--backdrop-logo-opacity);
}
.site-backdrop .backdrop-georgia {
  width:min(27vw,440px);
  left:83%;
}
/* 本文・写真・カードを背景より手前に置き、既存のレイアウトは維持する。 */
.site-shell { position:relative; z-index:1; }

/* フッターは左右の余白も含めて白い面で覆い、固定背景を透かさない。 */
.site-footer { position:relative; isolation:isolate; background:#fff; }
.site-footer::before {
  content:"";
  position:absolute;
  inset:0 calc(-1 * var(--page-gutter));
  z-index:-1;
  background:#fff;
  pointer-events:none;
}

/* 淡い色の大きな面では背景をわずかに透かす。入力欄や記事カードは白のまま。 */
.interview { background-color:rgb(255 252 233 / .84); }
.word { background-color:rgb(251 248 248 / .84); }
.contact { background-color:rgb(251 248 243 / .84); }
.soft-panel { background-color:rgb(255 243 241 / .82); }

@media (max-width:600px) {
  :root { --backdrop-map-opacity:.065; --backdrop-logo-opacity:.03; }
}
/* 印刷では装飾を省き、本文を優先する。 */
@media print {
  .site-backdrop { display:none; }
}