/* シェアハウスわいが舎 — 自前の追加スタイル
   ------------------------------------------------------------------
   「わいが舎が選ばれる3つの理由」の写真2枚組について。
   PCではテキストの横に写真をずらして並べる設計になっているが、
   その比率がそのまま縮むため、スマホでは横123px（画面の32%）まで
   小さくなり、左側に112pxの死んだ余白ができていた。
   タブレット幅でも同様（211px・左余白250px）。
   1023px以下では縦積みの全幅に組み替える。PCは元のまま。         */

@media (max-width: 1023px) {
  .wg-photo-pair {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  /* 写真を包んでいる要素の幅指定とずらしを解除する */
  .wg-photo-pair > * {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    inset: auto !important;
    position: relative !important;
  }
  /* 縦長・横長が混ざっているので比率を揃える */
  .wg-photo-pair img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ヒーロースライダーの写真の大きさを揃える
   ------------------------------------------------------------------
   元は縦長(3:4)の中に横長(4:3)が1枚混ざっており、その1枚だけ
   下に67pxの空きができていた。スライド枠にぴったり収まるように
   切り抜いて、どの写真も同じ大きさに見せる。                    */
[data-s-87f527ea-f13b-452b-b19a-ce3092c31613] > * > img,
[data-s-87f527ea-f13b-452b-b19a-ce3092c31613] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ハンバーガーメニューのモーダル
   ------------------------------------------------------------------
   STUDIOのCSSは .design-canvas__modal を position:fixed にしているが
   top/left を指定していない。fixed で top が無いと「本来そこにあった
   はずの位置」を基準に置かれるため、bodyの末尾に差し込むと
   ページ最下部（18,755px下）に飛んで画面に出てこない。
   さらに pointer-events:none が効いていてリンクも押せない。
   自分で差し込む以上、位置と操作可否はこちらで担保する。       */
.design-canvas__modal {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.design-canvas__modal .studio-canvas,
.design-canvas__modal .studio-canvas > * {
  pointer-events: auto !important;
}

/* CSS背景画像の遅延読み込み
   ------------------------------------------------------------------
   STUDIOは写真の多くを ::before の background-image で置いている。
   background-image には loading="lazy" が使えないため、トップでは
   読み込み完了前に1,731KB（全体の88%）が一気に走っていた。
   画面外の間だけ背景を無効化して、近づいたらJSでクラスを外す。 */
.wg-bg-off::before,
.wg-bg-off::after { background-image: none !important; }
.wg-bg-off-self   { background-image: none !important; }

/* YouTubeの埋め込みをクリックで読み込む
   ------------------------------------------------------------------
   埋め込みiframeは表示した瞬間に約1MB読み込む。サムネイルに置き換えて
   押されたときだけ本物を出す。見た目は元の枠にそのまま収める。   */
.wg-yt {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  background: #000;
  overflow: hidden;
}
.wg-yt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wg-yt__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .62);
  transition: background .2s;
}
.wg-yt:hover .wg-yt__play { background: #ff0000; }
.wg-yt__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.wg-yt iframe { width: 100%; height: 100%; border: 0; display: block; }