/* 訪問可能エリア判定ウィジェット(area-check.v1.js 用)
   ※ このファイルを変更するときは、ファイル名を変えて(area-check.v2.css など)、各ページの参照も更新してください。 */

.acheck { position: relative; }
.acheck-card {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 980px; margin: 0 auto;
  padding: clamp(24px, 4.5vw, 48px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #ffffff 0%, var(--rose-50) 70%, var(--leaf-50) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(120, 66, 78, .16);
}
.acheck-card::before, .acheck-card::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.acheck-card::before { width: 340px; height: 340px; right: -110px; top: -150px; background: radial-gradient(circle, rgba(208, 156, 156, .32), transparent 68%); }
.acheck-card::after { width: 300px; height: 300px; left: -110px; bottom: -150px; background: radial-gradient(circle, rgba(106, 168, 79, .2), transparent 68%); }

.acheck-head { text-align: center; margin-bottom: clamp(20px, 3vw, 30px); }
.acheck-head .eyebrow { margin-bottom: .5em; }
.acheck-head h2 { text-wrap: balance; word-break: auto-phrase; margin: 0 0 .35em; font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2rem); border: 0; padding: 0; }
.acheck-head p { margin: 0 auto; max-width: 560px; color: var(--ink-2); font-size: .95rem; }
.acheck-pin {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--rose-600), #c0768a); color: #fff; box-shadow: 0 10px 24px rgba(169, 90, 104, .35);
}
.acheck-pin svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* フォーム */
.acheck-form { display: grid; gap: 16px; }
.ac-field label { display: block; margin: 0 0 6px 4px; font-weight: 700; font-size: .88rem; color: var(--ink); letter-spacing: .04em; }
.ac-field label small { font-weight: 500; color: var(--ink-3); margin-left: .4em; }
.ac-input { position: relative; }
.ac-input input {
  width: 100%; height: 58px; padding: 0 18px; border-radius: 16px;
  border: 2px solid var(--rose-200); background: rgba(255, 255, 255, .92);
  font: 500 1.06rem/1 var(--font-body); color: var(--ink); letter-spacing: .03em;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  appearance: none; -webkit-appearance: none;
}
.ac-input input::placeholder { color: #b0a5a3; }
.ac-input input:hover { border-color: var(--rose-300); }
.ac-input input:focus { outline: none; border-color: var(--leaf-600); box-shadow: 0 0 0 4px rgba(63, 109, 53, .16); background: #fff; }
.ac-input.has-pre input { padding-left: 42px; }
.ac-input .pre { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--rose-700); pointer-events: none; }
.ac-hint { margin: 6px 4px 0; min-height: 1.4em; font-size: .8rem; color: var(--ink-3); line-height: 1.6; }
.ac-hint.is-ok { color: var(--leaf-700); }
.ac-hint.is-warn { color: #8a5a00; }

.acheck-submit { display: flex; }
.acheck-submit .btn { width: 100%; min-height: 60px; font-size: 1.05rem; position: relative; white-space: nowrap; }
.acheck-submit .btn svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acheck-submit .btn[disabled] { opacity: .75; cursor: progress; transform: none; }
.acheck.is-loading .acheck-submit .btn::after {
  content: ""; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: ac-spin .8s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }

@media (min-width: 860px) {
  .acheck-form { grid-template-columns: 200px 1fr 260px; align-items: start; gap: 18px; }
  .acheck-submit { padding-top: 28px; }
}

/* 結果 */
.acheck-result { margin-top: 28px; }
.acheck-result.is-shown { animation: ac-rise .55s var(--ease) both; }
@keyframes ac-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.av { --st: var(--leaf-600); --st-bg: var(--leaf-50); --st-line: var(--leaf-100);
  display: grid; gap: 22px; padding: clamp(20px, 3.5vw, 32px); border-radius: var(--r-md);
  background: #fff; border: 2px solid var(--st-line); box-shadow: 0 10px 30px rgba(60, 40, 40, .08); position: relative; overflow: hidden; }
.av::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--st); }
.av.is-near { --st: #b7791f; --st-bg: #fff7e6; --st-line: #f3dfb4; }
.av.is-out { --st: #766f6c; --st-bg: #f4f1f0; --st-line: #e3dcda; }
.av.is-broad { --st: var(--rose-600); --st-bg: var(--rose-50); --st-line: var(--rose-200); }
@media (min-width: 780px) { .av { grid-template-columns: 1fr 330px; align-items: center; gap: 32px; } }

.av-badge { display: inline-flex; align-items: center; gap: .55em; padding: 5px 16px 5px 6px; border-radius: 999px; background: var(--st-bg); color: var(--st); font-weight: 700; font-size: .82rem; letter-spacing: .08em; }
.av-badge svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--st); fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.av-title { text-wrap: balance; word-break: auto-phrase; margin: .6em 0 .25em; font-family: var(--font-head); font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.85rem); line-height: 1.4; color: var(--st); outline: none; }
.av.is-in .av-title, .av.is-broad .av-title { color: var(--ink); }
.av.is-in .av-title { color: var(--leaf-700); }
.av-dist { margin: 0 0 .8em; color: var(--ink-2); }
.av-dist strong { font-family: var(--font-head); font-size: 1.9rem; line-height: 1; color: var(--ink); margin: 0 .1em; }
.av-text { margin: 0 0 1em; color: var(--ink-2); font-size: .96rem; }
.av-place { margin: 0 0 1.2em; padding: 10px 14px; border-radius: var(--r-sm); background: var(--st-bg); font-size: .86rem; color: var(--ink); line-height: 1.7; }
.av-place span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.av-place em { font-style: normal; color: var(--ink-3); margin-left: .4em; font-size: .8rem; }
.av-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.av-actions .btn { flex: 1 1 200px; min-height: 52px; }

/* 距離の図 */
.av-radar { text-align: center; }
.radar { width: 100%; max-width: 340px; height: auto; margin-inline: auto; display: block; overflow: visible; }
.r-edge { fill: none; stroke: var(--rose-300); stroke-width: 1; stroke-dasharray: 2 6; }
.r-mid { fill: none; stroke: var(--border); stroke-width: 1; }
.r-area { fill: rgba(63, 109, 53, .09); }
.r-ring { fill: none; stroke: var(--leaf-600); stroke-width: 2; stroke-dasharray: 7 5; transform-origin: 160px 160px; animation: ac-spin-slow 60s linear infinite; }
@keyframes ac-spin-slow { to { transform: rotate(360deg); } }
.r-n { font: 700 11px var(--font-body); fill: var(--ink-3); }
.r-km { font: 700 11px var(--font-body); fill: var(--leaf-700); }
.r-city { font: 500 10.5px var(--font-body); fill: #a89c9a; }
.r-clinic circle:first-child { fill: var(--rose-600); }
.r-clinic circle:last-child { fill: #fff; }
.r-clinic-t { font: 700 11px var(--font-body); fill: var(--rose-700); }
.r-line { stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .75; }
.r-dot { animation: ac-pop .6s .15s cubic-bezier(.34, 1.56, .64, 1) both; }
.r-pulse { opacity: .3; transform-box: fill-box; transform-origin: center; animation: ac-pulse 2s ease-out infinite; }
.r-you { font: 700 12px var(--font-body); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
@keyframes ac-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ac-pulse { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(2.6); opacity: 0; } }
.av-radar-note { margin: 6px 0 0; font-size: .72rem; color: var(--ink-3); }

/* 候補リスト */
.ac-list { padding: clamp(16px, 3vw, 24px); border-radius: var(--r-md); background: #fff; border: 2px solid var(--rose-200); }
.ac-list-title { margin: 0 0 12px; font-weight: 700; outline: none; }
.ac-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ac-cand {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; text-align: left;
  min-height: 56px; padding: 10px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--rose-50);
  font: 500 .95rem/1.5 var(--font-body); color: var(--ink); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.ac-cand:hover { transform: translateY(-2px); border-color: var(--rose-400); box-shadow: var(--shadow-sm); }
.ac-cand-t { grid-column: 1; grid-row: 1; font-weight: 700; }
.ac-cand-d { grid-column: 1; grid-row: 2; font-size: .82rem; color: var(--ink-3); }
.ac-cand .ac-badge { grid-column: 2; grid-row: 1 / span 2; justify-self: end; padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--leaf-100); color: var(--leaf-700); white-space: nowrap; }
.ac-badge.is-near { background: #fff0cf; color: #8a5a00; }
.ac-badge.is-out { background: #ece7e5; color: #5c5552; }
.ac-badge.is-broad { background: var(--rose-100); color: var(--rose-700); }

/* メッセージ */
.av-msg { padding: 18px 22px; border-radius: var(--r-md); background: #fff; border: 2px solid var(--rose-200); }
.av-msg p { margin: 0; outline: none; }
.av-msg.is-wait { border-style: dashed; color: var(--ink-2); }
.av-msg.is-warn { background: #fff7e6; border-color: #f3dfb4; }
.av-msg.is-error { background: #fff4f4; border-color: #efc3c3; }
.av-msg .av-actions { margin-top: 14px; }

.acheck-note { margin: 22px auto 0; max-width: 760px; font-size: .78rem; line-height: 1.8; color: var(--ink-3); }
.acheck-note a { color: var(--ink-2); }

/* ヒーロー内の導線 */
.hero-check { display: inline-flex; align-items: center; gap: .5em; margin: 14px 0 0; padding: 8px 4px; font-weight: 700; font-size: .92rem; color: var(--leaf-700); text-decoration: none; border-bottom: 2px solid var(--leaf-100); min-height: 44px; }
.hero-check:hover { color: var(--leaf-600); border-bottom-color: var(--leaf-600); }
.hero-check svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .acheck-result.is-shown, .r-dot, .r-pulse, .r-ring { animation: none !important; }
  .acheck.is-loading .acheck-submit .btn::after { animation-duration: 2s; }
}
@media print { .acheck { display: none; } }