@charset "utf-8";

/* ============================================================
   儚げテーマ（2026-09-30 松尾さん指示）
   「ふわっと暖かいグラデーションで、赤ちゃんが見ている景色のような世界観」
   - style.css の後に読み込んで上書きするだけ。style.css 本体は触っていない
     （元に戻すときは index.html の <link> 1行を消せばよい）
   - 赤ちゃんの視界＝輪郭がやわらかく、光がにじみ、色がうすく明るい。
     写真はふちを白くぼかし、面は境目を作らずグラデーションでつなぐ
   - 読み手に50〜70代がいるので、文字色だけは濃さを保つ（本文 #4A3F39）
   ============================================================ */

:root {
  --bg:        #FFF9F4;
  --bg-soft:   rgba(255,244,236,.55);
  --paper:     rgba(255,255,255,.62);
  --line:      rgba(226,196,178,.45);

  --ink:       #4A3F39;
  --ink-2:     #7A6C63;
  --ink-3:     #A89A90;

  --accent:      #E59A7B;
  --accent-deep: #C9785A;
  --accent-soft: #FBE3D6;
  --tan:         rgba(255,236,224,.5);
  --foot:        #F7E6DC;

  --glow-peach: #FFD9C7;
  --glow-rose:  #FBD3DA;
  --glow-butter:#FFEFC9;
  --glow-lilac: #EBDDF0;

  --shadow: 0 2px 6px rgba(201,120,90,.05), 0 24px 60px rgba(229,154,123,.12);
  --radius: 32px;
  --radius-s: 20px;
}

/* ---------------------------------------------------------- 地：ページ全体のグラデーション */

html {
  min-height: 100%;
  background:
    linear-gradient(180deg,
      #FFF6EE 0%,
      #FFEFE6 18%,
      #FFF7EC 36%,
      #FDEEF0 54%,
      #FFF5E9 72%,
      #F9EEF5 88%,
      #FFF8F2 100%);
}
/* bodyは透明にして、下の光の玉（z-index:-1）を地の上に出す */
body {
  background: transparent;
  color: var(--ink);
  letter-spacing: .04em;
}

/* にじむ光の玉。固定して、スクロールしても光の中にいる感じを保つ */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(80px); opacity: .75;
}
body::before {
  width: 62vmax; height: 62vmax; left: -18vmax; top: -20vmax;
  background: radial-gradient(circle, var(--glow-butter) 0%, rgba(255,239,201,0) 68%);
  animation: fuwa-a 26s ease-in-out infinite alternate;
}
body::after {
  width: 58vmax; height: 58vmax; right: -20vmax; bottom: -22vmax;
  background: radial-gradient(circle, var(--glow-rose) 0%, rgba(251,211,218,0) 68%);
  animation: fuwa-b 32s ease-in-out infinite alternate;
}
@keyframes fuwa-a { to { transform: translate(8vmax, 10vmax) scale(1.08); } }
@keyframes fuwa-b { to { transform: translate(-10vmax, -8vmax) scale(1.12); } }

/* セクションの面は透かして、地のグラデーションを通す */
.sec-soft, .sec-deep, section { background: transparent; }
.sec-deep { color: var(--ink); }
.sec-soft {
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,240,232,.55) 20%, rgba(255,240,232,.55) 80%, rgba(255,255,255,0));
}

/* アクセント面（無料スライドショー・最後のCTA）は、夕方の光のような桃色のにじみ */
.sec-accent {
  color: var(--ink);
  background:
    radial-gradient(60% 80% at 20% 30%, rgba(255,217,199,.9), rgba(255,217,199,0) 70%),
    radial-gradient(50% 70% at 85% 70%, rgba(251,211,218,.85), rgba(251,211,218,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,236,226,.8) 25%, rgba(255,236,226,.8) 75%, rgba(255,255,255,0));
}
.sec-accent .sec-head p,
.sec-accent p { color: var(--ink-2); }
.sec-accent h2, .sec-accent h3 { color: var(--ink); }

/* ---------------------------------------------------------- 文字：細く、ひらく */

h1, h2, h3, .sec-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink);
}
.sec-head h2 { line-height: 1.9; }
.eyebrow {
  background: transparent !important;
  color: var(--accent-deep) !important;
  letter-spacing: .2em;
  font-weight: 400;
}

/* ---------------------------------------------------------- ヘッダー */

