*,*:before,*:after{box-sizing:border-box}*{margin:0}body{-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul,li{list-style:none;padding:0}:root{--color-base: #110f46;--color-accent: #c9d8ff;--color-white: #fff;--color-black: #333;--color-yellow: #b8ff89;--font-xs: .714rem;--font-sm: .875rem;--font-md: 1rem;--font-lg: 1.25rem;--font-xl: 1.5rem;--font-2xl: 2rem;--font-3xl: 2.5rem;--font-4xl: 3rem}html{font-size:14px;line-height:1.6;scroll-behavior:smooth}@media(min-width:1000px){html{font-size:16px}}body{background-color:var(--color-base);color:var(--color-white);font-family:Noto Sans JP,sans-serif;font-weight:400}b,strong{font-weight:700}h2{align-items:center;color:var(--color-accent);display:flex;flex-direction:column;font-size:20px;gap:16px;line-height:1}h2.title--navy{color:var(--color-base)}@media(min-width:768px){h2.title--row{flex-direction:row;justify-content:center}}#header{align-items:center;background:linear-gradient(to bottom,#110f46cc,#110f4699 40%,#110f464d,#110f4600);display:flex;justify-content:space-between;padding:16px;position:sticky;top:0;z-index:100}@media(min-width:768px){#header{padding:24px}}@media(min-width:1200px){#header{padding:24px}}#header .header__name{font-weight:700}#header .header__nav{display:flex;gap:48px}#header .header__nav ul{display:none}@media(min-width:1000px){#header .header__nav ul{align-items:center;display:flex;gap:48px;list-style:none}}:is(#header .header__nav ul) a{align-items:center;color:var(--color-white);display:flex;font-size:var(--font-sm);font-weight:700;line-height:1;text-decoration:none}:is(#header .header__nav ul) a span{display:block;transform:translate(-10px);transition:transform .3s}:is(#header .header__nav ul) a:before{aspect-ratio:1;background-color:#0d99ff;border-radius:50%;content:"";opacity:0;transform:scale(0);transition:opacity .3s,transform .3s;width:10px}:is(#header .header__nav ul) a:hover span{color:#0d99ff;transform:translate(8px)}:is(#header .header__nav ul) a:hover:before{opacity:1;transform:scale(1)}#header .header__contact{background-color:#0d99ff;border-radius:20px;color:var(--color-white);display:flex;font-size:var(--font-sm);font-weight:700;justify-content:center;line-height:1;padding:12px 24px;text-decoration:none;transition:letter-spacing .3s,background-color .3s;width:148px}@media(min-width:768px){#header .header__contact:hover{background-color:#0087e6}}.loading{align-items:center;background-color:var(--color-base);display:flex;height:100svh;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:200}@media(min-width:1000px){.loading{height:100vh}}.loading__inner{height:100%;position:relative;width:100%}.loading__visual{display:block;height:100%;inset:0;opacity:0;position:absolute;width:100%}.loading__text{font-family:Noto Sans JP,sans-serif;letter-spacing:.08em}#mv{padding-bottom:112px}@media(min-width:1000px){#mv{align-items:center;display:flex;height:580px;justify-content:flex-end;margin:0 24px;max-width:1400px;padding-bottom:0;position:relative}}@media(min-width:1200px){#mv{height:660px}}@media(min-width:1400px){#mv{height:660px;margin:0 auto}}.mv__visual{margin:0 auto;max-width:330px;padding:24px 0;width:83.4%}@media(min-width:1000px){.mv__visual{left:0;max-width:none;position:absolute;top:50%;transform:translateY(-50%);width:40.8%}}@media(min-width:1200px){.mv__visual{max-width:600px;width:45%}}.mv__visual .mv-eye__wrapper{padding-bottom:100%;position:relative}.mv__visual .mv-eye,.mv__visual .mv-focus{position:absolute}:is(.mv__visual .mv-focus) line,:is(.mv__visual .mv-focus) path{fill:none;stroke:var(--color-accent);stroke-linecap:square;stroke-linejoin:miter;stroke-width:3}.mv__content{align-items:center;display:flex;flex-direction:column;gap:24px}.mv__content .mv__tagline{font-size:2.85rem;font-weight:700;text-align:center}@media(min-width:768px){.mv__content .mv__tagline{line-height:1}}:is(.mv__content .mv__tagline) br{display:inline}@media(min-width:768px){:is(.mv__content .mv__tagline) br{display:none}}.mv__content h1{font-size:var(--font-xl);font-weight:400;line-height:1}.mv__content .mv__roles{color:var(--color-accent);font-size:var(--font-lg);font-weight:700;line-height:1}#message{padding:0 16px 80px}@media(min-width:768px){#message{padding:0 24px 112px}}#message .message__inner{display:flex;flex-direction:column;gap:32px;max-width:1200px}@media(min-width:768px){#message .message__inner{flex-direction:row}}@media(min-width:1000px){#message .message__inner{gap:24px}}@media(min-width:1200px){#message .message__inner{margin:0 auto}}@media(min-width:768px){#message h2{width:208px}}@media(min-width:1000px){#message h2{width:288px}}@media(min-width:768px){#message .message__content{flex:1}}@media(min-width:1000px){#message .message__content{padding-right:24px}}@media(min-width:1200px){#message .message__content{padding-right:0}}#message .message__content h3{font-size:var(--font-xl)}@media(min-width:768px){#message .message__content h3{margin-top:32px}}#message .message__content p{letter-spacing:.05em;line-height:2;margin-top:24px}#message .message__content p strong{color:var(--color-yellow)}#skill{background-color:var(--color-white);padding:56px 16px 80px}@media(min-width:768px){#skill{padding:80px 24px 112px}}#skill .skill__inner{display:flex;flex-direction:column;gap:32px;max-width:1200px}@media(min-width:768px){#skill .skill__inner{flex-direction:row}}@media(min-width:1000px){#skill .skill__inner{gap:24px}}@media(min-width:1200px){#skill .skill__inner{margin:0 auto}}@media(min-width:768px){#skill .skill__title{width:208px}}@media(min-width:1000px){#skill .skill__title{width:288px}}#skill .skill__content{padding:0}@media(min-width:768px){#skill .skill__content{flex:1;padding-top:32px}}@media(min-width:1000px){#skill .skill__content{padding-right:24px}}@media(min-width:1200px){#skill .skill__content{padding-right:0}}#skill .skill__description{color:var(--color-base);letter-spacing:.05em}#skill .skill__items{align-items:flex-start;display:flex;flex-direction:column;gap:32px;margin-top:32px;padding:0}:is(:is(#skill .skill__items) li) span{background:var(--color-base);box-decoration-break:clone;display:inline;line-height:2;padding:8px 16px}#works{padding:56px 16px 80px}@media(min-width:768px){#works{padding:80px 24px 112px}}#works .works__inner{max-width:1200px}@media(min-width:1200px){#works .works__inner{margin:0 auto}}#works .works__content{margin-top:32px;padding:0}@media(min-width:768px){#works .works__content{margin-top:48px}}#works .works__item{padding-top:32px}@media(min-width:768px){#works .works__item{border-top:1px dotted var(--color-accent);padding-bottom:40px;padding-top:24px}}@media(min-width:1000px){#works .works__item{padding-bottom:48px;padding-top:32px}}:is(#works .works__item):first-child{padding-top:0}@media(min-width:768px){:is(#works .works__item):first-child{border-top:none}}:is(#works .works__item):last-child{padding-bottom:0!important}:is(#works .works__item) .item__inner{display:flex;flex-direction:column}@media(min-width:768px){:is(#works .works__item) .item__inner{align-items:center;flex-direction:row;gap:32px}}@media(min-width:1000px){:is(#works .works__item) .item__inner{gap:24px}}@media(min-width:1000px){:is(#works .works__item) .item__inner{padding-right:24px}}@media(min-width:1200px){:is(#works .works__item) .item__inner{padding-right:0}}:is(#works .works__item) .item__title{align-items:center;display:flex;flex-direction:column;font-size:16px;font-weight:700;gap:16px;text-align:center}@media(min-width:768px){:is(#works .works__item) .item__title{width:208px}}@media(min-width:1000px){:is(#works .works__item) .item__title{font-size:18px;width:288px}}:is(:is(#works .works__item) .item__title) span{display:block;font-size:14px}:is(:is(#works .works__item) .item__title) img{width:48px}:is(#works .works__item) .item__content{margin-top:32px}@media(min-width:768px){:is(#works .works__item) .item__content{margin-top:0}}:is(#works .works__item) .item__tagline{color:var(--color-yellow);font-size:var(--font-lg);font-weight:700}@media(min-width:768px){:is(#works .works__item) .item__tagline{font-size:var(--font-xl)}}:is(#works .works__item) .item__summary{letter-spacing:.05em;margin-top:32px}:is(#works .works__item) .item__points{letter-spacing:.05em;margin-top:24px}:is(:is(#works .works__item) .item__points) li{align-items:center;display:flex;gap:8px}:is(:is(:is(#works .works__item) .item__points) li):not(:first-child){margin-top:16px}:is(#works .works__item) .item__roles{color:var(--color-accent);display:flex;flex-wrap:wrap;gap:1em;margin-top:24px}:is(:is(#works .works__item) .item__roles) li{line-height:1}:is(#works .works__item) .item__button{align-items:center;background:transparent;border:1px solid rgb(255 255 255 / 50%);color:var(--color-white);cursor:pointer;display:flex;font-size:14px;font-weight:700;height:40px;justify-content:center;line-height:1;margin:24px auto 0;outline:none;overflow:hidden;position:relative;width:240px}@media(min-width:768px){:is(#works .works__item) .item__button{margin:32px 0 0}}:is(:is(#works .works__item) .item__button) svg{position:absolute;right:8px;top:50%;transform:translateY(-50%)}:is(:is(#works .works__item) .item__button) .item__button-text{position:relative;transition:transform .3s ease}@media(min-width:768px){:is(:is(#works .works__item) .item__button):hover .item__button-text{transform:translateY(200%)}}:is(:is(#works .works__item) .item__button) .item__button-text:before{content:attr(data-text);left:0;position:absolute;top:-200%}:is(#works .works__item) .item__detail{display:flex;max-height:0;overflow:hidden;transition:max-height .4s ease}@media(min-width:768px){:is(#works .works__item) .item__detail{gap:32px}}@media(min-width:1000px){:is(#works .works__item) .item__detail{gap:24px}}:is(:is(#works .works__item) .item__detail):before{content:"";display:block}@media(min-width:768px){:is(:is(#works .works__item) .item__detail):before{width:208px}}@media(min-width:1000px){:is(:is(#works .works__item) .item__detail):before{width:288px}}:is(:is(#works .works__item) .item__detail) p{letter-spacing:.05em;line-height:2;padding-top:24px}@media(min-width:768px){:is(:is(#works .works__item) .item__detail) p{flex:1}}#ytb{background-color:var(--color-white);padding:56px 16px 80px}@media(min-width:768px){#ytb{padding:80px 24px 112px}}#ytb .ytb__inner{max-width:1200px}@media(min-width:1200px){#ytb .ytb__inner{margin:0 auto}}#ytb .ytb__description{color:var(--color-black);line-height:2;margin-top:32px}@media(min-width:768px){#ytb .ytb__description{margin-top:48px;text-align:center}}#ytb .ytb__content{margin-top:32px;padding:0}@media(min-width:768px){#ytb .ytb__content{display:flex;gap:24px}}@media(min-width:1200px){#ytb .ytb__content{gap:32px}}#ytb .ytb__item{position:relative;width:100%}@media(min-width:768px){#ytb .ytb__item{width:calc((100% - 24px)/2)}}:is(#ytb .ytb__item):not(:first-child){margin-top:32px}@media(min-width:768px){:is(#ytb .ytb__item):not(:first-child){margin-top:0}}:is(#ytb .ytb__item) .item__inner{padding-bottom:56.25%;position:relative;width:100%}:is(#ytb .ytb__item) iframe{height:100%;max-width:100%;max-width:none;position:absolute;vertical-align:bottom;width:100%}#ytb .ytb__button{align-items:center;background:transparent;border:1px solid var(--color-base);color:var(--color-base);cursor:pointer;display:flex;font-size:14px;font-weight:700;height:46px;justify-content:center;line-height:1;margin:32px auto 0;outline:none;overflow:hidden;position:relative;text-decoration:none;transition:color .3s,background-color .3s;width:240px}@media(min-width:768px){#ytb .ytb__button{margin:48px auto 0}}:is(#ytb .ytb__button):hover{background-color:var(--color-base);color:var(--color-white)}:is(#ytb .ytb__button) svg{position:absolute;right:8px;top:50%;transform:translateY(-50%)}:is(#ytb .ytb__button) span{position:relative;transition:transform .3s ease}@media(min-width:768px){:is(#ytb .ytb__button):hover span{transform:translateY(210%)}}:is(#ytb .ytb__button) span:before{content:attr(data-text);left:0;position:absolute;top:-210%}#design{padding:56px 16px 80px}@media(min-width:768px){#design{padding:80px 24px 112px}}#design .design__inner{max-width:1200px}@media(min-width:1200px){#design .design__inner{margin:0 auto}}#design .design__description{letter-spacing:.05em;line-height:2;margin-top:32px}@media(min-width:768px){#design .design__description{margin-top:48px}}@media(min-width:1000px){#design .design__description{text-align:center}}#design .design__content{margin-top:32px;padding:0}@media(min-width:768px){#design .design__content{display:flex;flex-wrap:wrap;gap:24px}}#design .design__item{padding-top:32px}@media(min-width:768px){#design .design__item{padding-top:0;width:calc((100% - 24px)/2)}}@media(min-width:1000px){#design .design__item{width:calc((100% - 24px * 2) / 3)}}:is(#design .design__item):first-child{padding-top:0}:is(#design .design__item) .item__image{cursor:pointer;overflow:hidden}:is(#design .design__item) .item__image img{height:auto;transition:transform .3s;width:100%}@media(min-width:768px){:is(#design .design__item) .item__image:hover img{transform:scale(1.1)}}:is(#design .design__item) .item__header{align-items:center;display:flex;gap:8px;margin-top:16px}@media(min-width:768px){:is(#design .design__item) .item__header{flex-flow:row wrap;gap:12px}}:is(#design .design__item) .item__title{font-size:16px;font-weight:700}@media(min-width:768px){:is(#design .design__item) .item__title{font-size:18px}}:is(#design .design__item) .item__tags{color:var(--color-accent);display:flex;flex-wrap:wrap;gap:1em}:is(:is(#design .design__item) .item__tags) li{font-size:var(--font-sm);line-height:1}:is(#design .design__item) .item__type{display:inline-flex}:is(:is(#design .design__item) .item__type) span{background-color:#000;font-size:12px;padding:4px 8px}:is(#design .design__item) .item__url{margin-top:8px}:is(:is(#design .design__item) .item__url) a{color:var(--color-accent);text-decoration:none}:is(:is(#design .design__item) .item__url) dl{display:flex;font-size:var(--font-sm);gap:12px}:is(:is(:is(#design .design__item) .item__url) dl) div{display:flex;margin-top:8px}:is(#design .design__item) .item__summary{font-size:14px;letter-spacing:.1em;line-height:2;margin-top:8px}#design .item__modal{align-items:center;background-color:var(--color-base);display:flex;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:opacity .35s ease,visibility .35s ease;visibility:hidden;width:100%;z-index:200}.is-open:is(#design .item__modal){opacity:1;pointer-events:auto;visibility:visible}:is(#design .item__modal) .modal__inner{display:flex;flex-direction:column;gap:24px;max-height:100%;max-width:1400px;opacity:0;padding:24px 16px;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease;width:100%}@media(min-width:768px){:is(#design .item__modal) .modal__inner{flex-direction:row;padding:24px}}@media(min-width:1000px){:is(#design .item__modal) .modal__inner{padding:40px}}.is-visible:is(#design .item__modal) .modal__inner{opacity:1;transform:translateY(0)}:is(#design .item__modal) .modal__textarea{display:flex;flex-direction:column;gap:16px}@media(min-width:768px){:is(#design .item__modal) .modal__textarea{justify-content:center;order:2;width:30%}}@media(min-width:1000px){:is(#design .item__modal) .modal__textarea{width:40%}}:is(#design .item__modal) .modal__title{align-items:center;display:flex;gap:16px;line-height:1}:is(:is(#design .item__modal) .modal__title) span{background-color:#000;font-size:var(--font-sm);padding:4px 8px}:is(:is(#design .item__modal) .modal__title) h3{font-size:var(--font-lg)}:is(#design .item__modal) .modal__url{font-size:var(--font-sm)}:is(:is(#design .item__modal) .modal__url) a{color:var(--color-white);text-decoration:none}:is(:is(#design .item__modal) .modal__url) dl{display:flex;gap:16px}:is(:is(#design .item__modal) .modal__url) dl div{display:flex;gap:0;margin-top:8px}:is(#design .item__modal) .modal__tags{color:var(--color-accent);display:flex;flex-wrap:wrap;font-size:var(--font-sm);gap:8px}:is(#design .item__modal) .modal__descr{letter-spacing:.1em}:is(#design .item__modal) .modal__switch{display:flex;justify-content:center}@media(min-width:768px){:is(#design .item__modal) .modal__switch{justify-content:flex-start}}:is(:is(#design .item__modal) .modal__switch) .switch__inner{background-color:#000;padding:8px}:is(:is(#design .item__modal) .modal__switch) button{background:none;border:none;color:#fff;cursor:pointer}:is(:is(:is(#design .item__modal) .modal__switch) button) span{display:block;font-size:var(--font-sm);line-height:1;padding:4px 0;width:56px}:is(:is(#design .item__modal) .modal__switch) button.is--active{background-color:#fff;color:#000}:is(#design .item__modal) .modal__image{aspect-ratio:3 / 2;border:5px solid #333;flex:1;overflow:scroll}@media(min-width:768px){:is(#design .item__modal) .modal__image{order:1}}:is(:is(#design .item__modal) .modal__image) .image__pc,:is(:is(#design .item__modal) .modal__image) .image__sp{display:none;width:100%}:is(#design .item__modal) .modal__image.show--pc .image__pc{display:block}:is(#design .item__modal) .modal__image.show--sp{aspect-ratio:auto;margin:0 auto;width:60%}@media(min-width:768px){:is(#design .item__modal) .modal__image.show--sp{flex:none;width:300px}}:is(#design .item__modal) .modal__image.show--sp .image__sp{display:block}:is(#design .item__modal) .modal__close{background:transparent;border:none;cursor:pointer;height:40px;padding:0;position:absolute;right:24px;top:24px;transition:transform .2s ease;width:40px}:is(#design .item__modal) .modal__close:hover{transform:scale(1.08)}:is(#design .item__modal) .modal__close:before,:is(#design .item__modal) .modal__close:after{background:#fff;content:"";height:1px;left:50%;position:absolute;top:50%;transform-origin:center;width:56px}:is(#design .item__modal) .modal__close:before{transform:translate(-50%,-50%) rotate(45deg)}:is(#design .item__modal) .modal__close:after{transform:translate(-50%,-50%) rotate(-45deg)}#profile{background-color:var(--color-white);padding:56px 16px 80px}@media(min-width:768px){#profile{padding:80px 24px 112px}}#profile .profile__inner{display:flex;flex-direction:column;gap:32px;max-width:1200px}@media(min-width:768px){#profile .profile__inner{flex-direction:row}}@media(min-width:1000px){#profile .profile__inner{gap:24px}}@media(min-width:1200px){#profile .profile__inner{margin:0 auto}}@media(min-width:768px){#profile .profile__header{width:208px}}@media(min-width:1000px){#profile .profile__header{width:288px}}:is(#profile .profile__header) .profile__image{margin:32px auto 0}#profile .profile__content{align-items:flex-start;color:var(--color-black);display:flex;flex-direction:column;gap:24px;letter-spacing:.05em;padding:0}@media(min-width:768px){#profile .profile__content{flex:1;padding-top:32px}}:is(#profile .profile__content) strong{color:var(--color-base);font-size:var(--font-xl)}#contact{padding:56px 16px 80px}@media(min-width:768px){#contact{padding:80px 24px 112px}}#contact .contact__inner{display:flex;flex-direction:column;gap:32px;max-width:1200px}@media(min-width:768px){#contact .contact__inner{flex-direction:row}}@media(min-width:1000px){#contact .contact__inner{gap:24px}}@media(min-width:1200px){#contact .contact__inner{margin:0 auto}}@media(min-width:768px){#contact .contact__header{width:208px}}@media(min-width:1000px){#contact .contact__header{width:288px}}#contact .contact__description{letter-spacing:.05em}:is(#contact .contact__description) strong{color:var(--color-yellow)}#contact .contact__content{align-items:flex-start;color:var(--color-white);display:flex;flex-direction:column;gap:24px;padding:0}:is(#contact .contact__content) p{line-height:2}@media(min-width:768px){#contact .contact__content{flex:1;padding-top:32px}}#contact .submit__result{display:none;margin-top:16px;padding:16px;width:100%}@media(min-width:768px){#contact .submit__result{margin-top:0;padding:24px}}.is-success:is(#contact .submit__result){border:1px solid var(--color-white);display:block}.is-error:is(#contact .submit__result){background-color:#e91e63;display:block}#contact .contact__form{display:flex;flex-direction:column;gap:24px;width:100%}:is(#contact .contact__form) .contact__field{display:flex;flex-direction:column;gap:16px}:is(:is(#contact .contact__form) .contact__field) input,:is(:is(#contact .contact__form) .contact__field) textarea,:is(:is(#contact .contact__form) .contact__field) select{border:1px solid var(--color-accent);padding:8px;width:100%}:is(:is(#contact .contact__form) .contact__field) input::placeholder,:is(:is(#contact .contact__form) .contact__field) textarea::placeholder{color:#ccc}:is(:is(#contact .contact__form) .contact__field) .contact__select{appearance:none}:is(:is(#contact .contact__form) .contact__field) .contact__select-wrapper{position:relative}:is(:is(#contact .contact__form) .contact__field) .contact__select-wrapper:after{color:var(--color-base);content:"▼";font-size:12px;pointer-events:none;position:absolute;right:16px;top:50%;transform:translateY(-50%)}:is(:is(#contact .contact__form) .contact__field) .contact__required{color:var(--color-yellow)}:is(#contact .contact__form) button{align-items:center;appearance:none;background-color:#0d99ff;border:none;color:var(--color-white);cursor:pointer;display:flex;font-weight:700;height:48px;justify-content:center;margin:16px auto 0;outline:none;position:relative;width:240px}@media(min-width:768px){:is(#contact .contact__form) button{margin:0}}:is(:is(#contact .contact__form) button):before{background:linear-gradient(135deg,#58bcff,#0078dd);content:"";inset:0;opacity:0;position:absolute;transition:opacity .3s}:is(:is(#contact .contact__form) button) span{position:relative;z-index:1}@media(min-width:768px){:is(:is(#contact .contact__form) button):hover:before{opacity:1}}#techstack{padding:0 16px 80px}@media(min-width:768px){#techstack{padding:0 24px 112px}}#techstack .techstack__inner{display:flex;flex-direction:column;gap:32px;max-width:1200px}@media(min-width:768px){#techstack .techstack__inner{flex-direction:row}}@media(min-width:1000px){#techstack .techstack__inner{gap:24px}}@media(min-width:1200px){#techstack .techstack__inner{margin:0 auto}}@media(min-width:768px){#techstack .techstack__title{width:208px}}@media(min-width:1000px){#techstack .techstack__title{width:288px}}@media(min-width:768px){#techstack .techstack__content{padding-top:32px}}@media(min-width:768px){#techstack .techstack__content{flex:1}}@media(min-width:1000px){#techstack .techstack__content{padding-right:24px}}@media(min-width:1200px){#techstack .techstack__content{padding-right:0}}#techstack .techstack__items{align-items:flex-start;display:flex;flex-wrap:wrap;gap:24px;margin-top:32px;padding:0}:is(:is(#techstack .techstack__items) li) span{background:#000;box-decoration-break:clone;display:inline;line-height:2;padding:8px 16px}#footer{background-color:#000;color:var(--color-white);padding:32px 0}#footer .footer__inner{display:flex;font-size:var(--font-sm);justify-content:center}body.is-loading{inset:0;overflow:hidden;position:fixed;width:100%}