/* ===== LP only style.css (600px shell fixed / header-footer included) ===== */
:root{
  --bg-base: #f6f1e8;
  --brand-main: #6b9b8b;
  --brand-soft: #eaf4f1;
  --card: rgba(255,255,255,.72);
  --text-main: #2f2f2f;
  --text-muted: rgba(0,0,0,.65);
  --line: rgba(0,0,0,.12);
  --muted: rgba(0,0,0,.65);
  --shadow: 0 10px 24px rgba(0,0,0,.06);
  --brand-dark: #4d7f70;
  --accent-cta: #f07a1a;
  --marker: rgba(240,122,26,.25);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg-base);
  color: var(--text-main);
  line-height: 1.85;
  font-size: 17px;
}
a{ color: inherit; }
img{ max-width: 100%; height: auto; display: block; }

/* ✅ 唯一のシェル：header〜footer + sticky も含めて 600px に固定 */
.lp-content-area{
  width: min(600px, 100%);
  margin: 0 auto;
  position: relative;
  background: var(--bg-base);
  min-height: 100vh;
  overflow-x: clip; /* 横はみ出し対策 */
}

/* 中身の余白（スマホで端ピッタリにしたくないので、内側paddingで調整） */
.lp-container{
  width: 100%;
  padding-left: 14px;
  padding-right: 14px;
  margin: 0 auto;
}

/* Header */
.lp-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.lp-header__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px;
  gap: 12px;
}
.lp-brand__name{ font-weight: 900; letter-spacing: .02em; }
.lp-brand__note{ margin-left: 6px; font-weight: 700; opacity: .7; font-size: 12px; }

.lp-header__right{
  display:flex;
  align-items:center;
  gap: 10px;
}
.lp-header__tel{ display:none; }
.lp-header__tel-label{ font-weight: 800; font-size: 13px; opacity: .85; }
.lp-header__tel-num{ font-weight: 900; font-size: 18px; text-decoration: none; }
.lp-header__tel-time{ font-size: 12px; opacity: .75; }

/* Hero */

.lp-kicker{
  margin: 0 0 10px;
  font-weight: 900;
  opacity: .85;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.lp-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  font-weight: 900;
}
.lp-badge::before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(107,155,139,.18);
  border: 1px solid rgba(107,155,139,.28);
  font-weight: 900;
}

/* Cards */
.lp-hero__cards{
  margin-top: 16px;
  display:grid;
  gap: 12px;
}
.lp-card{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.lp-card--soft{ background: rgba(255,255,255,.84); }
.lp-card__title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
}
.lp-list{
  margin: 0;
  padding-left: 18px;
}

/* Buttons */
.lp-btn{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  text-decoration: none;
  border-radius: 14px;
  border: 2px solid transparent;
  padding: 14px 14px;
  min-height: 56px;
  font-weight: 900;
  text-align:center;
}
.lp-btn--primary{
  background: var(--accent-cta);
  color: #fff;
}
.lp-btn--outline{
  background: rgba(255,255,255,.82);
  border-color: var(--line);
}
.lp-btn--sm{
  padding: 10px 10px;
  min-height: 44px;
  font-size: 12px;
}
.lp-btn__big{ font-size: 18px; line-height: 1.15; }
.lp-btn__sub{ font-size: 13px; opacity: .92; font-weight: 800; }

.lp-cta{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 10px;
}

.lp-note{
  margin: 8px 0 0;
  font-size: 13px;
  opacity: .8;
}
.lp-note--center{ text-align:center; }

