/* =========================================================
   guide.css
   /guide/ フード選びのヒント
   ========================================================= */

.guide-hero{
  margin-top:4px;
}

.guide-hero .page-intro-title{
  margin-bottom:8px;
}

.guide-hero .page-intro-title .material-symbols-rounded{
  color:var(--accent-main-deep);
}

.guide-hero .page-intro-lead{
  font-size:14px;
}

/* =========================
   Main title
   ========================= */

.guide-main-title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
  line-height:1.45;
  color:var(--text-main);
}

/* =========================
   Point cards
   ========================= */

.guide-point-card{
  margin-top:16px;
  padding:20px 16px 16px;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:18px;
  box-shadow:none;
}

.guide-point-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}

.guide-point-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:16px;
  background:var(--accent-soft);
  color:var(--accent-main-deep);
  font-size:15px;
  font-weight:900;
  letter-spacing:.04em;
}

.guide-point-title{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.4;
  font-weight:900;
  color:var(--text-main);
}

.guide-point-summary{
  margin:0;
  color:var(--text-muted);
  font-size:13.5px;
  line-height:1.8;
}

/* =========================
   Mini blocks
   ========================= */

.guide-mini-blocks{
  display:grid;
  gap:12px;
}

.guide-mini-block{
  padding:14px 14px 13px;
  border-radius:14px;
  background:#fafafa;
  border:1px solid #edf0f3;
}

.guide-mini-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 9px;
  font-size:13px;
  font-weight:900;
  color:var(--text-main);
}

.guide-mini-title::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent-main);
  flex:0 0 auto;
}

.guide-check-list{
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}

.guide-check-list li{
  position:relative;
  padding-left:20px;
  font-size:13px;
  line-height:1.7;
  color:#4b5563;
}

.guide-check-list li::before{
  content:"";
  position:absolute;
  left:1px;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--accent-main);
}

/* =========================
   Note
   ========================= */

.guide-note{
  margin-top:14px;
  padding:0;
  background:none;
  border:none;
}

.guide-note p{
  margin:0;
  font-size:12.5px;
  line-height:1.75;
  color:#d98780;
}

/* =========================
   PETTE tip
   ========================= */

.guide-tip{
  margin-top:16px;
}

.guide-tip .pette-tip-icon{
  width:58px;
  height:58px;
}

.guide-tip .pette-tip-balloon{
  background:#fff;
  border-color:#dfe7f0;
  border-radius:16px;
  padding:13px 15px;
  box-shadow:none;
}

.guide-tip .pette-tip-balloon::after{
  border-right-color:#fff;
}

.guide-tip .pette-tip-title{
  font-size:14px;
}

.guide-tip .pette-tip-text{
  font-size:13px;
  line-height:1.85;
}

/* =========================
   CTA
   ========================= */

.guide-cta{
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-color:#dbe8f7;
}

.guide-cta .form-actions{
  margin-top:16px;
}
/* guide CTA用（モバイル優先） */
.guide-cta .form-actions{
  display:flex;
}

.guide-cta .form-actions .btn{
  width:100%;
}

/* PCで広がりすぎ防止（任意） */
@media (min-width:768px){
  .guide-cta .form-actions{
    justify-content:flex-start;
  }

  .guide-cta .form-actions .btn{
    width:auto;
    min-width:220px; /* 好みで調整 */
  }
}
/* =========================
   Responsive
   ========================= */

@media (min-width:768px){
  .guide-point-card{
    padding:22px 18px 18px;
  }

  .guide-mini-blocks{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:420px){
  .guide-point-head{
    gap:12px;
  }

  .guide-point-num{
    width:46px;
    height:46px;
    flex-basis:46px;
    border-radius:14px;
    font-size:14px;
  }

  .guide-point-title{
    font-size:19px;
  }
}