/*
Theme Name: Pines LP
Author: Pines CREW
Version: 1.3
*/

/* ====== ベース最小限 ====== */
html, body { margin:0; padding:0; }
body{
  font-family: system-ui,-apple-system,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  background:#fff; color:#1f2937;
  line-height:1.6; /* ベース行間はややタイトに */
}
a { text-decoration:none; color:inherit; }

/* 変数（色・角・余白） */
:root{
  --pine:#0e5f49; --pine-ink:#0b4636;
  --bg:#f7faf9; --muted:#eef4f2; --paper:#fff;
  --radius:14px; --space:clamp(52px,6vw,96px);
}

/* 共通レイアウト：各セクション枠 */
.lp-section{ padding:var(--space) min(4vw,40px); max-width:1080px; margin:0 auto; }

/* ====== セクション別 ====== */

/* --- HERO ------------------------------------------------ */
.lp-hero-wrap{ background:var(--pine); color:#fff; }

.lp-hero h1{
  font-size: clamp(40px,4.6vw,70px);
  line-height: 1.3;
  margin:0;
}
.lp-hero p{ margin:0 0;
	display: flex;
	gap:10px;
	align-items:center;
	flex-wrap: wrap;
}
.lp-hero .lp-badges{
  display:flex; gap:10px; margin:12px 0 0; list-style:none; padding:0;
}
.lp-hero .lp-badges li{
  background: rgba(255,255,255,.14);
  padding: .28em .7em; border-radius: 999px;
}

.title{font-size: clamp(15px,4.6vw,30px);
	line-height:1;
}
#sub_title{margin-bottom:10px;}

/* ボタン（HERO内のみ）— 高さ/幅/中央揃えを完全一致 */
.lp-hero .btn,
.lp-hero .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
	vertical-align: middle;
  font-size: clamp(15px, 4.6vw, 18px);
  font-weight: 600;
  line-height: 1;               /* テキスト行高を固定 */
  padding: .6em 1.2em;          /* 上下左右共通 */
  min-width: 200px;             /* 横幅を揃える（必要に応じて調整） */
  text-align: center;
  border-radius: 10px;
  box-sizing: border-box;
  border: 2px solid transparent;/* 枠あり/なしの見た目高さを一致 */
  margin-right: 10px;
}
.lp-hero .btn{
  background:#fff; color:var(--pine);
}
.lp-hero .btn-outline{
  background:transparent; color:#fff; border-color:#fff;
}

/* ヒーロー内の画像（任意） */
.lp-hero .lp-hero-fig{ margin-top:16px; text-align:center; }
.lp-hero .lp-hero-fig img{ max-width:680px; width:100%; }

/* --- お困りごと ------------------------------------------ */
.lp-problems{ background:#fff; }
.lp-problems h2{
  font-size: clamp(22px,3vw,28px);
  line-height:1.3;
  margin: 0 0 .6em;
}
.lp-problems p{ margin: 0 0 1em; }
.lp-problems .lp-list{ columns:1; column-gap:32px; }
@media (min-width:900px){ .lp-problems .lp-list{ columns:2; } }
.lp-problems .lp-figure{ margin:16px 0; text-align:center; }
.lp-problems .lp-figure img{
  border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.08);
}

/* --- 変わること（3カード） ------------------------------ */
.lp-value{ background:var(--bg); }
.lp-value h2{ margin:0 0 1em; font-size: clamp(22px,3vw,28px); line-height:1.3; }
.lp-value .lp-grid{ display:grid; gap:16px; }
@media (min-width:900px){ .lp-value .lp-grid{ grid-template-columns: repeat(3,1fr); } }
.lp-value .lp-card{
  background:var(--paper); border:1px solid var(--muted);
  border-radius:var(--radius); padding:18px;
}

/* --- フロー ---------------------------------------------- */
.lp-flow{ background:#fff; }
.lp-flow h2{ margin:0 0 .6em; font-size: clamp(22px,3vw,28px); line-height:1.3; }
.lp-flow p{ margin: 0 0 1em; }
.lp-flow .lp-figure{ margin:12px 0; text-align:center; }
.lp-flow .lp-figure img{
  border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.08);
}
.lp-flow .note{ font-size:.9em; opacity:.8; }

