/* =========================================================
   稚エビ販売ページ（WordPress固定ページ用）
   /cf/ のLPと同じデザイン。すべて .cfp の中だけに効くようにしているので、
   WordPressテーマのヘッダー・フッター等には影響しません。
   ========================================================= */

.cfp{
  --navy:#0c3a4d;
  --navy-deep:#082a38;
  --teal:#12768f;
  --coral:#ff7a52;
  --coral-dark:#e85f38;
  --cream:#fdf7ee;
  --ink:#1f2d33;
  --line:#e7ddcd;
  --shadow:0 18px 40px rgba(12,58,77,0.12);
  --radius:18px;
  --plan-full:#e0582f;  /* 全額前払い */
  --plan-part:#0c3a4d;  /* 一部前払い */
  --plan-pre:#12768f;   /* 仮予約 */

  font-family:"Noto Sans JP","Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  line-height:1.9;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
.cfp *, .cfp *::before, .cfp *::after{ box-sizing:border-box; }
.cfp img{ max-width:100%; height:auto; display:block; }
.cfp a{ color:inherit; text-decoration:none; }
.cfp h2, .cfp h3{
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  margin:0; padding:0; border:none; background:none;
}
.cfp h2::before, .cfp h2::after, .cfp h3::before, .cfp h3::after{ content:none; }
.cfp p{ margin:0 0 1em; }
.cfp ul, .cfp ol{ margin:0; padding:0; list-style:none; }
.cfp li{ margin:0; }

/* ---------- セクション共通 ---------- */
.cfp-section{ padding:64px 0; }
.cfp-section + .cfp-section{ border-top:1px solid var(--line); }
.cfp-inner{ max-width:1000px; margin:0 auto; padding:0 20px; }
.cfp-eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--coral-dark);
  text-transform:uppercase;
  margin:0 0 10px !important;
}
.cfp .cfp-title{
  font-size:28px;
  font-weight:900;
  line-height:1.5;
  color:var(--navy-deep);
  margin-bottom:24px;
}
.cfp-lead{ font-size:15.5px; color:#34474f; }

/* ---------- 冒頭（キャッチ） ---------- */
.cfp-intro{
  background:linear-gradient(120deg,#6cc8e8 0%,#3aa0d2 55%,#2380b8 100%);
  color:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:stretch;
  box-shadow:var(--shadow);
}
.cfp-intro__text{ padding:40px 36px; text-shadow:0 1px 3px rgba(0,0,0,.18); }
.cfp-intro__tag{
  display:inline-block;
  background:#fff;
  color:#2380b8;
  font-weight:700;
  font-size:13px;
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px !important;
  text-shadow:none;
}
.cfp-intro__kicker{ font-size:17px; font-weight:700; line-height:1.6; margin:0 0 4px !important; }
.cfp .cfp-intro__title{
  font-size:38px;
  font-weight:900;
  line-height:1.5;
  color:#fff;
  margin-bottom:14px;
}
.cfp-intro__title span{ color:#ffe9a8; }
.cfp-intro__sub{ font-weight:700; font-size:15px; margin:0 !important; }
.cfp-intro__media img{ width:100%; height:100%; object-fit:cover; }

.cfp-story{ margin-top:36px; }
.cfp-story p{ color:#34474f; }

/* ---------- 募集要項 ---------- */
.cfp-spec{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.cfp-spec__item{
  background:#fff;
  border-radius:14px;
  padding:20px 22px;
  box-shadow:0 8px 24px rgba(12,58,77,.08);
}
.cfp-spec__item--wide{ grid-column:1 / -1; }
.cfp-spec__label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--coral-dark);
  margin-bottom:4px;
}
.cfp-spec__value{ font-size:16px; font-weight:700; color:var(--navy-deep); margin:0 !important; }
.cfp-spec__note{ font-size:13px; color:#6b7a80; margin:4px 0 0 !important; }

/* ---------- 申込カード（A/B/C） ---------- */
.cfp-plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:28px;
}
.cfp-plan{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.cfp-plan--full{ --plan:var(--plan-full); }
.cfp-plan--part{ --plan:var(--plan-part); }
.cfp-plan--pre{ --plan:var(--plan-pre); }
.cfp-plan__band{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 22px;
  background:var(--plan);
  color:#fff;
}
.cfp-plan__letter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  flex-shrink:0;
  border-radius:50%;
  background:#fff;
  color:var(--plan);
  font-weight:900;
  font-size:26px;
  line-height:1;
}
.cfp .cfp-plan__title{ font-size:18px; line-height:1.4; color:#fff; }
.cfp-plan__body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:22px 24px 26px;
}
.cfp-plan__list{ flex:1; margin-bottom:18px !important; }
.cfp-plan__list li{
  position:relative;
  padding-left:20px;
  margin-bottom:8px;
  font-size:14px;
  color:#42525a;
}
.cfp-plan__list li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  color:var(--coral);
  font-weight:700;
}
.cfp-plan__list strong{ color:var(--navy-deep); }
.cfp-btn{
  display:block;
  text-align:center;
  padding:13px 20px;
  border-radius:999px;
  background:var(--plan, var(--navy));
  color:#fff !important;
  font-size:14px;
  font-weight:700;
  transition:filter .2s, transform .2s;
}
.cfp-btn:hover{ filter:brightness(.88); transform:translateY(-2px); }
.cfp-btn--navy{ --plan:var(--navy); display:inline-block; padding:14px 34px; }

.cfp-notice{
  margin-top:28px;
  background:#eaf1f4;
  border:2px solid var(--navy);
  border-radius:var(--radius);
  padding:22px 26px;
}
.cfp-notice p{ font-weight:700; color:var(--navy-deep); font-size:14.5px; }
.cfp-notice p:last-child{ margin-bottom:0; }

/* ---------- 箇条書き（基準など） ---------- */
.cfp-rules li{
  position:relative;
  background:#fff;
  border-radius:14px;
  padding:18px 22px 18px 48px;
  margin-bottom:12px;
  box-shadow:0 8px 24px rgba(12,58,77,.06);
  font-size:14.5px;
  color:#34474f;
}
.cfp-rules li::before{
  content:"";
  position:absolute;
  left:22px; top:28px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--coral);
}
.cfp-rules strong{ color:var(--navy-deep); }

/* ---------- 配送までの流れ ---------- */
.cfp-flow{ counter-reset:cfpflow; position:relative; }
.cfp-flow li{
  counter-increment:cfpflow;
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 0 18px;
  font-size:15px;
  font-weight:700;
  color:var(--navy-deep);
}
.cfp-flow li::before{
  content:counter(cfpflow);
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:15px;
  font-weight:900;
  position:relative;
  z-index:1;
}
.cfp-flow li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:19px; top:40px; bottom:0;
  width:2px;
  background:#cfe0e4;
}
.cfp-flow__wait{ display:block; font-size:12.5px; font-weight:700; color:var(--coral-dark); }

