/* School visit reservation progress - desktop and mobile */
#nowpage {width:100%; max-width:100%; margin: 0 auto 26px;}
#nowpage .reservation-progress {display:flex; gap:4px; width:100%; margin:14px 0; padding:0;}
#nowpage .reservation-progress__item {position:relative; min-width:0; flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:12px 7px; background:#e9edf2; color:#586371; font-size:14px; font-weight:700; line-height:1.35; clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%,11px 50%);}
#nowpage .reservation-progress__item:first-child {clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%); padding-left:5px;}
#nowpage .reservation-progress__item:last-child {clip-path:polygon(0 0,100% 0,100% 100%,0 100%,11px 50%); padding-right:3px;}
#nowpage .reservation-progress__item.is-active {background:#087ab6; color:#fff;}
#nowpage .reservation-progress__num {display:inline-flex; align-items:center; justify-content:center; flex:none; width:19px; height:19px; border-radius:50%; background:#7d8894; color:#fff; font-size:12px;}
#nowpage .is-active .reservation-progress__num {background:#fff; color:#087ab6;}
#nowpage .reservation-progress__icon {font-size:17px; line-height:1;}
#nowpage .reservation-intro {background:#f7f7f8; padding:17px 20px; border-radius:6px; font-size:15px; line-height:1.9; color:#242424; text-align:left;}
@media (max-width: 700px) {
 #nowpage .reservation-progress {gap:2px; margin:12px 0;}
 #nowpage .reservation-progress__item {gap:2px; font-size:clamp(9px,2.3vw,12px); padding:10px 1px 10px 8px; white-space:nowrap; clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%,7px 50%);}
 #nowpage .reservation-progress__item:first-child {clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);}
 #nowpage .reservation-progress__item:last-child {clip-path:polygon(0 0,100% 0,100% 100%,0 100%,7px 50%);}
 #nowpage .reservation-progress__icon {font-size:12px;}
 #nowpage .reservation-progress__num {width:15px; height:15px; font-size:10px;}
 #nowpage .reservation-intro {padding:12px; font-size:13px; line-height:1.8;}
}
@media (max-width: 370px) {#nowpage .reservation-progress__icon {display:none;} #nowpage .reservation-progress__item {font-size:10px;}}