/* 風景を探す(/explore/)だけの部品。色・文字は ui/ui.css のトークンだけを使う(新しい色は足さない)。 */

/* ---------- 入口 ---------- */
.ex-hero{padding:40px 0 26px}
.ex-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:52px;align-items:start}
.ex-hero-main{min-width:0}
.ex-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.ex-kicker .kick{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--green);letter-spacing:.06em}
.ex-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 18%,transparent)}
.ex-saved-btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:4px 8px 4px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap}
.ex-saved-btn:hover{border-color:var(--green);color:var(--green)}
.ex-saved-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ex-saved-btn .num{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--green-bg);color:var(--green);font-size:12px;text-align:center}
.ex-saved-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ex-saved-btn[aria-pressed="true"] .num{background:var(--lime);color:#10291f}
.ex-h1{font:900 clamp(32px,4.4vw,54px)/1.18 var(--head);letter-spacing:-.02em;margin:16px 0 12px}
.ex-lead{max-width:640px}
.ex-form{margin-top:24px;max-width:780px}
.ex-bar{align-items:center;padding:6px 6px 6px 14px}
.ex-bar-ic{width:22px;height:22px;flex:none;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round}
.ex-bar input{font-size:17px;padding:11px 8px}
.ex-bar button{min-height:48px;padding:0 22px;font-size:15.5px}
.ex-bar button[disabled]{opacity:.7;cursor:progress}
.ex-bar .go-s{display:none}
.ex-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px}
.ex-near{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--green)}
.ex-near .select{min-height:36px;padding:4px 8px;font-size:13.5px}
.ex-adv-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:4px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;margin-left:auto;max-width:100%}
.ex-adv-btn:hover{border-color:var(--green);color:var(--green)}
.ex-adv-btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.ex-adv-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ex-adv-sum{font-weight:500;color:var(--green);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-adv-sum:not(:empty):before{content:"・";color:var(--muted)}
.ex-adv{margin-top:12px;padding:16px 18px;border-radius:12px}
.ex-adv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ex-adv .field{font-weight:700}
.ex-adv .field select{width:100%;font-weight:400}
.ex-adv .field select:disabled{opacity:.5}
.ex-adv-note{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.ex-adv-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--muted)}
.ex-bbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;font-size:13px;color:var(--amber)}
.ex-fallback{margin-top:12px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--green) 40%,var(--line));border-radius:12px;background:var(--card)}
.ex-fallback p{margin:0 0 8px;font-size:13.5px;color:var(--ink2)}
.ex-examples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.ex-examples>span{font-size:12.5px;color:var(--muted);margin-right:2px;white-space:nowrap}

.ex-how{padding:20px 22px 18px;margin-top:40px}
.ex-how-t{font:900 19px/1.45 var(--head);margin:6px 0 14px}
.ex-how-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:12px;counter-reset:s}
.ex-how-steps li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;font-size:13.5px;line-height:1.55;counter-increment:s}
.ex-how-steps li:before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--lime2);color:var(--green);display:grid;place-items:center;font:700 13px var(--num)}
.ex-how-steps b{color:var(--ink)}
.ex-how-steps span{color:var(--ink2)}
.ex-how-note{font-size:12.5px;line-height:1.7;color:var(--muted);margin:0 0 10px;padding-top:12px;border-top:1px solid var(--line2)}
.ex-how .link{font-size:13.5px}