/* ---------- サポートコース ---------- */
.cfp-courses{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.cfp-course{
  background:#fff;
  border-radius:var(--radius);
  padding:24px 24px 22px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.cfp-course__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cfp-course__letter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-weight:900;
  font-size:15px;
}
.cfp .cfp-course__title{ font-size:16px; line-height:1.5; color:var(--navy-deep); }
.cfp-course__price{
  margin:auto 0 0 !important;
  padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:18px;
  font-weight:900;
  color:var(--coral-dark);
}
.cfp-course__price small{ font-size:12px; font-weight:700; color:#6b7a80; margin-left:4px; }
.cfp-small{ font-size:13px; color:#6b7a80; margin-top:18px !important; }

.cfp-center{ text-align:center; }
.cfp-sp{ display:none; }

/* ---------- スマホ ---------- */
@media (max-width: 860px){
  .cfp-section{ padding:48px 0; }
  .cfp .cfp-title{ font-size:22px; }
  .cfp-intro{ grid-template-columns:1fr; }
  .cfp-intro__media{ order:-1; max-height:220px; overflow:hidden; }
  .cfp-intro__text{ padding:28px 22px; }
  .cfp-intro__kicker{ font-size:14.5px; }
  .cfp-sp{ display:inline; }
  .cfp .cfp-intro__title{ font-size:28px; }
  .cfp-spec{ grid-template-columns:1fr; }
  .cfp-plans{ grid-template-columns:1fr; }
  .cfp-courses{ grid-template-columns:1fr; }
}