@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap";@import"https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap";@import"https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}main{padding:50px 8.4vw;font-family:clarikageo-regular,Helvetica,sans-serif}@font-face{font-family:clarikageo-regular;src:url(/assets/clarikageo-regular-webfont-DCxkKczY.woff2) format("woff2"),url(/assets/clarikageo-regular-webfont-DCxkKczY.woff2) format("woff");font-weight:400;font-style:normal;font-display:swap}.App{width:100%;height:100vh;font-size:18px}*::-webkit-scrollbar{display:none}*{scrollbar-width:none;-ms-overflow-style:none}@keyframes drawLeftToRight{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes disappearThenDraw{0%{transform-origin:right;transform:scaleX(1)}50%{transform-origin:right;transform:scaleX(0)}51%{transform-origin:left;transform:scaleX(0)}to{transform-origin:left;transform:scaleX(1)}}.hamburger{cursor:pointer;transition:all .6s ease}.hamburger div{display:block;width:30px;height:1px;background:#000;margin:5px;transition:all .3s ease}.hamburger:hover .line-one{transform:translateY(-1.5px)}.hamburger:hover .line-two{transform:translateY(1.5px)}.hamburger-open{height:20px;cursor:pointer}.hamburger-open div{display:block;width:30px;height:1px;background:#fff;margin:5px;transform-origin:left;transform:scaleX(0)}.hamburger-open.menuOpen div{transform:scaleX(1);animation:drawLeftToRight 1s ease forwards}.hamburger-open.menuOpen:hover div{animation:disappearThenDraw 1.2s ease forwards}header{display:flex;justify-content:space-between;align-items:center;background-color:#fff;color:#2c2c2c;width:100%;z-index:100;height:11vh;padding-left:8.4vw;padding-right:8.4vw;position:fixed}header .logo a{text-decoration:none;color:#2c2c2c;font-family:clarikageo-regular,Helvetica,sans-serif;font-size:13px;font-style:normal;font-weight:400;cursor:pointer}.header-nav-ul{display:flex;margin-left:50px}.header-nav{display:flex;flex-direction:row}.header-nav ul{list-style:none;display:flex;flex-direction:row}.header-nav ul li{margin:0 5px;position:relative;cursor:pointer}.header-nav-ul-link:hover .circle circle{stroke-dashoffset:0}.circle-hover{position:relative;display:inline-block;cursor:pointer;padding:8px 12px}.circle{position:absolute;left:50%;bottom:-20px;transform:translate(-50%);width:8px;height:8px}.circle circle{fill:none;stroke:#000;stroke-width:3px;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset .9s ease}.header-nav ul li a{text-decoration:none;color:#2c2c2c;font-family:clarikageo-regular,Helvetica,sans-serif;font-size:13px;font-style:normal;font-weight:400}@media screen and (max-width:500px){.header-nav ul{display:none}}.menu-window{position:fixed;top:0;right:0;width:100%;height:100%;background:#24292b;opacity:0;visibility:hidden;z-index:500}.MenuTitle{color:#535353;text-align:center;font-family:clarikageo-regular,Helvetica,sans-serif;font-size:100px;font-style:normal;font-weight:400;text-transform:lowercase;z-index:800}.dud{color:#535353;display:inline-block;font-family:clarikageo-regular,Helvetica,sans-serif;font-size:100px;font-style:normal;font-weight:400}.bg{position:fixed;width:100%;height:100%;display:flex;justify-content:center;padding-top:45vh}.empty{width:10px}.menu-window.open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}.menu-nav-wrapper{display:flex;justify-content:center;padding-top:100px}.menu-nav-wrapper nav{height:50vh}.menu-nav-wrapper nav ul{display:flex;flex-direction:column}.menu-window nav ul li{list-style:none;display:inline-block;margin-right:30px;height:11vh}.menu-window nav ul li a{text-decoration:none;color:#fff;transform:all .2s;font-family:SUSE,Helvetica,Arial,sans-serif;font-size:50px}.menu-window nav ul li a:hover{color:#bff3db}.menu-nav-txt.menuOpen{animation:slideInClip 1s cubic-bezier(.2,1,.7,1) forwards}.menu-nav-txt{font-family:SUSE,Helvetica,Arial,sans-serif;font-weight:100;font-size:1.2em}.menu-close{color:#fff;display:inline-block}.menu-header{display:flex;justify-content:space-between;align-items:center;background-color:#24292b;width:100%;z-index:1000;height:11vh;padding-left:8.4vw;padding-right:8.4vw}#homepage-section-1{margin-top:15vh;height:40vh;display:flex;justify-content:center;align-items:flex-end}#homepage-section-1 p{font-size:2.5em;text-transform:uppercase;font-family:SUSE,Arial,Helvetica,sans-serif;font-weight:100;text-align:center}#homepage-section-2{display:flex;justify-content:center}.videoContainer{display:flex;align-items:center;justify-content:space-between;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.HomepageVideoClip1{width:100%}.workPage_title{margin-top:150px;margin-bottom:90px}.workPage_title h1{font-family:SUSE;font-weight:100;font-size:3.5em;letter-spacing:10%}.worklist{display:grid;grid-template-columns:1fr;gap:16px;margin:0;padding:0;list-style:none}.workList_bottom_conainer{display:flex;flex-direction:row;margin-bottom:10vh}.workList_bottom_content{width:50%;font-family:Inconsolata,monospace;font-size:.7em}.workList_top_label{font-family:Inconsolata,monospace;display:flex;justify-content:space-between;font-size:.7em;margin-bottom:10px}.work_list_thumbnail_image_container{display:flex;position:relative}.work_list_thumbnail_image{width:auto;height:auto;object-fit:cover}.browseDetails_btn_body{position:absolute;display:flex;justify-content:space-between;background:#fff;left:50%;bottom:5%;width:36.5%;height:12%;align-items:center;overflow:hidden;z-index:1}.browseDetails_btn_body:after{background:#000;position:absolute;top:0;left:0;content:"";width:100%;height:100%;transform:scaleX(0);transform-origin:left top;transition:.3s cubic-bezier(.4,0,.2,1);z-index:-1}.browseDetails_btn_body:hover{color:#fff}.browseDetails_btn_body:hover:after{transform:scale(1)}.browseDetails_btn_txt{position:absolute;left:10%;font-size:.8em;font-family:Afacad,sans-serif;font-optical-sizing:auto;font-style:normal}.browseDetails_btn_arrow{font-family:clarikageo-regular;font-weight:500;font-size:.8em;position:absolute;align-items:center;width:auto;height:auto;right:10%}.worklist_li_lore{white-space:pre-line;line-height:1.4}.worklist_li_listId{margin-bottom:10px}.workList_titleContainer{margin-top:20px;margin-bottom:8px}.workList_li_title{font-weight:200;font-size:.9em}.worklist a{color:inherit;text-decoration:none}.work_list_thumbnail_image{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden}.work_list_thumbnail_img{display:block;width:100%;height:100%;object-fit:cover}.work_list_thumbnail_placeholder{width:100%;height:100%;background-color:#80808026}.work_list_thumbnail_placeholder_loading{animation:work_list_thumbnail_pulse 1.4s ease-in-out infinite}@keyframes work_list_thumbnail_pulse{0%,to{opacity:.6}50%{opacity:1}}@media(min-width:768px){.worklist{grid-template-columns:repeat(2,minmax(0,1fr));gap:1vw}}@keyframes slideInClip{0%{clip-path:inset(0% 100% 0% 0%)}to{clip-path:inset(0% 0% 0% 0%)}}.test{display:block;color:brown;animation:slideInClip 1.2s ease-out forwards}.centerContentWrap{display:flex;align-items:center;justify-content:center}.aboutMe_main{position:relative;width:100%;height:100vh;overflow:hidden}.aboutMe_bgContainer{position:fixed;top:0;left:0;width:100%;height:100vh;overscroll-behavior:none;z-index:0;pointer-events:none;padding:50px 8.4vw}.aboutMe_title{display:flex;align-items:center;height:auto}.aboutMe_subTitle{font-family:SUSE;margin:50px 0;font-weight:100;font-size:clamp(30px,3.5vw,45px);letter-spacing:.1em}.aboutMe_title h1{font-family:SUSE;font-weight:100;font-size:6vw;letter-spacing:.1em;margin-top:20%}.aboutMe_scrollContentContainer{position:absolute;top:0;left:0;width:100%;height:100vh;overflow-y:auto;overscroll-behavior:contain;z-index:1;padding-top:40vw;box-sizing:border-box}.aboutMe_thought{background-color:#fffefeeb;display:flex;flex-direction:column;padding-top:10%;padding-bottom:20%;padding-left:8vw;padding-right:8vw}.aboutMe_thought_text{width:100%}.aboutMe_thought_text p{font-family:Zen Kaku Gothic New,sans-serif;font-weight:300;font-size:clamp(16px,2.5vw,40px);margin-bottom:5vh}.aboutMe_profile{background-color:#70d0c7;height:auto;width:100vw;color:#fff;padding-top:10%;padding-bottom:20%;padding-left:8vw;padding-right:8vw;display:block}.aboutMe_profile_nameAndIconContainer{display:flex;justify-content:flex-start;align-items:center}.aboutMe_profile_nameArea{width:auto;margin-left:20px}.aboutMe_profile_engName{font-family:SUSE;font-weight:100;text-transform:uppercase;font-size:clamp(14px,2.5vw,20px)}.aboutMe_profile_jpName{font-family:Zen Kaku Gothic New,sans-serif;font-weight:300;font-size:clamp(12px,2.5vw,16px)}.aboutMe_profile_icon{width:10vw}.aboutMe_profile_icon img{width:100%}.aboutMe_profile_contents{margin-top:50px;display:flex;flex-direction:column;justify-content:center}.aboutMe_profile_contents h1{margin-bottom:10px;font-family:SUSE;font-weight:300;font-size:clamp(18px,2.5vw,20px);letter-spacing:.1em}.aboutMe_profile_element{margin-bottom:7vh}.aboutMe_profile_biograpy_text{margin-bottom:5vh}.aboutMe_profile_contents p{font-family:Zen Kaku Gothic New,sans-serif;font-weight:300;font-style:normal;letter-spacing:.1em;font-size:clamp(15px,2.5vw,20px)}.aboutMe_profile_like h2{font-family:Zen Kaku Gothic New,sans-serif;font-weight:300;font-style:normal;letter-spacing:.1em;font-size:clamp(15px,2.5vw,20px);width:35%}.aboutMe_profile_like ul li{margin-bottom:4vh;list-style:none;display:flex;width:auto;justify-content:flex-start;flex-direction:column}#aboutMe_profile_like_oshi{width:65%}#aboutMe_profile_like_oshi_fav{margin-top:10px;font-size:clamp(14px,2vw,17px)}.aboutMe_skill{background:#143331c6;height:auto;width:100vw;color:#fff;padding-top:10%;padding-bottom:20%;padding-left:8vw;padding-right:8vw;display:block}.aboutMe_skill_topCenter{display:flex;flex-direction:column;align-items:center}.aboutMe_skill_subTitle{font-family:SUSE;font-weight:100;font-size:clamp(30px,3.5vw,45px);letter-spacing:.15em}.aboutMe_skill_verticalLine_container{display:flex;justify-content:center;margin:3vh 0px}.aboutMe_skill_verticalLine{background:#fff;width:1px;height:12vh;max-height:100px;min-height:70px}.aboutMe_skill_contents{display:grid;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(3,auto);row-gap:20vh;justify-content:space-between}.aboutMe_skill_element{width:35vw}.aboutMe_skill_element h1{font-family:SUSE;font-weight:300;letter-spacing:.1em;font-size:clamp(24px,2.5vw,40px);margin-bottom:10px}.aboutMe_skill_element ul{list-style:none}.aboutMe_skill_element ul li{margin-bottom:1vh}.aboutMe_skill_element ul li p{font-family:Inconsolata;font-weight:100;letter-spacing:.1em;font-size:clamp(12px,1.5vw,30px)}@media(min-width:768px){.aboutMe_subTitle{margin:0 50px}.aboutMe_thought{flex-direction:row;justify-content:space-between;padding-top:10%;padding-bottom:10%}.aboutMe_thought_text{width:60%}.aboutMe_profile{flex-direction:row;justify-content:space-between;width:100%;display:flex}.aboutMe_profile_contents{margin-top:0;margin-left:50px;justify-content:flex-start;width:60%}.aboutMe_profile_contents h1{margin-bottom:1.5vh}.aboutMe_profile_nameAndIconContainer{margin-top:60%;margin-left:50px}.aboutMe_profile_like ul li{flex-direction:row}.aboutMe_profile_like h2{width:20%}.aboutMe_skill{background:#143331c6;height:auto;width:100vw;color:#fff;padding-top:10%;padding-bottom:20%;padding-left:8vw;padding-right:8vw;display:block}.aboutMe_skill_topCenter{display:flex;flex-direction:column;align-items:center}.aboutMe_skill_subTitle{font-family:SUSE;font-weight:100;font-size:clamp(30px,3.5vw,45px);letter-spacing:.15em}.aboutMe_skill_verticalLine_container{display:flex;justify-content:center;margin:10vh 0px}.aboutMe_skill_verticalLine{background:#fff;width:1px;height:12vh;max-height:100px;min-height:70px}.aboutMe_skill_contents{display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(2,auto);row-gap:20vh;justify-content:space-between}.aboutMe_skill_element{width:20vw}.aboutMe_skill_element h1{font-family:SUSE;font-weight:300;letter-spacing:.1em;font-size:clamp(24px,2.5vw,40px);margin-bottom:10px}.aboutMe_skill_element ul{list-style:none}.aboutMe_skill_element ul li{margin-bottom:1vh}.aboutMe_skill_element ul li p{font-family:Inconsolata;font-weight:100;letter-spacing:.1em;font-size:clamp(12px,1.5vw,30px)}}.contact_main{padding:50px 8.4vw;font-family:SUSE}.contact_title h1{text-align:center}.contact{margin-top:10vh;display:flex;justify-content:center;align-items:center}.contact_info{width:100%}.contact_info_content{width:100%;display:flex;justify-content:center;margin-bottom:2vh}.contact_info_SNS a{text-decoration:none;color:#16322a}.contact_info_SNS{list-style:none}.contact_info_content_li{display:flex}form{max-width:600px;width:100%;background:#d2e7e3;padding:25px;border-radius:8px;box-shadow:0 0 10px #0000001a;color:#16322a;margin:25px}form h2{font-size:30px;text-align:center}form .input-box{margin-top:20px}.input-box .field{width:100%;height:50px;background:transparent;border:2px solid #ddd;outline:none;border-radius:6px;padding:15px;font-size:16px;color:#ddfff5;margin-top:8px}.input-box .field.mess{height:200px;resize:none}form button{width:100%;height:55px;background:#4f9186;border-radius:6px;box-shadow:0 0 10px #0000001a;cursor:pointer;font-weight:500;margin-top:25px;color:#ddfff5;transition:all .5s}form button:hover{background:#2f5851}.footer{display:flex;align-items:center;text-align:center;width:100%;color:#2c2c2c;font-family:clarikageo-regular,Helvetica,sans-serif}.copyright{width:100%}.copyright p{margin:20px 0;text-align:center;font-size:13px;font-style:normal;font-weight:400}.workDetailsTest-Main{overflow:hidden}.workDetailsTest{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:80px}.section h2{font-size:64px;margin:0 0 24px}.section p{font-size:20px;line-height:1.8}