/* L-Pocco 紹介LP 専用スタイル。
   共通トークン（ブランドカラー・Outfit見出し）は style.css の :root を継承する。
   若草グリーンを基調に、茶とクリームで温かみ、オレンジを差し色にする（ロゴの世界観）。 */

/* ヘッダーのワードマークロゴは style.css 側（法務ページと共通）で定義。 */

/* ---- ヒーロー（全幅バンド） ----
   .fullbleed で画面幅いっぱいの淡い若草グラデ帯にし、中身は .hero-grid(.band-inner) で
   1080pxに内寄せして左右2カラム（左=コピー＋CTA、右=予約画面スクショ）。 */
.hero {
  position: relative;
  padding: 48px 24px 56px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 82% 18%, rgba(224, 112, 0, 0.07) 0%, transparent 42%),
    radial-gradient(circle at 6% 96%, rgba(108, 144, 48, 0.10) 0%, transparent 40%),
    linear-gradient(160deg, #fbfdf6 0%, var(--cream) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 56px;
}
.hero .hero-copy { text-align: left; }
/* 見出し上の小さなラベル（eyebrow）。タイポに強弱をつけ、業種を一言で示す。 */
/* ヒーローの主役たぬきアイコン。丸い下地に載せ、ファーストビューのアンカーにする。 */
.hero .hero-mark {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  padding: 10px;
  margin-bottom: 18px;
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--cream) 100%);
  border-radius: 50%;
  box-shadow: 0 12px 26px -10px rgba(96, 60, 24, 0.28);
}
.hero .eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--primary-hover);
  background: var(--primary-light);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
/* 右カラムの予約画面（スマホ枠）。既存 .phone を一回り大きくした版。 */
.hero .hero-shot {
  width: 240px;
  height: 420px;
  max-width: 100%;
  margin: 0 auto;
  border: 6px solid #2c2420;
  border-radius: 32px;
  overflow: hidden;
  background: #2c2420;
  box-shadow: 0 26px 50px -18px rgba(96, 60, 24, 0.45);
}
.hero .hero-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.hero .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.hero .badge {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--primary-hover);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(96, 60, 24, 0.04);
}
.hero .badge::before { content: "✓ "; color: var(--primary); font-weight: 700; }
.hero h1 {
  font-size: 40px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  text-wrap: balance;              /* 折返し位置をブラウザに最適化させる（不格好な行末を避ける） */
}
.hero h1 .accent { color: var(--primary); white-space: nowrap; }
.hero .lead {
  color: var(--text-main);
  font-size: 17px;
  max-width: 480px;
  margin: 0 0 10px;
}
.hero .sub {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 28px;
}
.hero .cta-row { justify-content: flex-start; }

/* ---- CTAボタン ---- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 15px 34px;
  border-radius: 999px;
  box-shadow: 0 8px 18px -6px rgba(108, 144, 48, 0.5);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.cta:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -6px rgba(108, 144, 48, 0.55);
}
/* 差し色オレンジのCTA（最終CTAの主ボタンに使うと視線が集まる） */
.cta.accent {
  background: var(--accent);
  box-shadow: 0 8px 18px -6px rgba(224, 112, 0, 0.5);
}
.cta.accent:hover { background: #c86200; box-shadow: 0 12px 22px -6px rgba(224, 112, 0, 0.55); }
.cta.secondary {
  background: #fff;
  color: var(--brown);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(96, 60, 24, 0.05);
}
.cta.secondary:hover { background: var(--cream); }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* ---- 悩み（共感）ブロック ---- */
.pains {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 560px) { .pains { grid-template-columns: 1fr; } }
.pain {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  font-size: 15px;
  font-weight: 500;
}
/* 悩みカードの線画アイコン。若草グリーンのストロークで統一（OS依存の絵文字を排除）。 */
.pain .ico {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  stroke: var(--primary);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 全幅バンド（フルブリード） ----
   .wrap(760px) の内側にあっても calc(50% - 50vw) の負マージンで画面幅いっぱいに広げる。
   中身は .band-inner で760pxに内寄せし直す。横スクロールは body 側で抑止（style.css）。 */
.fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px 24px;
}
.band-inner {
  max-width: 1080px;
  margin: 0 auto;
}
/* 全幅バンドは前後セクションと詰めて、地の白 → 色バンド → 白 のリズムを作る。 */
.band-flush { margin-top: 8px; margin-bottom: 8px; }

/* ---- セクション見出しブロック（中央寄せ・eyebrow付き） ----
   各セクション冒頭に置く。小さなラベル → 大きな見出し → 補足文 の三段で「章の始まり」感を出す。 */
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}
.section-head .eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--primary-hover);
  background: var(--primary-light);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.section-head h2 {
  border: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 28px;
  color: var(--brown);
  justify-content: center;
  text-wrap: balance;
}
.section-head .lead {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}

