/* ==== Home only ==== */

/* HERO */
.hero { position: relative; overflow: hidden; padding: 60px 0; background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%); }
.hero-inner { text-align: center; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background: var(--pop); border:1px solid #ffd8a8; color:#7c4a03; font-size:12px; font-weight:700; letter-spacing:.04em; }
.lead { color: var(--muted); }

/* HERO deco blobs */
.decor { position:absolute; inset:0; pointer-events:none; }
.blob { position:absolute; width:360px; height:360px; border-radius:50%; filter: blur(40px); opacity:.35; animation: float 16s ease-in-out infinite; }
.blob.b1 { left:-80px; top:-80px; background:#93c5fd; }
.blob.b2 { right:-120px; top:-60px; background:#86efac; animation-delay: -6s; }
.blob.b3 { left:40%; bottom:-140px; background:#fde68a; animation-delay: -10s; }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(20px) } }

/* Searchbar */
.searchbar { display:inline-flex; gap:0; background:#fff; border:1px solid #ddd; border-radius:12px; overflow:hidden; }
.searchbar input { border: none; padding: 10px 12px; font-size: 1rem; outline: none; min-width: 260px; }
.searchbar button { background:#0ea5e9; color:#fff; border:none; padding:0 16px; cursor:pointer; font-weight:700; }
.searchbar button:hover { filter: brightness(0.95); }

/* Chips */
.chips { margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip { background: #f1f5f9; padding:6px 12px; border-radius:999px; font-size:.9rem; text-decoration:none; color:inherit; border:1px solid #e5e7eb; }
.chip:hover { border-color:#0ea5e9; }

/* トピック／セクション共通 */
.sec-title { font-size: 1.4rem; margin: 20px 0; text-align: center; }

/* 年表プレビュー（トップだけの軽量版） */
.timeline { display:grid; grid-template-columns: repeat(12,1fr); gap: 16px; }
.tl-item { grid-column: span 6; border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px; }
.tl-item time { display:block; color:var(--muted); font-size:12px; }
.tl-item h4 { margin:6px 0 6px; font-size: 16px; }
.tl-item p { color: var(--ink2); font-size: 14px; }
@media (max-width: 820px){ .tl-item { grid-column: span 12; } }

/* Perf: below-the-fold を遅延描画（ホーム用） */
#features, #timeline, #policy {
  content-visibility: auto;
  contain-intrinsic-size: 800px 1200px; /* CLS回避の仮サイズ */
}
@media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } }
/* ==== HERO 検索欄：スリム＆横書き固定 ==== */
.hero .searchbar{
  display:flex; align-items:center; gap:8px;
  max-width: 680px; margin:16px auto 0;
  padding:6px;
  border:1px solid var(--line); border-radius:14px;
  background:#fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
}
.hero .searchbar:focus-within{
  border-color:#e4c682;
  box-shadow: 0 0 0 3px rgba(185,129,29,.18), 0 8px 26px rgba(0,0,0,.06);
}

/* 入力：1行・横書き・iOSズーム対策(16px以上) */
.hero .searchbar input{
  flex:1; min-width:0;
  height:42px; padding:0 12px;
  font-size:16px; line-height:1; color:var(--ink);
  border:0; outline:none; background:transparent;
  writing-mode: horizontal-tb; text-orientation: mixed;
  white-space: nowrap; word-break: normal;
  -webkit-appearance:none; appearance:none;
}
.hero .searchbar input::placeholder{ color:#94a3b8; letter-spacing:.02em; }

/* ボタン：小ぶりのピル型 */
.hero .searchbar button{
  height:42px; padding:0 16px;
  border-radius:12px; border:1px solid var(--accent);
  background: linear-gradient(180deg,#f6d48a,#eab54f);
  color:#3e2a00; font-weight:700; cursor:pointer;
}
.hero .searchbar button:hover{ filter:brightness(1.03); }
.hero .searchbar button:active{ transform:translateY(1px); }

/* スマホもう少しコンパクトに */
@media (max-width:480px){
  .hero .searchbar{ padding:4px; }
  .hero .searchbar input{ height:40px; }
  .hero .searchbar button{ height:40px; padding:0 14px; }
}
/* =======================
   モバイルの読みやすさ最適化
   ======================= */

/* 1) ベース：スマホは本文サイズを15px相当へ */
@media (max-width: 480px){
  html{ font-size: 15px; }           /* 既定16px → 15pxに */
  body{ line-height: 1.7; }          /* 行間をやや広めに */
}

/* 2) 見出しを一段スリムに（fluid＋上限） */
@media (max-width: 480px){
  .hero h1{ font-size: clamp(1.20rem, 6vw, 1.80rem); letter-spacing: .01em; }
  h2{       font-size: clamp(1.05rem, 4.2vw, 1.35rem); }
  h3{       font-size: clamp(1.00rem, 3.6vw, 1.20rem); }
  .lead{    font-size: .98rem; line-height: 1.6; max-width: 36em; margin-inline:auto; }
}

/* 3) ヒーロー検索（入力は16px維持でiOSズーム回避） */
@media (max-width: 480px){
  .hero .searchbar{ max-width: 640px; padding: 4px; gap: 6px; }
  .hero .searchbar input{ font-size: 16px; height: 40px; padding: 0 10px; } /* ←16px固定 */
  .hero .searchbar button{ height: 40px; padding: 0 14px; font-size: .95rem; }
}

/* 4) ナビ・バッジ・チップも小さめに */
@media (max-width: 480px){
  .site-header .brand{ font-size: .98rem; }
  nav[aria-label="主要ナビゲーション"] a{ font-size: .95rem; }
  .badge, .hanko{ transform: scale(.94); transform-origin: left center; }
  .chip{ font-size: .88rem; padding: 6px 10px; }
  .kicker{ font-size: .9rem; }
}

/* 5) カード内テキストの圧縮 */
@media (max-width: 480px){
  .card .body p{ font-size: .95rem; line-height: 1.55; }
  .card h3{ font-size: 1.05rem; }
  .grid{ gap: 14px; } /* つめ気味 */
}

/* 6) 余白の見直し（上部の余白を少しだけ圧縮） */
@media (max-width: 480px){
  section.hero .container{ padding-top: 10px; padding-bottom: 16px; }
  .sec-title{ margin-top: 10px; margin-bottom: 8px; }
}