header{position:relative;width:100%}.project-wrapper{transform:scale(.8);transform-origin:center center;width:100%}.p-story{background-color:#e1edf2;margin:80px auto 0;padding:20px 0 80px}.p-story .banner{margin:0 auto;max-width:750px;width:90%}.p-story .banner img{height:auto;max-width:100%;width:100%}.project{margin:0 auto;max-width:1200px;position:relative;-webkit-transition:all 3s;transition:all 3s;width:100%}.project.end{filter:grayscale(100%) brightness(1)}.project .bc{overflow:hidden;width:100%}.project .wc{overflow:hidden;z-index:1}.project .bord,.project .wc{height:100%;left:0;position:absolute;top:0;width:100%}.project .bord{background-color:#000;display:none;z-index:999}.story{z-index:1}.option,.story{display:none;height:100%;left:0;position:absolute;top:0;width:100%}.option{background-color:rgba(0,144,129,.8);z-index:2}.option .inner{background-color:#fff;background-image:url(https://245449945.fs1.hubspotusercontent-na2.net/hubfs/245449945/raw_assets/public/katsura-theme/saiyou/project/images/book.png);background-position:right -25% bottom -40px;background-repeat:no-repeat;background-size:45%;border-radius:12px;left:50%;padding:8%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:80%;z-index:2}.option .inner h1{border:2px solid #009081;font-size:clamp(1.2rem,1.8vw,1.8rem);margin:0 auto;max-width:400px;padding:.8em 1em}.option .inner h1,.option .inner h2{color:#009081;line-height:140%;text-align:center;width:90%}.option .inner h2{font-size:clamp(1.6rem,2.4vw,2.4rem);margin:4% auto 0;text-decoration:underline}.option .inner p{color:#009081;font-size:clamp(1.4rem,1.8vw,1.8rem);line-height:160%;padding:1em 0;text-align:center}.option .inner .opt-photo{margin:0 auto 1em;max-width:400px;width:90%}.option .inner .inner-cl{background-color:#ccc;border-radius:40px;color:#fff;cursor:pointer;margin:0 auto;max-width:240px;padding:.5em 1em;text-align:center;width:90%}.project .profile{background-color:rgba(0,0,0,.6);color:#fff;font-size:clamp(1.4rem,2.4vw,2.4rem);left:0;line-height:160%;padding:1em;position:absolute;top:50%;transform:translateY(-50%);width:40%;z-index:1}.project .profile span{display:block;font-size:80%;margin-bottom:.3em}.project .profile:before{animation:load-bar 2s ease-in alternate forwards;background-color:#30a9ac;bottom:0;content:" ";display:block;height:3px;left:0;position:absolute;width:100%;z-index:1}@keyframes load-bar{0%{width:0}to{width:100%}}.project .photo{overflow:hidden;position:relative;z-index:2}.project .photo:before{top:0}.project .photo:after,.project .photo:before{background-color:#000;content:" ";display:block;height:5%;left:0;position:absolute;width:100%;z-index:1}.project .photo:after{bottom:0}.project .txt{background-color:transparent;color:#fff;font-size:clamp(1.6rem,2.8vw,2.8rem);height:100%;left:0;padding:8% 3em;position:absolute;top:0;transition:all .8s;width:100%;z-index:3}.project.opening .txt{animation:opening-bg 1s ease-in alternate forwards;color:#000;text-align:center}@keyframes opening-bg{0%{background-color:hsla(0,0%,100%,0)}to{background-color:#fff}}.project.ending .txt{animation:ending-bg 1s ease-in alternate forwards;color:#30a9ac}@keyframes ending-bg{0%{background-color:hsla(0,0%,100%,0)}to{background-color:#fff}}.project .txt.ce p{text-align:center}.project .txt p{font-size:clamp(1.4rem,2.5vw,2.5rem);font-weight:500;line-height:160%;margin-bottom:1.5em}.project .txt p i.name{display:inline-block;font-style:normal;padding-right:1em}.project .txt>p:has(.name){padding-left:3em;text-indent:-1.5em}.project.ending .txt p{margin-bottom:1.5em}.project .tips{color:#00c8cd;cursor:pointer;display:inline-block;font-style:normal;text-decoration:underline;text-indent:0}.project .tips.name{text-indent:-1.5em}.project .tips:hover{opacity:.7}.project .txt p.nomb{margin-bottom:0}.project .txt p.small{color:#999;font-size:clamp(1rem,1.4vw,1.4rem);line-height:140%}.project .txt p em{display:inline-block;font-style:normal;margin-left:2em;transition:margin-left 1.5s ease-out}.project .txt p.open em{margin-left:0}.project .txt a{background-color:#30a9ac;background-image:url(https://245449945.fs1.hubspotusercontent-na2.net/hubfs/245449945/raw_assets/public/katsura-theme/saiyou/images/arrow_w.png);background-position:right 15px center;background-repeat:no-repeat;background-size:3%;border:2px solid #30a9ac;border-radius:48px;color:#fff;display:block;font-size:clamp(1.4rem,2vw,2rem);margin:0 auto;max-width:480px;padding:1em;text-decoration:none;width:90%}.project .txt a:hover{background-color:#fff;background-image:url(https://245449945.fs1.hubspotusercontent-na2.net/hubfs/245449945/raw_assets/public/katsura-theme/saiyou/images/arrow_b.png);color:#30a9ac;opacity:1}.project .b-att{right:0;transform:translate(-12%)}.project .b-att,.project .bk-att{bottom:15%;line-height:0;margin:0;max-width:130px;padding:0;position:absolute;width:13%;z-index:1}.project .bk-att{left:0;transform:translate(12%)}.project .in-arrow,.project .ph-arrow,.project .st-arrow,.project .tx-arrow{background-color:#fff;border:1px solid #ddd;border-radius:8px;bottom:5%;cursor:pointer;max-width:64px;padding:1%;position:absolute;right:4%;text-align:center;width:20%;z-index:1}.project .st-arrow.back{background-color:transparent;border:1px solid #ddd;left:4%;right:auto;z-index:1}.project .st-arrow.back img{animation:none}p[class*=-arrow]:hover{filter:opacity(50%)}p[class*=-arrow] img{animation:cursor .6s ease-in infinite alternate forwards;display:block;height:auto;margin:0 auto;max-width:40px;position:relative;width:100%}@keyframes cursor{0%{transform:translate(-10%)}to{transform:translate(10%)}}.project .select{margin:0 auto;position:relative;width:100%}.project .select span{background-color:rgba(0,0,0,.6);border-radius:12px;bottom:0;display:block;margin-bottom:5%;max-width:100%;padding:.8em 4.5em;position:relative;right:0;text-align:left;width:100%}.project .select span:before{animation:arrow .6s ease-in infinite alternate forwards;background-image:url(https://245449945.fs1.hubspotusercontent-na2.net/hubfs/245449945/raw_assets/public/katsura-theme/saiyou/project/images/arrow.png);background-position:50%;background-repeat:no-repeat;background-size:contain;content:" ";display:block;height:20px;position:absolute;right:0;top:50%;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%);width:20px}@keyframes arrow{0%{right:2%}to{right:0}}.project .select span strong{color:#600;font-size:clamp(2rem,5vw,5rem);font-weight:700;letter-spacing:.1em;line-height:130%;transition:letter-spacing 2s ease-out}.project .select.open span strong{letter-spacing:.3em}.project .select span.select-a{border:2px solid #009081}.project .select span.select-b{border:2px solid #0083a9}.project .select span.select-c{background-color:rgba(255,0,0,.6);border:2px solid red;padding:1em;text-align:center}.project .select span.select-c.cl{background-color:rgba(0,145,149,.6);border:2px solid #009195}.project .select span.select-c.cl strong{color:#fff}.project .select span.select-a:hover,.project .select span.select-b:hover,.project .select span.select-c:hover,.project .select span:hover{border:2px solid #fff}.project .select span.select-a:after{color:#009081;content:"A"}.project .select span.select-a:after,.project .select span.select-b:after{display:block;font-size:clamp(2rem,5vw,5rem);font-weight:100;height:1em;left:.8em;line-height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:1em}.project .select span.select-b:after{color:#0083a9;content:"B"}.project .bc img,.project .photo img,.project .wc img,.project img{height:auto;max-width:100%;width:100%}@media only screen and (min-width:1px) and (max-width:860px){.project-wrapper{transform:scale(1);width:100%}.p-story{margin:8% auto 0;padding:20px 0 6%}.p-story .banner{margin:6% auto 0;max-width:750px;width:90%}.project .bc img,.project .photo img,.project .wc img{height:auto;max-width:120%;width:120%}.project .photo img.ce{margin-left:-10%}.project .photo img.ri{margin-left:-20%}}@media only screen and (min-width:1px) and (max-width:768px){.option .inner{background-position:right -25% center;background-size:45%}.option .inner p{text-align:left}.project .bc img,.project .photo img,.project .wc img{height:auto;max-width:140%;width:140%}.project .photo img.ce{margin-left:-20%}.project .photo img.ri{margin-left:-40%}.project .txt{padding:10% 2em}.project .txt p{font-weight:500;line-height:160%;margin-bottom:1.5em}.project .txt>p:has(.name){padding-left:0;text-indent:0}.project .tips.name{text-indent:0}.project .profile{left:0;transform:translateY(-10%);width:50%}.project .select span{background-color:rgba(0,0,0,.6);border-radius:8px;display:block;margin-bottom:5%;padding:.8em 3.5em;position:relative;text-align:left;width:100%}.project .select span:before{animation:arrow .6s ease-in infinite alternate forwards;height:20px;-webkit-transform:translate(-100%,-30%);transform:translate(-100%,-30%);width:15px}.project .in-arrow,.project .ph-arrow,.project .st-arrow,.project .tx-arrow{border-radius:6px;max-width:45px;padding:2% 1%;right:4%;width:20%;z-index:1}.project .st-arrow.back{background-color:transparent;left:4%;right:auto;z-index:1}p[class*=-arrow] img{animation:cursor .6s ease-in infinite alternate forwards;display:block;height:auto;margin:0 auto;max-width:25px;position:relative;width:100%}}@media only screen and (min-width:1px) and (max-width:568px){.project .bc img,.project .photo img,.project .wc img{height:auto;max-width:180%;width:180%}.project .photo img.ce{margin-left:-40%}.project .photo img.ri{margin-left:-80%}}