/* 梅田店 リニューアルページ専用スタイル
   style.css を読み込んだあとに追加で読み込む差分ファイル */

/* 現在地のナビを強調 */
.main-nav a[aria-current="page"] { color: var(--gold-dark); font-weight: 500; }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* リニューアル日 */
.renewal-date {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(80,60,30,0.15);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
}

/* 未確定項目（住所・TEL など）。確定したら class="tbd" を外してください */
.shop-info .tbd {
  color: var(--text-soft);
  font-style: italic;
  opacity: 0.7;
}

/* 縦位置の写真が多いページなので、ギャラリーの比率をたてなが優先に */
.gallery-item img { aspect-ratio: 3/4; }

/* トップページのヒーローはブランド画像を全面表示するため、
   スマホで background-size: contain になっている。
   このページは実店舗写真なので cover に戻す */
@media (max-width: 520px) {
  .hero-slide {
    background-size: cover;
    background-repeat: no-repeat;
    animation: kenburns 9s ease-in-out infinite alternate;
  }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(38,28,16,0.45) 0%, rgba(38,28,16,0.22) 45%, rgba(38,28,16,0.6) 100%);
  }
  .hero-content { justify-content: center; padding-bottom: 24px; }
}

/* リニューアル記念プレゼント */
.gift { padding-bottom: 0; }
.gift .shop-announce { margin: 0 auto; }
.gift-text { margin: 0 0 12px; font-size: 0.92rem; opacity: 0.92; }
.gift-note { margin: 0 0 26px; font-size: 0.82rem; }
.shop-announce-panel .tbd { font-style: italic; opacity: 0.65; }
.gift-product {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  opacity: 0.8;
  margin: -8px 0 14px;
}

/* プレゼントの商品写真は白背景の商品カットなので、
   切り抜かずに全体を見せる */
.gift .shop-announce-photo {
  background: linear-gradient(160deg, #f6efe9 0%, #efe3dc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift .shop-announce-photo img {
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
}

/* ポイント欄：リード一行と、段落が続く場合の間隔 */
.feature-card .feature-lead {
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--text);
  margin: 0 0 12px;
}
.feature-card p + p { margin-top: 14px; }

/* ===== シンデレラバスト 施術実績 ===== */
.results { background: var(--stone); }
.results-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.results-item {
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 14px 36px rgba(80,60,30,0.14);
}
.results-item img { width: 100%; height: auto; display: block; }
.results-note {
  max-width: 1100px;
  margin: 32px auto 0;
  font-size: 0.78rem;
  color: var(--text-soft);
  text-align: center;
}
/* 未記入の目印。文章を入れたら class="tbd" を外してください */
.concept-text .tbd,
.feature-card .tbd { color: var(--text-soft); font-style: italic; opacity: 0.7; }

@media (max-width: 700px) {
  .results-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ===== 動画セクション ===== */
.movie-frame {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(80,60,30,0.18);
}
.movie-frame video { width: 100%; height: auto; display: block; }
.movie-note {
  max-width: 960px;
  margin: 20px auto 0;
  font-size: 0.78rem;
  color: var(--text-soft);
  text-align: center;
}

/* 2本目は縦長の動画。横長と並べず、幅を変えて縦に積む */
.movie-frame + .movie-frame { margin-top: 28px; }
.movie-frame-portrait { max-width: 420px; }