/*
  ARIEL TOP CONTENTS MENU
  Match finalized /casts reference design.

  Scope:
  - TOP page CONTENTS MENU only
  - no shared-page modification
  - no HTML structure modification
*/

/* ariel-top-contents-match-casts-202607 START */

html body .main-story.ariel-center-v1 .ariel-base-standard-bg-only-202607 > section.center-contents-menu-section#contents-menu {
  margin: 34px 0 calc(62px + env(safe-area-inset-bottom)) !important;
}


html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-grid {
  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-grid > *,
html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-grid > *:last-child {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card,
html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card.is-accent-pink,
html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card.is-accent-blue,
html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card.is-accent-gold {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 10px 8px !important;
  border:
    1px solid rgba(2, 175, 206, .42)
    !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .99) 0%,
      rgba(247, 253, 255, .98) 62%,
      rgba(240, 250, 254, .96) 100%
    )
    !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 3px 8px rgba(2, 175, 206, .07),
    inset 0 1px 0 rgba(255, 255, 255, .96)
    !important;
  text-decoration: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 3px !important;
  z-index: 1 !important;
  border:
    1px solid rgba(2, 175, 206, .28)
    !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card::after {
  display: none !important;
  content: none !important;
}

html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card em,
html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card span {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin: 0 0 2px !important;
  color: #e67dad !important;
  -webkit-text-fill-color: #e67dad !important;
  font-family:
    "waverly-cf",
    "Times New Roman",
    Georgia,
    serif
    !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-align: center !important;
}

html body
.main-story.ariel-center-v1.ariel-top-main-202607
#contents-menu
.center-contents-menu-card strong {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin: 0 !important;
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  font-family:
    "Noto Sans JP",
    "Zen Kaku Gothic New",
    "Hiragino Sans",
    "Yu Gothic",
    Meiryo,
    sans-serif
    !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  letter-spacing: .01em !important;
  font-weight: 400 !important;
  text-align: center !important;
}

@media screen and (max-width: 640px) {
  html body
  .main-story.ariel-center-v1.ariel-top-main-202607
  #contents-menu
  .center-contents-menu-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body
  .main-story.ariel-center-v1.ariel-top-main-202607
  #contents-menu
  .center-contents-menu-card,
  html body
  .main-story.ariel-center-v1.ariel-top-main-202607
  #contents-menu
  .center-contents-menu-card.is-accent-pink,
  html body
  .main-story.ariel-center-v1.ariel-top-main-202607
  #contents-menu
  .center-contents-menu-card.is-accent-blue,
  html body
  .main-story.ariel-center-v1.ariel-top-main-202607
  #contents-menu
  .center-contents-menu-card.is-accent-gold {
    min-height: 86px !important;
    padding: 9px 6px !important;
    border-radius: 12px !important;
  }

  html body
  .main-story.ariel-center-v1.ariel-top-main-202607
  #contents-menu
  .center-contents-menu-card em,
  html body
  .main-story.ariel-center-v1.ariel-top-main-202607
  #contents-menu
  .center-contents-menu-card span {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }

  html body
  .main-story.ariel-center-v1.ariel-top-main-202607
  #contents-menu
  .center-contents-menu-card strong {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}

/* ariel-top-contents-match-casts-202607 END */

/* ariel-top-contents-exact-box-202607 START */
html body .main-story.ariel-center-v1.ariel-top-main-202607 .ariel-base-standard-bg-only-202607 > section.center-contents-menu-section#contents-menu {
    position: relative !important;
    width: 100% !important;
    padding: 34px 10px 58px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background-color: #fff !important;
    background-image: linear-gradient(45deg, rgba(245, 252, 254, .82) 25%, transparent 25%, transparent 75%, rgba(245, 252, 254, .82) 75%, rgba(245, 252, 254, .82)), linear-gradient(45deg, rgba(245, 252, 254, .82) 25%, transparent 25%, transparent 75%, rgba(245, 252, 254, .82) 75%, rgba(245, 252, 254, .82)) !important;
    background-size: 44px 44px, 44px 44px !important;
    background-position: 0 0, 22px 22px !important;
    background-repeat: repeat !important;
    margin: 34px 0 calc(62px + env(safe-area-inset-bottom)) !important;
}
/* ariel-top-contents-exact-box-202607 END */