/* Sections */
.lp-section{
  padding: 34px 0;
}
.lp-section--soft{
  background: rgba(255,255,255,.22);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.lp-section__head{ margin-bottom: 14px; }
.lp-section__title{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 22px;
}
.lp-section__lead{
  margin: 0;
  opacity: .95;
  font-size: 17px;
}
.lp-section__cta{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Grid items */
.lp-grid{
  display:grid;
  gap: 12px;
}
.lp-grid--3{ grid-template-columns: 1fr; }

.lp-item{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.lp-item__title{ margin: 0 0 6px; font-weight: 900; font-size: 18px; }
.lp-item__text{ margin: 0; opacity: .98; }

/* Steps */
.lp-steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 12px;
}
.lp-step{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.lp-step__num{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid var(--line);
}
.lp-step__title{ margin: 0 0 4px; font-weight: 900; }
.lp-step__text{ margin: 0; opacity: .98; }

/* Voice */
.lp-voice{
  margin: 0;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.lp-voice__quote{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 16px;
}
.lp-voice__meta{
  font-size: 13px;
  opacity: .8;
}

/* FAQ */
.lp-faq{
  display:grid;
  gap: 12px;
}
.lp-faq__item{
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lp-faq__q{
  cursor: pointer;
  padding: 16px;
  font-weight: 900;
  font-size: 18px;
  list-style: none;
  min-height: 56px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.lp-faq__q::-webkit-details-marker{ display:none; }
.lp-faq__q::after{
  content: "▾";
  font-weight: 900;
  opacity: .8;
}
.lp-faq__item[open] .lp-faq__q::after{ content: "▴"; }
.lp-faq__a{ padding: 0 16px 16px; }
.lp-faq__a p{ margin: 0; }

/* Form */
.lp-form{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.lp-form__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.lp-field{ display:block; }
.lp-field__label{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  margin-bottom: 6px;
}
.lp-required{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-cta);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.lp-input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 12px 12px;
  min-height: 48px;
  font-size: 16px;
  background: rgba(255,255,255,.92);
}
.lp-textarea{
  min-height: 140px;
  resize: vertical;
}
.lp-field__help{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  opacity: .75;
}

.lp-checks{
  margin: 14px 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.18);
  background: rgba(255,255,255,.48);
}
.lp-checks__title{
  font-weight: 900;
  margin: 0 0 10px;
}
.lp-check{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 0;
  font-weight: 900;
}
.lp-check input{ width: 18px; height: 18px; }

.lp-safety{
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border-left: 5px solid var(--brand-dark);
  background: rgba(255,255,255,.76);
}
.lp-safety p{ margin: 0 0 8px; }
.lp-safety p:last-child{ margin-bottom: 0; }
.lp-safety__small{ font-size: 12px; opacity: .78; }

.lp-consent{
  display:flex;
  gap: 10px;
  align-items:center;
  margin: 10px 0 14px;
  font-weight: 900;
}
.lp-consent input{ width: 18px; height: 18px; }

.lp-form__cta{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Final */
.lp-final{ padding: 38px 0 84px; }
.lp-final__box{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}
.lp-final__title{ margin: 0 0 8px; font-weight: 900; font-size: 22px; }
.lp-final__text{ margin: 0 0 14px; font-size: 17px; }

.lp-final__cta{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Sticky CTA：シェル内幅600で固定して、下に貼り付く */
.lp-sticky{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(600px, 100%);
  display:flex;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.9);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.lp-sticky__btn{
  flex:1;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: 14px;
  min-height: 56px;
  font-weight: 900;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
}
.lp-sticky__btn--tel{
  background: var(--accent-cta);
  border-color: transparent;
  color:#fff;
}
.lp-sticky__icon{ font-size: 18px; }
.lp-sticky__txt{ display:flex; flex-direction:column; line-height:1.1; }
.lp-sticky__label{ font-size: 14px; }
.lp-sticky__sub{ font-size: 12px; opacity: .92; font-weight: 900; }

/* Footer */
.lp-footer{
  background: rgba(0,0,0,.12);
}
.lp-footer__inner{
  padding: 18px 0 92px; /* sticky分 */
  text-align:center;
  opacity: .9;
  font-weight: 700;
}

/* ちょい大きい画面だけ微調整 */
@media (min-width: 420px){
  .lp-hero__title{ font-size: 38px; }
}
/* =========================
   PRICE SECTION
========================= */
.lp-section--price{
  background: var(--brand-soft);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* 料金のカードだけ少し強くする */
.lp-section--price .lp-item{
  border-color: rgba(107,155,139,.35);
}

.lp-price{
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  border: 2px solid rgba(107,155,139,.35);
}
/* 「相談無料」だけ強調 */
.lp-section--price strong{
  color: var(--brand-dark);
}


/* タイトル */
.lp-price__title{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
}

/* 導入文 */
.lp-price__lead{
  margin: 0 0 16px;
  font-size: 16px;
  opacity: .95;
}

/* 料金リスト */
.lp-price__list{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.lp-price__list li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px dashed rgba(0,0,0,.15);
  font-weight: 800;
}

.lp-price__list li:last-child{
  border-bottom: none;
}

.lp-price__list .label{
  font-size: 15px;
}

/* 注意書き */
.lp-price__note{
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: .85;
}

/* CTA（弱め） */
.lp-price__cta{
  margin-top: 16px;
  display: grid;
}

.lp-price__cta .lp-btn{
  background: #ffffff;
  border: 2px solid rgba(0,0,0,.18);
  color: #2f2f2f;
}

/* =========================
   WORKS CARD（articleをカード化）
========================= */

.lp-work{
  display: grid;
  gap: 0;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden; /* 写真はみ出し防止 */
}

/* 本文エリア */
.lp-work__body{
  padding: 18px;
}

/* 写真エリアをカード下部に */
.lp-work__media{
  border-top: 1px solid var(--line);
  background: #f4f4f4;
}

/* 写真サイズをカードに合わせて安定させる */
.lp-work__figure img{
  height: 160px;
  object-fit: cover;
}

/* カード間の余白をはっきり */
.lp-works{
  display: grid;
  gap: 28px;
}

/* 見出しの視認性アップ */
.lp-work__title{
  font-size: 21px;
  line-height: 1.4;
}

/* メタ情報を読みやすく */
.lp-work__row dt{
  font-size: 14px;
}

.lp-work__row dd{
  font-size: 15px;
}

/* お客様の声をカード内で少し強調 */
.lp-work__voice{
  margin-top: 14px;
  background: var(--brand-soft);
  font-size: 15px;
}