.jc-archive-list--story .jc-content-card > a {
  display: block;
  height: 100%;
}

/* Keep the contact textarea aligned with the other form fields. */
html body .frame main.jc-mobile-detail--contact .c_s3 .textareaDiv {
  margin-bottom: 18px !important;
}

html body .frame main.jc-mobile-detail--contact .c_s3 .textareaDiv textarea,
html body .frame main.jc-mobile-detail--contact .c_s3 textarea[name="contactarea"] {
  margin: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #3f3035 !important;
}

html body .frame main.jc-mobile-detail--contact .c_s3 .jc-consent-row {
  margin-top: 8px !important;
}

@media screen and (min-width: 900px) {
  html body .frame main.jc-mobile-detail--contact .c_s3 .textareaDiv textarea,
  html body .frame main.jc-mobile-detail--contact .c_s3 textarea[name="contactarea"] {
    border: 1px solid #d3d3d3 !important;
  }

  html body .frame main.jc-mobile-detail--contact .c_s3 > .ctr {
    width: min(500px, calc(100% - 40px)) !important;
    max-width: 500px !important;
    margin: 14px auto 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(240, 191, 197, .72) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(110, 91, 97, .12) !important;
    overflow: hidden !important;
  }

  html body .frame main.jc-mobile-detail--contact .c_s3 .jc-contact-guidance {
    box-sizing: border-box !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
  }
}

html body .frame main.jc-detail-template-page > article > .single .jc-detail-meta {
  padding-top: 6px !important;
}

@media screen and (min-width: 900px) {
  html body .frame main article .jc-pc-menu a[aria-current="page"] {
    transform: translateY(-1px) !important;
    filter: drop-shadow(0 5px 8px rgba(110, 91, 97, .13)) saturate(1.06) !important;
  }

  html body .frame main article .jc-pc-menu a[aria-current="page"]::before {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }

  html body .frame main article .jc-pc-menu a[aria-current="page"] img {
    transform: translateY(-1px) !important;
  }
}

/* Center archive titles while keeping the inner text clamped to two lines. */
html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list:not(.jc-archive-list--wallpaper) .ttl,
html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list--wallpaper .jc-wallpaper-card .ttl {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
}

html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .ttl > .jc-list-title-text {
  display: -webkit-box !important;
  max-width: 100% !important;
  max-height: calc(1.5em * 2) !important;
  margin: 0 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.jc-archive-list--story .jc-content-card .thmb {
  aspect-ratio: 3 / 2;
}

.jc-archive-list--video .jc-video-thumb {
  aspect-ratio: 3 / 4 !important;
}

.jc-archive-list [data-jc-video-overlap] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

.jc-archive-list [data-jc-video-overlap] .jc-video-thumb-matte {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
}

.jc-archive-list [data-jc-video-overlap] .jc-video-thumb-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .7s ease;
}

.jc-archive-list [data-jc-video-overlap] .jc-video-thumb-layer.is-visible {
  opacity: 1;
}

.jc-detail-back-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 24px auto 0;
  padding: 16px;
  box-sizing: border-box;
  border: 0;
  border-radius: 16px;
  background: transparent;
}

.jc-detail-back-panel .story_back_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 0 28px 0 22px;
  box-sizing: border-box;
  border: 2px solid #f0bfc5;
  border-radius: 999px;
  background: #fff;
  color: #b5404b;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(110, 91, 97, .1);
}

.jc-detail-back-panel .story_back_btn img {
  display: none;
}

.jc-back-arrow {
  position: relative;
  display: inline-flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #d6515d;
}

.jc-back-arrow::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translateX(2px) rotate(45deg);
}

