@charset "UTF-8";
/* 七五三ビジュアルLP（店舗別2ページ）のスタイル。ビルド: bash scripts/build-visual.sh
 * 基準幅375px。画像・枠の寸法は cw()（コンテナ幅に比例）、文字はデザインのpxのまま。
 * 色はすべて tokens の CSS 変数（--v753-*）。直書きのhexは :root 以外に置かない。 */
/* 色・書体のトークン。Figma 土台_01/02 の実測値 */
:root {
  --v753-bg: #f6f5f0; /* 器の地色（FV・ALL IN ONE・STUDIO・STAFF・後半） */
  --v753-bg-warm: #e0d8cf; /* GALLERY・COSTUME・VOICE・FVの面 */
  --v753-ink: #292522; /* 見出し・黒ボタン */
  --v753-text: #49413b; /* 本文 */
  --v753-text-deep: #45372f;
  --v753-muted: #8b8278; /* 英字ラベル・選択中の面 */
  --v753-muted-2: #776b61;
  --v753-line: #c9c4bd;
  --v753-line-2: #c9c0b7;
  --v753-card: #fcfaf7;
  --v753-card-2: #f9f7f4;
  --v753-card-3: #f7f7f5;
  --v753-reserve-card: #fafaf8;
  --v753-sand: #c8b6a6; /* 写真の背後にずれて重なる面・筆の線 */
  --v753-accent-line: #d2bdaf;
  --v753-brown: #8b7768; /* 衣装の選択中 */
  --v753-rose: #c9857d; /* 口コミの帯 */
  --v753-white: #ffffff;
  --v753-data: #ded5cc; /* DATA枠・フッター */
  --v753-rail: #eee7e0;
  --v753-rail-gray: #dbd9d9;
  --v753-rail-soft: #f7f4ef;
  --v753-rail-dark: #55524e;
  --v753-toggle-line: #c8c0b5;
  --v753-age-off: #55524e;
  --v753-burger: #666666;
  --v753-grid-line: #eae9e5; /* ALL IN ONE の格子 */
  --v753-dot: #edebe6; /* FIRST VISIT 〜 FAQ の水玉 */
  --v753-info-line: #7c685d;
  --v753-tile-line: #e3dcd4; /* OPTION の格子（タイル）の線 */
  --v753-menu-line: #a88d86; /* PC左パネルのメニューの点線 */
  --v753-photo-bg: #e3e7ec; /* 衣装写真の背景（contain の余白） */
  --v753-line-green: #4cc764; /* 予約モーダルのLINE緑（現行LPと同じ） */
  --v753-font-serif: 'Noto Serif JP', serif;
  --v753-font-sans: 'Noto Sans JP', sans-serif;
  --v753-font-en: 'Bodoni Moda', serif;
  --v753-font-num: 'Gelasio', serif;
  --v753-font-script: 'Allura', cursive;
  --v753-font-copy: 'Cormorant Garamond', serif;
  --v753-shadow-dark: rgba(0, 0, 0, 0.12);
}

/* Figmaの375px基準の実測pxを、コンテナ幅(cqw)に比例する長さへ変換する（SP375pxで等倍・768pxで約2倍） */
/* ページ内リンクは滑らかに動く */
html {
  scroll-behavior: smooth;
}

.v753 {
  margin: 0;
  background: var(--v753-bg-warm);
  color: var(--v753-text);
  font-family: var(--v753-font-serif);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

/* Bootstrap の reboot（要素セレクタ）と干渉しやすい要素を、このページの流儀に揃える。
   .v753 :where(要素) は詳細度が単一クラスと同じなので、後ろに書く部品のスタイルが勝つ */
.v753 *,
.v753 *::before,
.v753 *::after {
  box-sizing: border-box;
}

.v753 :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) {
  margin: 0;
  padding: 0;
}

.v753 :where(ul, ol) {
  list-style: none;
}

