/* tampopo_ver4 のインラインstyleブロックをそのまま移植 */
body { margin: 0; background: #FAF8F5; overflow-x: hidden; }
* { box-sizing: border-box; }

/* Full-bleed sections: break out of the 960px column so backgrounds span the full screen width */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

#fv-bg { transform: scale(1.05); transition: transform 6s ease-out; }
#fv-bg.settled { transform: scale(1); }

#fv-content { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
#fv-content.is-visible { opacity: 1; transform: translateY(0); }

#mobile-nav { display: flex; }
#desktop-nav { display: none; }
@media (min-width: 900px) {
  #mobile-nav { display: none; }
  #desktop-nav { display: flex; }
}

/* Responsive header */
.header-logo { white-space: nowrap; flex-shrink: 0; }
.header-info { flex-wrap: wrap; }
@media (max-width: 640px) {
  .header-info { display: none !important; }
}

/* モバイル時のヘッダー：営業時間ブロックと電話ボタンは非表示にし
   （電話予約は下部固定ナビ／フローティングボタンで案内済みのため）、
   「女性限定」「完全予約制」バッジは医院名のすぐ右側に縦並びで表示する。 */
@media (max-width: 640px) {
  .header-row { justify-content: flex-start !important; column-gap: 10px; }
  .header-phone-btn { display: none !important; }
  .header-badge {
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .header-badge span {
    font-size: 12px !important;
    padding: 3px 9px !important;
  }
}

/* Decorative section numbers shrink on narrow screens so they don't crowd headings */
.section-num { font-size: 110px; }
@media (max-width: 640px) {
  .section-num { font-size: 60px !important; }
}

/* Tighter section padding on mobile */
@media (max-width: 640px) {
  .section-pad { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Access map: shorter height when side-by-side with the info column; reverts to a normal card height once the columns stack on narrow screens */
@media (max-width: 640px) {
  .access-map { height: 260px !important; }
}

/* FV on mobile: the decorative watermark and heading were sized for wide screens and felt cramped/overlapping on narrow ones — scale them down and hide the purely decorative side label */
@media (max-width: 640px) {
  .fv-watermark { font-size: 46px !important; margin-bottom: 4px !important; }
  .fv-side-label { display: none !important; }
  .fv-subtitle { font-size: 16px !important; }
  .fv-heading { font-size: 20px !important; }
  .fv-desc { font-size: 16px !important; }
}
/* On very narrow phones the English subtitle wraps to two lines, which then collides with the heading above it — the subtitle is purely decorative (the same info is in the Japanese copy below), so hide it here rather than let it clash */
@media (max-width: 360px) {
  .fv-subtitle { display: none !important; }
}