/* ===== 予約フォーム埋め込み（Amelia Booking / WordPress） =====
   予約システムは marushinspa.jp/reserve_wp/ にある WordPress。
   新サイトと同一ドメインなので iframe の中身に親からCSSを流し込め、
   WordPressテーマのヘッダー・フッター・サイトタイトルを消せる。
   制御は js/reserve-embed.js。
   このCSSとJSを読み込めば、任意のページに下記マークアップで設置できる:

     <div class="reserve-embed-wrap">
       <div class="reserve-loading">
         <div class="reserve-spinner"></div><span>読み込み中</span>
       </div>
       <iframe class="reserve-frame" src="（予約ページURL）" scrolling="no"></iframe>
     </div>
*/

.reserve-embed-wrap {
  max-width:900px;
  margin:0 auto;
  position:relative;
  min-height:620px;
  /* 縮小表示（js側の scale）を使ったときのはみ出しを隠す */
  overflow:hidden;
}
.reserve-frame {
  display:block;
  /* ▼ スマホで左右が切れるのを防ぐ重要な指定 ▼
     iOS Safari は width:100% の iframe を「枠の幅」ではなく
     「中身の本来の幅」まで勝手に広げてしまう。その結果、
     iframe内のビューポートがPC幅のままになり、レイアウトが
     切り替わらず左右がはみ出して切れる。
     width:1px + min-width:100% にすると枠の幅が正しく伝わり、
     iframe内が「スマホ幅のビューポート」として認識される。
     ※ width:100% に戻すと同じ症状が再発するので変更しないこと。 */
  width:1px;
  min-width:100%;
  max-width:100%;
  height:620px;
  border:0;
  overflow:hidden;
  background:transparent;
  /* 高さ調整が終わるまでは隠しておき、WPヘッダーのちらつきを見せない */
  opacity:0;
  transition:opacity .4s ease;
}
.reserve-frame.is-ready { opacity:1; }

/* 読み込み中プレースホルダ */
.reserve-loading {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  color:#8b8b8b; font-size:13px; letter-spacing:.08em;
}
.reserve-loading.is-hidden { display:none; }

/* スピナーと踊る人を同じ場所に重ねて置き、読み込み具合で入れ替える。
   高さを固定しているのは、切り替わるときに下の文字がガタつかないようにするため。 */
.reserve-loading-art {
  position:relative;
  width:110px; height:150px;
  display:flex; align-items:center; justify-content:center;
}
.reserve-spinner {
  width:30px; height:30px;
  border:2px solid #333333;
  border-top-color:#2267B2;  /* 黒背景用 */
  border-radius:50%;
  animation:reserve-spin .9s linear infinite;
  transition:opacity .3s;
}
@keyframes reserve-spin { to { transform:rotate(360deg); } }

/* 踊る人。読み込みが終わるまでは隠しておく（js が .is-art-ready を付ける） */
.reserve-dancer {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  height:150px; width:auto; display:block;
  opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.reserve-loading.is-art-ready .reserve-dancer { opacity:1; }
.reserve-loading.is-art-ready .reserve-spinner { opacity:0; }

/* 動きを減らす設定にしている人には、アニメーションを見せない */
@media (prefers-reduced-motion: reduce) {
  .reserve-dancer { display:none; }
  .reserve-loading.is-art-ready .reserve-spinner { opacity:1; }
  .reserve-spinner { animation-duration:2s; }
}

@media(max-width:768px){
  .reserve-loading-art { width:90px; height:120px; }
  .reserve-dancer { height:120px; }
}

/* 別ドメイン扱いになった場合のフォールバック（枠内スクロール＋外部リンク） */
.reserve-embed-wrap.is-fallback .reserve-frame {
  height:1180px;
  overflow:auto;
}
.reserve-fallback-note {
  display:none;
  margin:16px auto 0;
  max-width:640px;
  padding:12px 16px;
  background:#fafaf8;
  border:1px solid #e8e4de;
  font-size:12px; line-height:1.9; color:#777;
  text-align:center;
}
.reserve-embed-wrap.is-fallback + .reserve-fallback-note { display:block; }

/* 補足テキスト（設置ページ側で任意に使う） */
.reserve-note {
  max-width:640px;
  margin:36px auto 0;
  font-size:12.5px; line-height:2; color:#777;
  text-align:left;
}
.reserve-note strong { color:#333; font-weight:600; }

@media(max-width:768px){
  .reserve-embed-wrap { min-height:560px; }
  .reserve-frame { height:560px; }
  .reserve-embed-wrap.is-fallback .reserve-frame { height:1400px; }
}