@charset "utf-8";
/* 写真だけを差し替える比較案。既存の構成と動きを共有する。 */
.heroJ.heroPhoto02 .heroBackdrop img { object-position: center 58%; }
.heroJ.heroPhoto02 .heroBackdrop::after { background: linear-gradient(90deg,rgba(255,250,237,.72),rgba(255,250,237,.46) 48%,rgba(255,250,237,.05) 80%); }
.heroJ.heroPhoto03 .heroBackdrop img { object-position: center 55%; }
.heroJ.heroPhoto03 .heroBackdrop::after { background: linear-gradient(90deg,rgba(255,252,241,.8),rgba(255,252,241,.58) 48%,rgba(255,252,241,.03) 82%); }
.heroJ.heroPhoto04 .heroBackdrop img { object-position: center 54%; }
.heroJ.heroPhoto04 .heroBackdrop::after { background: linear-gradient(90deg,rgba(248,252,255,.43),rgba(248,252,255,.23) 48%,rgba(248,252,255,0) 80%); }
.heroJ.heroPhoto02 .heroTitle em,
.heroJ.heroPhoto02 .heroTitle.isCharacterAnimated em .heroCharacter,
.heroJ.heroPhoto03 .heroTitle em,
.heroJ.heroPhoto03 .heroTitle.isCharacterAnimated em .heroCharacter { color: #165dc8; -webkit-text-fill-color: #165dc8; }
@media (max-width: 640px) {
 .heroJ.heroPhoto02 .heroBackdrop img { object-position: 54% center; }
 .heroJ.heroPhoto03 .heroBackdrop img { object-position: 54% center; }
 .heroJ.heroPhoto04 .heroBackdrop img { object-position: 65% center; }
 .heroJ.heroPhoto02 .heroBackdrop::after,
 .heroJ.heroPhoto03 .heroBackdrop::after { background: linear-gradient(180deg,rgba(255,251,239,.83),rgba(255,251,239,.72) 38%,rgba(255,251,239,.08) 66%); }
 .heroJ.heroPhoto04 .heroBackdrop::after { background: linear-gradient(180deg,rgba(248,252,255,.67),rgba(248,252,255,.49) 38%,rgba(248,252,255,.02) 66%); }
}
@media (forced-colors: active) {
 .heroJ[class*="heroPhoto"] .heroTitle em,
 .heroJ[class*="heroPhoto"] .heroTitle.isCharacterAnimated em .heroCharacter { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
/* 写真の色温度に合わせたXの透過色。 */
.heroJ.heroPhoto02 .heroXOverlay::before,
.heroJ.heroPhoto02 .heroXOverlay::after { background: linear-gradient(180deg,rgba(255,244,219,.4),rgba(255,244,219,.62) 50%,rgba(255,244,219,.44)); }
.heroJ.heroPhoto03 .heroXOverlay::before,
.heroJ.heroPhoto03 .heroXOverlay::after { background: linear-gradient(180deg,rgba(239,248,237,.4),rgba(239,248,237,.62) 50%,rgba(239,248,237,.44)); }
.heroJ.heroPhoto04 .heroXOverlay::before,
.heroJ.heroPhoto04 .heroXOverlay::after { background: linear-gradient(180deg,rgba(233,244,255,.4),rgba(233,244,255,.62) 50%,rgba(233,244,255,.44)); }
/* ゆっくりと寄る動きを各写真で共通化。 */
.heroJ.heroPhoto02 .heroBackdrop img,
.heroJ.heroPhoto03 .heroBackdrop img,
.heroJ.heroPhoto04 .heroBackdrop img { animation: heroJPatternZoom 24s ease-in-out infinite alternate; transform-origin: 60% 55%; }
@keyframes heroJPatternZoom {
 from { transform: scale(1.015); }
 to { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
 .heroJ.heroPhoto02 .heroBackdrop img,
 .heroJ.heroPhoto03 .heroBackdrop img,
 .heroJ.heroPhoto04 .heroBackdrop img { animation: none; transform: none; }
}

/* 04案：左の舗装面を広く見せ、人物をコピーの右下へ寄せる。 */
@media (min-width: 641px) {
 .heroJ.heroPhoto04 .heroBackdrop img { object-position: left top; transform-origin: left top; animation-name: heroJPhoto04Zoom; }
}
@keyframes heroJPhoto04Zoom {
 from { transform: scale(1.22); }
 to { transform: scale(1.3); }
}
@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
 .heroJ.heroPhoto04 .heroBackdrop img { animation: none; transform: scale(1.22); }
}