@media screen and (min-width: 900px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article {
    display: flex !important;
    flex-direction: column !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .jc-pc-menu,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .single {
    flex: 0 0 auto !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .jc-detail-back-panel {
    margin-top: auto !important;
  }

}

html body.jc-route-mobile-inner .jc-archive-list--wallpaper .jc-wallpaper-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

html body.jc-route-mobile-inner .jc-archive-list--wallpaper .jc-wallpaper-card .ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 8px 8px 0;
  text-align: center;
}

html body.jc-route-mobile-inner .jc-archive-list--wallpaper .jc-wallpaper-view-link {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0 8px 8px;
  padding: 0 34px 0 14px;
  border: 2px solid #5c8fc6;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(61, 104, 146, .16);
  color: #4f83ba;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

html body.jc-route-mobile-inner .jc-archive-list--wallpaper .jc-wallpaper-view-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #5c8fc6;
  border-right: 2px solid #5c8fc6;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width: 900px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article {
    position: relative !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next {
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    z-index: 5;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 176px !important;
    max-width: 176px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 176px !important;
    min-width: 176px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 10px 42px 10px 18px !important;
    box-sizing: border-box !important;
    border: 2px solid #d8e6f2 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #5f4a50 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 5px 12px rgba(110, 91, 97, .12) !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #5c8fc6;
    transform: translateY(-50%);
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a::before {
    content: "";
    position: absolute;
    top: calc(50% - 7px);
    right: 19px;
    z-index: 1;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    transform-origin: 7px 7px;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev {
    padding: 10px 18px 10px 42px !important;
    border-color: #f0bfc5 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev::after {
    right: auto;
    left: 10px;
    background: #d6515d;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev::before {
    right: auto;
    left: 19px;
    border-color: #fff;
    transform: rotate(-135deg);
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-detail-back-panel {
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
    background: transparent !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-detail-back-panel .story_back_btn {
    width: 300px !important;
    min-height: 60px !important;
    margin: 0 !important;
    border: 3px solid #fff !important;
    color: #b5404b !important;
    font-size: 17px !important;
    box-shadow: 0 0 0 2px #d6515d, 0 5px 12px rgba(184, 77, 88, .16) !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .single .jc-article-header {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #f0ccd2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .single .jc-detail-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .single .jc-article-header h1 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #5f4a50 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .single .jc-article-body {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .single .jc-article-body .thumbnails {
    display: block !important;
    width: auto !important;
    max-width: 300px !important;
    height: auto !important;
    max-height: none !important;
    margin: 16px auto 20px !important;
    object-fit: contain !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-news-template-page > .jc-desktop-side {
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-news-template-page > .jc-desktop-side .jc-menu-bottom-panel {
    flex: 0 0 245px !important;
    height: 245px !important;
    min-height: 245px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page > article > .jc-archive-list {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    color: #6e5b61;
    box-sizing: border-box;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page > article > .cmenu {
    margin: 0 0 14px;
    padding: 10px;
    background: #ecf0f2;
  }

  html body.jc-route-mobile-inner .jc-archive-list > h1 {
    margin: 0 0 14px;
    text-align: center;
  }

  html body.jc-route-mobile-inner .jc-archive-list > h1 img {
    display: block;
    width: min(100%, 286px);
    height: auto;
    margin: 0 auto;
  }

  html body.jc-route-mobile-inner .jc-archive-list > h1 span {
    display: block;
    color: #6e5b61;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
  }

  html body.jc-route-mobile-inner .jc-archive-list > .ctr {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.jc-route-mobile-inner .jc-archive-list .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start;
  }

  html body.jc-route-mobile-inner .jc-archive-list .jc-content-card {
    position: relative;
    display: block;
    float: none;
    width: 100% !important;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 0 0 10px;
    box-sizing: border-box;
    border: 3px solid #fff;
    border-radius: 0;
    background: #ecf0f2;
    color: #6e5b61;
    overflow: hidden;
  }

  html body.jc-route-mobile-inner .jc-archive-list .jc-content-card > a {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  html body.jc-route-mobile-inner .jc-archive-list .thmb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
  }

  html body.jc-route-mobile-inner .jc-archive-list .cate,
  html body.jc-route-mobile-inner .jc-archive-list .jc-video-platform {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 22px;
    min-height: 22px;
    max-width: calc(100% - 16px);
    margin: 9px 4px 5px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 100px;
    background: #d05159;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  html body.jc-route-mobile-inner .jc-archive-list .cate {
    justify-content: center;
    text-align: center;
  }

  html body.jc-route-mobile-inner .jc-archive-list .jc-video-platform {
    background: #587db1;
  }

  html body.jc-route-mobile-inner .jc-archive-list .time,
  html body.jc-route-mobile-inner .jc-archive-list .jc-video-date {
    display: inline-block;
    margin: 9px 4px 5px 0;
    color: #6e5b61;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
  }

  html body.jc-route-mobile-inner .jc-archive-list .time {
    float: right;
  }

  html body.jc-route-mobile-inner .jc-archive-list .ttl {
    display: -webkit-box;
    clear: both;
    width: 100%;
    min-height: 36px;
    max-height: calc(1.5em * 2);
    margin: 0;
    padding: 0 5px;
    box-sizing: border-box;
    color: #6e5b61;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-line-clamp: 2;
  }

  html body.jc-route-mobile-inner .jc-archive-list--story .thmb {
    aspect-ratio: 3 / 2;
  }

  html body.jc-route-mobile-inner .jc-archive-list--diary .thmb {
    aspect-ratio: 4 / 5;
  }

  html body.jc-route-mobile-inner .jc-archive-list--video .jc-video-thumb {
    aspect-ratio: 3 / 4;
  }

  html body.jc-route-mobile-inner .jc-archive-list--wallpaper .row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  html body.jc-route-mobile-inner .jc-archive-list--wallpaper .jc-content-card {
    padding: 0;
    border: 0;
    background: transparent;
  }

  html body.jc-route-mobile-inner .jc-archive-list--wallpaper .jc-wallpaper-card {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  html body.jc-route-mobile-inner .jc-archive-list--wallpaper .jc-wallpaper-card img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    background: #fff;
  }

  html body.jc-route-mobile-inner .jc-archive-list--wallpaper .jc-wallpaper-card .ttl {
    display: -webkit-box;
    min-height: 36px;
    margin: 8px 0 0;
    padding: 0;
    font-size: 11px;
    text-align: center;
    -webkit-box-pack: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page {
    display: block !important;
    width: min(calc(100% - 72px), 1320px) !important;
    max-width: 1320px !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page > article {
    width: calc(100% - 380px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page > .t_hero,
  html body.jc-route-mobile-inner .frame main.jc-archive-template-page > .jc-desktop-side {
    width: 340px !important;
    max-width: 340px !important;
    min-width: 340px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list > .ctr {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    list-style: none !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen li {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen li:has(.jc-page-next):only-child {
    margin-left: auto !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen li:has(.jc-page-prev):only-child {
    margin-right: auto !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 148px !important;
    min-height: 44px !important;
    padding: 0 42px !important;
    box-sizing: border-box;
    border: 2px solid currentColor !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(110, 91, 97, .08);
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-prev {
    padding-right: 24px !important;
    padding-left: 48px !important;
    border-color: #f0bfc5 !important;
    color: #b5404b !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-next {
    padding-right: 48px !important;
    padding-left: 24px !important;
    border-color: #a8c8e7 !important;
    color: #4f83ba !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #5c8fc6;
    transform: translateY(-50%);
    transition: background-color .18s ease;
    pointer-events: none;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-arrow::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateX(-2px) rotate(45deg);
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-prev .jc-page-arrow {
    right: auto;
    left: 10px;
    background: #d6515d;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-prev .jc-page-arrow::after {
    border-top: 0;
    border-right: 0;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: translateX(2px) rotate(45deg);
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-btn:hover,
  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-btn:focus-visible {
    box-shadow: 0 6px 16px rgba(110, 91, 97, .14);
    transform: translateY(-1px);
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-btn:hover {
    outline: none !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-prev:focus-visible {
    outline: 3px solid #d15259 !important;
    outline-offset: 3px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-next:focus-visible {
    outline: 3px solid #5c8fc6 !important;
    outline-offset: 3px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-prev:hover,
  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-prev:focus-visible {
    border-color: #efaab2 !important;
    background: #d6515d !important;
    color: #fff !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-next:hover,
  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-next:focus-visible {
    border-color: #a8c8e7 !important;
    background: #5c8fc6 !important;
    color: #fff !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-next:hover .jc-page-arrow,
  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-next:focus-visible .jc-page-arrow {
    background: #6d9dcc;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-prev:hover .jc-page-arrow,
  html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list .pagen .jc-page-prev:focus-visible .jc-page-arrow {
    background: #e16772;
  }
}

/* Detail-page links keep their footprint while exposing a clear hover state. */
html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .wallpaper_download_btn,
html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-detail-back-panel .story_back_btn,
html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .wallpaper_download_btn:hover,
html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .wallpaper_download_btn:focus-visible {
  border-color: #a8c8e7 !important;
  background: #5c8fc6 !important;
  color: #fff !important;
  outline: none;
}

html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-detail-back-panel .story_back_btn:hover,
html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-detail-back-panel .story_back_btn:focus-visible {
  border-color: #efaab2 !important;
  background: #d6515d !important;
  color: #fff !important;
  outline: none;
}

@media screen and (min-width: 900px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next:hover,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next:focus-visible {
    border-color: #a8c8e7 !important;
    outline: none;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next:hover::after,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next:focus-visible::after {
    background: #6d9dcc !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev:hover,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev:focus-visible {
    border-color: #efaab2 !important;
    outline: none;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev:hover::after,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev:focus-visible::after {
    background: #e16772 !important;
  }
}

@media screen and (max-width: 899px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next:hover,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next:focus-visible {
    background: #f4f8fa !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev:hover,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev:focus-visible {
    background: #edf5fb !important;
    color: var(--jc-sub-blue) !important;
  }
}

/* Keep inner pages on the maximum desktop composition until mobile begins. */
@media screen and (min-width: 900px) {
  html,
  body.jc-route-mobile-inner {
    min-width: 1360px !important;
    overflow-x: auto !important;
  }

  html body.jc-route-mobile-inner .frame {
    min-width: 1360px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-archive-template-page,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page {
    width: 1320px !important;
    min-width: 1320px !important;
    max-width: 1320px !important;
  }
}

/* Keep the arrow and circle in one centered control on desktop. */
@media screen and (min-width: 900px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a::before,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a::after {
    content: none !important;
    display: none !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a .jc-page-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #5c8fc6;
    transform: translateY(-50%);
    transition: background-color .18s ease;
    pointer-events: none;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a .jc-page-arrow::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 0;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateX(-2px) rotate(45deg);
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev .jc-page-arrow {
    right: auto;
    left: 10px;
    background: #d6515d;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev .jc-page-arrow::after {
    border-top: 0;
    border-right: 0;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: translateX(2px) rotate(45deg);
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next:hover .jc-page-arrow,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next:focus-visible .jc-page-arrow {
    background: #6d9dcc;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev:hover .jc-page-arrow,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev:focus-visible .jc-page-arrow {
    background: #e16772;
  }
}

@media screen and (max-width: 899px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > .jc-mobile-archive-heading,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > .t_hero {
    display: none !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    width: min(176px, calc(100% - 32px)) !important;
    max-width: 176px !important;
    margin: 18px 0 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 10px 42px 10px 18px !important;
    box-sizing: border-box !important;
    border: 2px solid #d8e6f2 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #5f4a50 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 5px 12px rgba(110, 91, 97, .12) !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next {
    order: 1 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev {
    order: 2 !important;
    padding: 10px 18px 10px 42px !important;
    border-color: #f0bfc5 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a .jc-page-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #5c8fc6;
    transform: translateY(-50%);
    transition: background-color .18s ease;
    pointer-events: none;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a .jc-page-arrow::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 0;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateX(-2px) rotate(45deg);
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev .jc-page-arrow {
    right: auto;
    left: 10px;
    background: #d6515d;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev .jc-page-arrow::after {
    border-top: 0;
    border-right: 0;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: translateX(2px) rotate(45deg);
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-detail-back-panel {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-detail-back-panel .story_back_btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-wallpaper-asset {
    background: transparent !important;
  }
}

/* Restore the centered article surface on desktop detail pages. */
@media screen and (min-width: 900px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article {
    padding-bottom: 26px !important;
    border-radius: 10px !important;
    background-color: rgba(255, 250, 248, .96) !important;
    background-image: url('../images/top_haikei3.png') !important;
    background-repeat: repeat-y !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    overflow: hidden !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .single {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .single .jc-article-surface {
    width: min(500px, calc(100% - 40px)) !important;
    max-width: 500px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 0 24px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(240, 191, 197, .72) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(110, 91, 97, .12) !important;
    overflow: hidden !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .single .jc-article-header,
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .single .jc-article-body > :not(img):not(p:has(> img)),
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .single .jc-related-content {
    width: auto !important;
    max-width: calc(100% - 44px) !important;
    margin-right: 22px !important;
    margin-left: 22px !important;
    box-sizing: border-box !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .single .jc-article-header {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .single .jc-detail-meta {
    padding-top: 16px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc-detail-back-panel {
    width: min(500px, calc(100% - 40px)) !important;
    margin: 24px auto 0 !important;
    padding-bottom: 0 !important;
  }
}

@media screen and (min-width: 900px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article > .single.jc-news-single .jc-article-body .thumbnails {
    width: 100% !important;
    max-width: 500px !important;
    margin: 16px auto 20px !important;
  }
}

/* Remove the gray title area from news and story archive cards. */
html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list--news .jc-content-card,
html body.jc-route-mobile-inner .frame main.jc-archive-template-page .jc-archive-list--story .jc-content-card {
  background: #fff !important;
}

/* Keep the PC next/previous controls in fixed top and bottom slots. */
@media screen and (min-width: 900px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, 58px) !important;
    gap: 12px !important;
    height: 128px !important;
    min-height: 128px !important;
    align-content: start !important;
    justify-content: stretch !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a {
    height: 58px !important;
    min-height: 58px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next {
    grid-row: 1 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev {
    grid-row: 2 !important;
  }
}

/* Task 821: mobile detail pages place previous/next links on one row. */
@media screen and (max-width: 899px) {
  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 14px !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 22px 0 16px !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_prev {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    padding: 10px 14px 10px 40px !important;
  }

  html body.jc-route-mobile-inner .frame main.jc-detail-template-page > article .jc_prev_next a.jc_next {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    padding: 10px 40px 10px 14px !important;
  }
}