.v753 :where(h1, h2, h3) {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.v753 :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.v753 :where(a) {
  color: inherit;
  text-decoration: none;
}

.v753 :where(button) {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.v753 :where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.v753 :focus-visible {
  outline: 2px solid var(--v753-ink);
  outline-offset: 2px;
}

.v753-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 本体の列。SPは幅いっぱい（768pxまで）、PC(1024px〜)は430px。cqw の基準コンテナ */
.v753-page {
  position: relative;
  width: min(100%, 768px);
  margin-inline: auto;
  background: var(--v753-bg);
  box-shadow: 0 0 24px var(--v753-shadow-dark);
  container-type: inline-size;
  overflow-x: clip;
}

@media (min-width: 1024px) {
  .v753-page {
    width: 430px;
  }
}
/* 外から本体を開いたとき（メニュー・モーダル）の背面スクロール止め */
body.v753-menu-open {
  overflow: hidden;
}

/* ---- CTA 2つ（FV・ALL IN ONE・OPTION・RESERVE 共通）---- */
.v753-cta {
  display: grid;
  grid-template-columns: 182fr 141fr;
  gap: 2.1333333333cqw;
  margin-inline: 5.8666666667cqw;
}

.v753-cta__btn {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 3.6cqw 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.v753-cta__btn--main {
  justify-content: space-between;
  padding-inline: 14px 13px;
  background: var(--v753-ink);
  color: var(--v753-white);
}

.v753-cta__btn--sub {
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--v753-ink);
  color: var(--v753-ink);
}

.v753-cta__icon--arrow {
  width: 24px;
  height: 24px;
}

.v753-cta__icon--tel {
  width: 16px;
  height: 16px;
}

/* ---- FV #top ---- */
.v753-fv {
  background: var(--v753-bg);
}

.v753-fv__bar {
  display: flex;
  align-items: center;
  gap: 6.1333333333cqw;
  min-height: 16cqw;
  padding: 0.8cqw 5.8666666667cqw 0;
}

.v753-fv__logo {
  flex: none;
  width: 18.1333333333cqw;
}

.v753-fv__lead {
  flex: 1;
  color: var(--v753-ink);
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1.44;
  text-align: left;
}

.v753-burger {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* 線の右端をデザインの右余白(22px)に合わせる */
}

.v753-burger__lines {
  display: block;
  width: 24px;
  height: 21px;
  background: linear-gradient(var(--v753-burger), var(--v753-burger)) 0 0/100% 1px no-repeat, linear-gradient(var(--v753-burger), var(--v753-burger)) 0 50%/100% 1px no-repeat, linear-gradient(var(--v753-burger), var(--v753-burger)) 0 100%/100% 1px no-repeat;
}

/* 舞台: 左に本体（面＋アーチ写真）、右に縦書きの細い帯 */
.v753-fv__stage {
  display: grid;
  grid-template-columns: 1fr 11.7333333333cqw;
}

.v753-fv__main {
  position: relative; /* 線画の植物の基準 */
  padding-top: 4.2666666667cqw;
  background: var(--v753-bg-warm);
}

.v753-fv__plant {
  position: absolute; /* 背景の装飾 */
}

.v753-fv__plant--1 {
  left: -0.5333333333cqw;
  top: 22.6666666667cqw;
  width: 25.6cqw;
}

.v753-fv__plant--2 {
  left: 65.0666666667cqw;
  top: 23.7333333333cqw;
  width: 20cqw;
}

.v753-fv__plant--3 {
  left: 78.9333333333cqw;
  top: 101.6cqw;
  width: 18.4cqw;
}

.v753-fv__title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v753-fv__logo-row {
  /* 「753」を中央に置き、縦書きの「七五三」は右にぶら下げる（見本どおり） */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  width: 100%;
  color: var(--v753-ink);
}

.v753-fv__num {
  font-family: var(--v753-font-num);
  font-size: 65px;
  font-weight: 700;
  letter-spacing: 6.5px;
  line-height: 1.12;
  transform: translateY(-10px); /* Figmaの行送り(82.5px)との差を字面の位置で合わせる（実測 -10px） */
}

.v753-fv__kanji {
  justify-self: start;
  margin: 3.2cqw 0 0 2.6666666667cqw;
  padding: 0 2px;
  border-bottom: 1px solid var(--v753-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.1;
  writing-mode: vertical-rl;
}

.v753-fv__script {
  width: 40cqw;
  margin-top: -10.1333333333cqw;
  margin-left: 4.2666666667cqw; /* 見本の字面は中央より右寄り（実測 +8px） */
}

.v753-fv__photo {
  position: relative; /* 縦書きの帯の基準 */
  width: 78.4cqw;
  margin: -6.4cqw auto 0;
  padding: 2px 2px 0;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  border-radius: 37.8666666667cqw 37.8666666667cqw 0 0;
}

.v753-fv__photo-frame {
  display: block;
  overflow: hidden; /* パララックスで動く写真をアーチの中に収める */
  border-radius: 37.3333333333cqw 37.3333333333cqw 0 0;
}

.v753-fv__photo-img {
  width: 100%;
}

.v753-fv__catch {
  position: absolute; /* 写真に重ねる白地の縦書き帯 */
  padding: 5px 6px;
  background: var(--v753-white);
  color: var(--v753-ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 16px;
  writing-mode: vertical-rl;
}

.v753-fv__catch--1 {
  left: 13.8666666667cqw;
  top: 33.8666666667cqw;
}

.v753-fv__catch--2 {
  left: 5.6cqw;
  top: 41.8666666667cqw;
}

.v753-fv__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.1333333333cqw;
  padding-top: 7.7333333333cqw;
  color: var(--v753-ink);
  font-family: var(--v753-font-en);
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 1;
}

.v753-fv__side-text,
.v753-fv__side-year {
  writing-mode: vertical-rl; /* 縦書きは文字だけ。入れ物に付けると flex の向きが入れ替わる */
}

.v753-fv__side-line {
  flex: none;
  width: 1px;
  height: 13.0666666667cqw;
  background: var(--v753-ink);
}

.v753-fv__side-year {
  font-size: 11px;
  letter-spacing: 2.2px;
}

.v753-fv__info {
  padding-block: 2.6666666667cqw 8.5333333333cqw;
}

.v753-fv__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.6666666667cqw;
  margin-inline: 5.3333333333cqw;
}

.v753-fv__tag {
  padding: 4px 6px;
  border: 1px solid var(--v753-ink);
  color: var(--v753-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.8px;
  line-height: 1.2;
}

.v753-fv__amount {
  display: flex;
  align-items: baseline;
  color: var(--v753-text);
  line-height: 1;
}

.v753-fv__amount-num {
  font-size: 40px;
  font-weight: 700;
}

.v753-fv__amount-yen {
  margin-left: 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 4px;
}

.v753-fv__amount-tax {
  margin-left: 3px;
  font-size: 14px;
  font-weight: 500;
}

.v753-fv__period {
  width: 74.1333333333cqw;
  margin: 4cqw auto 5.0666666667cqw;
  padding-block: 5px;
  border-block: 1px solid var(--v753-line);
  color: var(--v753-text);
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1.43;
}

.v753-fv__sep {
  color: var(--v753-line);
}

/* ---- ALL IN ONE #allinone ---- */
.v753-aio {
  padding: 8.5333333333cqw 0;
  background-color: var(--v753-bg);
  /* 格子（20px角・1px線） */
  background-image: linear-gradient(var(--v753-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--v753-grid-line) 1px, transparent 1px);
  background-size: 5.3333333333cqw 5.3333333333cqw;
  background-position: -0.1333333333cqw -0.1333333333cqw;
}

.v753-aio__photo {
  position: relative; /* 口コミの帯の基準 */
  margin-inline: 5.8666666667cqw;
}

.v753-aio__photo-img {
  width: 100%;
}

.v753-aio__badge {
  position: absolute; /* 写真に半がかりの帯 */
  padding: 3px 7px;
  background: var(--v753-rose);
  color: var(--v753-white);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.v753-aio__badge--1 {
  left: 26.1333333333cqw;
  top: 50cqw;
}

.v753-aio__badge--2 {
  left: 49.8666666667cqw;
  top: 53.7333333333cqw;
}

.v753-aio__badge-num {
  font-size: 20px;
  font-weight: 700;
}

.v753-aio__badge-unit {
  font-size: 14px;
  font-weight: 700;
}

.v753-aio__title {
  margin-top: 6.1333333333cqw;
}

.v753-aio__en {
  display: block;
  color: var(--v753-ink);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 2.2px; /* 見本の字面幅(269px)に合わせた実測値 */
  line-height: 1.2;
}

.v753-aio__en-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--v753-ink);
}

.v753-aio__ja {
  display: block;
  color: var(--v753-text);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -2.3px; /* 見本の字面幅(211px)に合わせた実測値 */
  line-height: 1.44;
}

.v753-aio__lead {
  margin-top: 4.6666666667cqw;
  color: var(--v753-text);
  font-size: 14px;
  line-height: 1.64;
}

.v753-aio__sub {
  margin-top: 6.1333333333cqw;
  color: var(--v753-muted);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1.8px;
  line-height: 1.44;
}

.v753-aio__sub::after {
  content: "";
  display: block;
  width: 9.6cqw;
  height: 1px;
  margin: 10px auto 0;
  background: var(--v753-accent-line);
}

.v753-aio__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8666666667cqw;
  margin: 5.8666666667cqw 5.8666666667cqw 0;
}

.v753-aio__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 106/116;
  border: 1px solid var(--v753-line-2);
  color: var(--v753-ink);
  font-weight: 500;
}

