/* =========================================================
   浜辺ネット v4
   ポールは垂直のまま、奥と手前へ位置をずらして遠近感を作る。
   ========================================================= */

/* 画面全体を座標系として使う。ネット全体は回転させない。 */
.room-stage[data-scene="beach"] .room-volleynet.room-volleynet-upright {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  transform-origin: center;
  z-index: 2;
  pointer-events: none;
}

.room-stage[data-scene="beach"] .room-volleynet.room-volleynet-upright svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: none;
}

/* 地面の影。手前側を大きく濃くする。 */
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-ground-shadow {
  fill: rgba(94, 75, 42, .18);
  filter: blur(.55px);
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-ground-shadow-near {
  fill: rgba(83, 63, 31, .31);
  filter: blur(.8px);
}

/* 網の裏面と表面。裏面を少しずらして厚みを出す。 */
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-net-back {
  fill: rgba(132, 148, 160, .11);
  stroke: rgba(111, 126, 137, .27);
  stroke-width: .5;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-net-face {
  fill: url(#v4-net);
  stroke: rgba(225, 235, 242, .74);
  stroke-width: .45;
  filter: drop-shadow(1.3px 1.4px 1px rgba(77, 70, 52, .15));
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-net-mesh line {
  stroke: rgba(255, 255, 255, .94);
  stroke-width: .34;
}

/* 上下テープ。手前側は太いポリゴンで描画済み。 */
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-tape {
  fill: url(#v4-tape);
  stroke: rgba(132, 146, 157, .72);
  stroke-width: .36;
  filter: drop-shadow(.8px .9px .5px rgba(70, 65, 51, .20));
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-tape-bottom {
  filter: drop-shadow(1.3px 1.3px .8px rgba(65, 58, 42, .24));
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-side-cord {
  fill: none;
  stroke: #d7e0e7;
  stroke-linecap: round;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-side-cord-far {
  stroke-width: .62;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-side-cord-near {
  stroke-width: 1.05;
}

/* 2本のポールはどちらも垂直。サイズ差だけで奥行きを表現する。 */
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-post-far {
  fill: url(#v4-post-far);
  stroke: #7f8b95;
  stroke-width: .34;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-post-near {
  fill: url(#v4-post-near);
  stroke: #68737d;
  stroke-width: .46;
  filter: drop-shadow(1.8px 1.8px 1.2px rgba(62, 56, 43, .25));
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-post-cap {
  fill: #f8fbfd;
  stroke: #89959f;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-post-cap-far {
  stroke-width: .3;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-post-cap-near {
  stroke-width: .46;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-post-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-linecap: round;
  stroke-width: .42;
}

/* 支柱の足元。手前側を大きくして接地感を出す。 */
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-foot {
  fill: #c7af72;
  stroke: #8f7845;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-foot-far {
  stroke-width: .3;
}
.room-stage[data-scene="beach"] .room-volleynet-upright .v4-foot-near {
  fill: #bda262;
  stroke-width: .46;
  filter: drop-shadow(1.5px 1.4px .8px rgba(81, 64, 35, .25));
}

@media (max-width: 390px) {
  .room-stage[data-scene="beach"] .room-volleynet-upright .v4-net-mesh line {
    stroke-width: .39;
  }
}