/* ---------- 例の風景(プリセット) ---------- */
.ex-sec{padding:26px 0 64px}
.ex-sec-head{display:flex;justify-content:space-between;align-items:end;gap:10px 40px;flex-wrap:wrap;margin-bottom:20px}
.ex-sec-head .sec-lead{max-width:480px;font-size:14px;color:var(--muted)}
.ex-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ex-preset{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);cursor:pointer;color:inherit;font:inherit;min-width:0;transition:border-color .15s,transform .15s}
.ex-preset:hover{border-color:var(--green);transform:translateY(-2px)}
.ex-preset .ph{position:relative;aspect-ratio:3/2;background:#1c2b26;overflow:hidden}
.ex-preset .ph img{width:100%;height:100%;object-fit:cover}
.ex-preset .tx{display:grid;gap:4px;padding:12px 14px 14px}
.ex-preset .ey{font-size:12px;color:var(--muted)}
.ex-preset .ti{font:900 17px/1.4 var(--head);color:var(--ink)}
.ex-preset .q{font-size:12.5px;line-height:1.6;color:var(--green)}
.ex-credit{margin:14px 0 0;text-align:right}
.ex-preset-skel{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.ex-preset-skel .skel{border-radius:0;aspect-ratio:3/2}
.ex-preset-skel .skel+.skel{aspect-ratio:auto;height:14px;margin:14px;border-radius:6px}

/* ---------- 結果 ---------- */
.ex-results{padding:6px 0 56px}
.ex-rhead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap;padding:16px 0 14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.ex-rhead-main{min-width:0;flex:1 1 380px}
.ex-reyebrow{font-size:12.5px;font-weight:700;color:var(--green);letter-spacing:.04em}
.ex-rtitle{font:900 clamp(24px,3vw,34px)/1.3 var(--head);letter-spacing:-.01em;margin:4px 0 6px;overflow-wrap:anywhere}
.ex-rtitle:focus{outline:none}
.ex-rsum{margin:0;font-size:14px;color:var(--ink2)}
.ex-rsum .num{font-weight:600}
.ex-ractions{display:flex;gap:8px;flex-wrap:wrap}
.ex-ractions svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.ex-ractions .btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ex-progress{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px;font-size:13px;color:var(--muted)}
.ex-psteps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.ex-psteps li{padding:3px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12.5px;font-weight:700}
.ex-psteps li.done{background:var(--green-bg);color:var(--green);border-color:transparent}
.ex-psteps li.done:before{content:"✓ "}
.ex-psteps li.now{background:var(--green);color:var(--paper);border-color:var(--green)}
.ex-ptime{display:inline-flex;align-items:center;gap:8px;font-family:var(--num);color:var(--ink2)}
.ex-ptime .spinner{width:16px;height:16px;border-width:2px}
.ex-interp{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;font-size:13px;color:var(--ink2)}
.ex-interp .lbl{color:var(--muted)}
.ex-interp p{flex-basis:100%;margin:2px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted)}
.ex-interp p b{color:var(--amber);font-weight:700}
.ex-notice{margin:0 0 16px}

.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px 18px}
.ex-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0;transition:border-color .15s,box-shadow .15s}
.ex-card:hover{border-color:var(--green)}
.ex-card.on{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}
.ex-card .ph{position:relative;aspect-ratio:3/2;background:#1c2b26;overflow:hidden}
.ex-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ex-card:hover .ph img{transform:scale(1.03)}
.ex-card .ph .photo-tags{right:58px}
.ex-save{position:absolute;z-index:2;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff99;background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--green);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px #0b171426;padding:0}
.ex-save:hover{background:var(--card)}
.ex-save svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ex-save[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--paper)}
.ex-save[aria-pressed="true"] svg{fill:currentColor}
.ex-card .bd{display:flex;flex-direction:column;gap:7px;padding:13px 16px 15px;flex:1}
.ex-place{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;margin:0;font-size:12.5px;color:var(--muted)}
.ex-place b{color:var(--ink2);font-weight:700}
.ex-dist{color:var(--green);font-weight:700;font-family:var(--num)}
.ex-ctitle{margin:0;font:700 15.5px/1.55 var(--body);color:var(--ink)}
.ex-ctitle button{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.ex-ctitle button:after{content:"";position:absolute;inset:0;z-index:1}
.ex-ctitle .ct{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@supports selector(:has(*)){
  .ex-ctitle button:focus-visible{outline:none}
  .ex-card:has(.ex-ctitle button:focus-visible){outline:3px solid var(--green);outline-offset:3px}
}
.ex-quote{margin:0;padding-left:11px;border-left:3px solid var(--lime);font-size:13.5px;line-height:1.7;color:var(--ink2)}
.ex-quote span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ex-ctags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:3px}
.ex-ctags span{font-size:12px;padding:1px 9px;border-radius:999px;background:var(--paper2);color:var(--ink2)}
.ex-cmp{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;min-height:36px;margin-top:2px;padding:2px 12px 2px 9px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;background:var(--paper)}
.ex-cmp input{width:16px;height:16px;accent-color:var(--green);margin:0}
.ex-cmp:has(input:checked){border-color:var(--green);color:var(--green);background:var(--green-bg)}
.ex-nophoto{display:grid;place-items:center;height:100%;padding:16px;text-align:center;font-size:12.5px;line-height:1.6;color:var(--dark-ink);background:#1c2b26}
.ex-divider{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:6px 0 -4px;font-size:12.5px;font-weight:700;color:var(--muted)}
.ex-divider:before,.ex-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.ex-skelcard .ph{aspect-ratio:3/2;border-radius:0}
.ex-skelcard .bd{gap:10px}
.ex-skelcard .skel.s1{width:40%}.ex-skelcard .skel.s2{width:92%;height:18px}.ex-skelcard .skel.s3{width:75%}
.ex-empty{grid-column:1/-1;background:var(--card);border:1px solid var(--line);border-radius:14px}
.ex-empty p{margin:0 auto 10px;max-width:560px;font-size:14px;color:var(--ink2)}
.ex-empty ul{display:inline-grid;gap:4px;margin:4px 0 14px;padding-left:1.2em;text-align:left;font-size:13.5px;color:var(--ink2)}
.ex-empty .row{justify-content:center}

.ex-more{display:flex;flex-direction:column;align-items:center;gap:6px;margin:28px 0 6px}
.ex-more .btn{min-width:min(100%,320px)}
.ex-more .btn[disabled]{cursor:progress}
.ex-more-note{margin:0;font-size:12.5px;color:var(--muted);text-align:center}
.ex-rfoot{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ex-rfoot p{margin:0;max-width:720px}

/* ---------- しくみ ---------- */
.ex-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ex-steps li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 20px 22px}
.ex-steps .n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--lime2);color:var(--green);font-weight:700;margin-bottom:12px}
.ex-steps h3{font:900 18px/1.4 var(--head);margin:0 0 6px}
.ex-steps p{margin:0;font-size:14px;color:var(--ink2)}
.ex-honest{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.ex-honest li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.75;color:var(--ink2)}
.ex-honest li:before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--amber)}
.ex-honest b{color:var(--ink)}
.ex-about-api{margin:22px 0 0;font-size:13px;color:var(--muted)}

