/* Area features follow the legacy PC and smartphone layouts. */
.area-feature #main{min-width:0;color:#333}
.area-feature #main>.section-title{margin-top:0}
.area-feature .section-title{font-size:14px;height:32px;line-height:32px;padding:0 10px;margin:0;border-radius:4px 4px 0 0;background:linear-gradient(#009cff,#00a9ec);color:#fff}
.area-heading{height:175px;border:10px solid #a4c6f7;background:#fff url('/area-feature-map.jpg') center/100% 100% no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:5px;font-weight:bold;text-shadow:2px 2px #fff}
.area-heading>span{font-size:30px;line-height:1;margin-bottom:8px;color:#003b7e}
.area-heading>strong{font-size:64px;line-height:1;color:#e60012}
.area-tabs{display:flex;gap:6px;padding:0 3px;border-bottom:1px solid #999}
.area-tabs button{flex:1;min-width:0;min-height:37px;padding:3px 5px 0;border:1px solid #888;border-bottom:0;border-radius:3px 3px 0 0;background:linear-gradient(#f7f7f7,#bdbdbd);font-size:14px;font-weight:bold;line-height:32px;color:#777;text-shadow:1px 1px #fff}
.area-tabs button[aria-selected=true]{border-top:3px solid #0066d5;padding-top:0;background:linear-gradient(#eee,#fff);color:#333;position:relative;bottom:-1px}
.area-tabs button:focus-visible{outline:3px solid #eea81f;outline-offset:-3px}
.area-tabs i{color:#0072db;margin-right:5px}
.area-tabs button>span{margin-left:2px}
.area-panel{margin-bottom:10px}
.area-ranking{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.area-ranking>a{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:15px 10px;background:linear-gradient(#fff,#ebebeb);border-right:1px solid #ddd;border-bottom:1px solid #bbb;color:#333;font-size:12px;line-height:1.4;min-width:0}
.area-ranking img{width:80px;height:80px;object-fit:cover;margin-bottom:4px}
.area-ranking strong{font-weight:bold;overflow-wrap:anywhere}
.area-ranking small{color:#168129;font-size:12px;margin-top:2px}
.area-rank{position:absolute;top:10px;left:10px;width:32px;height:32px;line-height:32px;border-radius:50%;font-size:16px;font-weight:normal;color:#fff;background:linear-gradient(135deg,#aaa,#666)}
.area-rank-1{background:linear-gradient(135deg,#b6b16a,#a17a22)}
.area-rank-2{background:linear-gradient(135deg,#bbb,#666)}
.area-rank-3{background:linear-gradient(135deg,#d69b7e,#9d4c32)}
.area-events{margin:10px 0}
.area-advertisements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 0;margin:10px 0}
.area-advertisements a{display:block;min-width:0;text-align:center}
.area-advertisements img{display:block;width:calc(100% - 10px);max-width:210px;height:auto;aspect-ratio:7/2;margin:0 auto}
.area-event-title{height:36px;line-height:33px;font-size:14px;text-align:center;margin:0 3px;border:1px solid #888;border-top:3px solid #0068dc;border-bottom:0;border-radius:3px 3px 0 0;background:linear-gradient(#ececec,#fff)}
.area-events ul{list-style:none;padding:0;margin:0;border:1px solid #888;border-top:0;background:#fff}
.area-events li{border-bottom:1px solid #aaa}
.area-events li:last-child{border-bottom:0}
.area-events li.is-pickup{background:#ffffd7}
.area-events a{display:block;padding:10px;font-size:12px;color:#00499d}
.area-events small{font-size:12px;color:#138227;margin-right:10px}
.area-events strong{color:#333;font-size:12px}
.area-events p{margin-top:8px;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-events .area-badge{color:#e00000;background:none;font-size:14px;padding:0;margin-right:5px}
.area-tab-badge{display:inline-block;color:#fff;font-size:10px;line-height:1;vertical-align:middle;margin-right:5px;text-shadow:none}
.area-tab-open{background:#009d19;border-radius:2px;padding:7px 5px}
.area-tab-register{background:#d50016;border-radius:50%;padding:10px 5px}
.area-store{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) 12px;column-gap:15px;padding:15px 10px;margin:10px 0 20px;border:1px solid white;border-radius:10px;box-shadow:0 0 5px #aaa;background:linear-gradient(#fff,#eee);font-size:12px;line-height:1.3}
.area-store.is-pickup{background:linear-gradient(#ffffe9,#ffffd4)}
.area-store.is-new{background:linear-gradient(#fff0f5,#ffe7ef)}
.area-store-photo{grid-column:1;grid-row:1}
.area-store-photo img{width:150px;height:150px;object-fit:cover}
.area-store-info{grid-column:2;grid-row:1;min-width:0}
.area-store-name{margin:10px 0;font-size:16px;font-weight:bold;line-height:1.1;color:#000;overflow-wrap:anywhere}
.area-store-link{color:#000!important}
.area-store-link::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.area-store-link:focus-visible::after{outline:3px solid #eaa321}
.area-badge{display:inline-block;padding:2px 3px;margin-right:4px;font-size:12px;line-height:1;color:#fff;background:#069926;vertical-align:2px;white-space:nowrap}
.area-new{background:#d60020}.area-pickup,.area-open{background:#009e22}
.area-open-date{width:190px;max-width:100%;border-radius:15px;background:#00a019;color:white;font-size:12px;font-weight:bold;text-align:center;line-height:20px;margin-bottom:6px}
.area-open-date+.area-store-name{margin-top:0}
.area-store-location{font-size:11px;color:#168129;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.area-activities{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;margin-bottom:3px}
.area-store-rank{font-size:14px;font-weight:bold;color:#000;margin-bottom:4px}
.area-store-rank i{color:#ae963d;margin-right:4px}
.area-rating{display:flex;align-items:center;gap:5px;line-height:20px;margin:0 0 5px}
.area-rating>b,.area-price b{display:inline-block;flex-shrink:0;background:#333;color:white;border-radius:2px;font-size:10px;line-height:1;padding:3px 5px}
.area-rating>b{min-width:62px;text-align:center}
.area-rating>strong{color:#d3001c;font-size:18px}
.area-rating .stars{color:#f39923;font-size:17px}
.area-review-count{position:relative;z-index:2;font-size:12px;color:#000!important;white-space:nowrap}
.area-review-count i{color:#009aff;font-size:16px}
.area-prices{display:flex;gap:10px;font-weight:bold;color:#000;margin-bottom:5px}
.area-price{display:flex;gap:5px;align-items:flex-start;font-size:12px}
.area-price-group:empty{display:none}
.area-student-price{display:inline-block}
.area-store-summary{font-size:14px;font-weight:bold;line-height:1.3;margin-top:10px;padding:8px;border:2px solid #ccc;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-store-arrow{grid-column:3;grid-row:1;align-self:center;color:#666;font-size:18px}
.area-store-extra{position:relative;z-index:2;grid-column:1/-1;display:flex;align-items:center;gap:10px;padding-top:5px;color:#ce0000!important;font-weight:bold;min-width:0}
.area-store-extra b{background:linear-gradient(#ff7676,#e00000);color:#fff;font-size:10px;line-height:22px;padding:0 6px;white-space:nowrap;clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%)}
.area-store-extra>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.area-store-event b{background:linear-gradient(#64b4f2,#0067c3)}
.area-more{display:block;margin:10px 0 20px;padding:12px;border:1px solid #aaa;background:linear-gradient(#fff,#ddd);border-radius:4px;text-align:center;color:#333;font-size:16px;font-weight:bold}
.area-more small{display:block;font-size:12px;font-weight:normal;margin-top:5px}
.area-more[aria-disabled=true]{opacity:.6;pointer-events:none}
.area-empty{padding:25px 10px;text-align:center;background:#fff}
.area-status{font-size:12px;color:#b00000}
.area-feature .feature-grid{padding:15px 10px;background:#fff}
.area-prefectures{display:flex;gap:0;flex-wrap:wrap;border:1px solid #999;padding:10px;margin:10px 0;font-size:12px;background:#fff}
.area-prefectures a{color:#00499d;border-right:1px solid #ccc;padding:0 5px;line-height:1.6}
.area-mobile-pickups{display:none}
.area-feature [hidden]{display:none!important}
@media(max-width:767px){
 .area-advertisements{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 0}
 .area-advertisements img{width:95%;max-width:none}
 .area-feature #main{background:#eee}
 .area-feature .section-title{border-radius:0;height:29px;line-height:29px;font-size:14px;margin:0}
 .area-heading{height:100px;border-width:5px;margin-bottom:5px}
 .area-heading>span{font-size:20px;line-height:20px;margin-bottom:5px}
 .area-heading>strong{font-size:64px;line-height:1}
 .area-tabs{gap:6px;padding:0 3px}
 .area-tabs button{font-size:14px;min-height:37px;line-height:32px;padding-left:1px;padding-right:1px}
 .area-tabs button>span{display:none}
 .area-ranking>a{padding:10px 5px;font-size:12px;min-height:160px}
 .area-ranking img{width:80px;height:80px;margin-bottom:4px}
 .area-ranking small{font-size:12px}
 .area-rank{top:5px;left:5px}
 .area-events{padding:0 10px;margin:10px 0}
 .area-events a{padding:10px;font-size:12px}
 .area-store{grid-template-columns:100px minmax(0,1fr) 12px;gap:0 10px;padding:10px 5px;margin:0 0 10px;border:0;border-top:1px solid #fff;border-bottom:1px solid #fff;border-radius:0;box-shadow:0 3px 2px #bbb;min-height:150px;font-size:10px}
 .area-store-photo img{width:100px;height:100px}
 .area-store-name{font-size:12px;line-height:1.25;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .area-open-date{font-size:10px;line-height:16px;width:170px;margin-bottom:3px}
 .area-badge{font-size:10px;padding:1px 3px;vertical-align:1px;margin-right:3px}
 .area-store-location{font-size:9px;line-height:1.2;max-width:180px;margin-bottom:3px}
 .area-activities{font-size:10px;line-height:1.1;max-width:180px;margin-bottom:3px}
 .area-store-rank{font-size:12px;line-height:1.1;margin-bottom:3px}
 .area-rating{line-height:16px;gap:3px;margin-bottom:3px}
 .area-rating>b{min-width:30px;font-size:8px;padding:3px 5px}
 .area-rating>strong{font-size:12px}.area-rating .stars{font-size:12px}
 .area-review-count{font-size:9px}.area-review-count i{font-size:12px}
 .area-prices{display:grid;grid-template-columns:1fr 1fr;gap:3px;max-width:200px;margin-top:2px;margin-bottom:2px}
 .area-price-group:empty{display:block}
 .area-price{font-size:9px;line-height:1.2;gap:3px}
 .area-price b{font-size:8px;padding:3px 4px}
 .area-student-price{display:block}
 .area-store-summary{margin-top:5px;padding:3px 6px;font-size:11px;line-height:1.2;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:36px}
 .area-store-extra{font-size:11px;gap:5px;padding-top:5px}
 .area-store-extra b{font-size:9px;line-height:22px;padding:0 5px}
 .area-store-arrow{font-size:15px}
 .area-panel{margin-bottom:10px}
 .area-feature .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:15px 10px;box-shadow:0 3px 2px #bbb}
 .area-feature .feature-grid>a{min-width:0;font-size:11px}
 .area-prefectures{border:0;margin:10px 0;padding:10px 5px;box-shadow:0 3px 2px #bbb}
 .area-more{margin:10px;font-size:16px}
 .area-mobile-pickups{display:block;background:#fff}
}
@media(max-width:350px){.area-heading>strong{font-size:58px}.area-tabs button{font-size:12px}.area-store{column-gap:8px;grid-template-columns:100px minmax(0,1fr) 8px}.area-price{font-size:8px}}

.area-review-count .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:767px){.area-feature .mobile-front-banner{text-align:center}.area-prices{max-width:none;grid-template-columns:1fr 1fr}.area-price-group:nth-child(2){justify-self:end}.area-feature .feature-grid .feature-title{display:none}}

.area-more{background:#e1edfd;color:#0066cd;border:0;border-bottom:1px solid #aaa;border-radius:0}.area-feature .feature-grid{border:1px solid #999;border-top:0}@media(max-width:767px){.area-feature .feature-grid{border:0}.area-heading-long>strong{font-size:48px}}

/* Match the admin event rows and smartphone advertising dimensions. */
.area-events a{line-height:12px;color:#0066ff}
.area-events .area-event-upper{margin:0 0 10px;font-size:12px;line-height:12px}
.area-events .area-event-lower{margin:0;font-size:14px;line-height:14px}
.area-events .area-event-lower .area-badge{background:#24ae00;color:#fff;font-size:12px;line-height:12px;padding:2px 4px;margin:0 5px 0 0;vertical-align:0}
@media(max-width:767px){
 .area-feature .mobile-front-banner{padding:10px;text-align:center}
 .area-feature .mobile-front-banner a{display:block}
 .area-tabs[aria-label="ランキング"] i{font-size:20px;line-height:32px;position:relative;top:2px}
}

.area-events .area-event-lower{line-height:15px}.area-events .area-event-lower .area-badge{display:inline}.area-events li:last-child{border-bottom:1px solid #aaa}.area-events ul{border-bottom:0}

/* Store announcements and Itadaki membership share the area/prefecture card. */
.area-itadaki{display:block;position:relative;z-index:2;width:150px;margin-top:5px}
.area-store-photo .area-itadaki img{display:block;width:150px;height:90px;object-fit:contain}
.area-store-extra{min-height:40px;padding:5px 0;gap:0;border-bottom:1px dotted #aaa;color:#f00000!important;font-size:14px;line-height:1.3}
.area-store-extra b{display:flex;align-items:center;justify-content:center;flex:0 0 86px;width:86px;height:30px;line-height:1;padding:0 12px 0 3px;margin-right:0;background:linear-gradient(135deg,#f25b5b 55%,#f00000 55%);clip-path:polygon(0 0,100% 0,82% 50%,100% 100%,0 100%);font-size:11px}
.area-store-extra>span{min-width:0;flex:1}
.area-store-event{color:#123ce6!important}
.area-store-event b{background:linear-gradient(135deg,#557de0 55%,#173bda 55%)}
@media(max-width:767px){
 .area-itadaki{width:100px;margin-top:5px}
 .area-store-photo .area-itadaki img{width:100px;height:60px}
 .area-store-extra{min-height:27px;font-size:11px;line-height:1.2;padding:3px 0}
 .area-store-extra b{flex-basis:54px;width:54px;height:22px;font-size:9px;padding:0 8px 0 1px}
}

.area-mobile-footer-banners{display:none}
@media(max-width:767px){
 .area-feature .mobile-front-banner img{display:block;width:100%;max-width:100%;height:auto;margin:0}
 .area-mobile-footer-banners{display:block;padding:10px;background:#ddd}
 .area-mobile-footer-banners .landing-banner-pair{display:grid;gap:10px;justify-items:stretch}
 .area-mobile-footer-banners .landing-banner-pair a{display:block;width:100%;max-width:100%;line-height:0}
 .area-mobile-footer-banners .landing-banner-pair img{display:block;width:100%;height:auto}
}

@media(max-width:767px){.area-feature .common-sidebar{display:none}}