.zen-kaku-gothic-new-light{font-family:Zen Kaku Gothic New,sans-serif;font-weight:300;font-style:normal}.zen-kaku-gothic-new-regular{font-family:Zen Kaku Gothic New,sans-serif;font-weight:400;font-style:normal}.zen-kaku-gothic-new-medium{font-family:Zen Kaku Gothic New,sans-serif;font-weight:500;font-style:normal}.passions-conflict-regular{font-family:Passions Conflict,cursive;font-weight:400;font-style:normal}*{margin:0;padding:0;list-style:none;text-decoration:none;font-weight:300;box-sizing:border-box}html{scroll-behavior:smooth}img{width:auto;height:100%}body{font-family:Zen Kaku Gothic New,sans-serif}h1{font-size:min(64px,calc((64 / 1440)*100vw));font-weight:300;letter-spacing:.2em}h2{font-size:min(32px,calc((32 / 1440)*100vw));font-weight:300;letter-spacing:.3em}.h3{font-size:min(24px,calc((24 / 1440)*100vw));font-weight:300;letter-spacing:.05em}.h4{font-size:min(16px,calc((16 / 1440)*100vw));font-weight:300;letter-spacing:.15em;line-height:50px}p,li{font-size:min(16px,calc((16 / 1440)*100vw));font-weight:300;letter-spacing:.1em}.righttext{text-align:right}.more{transform:rotate(45deg)}a,a:visited{color:#000;transition:.3s ease-in-out}a:hover{color:#c9970d}a:active{color:#586aa8}.fade{opacity:0;filter:blur(10px);transition:.8s ease-in-out}.fade.is-visible{opacity:1;filter:blur(0px)}#mainvisual{width:100%;height:100vh;position:relative;z-index:4;background-image:url(/33ki-webfolio/images/mainvisual-bg_image.webp);background-size:100% 100%;background-position:center;background-repeat:no-repeat}#mainvisual:after{content:"";display:block;width:1px;height:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%);background-color:#000;animation:line-flow 2s ease-in-out infinite;transform-origin:top}@keyframes line-flow{0%{transform:translate(-50%) scaleY(0);transform-origin:top}45%{transform:translate(-50%) scaleY(1);transform-origin:top}55%{transform:translate(-50%) scaleY(1);transform-origin:bottom}to{transform:translate(-50%) scaleY(0);transform-origin:bottom}}.mainvisual__cycle{width:25%;aspect-ratio:1 / 1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #000;border-radius:1000px}.mainvisual__title{display:flex;flex-direction:column;justify-content:space-between;width:calc((515 / 1440)*100%);height:250px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#welcome{position:relative;background-color:#dfecf6}.welcome__bg{content:"";width:100%;height:100%;position:absolute;z-index:2;background-color:#fff;border-bottom-left-radius:100% 100px;border-bottom-right-radius:100% 100px}.welcome__content{display:flex;flex-direction:column;margin:0 auto;padding:230px 0 350px;width:600px;position:relative;z-index:3}.welcome__content h2{margin-bottom:100px}.welcome__content p.h3{margin-bottom:80px}.welcome__content h2,.welcome__content p{text-align:center}.welcome__content .h3{letter-spacing:.5em;line-height:60px}#works{padding:200px 0;width:100%;position:relative;z-index:2;background-color:#dfecf6}#works h2{padding:0 0 0 120px}.works-grid{display:flex;flex-direction:column;padding:110px 0 100px}.card{display:flex;gap:10px;justify-content:space-between;align-items:flex-end;padding:50px;height:100%;position:relative;text-decoration:none;color:inherit;overflow:hidden;border:.5px solid #586AA8;opacity:1;transform:translateY(20px);filter:blur(5px);transition:.8s ease-in-out}.card.is-visible{opacity:1;transform:translateY(0);filter:blur(0px)}.card:before{content:"";display:block;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;background-image:url(/33ki-webfolio/images/webforlio_bg.jpg);background-size:cover;background-position:center;background-repeat:repeat-x;opacity:0;transition:.8s ease-in-out}.card:hover:before{opacity:100%}.card:hover{color:#fff}.card:hover .tags:before,.card:hover .categories:before{background-color:#fff}.card-bg-text{position:absolute;top:50%;left:0;transform:translateY(-50%);white-space:nowrap;font-size:80px;font-weight:700;color:#ffffff0d;pointer-events:none;opacity:0;font-family:Passions Conflict}.card:hover .card-bg-text{opacity:1;animation:slideLoop 15s linear infinite}@keyframes slideLoop{0%{transform:translate(-100%,-50%)}to{transform:translate(100%,-50%)}}.card img{width:calc((600 / 1440)*100%);height:300px;position:relative;z-index:2;object-fit:cover}.card-body{display:flex;justify-content:space-between;flex-direction:column;height:300px}.date{font-size:13px}.card__text{display:flex;flex-direction:column;gap:10px}.card__text h3{margin-bottom:5px;font-size:min(20px,calc((20 / 1440)*100vw));font-weight:400;letter-spacing:.15em}.tags,.categories{display:flex;gap:10px;padding-left:20px;position:relative;font-size:min(15px,calc((15 / 1440)*100vw));font-weight:300;letter-spacing:.1em}.tags:before,.categories:before{content:"";display:block;width:5px;height:5px;position:absolute;top:50%;left:0;transform:translateY(-50%);background-color:#c9970d;filter:blur(2px);transition:.8s ease-in-out}.categories:before{background-color:#586aa8}.description{margin-top:30px;font-size:min(13px,calc((13 / 1440)*100vw));font-weight:300;letter-spacing:.15em}#works a{align-items:center}.viewmore{display:flex;justify-content:center;gap:15px;padding:14px 70px 14px 90px;margin:0 auto;width:300px;position:relative;border:1px solid #000;border-radius:100px;transition:0 ease-in-out}.viewmore:hover{color:#fff;background-color:#586aa8;border:1px solid rgba(0,0,0,0)}#aboutme{width:100%;background-color:#fff}#aboutme:before{content:"";width:100%;height:100px;position:absolute;z-index:3;background-color:#dfecf6;mask-image:linear-gradient(to bottom,#FFF,transparent)}#aboutme h2{padding:140px 0 0 120px;position:relative;z-index:4}.about__container{display:flex;justify-content:space-between;align-items:flex-end;margin:0 auto;padding:160px 0 350px;width:calc((1040 / 1440)*100%);position:relative;z-index:3}.about__container__img{width:300px;height:430px;position:relative;z-index:4;background-image:url(/33ki-webfolio/images/aboutme.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:200px 200px 0 0}.about__container p.h4{font-size:min(16px,calc((16 / 1440)*100vw));font-weight:300;letter-spacing:.1em;line-height:40px}.about__container__lefttext{display:flex;flex-direction:column;gap:100px}.about__container__lefttext__name h3{font-size:min(20px,calc((20 / 1440)*100vw));font-weight:400;letter-spacing:.15em;line-height:37px}.about__container__lefttext__text,.about__container__righttext__text{display:flex;flex-direction:column;gap:40px}.about__container__righttext__more{display:flex;justify-content:center;align-items:flex-end;gap:15px;margin-top:50px;padding:10px 15px 10px 25px;width:200px;border:1px solid #000;border-radius:100px;transition:.3s ease-in-out}.about__container__righttext__more:hover{color:#fff;background-color:#586aa8;border:1px solid rgba(0,0,0,0)}.about__container__righttext__more p.h3{font-size:min(16px,calc((16 / 1440)*100vw));font-weight:300;letter-spacing:.1em}@media screen and (max-width:768px){h1{font-size:min(64px,calc((70 / 768)*100vw))}h2{font-size:min(32px,calc((40 / 768)*100vw));font-weight:400;letter-spacing:.2em}.h3{font-size:min(24px,calc((35 / 768)*100vw))}.h4{font-size:min(16px,3.90625vw);line-height:30px}p,li{font-size:min(20px,3.90625vw)}#mainvisual{background-size:auto 100%}.mainvisual__cycle{width:calc((400 / 768)*100%);border:.5px solid #000}.welcome__content{padding:100px 0 150px;width:78.125%}.welcome__content h2{margin-bottom:50px}.welcome__content .h3{letter-spacing:.2em;line-height:30px}.welcome__content p.h3{margin-bottom:40px}#works{padding:60px 0}#works h2{padding:0 0 0 40px}.works-grid{padding:40px 0}.card{flex-direction:column-reverse;padding:20px;height:fit-content}.card img{width:100%;height:150px}.card-body{height:auto}.card__text{gap:8px}.card__text h3{margin-bottom:5px;font-size:min(25px,calc((35 / 768)*100vw))}.tags,.categories{padding-left:12px;font-size:min(18px,calc((25 / 768)*100vw))}.tags:before,.categories:before{width:3px;height:3px}.description{margin-top:5px;font-size:min(18px,calc((25 / 768)*100vw))}.viewmore{gap:8px;padding:10px 20px;margin:0 auto;width:150px;border:.8px solid #000}#aboutme h2{padding:60px 0 0 40px}.about__container{flex-direction:column;gap:20px;align-items:center;padding:50px 0 80px;width:calc((600 / 786)*100%)}.about__container__lefttext,.about__container__righttext{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}.about__container__lefttext__name h3{font-size:min(25px,calc((35 / 768) * 100vw));text-align:left;line-height:20px}.about__container p.h4{font-size:min(20px,3.90625vw);line-height:20px}.about__container__img{width:100%}.about__container__lefttext__text,.about__container__righttext__text{display:flex;flex-direction:column;gap:20px;width:100%}.about__container__righttext__more{gap:8px;margin-top:40px;padding:10px 20px;width:150px;border:.8px solid #000}.about__container__righttext__more p.h3{font-size:min(20px,3.90625vw)}}