/* ---------- 詳細(.drawer をページの上に固定して使う) ---------- */
.ex-drawer{position:fixed;top:var(--ex-top,72px);right:12px;bottom:12px;z-index:45}
.ex-drawer:not(.open){visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s}
.ex-drawer.open{visibility:visible}
.ex-drawer .drawer-head{align-items:center}
.ex-drawer .drawer-head .t span{display:block}
.ex-dnav{display:flex;gap:6px;flex:none}
.ex-dnav .icon-btn{width:38px;height:38px;color:var(--ink2)}
.ex-dnav .icon-btn svg,.ex-dialog-head .icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ex-dnav .icon-btn[disabled]{opacity:.35;cursor:default}
.ex-dnav .icon-btn[disabled]:hover{border-color:var(--line);color:var(--ink2)}
.ex-scrim{position:fixed;inset:0;z-index:55;background:#0b17146b}
main{transition:padding-right .28s ease}
@media(min-width:1100px){
  /* 詳細を開いたら本文は左のまま(ヘッダーの位置にそろえる)、右端を詳細の手前で止める */
  body.ex-dopen main{padding-right:466px}
  body.ex-dopen main .wrap{--l:max(16px,calc((100% + 466px - 1180px) / 2));width:calc(100% - var(--l) - 16px);margin-left:var(--l);margin-right:0}
  .ex-scrim{display:none!important}
}
@media(max-width:1099px){.ex-drawer{z-index:60;top:12px}}
@media(max-width:760px){
  .ex-drawer{top:auto;left:0;right:0;bottom:0;max-height:88dvh}
  .ex-drawer .drawer-head{padding-top:18px}
  .ex-dnav .icon-btn{width:40px;height:40px}
  body.ex-lock{overflow:hidden}
}
.ex-d-photo{margin:0 0 12px}
.ex-d-photo .photo{aspect-ratio:4/3}
.ex-d-title{font:900 18px/1.5 var(--head);margin:0 0 10px}
.ex-d-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.ex-d-acts .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ex-d-acts .btn[aria-pressed="true"] svg{fill:currentColor}
.ex-d-acts .btn[aria-pressed="true"]{color:var(--green);border-color:var(--green);background:var(--green-bg)}
.ex-d-sec{padding:14px 0 4px;margin-top:12px;border-top:1px solid var(--line2)}
.ex-d-sec>h3{font:700 13px var(--body);color:var(--ink);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.ex-d-sec>h3 small{font-weight:400;color:var(--muted);font-size:12px}
.ex-d-note{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}
.ex-why blockquote{margin:0 0 10px;padding:10px 12px;border-left:3px solid var(--lime);background:var(--paper);border-radius:0 9px 9px 0;font-size:14px;line-height:1.75;color:var(--ink)}
.ex-why cite{display:block;margin-top:4px;font-size:12px;font-style:normal;color:var(--muted)}
.ex-why cite .mono{font-size:11px;margin-left:4px;opacity:.85}
.ex-score{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:baseline;margin:10px 0 0;font-size:13px}
.ex-score dt{color:var(--muted);white-space:nowrap}
.ex-score dd{margin:0;color:var(--ink2);min-width:0}
.ex-score dd b{font:600 15px var(--num);color:var(--ink)}
.ex-score .badge{margin:0 4px 4px 0}
.ex-dist4{display:flex;height:8px;margin:6px 0 4px;border-radius:4px;overflow:hidden;background:var(--line2)}
.ex-dist4 i{display:block;height:100%}
.ex-dist4 i:nth-child(1){background:var(--faint)}.ex-dist4 i:nth-child(2){background:var(--amber)}.ex-dist4 i:nth-child(3){background:color-mix(in srgb,var(--green) 45%,var(--line))}.ex-dist4 i:nth-child(4){background:var(--green)}
.ex-dist4-l i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 4px 0 0;vertical-align:-1px}
.ex-score dd .note{display:block;font-size:12px;color:var(--muted)}
.ex-dist4-l{font-size:12px;color:var(--muted)}
.ex-karte{display:grid;gap:8px}
.ex-karte a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);text-decoration:none;font-weight:700;font-size:14px}
.ex-karte a:hover{border-color:var(--green);color:var(--green)}
.ex-karte a small{font-weight:400;font-size:12px;color:var(--muted)}
.ex-karte .muted{font-size:13px}
.ex-links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px}
.ex-links a{color:var(--green);font-weight:700;text-decoration:none}
.ex-links a:hover{text-decoration:underline}
.ex-prov li{grid-template-columns:64px 1fr}
.ex-prov .v{overflow-wrap:anywhere}
.ex-prov code{font-size:11.5px}
.ex-full summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--green);padding:4px 0}
.ex-facts{list-style:none;margin:6px 0 0;padding:0}
.ex-facts h4{margin:12px 0 4px;font-size:12px;color:var(--muted);font-weight:700}
.ex-facts li{font-size:13px;line-height:1.7;padding:6px 0;border-bottom:1px solid var(--line2);color:var(--ink2)}
.ex-contact{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px}
.ex-contact a{color:var(--muted)}
.ex-contact a:hover{color:var(--red)}
.ex-d-skel{display:grid;gap:8px}
.ex-d-skel .skel:nth-child(2){width:85%}.ex-d-skel .skel:nth-child(3){width:70%}

