/* 日本地図(タイルマップ)から都道府県を選ぶ部品の共通スタイル
   本文幅(48rem)は変えない。PCでは、左に一覧・右に地図を並べ、狭い画面では地図を上、一覧を下に縦積みにする。 */

.pt-pref-picker {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    align-items: stretch;
}

.pt-pref-picker__list {
    min-width: 0;
}

.pt-pref-picker__map {
    min-width: 0;
}

@media (min-width: 48rem) {
    .pt-pref-picker {
        flex-direction: row;
        align-items: flex-start;
    }

    .pt-pref-picker__list {
        flex: 1 1 0;
    }

    .pt-pref-picker__map {
        flex: 0 0 22.5rem;
        position: sticky;
        top: 4.5rem;
    }
}

.pt-pref-map {
    padding: 0.7rem 0.7rem 0.6rem;
    border: 0.0625rem solid var(--pt-green-border);
    border-radius: 1rem;
    background: linear-gradient(160deg, #eef6ff 0%, var(--pt-green-bg) 100%);
}

.pt-pref-map__svg {
    display: block;
    width: 100%;
    max-width: 24rem;
    height: auto;
    margin: 0 auto;
}

.pt-pref-map__link {
    cursor: pointer;
    outline: none;
}

.pt-pref-map__tile {
    stroke: #fff;
    stroke-width: 0.125rem;
    transition: fill 0.15s ease;
}

.pt-pref-map__tile--r1 { fill: #bcd9f7; }
.pt-pref-map__tile--r2 { fill: #c8e6c9; }
.pt-pref-map__tile--r3 { fill: #fff0b3; }
.pt-pref-map__tile--r4 { fill: #f8cfd6; }
.pt-pref-map__tile--r5 { fill: #ddd0f0; }
.pt-pref-map__tile--r6 { fill: #ffd9b3; }
.pt-pref-map__tile--r7 { fill: #b9e6e0; }

.pt-pref-map__text {
    fill: #1f3a5a;
    font-size: 1.0625rem;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

.pt-pref-map__text--big {
    font-size: 1.5rem;
}

.pt-pref-map__link:hover .pt-pref-map__tile,
.pt-pref-map__link:focus-visible .pt-pref-map__tile,
.pt-pref-map__link.is-hover .pt-pref-map__tile {
    fill: var(--pt-blue);
}

.pt-pref-map__link:hover .pt-pref-map__text,
.pt-pref-map__link:focus-visible .pt-pref-map__text,
.pt-pref-map__link.is-hover .pt-pref-map__text {
    fill: #fff;
}

.pt-pref-map__link:focus-visible .pt-pref-map__tile {
    stroke: var(--pt-blue-light);
}

.pt-pref-map__caption {
    min-height: 1.4rem;
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pt-green-dark);
    text-align: center;
}

/* 地図の県をポイントしたとき、一覧側の同じ県のチップも強調する */
.pt-kenminsei-pref-chip.is-map-hover,
.pt-dialect-pref-chip.is-map-hover {
    background: var(--pt-blue);
    border-color: var(--pt-blue);
    color: #fff;
}