/* 縦長の水面では工房名と入口を再配置し、指で触れられる余白を残す。 */
@media (max-width: 700px) {
  .installation { min-height: 650px; }
  .signature { left: 7%; top: 4%; font-size: 16px; }
  /* 入口の内側の余白を差し引き、ウェブの文字と作品の左端を揃える。 */
  .portal-web { left: calc(10% - 10px); top: 13%; }
  .portal-web::after { width: 37px; }
  .portal-web i { left: 151px; top: 73px; }
  /* 開閉の前後も入口を同じ場所に保ち、本文の右側に音の入口を残す。 */
  .portal-sound { left: 82%; top: 49%; }
  .portal-about { left: 57%; top: 77%; }
  .work-panel { left: 10%; top: 45%; width: 68%; padding: 20px 0; }
  /* 制作物が二件並んでも、下側の入口と閉じる操作が重ならない位置に置く。 */
  html[data-open='web'] .work-panel { top: 30%; }
  .work-panel h2 { font-size: 22px; margin-bottom: 20px; }
  .work-panel p { font-size: 14px; }
  html[data-open] .portal-sound::after, html[data-open] .portal-about::after,
  html[data-open] .portal-sound i, html[data-open] .portal-about i { display: none; }
  .no-script { left: 10%; top: 45%; width: 76%; }
}
/* 小さい画面では指の縦移動をスクロールに譲り、長押しによる魚の追従は残す。 */
@media (max-height: 700px) {
  #water { touch-action: pan-y pinch-zoom; }
}
/* 横向きでは説明を上に寄せ、入口と重ねずに短いスクロールで最後まで読める。 */
@media (min-width: 701px) and (max-height: 600px) {
  .installation { min-height: 390px; }
  .portal-web { left: 7%; top: 14%; }
  .portal-sound { left: 81%; top: 36%; }
  .portal-about { left: 81%; top: 82%; }
  .work-panel { left: 29%; top: max(56px, 12%); width: 45%; }
  html[data-open] .portal-sound::after, html[data-open] .portal-about::after,
  html[data-open] .portal-sound i, html[data-open] .portal-about i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}