/* ---- 解決宣言バンド（全幅・若草グラデ） ---- */
.solve {
  background: linear-gradient(135deg, #7aa03a 0%, var(--primary-hover) 100%);
  color: #fff;
  text-align: center;
}
.solve h2 {
  color: #fff;
  border: none;
  font-size: 24px;
  margin: 0 0 8px;
  padding: 0;
  justify-content: center;
}
.solve p { color: rgba(255,255,255,.95); margin: 0; font-size: 15px; }

/* ---- STEP フロー ---- */
.steps {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  text-align: center;
}
/* スマホ端末フレーム。実画面スクショ（アプリ内はエメラルド緑）を枠で囲むことで
   「これはアプリの中身」と視覚的に分離し、LP地の若草グリーンとの色差を吸収する。 */
.phone {
  width: 190px;
  height: 320px;                  /* 固定高で3枚を揃える（aspect-ratioより堅牢） */
  max-width: 100%;
  margin: 0 auto 18px;
  border: 5px solid #2c2420;      /* たぬきの濃茶に寄せた端末ベゼル */
  border-radius: 26px;
  overflow: hidden;               /* はみ出す下部を切る */
  background: #2c2420;
  box-shadow: 0 16px 34px -14px rgba(96, 60, 24, 0.4);
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;           /* 上部（操作エリア）を優先表示 */
}
/* スマホ枠は番号バッジの基準にするため相対配置に。 */
.phone { position: relative; }
/* 大きな丸番号。スマホ枠の左上に被せ、1→2→3 の流れを主役にする。 */
.step-num {
  position: absolute;
  top: -14px;
  left: -14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0 6px 14px -4px rgba(108, 144, 48, 0.5);
  border: 3px solid var(--bg-main);
}
/* ステップ間をつなぐ点線コネクタ（順序を視覚化）。デスクトップのみ。 */
@media (min-width: 561px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 146px;                    /* スマホ枠のほぼ中央高 */
    right: -12px;
    width: 24px;
    border-top: 2px dashed var(--brown-soft);
    opacity: .5;
  }
}
.step h3 { margin: 4px 0 4px; font-size: 15px; }
.step p { color: var(--text-muted); font-size: 14px; margin: 0 auto; max-width: 22em; }

/* セクション補足文（見出し直下の1行説明・緩急づけ） */
.section-lead {
  color: var(--text-muted);
  font-size: 15px;
  margin: -4px 0 24px;
}

/* ---- 特長 ---- */
/* 白地の連続に緩急をつけるため、機能セクションをクリーム地の全幅バンドで囲む。
   .fullbleed で画面幅いっぱいに広げ、上下ボーダーで区切る。 */
.feature-band {
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.features {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);   /* 6項目を3列×2行に整える */
}
@media (max-width: 860px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.feature .icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: 14px;
  margin-bottom: 14px;
}
/* 機能カードの線画アイコン（若草グリーン・淡い下地の上に載る）。 */
.feature .icon svg {
  width: 30px;
  height: 30px;
  stroke: var(--primary-hover);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature h3 { margin: 0 0 4px; font-size: 15px; }
.feature p { color: var(--text-muted); font-size: 14px; margin: 0; }

/* ---- 料金 ---- */
.price-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: var(--shadow);
  max-width: 720px;
  margin: 0 auto;
}
.price-card th { color: var(--text-muted); }
.price-card td { font-weight: 600; color: var(--brown); }
/* 料金表の「上」に置く無料訴求バナー。一番の売りを最初に見せる。 */
.price-free {
  background: linear-gradient(135deg, var(--primary-light) 0%, #e6f0d6 100%);
  border: 1px solid rgba(108, 144, 48, 0.3);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 15px;
}
.price-free-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.price-free p { margin: 0; }
.price-free strong {
  color: var(--accent);
  font-size: 18px;
}
.price-note { font-size: 12px; color: var(--text-muted); margin-top: 16px; line-height: 1.6; }
.price-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; }

/* ---- 末尾CTAブロック ---- */
.final-cta {
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 28px;
  box-shadow: var(--shadow);
}
.final-cta .final-icon {
  width: 64px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}
.final-cta h2 { border: none; padding: 0; justify-content: center; font-size: 21px; }

/* タブレット以下：ヒーローを縦積み・中央寄せに戻す（スクショを上、コピーを下）。 */
@media (max-width: 640px) {
  .hero { padding: 32px 22px 40px; text-align: center; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero .hero-copy { text-align: center; order: 2; }
  .hero .hero-visual { order: 1; }
  .hero .lead, .hero .sub { margin-left: auto; margin-right: auto; }
  .hero .hero-mark { margin-left: auto; margin-right: auto; }
  .hero .badges { justify-content: center; }
  .hero .cta-row { justify-content: center; }
  .hero .hero-shot { width: 210px; height: 368px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
}