/* スクロールでズームイン表示：初期状態 */
.zoomin {
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center center;
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.zoomin.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* 任意のディレイ（必要なら） */
.zoomin[data-delay="100"] { transition-delay: .1s; }
.zoomin[data-delay="200"] { transition-delay: .2s; }
.zoomin[data-delay="300"] { transition-delay: .3s; }

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  .zoomin { opacity: 1; transform: none; transition: none; }
}

/* PCで #main を固定幅＋中央寄せ */
@media (min-width: 981px) {
  #main {
    width: 960px;           /* 好きな固定幅に */
    max-width: 960px;
    margin-inline: auto;    /* 中央寄せ */
  }
}

/* スマホは全幅に（必要に応じて内側余白） */
@media (max-width: 980px) {
  #main {
    width: 100%;
    max-width: none;
    padding-inline: 1rem;   /* 端に張り付きすぎるなら調整 */
  }
}

/* logo.png をウインドウに合わせて可変表示（このページ限定） */
.fix-imgs #main article.post img[src$="logo.png"] {
  /* 最小 220px、通常はビューポートの40%、最大 480px に収まる */
  width: clamp(220px, 40vw, 480px) !important;
  height: auto !important;
  max-width: 100% !important;  /* 親幅を越えない保険 */
  display: block;
  margin-inline: auto;         /* 中央寄せ */
}


/* enter.png をこのページだけ 50% 表示に強制 */
.fix-imgs #main article.post a.image.featured img[src$="enter.png"] {
  width: 50% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block;
  margin-inline: auto; /* 中央寄せ */
}

/* クリック範囲（アンカー）も半分にしたい場合は追加（任意） */
.fix-imgs #main article.post a.image.featured[href="main.html"] {
  width: 50% !important;
  margin-inline: auto;
}