.test1-wrap { position:relative; max-width: 100%; margin-top: 50px; margin-bottom: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .boxx { position: sticky; top: 20px; /* width: 80vh; */ /* max-width: 100%; */ transition: all 0.3s ease-out; } #point-text { position: relative; width:100%; height: calc(50vh); font-size: 3vw; font-weight: 700; color: #000; } #point-text .txt_area { position: sticky; top: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 10vh 0 0 0; } #point-text .txt_area p { display:block; overflow: hidden; white-space: nowrap; margin:0; letter-spacing: -.2rem; } #point-text .txt_area p+p { margin-left: 0; } #point-text .txt_area p+p+p { } #point-text .txt_area .word01, #point-text .txt_area .word02 { opacity: 0; width: 0; } .intro-open { position: relative; width: 280px; height:70px; font-family: 'Sq_R'; font-size:1.5rem !important; color:#fff !important; background-color: #FF1B1B !important; box-shadow: 0 2px 1px rgba(0 0 0 / 35%); line-height:1; border-radius: 35px !important; z-index: 10; } .accordion:after { } .accordion.intro-open::after { content:"▼"; color: rgb(255 255 255 / 90%); font-weight: bold; font-size: 10px !important; margin-left: 15px; line-height: 25px; } .accordion.active.intro-open::after { content:"▲"; } .explosive-text { font-size: 3rem; color: #fff; /* letter-spacing: 0.1em; */ display: inline-block; position: relative; transition: transform 0.3s ease-out; } .explosive-text:hover { transform: scale(1.1); } .explosive-text:hover::before, .explosive-text:hover::after { content: ''; position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: burst 0.8s ease-out forwards; } .explosive-text:hover::before { background: radial-gradient(circle, rgba(255, 0, 21, 0.6), transparent); z-index: -1; } .explosive-text:hover::after { background: radial-gradient(circle, rgba(255, 0, 0, 0.6), transparent); z-index: -2; } /* highlight */ .txt_area p span { background-position:left; background-size: 0% 100%; background-image: linear-gradient(yellow, yellow); transition: all 500ms ease-in-out; background-repeat: no-repeat; } .txt_area p span:hover { background-size: 100% 100% } @media screen and (min-width: 1401px) { #point-text { min-height:33vh; max-height:calc(50vh); margin-bottom: 3rem; } .intro-open { margin-bottom:5rem !important; } } @media screen and (min-width:769px) and (max-width:1400px) { #point-text { font-size:3rem; } .intro-open { margin-bottom:3rem !important; } } @media screen and (max-width: 768px) { #point-text { height:40vh; margin-bottom:2rem; } #point-text .txt_area p { font-size:1.7rem; letter-spacing: -.1rem; } .intro-open { width: 250px; height:50px; font-size:1.2rem !important; line-height:1; margin-bottom:2rem !important; } }