.cms-empty { padding: 18px; color: var(--muted, #616775); font-size: 14px; line-height: 1.7; }
[data-managed-news-article] { overflow-wrap: anywhere; }
.destination-card[hidden], .geo-spot[hidden], [data-managed-guide-spot][hidden] { display: none !important; }
[data-managed-photo-credits] { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }

/* Emphasize hotel names without changing their original size or spacing. */
#hotelGrid .hotel h3 { font-weight: 800; -webkit-text-stroke: .15px currentColor; }

/* Keep one section gap when company information directly follows membership. */
.members + .company { padding-top: 0; }

/* A 6:4 map/news row with up to twenty notices in a scrollable list. */
#areas .area-news { padding: 22px 24px; }
#areas .area-news .h2 { font-size: 22px; }
#areas .area-news__all { font-size: 13px; }
#areas .area-news .news-list time { font-size: 12px; }
#areas .area-news .news-list .cat { font-size: 11px; }
#areas .area-news .news-list b { font-size: 14px; line-height: 1.6; }
#areas .area-news .news-list {
  height: 320px;
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
#areas .area-news .news-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
#areas .area-news .news-list > li:nth-child(-n+20) {
  display: list-item;
  border-bottom: 1px solid var(--line);
}
#areas .area-news .news-list > li:nth-child(n+21) { display: none; }
#areas .area-news .news-list > li:is(:nth-child(20), :last-child) { border-bottom: 0; }
@media (min-width: 1180px) {
  #areas .area-overview { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; }
  #areas .area-overview > .geo-map { display: flex; flex-direction: column; }
  #areas .area-overview > .geo-map .geo-scene { flex: 1; aspect-ratio: auto; min-height: 280px; max-height: none; }
  #areas .area-overview > .geo-map .geo-map-note { flex: none; }
}
@media (max-width: 600px) {
  #areas .area-news { padding: 18px; }
  #areas .area-news .h2 { font-size: 20px; }
}

/* Image-only recommendations between the area overview and sightseeing. */
#areas #campaign { min-width: 0; margin: 0; padding: 0; border: 0; background: none; scroll-margin-top: 104px; }
.recommendation-banners .camp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; }
#areas #campaign .camp-card, .recommendation-banners .camp-grid .camp-card { display: block; min-width: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; }
#areas #campaign .camp-card:hover, .recommendation-banners .camp-grid .camp-card:hover { transform: translateY(-2px); box-shadow: none; }
.recommendation-banners .camp-grid .camp-card:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.recommendation-banners .camp-grid .camp-card img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 900px) {
  .recommendation-banners .camp-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 12px) / 2);
    gap: 12px;
    margin: -4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    scrollbar-width: none;
  }
  .recommendation-banners .camp-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .recommendation-banners .camp-grid .camp-card { scroll-snap-align: start; }
}

/* Small service banners fill the Pick up row, without repeated campaign cards. */
#pickup { scroll-margin-top: 104px; }
/* Keep a pale section break after removing the dark Why KINJO section. */
.home-without-reasons #hotels { padding-bottom: 64px; }
.home-without-reasons #pickup { padding: 48px 0; background: var(--sky); }
.home-without-reasons #pickup + .members { padding-top: 64px; }
.pickup-banners__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pickup-banner { display: block; min-width: 0; overflow: hidden; border-radius: 8px; background: #fff; transition: transform .2s; }
.pickup-banner img { display: block; width: 100%; height: auto; aspect-ratio: 270 / 100; object-fit: contain; }
.pickup-banner:hover { transform: translateY(-2px); }
.pickup-banner:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.recommendation-banners + .pickup-banners { margin-top: 24px; }
@media (max-width: 600px) {
  .home-without-reasons #hotels { padding-bottom: 40px; }
  .home-without-reasons #pickup { padding: 32px 0; }
  .home-without-reasons #pickup + .members { padding-top: 40px; }
  .pickup-banners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Imported features keep their original dates, copy and inline images. */
.recommendation-list__heading { margin: 44px 0 20px; color: var(--navy); font-size: 24px; }
.recommendation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.recommendation-list > li { min-width: 0; }
.recommendation-story { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 18px; height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.recommendation-story--text { grid-template-columns: minmax(0, 1fr); }
.recommendation-story > img { display: block; width: 128px; height: 96px; object-fit: contain; border-radius: 6px; }
.recommendation-story time { display: block; margin-bottom: 6px; color: var(--muted, #616775); font-size: 12px; }
.recommendation-story h3 { color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.recommendation-story p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--muted, #616775); }
.recommendation-story:hover { border-color: var(--coral); }
.recommendation-story:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.recommendation-detail .page-hero { padding: 28px 0 32px; scroll-margin-top: 84px; }
.recommendation-detail .page-hero .h1 { font-family: var(--font-body); font-size: clamp(22px, 2.5vw, 30px); font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.recommendation-detail .page-hero .crumbs { margin-bottom: 12px; }
.recommendation-detail > .pad { padding: 40px 0 56px; }
.recommendation-article { overflow-wrap: anywhere; }
.recommendation-article__body { line-height: 1.9; }
.recommendation-article__body img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.recommendation-article__body :is(h2, h3, h4, h5, h6) { margin: 28px 0 14px; color: var(--navy); font-size: 20px; line-height: 1.6; }
.recommendation-article__body :is(ul, ol) { margin: 0 0 20px; padding-left: 1.5em; }
.recommendation-article__body li { margin-bottom: 6px; }
.recommendation-article__body a { color: var(--lagoon-deep); text-decoration: underline; text-underline-offset: 3px; }
.recommendation-article__body figure { margin: 20px 0; }
.recommendation-article__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.recommendation-article__body :is(th, td) { padding: 10px; border: 1px solid var(--line); }
.recommendation-article__body hr { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }
.recommendation-article .back { margin-top: 32px; }
@media (max-width: 900px) {
  .recommendation-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .recommendation-list__heading { margin-top: 32px; font-size: 20px; }
  .recommendation-story { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .recommendation-story--text { grid-template-columns: minmax(0, 1fr); }
  .recommendation-story > img { width: 88px; height: 88px; }
  .recommendation-story h3 { font-size: 15px; }
}