/* =======================================================
   natal.css（整理版）
   - フォーム系は .natal-wrap 配下にスコープ
   - ページ上部の緑帯（Lightning/カバーブロック）はモバイル時のみ調整
   - 数値は下の「調整ポイント」で一括変更できます
   ======================================================= */

/* ===== 調整ポイント（モバイル時の帯の薄さ／タイトルサイズ） ===== */
:root{
  --natal-band-pad-y: 2px;   /* ← 帯の上下パディング（もっと薄く=8px/6pxなど） */
  --natal-title-size: 24px;   /* ← 見出しフォントサイズ（もっと小さく=22pxなど） */
}

/* -------------------------------------------------------
   1) フォーム/レイアウト（.natal-wrap 内だけに適用）
   ------------------------------------------------------- */
.natal-wrap { 
  font-family:'Kosugi Maru','M PLUS Rounded 1c',sans-serif;
  background:#f4f6f9; 
  margin:0; 
  padding: 8px;
}

.natal-wrap .natal-title{
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 34px);
  text-align: center;
  color: #333;
  letter-spacing: .02em;
  margin: 0 0 1em;
}
.natal-wrap .natal-form{
  max-width:720px; 
  margin:0 auto; 
  background:#fff; 
  border-radius:12px; 
  padding:24px; 
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.natal-wrap .natal-form label{
  display:block; 
  font-weight:600; 
  font-size:.95em; 
  color:#444; 
  margin-top:1em;
}

.natal-wrap .natal-form input,
.natal-wrap .natal-form select{
  width:100%; 
  padding:.8em; 
  font-size:1em; 
  border:1px solid #ccc; 
  border-radius:8px; 
  margin-top:6px; 
  box-sizing:border-box; 
  background:#fff;
}
.natal-wrap .natal-form input:focus,
.natal-wrap .natal-form select:focus{
  outline: none;
  border-color: #4aa6e5;
  box-shadow: 0 0 0 3px rgba(74,166,229,.15);
}

.natal-wrap .natal-row{ 
  display:flex; gap:12px; flex-wrap:wrap; margin-top:1em; align-items:flex-end;
}
.natal-wrap .btn-primary{
  background:#007bff; color:#fff; display:block; width:100%;
  font-size:1.15em; padding:1.05em; border:none; border-radius:8px; cursor:pointer; transition:.2s;
}
.natal-wrap .btn-primary:hover{ opacity:.92; }

.natal-wrap .btn-now{
  background:#28a745; color:#fff; flex:0 0 auto; 
  min-height: 44px; padding:.85em 1.15em; min-width:110px;
  border:none; border-radius:10px; font-weight:600; letter-spacing:.02em;
}

.natal-wrap small{ display:block; margin-top:.5em; font-size:.85em; color:#666; }

/* 生まれた時間の横並び */
.natal-wrap .time-row{ display:flex; gap:12px; align-items:center; }
.natal-wrap .time-row input[type="time"]{ flex:1; }

/* Cookieボタン */
.natal-wrap .cookie-btn{
  padding:.75em 1.15em; border-radius:10px; border:1px solid #bbb;
  background:#f7f7f7; font-size:.95em; line-height:1.2; cursor:pointer;
}

/* エラーバー */
#errbar{
  background:#c62828; color:#fff; padding:8px 12px; font-weight:700;
  display:none; margin-bottom:12px; border-radius:8px;
}

/* -------------------------------------------------------
   2) 地図UI（.natal-wrap 内だけ）
   ------------------------------------------------------- */
.natal-wrap #mapPanel{
  display:none; margin-top:10px; border:1px solid #ddd; border-radius:10px; overflow:hidden; background:#fff;
}
.natal-wrap #mapToolbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px;
}
.natal-wrap #placeInput{
  flex:1; min-width:220px; padding:.6em; border:1px solid #ccc; border-radius:8px;
}
.natal-wrap #map{ width:100%; height:320px; }
.natal-wrap .btn-secondary{ background:#6c757d; color:#fff; border:none; border-radius:8px; padding:.7em 1em; cursor:pointer; }
.natal-wrap .btn-outline{ background:#fff; color:#333; border:1px solid #bbb; }

/* スマホで押しやすく（任意） */
@media (max-width: 480px){
  .natal-wrap .cookie-btn{ width:100%; }
}

/* -------------------------------------------------------
   3) モバイル：ページ上部の帯を薄く（Lightning & Cover）
   ※ WPテーマのヘッダ領域は .natal-wrap の外側なので、ここはグローバル指定
   ------------------------------------------------------- */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /* Lightning のページヘッダー候補 */
  .vk_pageHeader,
  .l-contents__header,
  .page-header {
    padding-top: var(--natal-band-pad-y) !important;
    padding-bottom: var(--natal-band-pad-y) !important;
    min-height: 0 !important;
  }
  .vk_pageHeader h1,
  .page-header h1,
  .vk_pageHeader .page-header-title {
    font-size: var(--natal-title-size) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Coverブロックを帯に使っている場合の保険 */
  .wp-block-cover,
  .wp-block-cover.is-style-default {
    min-height: 0 !important;
    padding-top: var(--natal-band-pad-y) !important;
    padding-bottom: var(--natal-band-pad-y) !important;
  }
  .wp-block-cover .wp-block-cover__inner-container h1,
  .wp-block-cover .wp-block-cover__inner-container .has-text-align-center {
    margin: 0 !important;
    line-height: 1.2 !important;
    font-size: var(--natal-title-size) !important;
  }
}

 /* スマホ時にフォームを少しだけ広げる */
@media (max-width: 640px){
  .natal-wrap{ padding: 0 0px; }        /* ← 8px→6px（もっと広げたいなら 0〜4px） */
  .natal-wrap .natal-form{ border-radius: 8px; }  /* 角丸を少しだけ小さく（任意） */
}