@charset "utf-8";
/* ===========================================================
   こどもならいごと調査隊 共通スタイル
   2026-10-01 作成（新しいサイト構成の土台）
   ・index.html の配色・フォントをそのまま引き継いでいます
   ・事業者向けページは落ち着いたトーン（ネイビー／オレンジ）
   =========================================================== */

:root{
  /* 来場者向け（index.html と同じ） */
  --pink:#FF6B9D; --coral:#FF8C69; --yellow:#FFD93D;
  --mint:#6BCB77; --sky:#4FC3F7; --purple:#B39DDB;
  --cream:#FFFBF0; --white:#FFFFFF;
  --text:#333333; --text-light:#777777;
  --shadow:rgba(0,0,0,.08);
  /* 事業者向け（提案書と同じ配色） */
  --navy:#1C3557; --orange:#D4692A; --gold:#D4A06A;
  --line:#E6E2D8;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Noto Sans JP',sans-serif;
  background:var(--cream); color:var(--text);
  line-height:1.8; overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto}
a{color:inherit}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,251,240,.97);
  border-bottom:2px solid var(--yellow);
  padding:0 20px;
}
.site-header .inner{
  max-width:1000px; margin:0 auto; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-header .logo{display:block; text-decoration:none}
.site-header .logo img{display:block; height:46px; width:auto}
.site-header .back{
  font-size:13px; font-weight:700; color:var(--text-light);
  text-decoration:none; white-space:nowrap;
}
.site-header .back:hover{color:var(--orange)}

/* ---------- レイアウト ---------- */
.wrap{max-width:860px; margin:0 auto; padding:0 20px}
.section{padding:56px 0}
.section + .section{border-top:1px solid var(--line)}
.lead{font-size:15.5px; color:#4a4a4a}

h1,h2,h3{font-family:'Noto Sans JP',sans-serif; line-height:1.45; margin:0}
.h2{
  font-size:24px; font-weight:900; color:var(--navy);
  margin:0 0 20px; padding-left:14px; border-left:5px solid var(--orange);
}
.h3{font-size:17px; font-weight:700; color:var(--navy); margin:28px 0 10px}

/* ---------- 事業者向けヒーロー ---------- */
.b-hero{background:var(--white); border-bottom:1px solid var(--line); padding:48px 0 44px}
.b-hero .badge{
  display:inline-block; background:var(--orange); color:#fff;
  font-size:12.5px; font-weight:900; letter-spacing:.08em;
  padding:6px 14px; border-radius:4px; margin-bottom:18px;
}
.b-hero h1{font-size:30px; font-weight:900; color:var(--navy); margin-bottom:14px}
.b-hero h1 small{display:block; font-size:16px; font-weight:700; color:var(--orange); margin-bottom:8px}
.b-hero .sub{font-size:15.5px; color:#4a4a4a; margin:0}
.deadline{
  display:inline-flex; align-items:baseline; gap:10px;
  margin-top:22px; padding:12px 20px;
  background:#FFF6EF; border:1px solid var(--gold); border-radius:6px;
}
.deadline span{font-size:13px; font-weight:700; color:var(--navy)}
.deadline strong{font-size:22px; font-weight:900; color:var(--orange)}

/* ---------- 表 ---------- */
.table{width:100%; border-collapse:collapse; font-size:15px; background:var(--white)}
.table th,.table td{border:1px solid var(--line); padding:13px 16px; text-align:left; vertical-align:top}
.table th{width:30%; background:#FAF8F3; font-weight:700; color:var(--navy); white-space:nowrap}

/* ---------- カード ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.card{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:22px}
.card h3{font-size:16px; font-weight:700; color:var(--navy); margin:0 0 8px}
.card p{margin:0; font-size:14px; color:#555}

/* ---------- 含まれるもの ---------- */
.inc{list-style:none; margin:0; padding:0}
.inc li{position:relative; padding:10px 0 10px 30px; border-bottom:1px dashed var(--line); font-size:15px}
.inc li:last-child{border-bottom:0}
.inc li::before{
  content:''; position:absolute; left:4px; top:18px;
  width:8px; height:8px; border-radius:50%; background:var(--orange);
}

/* ---------- 流れ ---------- */
.steps{counter-reset:s; list-style:none; margin:0; padding:0}
.steps li{position:relative; padding:0 0 26px 52px; counter-increment:s}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:#fff;
  font-weight:900; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.steps li::after{
  content:''; position:absolute; left:17px; top:38px; bottom:4px; width:1px; background:var(--line);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps b{display:block; font-size:16px; color:var(--navy); margin-bottom:2px}
.steps p{margin:0; font-size:14.5px; color:#555}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:16px 0 16px 30px; position:relative;
  font-weight:700; font-size:15.5px; color:var(--navy); list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:'Q'; position:absolute; left:0; color:var(--orange); font-weight:900;
}
.faq .a{padding:0 0 18px 30px; font-size:14.5px; color:#555}

/* ---------- CTA ---------- */
.cta{background:var(--navy); color:#fff; border-radius:10px; padding:34px 28px; text-align:center}
.cta h2{font-size:21px; font-weight:900; margin:0 0 10px}
.cta p{margin:0 auto 22px; font-size:14.5px; color:#D6DEEA; max-width:520px}
.btn{
  display:inline-block; background:var(--orange); color:#fff;
  font-size:16px; font-weight:700; text-decoration:none;
  padding:15px 34px; border-radius:6px;
}
.btn:hover{background:#c15d22}
.btn-sub{
  display:inline-block; margin-top:14px; color:#fff; font-size:14px;
  text-decoration:underline; text-underline-offset:3px;
}
.contact-list{list-style:none; margin:22px 0 0; padding:0; font-size:14.5px; color:#D6DEEA}
.contact-list li{padding:3px 0}
.contact-list a{color:#fff}

/* ---------- 注記・フッター ---------- */
.note{font-size:13px; color:var(--text-light); margin-top:14px}
.site-footer{
  background:var(--white); border-top:1px solid var(--line);
  padding:30px 20px; text-align:center; font-size:13px; color:var(--text-light);
}
.site-footer a{color:var(--text-light); text-decoration:none; margin:0 10px}

/* ---------- スマホ ---------- */
@media (max-width:768px){
  .site-header{padding:0 14px}
  .site-header .logo img{height:36px}
  .section{padding:40px 0}
  .b-hero{padding:34px 0 32px}
  .b-hero h1{font-size:23px}
  .h2{font-size:20px}
  .table th,.table td{display:block; width:100%; border-bottom:0}
  .table th{white-space:normal}
  .table tr{display:block; border-bottom:1px solid var(--line)}
  .table td{border-top:0}
  .cta{padding:28px 20px}
  .btn{display:block; padding:15px 20px}
  .deadline{display:block; width:100%; padding:14px 18px}
  .deadline span{display:block}
  .deadline strong{display:block; margin:2px 0 4px; line-height:1.2}
}