/* ---------- 比べる ---------- */
.ex-cbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);font-size:13.5px;font-weight:700;white-space:nowrap;max-width:calc(100% - 24px)}
body.ex-cbar-on .ui-toast{bottom:84px}
.ex-dialog{width:min(1120px,calc(100% - 24px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-lg)}
.ex-dialog::backdrop{background:#0b171473}
.ex-dialog-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--line2);background:var(--card)}
.ex-dialog-head b{font:900 18px var(--head)}
.ex-cmp-grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:20px;padding:18px 20px 24px}
.ex-cmp-item{min-width:0}
.ex-cmp-item .photo{aspect-ratio:3/2;margin-bottom:10px}
.ex-cmp-item h3{font:700 15px/1.55 var(--body);margin:6px 0 10px}
.ex-cmp-item .reading{margin-bottom:10px}
.ex-cmp-item .reading li{grid-template-columns:44px 1fr;font-size:13px}

/* ---------- 状態ごとの見え方 ---------- */
body.ex-searching .ex-lead,body.ex-searching .ex-how,body.ex-searching #discover,body.ex-searching .ex-examples,body.ex-searching .ex-kicker .kick{display:none}
body.ex-searching .ex-kicker{justify-content:flex-end;margin-bottom:-6px}
body.ex-searching .ex-h1{position:absolute!important;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.ex-searching .ex-hero{padding:18px 0 4px}
body.ex-searching .ex-hero-grid{grid-template-columns:minmax(0,1fr)}
body.ex-searching .ex-form{margin-top:12px}
body.ex-saved .ex-form{display:none}
@media(min-width:641px){
  /* 結果を見ているときは「保存した場所」を検索欄の右へ(縦の場所を取らない) */
  body.ex-searching .ex-hero-main{display:grid;grid-template-columns:minmax(0,780px) auto;justify-content:space-between;column-gap:24px;align-items:start}
  body.ex-searching .ex-kicker{grid-column:2;grid-row:1;margin:12px 0 0}
  body.ex-searching .ex-form{grid-column:1;grid-row:1;margin-top:0}
}

/* ---------- 幅ごと ---------- */
@media(max-width:1020px){
  .ex-hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .ex-how{display:none}
  .ex-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-steps,.ex-honest{grid-template-columns:1fr}
}
@media(max-width:760px){
  .ex-cmp-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ex-hero{padding:22px 0 16px}
  .ex-h1{font-size:31px;margin:12px 0 8px}
  .ex-lead{font-size:15px}
  .ex-form{margin-top:18px}
  .ex-bar{padding:5px 5px 5px 11px}
  .ex-bar input{font-size:16px;padding:10px 6px}
  .ex-bar button{padding:0 16px}
  .ex-bar .go-l{display:none}.ex-bar .go-s{display:inline}
  .ex-controls{gap:8px}
  .ex-adv-btn{margin-left:0}
  .ex-adv-grid{grid-template-columns:1fr}
  .ex-examples{flex-wrap:nowrap;overflow-x:auto;margin:12px -16px 0;padding:2px 16px 8px;scrollbar-width:none}
  .ex-examples::-webkit-scrollbar{display:none}
  .ex-sec{padding:18px 0 48px}
  .ex-presets{gap:12px}
  .ex-preset .tx{padding:10px 11px 12px}
  .ex-preset .ti{font-size:15px}
  .ex-preset .q{display:none}
  .ex-preset .photo-tags span+span{display:none}
  .ex-rhead{padding-top:10px}
  .ex-ractions{width:100%}
  .ex-ractions .btn{flex:1 1 auto}
  .ex-grid{gap:16px}
  .ex-ctitle{font-size:16px}
  .ex-cbar{bottom:12px;padding:8px 8px 8px 12px;gap:6px;font-size:12.5px}
  .ex-dialog{max-height:calc(100dvh - 24px)}
  .ex-cmp-grid{padding:14px 14px 20px}
}