.v753-aio__card--photo {
  background: var(--v753-card);
}

.v753-aio__card--data {
  background: var(--v753-data);
}

.v753-aio__card--family {
  background: var(--v753-ink);
  color: var(--v753-white);
}

.v753-aio__card-label {
  color: var(--v753-muted-2);
  font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 1.43;
}

.v753-aio__card--family .v753-aio__card-label {
  color: var(--v753-white);
}

.v753-aio__card-main {
  font-size: 40px;
  line-height: 1.1;
}

.v753-aio__card-main--ja {
  font-size: 32px;
}

.v753-aio__card-text {
  font-size: 14px;
  line-height: 1.43;
}

.v753-aio__card-text--small {
  font-size: 11px;
  line-height: 1.36;
}

.v753-aio .v753-cta {
  margin-top: 6.6666666667cqw;
}

/* ---- セクション見出し（英字ラベル → 筆記体の画像 → 和文）GALLERY・STUDIO・COSTUME・STAFF ---- */
.v753-head {
  display: grid;
  justify-items: center;
}

.v753-head__label {
  color: var(--v753-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  line-height: 1.44;
}

/* 筆記体（前面）と筆の線（背面）は同じマスに重ねる */
.v753-head__art {
  display: grid;
  position: relative;
  z-index: 1;
}

.v753-head__art > * {
  grid-area: 1/1;
}

.v753-head__script {
  justify-self: center;
  position: relative;
  z-index: 1;
}

.v753-head__brush {
  align-self: start;
  justify-self: start;
}

.v753-head__title {
  position: relative;
  z-index: 1;
  color: var(--v753-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.44;
}

/* 見本から実測した筆記体の位置（ラベル下端からの余白） */
.v753-head--gallery .v753-head__art {
  margin-top: -2.9333333333cqw;
}

.v753-head--gallery .v753-head__brush {
  margin: 11.4666666667cqw 0 0 6.9333333333cqw;
}

.v753-head--gallery .v753-head__title {
  margin-top: 0.8cqw;
}

.v753-head--studio .v753-head__art {
  margin-top: 1.6cqw;
}

.v753-head--studio .v753-head__title {
  margin-top: 3.2cqw;
}

.v753-head--studio .v753-head__script {
  margin-left: 2.6666666667cqw;
}

.v753-head--costume .v753-head__art {
  margin-top: -2.9333333333cqw;
}

.v753-head--costume .v753-head__brush {
  margin: 10.4cqw 0 0 2.9333333333cqw;
}

.v753-head--costume .v753-head__title {
  margin-top: -2.6666666667cqw;
}

.v753-head--staff .v753-head__art {
  margin-top: 0.2666666667cqw;
}

.v753-head--staff .v753-head__title {
  margin-top: 4.2666666667cqw;
}

/* ---- 英字ラベル＋短い線＋和文（FIRST VISIT・QUESTIONS・VOICE）---- */
.v753-sechead__label {
  color: var(--v753-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  line-height: 1.44;
}

.v753-sechead__label::after {
  content: "";
  display: block;
  width: 9.6cqw;
  height: 2px;
  margin: 10px auto 0;
  background: var(--v753-sand);
}

.v753-sechead__title {
  margin-top: 3px;
  color: var(--v753-ink);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.44;
}

/* ---- スライダーの共通形（scroll-snap の横スクロール。動きは 753-visual.js）---- */
.v753-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.v753-slider__track::-webkit-scrollbar {
  display: none;
}

.v753-slider__slide {
  flex: none;
  scroll-snap-align: start;
}

.v753-slider__track:focus-visible {
  outline-offset: -2px;
}

/* 進捗バー（レール＋つまみ。つまみの位置と長さはJSがスクロール量から決める）*/
.v753-rail {
  position: relative;
  height: 4px;
}

.v753-rail__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%;
}

/* ---- PHOTO GALLERY #gallery ---- */
.v753-gallery {
  position: relative;
  isolation: isolate;
  padding: 9.6cqw 0;
  background: var(--v753-bg-warm);
}

.v753-gallery__plant {
  position: absolute; /* 背景の装飾 */
  z-index: -1;
  top: 9.8666666667cqw;
  left: 71.2cqw;
  width: 26.6666666667cqw;
}

.v753-gallery__slider {
  position: relative;
  isolation: isolate;
  margin-top: 4.8cqw;
}

.v753-gallery .v753-slider__track {
  gap: 4.8cqw;
  padding: 2.4cqw 8cqw 0; /* 上9pxは背後の面がはみ出す分（overflow で切れないように） */
  scroll-padding-inline: 8cqw;
}

/* 1枚目の写真の背後に、左と上へずれて重なる面。写真だけが流れ、面は動かない（さおちゃん指示 2026-11-04）。
   スライダーに固定し、位置と大きさは1枚目（縦長 1067×1600・高さ220）の初期位置に合わせる */
.v753-gallery__slider::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 5.8666666667cqw;
  width: 29.0666666667cqw; /* 1枚目の幅 220×1067/1600 の74% */
  height: 58.6666666667cqw;
  background: var(--v753-sand);
}

.v753-gallery__item {
  display: block;
}

/* 縦長・横長が混ざるので切り抜かない。高さをそろえ、幅は width/height 属性の縦横比に任せる。
   高さ220は、横長(3:2)の写真が375px幅で左余白30pxを含めて画面に収まる値 */
.v753-gallery__img {
  width: auto;
  height: 58.6666666667cqw;
}

.v753-gallery__meta {
  display: flex;
  justify-content: space-between;
  margin: 2.4cqw 5.8666666667cqw 0;
  color: var(--v753-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  line-height: 1.44;
}

.v753-rail--gallery {
  margin: 4.8cqw 5.8666666667cqw 0;
  background: var(--v753-rail);
}

.v753-rail--gallery .v753-rail__thumb {
  background: var(--v753-muted);
}

.v753-gallery__hint {
  margin-top: 4.8cqw;
  color: var(--v753-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.43;
}

/* ---- STUDIO #studio ---- */
.v753-studio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 9.6cqw 0 8.2666666667cqw;
  background: var(--v753-bg);
}

/* 背景の花の線画（上と下） */
.v753-studio::before,
.v753-studio::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: no-repeat center/100% 100%;
}

.v753-studio::before {
  top: -8cqw;
  left: -6.6666666667cqw;
  width: 106.6666666667cqw;
  height: 37.0666666667cqw;
  background-image: url("../img/deco/studio-bg-top.webp");
}

.v753-studio::after {
  top: 210.4cqw;
  left: -10.4cqw;
  width: 110.4cqw;
  height: 47.4666666667cqw;
  background-image: url("../img/deco/studio-bg-bottom.webp");
}

.v753-studio__lead {
  margin: 3.7333333333cqw 8cqw 0;
  color: var(--v753-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1.79;
}

.v753-studio__rooms {
  display: flex;
  justify-content: center;
  gap: 3.2cqw;
  margin-top: 4.2666666667cqw;
}

.v753-room {
  display: grid;
  place-items: center;
  min-height: 44px;
}

.v753-room__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding-inline: 10px;
  border: 1px solid var(--v753-muted);
  border-radius: 40px;
  background: var(--v753-bg);
  color: var(--v753-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1;
}

.v753-room[aria-pressed=true] .v753-room__pill {
  background: var(--v753-muted);
  color: var(--v753-white);
}

.v753-studio__panel {
  margin-top: 5.3333333333cqw;
}

.v753-studio .v753-slider__track {
  gap: 1.8666666667cqw;
  padding-inline: 5.8666666667cqw;
  scroll-padding-inline: 5.8666666667cqw;
}

.v753-studio__slide {
  width: 70.6666666667cqw;
}

.v753-studio__item {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 35.4666666667cqw 35.4666666667cqw 0 0;
}

.v753-studio__img {
  width: 100%;
  aspect-ratio: 265/258;
  object-fit: cover;
}

.v753-studio__caption {
  margin: 5.6cqw 5.8666666667cqw 0;
  text-align: left;
}

.v753-studio__caption-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-right: 8.2666666667cqw;
}

.v753-studio__name {
  color: var(--v753-text);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.43;
}

.v753-studio__count {
  color: var(--v753-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
}

.v753-studio__text {
  white-space: pre-line;
  min-height: 75px; /* 写真ごとの説明の行数差で、下のブロックが動かないよう3行分を確保 */
  margin-top: 3.2cqw;
  color: var(--v753-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 25px;
}

.v753-studio__shots {
  margin: 8.2666666667cqw 5.8666666667cqw 0;
  text-align: left;
}

.v753-studio__shots-title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--v753-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.43;
}

.v753-studio__shots-title::before {
  content: "";
  width: 6.6666666667cqw;
  height: 1px;
  background: var(--v753-accent-line);
}

.v753-studio__shots-list {
  display: flex;
  gap: 2.6666666667cqw;
  margin-top: 4.5333333333cqw;
}

/* display:flex が hidden 属性より強いため、背景の切替で隠す一覧は明示的に消す */
.v753-studio__shots[hidden],
.v753-studio__shots-list[hidden] {
  display: none;
}

.v753-studio__shot {
  display: block;
  width: 24.2666666667cqw;
}

.v753-studio__shot img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: var(--v753-pos, 50% 50%);
}

.v753-dashes {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 5.3333333333cqw;
}

.v753-dashes__dash {
  width: 7.4666666667cqw;
  height: 2px;
  background: var(--v753-rail-gray);
}

.v753-dashes__dash.is-active {
  background: var(--v753-muted);
}

.v753-studio__hint {
  margin-top: 2.9333333333cqw;
  color: var(--v753-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.43;
}

/* ---- COSTUME #costume ---- */
.v753-costume {
  position: relative;
  isolation: isolate;
  padding: 9.6cqw 0 8.5333333333cqw;
  background: var(--v753-bg-warm);
}

.v753-costume__plant {
  position: absolute; /* 背景の装飾 */
  z-index: -1;
}

.v753-costume__plant--l {
  top: 16cqw;
  left: -5.3333333333cqw;
  width: 31.4666666667cqw;
}

.v753-costume__plant--r {
  top: 5.6cqw;
  left: 72cqw;
  width: 32.8cqw;
}

.v753-costume__lead {
  margin-top: 4cqw;
  color: var(--v753-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1.79;
}

/* 年齢・性別の切替（ラジオ＋label。見た目はボタン） */
.v753-toggle {
  position: relative;
  display: grid;
  margin: 2.1333333333cqw 5.8666666667cqw 0;
}

.v753-toggle--age {
  grid-template-columns: repeat(3, 1fr);
}

.v753-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.v753-toggle__label {
  display: grid;
  place-items: center;
  min-height: 44px;
  margin-left: -1px;
  border: 1px solid var(--v753-toggle-line);
  background: var(--v753-rail-soft);
  color: var(--v753-age-off);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.44;
  cursor: pointer;
}

.v753-toggle__input:checked + .v753-toggle__label {
  background: var(--v753-brown);
  color: var(--v753-white);
}

.v753-toggle__input:focus-visible + .v753-toggle__label {
  outline: 2px solid var(--v753-ink);
  outline-offset: -4px;
}

.v753-costume__panel {
  margin-top: 6.6666666667cqw;
}

.v753-costume .v753-slider__track {
  gap: 2.6666666667cqw;
  padding-inline: 5.8666666667cqw;
  scroll-padding-inline: 5.8666666667cqw;
}

.v753-costume__slide {
  width: 36.2666666667cqw;
}

.v753-costume__item {
  position: relative;
  display: block;
  width: 100%;
}

.v753-costume__img {
  width: 100%;
  aspect-ratio: 136/204;
  object-fit: contain; /* 衣装の全身が入るよう切らない */
  background: var(--v753-photo-bg);
}

.v753-costume__tag {
  position: absolute; /* 写真の下端に重ねるタグ */
  left: 50%;
  bottom: 2.1333333333cqw;
  padding: 3px 8px;
  background: var(--v753-ink);
  color: var(--v753-white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.4;
  transform: translateX(-50%);
}

.v753-costume__empty {
  display: grid;
  place-items: center;
  min-height: 54.4cqw;
  margin-inline: 5.8666666667cqw;
  color: var(--v753-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
}

.v753-rail--costume {
  margin: 9.0666666667cqw 7.4666666667cqw 0;
  background: var(--v753-rail-soft);
  border-radius: 2px;
}

.v753-rail--costume .v753-rail__thumb {
  background: var(--v753-brown);
  border-radius: 2px;
}

.v753-costume__hint {
  margin-top: 6.9333333333cqw;
  color: var(--v753-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.43;
}

/* 「全ての衣装を見る」: ここに並ぶのは一部なので、HPの衣装一覧へ。予約のCTAと競わないよう、線だけの控えめなボタン（cta の --sub と同じ扱い） */
.v753-costume__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 64cqw;
  min-height: 48px;
  margin: 5.3333333333cqw auto 0;
  border: 1px solid var(--v753-ink);
  color: var(--v753-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.2;
}

.v753-costume__more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ---- STAFF #staff ---- */
.v753-staff {
  padding: 8.5333333333cqw 0;
  background: var(--v753-bg);
}

.v753-staff__slider {
  margin-top: 4.8cqw;
}

.v753-staff .v753-slider__track {
  gap: 6.1333333333cqw;
  padding-inline: 10.6666666667cqw;
  scroll-padding-inline: 10.6666666667cqw;
}

.v753-staff__slide {
  width: 67.2cqw;
}

.v753-staff__photo {
  position: relative;
  isolation: isolate;
}

/* 写真の背後に左下へずれて重なる面 */
.v753-staff__photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2.1333333333cqw 1.8666666667cqw -2.1333333333cqw -2.1333333333cqw;
  background: var(--v753-sand);
}

.v753-staff__frame {
  overflow: hidden;
  aspect-ratio: 252/303;
}

/* 見本の切り抜きは腰から上（Figmaの画像塗り: 幅の58%・高さの70%を上寄せで使う＝約1.42倍） */
.v753-staff__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(1.42);
  transform-origin: 50% 0;
}

.v753-staff__card {
  position: relative;
  z-index: 1;
  width: 65.6cqw;
  margin: -10.9333333333cqw 0 0 -4.8cqw;
  padding: 2.9333333333cqw 4.5333333333cqw 1.0666666667cqw;
  border: 1px solid var(--v753-line-2);
  background: var(--v753-card-3);
  text-align: left;
  transition: opacity 0.25s ease;
}

/* 右に覗くのは次の人の写真と背後の面だけ。覗いている側のカードは隠す */
.v753-js .v753-staff__slide:not(.is-active) .v753-staff__card {
  opacity: 0;
}

.v753-staff__job {
  display: inline-block;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--v753-line);
  border-radius: 50px;
  background: var(--v753-white);
  color: var(--v753-text);
  font-size: min(12px, 3.2vw); /* 375px で12px。狭い画面では縮めて1行に収める */
  font-feature-settings: "palt"; /* 「ー・」の詰め。iPhone の書体だと詰めないと2行になる */
  line-height: 1.43;
  white-space: nowrap; /* 役職は1行（冨田さん指示 2026-11-04） */
}

.v753-staff__name {
  margin-top: 0.5333333333cqw;
  color: var(--v753-ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.43;
}

.v753-staff__name::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin: 8px 0;
  background: var(--v753-line);
}

.v753-staff__item {
  display: inline-block; /* 語の途中で切れない単位。長い項目だけ折る */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.v753-staff__line {
  color: var(--v753-ink);
  font-size: 14px;
  line-height: 1.43;
}

.v753-staff__line--hang {
  display: flex;
}

.v753-staff__label {
  flex: none;
}

.v753-staff__count {
  margin-top: 2.9333333333cqw;
  color: var(--v753-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
}

.v753-rail--staff {
  margin: 3.7333333333cqw 7.4666666667cqw 0;
  background: var(--v753-rail-gray);
  border-radius: 2px;
}

.v753-rail--staff .v753-rail__thumb {
  background: var(--v753-muted);
  border-radius: 2px;
}

.v753-staff__hint {
  margin-top: 2.1333333333cqw;
  color: var(--v753-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.43;
}

/* FIRST VISIT 〜 QUESTIONS は水玉の地を共有する */
.v753-dots {
  background-color: var(--v753-bg);
  background-image: radial-gradient(circle at 1.5px 3.5px, var(--v753-dot) 1.5px, transparent 1.7px);
  background-size: 36px 18px;
}

/* ---- FIRST VISIT #first ---- */
.v753-first {
  padding: 8.5333333333cqw 5.8666666667cqw 0;
}

.v753-first__lead {
  margin-top: 1.8666666667cqw;
  color: var(--v753-ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 25px;
}

.v753-flow {
  margin-top: 6.9333333333cqw;
  padding: 2.9333333333cqw 6.4cqw 5.8666666667cqw;
  border: 1px solid var(--v753-line);
  border-radius: 3px;
  background: var(--v753-card-2);
}

.v753-flow__title {
  color: var(--v753-ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.43;
}

.v753-flow__title::after {
  content: "";
  display: block;
  width: 58.4cqw;
  max-width: 100%;
  height: 1px;
  margin: 1px auto 4px;
  background: var(--v753-line);
}

.v753-flow__note {
  color: var(--v753-ink);
  font-size: 12px;
  line-height: 1.43;
}

.v753-flow__list {
  position: relative;
  margin-top: 3.7333333333cqw;
  text-align: left;
}

/* 丸と丸をつなぐ縦線（丸の中心を通す） */
.v753-flow__list::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 34px;
  left: 6px;
  width: 1px;
  background: var(--v753-line);
}

.v753-flow__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  line-height: 23px;
}

.v753-flow__item:nth-child(1) {
  padding-bottom: 21px;
}

.v753-flow__item:nth-child(2) {
  padding-bottom: 12px;
}

.v753-flow__dot {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--v753-muted);
}

.v753-flow__time {
  flex: none;
  width: 47px;
  margin-left: 11px;
  color: var(--v753-text);
  font-size: 18px;
  font-weight: 700;
}

.v753-flow__icon {
  flex: none;
  width: 19px;
  height: auto;
  margin: 2px 0 0 18px;
}

.v753-flow__body {
  display: block;
  margin-left: 14px;
}

.v753-flow__label {
  display: block;
  color: var(--v753-text);
  font-family: var(--v753-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}

.v753-flow__sub {
  display: block;
  color: var(--v753-text-deep);
  font-size: 12px;
  line-height: 17px;
}

/* ---- QUESTIONS #faq ---- */
.v753-faq {
  padding: 9.6cqw 0 8.5333333333cqw;
}

.v753-faq__list {
  margin: 4.2666666667cqw 5.8666666667cqw 0;
  background: var(--v753-card);
}

.v753-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 51px;
  padding: 8px 0 8px 5px;
  border-bottom: 1px solid var(--v753-line-2);
  color: var(--v753-text);
  font-size: 14px;
  line-height: 25px;
  text-align: left;
  list-style: none;
  cursor: pointer;
}

.v753-faq__q::-webkit-details-marker {
  display: none;
}

.v753-faq__chev {
  position: relative;
  flex: none;
  width: 34px;
  height: 28px;
}

.v753-faq__chev::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--v753-info-line);
  border-bottom: 1px solid var(--v753-info-line);
  transform: rotate(45deg);
}

.v753-faq__item[open] > .v753-faq__q {
  border-color: var(--v753-muted);
  background: var(--v753-muted);
  color: var(--v753-white);
}

.v753-faq__item[open] > .v753-faq__q .v753-faq__chev::before {
  top: 12px;
  border-color: var(--v753-white);
  transform: rotate(-135deg);
}

.v753-faq__a {
  padding: 10px 61px 12px 5px;
  border-bottom: 1px solid var(--v753-line-2);
  color: var(--v753-text);
  font-size: 14px;
  line-height: 25px;
  text-align: left;
}

/* ---- VOICE #voice ---- */
.v753-voice {
  position: relative;
  isolation: isolate;
  padding: 8.5333333333cqw 0;
  background: var(--v753-bg-warm);
}

.v753-voice__script {
  position: absolute; /* 左端に縦に置く筆記体（装飾） */
  z-index: -1;
  top: 2.5333333333cqw;
  left: 0.5333333333cqw;
  width: 12.5333333333cqw;
}

.v753-sechead--voice .v753-sechead__label {
  color: var(--v753-white);
}

.v753-voice__slider {
  margin-top: 4.2666666667cqw;
}

.v753-voice .v753-slider__track {
  gap: 4cqw;
  padding-inline: 16.2666666667cqw;
  scroll-padding-inline: 16.2666666667cqw;
}

.v753-voice__slide {
  width: 67.7333333333cqw;
}

.v753-voice__card {
  display: grid;
  align-content: center;
  gap: 2.1333333333cqw;
  aspect-ratio: 254/200;
  padding-inline: 4.2666666667cqw;
  border: 1px solid var(--v753-line);
  background: var(--v753-white);
  color: var(--v753-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 25px;
}

.v753-voice__stars {
  color: var(--v753-rose);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  text-align: left;
}

.v753-voice__text {
  text-align: left;
}

.v753-voice__count {
  margin-top: 6.4cqw;
  color: var(--v753-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
}

.v753-rail--voice {
  margin: 3.7333333333cqw 7.4666666667cqw 0;
  background: var(--v753-rail-soft);
  border-radius: 2px;
}

.v753-rail--voice .v753-rail__thumb {
  background: var(--v753-rail-dark);
  border-radius: 2px;
}

.v753-voice__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2.1333333333cqw;
  color: var(--v753-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
}

.v753-voice__link-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--v753-text);
}

.v753-voice__link-inner img {
  width: 16px;
  height: 16px;
}

/* ---- 画像セクション（プラン・料金表・オプション表）---- */
.v753-sec-img {
  background: var(--v753-bg);
}

.v753-sec-img__img {
  width: 100%;
  height: auto;
}

.v753-option {
  padding-bottom: 8.2666666667cqw;
  /* 見本はタイル柄（27px角・2px線）が画像の外（CTAの背後）まで続く。柄の原点は画像の左上 */
  background-color: var(--v753-bg-warm);
  background-image: linear-gradient(90deg, var(--v753-tile-line) 0 2px, transparent 2px), linear-gradient(var(--v753-tile-line) 0 2px, transparent 2px);
  background-size: 7.2cqw 7.2cqw;
  background-position: -0.2666666667cqw -0.2666666667cqw;
}

.v753-option .v753-cta {
  margin-top: 4cqw;
}

/* ---- RESERVE #reserve ---- */
.v753-reserve {
  padding: 8.5333333333cqw 5.8666666667cqw;
  background: var(--v753-bg);
}

.v753-reserve__card {
  padding: 0.2666666667cqw 2.6666666667cqw 5.0666666667cqw;
  border: 1px solid var(--v753-line);
  background: var(--v753-reserve-card);
}

.v753-reserve__head {
  display: grid;
  place-items: center;
}

.v753-reserve__head > * {
  grid-area: 1/1;
}

.v753-reserve__mark {
  color: var(--v753-accent-line);
  font-size: 55px;
  font-weight: 500;
  line-height: 79px;
  opacity: 0.2;
}

.v753-reserve__title {
  color: var(--v753-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.44;
}

.v753-steps {
  margin-top: 6.4cqw;
  text-align: left;
}

.v753-steps__item {
  display: flex;
  align-items: center;
  padding-block: 10px;
  border-bottom: 1px solid var(--v753-line);
}

.v753-steps__item:last-child {
  border-bottom: 0;
}

.v753-steps__num {
  flex: none;
  margin-right: 11px;
  padding-right: 8px;
  border-right: 1px solid var(--v753-line);
  color: var(--v753-accent-line);
  font-family: var(--v753-font-script);
  font-size: 32px;
  letter-spacing: 3.2px;
  line-height: 40px;
}

.v753-steps__main {
  display: block;
  color: var(--v753-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}

.v753-steps__sub {
  display: block;
  color: var(--v753-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.v753-reserve .v753-cta {
  margin: 6.9333333333cqw 0 0;
}

.v753-reserve__note {
  margin: 6.9333333333cqw 3.7333333333cqw 0;
  color: var(--v753-text);
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1.5;
}

/* ---- 店舗情報 #info ---- */
.v753-info {
  padding: 8.5333333333cqw 5.3333333333cqw 18.6666666667cqw;
  background: var(--v753-bg);
}

.v753-info__item,
.v753-info__row--link {
  margin-top: 3.4666666667cqw;
}

.v753-info__row--link {
  margin-top: 0;
}

.v753-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 3px 4px 3px 5px;
  border-bottom: 1px solid var(--v753-info-line); /* 見本は枠なしの下線だけ */
  text-align: left;
  list-style: none;
  cursor: pointer;
}

.v753-info__row::-webkit-details-marker {
  display: none;
}

.v753-info__chev {
  position: relative;
  flex: none;
  width: 34px;
  height: 28px;
}

.v753-info__chev::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--v753-info-line);
  border-bottom: 1px solid var(--v753-info-line);
  transform: rotate(45deg);
}

.v753-info__main {
  display: block;
  color: var(--v753-text-deep);
  font-size: 16px;
  line-height: 23px;
}

.v753-info__sub {
  display: block;
  color: var(--v753-muted);
  font-size: 14px;
  line-height: 20px;
}

.v753-info__item[open] .v753-info__chev::before {
  top: 12px;
  transform: rotate(-135deg);
}

.v753-info__body {
  padding-top: 8px;
}

.v753-info__card {
  padding: 12px 14px;
  border: 1px solid var(--v753-line);
  background: var(--v753-card);
  text-align: left;
}

.v753-info__line {
  display: flex;
  gap: 14px;
  padding-block: 4px;
  font-size: 14px;
  line-height: 1.6;
}

.v753-info__line dt {
  flex: none;
  width: 4.5em;
  color: var(--v753-info-line);
  font-weight: 500;
}

.v753-info__note {
  padding-top: 4px;
  color: var(--v753-text);
  font-size: 12px;
}

.v753-info__map {
  margin-top: 8px;
}

.v753-info__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  border: 0;
}

.v753-info__lead {
  margin-top: 15.4666666667cqw;
  color: var(--v753-info-line);
  font-family: var(--v753-font-sans);
  font-size: 12px;
  line-height: 1.2;
}

.v753-info__banner {
  display: block;
  width: 73.8666666667cqw;
  margin: 5.8666666667cqw auto 0;
}

/* ---- footer ---- */
.v753-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.2cqw 0 5.3333333333cqw;
  background: var(--v753-data);
  color: var(--v753-text-deep);
}

.v753-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.v753-footer__top-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--v753-card);
}

