/* 補助金.com 「制度をさがす」フォーム高品位化  hj_find.css  RL404
   ------------------------------------------------------------------
   方針：index.html#find セクション内の散らばり・安っぽさを解消。
   ①②③④ の各セクションを視覚的サブカードでまとめ、チップ幅を均一化、
   ③ の入力枠をグリッド整列、リード文の改行を制御する。
   既存 app.css の .flab/.sel/.frow より特異性を一段上げて上書き。
   ---------------------------------------------------------------- */

/* #find セクション全体のリード文：改行制御＋落ち着き */
#find + .sub{
 font-size:.94rem!important;
 line-height:1.85;
 color:#4a443c;
 max-width:760px;
 margin:0 0 22px!important;
 text-wrap:pretty;
}
#find + .sub strong{color:#1f4d8c;font-weight:700}
#find + .sub br{display:none} /* 既存brは無視して自然な改行に */
#find + .sub span{display:block;margin-top:6px;color:#7a7268;font-size:.86rem}

/* ①②③④ セクション全体をカード内サブカード化 */
.flab{
 display:flex;align-items:center;gap:8px;
 font-size:.84rem!important;font-weight:800!important;
 color:#1f4d8c!important;
 margin:20px 0 10px!important;
 letter-spacing:.01em;
 line-height:1.4;
}
.flab::before{
 content:"";display:inline-block;width:4px;height:18px;
 background:linear-gradient(180deg,#2c6dc4,#1f4d8c);
 border-radius:3px;flex-shrink:0;
}
/* 補足説明（）内の薄字 */
.flab{font-weight:700}

/* ① 表示する範囲 — Level chips (国・都道府県・市区町村) */
.sel-lvl{
 display:flex;flex-wrap:wrap;gap:10px;
 padding:14px 16px;
 background:linear-gradient(180deg,#fbf7ec 0%,#f6f1e1 100%);
 border:1px solid #e8dfc8;border-radius:12px;
 margin:0 0 4px;
}
.lvl-btn{
 font:inherit;font-size:.92rem!important;font-weight:700;
 padding:10px 22px!important;
 min-height:44px;
 border:1.5px solid transparent;
 border-radius:999px;
 background:#fff;color:#3d3a35;
 cursor:pointer;
 display:inline-flex;align-items:center;gap:8px;
 transition:transform .08s,box-shadow .15s,border-color .15s,background .15s;
 box-shadow:0 1px 2px rgba(36,28,20,.05);
}
.lvl-btn .lvl-dot{
 width:9px;height:9px;border-radius:50%;
 background:#9ba3ad;flex-shrink:0;
 transition:background .15s,box-shadow .15s;
}
.lvl-btn.lvl-nat[aria-pressed="true"] .lvl-dot{background:#2c8a5a;box-shadow:0 0 0 3px rgba(44,138,90,.18)}
.lvl-btn.lvl-pref[aria-pressed="true"] .lvl-dot{background:#c98a2c;box-shadow:0 0 0 3px rgba(201,138,44,.18)}
.lvl-btn.lvl-city[aria-pressed="true"] .lvl-dot{background:#7a4ab8;box-shadow:0 0 0 3px rgba(122,74,184,.18)}
.lvl-btn[aria-pressed="true"]{
 border-color:#1f4d8c;
 background:#fff;
 box-shadow:0 2px 6px rgba(31,77,140,.18);
}
.lvl-btn:hover{border-color:#b9a888}
.lvl-btn[aria-pressed="true"]:hover{border-color:#1f4d8c}
.lvl-btn:active{transform:translateY(1px)}

/* ② 境遇 chips ＋ ⑤ 所管 chips — 均一幅グリッド（長文も改行で対応） */
#sel,#kan{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
 gap:8px;
 padding:14px 16px;
 background:#fcfaf4;
 border:1px solid #ece3cc;
 border-radius:12px;
 margin:0 0 4px;
}
#sel button,#kan button{
 font:inherit;font-size:.86rem;font-weight:600;
 padding:10px 10px!important;
 min-height:44px;
 border:1.5px solid #d9cfba;
 border-radius:14px; /* 改行時の楕円崩れ防止：完全 pill から角丸へ */
 background:#fff;
 color:#3d3a35;
 cursor:pointer;
 text-align:center;
 line-height:1.3;
 transition:transform .08s,box-shadow .15s,border-color .15s,background .15s,color .15s;
 white-space:normal;        /* 改行許可 */
 word-break:keep-all;       /* 単語途中で切らない */
 overflow-wrap:anywhere;    /* 長すぎる場合は折返し */
 display:flex;align-items:center;justify-content:center;
}
#sel button:hover,#kan button:hover{
 border-color:#1f4d8c;color:#1f4d8c;
 background:#f2f6fc;
}
#sel button[aria-pressed="true"],#kan button[aria-pressed="true"]{
 background:linear-gradient(180deg,#2659a3 0%,#1f4d8c 100%);
 border-color:#1f4d8c;
 color:#fff;font-weight:800;
 box-shadow:0 2px 6px rgba(31,77,140,.24);
}
#sel button:active,#kan button:active{transform:translateY(1px)}

/* ③ お住まい・年齢 — グリッド整列 */
#find .frow{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:14px 18px;
 padding:14px 16px;
 background:#fcfaf4;
 border:1px solid #ece3cc;
 border-radius:12px;
 margin:0 0 4px;
 align-items:start;
}
#find .frow > div{
 display:flex;flex-direction:column;gap:6px;
 min-width:0;
}
/* 内側の .flab はラベルとして縮小 */
#find .frow .flab{
 font-size:.74rem!important;color:#5a5249!important;
 margin:0 0 2px!important;font-weight:700;
 padding:0;
}
#find .frow .flab::before{display:none}

/* ③ 内 select/input 統一スタイル（プレミアム） */
#find .frow select,
#find .frow input[type=text],
#find .frow input[type=search],
#find .frow input[type=number]{
 font:inherit;font-size:.95rem;font-weight:600;
 width:100%!important;min-width:0!important;
 padding:11px 13px;min-height:44px;
 border:1px solid #d9cfba;border-radius:10px;
 background:#fff;color:#1f1c18;
 box-shadow:inset 0 1px 2px rgba(36,28,20,.04);
 transition:border-color .15s,box-shadow .15s,background .15s;
 box-sizing:border-box;
}
#find .frow select{
 -webkit-appearance:none;appearance:none;
 padding-right:36px;cursor:pointer;
 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;
}
#find .frow input:hover,#find .frow select:hover{border-color:#b9a888}
#find .frow input:focus,#find .frow select:focus{
 outline:none;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;
}
#find .frow input[type=number]{text-align:right;font-variant-numeric:tabular-nums}

