/* KOジャパン 地域店舗一覧 リニューアル（PC） Figma 161:29 準拠 */

body.area-renewal-body {
    min-width: 0;
}

body.area-renewal-body .wrapper {
    overflow: visible;
    width: 100%;
    max-width: none;
}

body.area-renewal-body .shell {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.area-renewal-body .main {
    width: 100% !important;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}

body.area-renewal-body #footer {
    background: #1c1c1c;
    color: #999;
    border-top: 1px solid #333;
    box-shadow: none;
    margin-top: 0;
    position: relative;
    z-index: 5;
    width: 100%;
}

body.area-renewal-body #footer .shell {
    width: 100%;
    max-width: none;
}

body.area-renewal-body #footer p.copy {
    color: #5a5248;
}

body.area-renewal-body .maptop_btn {
    display: none;
}

body.area-renewal-body .topicPath,
body.area-renewal-body .list .narrow_col {
    display: none;
}

.area-renewal {
    color: #3d2e1f;
    margin: 0;
    width: 100%;
}

/* --- タイトル（右寄せ・loginと被らない位置） --- */
.area-renewal__intro {
    box-sizing: border-box;
    left: 50%;
    position: absolute;
    right: 3.47%;
    text-align: right;
    top: 4.69%;
    z-index: 2;
}

.area-renewal__title {
    color: #2a2018;
    font-size: 3.52cqh;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin: 0 0 0.39cqh;
}

.area-renewal__prefs {
    color: #4a3d30;
    font-size: 2.08cqh;
    line-height: 1.45;
    margin: 0;
}

/* --- アイコン凡例 --- */
.area-renewal__legend-title {
    left: 6.46%;
    margin: 0;
    position: absolute;
    top: 16.21%;
    width: 16.88%;
    z-index: 3;
}

.area-renewal__legend-title img {
    display: block;
    height: auto;
    width: 100%;
}

.area-renewal__legend {
    align-items: center;
    background: url("../img/area_renewal/legend-bar-bg.png") no-repeat center;
    background-size: 100% 100%;
    box-sizing: border-box;
    display: flex;
    left: 7.43%;
    min-height: 9.77cqh;
    padding: 0 0.97% 0 3.68%;
    position: absolute;
    top: 19.63%;
    width: 86.94%;
    z-index: 2;
}

.area-renewal__legend-items {
    align-items: center;
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    gap: 0 0.69cqh;
    min-height: 0;
    overflow: hidden;
}

.area-renewal__legend-item {
    align-items: center;
    color: #3d2e1f;
    display: flex;
    flex-shrink: 0;
    font-size: 1.27cqh;
    font-weight: 700;
    gap: 0.35cqh;
    line-height: 1.35;
    white-space: nowrap;
}

.area-renewal__legend-item img {
    flex-shrink: 0;
    height: 2.34cqh;
    width: auto;
}

/* --- Filter（グリッド右上） --- */
.area-renewal__toolbar {
    left: 84.17%;
    padding: 0;
    position: absolute;
    top: 31.84%;
    z-index: 4;
}

