@charset "UTF-8";
/* =========================================================
   家族成人式 LP 京都・旧邸御室（/kyoto-omuro/）
   画像コーディング（セクション画像＋重ねる HTML）
   デザイン基準幅 390px（Figma）。--u = Figma 1px。
   PC も SP と同じ見え方（max-width 750px 中央寄せ）
   ========================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: #f5f5f5;
  color: #000;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: 1.5;
  /* 固定ボタンがページ末尾を隠さないための余白（ボタン高さ 40 + 下余白 10 + ゆとり） */
  padding-bottom: calc(min(100vw, 750px) * 60 / 390 + env(safe-area-inset-bottom, 0px));
}

/* LP コンテナ ------------------------------------------------ */
.lp {
  --u: calc(100cqw / 390);
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  container-type: inline-size;
  overflow: hidden;
}

.lp__img {
  display: block;
  width: 100%;
  height: auto;
}

.lp__h1 { font-size: inherit; font-weight: inherit; }

/* 画像の上に HTML を重ねるブロック */
.lp__block { position: relative; }

/* ページ内アンカー先（ブロック上端から --t design px） */
.lp__anchor {
  position: absolute;
  top: calc(var(--u) * var(--t));
  left: 0;
}

/* =========================================================
   ご予約はこちら（画像内ボタンの上に重ねる）
   Figma: x65 w260 h86（Group 550 のうちボタン本体）
   ========================================================= */
.cta {
  position: absolute;
  top: calc(var(--u) * var(--t));
  left: calc(var(--u) * 65);
  width: calc(var(--u) * 260);
  height: calc(var(--u) * 86);
  border-radius: 999px;
  overflow: hidden;                  /* 光をピル形状にクリップ */
  display: block;
}
.cta img {
  display: block;
  width: 100%;
  height: 100%;
}
.cta:focus-visible,
.lp-fixed:focus-visible,
.lp-form__submit:focus-within {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

/* キラッと光が走るエフェクト（KiRARA yachiyo LP と同じ動き） */
.cta::before,
.lp-form__submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .85) 45%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-45deg);
  animation: cta-shine 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes cta-shine {
  0%   { left: -100%; }
  25%  { left: 100%; }
  100% { left: 100%; }
}

/* =========================================================
   写真スライダー（Figma y6406〜6742 / 帯の高さ 336）
   メイン 390×260（y6417）・サムネ 80×53 間隔5（y6689）右端はみ出し
   ========================================================= */
.lp-slider {
  background: #fff;
  padding-top: calc(var(--u) * 11);
  height: calc(var(--u) * 336);
}
.lp-slider__main {
  width: 100%;
  height: calc(var(--u) * 260);
}
.lp-slider__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-slider__thumbs {
  margin-top: calc(var(--u) * 12);
  height: calc(var(--u) * 53);
}
.lp-slider__thumbs .swiper-slide {
  width: calc(var(--u) * 80);
  height: 100%;
  cursor: pointer;
}
.lp-slider__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   MOVIE（Figma image 3: y7111 h219）
   ========================================================= */
.lp-movie__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   Google Map（Figma Rectangle 18: y12641 h418 → s21 上端から 273）
   ========================================================= */
.lp-map {
  position: absolute;
  top: calc(var(--u) * 273);
  left: 0;
  width: 100%;
  height: calc(var(--u) * 418);
  border: 0;
  display: block;
}

/* =========================================================
   予約フォーム（Figma y17740〜19727 / 高さ 1987）
   ========================================================= */
.lp-form {
  --fs-label: calc(var(--u) * 16);
  background: #fff;
  min-height: calc(var(--u) * 1987);
  padding: calc(var(--u) * 23) calc(var(--u) * 30) calc(var(--u) * 87);
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: #000;
}

/* 種別ラジオ（○ 22px / 線 1px。x31 と x172） */
.lp-form__type {
  height: calc(var(--u) * 33);
  padding-left: calc(var(--u) * 1);
}
.lp-form__type .wpcf7-form-control-wrap,
.lp-form__type .wpcf7-radio {
  display: flex;
}
.lp-form__type .wpcf7-list-item { margin: 0; }
.lp-form__type .wpcf7-list-item.first { width: calc(var(--u) * 141); }
.lp-form__type label {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 33);
  cursor: pointer;
}
.lp-form__type input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  margin: 0 calc(var(--u) * 3) 0 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.lp-form__type input:checked {
  background: radial-gradient(circle, #000 0 38%, #fff 42%);
}
.lp-form__type .wpcf7-list-item-label {
  font-size: calc(var(--u) * 18);
  line-height: 1;
  letter-spacing: .04em;
}

/* 各項目（ラベル 33 + 2 + 入力枠 45） */
.lp-form__row { margin-top: calc(var(--u) * var(--mt, 22)); }
.lp-form__row.is-hidden { display: none; }
.lp-form__label {
  display: block;
  font-size: var(--fs-label);
  line-height: calc(var(--u) * 33);
  letter-spacing: .03em;
  margin-bottom: calc(var(--u) * 2);
}
.lp-form__req {
  color: #b33333;
  font-size: calc(var(--u) * 12);
  line-height: 1;                    /* 小さい文字で行ボックスが伸びないように */
  letter-spacing: 0;
}
.lp-form__row--note .lp-form__label {
  line-height: calc(var(--u) * 22);
  margin-bottom: calc(var(--u) * 3);
}
.lp-form__note {
  display: block;
  color: #000;
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 26);
  letter-spacing: .035em;
}
.lp-form__row--textarea .lp-form__label { margin-bottom: calc(var(--u) * 7); }

