/* Approved guide 10. Shared ice surface joins the neighborhood strip and FAQ. */
#ys-guide-10 { margin: 0; padding: 0 0 64px; background: #f1f8fc; color: #10283f; font-family: 'G04 Roboto', Arial, sans-serif; }
#ys-guide-10 *, #ys-guide-10 *::before, #ys-guide-10 *::after { box-sizing: border-box; }
#ys-guide-10 .g10-wrap { width: min(1360px, calc(100% - 64px)); margin-inline: auto; }
#ys-guide-10 .g10-header { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; gap: 52px; margin: 0 0 28px; }
#ys-guide-10 h2 { margin: 0; padding: 0; color: #0b213c; font: 700 clamp(48px, 5.5vw, 84px)/1.04 'G04 Teko', 'Arial Narrow', sans-serif; }
#ys-guide-10 .g10-dot { color: #28c2e8; }
#ys-guide-10 .g10-intro { margin: 0; padding: 8px 0 8px 32px; border-left: 1px solid #28c2e8; color: #10283f; font-size: 22px; line-height: 1.5; }
#ys-guide-10 .g10-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 22px 18px; }
#ys-guide-10 .g10-card { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 7px; border: 1px solid #0b213c; border-radius: 6px; background: linear-gradient(155deg, #f9fdff, #edf7fc); }
#ys-guide-10 h3 { margin: 3px 8px 10px; padding: 0; color: #0b213c; font: 700 clamp(27px, 2.2vw, 34px)/1.16 'G04 Teko', 'Arial Narrow', sans-serif; overflow-wrap: break-word; }
#ys-guide-10 .g10-photo { display: block; flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 2.08; object-fit: cover; object-position: center; background: #d9e8ef; }
#ys-guide-10 .g10-points { display: grid; align-content: start; gap: 18px; flex: 1 0 auto; min-width: 0; margin: 0; padding: 16px 10px 20px; }
#ys-guide-10 .g10-point { min-width: 0; margin: 0; padding: 0 0 0 12px; border-left: 3px solid #28c2e8; }
#ys-guide-10 dt { margin: 0 0 4px; padding: 0; color: #0b213c; font: 700 21px/1.15 'G04 Teko', 'Arial Narrow', sans-serif; }
#ys-guide-10 dd { margin: 0; padding: 0; color: #29445d; font-size: 17px; line-height: 1.5; overflow-wrap: break-word; }
#ys-guide-10 .g10-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; margin-top: auto; padding: 9px 16px; border-radius: 4px; background: #0b213c; color: #fff; font: 700 22px/1.2 'G04 Teko', 'Arial Narrow', sans-serif; text-align: center; text-decoration: none; }
#ys-guide-10 .g10-link svg { display: block; flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#ys-guide-10 .g10-link:hover { background: #143959; color: #fff; }
#ys-guide-10 a:focus-visible { outline: 3px solid #087d9b; outline-offset: 4px; }
@media (max-width: 1199px) {
  #ys-guide-10 .g10-header { gap: 36px; }
  #ys-guide-10 .g10-intro { padding-left: 24px; font-size: 20px; }
  #ys-guide-10 .g10-grid { gap: 20px 16px; }
  #ys-guide-10 h3 { margin-inline: 6px; font-size: 29px; }
  #ys-guide-10 .g10-points { padding-inline: 6px; }
  #ys-guide-10 dd { font-size: 16px; }
}
@media (max-width: 1099px) {
  #ys-guide-10 .g10-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ys-guide-10 h3 { font-size: 33px; }
  #ys-guide-10 dd { font-size: 17px; }
}
@media (max-width: 899px) {
  #ys-guide-10 .g10-header { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #ys-guide-10 h2 { font-size: clamp(48px, 7.5vw, 66px); }
  #ys-guide-10 .g10-intro { max-width: 600px; padding: 0 0 0 18px; font-size: 18px; }
  #ys-guide-10 h3 { font-size: 30px; }
}
@media (max-width: 699px) {
  #ys-guide-10 { padding-bottom: 40px; }
  #ys-guide-10 .g10-wrap { width: calc(100% - 32px); }
  #ys-guide-10 .g10-header { margin-bottom: 24px; }
  #ys-guide-10 .g10-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #ys-guide-10 h3 { margin: 5px 8px 12px; font-size: 34px; }
  #ys-guide-10 .g10-points { gap: 18px; padding: 18px 10px 20px; }
  #ys-guide-10 dt { font-size: 23px; }
  #ys-guide-10 dd { font-size: 17px; line-height: 1.6; }
  #ys-guide-10 .g10-link { min-height: 48px; font-size: 24px; }
}
@media (max-width: 359px) {
  #ys-guide-10 h2 { font-size: 44px; }
  #ys-guide-10 h3 { font-size: 30px; }
  #ys-guide-10 .g10-points { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #ys-guide-10 a { transition: none; }
}