/**
 * 地域ページの検索パネルと、その絞り込みモーダル（T-134・T-136）。
 *
 * **Tailwind の任意値クラスは `npm run build` を通さないと効かない**（T-111・ハンドオフ 6-3）。
 * ビルド前の版で作ると、指示と画面が食い違ったまま気づけない
 * （実際、パネルの高さが 216px → 186.5px に縮んでいるのを実測で見つけた）。
 * だから**ここに素の CSS で置く。** クラス名は `ar-` で始める
 * （施設ページは `fp-`、ログインは `ap-`）。
 *
 * ## 数値の出どころ
 *
 * **器と間隔は原本（サウナイキタイの絞り込みモーダル）の CSS 規則そのまま。**
 * 何を置くか（地方の分け方・語・色）はモックと台帳（T-108・T-129 と同じ切り分け）。
 * 原本は `.p-modal` / `.p-filterModal` / `.c-formCheckbox` で、
 * 切り替えは 799px。**つなぎばは 1024px**（T-86）。
 * 青は `#0051E0` ではなくブランド青 `#469BFF`（T-71）。
 */

/* ------------------------------------------------------------------ *
 * 検索パネルの器
 * ------------------------------------------------------------------ */

/* 閉じているときは216px。チップが出たときだけ伸びる（T-134） */
@media (min-width: 1024px) {
    .ar-panel {
        min-height: 216px;
    }
}

/* いま絞り込んでいるもの（モックの「東京都 ×」）。
   入力欄の地（#EDEDED・T-74）と同じ色にして、パネルの一部だと分かるようにする。 */
.ar-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    background: #ededed;
    font-size: 11px;
    color: #4b5563;
}

.ar-chip:hover {
    background: #e3e3e3;
}

.ar-chip .ar-chip-x {
    color: #9ca3af;
}

/* ------------------------------------------------------------------ *
 * 絞り込みモーダル（原本 .p-modal）
 * ------------------------------------------------------------------ */

.ar-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1001;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.ar-modal.is-show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* 原本は rgba(0,0,0,.6)。スマホでは全画面になるので出さない */
.ar-modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.ar-modal_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    max-width: calc(100% - 48px);
    height: 80vh;
    padding-top: 50px;      /* 見出しのぶん。見出しは absolute */
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.ar-modal_header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #eee;
    z-index: 2;
}

.ar-modal_headline {
    display: block;
    width: calc(100% - 100px);
    margin: auto;
    font-size: 18px;
    font-weight: 700;
    line-height: 50px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-modal_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: #333;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 3;
}

.ar-modal_close:hover {
    opacity: 0.5;
}

/* 中身。下の固定ボタンに隠れないよう 60px 空ける（原本と同じ） */
.ar-modal_body {
    height: 100%;
    overflow-y: auto;
    padding: 20px 40px;
    box-sizing: border-box;
}

.ar-modal_body--hasSubmit {
    padding-bottom: 60px;
}

/* 1ブロック（地方 / 条件）。左に見出し15%、右に中身85%（原本 .p-filterModalItem） */
.ar-modalItem {
    display: flex;
    padding: 15px 0 20px;
    border-bottom: 1px solid #eee;
}

.ar-modalItem:first-of-type {
    padding-top: 0;
}

.ar-modalItem:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
}

.ar-modalItem_headline {
    flex-basis: 15%;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.ar-modalItem_body {
    flex-basis: 85%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;   /* 行の高さに引き伸ばさない */
    padding-left: 20px;
}

/* 選択肢。エリアは5列、条件は3列（原本 20% / 33.33%） */
.ar-modal--area .ar-modalItem_body > * {
    flex-basis: 20%;
    margin-top: 15px;
}

.ar-modal--area .ar-modalItem_body > :nth-child(-n + 5) {
    margin-top: 0;
}

.ar-modal--conditions .ar-modalItem_body > * {
    flex-basis: 33.3333%;
    margin-top: 15px;
}

.ar-modal--conditions .ar-modalItem_body > :nth-child(-n + 3) {
    margin-top: 0;
}

/* 地域は「条件」ではなく行き先なので、チェックではなくリンク（U-01〜U-05・T-136） */
.ar-modalLink {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding-right: 8px;
    font-size: 14px;
    color: #111;
    box-sizing: border-box;
}

.ar-modalLink:hover {
    color: #469bff;
    text-decoration: underline;
}

.ar-modalLink.is-current {
    color: #469bff;
    font-weight: 700;
}

/* チェックボックス（原本 .c-formCheckbox。箱は30px・枠3px・角丸8px） */
.ar-check {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 30px;
    font-size: 14px;
    color: #111;
    cursor: pointer;
    box-sizing: border-box;
    padding-right: 8px;
}

.ar-check input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0;
    background: #f7f7f7;
    border: 3px solid #eee;
    border-radius: 8px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}