.site-head {
  background: rgba(255,249,244,.55);
  backdrop-filter: saturate(1.2) blur(18px);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
  border-bottom: 1px solid rgba(229,154,123,.12);
}
.site-nav a { font-weight: 400; letter-spacing: .08em; }
.nav-cta, .nav-cta:hover {
  background: linear-gradient(120deg, #F2AE8F, #EFA3AE) !important;
  box-shadow: 0 8px 24px rgba(239,163,174,.35);
}

/* ---------------------------------------------------------- ボタン：丸く、光る */

.btn {
  border-radius: 999px;
  background: linear-gradient(120deg, #F2AE8F 0%, #EFA3AE 100%);
  color: #fff;
  font-weight: 500;
  letter-spacing: .08em;
  box-shadow: 0 10px 30px rgba(239,163,174,.35);
  transition: transform .6s ease, box-shadow .6s ease;
}
.btn:hover {
  background: linear-gradient(120deg, #EFA084 0%, #EA93A0 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(239,163,174,.45);
}
.btn.ghost {
  background: rgba(255,255,255,.55);
  color: var(--accent-deep);
  border: 1px solid rgba(229,154,123,.35);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn.ghost:hover { background: rgba(255,255,255,.8); }
.free-cta .btn, .free-cta .btn:hover { background: linear-gradient(120deg, #F2AE8F, #EFA3AE); }

/* ---------------------------------------------------------- ヒーロー：光の中の家 */

.hero {
  padding-block: 120px 140px;
  background-image:
    radial-gradient(70% 90% at 30% 40%, rgba(255,249,244,.96) 0%, rgba(255,249,244,.82) 45%, rgba(255,249,244,.55) 100%),
    linear-gradient(180deg, rgba(255,236,224,.4), rgba(251,211,218,.35)),
    image-set(url("../assets/photo-gaikan.webp") type("image/webp"),
              url("../assets/photo-gaikan.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center, center, 62% 42%;
}
/* 背景の写真を、ピントの合う前のようにぼかす */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  backdrop-filter: blur(6px) saturate(.9) brightness(1.06);
  -webkit-backdrop-filter: blur(6px) saturate(.9) brightness(1.06);
}
.hero::after { height: 240px; background: linear-gradient(rgba(255,246,238,0), #FFF1E8); }
.hero h1 { font-weight: 300; letter-spacing: .16em; line-height: 1.9; }
.hero-lead { color: var(--ink-2); }

/* 写真：ふちが白くほどける、やわらかい楕円の窓 */
.hero-art img {
  border-radius: 48% 52% 46% 54% / 55% 48% 52% 45%;
  filter: saturate(.85) brightness(1.08) contrast(.92) sepia(.08);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  animation: iki 9s ease-in-out infinite alternate;
}
@keyframes iki { from { transform: scale(1); } to { transform: scale(1.025); } }
/* ファインダーの四隅は硬いので、この世界観では出さない */
.hero-finder { display: none; }

/* ---------------------------------------------------------- 写真全般：光をふくんだ淡さ */

main img:not(.brand-mark img) {
  filter: saturate(.86) brightness(1.06) contrast(.93) sepia(.06);
}
.shots img, .when-art img, .rep-photo img {
  border-radius: var(--radius-s);
  box-shadow: 0 18px 50px rgba(229,154,123,.16);
}

/* ---------------------------------------------------------- カード類：すりガラス */

.when, .path, .option, .free-why, .plan-table, details, .steps li, .profile, .rep {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.plan-table thead th, .plan-table tbody th { background: rgba(255,240,232,.6); }
.path header { background: linear-gradient(120deg, #F2B79C, #EFAAB4) !important; }
.check { background: linear-gradient(120deg, #F2AE8F, #EFA3AE) !important; color: #fff; }

/* ---------------------------------------------------------- フッター：夕暮れの淡い桃色 */

.site-foot {
  background: linear-gradient(180deg, rgba(247,230,220,0), #F7E3DA 30%, #F2DCE0);
  color: var(--ink-2);
}
.site-foot b, .site-foot h4 { color: var(--ink); }
.foot-col h4 { color: var(--accent-deep); }
.foot-col a { color: var(--ink-2); }
.foot-col a:hover { color: var(--ink); }
.site-foot small, .site-foot p { color: var(--ink-2); }

/* ---------------------------------------------------------- 現れ方：ゆっくり、ほどける */

@media (prefers-reduced-motion: no-preference) {
  main > section { animation: hodokeru 1.6s ease-out both; }
  @keyframes hodokeru {
    from { opacity: 0; filter: blur(8px); transform: translateY(16px); }
    to   { opacity: 1; filter: blur(0);   transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .hero-art img { animation: none; }
}

@media print {
  body::before, body::after { display: none; }
  body { background: #fff; }
}

/* 桃色の面の上のボタン（元は「オレンジ地に白」用の色だった） */
.sec-accent .btn { background: linear-gradient(120deg, #F2AE8F, #EFA3AE) !important; color: #fff !important; border: 0 !important; }
.sec-accent .btn.ghost { background: rgba(255,255,255,.7) !important; color: var(--accent-deep) !important; border: 1px solid rgba(229,154,123,.4) !important; }