.v753-footer__top-icon::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 10px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--v753-text-deep);
  border-left: 1px solid var(--v753-text-deep);
  transform: rotate(45deg);
}

.v753-footer__top-text {
  font-family: var(--v753-font-sans);
  font-size: 12px;
  line-height: 14px;
}

.v753-footer__logo {
  width: 20cqw;
  margin-top: 3.7333333333cqw;
}

.v753-footer__copy {
  margin-top: 2.1333333333cqw;
  font-family: var(--v753-font-copy);
  font-size: 11px;
  line-height: 1.2;
}

/* 本体の列の外に置く固定配置の部品。cqw は使えないので px で組む */
/* ---- ハンバーガーのメニュー（右からスライドインするパネル）---- */
.v753-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.v753-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.v753-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(86%, 300px);
  max-height: 100%;
  padding: 54px 31px 26px;
  overflow-y: auto;
  border-radius: 16px 0 0 16px;
  background: var(--v753-bg);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.v753-menu.is-open .v753-menu__panel {
  transform: translateX(0);
}

.v753-menu__close {
  position: absolute;
  top: 8px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v753-white);
  color: var(--v753-ink);
  font-size: 20px;
  line-height: 1;
}

/* メニュー項目（SPのパネルとPC左パネルで共用） */
.v753-menulist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-bottom: 1px solid var(--v753-line);
  color: var(--v753-text);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
}