.area-renewal__filter-btn {
    align-items: center;
    background: #ebe6d7;
    border: 1px solid rgba(61, 46, 31, 0.12);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(42, 32, 24, 0.08);
    box-sizing: border-box;
    color: #1c1c1c;
    cursor: pointer;
    display: inline-flex;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.85cqh;
    font-weight: 600;
    gap: 0.7cqh;
    height: 5.27cqh;
    justify-content: center;
    letter-spacing: 0.04em;
    line-height: 1;
    min-width: 9.5cqh;
    padding: 0 1.6cqh 0 1.9cqh;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.area-renewal__filter-btn:hover {
    background: #f3efe4;
    box-shadow: 0 2px 6px rgba(42, 32, 24, 0.12);
    color: #1c1c1c;
    opacity: 1;
    text-decoration: none;
}

.area-renewal__filter-label {
    display: inline-block;
}

.area-renewal__filter-chevron {
    border-left: 0.45cqh solid transparent;
    border-right: 0.45cqh solid transparent;
    border-top: 0.55cqh solid #1c1c1c;
    display: block;
    height: 0;
    margin-top: 0.15cqh;
    width: 0;
}

/* --- 店舗グリッド（6列×2行） --- */
.area-renewal__shops {
    box-sizing: border-box;
    column-gap: 2.22%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    left: 8.47%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    row-gap: 3.6%;
    top: 39.45%;
    width: 82.64%;
    z-index: 1;
}

.area-renewal__shop-card {
    aspect-ratio: 171 / 250;
    margin: 0;
    min-width: 0;
}

.area-renewal__shop-link {
    background-color: #e8dcc8;
    background-image:
        radial-gradient(ellipse 130% 70% at 50% 0%, rgba(100, 75, 50, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 130% 70% at 50% 100%, rgba(100, 75, 50, 0.18) 0%, transparent 58%),
        linear-gradient(180deg, #d8c8ae 0%, #efe4d2 16%, #f6efe3 48%, #efe4d2 84%, #d0bea0 100%);
    border-radius: 5px;
    box-sizing: border-box;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.2s;
}

.area-renewal__shop-link:hover {
    opacity: 0.88;
}

.area-renewal__shop-photo {
    aspect-ratio: 171 / 105;
    background: rgba(210, 195, 175, 0.45);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.area-renewal__shop-photo img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.area-renewal__shop-photo--placeholder {
    background: rgba(200, 185, 165, 0.55);
}

.area-renewal__shop-photo--placeholder::after {
    align-items: center;
    color: #6a5a48;
    content: "しばらくお待ちください";
    display: flex;
    font-size: 0.88cqh;
    inset: 0;
    justify-content: center;
    line-height: 1.4;
    padding: 0.39cqh;
    position: absolute;
    text-align: center;
}

.area-renewal__shop-status {
    bottom: 0.59cqh;
    left: 0.59cqh;
    line-height: 0;
    position: absolute;
}

.area-renewal__shop-status--open img {
    display: block;
    height: 1.37cqh;
    width: auto;
}

.area-renewal__shop-status--close {
    background: #5a5248;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-size: 0.98cqh;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.3;
    padding: 0.1cqh 0.78cqh 0.2cqh;
}

.area-renewal__shop-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 0.49cqh 0.39cqh 0.39cqh;
}

.area-renewal__shop-name {
    color: #2a2018;
    font-size: 1.56cqh;
    font-weight: bold;
    line-height: 1.35;
    margin: 0 0 0.29cqh;
    text-align: center;
}

.area-renewal__shop-address {
    color: #5a4a38;
    flex: 1;
    font-size: 1.17cqh;
    line-height: 1.4;
    margin: 0 0 0.59cqh;
    text-align: center;
}

.area-renewal__shop-icons {
    align-items: center;
    border-top: 1px solid rgba(61, 46, 31, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 0.29cqh;
    justify-content: flex-start;
    min-height: 1.95cqh;
    padding-top: 0.2cqh;
}

.area-renewal__shop-icons img {
    height: 2.15cqh;
    object-fit: contain;
    width: 2.15cqh;
}

/* --- ページング（下部のみ） --- */
.area-renewal__pagination {
    left: 7.4%;
    position: absolute;
    right: 7.4%;
    z-index: 3;
}

.area-renewal__pagination--bottom {
    top: 94.5%;
}

body.area-renewal-body .area-renewal__pagination .page_nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.49cqh;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.area-renewal-body .area-renewal__pagination .page_nav li a,
body.area-renewal-body .area-renewal__pagination .page_nav li b {
    background: rgba(255, 252, 245, 0.75);
    border: 1px solid rgba(61, 46, 31, 0.18);
    border-radius: 3px;
    color: #3d2e1f;
    display: inline-block;
    font-size: 1.07cqh;
    min-width: 2.54cqh;
    padding: 0.29cqh 0.68cqh;
    text-align: center;
    text-decoration: none;
}

body.area-renewal-body .area-renewal__pagination .page_nav li b.current {
    background: #3d2e1f;
    border-color: #3d2e1f;
    color: #fff;
}

.area-renewal__empty {
    color: #4a3d30;
    font-size: 1.37cqh;
    left: 7.4%;
    position: absolute;
    right: 7.4%;
    text-align: center;
    top: 45%;
}

body.area-renewal-body .modaal-inner-wrapper .modaal-container {
    border-radius: 8px;
}

@supports not (height: 1cqh) {
    .area-renewal__title { font-size: 2.5vw; }
    .area-renewal__prefs { font-size: 1.48vw; }
    .area-renewal__legend { min-height: 6.94vw; }
    .area-renewal__legend-item { font-size: 0.9vw; }
    .area-renewal__legend-item img { height: 1.67vw; }
    .area-renewal__filter-btn {
        font-size: 1.3vw;
        gap: 0.5vw;
        height: 3.75vw;
        min-width: 6.8vw;
        padding: 0 1.1vw 0 1.35vw;
    }
    .area-renewal__filter-chevron {
        border-left-width: 0.32vw;
        border-right-width: 0.32vw;
        border-top-width: 0.4vw;
        margin-top: 0.1vw;
    }
    .area-renewal__shop-name { font-size: 1.11vw; }
    .area-renewal__shop-address { font-size: 0.83vw; }
    .area-renewal__shop-icons img { height: 1.53vw; width: 1.53vw; }
}

@media (max-width: 1200px) {
    .area-renewal__legend-items {
        flex-wrap: wrap;
        row-gap: 0.39cqh;
    }

    .area-renewal__shops {
        grid-template-columns: repeat(4, 1fr);
        top: 42%;
    }

    .area-renewal__intro {
        left: 46%;
    }
}

@media (max-width: 900px) {
    .pc-renewal__header--stage,
    .area-renewal__intro,
    .area-renewal__legend-title,
    .area-renewal__legend,
    .area-renewal__toolbar,
    .area-renewal__shops,
    .area-renewal__pagination {
        height: auto;
        left: auto;
        position: relative;
        right: auto;
        top: auto;
        width: auto;
    }

    .area-renewal__legend-title {
        margin: 12px 4% 4px;
        max-width: 240px;
        width: auto;
    }

    .area-renewal__legend {
        margin: 0 4% 12px;
        min-height: 0;
        padding: 12px;
    }

    .area-renewal__toolbar {
        padding: 8px 4%;
        text-align: right;
    }

    .area-renewal__shops {
        gap: 16px;
        grid-template-columns: repeat(2, 1fr);
        padding: 0 4%;
    }

    .area-renewal__pagination--bottom {
        padding: 16px 4% 0;
    }
}