/* 補助金.com フォーム共通スタイル  hj_forms.css  RL403
   ------------------------------------------------------------------
   方針：lifeplan/iju/ai/compare/houjin/search 等の「条件入力フォーム」を
   統一的に高品位化。ブラウザ既定の見た目（特に select の矢印・小さい
   padding）を排除し、ブランドの落ち着いた紺×クリーム×温かみのある余白
   感に整える。各ページ既存のローカル CSS より優先するため、セレクタ
   特異性を一段強める ".card select" 等で書く。
   ---------------------------------------------------------------- */

/* === 入力ラベル：上揃え・小キャプス調 === */
.card .row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin:0 0 10px}
.card .row.tight{gap:8px 14px}
.card label{display:inline-flex;flex-direction:column;gap:5px;font-weight:700;color:#3d3a35;font-size:.78rem;letter-spacing:.02em;line-height:1.3}
.card label::after{content:""}
.card .fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.card .fld .lb{font-weight:700;color:#3d3a35;font-size:.78rem;letter-spacing:.02em}
.card .fld .help{font-size:.7rem;color:#7a7268;line-height:1.55;margin:2px 0 0;font-weight:400;letter-spacing:.01em}

/* === input / select 共通：高めの padding + 影 + 集中焦点リング === */
.card input[type=text],
.card input[type=number],
.card input[type=email],
.card input[type=tel],
.card input[type=search],
.card input[type=url],
.card input[type=date],
.card input[type=password],
.card input:not([type]),
.card select,
.card textarea{
 font:inherit;font-size:.95rem;font-weight:600;
 padding:10px 13px;
 min-height:42px;
 border:1px solid #d9cfba;
 border-radius:10px;
 background:#fff;
 color:#1f1c18;
 box-shadow:inset 0 1px 2px rgba(36,28,20,.04),0 1px 0 rgba(255,255,255,.6);
 transition:border-color .15s,box-shadow .15s,background-color .15s;
 outline:none;
 box-sizing:border-box;
 max-width:100%;
}
.card input[type=number]{width:108px;font-variant-numeric:tabular-nums;text-align:right;padding-right:11px}
.card select{
 -webkit-appearance:none;-moz-appearance:none;appearance:none;
 padding-right:36px;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231f4d8c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
 background-repeat:no-repeat;
 background-position:right 12px center;
 background-size:11px 7px;
 min-width:140px;
 cursor:pointer;
}
.card input:hover,
.card select:hover,
.card textarea:hover{border-color:#b9a888}
.card input:focus,
.card select:focus,
.card textarea:focus{
 border-color:#1f4d8c;
 box-shadow:0 0 0 3px rgba(31,77,140,.16),inset 0 1px 2px rgba(36,28,20,.04);
 background:#fdfcf9;
}
.card input:disabled,
.card select:disabled{background:#f2ede2;color:#9b9285;cursor:not-allowed;box-shadow:none}
.card input::placeholder{color:#a59c8e;font-weight:500}

/* === 必須マーク === */
.card label .req{display:inline-block;color:#c25555;font-weight:800;margin-left:3px;font-size:.86em;vertical-align:-1px}

/* === ボタン === */
.card .btn,
.card button.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 font:inherit;font-size:.95rem;font-weight:700;letter-spacing:.02em;
 padding:12px 24px;
 min-height:46px;
 border:1px solid transparent;
 border-radius:11px;
 cursor:pointer;
 transition:transform .08s,box-shadow .15s,background-color .15s,border-color .15s;
 background:linear-gradient(180deg,#2659a3 0%,#1f4d8c 100%);
 color:#fff;
 box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 6px rgba(31,77,140,.24),0 1px 2px rgba(20,30,55,.08);
 text-decoration:none;
}
.card .btn:hover,
.card button.btn:hover{background:linear-gradient(180deg,#1f4d8c 0%,#163f73 100%);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 3px 9px rgba(31,77,140,.30)}
.card .btn:active,
.card button.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 3px rgba(31,77,140,.22)}
.card .btn.sec,
.card button.btn.sec{
 background:#fff;color:#1f4d8c;
 border:1px solid #d9cfba;
 box-shadow:0 1px 2px rgba(36,28,20,.05);
}
.card .btn.sec:hover,
.card button.btn.sec:hover{background:#f6f1e6;border-color:#b9a888;color:#163f73}
.card .btn.sec:active,
.card button.btn.sec:active{transform:translateY(1px)}

/* === 入力グループ：ボタン行 === */
.card .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px;align-items:center}

/* === 子フィールド：年齢一覧・サブグループ === */
.card .kids-area,
.card .subgroup{
 margin:10px 0 4px;
 padding:12px 14px;
 background:linear-gradient(180deg,#fbf7ec 0%,#f6f1e1 100%);
 border:1px solid #e8dfc8;
 border-radius:10px;
}
.card .kids-area .kid-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.86rem;margin:0 0 6px}
.card .kids-area .kid-row label{font-size:.74rem;color:#5a5249;font-weight:700}
.card .kids-area input[type=number]{width:78px}

/* === セクション見出し：強さUP === */
.card h2{
 font-size:1.06rem;
 color:#1f4d8c;
 letter-spacing:.01em;
 margin:0 0 14px;
 padding:0 0 8px;
 border-bottom:2px solid #eee3c9;
 font-weight:800;
 display:flex;align-items:center;gap:8px;
}
.card h2::before{
 content:"";display:inline-block;width:4px;height:18px;
 background:linear-gradient(180deg,#1f4d8c,#2c6dc4);
 border-radius:3px;
}

/* === フォームカード全体を高品位化 === */
.card{
 background:linear-gradient(180deg,#fff 0%,#fdfbf4 100%)!important;
 border:1px solid #e8dfc8!important;
 border-radius:16px!important;
 padding:22px 26px 24px!important;
 box-shadow:0 2px 8px rgba(20,32,58,.04),0 1px 0 rgba(255,255,255,.6) inset!important;
 transition:box-shadow .2s;
}
.card:hover{box-shadow:0 4px 16px rgba(20,32,58,.06),0 1px 0 rgba(255,255,255,.6) inset!important}

/* フォーム行のレイアウト改善（グリッドベース） */
.card .row{
 display:grid!important;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:14px 22px!important;
 margin:0 0 14px;
 align-items:end;
}
.card .row > *{min-width:0}
.card .row label{
 display:flex!important;flex-direction:column;
 gap:6px;font-weight:700;color:#3d3a35;
 font-size:.78rem;letter-spacing:.02em;
}
.card .row label > select,
.card .row label > input,
.card .row > select,
.card .row > input{
 width:100%;
}
/* ラベル隣接型（label と input が separate な場合）— 単独 select/input を inline-block で */
.card .row > select:not(:first-child),
.card .row > input:not(:first-child){display:block;width:100%}

/* === スマホ調整 === */
@media (max-width:560px){
 .card{padding:18px 16px 20px!important;border-radius:14px!important}
 .card .row{grid-template-columns:1fr!important;gap:10px 0!important}
}

/* === スマホ最適化 === */
@media (max-width:560px){
 .card .row{gap:10px 12px}
 .card input[type=text],.card input[type=number],.card input[type=email],
 .card input[type=tel],.card input[type=search],.card input[type=url],
 .card input[type=date],.card input[type=password],.card select,
 .card textarea{
  font-size:16px; /* iOS 自動ズーム抑止 */
  min-height:46px;
  padding:11px 14px;
  width:100%;
 }
 .card input[type=number]{width:100%;max-width:160px}
 .card select{min-width:0;width:100%}
 .card .btn,.card button.btn{width:100%;min-height:50px;font-size:1rem}
 .card .btnrow{flex-direction:column;align-items:stretch;gap:8px}
 .card label{font-size:.82rem}
}

/* === 印刷時：入力枠は枠線のみで地味に === */
@media print{
 .card input,.card select,.card textarea{
  background:#fff!important;box-shadow:none!important;border:1px solid #888!important;
 }
 .card .btn,.card button.btn{display:none!important}
}