.v753-menulist__arrow {
  font-size: 14px;
}

/* ---- 追従CTA（スクロール220pxで出る）---- */
.v753-float {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 40;
  width: min(100%, 768px);
  padding-bottom: 20px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.v753-float.is-visible {
  opacity: 1;
  visibility: visible;
}

.v753-float__btn {
  display: block;
  width: min(308px, 82vw);
  margin: 0 auto;
  pointer-events: auto;
}

.v753-float__img {
  width: 100%;
  /* 影はSVGに焼かずCSSで付ける（拡大時にぼけないため。現行LPと同じ） */
  filter: drop-shadow(0 4px 4px rgba(142, 119, 107, 0.25));
}

@media (min-width: 1024px) {
  .v753-float {
    width: 430px;
  }
}
/* ---- PC（1024px以上）の左右パネル ----
 * 見本（PC版_左／右）は 375×709 のパネル。幅と高さの小さいほうに合わせて拡縮する（--u ＝見本の1pxに当たる長さ）。
 * こうすると、どの画面でもメニュー（7項目）が下の大きな英字に重ならない。 */
.v753-side {
  display: none;
}

@media (min-width: 1024px) {
  .v753-side {
    position: fixed;
    top: 0;
    bottom: 0;
    display: block;
    width: calc((100% - 430px) / 2);
    overflow: hidden;
    container-type: size;
  }
  .v753-side > * {
    --u: min(0.26667cqw, 0.1376cqh);
  }
  .v753-side--left {
    left: 0;
    background: var(--v753-bg-warm);
  }
  .v753-side--right {
    right: 0;
    background: url("../img/photo/pc-right.webp") center/cover no-repeat;
  }
  .v753-side--right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(246, 245, 240, 0.3);
  }
  .v753-side__nav {
    position: relative;
    z-index: 1;
    width: calc(var(--u) * 252);
    margin: calc(var(--u) * 46) 0 0 calc(var(--u) * 51);
  }
  .v753-side .v753-menulist__link {
    align-items: flex-start;
    min-height: max(44px, var(--u) * 53);
    padding: calc(var(--u) * 22) calc(var(--u) * 13) calc(var(--u) * 5) 0;
    border-bottom: 1px dashed var(--v753-menu-line);
    font-size: calc(var(--u) * 18);
    line-height: calc(var(--u) * 26);
  }
  .v753-side .v753-menulist__arrow {
    font-size: calc(var(--u) * 14);
  }
  .v753-side__big {
    position: absolute; /* 大きな透かし英字（装飾） */
    left: calc(var(--u) * 9);
    bottom: calc(var(--u) * 7);
    color: rgba(255, 255, 255, 0.5);
    font-size: calc(var(--u) * 90);
    font-weight: 600;
    line-height: calc(var(--u) * 93);
    text-align: left;
    pointer-events: none;
  }
  .v753-side__big--right {
    left: auto;
    right: 0;
    bottom: calc(var(--u) * 12);
    color: rgba(255, 255, 255, 0.6);
    line-height: calc(var(--u) * 99);
    text-align: right;
  }
  .v753-side__script {
    position: absolute;
    left: calc(var(--u) * 190);
    bottom: calc(var(--u) * 28);
    width: calc(var(--u) * 155);
  }
}
/* ---- 予約モーダル（現行LPの作りを踏襲し、色だけトークンへ）---- */
.v753-reserve-modal .modal-header,
.v753-reserve-modal .modal-footer {
  background: var(--v753-line-green);
  color: var(--v753-white);
}