.lp-form .wpcf7-form-control-wrap { display: block; }

.lp-form__input,
.lp-form__select,
.lp-form__textarea {
  display: block;
  width: 100%;
  height: calc(var(--u) * 45);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid #3d3d3d;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: max(16px, calc(var(--u) * 16));   /* iOS のフォーカス時ズームを防ぐため 16px 未満にしない */
  appearance: none;
  -webkit-appearance: none;
}
.lp-form__select {
  padding-right: calc(var(--u) * 36);
  /* ▼ Figma: 幅11 高9.5、枠の右端から 16・上端から 19.5（位置指定は枠線 1px の内側基準） */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3E%3Cpath d='M0 0h22L11 19z' fill='%233d3d3d'/%3E%3C/svg%3E") no-repeat right calc(var(--u) * 15) top calc(var(--u) * 18.5) / calc(var(--u) * 11) calc(var(--u) * 9.5);
  cursor: pointer;
}
.lp-form__textarea {
  height: calc(var(--u) * 200);
  padding-block: calc(var(--u) * 10);
  resize: vertical;
  line-height: 1.6;
}

/* 個人情報の取り扱い（Figma y19093 / 本文 13px 相当・行送り 21） */
.lp-form__privacyLead {
  margin-top: calc(var(--u) * 44);
  font-size: calc(var(--u) * 12.6);
  line-height: calc(var(--u) * 21);
  letter-spacing: -.02em;
  margin-right: calc(var(--u) * -1);  /* Figma のテキスト枠は幅 331 */
}
/* Figma の改行位置で折り、行を両端揃えにする（幅は cqw で比例縮小するので折り位置は全幅で不変） */
.lp-form__privacyLead span {
  display: block;
  letter-spacing: -.04em;            /* 詰めて1行に収め、両端揃えで Figma の字送りに戻す */
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
}

/* プライバシーポリシー全文（枠内スクロール。Figma y19218 h203） */
.lp-form__privacy {
  margin-top: calc(var(--u) * 20);
  height: calc(var(--u) * 203);
  overflow-y: auto;
  border: 1px solid #3d3d3d;
  padding: calc(var(--u) * 21) calc(var(--u) * 5) calc(var(--u) * 16) calc(var(--u) * 19);
  font-size: calc(var(--u) * 12.35);
  line-height: calc(var(--u) * 20);
  letter-spacing: 0;
}
/* Chrome は scrollbar-color があると ::-webkit-scrollbar を無視するため、非対応ブラウザ（Firefox）だけに当てる */
@supports not selector(::-webkit-scrollbar) {
  .lp-form__privacy { scrollbar-color: #c9c8c8 #e6e6e6; }
}
.lp-form__privacy p + p { margin-top: calc(var(--u) * 20); }
.lp-form__privacy::-webkit-scrollbar { width: calc(var(--u) * 9); }
/* トラック幅 7（x350〜357）・枠との間 2 */
.lp-form__privacy::-webkit-scrollbar-track {
  background: #e6e6e6;
  background-clip: padding-box;
  border-right: calc(var(--u) * 2) solid transparent;
  margin-block: calc(var(--u) * 3);
}
.lp-form__privacy::-webkit-scrollbar-thumb {
  background: #c9c8c8;
  background-clip: padding-box;
  border-top: calc(var(--u) * 3) solid transparent;
  border-right: calc(var(--u) * 2) solid transparent;
  min-height: calc(var(--u) * 21);
}

/* 同意チェック（□ 23px x65 / 文字 x97） */
.lp-form__agree {
  margin-top: calc(var(--u) * 43);
  padding-left: calc(var(--u) * 35);
}
.lp-form__agree .wpcf7-acceptance,
.lp-form__agree .wpcf7-list-item { display: block; margin: 0; }
.lp-form__agree label {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 25);
  font-size: calc(var(--u) * 15);
  letter-spacing: .032em;
  cursor: pointer;
}
.lp-form__agree .wpcf7-list-item-label {
  position: relative;
  top: calc(var(--u) * 1);
}

.lp-form__agree input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: calc(var(--u) * 23);
  height: calc(var(--u) * 23);
  margin: 0 calc(var(--u) * 9) 0 0;
  border: 1px solid #3d3d3d;
  background: #fff;
  cursor: pointer;
}
.lp-form__agree input:checked {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center / 90%;
}

