:root{
      --ink:#1c2530;
      --muted:#5c6b7a;
      --brand:#2f6f77;     /* 深めの青緑：安心感 */
      --brand2:#e8f3f1;    /* うすいミント：やさしさ */
      --accent:#f2c2b5;    /* うすいピーチ：母親向けの柔らかさ */
      --paper:#fbfaf8;     /* 生成り：温かさ */
      --line:#e7e2dc;
      --shadow: 0 18px 50px rgba(28,37,48,.12);
      --radius: 22px;
    }
    body{
      font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
      color:var(--ink);
      background: linear-gradient(180deg, var(--brand2) 0%, var(--paper) 38%, #ffffff 100%);
    }
    .font-title{
      letter-spacing:.02em;
    }
    .small-label{
      font-size:.92rem;
      color:var(--muted);
    }
    .nav-blur{
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(231,226,220,.8);
    }
    .brand-dot{
      width:10px;height:10px;border-radius:999px;background:var(--accent);
      display:inline-block;margin-right:.55rem;transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(242,194,181,.55);
    }
    .btn-soft{
      background: linear-gradient(135deg, var(--brand) 0%, #3c8a83 100%);
      color:#fff;
      border:0;
      box-shadow: 0 12px 30px rgba(47,111,119,.25);
    }
    .btn-soft:hover{ filter: brightness(0.3); color:#3c8a83; }
    .btn-outline-soft{
      border:1px solid rgba(47,111,119,.25);
      color:var(--brand);
      background:#fff;
    }
    .btn-soft:hover{
       color:#3c8a83;
    }
    .btn-outline-soft:hover{
      background: rgba(47,111,119,.06);
      color:var(--brand);
      border-color: rgba(47,111,119,.35);
    }

    /* Hero */
    .hero{
      padding-top: 7.2rem;
      padding-bottom: 3.6rem;
      position: relative;
      overflow: hidden;
    }
    .hero-card{
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(231,226,220,.9);
      border-radius: calc(var(--radius) + 6px);
      box-shadow: var(--shadow);
      position: relative;
    }
    .hero-card::before{
      content:"";
      position:absolute; inset:-1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(242,194,181,.35), rgba(47,111,119,.12), rgba(255,255,255,0));
      pointer-events:none;
      mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      padding:1px;
    }
    .hero h1{
      font-size: clamp(1.85rem, 3.2vw, 3rem);
      line-height: 1.22;
    }
    .hero .lead{
      color:var(--muted);
      font-size: clamp(1.02rem, 1.35vw, 1.12rem);
      line-height: 1.8;
    }
    .hero-badges .badge{
      background: rgba(47,111,119,.08);
      color: var(--brand);
      border: 1px solid rgba(47,111,119,.16);
      font-weight: 500;
      padding: .55rem .75rem;
      border-radius: 999px;
    }
    .soft-blob{
      position:absolute;
      width: 460px; height: 460px;
      right:-180px; top:-140px;
      background: radial-gradient(circle at 35% 35%, rgba(242,194,181,.55), rgba(47,111,119,.08) 55%, rgba(255,255,255,0) 70%);
      filter: blur(2px);
      border-radius: 50%;
      opacity: .9;
      pointer-events:none;
    }
    .soft-blob2{
      position:absolute;
      width: 520px; height: 520px;
      left:-220px; bottom:-280px;
      background: radial-gradient(circle at 55% 45%, rgba(47,111,119,.18), rgba(242,194,181,.12) 55%, rgba(255,255,255,0) 72%);
      filter: blur(1px);
      border-radius: 50%;
      opacity: .85;
      pointer-events:none;
    }
    .wave{
      position:absolute; left:0; right:0; bottom:-1px;
      height: 90px;
      opacity: .8;
    }

    /* Sections */
    section{
      padding: 3.3rem 0;
      margin-bottom: 24px;
    }
    .section-title{
      font-size: 1.8rem;
      margin-bottom: .5rem;
    }
    .section-sub{
      color:var(--muted);
      margin-bottom: 1.6rem;
      line-height: 1.8;
    }
    .card-soft{
      border: 1px solid rgba(231,226,220,.9);
      border-radius: var(--radius);
      box-shadow: 0 16px 40px rgba(28,37,48,.08);
      background: #fff;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.55rem .85rem;
      border-radius: 999px;
      border: 1px solid rgba(231,226,220,.95);
      background: rgba(251,250,248,.7);
      color: var(--muted);
      font-size: .92rem;
    }
    .icon-dot{
      width: 10px; height: 10px; border-radius: 999px;
      background: var(--brand);
      box-shadow: 0 8px 18px rgba(47,111,119,.28);
    }
    .reason{
      padding: 1.2rem 1.2rem;
      border-radius: var(--radius);
      border: 1px solid rgba(231,226,220,.9);
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,250,248,.78));
      height: 100%;
    }
    .reason h3{
      font-size: 1.3rem;
      margin-bottom: .5rem;
    }
    .reason p{
      color: var(--muted);
      line-height: 1.8;
      margin-bottom: 0;
    }

    /* Table */
    .table-soft{
      border: 1px solid rgba(231,226,220,.9);
      border-radius: var(--radius);
      overflow:hidden;
    }
    .table-soft thead th{
      background: rgba(47,111,119,.06);
      color: var(--brand);
      border-bottom: 1px solid rgba(231,226,220,.9);
      font-weight: 700;
      padding: .95rem 1rem;
    }
    .table-soft td{
      padding: .95rem 1rem;
      border-top: 1px solid rgba(231,226,220,.65);
      vertical-align: middle;
    }

    /* FAQ */
    .faq-item{
      border: 1px solid rgba(231,226,220,.9);
      border-radius: 18px;
      padding: 1.05rem 1.1rem;
      background: #fff;
    }
    .faq-q{
      font-weight: 700;
      margin-bottom: .35rem;
    }
    .faq-a{
      color: var(--muted);
      line-height: 1.8;
      margin: 0;
    }

    /* CTA */
    .cta{
      background: linear-gradient(135deg, rgba(47,111,119,.10), rgba(242,194,181,.14));
      border-top: 1px solid rgba(231,226,220,.9);
      border-bottom: 1px solid rgba(231,226,220,.9);
    }
    .cta-box{
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(231,226,220,.95);
      border-radius: calc(var(--radius) + 6px);
      box-shadow: var(--shadow);
    }

    footer{
      padding: 2rem 0;
      color: var(--muted);
      font-size: .95rem;
    }
    a{ color: var(--brand); }
    a:hover{ color:#235a60; }


    /* Font Awesome (icons) */
    .icon-fa{
      color: var(--accent);
      flex: 0 0 auto;
      margin-top: .22rem;
      font-size: 1.05rem;
      filter: drop-shadow(0 10px 18px rgba(242,194,181,.25));
    }
    .trouble-list{
      list-style: none;
      padding: 0;
      margin: 0;
      color: var(--muted);
      line-height: 1.9;
    }
    .trouble-list li{
      display: flex;
      gap: .75rem;
      align-items: flex-start;
      padding: .2rem 0;
    }
    .trouble-list li + li{
      border-top: 1px dashed rgba(231,226,220,.7);
      margin-top: .55rem;
      padding-top: .65rem;
    }


    /* Compact spacing on small screens */
    @media (max-width: 576px){
      .hero{ padding-top: 7.3rem; padding-bottom: 2.8rem; }
      section{ padding: 2.7rem 0; }
    }
  
/* --- Warm & friendly heading typography --- */
:root{
  --title-font: "M PLUS Rounded 1c", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body-font: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body{ font-family: var(--body-font); }

/* Main title / hero title */
h1{
  font-family: var(--title-font);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .65);
}

/* Section titles */
h2, h3{
  font-family: var(--title-font);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* If there is a specific hero title class, it will look even better */
.hero-title, .fv-title, .page-title{
  font-family: var(--title-font);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
}


:root{
  --main-green:#f6d6ad;
  --soft-green:#fff2e6;
  --accent-orange:#f6d6ad;
  --text-dark:#333;
}
body{
  background:linear-gradient(180deg,#f7fbf8,#ffffff);
  color:var(--text-dark);
}
section{
  background:#fff;
  border-radius:12px;
}
h1,h2,h3{
  color:#d68a8a;
}
.btn, .btn-soft{
  background:linear-gradient(135deg,#66bb6a,#43a047);
  color:#fff!important;
  border-radius:30px;
}
.btn:hover{opacity:.9}
h2 i{margin-right:.5em;color:var(--accent-orange);}

/* =========================================================
   Baby Pastel Theme (soft, child-friendly, easy on eyes)
   - Content unchanged; only colors/tones/spacing tweaks.
   ========================================================= */
:root{
  --base-bg: #fffdf9;        /* milky white */
  --section-bg: #f7f4ef;     /* warm off-white */
  --card-bg: #ffffff;
  --title-color: #5f5f5f;    /* soft gray */
  --text-color: #3f3f3f;

  --accent-pink: #f3c9c9;    /* baby pink */
  --accent-mint: #cfe8e3;    /* baby mint */
  --accent-lav:  #d9d2f0;    /* baby lavender */
  --accent-sun:  #f6d6ad;    /* milky apricot */

  --line: rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Page background */
body{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(243,201,201,.30), transparent 60%),
              radial-gradient(1200px 600px at 90% 15%, rgba(207,232,227,.35), transparent 60%),
              radial-gradient(1200px 700px at 50% 95%, rgba(246,214,173,.28), transparent 55%),
              var(--base-bg);
  color: var(--text-color);
}

/* Generic containers/sections: keep soft blocks */
section, .section, .inner, .container, .wrap, .content, .box, .card, .panel{
  border-color: var(--line);
}

/* If the page uses white sections already, add gentle rounding/shadow */
section, .section, .box, .card, .panel{
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Headings */
h1, .hero-title, .fv-title, .page-title{
  color: var(--title-color);
}
h2, h3{
  color: var(--title-color);
}

/* Font Awesome icon tone (pastel) */
h2 i.fa-solid, h2 i.fa-regular, h2 i.fa-brands{
  color: #e7a9a9; /* slightly deeper than baby pink for readability */
}

/* Links */
a{ color: #6c8bd6; }
a:hover{ color: #5576c6; }

/* Buttons: soft apricot CTA */
.okojo-btn, .btn, .btn-soft, button, input[type="submit"]{
  border-radius: 14px;
}
.btn-soft, .okojo-btn, .btn-primary, a.btn-primary{
  background: linear-gradient(135deg, rgba(246,214,173,1), rgba(243,201,201,1));
  border: 1px solid rgba(0,0,0,.06);
  color: #3a2d1f !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.btn-soft:hover, .okojo-btn:hover, .btn-primary:hover, a.btn-primary:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* Secondary accents (if used) */
.badge, .tag, .pill{
  background: rgba(207,232,227,.55);
  border: 1px solid rgba(0,0,0,.06);
  color: #2f4b46;
}

/* Tables / lists */
hr{ border-color: var(--line); }
table{ border-color: var(--line); }
th{ background: rgba(217,210,240,.35); }
td{ background: rgba(255,255,255,.70); }

/* Reduce harsh blacks */
strong{ color: #333; }


/* =========================================================
   Bootstrap text utility overrides (soft pastel)
   ========================================================= */
.text-danger{
  --bs-text-opacity: 1;
  color: rgba(214, 138, 138, var(--bs-text-opacity)) !important; /* soft baby red */
}

.text-primary{
  --bs-text-opacity: 1;
  color: rgba(108, 139, 214, var(--bs-text-opacity)) !important; /* soft baby blue */
}
/* =========================================
   btn-outline-soft 完全安定版（文字色固定）
========================================= */
.btn-outline-soft {
  color: #ffffff !important;           /* ミルキー系に合う濃ブラウン */
  background-color: transparent;
  border: 1.5px solid rgba(0,0,0,0.18);
  transition: background-color .15s ease,
              border-color .15s ease,
              box-shadow .15s ease;
}

/* hover / focus */
.btn-outline-soft:hover,
.btn-outline-soft:focus {
  color: #3a2f26 !important;           /* さらに一段濃く */
  background-color: rgba(246, 214, 173, 0.65); /* ミルキーアプリコット */
  border-color: rgba(246, 214, 173, 1);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* active（クリック時） */
.btn-outline-soft:active {
  color: #ffffff !important;
  background-color: rgba(246, 214, 173, 0.85);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.12);
}

/* Bootstrapのhover白文字を完全に無効化 */
.btn-outline-soft:hover,
.btn-outline-soft:focus,
.btn-outline-soft:active {
  text-decoration: none;
}


/* =========================================================
   Final UI fixes (LP usability)
   ========================================================= */

/* btn-soft hover: avoid darkening & keep readable */
.btn-soft:hover,
.btn-soft:focus{
  filter: brightness(0.98) !important;
  color: #ffffff !important;
}

/* btn-outline-soft: readable text + no white flash */
.btn-outline-soft{
  color: #ffffff !important;
  background-color: transparent !important;
  border: 1.5px solid rgba(0,0,0,0.18) !important;
  transition: background-color .15s ease,
              border-color .15s ease,
              box-shadow .15s ease,
              color .15s ease !important;
}
.btn-outline-soft:hover,
.btn-outline-soft:focus{
  color: #3a2f26 !important;
  background-color: rgba(246, 214, 173, 0.65) !important;
  border-color: rgba(246, 214, 173, 1) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;
}
.btn-outline-soft:active{
  color: #2f241c !important;
  background-color: rgba(246, 214, 173, 0.85) !important;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.12) !important;
}

/* === Estimator tweaks === */
#estimate .form-check-input:checked{background:#e6a3a3;border-color:#e6a3a3}
#estimate .btn-soft{background:#f3c6c6;color:#4a3f35}


/* ===== Schedule Table ===== */
.schedule-table{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.schedule-row{
  display: grid;
  grid-template-columns: 140px 1fr 220px;
  gap: 0;
  border-top: 1px solid rgba(0,0,0,.06);
}

.schedule-row:first-child{ border-top: none; }

.schedule-head{
  background: rgba(110,195,184,.18); /* あなたのベビーパステル系に合わせて薄め */
  font-weight: 800;
}

.schedule-row .cell{
  padding: 14px 14px;
  line-height: 1.6;
}

.schedule-row .cell + .cell{
  border-left: 1px solid rgba(0,0,0,.06);
}

.schedule-row .time{
  font-weight: 800;
  white-space: nowrap;
}

.schedule-row .note{
  color: rgba(0,0,0,.65);
  font-size: .95rem;
}

/* ===== Mobile: card layout ===== */
@media (max-width: 768px){

.section-title{
    font-size: 1.45rem;
}

  .schedule-row{
    grid-template-columns: 1fr;
  }
  .schedule-head{
    display: none; /* スマホではヘッダ非表示 */
  }
  .schedule-row{
    border-top: 1px solid rgba(0,0,0,.06);
    padding: 10px 12px;
  }
  .schedule-row .cell{
    border-left: none !important;
    padding: 6px 6px;
  }
  .schedule-row .time{
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,179,186,.22); /* ほんのりピンク */
    width: fit-content;
    margin-bottom: 4px;
  }
  .schedule-row .note{
    margin-top: 2px;
  }
}
@media (max-width: 768px) {
  .nopc {
    display: none;
  }
}