.v753-reserve-modal .modal-body {
  text-align: center;
}

.v753-reserve-modal .copy-text {
  width: 90%;
  font-size: 14px;
}

.v753-reserve-modal .btn-copy {
  width: 90%;
  padding: 0.5rem 0;
  font-size: 13px;
}

.v753-reserve-modal .copy-notice {
  margin: 0.75rem 0 0;
  font-size: 12px;
}

.v753-reserve-modal .text-notice {
  font-size: 12px;
}

/* ---- 拡大表示の共通モーダル ---- */
.v753-view-modal .modal-content {
  border: 0;
  background: transparent;
}

.v753-view-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 8px 8px;
  color: var(--v753-white);
  text-align: left;
}

.v753-view-modal__img {
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain; /* 元の縦横比のまま（切らない） */
}

.v753-view-modal__title {
  align-self: stretch;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
}

.v753-view-modal__text {
  align-self: stretch;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-line;
}

.v753-view-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v753-white);
  color: var(--v753-ink);
  font-size: 22px;
  line-height: 1;
}

/* 動き（さおちゃんのFigmaコメント 2026-10-10 「写真パララックス」「右側のふだから表示する」「テキスト左側から表示される」）
 * 動きを減らす設定の端末では、すべて止めて最初から表示する。 */
