:root{
  /* site.png：明るいベージュ・オフホワイトのライトテーマ */
  --bg:#fff;
  --card:#fff;
  --text:#2c2c2c;
  --muted:#5c5c5c;
  --line:#2d5a27;
  --accent:#c43d2e;
  --accent-green:#3d7a35;
  --stroke:rgba(0,0,0,.1);
  --stroke-light:#e0ddd8;
  --shadow: 0 4px 20px rgba(0,0,0,.08);
  --radius: 18px;
  --max: 1080px;
  --warm-bg:#F7F4EF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; background:var(--warm-bg); color:var(--text);}
/* sectionごとにbg.pngを背景 */
.intro,.strengths,.section{background:var(--warm-bg) url('../assets/bg.png') repeat;}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:24px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:999px;border:1px solid var(--stroke-light);
  background:#fff;
  color:var(--text);
  font-weight:700;
}
.btn:hover{transform:translateY(-1px)}
.btnPrimary{
  border-color:rgba(61,122,53,.5);
  background:linear-gradient(135deg, var(--accent-green), #2d5a27);
  color:#fff;
  box-shadow:0 4px 16px rgba(61,122,53,.25);
}
.btnGhost{background:transparent; color:var(--text); border-color:var(--stroke-light);}
.btnHeroGhost{background:rgba(255,255,255,.2); color:#fff; border-color:rgba(255,255,255,.5);}
.btnHeroGhost:hover{background:rgba(255,255,255,.3);}
/* Hero: 横フル・縦はコンテンツに合わせる */
.heroFull{
  position:relative;
  width:100%;
}
.hero{
  margin:0;
  min-height:420px;
  background: url('../assets/hero.png') center/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
}
.heroInner{position:relative; z-index:1; padding:48px 24px; max-width:var(--max); margin:0 auto; width:100%;}
.hero h1{margin:14px 0 10px; font-size:42px; line-height:1.12; color:#2c2c2c; text-shadow:0 2px 12px rgba(0,0,0,.4);}
.hl{color:var(--accent);}
@media (max-width:900px){.hero h1{font-size:32px}}
.heroCtas{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.heroCtas .btnPrimary{ color:#fff; }
/* Intro: left text, right intro.png（section フル幅・中身は wrap） */
.intro{padding:40px 0;}
.introInner{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;}
@media (max-width:900px){.introInner{grid-template-columns:1fr}}
/* site.png：見出しは左揃え・装飾ライン、リストは白枠なしで地の上に */
.introText h2{
  margin:0 0 20px;
  font-size:24px;
  font-weight:700;
  color:var(--text);
  padding-bottom:8px;
  border-bottom:2px solid var(--accent);
  display:inline-block;
}
.intro .list{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.intro .li{
  padding:8px 0;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--text);
  line-height:1.6;
  display:flex;align-items:flex-start;gap:2px;
}
.intro .li::before{content:"✓"; color:var(--accent); font-weight:bold; flex-shrink:0;}
.intro .li b{color:var(--text)}
/* Intro画像：ぼかしは画像側で対応済み */
.introImg{
  border-radius:var(--radius);
  overflow:hidden;
}
.introImg img{
  width:100%;
  height:auto;
  display:block;
}
/* 強み: site.png風・見出し中央・カードは茶系テクスチャ・アイコン円形 */
.strengths{padding:40px 0;}
.strengths .sectionTitle{
  margin-bottom:24px;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:4px;
}
.strengths .sectionTitle h2{margin:0;}
.strengths .sectionTitle p{margin:0; font-size:14px;}
.strengthGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
@media (max-width:640px){.strengthGrid{grid-template-columns:repeat(3,1fr);gap:8px}}
/* icon-bg を背景に、transparentアイコン＋テキストをまとめて表示 */
.strengthCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:20px 12px;
  background:url('../assets/icon-bg.png') center/cover;
  border-radius:8px;
  gap:10px;
}
@media (max-width:640px){.strengthCard{padding:10px 4px;gap:4px}}
.strengthCardIcon{
  width:64px;
  height:64px;
  object-fit:contain;
  flex-shrink:0;
}
@media (max-width:640px){.strengthCardIcon{width:40px;height:40px}}
.strengthCard h3{margin:0;font-size:15px;color:#fff;font-weight:700;}
@media (max-width:640px){.strengthCard h3{font-size:11px}}
/* Why: タイトルは両脇に装飾線、カードは画像上・見出し・箇条書き */
.whySectionTitle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:14px 0 24px;
}
.whySectionTitleLine{
  flex:1;
  max-width:120px;
  height:1px;
  background:linear-gradient(90deg, transparent, #c4b8a8);
}
.whySectionTitle .whySectionTitleLine:last-child{background:linear-gradient(90deg, #c4b8a8, transparent)}
.whySectionTitle h2{
  margin:0;
  font-size:22px;
  color:var(--text);
  flex-shrink:0;
  padding-bottom:6px;
  border-bottom:2px solid var(--accent);
  display:inline-block;
}
.whyGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:900px){.whyGrid{grid-template-columns:1fr}}
.whyCard{
  border-radius:var(--radius);
  overflow:hidden;
  background:#fdfcfa;
  border:1px solid #d4cfc6;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}
.whyCardImg{
  width:100%;
  height:180px;
  background-size:cover;
  background-position:center;
  flex-shrink:0;
}
.whyCardBody{
  padding:20px 20px 24px;
  background:var(--warm-bg) url('../assets/bg.png') repeat;
}
.whyCardBody h3{margin:0 0 12px;font-size:17px;font-weight:700;color:var(--text);}
.whyCardList{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.whyCardList li{
  position:relative;
  padding-left:1.2em;
  font-size:14px;
  color:var(--text);
  line-height:1.6;
}
.whyCardList li::before{
  content:"・";
  position:absolute;
  left:0;
  color:var(--text);
  font-weight:700;
}
.section{padding:18px 0}
.sectionTitle{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:4px;
  margin:14px 0 16px;
}
.sectionTitle h2{
  margin:0;
  font-size:22px;
  color:var(--text);
  display:inline-block;
  padding-bottom:6px;
  border-bottom:2px solid var(--accent);
}
.sectionTitle p{margin:0;color:var(--muted);font-size:13px}
/* 参加までの流れ：矢印型タブ・横並び・1つ目アクティブ色 */
.steps{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:0 -6px;
}
.step{
  flex:1;
  min-width:140px;
  padding:16px 20px 16px 16px;
  background:#e8e0d5;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 10px 100%, 10px 0);
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  margin-right:-8px;
  display:flex;
  align-items:center;
  gap:12px;
}
.step:last-child{margin-right:0;}
.stepActive{background:#7a342f; color:#fff;}
.stepActive .num{background:#fff; color:#5c2a26;}
.stepActive h4,.stepActive p{color:rgba(255,255,255,.95) !important;}
.num{
  width:36px;
  height:36px;
  flex-shrink:0;
  border-radius:50%;
  background:#fff;
  color:#3d2a28;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:15px;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.stepBody{min-width:0;}
.step h4{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--text)}
.step p{margin:0;font-size:12px;color:var(--muted);line-height:1.45;}
@media (max-width:900px){
  .steps{flex-direction:column; margin:0;}
  .step{margin-right:0; margin-bottom:8px; clip-path:none; border-radius:var(--radius); min-width:0;}
}
/* Footer */
.footerWrap{
  position:relative;
  min-height:220px;
  background:url('../assets/footer.png') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.footer{position:relative;z-index:1;padding:32px 24px;color:#2c2c2c;font-size:12px;line-height:1.8;text-align:center;max-width:var(--max);margin:0 auto;}
.footer a{color:var(--text);text-decoration:underline}
.footer b{color:var(--text);}
/* Netlify form */
form{display:grid;gap:10px;margin-top:10px}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke-light);
  background:#fff;
  color:var(--text);
  outline:none;
}
textarea{min-height:92px;resize:vertical}

/* 無料相談フォーム紙テクスチャの外枠＋フォーム／LINE 2カラム */
.formWrap{
  background:var(--warm-bg) url('../assets/bg.png') repeat;
  border:1px solid #c4b8a8;
  border-radius:16px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6), 0 4px 20px rgba(0,0,0,.08);
  padding:24px;
}
.formCols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media (max-width:900px){.formCols{grid-template-columns:1fr}}
.formBlock{padding:0}
.formBlockTitle{
  margin:0 0 16px;
  font-size:18px;
  font-weight:700;
  color:#5c3428;
  text-align:center;
}
.formBlock form{display:grid;gap:14px;margin-top:0}
.formBlock .formRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.formBlock .formRow{grid-template-columns:1fr}}
.formBlock input,.formBlock select,.formBlock textarea{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid #d4cfc6;
  background:#fff;
  color:var(--text);
  outline:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.06);
}
.formBlock textarea{min-height:92px;resize:vertical}
.linePanel{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:var(--warm-bg) url('../assets/bg.png') repeat;
  border:1px solid #c4b8a8;
  border-radius:12px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.8), 0 2px 8px rgba(0,0,0,.06);
  padding:24px 20px;
}
.formSubmitBtn{
  display:block;
  width:100%;
  max-width:320px;
  margin:12px auto 0;
  padding:14px 20px;
  border:none;
  border-radius:10px;
  background:linear-gradient(180deg, #8b4239, #6b342e);
  color:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(107,52,46,.35);
}
.formSubmitBtn:hover{opacity:.95;transform:translateY(-1px)}

/* LINEパネル */
.linePanelDeco{
  position:absolute;
  top:0;
  width:72px;height:72px;
  background:repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(196,184,168,.35) 4px,
    rgba(196,184,168,.35) 6px
  );
  pointer-events:none;
}
.linePanelDecoLeft{left:0;}
.linePanelDecoRight{left:auto;right:0;transform:scaleX(-1);}
.linePanelTitle{
  margin:0 0 6px;
  font-size:18px;
  font-weight:700;
  color:var(--accent-green);
  text-align:center;
}
.linePanelSub{
  margin:0 0 18px;
  font-size:15px;
  color:#5c3428;
  line-height:1.5;
  text-align:center;
}
.linePanel .lineBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:240px;
  margin:0 auto;
  padding:12px 20px;
  border-radius:10px;
  background:linear-gradient(135deg, #06c755, #00b341);
  color:#fff;
  border:none;
  font-weight:700;
  box-shadow:0 3px 12px rgba(6,199,85,.35);
}
.linePanel .lineBtn::before{
  content:"";
  width:22px;height:22px;
  flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C6.48 2 2 5.58 2 10c0 3.54 2.29 6.53 5.47 7.59.4.15.69.49.77.88l.47 1.76c.14.53.82.69 1.24.3l1.98-1.56c.32-.25.75-.3 1.12-.08.96.57 2.09.89 3.29.89 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.linePanel .lineBtn:hover{opacity:.95;transform:translateY(-1px)}