/* ④ キーワード検索 ＋ クリアボタン — 横並び */
#find .frow:has(#q){
 display:grid;
 grid-template-columns:1fr auto;
 gap:10px;
 padding:14px 16px;
 background:#fff;
 border:1px solid #d9cfba;
 border-radius:12px;
 margin:8px 0 0;
}
#find .frow #q{
 grid-column:1;
 padding:12px 16px 12px 40px;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><circle cx='9' cy='9' r='6' stroke='%231f4d8c' stroke-width='1.7'/><path d='M14 14L18 18' stroke='%231f4d8c' stroke-width='1.7' stroke-linecap='round'/></svg>");
 background-repeat:no-repeat;background-position:12px center;background-size:18px;
}
#find #clr{
 font:inherit;font-size:.88rem;font-weight:700;
 padding:11px 18px;min-height:44px;
 border:1px solid #d9cfba;border-radius:10px;
 background:#fff;color:#5a5249;cursor:pointer;
 transition:background .15s,border-color .15s,color .15s;
 white-space:nowrap;
}
#find #clr:hover{background:#f6f1e6;border-color:#b9a888;color:#1f4d8c}

/* 詳しい絞り込み（details）— 折りたたみ枠強化 */
.adv-filter{
 border:1px solid #d9cfba!important;
 border-radius:12px!important;
 background:#fff!important;
 margin:14px 0 4px!important;
 overflow:hidden;
}
.adv-filter summary{
 padding:13px 16px!important;
 font-size:.92rem!important;font-weight:700;
 color:#1f4d8c!important;
 background:#fcfaf4;
 list-style:none;
 cursor:pointer;
}
.adv-filter summary::-webkit-details-marker{display:none}
.adv-filter summary::before{
 content:"＋";display:inline-block;margin-right:8px;
 font-weight:800;color:#1f4d8c;transition:transform .2s;
}
.adv-filter[open] summary::before{content:"−"}
.adv-filter summary:hover{background:#f6f1e6}
.adv-filter > div.flab{padding:14px 16px 0!important;margin:0!important}
.adv-filter > .sel{padding:0 16px 14px!important;background:transparent!important;border:none!important}

/* スマホ最適化（≤560px） */
@media (max-width:560px){
 .sel-lvl{padding:12px 12px;gap:8px}
 .lvl-btn{padding:11px 18px!important;font-size:.94rem!important;flex:1 1 auto;justify-content:center}
 #sel,#kan{
  grid-template-columns:repeat(2,1fr);
  gap:8px;padding:12px 12px;
 }
 #sel button,#kan button{font-size:.84rem;padding:9px 8px!important;line-height:1.35}
 #find .frow{
  grid-template-columns:1fr;
  gap:12px;padding:12px 12px;
 }
 #find .frow:has(#q){
  grid-template-columns:1fr;
 }
 #find #clr{width:100%}
 .flab{font-size:.86rem!important;margin:18px 0 8px!important}
 .adv-filter summary{padding:14px 14px!important;min-height:48px;display:flex;align-items:center}
}

/* 印刷時はフォーム全体を非表示（検索ツールは紙不要） */
@media print{
 #find,#find + .sub,.sel-lvl,#sel,#kan,#find .frow,.adv-filter{display:none!important}
}