@media (prefers-reduced-motion: no-preference) {
  /* FVの縦書きの帯: 右の「平日の夕方、」→ 左の「貸切のスタジオで。」の順に、上から下へ現れる。
   * FVは読み込み時に見えているので、JSを待たずにCSSだけで動かす（JSで隠すと一瞬ちらつくため） */
  .v753-fv__catch {
    animation: v753-tag-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .v753-fv__catch--1 {
    animation-delay: 0.5s;
  }
  .v753-fv__catch--2 {
    animation-delay: 1s;
  }
  /* FVの写真: 枠の中で写真だけがスクロールに合わせてゆっくり動く（量はJSが --v753-py に入れる）。
   * 動かしても枠の端が見えないよう、少し拡大しておく */
  .v753-js [data-v753-parallax] {
    transform: translate3d(0, var(--v753-py, 0px), 0) scale(1.12);
    will-change: transform;
  }
  /* ALL IN ONE の見出し: 英字→日本語の順に、左から右へ現れる（画面に入ったらJSが is-in を付ける） */
  .v753-js [data-v753-reveal] > * {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateX(-12px);
  }
  .v753-js [data-v753-reveal].is-in > * {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
    transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .v753-js [data-v753-reveal].is-in > :nth-child(2) {
    transition-delay: 0.18s;
  }
}
@keyframes v753-tag-in {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}