.page-voice{width:100%;height:450dvh;position:relative}.page-voice .sticky-container{place-content:center;width:100%;height:100dvh;display:grid;position:sticky;top:0;left:0}@media screen and (max-width:768px){.page-voice .sticky-container{margin-top:-8rem;display:block}}.page-voice .title-layer{z-index:2;pointer-events:none;perspective:1000px;width:100%;height:100dvh;transform-style:preserve-3d;place-content:center;padding-bottom:6rem;display:grid;position:absolute;top:50%;left:0;transform:translateY(-50%)}@media screen and (min-width:769px){@media (max-aspect-ratio:2){.page-voice .title-layer{max-height:60vw}}@media (min-aspect-ratio:2){.page-voice .title-layer{min-height:50vw}}}@media screen and (max-width:768px){.page-voice .title-layer{place-content:normal;padding-top:8rem;display:block;top:0;transform:translateY(0)}}.page-voice .title-layer .title-card{pointer-events:auto;perspective:1000px;transform-style:preserve-3d;animation-duration:.8s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;position:relative}.page-voice .title-layer h3{background-color:var(--main);backface-visibility:hidden;border-radius:1.8rem;place-content:center;width:44rem;height:14.6rem;animation-duration:.8s;animation-timing-function:cubic-bezier(.47,.16,.3,1);animation-fill-mode:forwards;display:grid;position:absolute;top:-7.3rem;left:-22rem}@media screen and (max-width:768px){.page-voice .title-layer h3{border-radius:1rem;width:100%;height:8rem;top:0;left:0}}.page-voice .title-layer h3 span{color:#fff;text-align:center;font-size:2.4rem;font-weight:600;line-height:1.5}@media screen and (max-width:768px){.page-voice .title-layer h3 span{font-size:1.6rem}}.page-voice .title-layer h3:after{content:"Q.";font-family:var(--font-lato);color:var(--yellow);font-size:6.4rem;line-height:1.05;position:absolute;bottom:0;right:.8rem}@media screen and (max-width:768px){.page-voice .title-layer h3:after{font-size:4rem}}.page-voice .title-layer.inView01 .title-card{animation-name:title-zoom-01}.page-voice .title-layer.inView02 .title-card{animation-name:title-zoom-02}.page-voice .title-layer.inView03 .title-card{animation-name:title-zoom-03}.page-voice .title-layer.inView04 .title-card{animation-name:title-zoom-04}.page-voice .title-layer.inView01 h3:first-child{animation-name:title-inview}.page-voice .title-layer:not(.inView01) h3:first-child{animation-name:title-outview}.page-voice .title-layer.inView02 h3:nth-child(2){animation-name:title-inview}.page-voice .title-layer:not(.inView02) h3:nth-child(2){animation-name:title-outview}.page-voice .title-layer.inView03 h3:nth-child(3){animation-name:title-inview}.page-voice .title-layer:not(.inView03) h3:nth-child(3){animation-name:title-outview}.page-voice .title-layer.inView04 h3:nth-child(4){animation-name:title-inview}.page-voice .title-layer:not(.inView04) h3:nth-child(4){animation-name:title-outview}.page-voice .serif-layer{z-index:1;width:100%;height:100dvh;position:absolute;top:50%;left:0;transform:translateY(-50%)}@media screen and (min-width:769px){@media (max-aspect-ratio:2){.page-voice .serif-layer{max-height:60vw}}@media (min-aspect-ratio:2){.page-voice .serif-layer{min-height:50vw}}}@media screen and (max-width:768px){.page-voice .serif-layer{width:100vw;margin-inline:calc(50% - 50vw)}}.page-voice .serif-layer .serif-container{z-index:1;width:100%;height:calc(100% - 22rem);position:absolute;top:12rem;bottom:14rem}@media screen and (max-width:768px){.page-voice .serif-layer .serif-container{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1.5rem .6rem;height:fit-content;display:flex;top:19rem;bottom:auto;left:0}}.page-voice .serif-layer .serif-container li{width:fit-content;left:calc(var(--dl)/1100*100%);top:calc(var(--dt)/600*100%);--delay:80ms;opacity:0;animation-duration:1s;animation-timing-function:cubic-bezier(0,.3,.25,.98);animation-fill-mode:forwards;position:absolute}@media screen and (max-width:768px){.page-voice .serif-layer .serif-container li{align-self:flex-start;position:static}}.page-voice .serif-layer .serif-container li:first-child{animation-delay:calc(var(--delay)*0)}.page-voice .serif-layer .serif-container li:nth-child(2){animation-delay:calc(var(--delay)*1)}.page-voice .serif-layer .serif-container li:nth-child(3){animation-delay:calc(var(--delay)*2)}.page-voice .serif-layer .serif-container li:nth-child(4){animation-delay:calc(var(--delay)*3)}.page-voice .serif-layer .serif-container li:nth-child(5){animation-delay:calc(var(--delay)*4)}.page-voice .serif-layer .serif-container li:nth-child(6){animation-delay:calc(var(--delay)*5)}.page-voice .serif-layer .serif-container li:nth-child(7){animation-delay:calc(var(--delay)*6)}.page-voice .serif-layer .serif-container li div{width:fit-content;height:fit-content;position:relative;transform:translate(-50%,-50%)}@media screen and (max-width:768px){.page-voice .serif-layer .serif-container li div{transform:translate(0)}}.page-voice .serif-layer .serif-container li div p{z-index:1;border:.2rem solid var(--main);text-align:center;white-space:nowrap;font-feature-settings:"palt";letter-spacing:.1em;background-color:#fff;border-radius:2rem;padding:2.5rem;font-weight:500;line-height:1.45;position:relative}@media screen and (max-width:768px){.page-voice .serif-layer .serif-container li div p{border:.1rem solid var(--main);border-radius:1rem;padding:1.5rem 1rem}}.page-voice .serif-layer .serif-container li div p span{color:var(--main)}.page-voice .serif-layer .serif-container li div p.fz22{font-size:2.2rem}@media screen and (max-width:768px){.page-voice .serif-layer .serif-container li div p.fz22{font-size:1.3rem}}.page-voice .serif-layer .serif-container li div p.fz16{font-size:1.6rem}@media screen and (max-width:768px){.page-voice .serif-layer .serif-container li div p.fz16{font-size:1.1rem}}.page-voice .serif-layer .serif-container li div:before,.page-voice .serif-layer .serif-container li div:after{content:"";clip-path:polygon(0 0,100% 0,50% 100%);width:1.6rem;height:1.4rem;display:block;position:absolute;top:calc(100% - .3rem);left:50%}@media screen and (max-width:768px){.page-voice .serif-layer .serif-container li div:before,.page-voice .serif-layer .serif-container li div:after{width:1.2rem;height:1rem}}.page-voice .serif-layer .serif-container li div:before{background-color:var(--main);z-index:0;transform-origin:50%;transform:translate(-50%)scale(1.42)}.page-voice .serif-layer .serif-container li div:after{z-index:2;background-color:#fff;transform:translate(-50%)}.page-voice .serif-layer .serif-bg{z-index:0;width:100%;height:calc(100% - 22rem);position:absolute;top:12rem;bottom:14rem}@media screen and (max-width:768px){.page-voice .serif-layer .serif-bg{height:100dvh;top:20dvh;bottom:20dvh}}.page-voice .serif-layer .serif-bg li img{width:calc(var(--iw)*.1rem);max-width:none;transform:translate(-50%,-50%)}@media screen and (max-width:768px){.page-voice .serif-layer .serif-bg li img{width:calc(var(--iw)*.1rem*.5)}}.page-voice .serif-layer .serif-bg li{width:fit-content;left:calc(var(--dl)/1100*100%);top:calc(var(--dt)/600*100%);--delay:50ms;opacity:0;animation-duration:1s;animation-timing-function:cubic-bezier(0,.3,.25,.98);animation-fill-mode:forwards;position:absolute}.page-voice .serif-layer .serif-bg li:first-child{animation-delay:calc(var(--delay)*0)}.page-voice .serif-layer .serif-bg li:nth-child(2){animation-delay:calc(var(--delay)*1)}.page-voice .serif-layer .serif-bg li:nth-child(3){animation-delay:calc(var(--delay)*2)}.page-voice .serif-layer .serif-bg li:nth-child(4){animation-delay:calc(var(--delay)*3)}.page-voice .serif-layer .serif-bg li:nth-child(5){animation-delay:calc(var(--delay)*4)}.page-voice .serif-layer .serif-bg li:nth-child(6){animation-delay:calc(var(--delay)*5)}.page-voice .serif-layer .serif-bg li:nth-child(7){animation-delay:calc(var(--delay)*6)}.page-voice .serif-layer .serif-bg li:nth-child(8){animation-delay:calc(var(--delay)*7)}.page-voice .serif-layer .serif-bg li:nth-child(9){animation-delay:calc(var(--delay)*8)}.page-voice .serif-layer .serif-bg li:nth-child(10){animation-delay:calc(var(--delay)*9)}.page-voice .serif-layer.inView01 .serif-container:first-child li,.page-voice .serif-layer.inView02 .serif-container:nth-child(2) li,.page-voice .serif-layer.inView03 .serif-container:nth-child(3) li,.page-voice .serif-layer.inView04 .serif-container:nth-child(4) li,.page-voice .serif-layer.inView01 .serif-bg:nth-child(5) li,.page-voice .serif-layer.inView02 .serif-bg:nth-child(6) li,.page-voice .serif-layer.inView03 .serif-bg:nth-child(7) li,.page-voice .serif-layer.inView04 .serif-bg:nth-child(8) li{animation-name:serif-up}.page-voice .image-layer{z-index:1;width:100%;height:100dvh;transition:all .2s;position:absolute;top:0;left:0}.page-voice .image-layer div{width:fit-content;left:calc(var(--dl)/1100*100%);bottom:calc(var(--db)/600*100%);position:absolute}@media screen and (max-width:768px){.page-voice .image-layer div:first-child{left:-6rem}.page-voice .image-layer div:nth-child(2){left:6rem}.page-voice .image-layer div:nth-child(3){left:auto;right:-6rem}.page-voice .image-layer div:nth-child(4){left:auto;right:6.5rem}}.page-voice .image-layer div img{width:calc(var(--iw)*.1rem);max-width:none}@media screen and (max-width:768px){.page-voice .image-layer div img{width:calc(var(--iw)*.1rem*.5)}}.page-voice .image-layer.leave{opacity:0;transform:translateY(2rem)}@keyframes serif-up{0%{opacity:0}20%,to{opacity:1}0%{transform:translateY(3rem)}to{transform:translateY(0)}}@keyframes title-inview{0%{transform:rotateX(-180deg)}to{transform:rotateX(0)}0%,40%{box-shadow:0 0 0 var(--yellow)}to{box-shadow:1rem 1rem 0 var(--yellow)}}@keyframes title-outview{0%{transform:rotateX(0)}to{transform:rotateX(180deg)}0%{box-shadow:1rem 1rem 0 var(--yellow)}60%,to{box-shadow:0 0 0 var(--yellow)}}@keyframes title-zoom-01{50%{transform:translateZ(100px)}0%,to{transform:translate(0,0)}}@keyframes title-zoom-02{50%{transform:translateZ(100px)}0%,to{transform:translate(0,0)}}@keyframes title-zoom-03{50%{transform:translateZ(100px)}0%,to{transform:translate(0,0)}}@keyframes title-zoom-04{50%{transform:translateZ(100px)}0%,to{transform:translate(0,0)}}