/* 送信ボタン（Figma x114 y19554 w160 h86。画像ボタン＋キラリ） */
.lp-form__submit {
  position: relative;
  width: calc(var(--u) * 160);
  height: calc(var(--u) * 86);
  margin: calc(var(--u) * 65) auto 0;
  left: calc(var(--u) * -1);         /* Figma では中心より 1px 左 */
  border-radius: 999px;
  overflow: hidden;
}
.lp-form__submitBtn {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 999px;
  background: url("../img/lp-kyoto-omuro/submit.jpg") no-repeat center / 100% 100%;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.lp-form__submitBtn:disabled { cursor: default; }
.lp-form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: calc(var(--u) * -40);
  margin: -12px 0 0;
}

/* バリデーション・送信結果 */
.lp-form .wpcf7-not-valid { border-color: #b33333; }
.lp-form .wpcf7-not-valid-tip {
  margin-top: calc(var(--u) * 4);
  color: #b33333;
  font-size: calc(var(--u) * 12);
  line-height: 1.5;
}
.lp-form .wpcf7 form .wpcf7-response-output {
  margin: calc(var(--u) * 24) 0 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  font-size: calc(var(--u) * 14);
  line-height: 1.6;
}
.lp-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: #1f7a33;
}
/* 確認ページから戻ると cf7msm の値復元で CF7 の自動検証が重なり、フォームが validating のまま残る。
   CF7 は validating で枠を隠さないため、メッセージが空のときは枠を出さない */
.lp-form .wpcf7 form .wpcf7-response-output:empty,
.lp-confirm .wpcf7 form .wpcf7-response-output:empty { display: none; }

/* =========================================================
   画面下の固定ボタン（フォーム到達で JS が .is-hidden を付ける）
   ========================================================= */
.lp-fixed {
  position: fixed;
  left: 50%;
  bottom: calc(min(100vw, 750px) * 10 / 390 + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  width: calc(min(100vw, 750px) * 350 / 390);
  transform: translateX(-50%);
  /* 支給画像（fixedbtn.png）の角が不透明の #f5f5f5 なので角丸でクリップ（角 R は画像実測 18px） */
  border-radius: calc(min(100vw, 750px) * 18 / 390);
  overflow: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lp-fixed img {
  display: block;
  width: 100%;
  height: auto;
}
.lp-fixed.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* モーション低減設定: 光の走り・スムーススクロールを止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta::before,
  .lp-form__submit::before { animation: none; opacity: 0; }
  .lp-fixed { transition: none; }
}

/* =========================================================
   確認・完了ステップ（/kyoto-omuro/confirm/ ・ /kyoto-omuro/complete/）
   ロゴ帯 → Reservation 帯 → 本文 → フッター。デザイン支給なしのため LP の書体・色で最小限に
   ========================================================= */
body.lp-kyoto-omuro--step {
  padding-bottom: env(safe-area-inset-bottom, 0px);   /* 固定ボタンが無いので余白不要 */
}
.lp-step__title { font-size: inherit; font-weight: inherit; }

.lp-step {
  padding: calc(var(--u) * 40) calc(var(--u) * 30) calc(var(--u) * 80);
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: #000;
}
.lp-step__lead {
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 26);
  letter-spacing: .03em;
}

/* 確認: ラベル（入力フォームと同じ書体・サイズ）／入力値 を縦並び */
.lp-confirm__list { margin-top: calc(var(--u) * 30); }
.lp-confirm__row + .lp-confirm__row { margin-top: calc(var(--u) * 20); }
.lp-confirm__row.is-hidden { display: none; }
.lp-confirm__row dt {
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 33);
  letter-spacing: .03em;
}
.lp-confirm__row dd {
  min-height: calc(var(--u) * 45);
  margin-top: calc(var(--u) * 2);
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  background: #f5f5f5;
  font-size: calc(var(--u) * 16);
  line-height: 1.6;
  letter-spacing: .03em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lp-confirm__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 24);
  margin-top: calc(var(--u) * 50);
}
.lp-confirm .lp-form__submit {
  margin: 0;
  left: 0;
}
.lp-confirm__back,
.lp-complete__back a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 160);
  height: calc(var(--u) * 45);
  border: 1px solid #3d3d3d;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: calc(var(--u) * 15);
  letter-spacing: .1em;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.lp-confirm .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: calc(var(--u) * -40);
  margin: -12px 0 0;
}
.lp-confirm .wpcf7 {
  font-size: calc(var(--u) * 15);
  line-height: 1.8;
}
.lp-confirm .wpcf7 form .wpcf7-response-output {
  margin: calc(var(--u) * 24) 0 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  font-size: calc(var(--u) * 14);
  line-height: 1.6;
}

/* 完了 */
.lp-complete { text-align: center; }
.lp-complete__lead {
  margin-bottom: calc(var(--u) * 20);
  font-size: calc(var(--u) * 20);
  letter-spacing: .08em;
}
.lp-complete__back {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--u) * 40);
}