.ar-check input[type='checkbox']:checked {
    background: #469bff;
    border-color: #469bff;
}

.ar-check input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 3px;
    width: 7px;
    height: 13px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* 下に固定するボタン（原本 .p-filterModal .c-button） */
.ar-modal_submit {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 51px;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: #469bff;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ar-modal_submit:hover {
    background: #2f8bff;
}

/* ------------------------------------------------------------------ *
 * スマホ（1024px 未満）。原本は 799px で全画面にする（T-86 で 1024px に読み替え）
 * ------------------------------------------------------------------ */

@media (max-width: 1023px) {
    .ar-modal_overlay {
        display: none;   /* 全画面なので暗幕が見えない */
    }

    .ar-modal_inner {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: 100%;
        border-radius: 0;
        padding-top: 50px;
    }

    .ar-modal_headline {
        font-size: 16px;
    }

    .ar-modal_body {
        padding: 0 20px;
    }

    .ar-modal_body--hasSubmit {
        padding-bottom: 71px;
    }

    .ar-modalItem {
        display: block;
        padding: 15px 0 25px;
    }

    .ar-modalItem_headline {
        margin-bottom: 10px;
    }

    .ar-modalItem_body {
        padding-left: 0;
    }

    /**
     * 2列（原本 flex-basis 50%）。
     *
     * **`:nth-child(n)` で受けるのは、上の PC の `:nth-child(-n+5)` に勝つため。**
     * `> *` だと詳細度が低く、3〜5個目だけ PC の「margin-top:0」が残り、
     * 秋田県と山形県が15pxずれる、という形で出た（実測で見つけた）。
     */
    .ar-modal--area .ar-modalItem_body > :nth-child(n),
    .ar-modal--conditions .ar-modalItem_body > :nth-child(n) {
        flex-basis: 50%;
        margin-top: 15px;
    }

    .ar-modal--area .ar-modalItem_body > :nth-child(-n + 2),
    .ar-modal--conditions .ar-modalItem_body > :nth-child(-n + 2) {
        margin-top: 0;
    }

    .ar-modal_submit {
        border-radius: 0;
    }
}

/* モーダルが開いているあいだ、後ろの一覧を動かさない */
.ar-locked {
    overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * T-245。スマホで「条件絞り込み」の「この条件で絞り込む」が、Safari の下のバーに隠れていた（カトウさん指摘・画面写真）。
 * 100vh は下のバーを畳んだときの高さなので、バーが出ているあいだは下の端がバーの裏に入る。
 * 見えている高さ（100dvh）にそろえる。dvh の無いブラウザは 100vh のまま。
 * safe-area の余白は viewport-fit=cover のときだけ効く（いまは指定していないので 0。指定すると横向きで端が切れるため入れない）。
 * ------------------------------------------------------------------ */
.ar-modal { height: 100dvh; }
@media (max-width: 1023px) {
    .ar-modal_submit {
        height: calc(51px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ar-modal_body--hasSubmit {
        padding-bottom: calc(71px + env(safe-area-inset-bottom));
    }
}

/* T-298。一覧の上の一言（ほかの都道府県の「オンラインなら全国から」を含める／外す） */
/* 背景は付けない。件数・並び順と同じ大きさの字だけで置く（2026-10-06 カトウさん） */
.ar-mixnote { margin: 12px 0 4px; font-size: 13px; line-height: 1.7; color: #4B5563; }
.ar-mixnote a { margin-left: 4px; color: #469BFF; text-decoration: underline; }
@media (min-width: 1024px) { .ar-mixnote { margin: -12px 0 20px; } }

/* T-337。「種類」「受け入れ学年」は、どれか1つに当てはまる場所。見出しの下に小さく添える */
.ar-modalItem_note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #888;
}