.main_parallax {
  width: 100%;
  height: 700px;
}
@media (max-width: 776px) {
  .main_parallax {
    height: 500px;
  }
}
.main_parallax {
  background-image: url(images/upload-1789616279722.webp);
}
@media (max-width: 776px) {
  .main_parallax {
    background-image: url(images/th39-bg-2.webp);
  }
}
.main_parallax {
  background-position: center right;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  isolation: isolate;
}
.main_parallax .main_parallax_copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 53;
}
.main_parallax .main_parallax_copy > li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main_parallax .main_parallax_copy > li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10.5833333333%;
  max-width: 127px;
  max-height: 500px;
  z-index: 52;
}

/* ── コピーは【HTMLテキスト】。元モジュールは画像を重ねていたが、文字を焼くと
   多言語化・SEO・可読性が壊れるため置き換えた(生成ルール No.6)。
   写真の上に重ねるので、可読性はスクリム(半透明の敷き)で確保する。
   ★text-shadow は使わない(No.11)。 */
.main_parallax .hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.3;
  color: var(--color-on-primary);
  margin: 0 0 .75rem;
  text-wrap: balance;
}
.main_parallax .hero-lead {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  line-height: 1.8;
  color: var(--color-on-primary);
  margin: 0;
}

/* ★スクリム未実装だった(2026-08-09 指摘「字が見にくい」)。
   このファイル冒頭のコメントが「写真の上に重ねるので可読性はスクリムで確保する・
   text-shadow は使わない(No.11)」と規定しているのに、実装が入っていなかった。
   背景は写真なので --color-on-primary は可読性を保証できない。暗いスクリム+白文字で固定する。 */
.main_parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.22) 45%, rgba(0,0,0,.5));
}
.main_parallax .main_parallax_copy { z-index: 2; }
.main_parallax .hero-title,
.main_parallax .hero-lead { color: #fff; }

/* iOS Safari は background-attachment:fixed を無視し、背景が拡大/ずれて見える。
   タブレット以下は scroll に倒す。 */
@media (max-width: 1024px) {
  .main_parallax { background-attachment: scroll; }
}