/*
    TOUR


*/



/*  COMMON  */
article { transition: opacity 1s ease, transform 1s ease; }
article.lazy { opacity: 0; transform: translateY(2rem); }




/*  TITLE   */
article.title { padding: 1rem 0 0 0; }




/*  STEP   */
article.step { display: flex; justify-content: center; align-items: center; margin: 3rem 0 0 var(--left); width: max-content; }
article.step::before { content: ''; position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 1px; background-color: var(--color-divide); }
article.step div { display: flex; justify-content: center; align-items: center; margin: 0 2rem 0 0; width: 2rem; height: 2rem; font-size: 0.8rem; font-variation-settings: 'wght' 400; color: var(--color-gray); box-sizing: border-box; background-color: var(--color-divide); white-space: nowrap; overflow: hidden; transition: all 0.5s ease; }
article.step div:last-of-type { margin: 0; }
article.step div.selected { padding: 0 1rem; width: max-content; font-variation-settings: 'wght' 700; color: rgba(255, 255, 255, 1); background: var(--color-btn); }



/*  INNER  */
article.inner { position: relative; margin: 3rem auto 0 ; width: 100%; height: 50vh; overflow: hidden; }
article.inner section { position: absolute; display: flex; left: 0; top: 0; width: 400%; height: 100%; transition: transform 0.5s ease; }
article.inner section div { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; padding: 0 var(--left); width: 100%; height: 100%; }
article.inner section div h3 { font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); }
article.inner section div input { margin: 3rem auto 3rem; padding: 0 0.25rem; width: 100%; height: 3rem; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); text-align: left; border-bottom: 1px solid var(--color-gray); transition: background-color 0.5s ease, border-color 0.5s ease; }
article.inner section div input:focus { background-color: rgba(245, 245, 245, 1); border-color: var(--color-black); }
article.inner section div button { margin: 0 0.5rem 0 0; width: 30%; height: 3rem; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); border: 1px solid var(--color-black); }
article.inner section div button.done { width: 50%; font-variation-settings: 'wght' 700; color: rgba(255, 255, 255, 1); background: var(--color-btn); border: 1px solid transparent; }



/*  POPUP   */
div.popup-done { position: fixed; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 1); background: no-repeat 50% 24% / 30vw 30vw rgba(255, 255, 255, 1) url('/assets/img/checkin_bg_checked.svg'); opacity: 0; transform: scale(0.8); transition: transform 0.5s ease, opacity 0.5s ease; z-index: -1; }
div.popup-done.show { transform: scale(1); opacity: 1; z-index: 500; }
div.popup-done > * { width: 100%; text-align: center; }
div.popup-done h1 { font-size: 1.5rem; font-variation-settings: 'wght' 900; color: var(--color-black); }
div.popup-done h2 { margin: 1.5rem auto 4rem; font-size: 1rem; font-variation-settings: 'wght' 600; color: var(--color-black); }
div.popup-done h1 b { color: rgba(0, 0, 0, 1); }
div.popup-done a { display: flex; justify-content: center; align-items: center; width: 50%; height: 3rem; font-size: 1rem; font-variation-settings: 'wght' 700; color: var(--color-black); border: 1px solid var(--color-black); }






/*  PC VERSION  */
@media (min-width: 800px) {
    article.inner section { width: 400%; }

    div.popup-done { background: no-repeat 50% 24% / 15rem 15rem rgba(255, 255, 255, 1) url('/assets/img/checkin_bg_checked.svg'); }
    div.popup-done a { width: 30rem; transition: color 0.5s ease, background-color 0.5s ease; }
    div.popup-done a:hover { color: rgba(255, 255, 255, 1); background-color: var(--color-black); }
}