/* --- メリット（カード） ---------------------------------- */
.lp-benefits{ background:var(--bg); }
.lp-benefits h2{ text-align:center; margin:0 0 1.2em; font-size: clamp(22px,3vw,28px); line-height:1.3; }
.lp-benefits .lp-grid{ display:grid; gap:16px; }
@media (min-width:900px){ .lp-benefits .lp-grid{ grid-template-columns: repeat(3,1fr); } }
.lp-benefits .lp-card{
  background:#fff; border:1px solid var(--muted);
  border-radius:12px; padding:16px;
}

/* --- 対応範囲（2カラム） -------------------------------- */
.lp-scope{ background:#fff; }
.lp-scope h2{ font-size: clamp(22px,3vw,28px); line-height:1.3; margin:0 0 .8em; }
.lp-scope .lp-grid{ display:grid; gap:16px; }
@media (min-width:900px){ .lp-scope .lp-grid{ grid-template-columns:repeat(2,1fr); } }
.lp-scope .lp-box{
  background:#fff; border:1px solid var(--muted);
  border-radius:12px; padding:18px;
}
.lp-scope .note{ font-size:.9em; opacity:.8; }

/* --- アプリ共有（4枚ギャラリー） ------------------------ */
.lp-app{ background:var(--bg); }
.lp-app h2{ font-size: clamp(22px,3vw,28px); line-height:1.3; margin:0 0 .6em; }
.lp-app p{ margin: 0 0 1em; }
.lp-app .lp-gallery{ display:grid; gap:16px; margin-top:12px; }
@media (min-width:900px){ .lp-app .lp-gallery{ grid-template-columns: repeat(2,1fr); } }
.lp-app .lp-gallery img{
  border-radius:10px; box-shadow:0 4px 18px rgba(0,0,0,.08);
}

/* --- 会社概要 -------------------------------------------- */
.lp-company{ background:var(--bg); }
.lp-company h2{ font-size: clamp(22px,3vw,28px); line-height:1.3; margin:0 0 .6em; }
.lp-company ul{ list-style:none; padding:0; margin:0; }
.lp-company li{ margin-bottom:.6em; }

/* --- お問い合わせ ---------------------------------------- */
.lp-contact{ background:#fff; }
.lp-contact h2{ font-size: clamp(22px,3vw,28px); line-height:1.3; margin:0 0 .6em; }
.lp-contact p{ margin: 0 0 1em; }
.lp-contact .wpcf7{
  background:#fafafa; border:1px solid var(--muted);
  border-radius:12px; padding:18px;
}

/* 差し込みセクションの共通余白（LPと同じ枠に揃える） */
.lp-insert{ padding: var(--space) min(4vw, 40px); max-width:1080px; margin:0 auto; }

/* 固定ページ内の画像・ギャラリーを綺麗に */
.lp-insert figure{ margin: 0 0 1rem; }
.lp-insert img{ border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }

/* 固定ページ内のh2/h3もLPのトーンに */
.lp-insert h2{ font-size: clamp(22px,3vw,28px); line-height:1.3; margin:0 0 .6em; }
.lp-insert h3{ margin: 1em 0 .4em; }

/* --- 再CTA ------------------------------------------------ */
.lp-cta-wrap{ background:var(--pine); color:#fff; }
.lp-cta{ text-align:center; }
.lp-cta h3{ margin:.2em 0 .6em; font-size: clamp(18px,2.2vw,22px); }
.lp-cta .btn,
.lp-cta .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  font-size: clamp(15px, 4.6vw, 18px);
  font-weight:600; line-height:1;
  padding:.6em 1.2em; min-width:200px;
  text-align:center; border-radius:10px;
  box-sizing:border-box; border:2px solid transparent;
  margin:0 6px;
}
.lp-cta .btn{ background:#fff; color:var(--pine); }
.lp-cta .btn-outline{ background:transparent; color:#fff; border-color:#fff; }

/* --- スモール端末の微調整（必要最小限） ---------------- */
@media (max-width:420px){
  .lp-hero .btn, .lp-hero .btn-outline,
  .lp-cta  .btn, .lp-cta  .btn-outline{
    min-width:170px; padding:.55em 1em;
  }
}