/* 総合リアラ美容 ハーブピールLP
   デザイン画像 lp-v5.png（724×2172）を区切りごとに切り出して並べ、
   見出し・ボタン・電話・リンクは同じ位置に本物の要素として重ねている。 */
:root {
  --side-bg: #f6eeeb;
  --page-bg: #ffffff;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--side-bg);
  color: #333;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
img { display: block; max-width: 100%; height: auto; border: 0; }

/* 1カラム。スマホでは画面幅いっぱい、広い画面では最大480pxで中央寄せ（画像比率は保つ） */
#design {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--page-bg);
  overflow: hidden;
}
@media (min-width: 520px) {
  #design { box-shadow: 0 0 24px rgba(120, 80, 70, .12); }
}

.sec { position: relative; display: block; margin: 0; }
.sec .bg { width: 100%; }

/* 人物写真：高精細版を帯の上の同じ位置に重ねる（srcsetで画面に合う解像度を選ぶ） */
.sec .photo { position: absolute; z-index: 1; height: auto; }

/* 重ねる要素：位置と幅は %（デザイン画像の座標から計算） */
.ov {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
  line-height: 0;
  z-index: 2;
}
.ov img { width: 100%; }

a.ov { border-radius: 999px; -webkit-tap-highlight-color: transparent; }
a.ov:focus-visible { outline: 3px solid #e2546a; outline-offset: 2px; }
a.btn { transition: transform .15s ease, filter .15s ease; }
@media (hover: hover) {
  a.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
  a.tel:hover, a.link:hover { opacity: .8; }
}

/* 控えめなフェードイン（最初の画面だけ。終わった状態が完成形） */
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.s01-hero { animation: fadein .8s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .s01-hero { animation: none; }
  a.btn { transition: none; }
}