:root {
    --vh: 1vh
}

:root {
    --a-leave: 0;
    --a-enter: 1;
    --px: 0;
    --py: 0;
    --p1: 0;
    --p2: 1;
    --col-black: #000300;
    --col-white: #fefffe;
    --col-lgray: #aaa;
    --col-gray: #3e3e3e;
    --col-dgray: #242527;
    --col-bg-img: #f1f1f1;
    --col-bg-menu: #121212;
    --col-yellow: #e3f660;
    --col-purple: #976ae1;
    --col-border: rgba(0, 3, 0, 0.2);
    --col-border-purple: rgba(151, 106, 225, 0.2);
    --r: .347vw;
    --go: 2.777vw;
    --gw: calc(2.08333vw - var(--go) * 2 / 48);
    --header-h: 5.208vw;
    --single-w: 60vw;
    --ease-power1-in: cubic-bezier(0.26, 0, 0.6, 0.2);
    --ease-power1-out: cubic-bezier(0.4, 0.8, 0.74, 1);
    --ease-power1-in-out: cubic-bezier(0.48, 0.04, 0.52, 0.96);
    --ease-power2-in: cubic-bezier(0.4, 0, 0.68, 0.06);
    --ease-power2-out: cubic-bezier(0.32, 0.94, 0.6, 1);
    --ease-power2-in-out: cubic-bezier(0.66, 0, 0.34, 1);
    --ease-power3-in: cubic-bezier(0.52, 0, 0.74, 0);
    --ease-power3-out: cubic-bezier(0.26, 1, 0.48, 1);
    --ease-power3-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-power4-in: cubic-bezier(0.64, 0, 0.78, 0);
    --ease-power4-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-power4-in-out: cubic-bezier(0.84, 0, 0.16, 1);
    --a-clip-s: 1.2s;
    --a-clip-e: cubic-bezier(0.22, 1, 0.36, 1);
    --a-clip-o-s: .6s;
    --a-clip-o-e: cubic-bezier(0.22, 1, 0.36, 1);
    --a-hover-s: .5s;
    --a-global-t-s: .8s
}

.c-bg-img, .c-bg-video {
    width: 100%;
    height: 100%;
    position: relative
}

.c-bg-img .elem {
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.c-bg-img .elem, .c-bg-video .elem {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative
}

.c-bg-img .poster, .c-bg-video .poster {
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.c-bg-img .poster {
    background-size: 500%;
    background-position: 0 0
}

.c-bg-img img, .c-bg-video img, .c-bg-video video {
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
}

.c-bg-img, .c-bg-video {
    background-color: var(--col-bg-img)
}

[data-bg=dark] .c-bg-img, [data-bg=dark] .c-bg-video {
    background-color: var(--col-bg-menu)
}

/*.c-bg-img .elem, .c-bg-img .poster, .c-bg-video .elem, .c-bg-video .poster {*/
/*    opacity: 0*/
/*}*/

.c-bg-img.is-img-loaded .elem, .c-bg-img.is-poster-loaded .poster, .c-bg-video.is-poster-loaded .poster, .c-bg-video.is-video-play .elem {
    opacity: 1
}

[data-visible="1"].c-bg-img.is-img-loaded .elem, [data-visible="1"].c-bg-img.is-poster-loaded .poster, [data-visible="1"].c-bg-video.is-poster-loaded .poster, [data-visible="1"].c-bg-video.is-video-play .elem {
    transition: opacity 1s
}

.is-video-play.c-bg-video .poster {
    opacity: 0;
    pointer-events: none
}

.is-video-play.c-bg-video .js-play-video {
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s
}

.c-bg-video .js-play-video {
    z-index: 9;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.c-bg-video .js-play-video .ui-btn {
    border: none;
    background: var(--col-black);
    color: var(--col-white);
    text-indent: 0
}

.c-logo, .c-nav-wrap {
    z-index: 6;
    position: fixed
}

.c-popup {
    z-index: 7;
    position: fixed
}

.c-menu {
    z-index: 8;
    position: fixed
}

[data-n="0"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 0)
}

[data-n=".5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 0.5)
}

[data-n="1"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 1)
}

[data-n="1.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 1.5)
}

[data-n="2"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 2)
}

[data-n="2.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 2.5)
}

[data-n="3"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 3)
}

[data-n="3.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 3.5)
}

[data-n="4"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 4)
}

[data-n="4.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 4.5)
}

[data-n="5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 5)
}

[data-n="5.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 5.5)
}

[data-n="6"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 6)
}

[data-n="6.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 6.5)
}

[data-n="7"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 7)
}

[data-n="7.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 7.5)
}

[data-n="8"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 8)
}

[data-n="8.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 8.5)
}

[data-n="9"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 9)
}

[data-n="9.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 9.5)
}

[data-n="10"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 10)
}

[data-n="10.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 10.5)
}

[data-n="11"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 11)
}

[data-n="11.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 11.5)
}

[data-n="12"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 12)
}

[data-n="12.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 12.5)
}

[data-n="13"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 13)
}

[data-n="13.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 13.5)
}

[data-n="14"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 14)
}

[data-n="14.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 14.5)
}

[data-n="15"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 15)
}

[data-n="15.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 15.5)
}

[data-n="16"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 16)
}

[data-n="16.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 16.5)
}

[data-n="17"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 17)
}

[data-n="17.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 17.5)
}

[data-n="18"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 18)
}

[data-n="18.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 18.5)
}

[data-n="19"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 19)
}

[data-n="19.5"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 19.5)
}

[data-n="20"] {
    display: block;
    width: 100%;
    height: calc(var(--gw) * 20)
}

[data-n="0"] {
    display: none
}

[data-n2="0"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 0)
}

[data-n2=".5"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 0.5)
}

[data-n2="1"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 1)
}

[data-n2="1.5"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 1.5)
}

[data-n2="2"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 2)
}

[data-n2="2.5"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 2.5)
}

[data-n2="3"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 3)
}

[data-n2="3.5"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 3.5)
}

[data-n2="4"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 4)
}

[data-n2="4.5"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 4.5)
}

[data-n2="5"] {
    display: block;
    width: 100%;
    height: calc(var(--go) * 5)
}

[data-n2="0"] {
    display: none
}

.c-body {
    padding: 0 var(--go)
}

.c-body-thinest {
    width: 29em;
    margin: 0 auto
}

.c-body-thin {
    width: calc(var(--gw) * 23);
    margin: 0 auto
}

.c-local {
    height: 100%
}

.c-local, .c-main {
    width: 100%
}

.c-archive-scroll, .p-body {
    position: relative;
    z-index: 2
}

.p-footer {
    position: relative;
    z-index: 1
}

.c-tr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.c-td-r {
    width: calc(50% - var(--gw))
}

.c-logo {
    left: 0;
    top: 0
}

.c-logo svg {
    width: 100%;
    height: 100%;
    padding-top: .1em
}

.c-logo a {
    box-sizing: content-box;
    width: 6.736vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--go)
}

.c-logo a, .c-nav-wrap {
    height: var(--header-h)
}

.c-nav-wrap {
    right: 0;
    top: 0
}

.c-lang, .c-nav, .c-nav-wrap, .c-nav ul {
    display: flex;
    align-items: center
}

.c-nav ul:first-child {
    padding-right: var(--gw);
    margin-left: -.25em
}

.c-nav ul li {
    margin-right: .25em
}

.c-lang {
    padding: 0 var(--go);
    margin: 0 -.5em
}

.c-lang a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em .5em
}

.c-logo, .c-nav-wrap {
    pointer-events: none
}

.c-logo a, .c-nav-wrap a {
    pointer-events: auto
}

.c-splash .ui-link-bd .t {
    transform: translateY(110%)
}

.is-loaded-a .c-splash {
    opacity: 1
}

.is-loaded-a .c-splash .c-clip .t, .is-loaded-a .c-splash .ui-link-bd .t {
    transform: translate(0)
}

.c-header-bg {
    width: 100%;
    height: calc(var(--gw) * 7)
}

[data-xhr-namespace=home] .c-header-bg {
    height: calc(var(--gw) * 8)
}

.c-menu {
    right: 0;
    top: 0
}

.c-menu-header {
    height: var(--header-h);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 2
}

.c-menu-header a {
    padding: 0 calc(var(--go) * 2 - var(--gw) * 2)
}

.c-menu-body {
    position: relative;
    z-index: 2
}

.c-menu-body, .c-menu-body a {
    color: var(--col-white)
}

.c-menu-body a {
    display: block;
    line-height: 0
}

.c-menu-body a .o {
    position: relative;
    display: flex;
    align-items: center
}

.c-menu-body a .n {
    opacity: .5;
    padding-left: .75em;
    margin-top: -1em
}

.c-menu-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--col-bg-menu);
    top: calc(var(--go) - var(--gw));
    right: calc(var(--go) - var(--gw));
    border-radius: var(--r)
}

.c-menu-body {
    width: calc(var(--gw) * 16);
    padding-right: calc(var(--go) - var(--gw));
    margin-left: calc(var(--go) * -1 - var(--gw) * -1)
}

.c-menu-content {
    padding: calc(var(--gw) * 0.5) calc(var(--gw) * 2) calc(var(--gw) * 2) calc(var(--gw) * 2)
}

.c-menu-sub ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -1em
}

.c-menu-sub ul li {
    width: 33.333%;
    margin-bottom: 1em;
    font-weight: 500
}

.c-menu-lang a {
    width: calc(var(--gw) * 2);
    height: calc(var(--gw) * 2);
    justify-content: center;
    overflow: hidden;
    border-radius: 100%;
    color: var(--col-white);
    border: 1px solid transparent;
    font-weight: 500
}

.c-menu-lang, .c-menu-lang a {
    display: flex;
    align-items: center
}

.c-menu .in {
    perspective: 200vw
}

.c-menu {
    pointer-events: none
}

.c-menu-bg, .c-menu-body {
    transform: scale(.95) rotateY(0deg) translateY(calc(var(--gw) * 1));
    transform-origin: top center;
    opacity: 0
}

.c-menu-header a {
    transform: translateY(-100%) scale(1)
}

.is-ov-nav .c-menu .c-menu-header a {
    pointer-events: auto;
    opacity: 1;
    transform: translate(0) scale(1)
}

.is-ov-nav .c-logo, .is-ov-nav .c-nav-wrap, [data-current-layout=single] .c-logo, [data-current-layout=single] .c-nav-wrap {
    transform: translateY(-100%);
    pointer-events: none
}

.is-menu-opened .c-menu {
    pointer-events: auto
}

.is-menu-opened .c-menu-bg, .is-menu-opened .c-menu-body {
    transform: scale(1) rotateX(0deg) translate(0);
    opacity: 1
}

.c-main-title {
    margin-top: -.2em
}

.c-main-title .l1 {
    margin-left: -.07em
}

.c-main-title .l2 {
    margin-left: -.05em
}

#app .c-col-g, #app .c-col-g * {
    color: var(--col-gray)
}

#app .c-col-g .ui-btn-arrow use, #app .c-col-g use {
    fill: var(--col-gray)
}

.c-sec-nav {
    display: flex;
    justify-content: space-between;
    padding: 0 .25em
}

.c-link-title {
    position: relative;
    display: block;
    padding-top: var(--gw);
    padding-bottom: var(--gw)
}

#app .c-link-title .o {
    display: block
}

.c-link-title .t {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

.c-link-title .a {
    width: .6em;
    height: .6em
}

.c-link-title .b {
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    background: var(--col-border)
}

.c-links-ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: calc(var(--gw) * 0.5);
    padding-bottom: var(--gw);
    margin-bottom: -.25em
}

.c-links-ul li {
    margin-right: .25em;
    margin-bottom: .25em
}

.c-sec-about {
    z-index: 4;
    position: relative
}

.c-scroll {
    position: relative;
    margin-bottom: 0
}

.c-scroll-body {
    width: 50vw;
    margin-left: auto;
    margin-right: 0;
    position: relative;
    z-index: 2
}

.c-scroll-content {
    background: var(--col-white);
    border-radius: var(--r) var(--r) 0 0;
    overflow: hidden
}

.c-scroll-patterns {
    padding-top: var(--gw);
    padding-left: var(--gw);
    padding-right: var(--go);
    height: calc(var(--vh) * 85);
    margin-bottom: calc(var(--vh) * 15);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.c-scroll-patterns .c-sec-title {
    padding-top: .25em
}

.c-scroll-cats {
    padding-left: var(--gw);
    padding-right: var(--go);
    height: calc(var(--vh) * 100);
    display: flex;
    align-items: center
}

.c-sec-patterns-after {
    margin-top: -1px;
    position: relative;
    z-index: 2;
    background-color: var(--col-white)
}

.c-scroll-bg {
    position: sticky;
    top: 0;
    z-index: 1;
    height: calc(var(--vh) * 100);
    width: 100%;
    background: var(--col-bg-img)
}

.js-slide-patterns-a * {
    pointer-events: none
}

.c-arrow-title .t, .c-icon-title .t {
    display: flex;
    align-items: flex-end
}

.c-icon-title .i {
    width: .45em;
    height: .45em;
    margin-right: .3em;
    margin-bottom: .05em
}

.c-arrow-title .i {
    margin-right: .75em;
    width: .7em;
    height: .7em
}

.c-icon-p .t {
    display: flex;
    align-items: center
}

.c-icon-p .w {
    padding-top: .2em
}

.c-icon-p .i {
    margin-right: .75em;
    width: 1em;
    height: 1em
}

.c-recent-lr {
    display: flex;
    align-items: flex-end;
    justify-content: space-between
}

.c-recent-ul {
    display: flex;
    align-items: center;
    margin: 0 -.75em
}

.c-recent-ul li {
    margin: 0 .75em
}

.c-recent-ul a {
    display: block;
    width: calc(var(--gw) * 3);
    aspect-ratio: 1/1;
    position: relative;
    border-radius: var(--r);
    overflow: hidden
}

.c-recent-ul a .c-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.c-cats-ul li {
    display: inline-block;
    line-height: 1.3
}

.c-cats-ul li a {
    position: relative;
    padding-right: .75em;
    display: block
}

.c-cats-ul li a:after {
    content: "";
    display: block;
    position: absolute;
    right: .4em;
    top: .1em;
    height: 1em;
    width: .75px;
    background: var(--col-black);
    transform: rotate(20deg)
}

.c-cats-ul li:last-child a:after {
    display: none
}

.c-popup, .c-popup * {
    pointer-events: none
}

.c-popup {
    top: 0;
    left: 0;
    display: none
}

.c-popup-series {
    width: calc(var(--gw) * 7);
    height: calc(var(--gw) * 7);
    margin-top: calc(var(--gw) * 0.5);
    margin-left: calc(var(--gw) * 0.5);
    border-radius: var(--r);
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s
}

[data-current-page=home].is-hover-ready .c-popup {
    display: block
}

[data-current-page=home].is-hover-enable .c-popup-series {
    opacity: 1
}

.c-popup-series .js-hover-target {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.js-hover-target {
    background: var(--col-bg-img);
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .3s, transform 0s
}

.js-hover-target.now {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
    transition: opacity .3s, transform 1.2s
}

.js-hover-target.prev {
    opacity: 0;
    transform: scale(1);
    z-index: 1;
    transition: opacity 0s .3s, transform 0s 1.2s
}

.js-hover-target .c-bg-img {
    display: none
}

.js-hover-target.now .c-bg-img, .js-hover-target.prev .c-bg-img {
    display: block
}

.c-mq {
    display: inline-block;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    display: flex;
    color: var(--col-lgray);
    padding: 1em 0
}

.c-mq, .c-mq-ul {
    align-items: center
}

.c-mq-ul {
    display: flex;
    width: 200%
}

.c-mq-li {
    will-change: auto;
    display: inline-block
}

.c-mq-li .t {
    display: inline-block;
    padding: 0 1em
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.c-mq-ul .c-mq-li {
    will-change: transform;
    animation: marquee 30s linear infinite
}

[data-bg=dark] {
    background: var(--col-dgray);
    color: var(--col-white)
}

[data-bg=dark] use {
    fill: var(--col-white)
}

use {
    fill: var(--col-black)
}

.c-go {
    height: calc(var(--vh) * 100)
}

.c-go-lr {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--go)
}

.c-go-img {
    margin: 0 auto;
    width: calc(var(--gw) * 10);
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 2em))
}

.c-go-img-o {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--r);
    z-index: 1
}

.c-go-img-o .c-bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scale(calc(1 + var(--p2) * 0.5))
}

.c-video-full {
    height: calc(var(--vh) * 100);
    width: 100%
}

.p-footer-body {
    height: calc(var(--vh) * 100);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    transform: translateY(calc(var(--p2) * var(--vh) * -50))
}

.c-git {
    padding-top: var(--header-h);
    width: 100%;
    display: block
}

.c-git-body {
    height: calc(var(--gw) * 8);
    border-radius: var(--r);
    overflow: hidden
}

.c-git .c-mq-li {
    line-height: 0
}

.c-git .c-mq {
    font-weight: 500;
    color: var(--col-black);
    height: 100%;
    width: 100%
}

.c-mq-ul {
    position: relative;
    z-index: 2
}

.js-mouse-blur canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    max-width: 9999px;
    pointer-events: none
}

.c-sitemap .c-clip .o {
    white-space: nowrap
}

.c-sitemap-logo.c-clip {
    display: block;
    width: 17.187vw;
    height: 3.472vw
}

.c-sitemap-logo.c-clip .o, .c-sitemap-logo.c-clip .t {
    height: 100%;
    padding: 0
}

.c-address-lr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 300;
    margin-bottom: -1em;
    margin-top: -1em
}

.c-sitemap-lr {
    padding: 0 var(--gw)
}

.c-sitemap-cols {
    display: flex
}

.c-sitemap-col {
    width: calc(var(--gw) * 7)
}

.c-address-r {
    width: calc(var(--gw) * 9 + var(--go));
    display: flex;
    justify-content: space-between;
    align-items: center
}

.c-address-r .c-lang {
    padding: 0
}

.c-sitemap-ul li {
    margin-bottom: .2em
}

.c-sitemap-contact-ul {
    padding-top: 1em
}

.c-sitemap-contact-ul li {
    margin-bottom: .5em
}

.c-sitemap-contact-ul li > div {
    width: auto;
    display: inline-block
}

.js-backto, .js-goto {
    cursor: pointer
}

.js-backto *, .js-goto * {
    pointer-events: none
}

.c-archive-body {
    position: relative;
    z-index: 2;
    background: var(--col-white)
}

.c-archive-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--col-white)
}

.c-archive-ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--gw)
}

.c-archive-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    position: relative;
    z-index: 1;
    border-radius: var(--r);
    overflow: hidden;
    display: block
}

.c-archive-h {
    margin-bottom: 1em;
    padding-top: var(--gw);
    line-height: 1.2
}

.c-archive-cat {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.c-archive-cat a {
    line-height: 0
}

.c-archive-scroll {
    position: relative;
    margin-top: calc(var(--gw) * -2);
    background: var(--col-white)
}

.c-archive-scroll .c-archive-li {
    padding-bottom: var(--gw)
}

.c-archive-scroll .c-archive-h {
    padding-top: 1.5em
}

.c-archive-projects .c-archive-li:nth-child(3n-2) .c-archive-txt {
    padding-left: 1.5em
}

@media screen and (min-width: 1441px) {
    .c-archive-projects .c-archive-li:nth-child(3n-2) .c-archive-txt {
        padding-left: 0
    }

    .c-archive-projects .c-archive-li:nth-child(4n-3) .c-archive-txt {
        padding-left: 1.5em
    }

    [data-layout=archive] .c-archive-ul {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

.js-slide-toggle-target {
    height: 0;
    overflow: hidden
}

.is-slide-toggle-opened .js-slide-toggle-a .a {
    transform: rotate(90deg)
}

.c-sort-a {
    padding-top: calc(var(--gw) * 2);
    padding-bottom: var(--gw);
    display: block
}

.c-sort-a .c-clip, .c-sort-a .c-clip .o, .c-sort-a .c-clip .t {
    height: 1em
}

.c-sort-a .c-clip .t {
    padding-top: 0
}

.c-sort-th .c-clip .t {
    display: flex;
    align-items: flex-end
}

.c-sort-th {
    position: relative;
    margin-right: var(--go);
    width: calc(var(--gw) * 33 - var(--go))
}

.c-sort-th-h {
    padding-right: 1em
}

.c-sort-th-c {
    position: absolute;
    bottom: 1.2em;
    right: 0
}

.c-sort-th-b {
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%
}

.c-sort-th-split, .c-sort-th-tag {
    display: flex;
    align-items: flex-end
}

.c-sort-th-tag {
    padding-bottom: .125em;
    padding-right: .15em
}

.c-sort-th-name {
    display: flex;
    align-items: flex-end;
    height: 1em;
    overflow: hidden
}

.c-sort-th-name .js-split .o {
    padding-top: 0;
    margin-bottom: -.15em
}

.c-sort-tr {
    display: flex;
    align-items: flex-end
}

.c-sort-td {
    padding-bottom: 1.1em;
    text-align: center
}

.c-sort-td .c-clip {
    height: auto
}

.c-sort-td .c-clip .o {
    display: block
}

.c-sort-td .c-clip .o:last-child {
    margin-top: .75em
}

.c-sort .c-links-ul {
    padding-top: calc(var(--gw) * 0.5);
    padding-bottom: calc(var(--gw) * 1.5)
}

.c-border {
    overflow: hidden;
    height: 1px;
    width: 100%;
    opacity: .3
}

.c-archive-header .c-border {
    height: 2px;
    opacity: 1
}

.c-border div {
    height: 100%;
    width: 100%;
    background: var(--col-black);
    transform: translateY(-110%)
}

[data-shown="1"].c-border div, [data-shown="1"] .c-border div {
    transform: translate(0)
}

.c-sort-th-name {
    transform-origin: left bottom
}

.c-sort-body-lr {
    display: flex;
    justify-content: space-between
}

.c-sort-body-l {
    width: calc(100% - var(--gw) * 7 - var(--go) * 2)
}

.c-sort-body-r {
    padding-top: calc(var(--gw) * 0.5)
}

.c-sort-img-ul {
    width: calc(var(--gw) * 7);
    aspect-ratio: 1/1;
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    z-index: 1
}

.c-sort-img-li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

[data-ov-sort-static=true] .c-archive-header, [data-ov-sort=true] .c-archive-header {
    transform: translateY(calc(var(--gw) * -2))
}

[data-ov-sort-static=true] .c-sort-th-name, [data-ov-sort=true] .c-sort-th-name {
    transform: scale(.6)
}

[data-ov-sort-static=true] .c-sort-th-tag, [data-ov-sort=true] .c-sort-th-tag {
    padding-bottom: .07em
}

[data-ov-sort-static=true] .c-archive-header, [data-ov-sort-static=true] .c-sort-th-name {
    transition: transform 0s var(--ease-power4-out)
}

.c-pagging-lr {
    padding: 1em 0;
    justify-content: space-between
}

.c-pagging-l .t, .c-pagging-lr {
    display: flex;
    align-items: center
}

.c-hr-scroll {
    width: 100vw;
    overflow: hidden;
    position: relative
}

.c-hr-scroll-content {
    width: 99999px;
    position: fixed;
    top: 0
}

.c-hr-scroll-content, .c-hr-scroll-li {
    height: calc(var(--vh) * 100 - var(--s-header-h) * 1vw)
}

.c-hr-scroll-li {
    padding-right: var(--gw);
    position: relative
}

.c-hr-scroll-li a {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: var(--gw);
    padding-right: var(--gw);
    opacity: 0
}

.is-not-any.is-loaded .c-hr-scroll-li:hover a {
    opacity: 1
}

.c-hr-scroll-content {
    transform: translate(calc(-50% * var(--p1)));
    display: flex;
    align-items: center
}

.c-hr-scroll-ul {
    display: flex;
    align-items: center;
    min-width: 100vw;
    width: 99999px
}

.c-s-body {
    width: 100vw;
    position: fixed;
    transform: translateY(calc(var(--vh) * 100 - var(--s-header-h) * 1vw));
    left: 0;
    z-index: 3;
    height: calc(var(--vh) * 100);
    overflow: hidden
}

.c-s-body, .c-s-header {
    background: var(--col-white);
    top: 0
}

.c-s-header {
    max-height: calc(var(--gw) * 9.5);
    position: sticky;
    z-index: 2
}

.c-s-header .flex {
    padding: var(--go)
}

.c-s-title {
    margin-bottom: var(--go)
}

[data-xhr-namespace=single-project] .c-s-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    margin-bottom: var(--gw);
    line-height: 1.1;
    max-height: 2.4em
}

[data-xhr-namespace=single-project] .c-e-scroll {
    margin: 0
}

[data-xhr-namespace=single-project] .c-e-scroll._on .c-e-scroll-bar {
    position: fixed;
    right: var(--go);
    top: calc(var(--gw) * 10.5);
    width: 3px;
    height: 100%;
    max-height: calc(var(--vh) * 100 - var(--header-h) - var(--gw) * 10.5 - var(--go));
    top: auto;
    bottom: var(--go);
    height: 16.5em
}

[data-xhr-namespace=single-project] .c-s-content-wrapper {
    overflow: hidden
}

[data-xhr-namespace=single-project] .c-s-content-wrapper::-webkit-scrollbar, [data-xhr-namespace=single-project] .c-s-content-wrapper::-webkit-scrollbar-thumb, [data-xhr-namespace=single-project] .c-s-content-wrapper::-webkit-scrollbar-thumb:horizontal, [data-xhr-namespace=single-project] .c-s-content-wrapper::-webkit-scrollbar-track, [data-xhr-namespace=single-project] .c-s-content-wrapper::-webkit-scrollbar-track:horizontal, [data-xhr-namespace=single-project] .c-s-content-wrapper::-webkit-scrollbar:horizontal {
    width: 0;
    height: 0;
    background: transparent;
    border-radius: 0
}

.c-s-header .tr {
    align-items: center
}

.c-s-header .flex, .c-s-header .tr {
    display: flex;
    justify-content: space-between
}

.c-s-header .flex {
    flex-direction: column;
    height: 100%
}

.c-s-content {
    padding: 0 var(--go);
    background: #fff
}

.c-s-header .c-archive-cat-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.c-s-header .c-archive-cat-parent {
    padding-right: calc(var(--gw) * 2)
}

.c-s-header .c-archive-cat-parent li {
    margin-right: .25em
}

.c-s-header .c-archive-cat-parent li:last-child .ui-link-parent {
    padding-right: 0
}

.c-s-sub {
    display: flex;
    justify-content: center;
    align-items: center
}

.c-s-sub a:last-child {
    margin-left: calc(var(--gw) * 3)
}

.c-s-header .ui-btn-arrow .i svg {
    transform: rotate(0deg);
    width: 32%;
    height: 32%
}

.c-s-header .ui-btn-arrow .i.close {
    position: absolute;
    right: 0;
    top: 100%
}

.c-s-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--col-lgray);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--a-hover-s)
}

.is-single-content-opened .c-s-header .ui-btn-arrow .i {
    width: 3em
}

.is-single-content-opened .c-s-header .ui-btn-arrow .i.close {
    transform: translateY(-70%)
}

.is-single-content-opened .c-s-header .ui-btn-arrow .w:first-child {
    transform: translateY(-120%)
}

.is-single-content-opened .c-s-header .ui-btn-arrow .w {
    transform: translateY(-100%)
}

.is-single-content-opened .c-s-overlay {
    opacity: .25
}

.is-single-content-opened .c-s-body {
    transform: translateY(var(--header-h));
    height: calc(var(--vh) * 100 - var(--header-h));
    border-radius: var(--r) var(--r) 0 0
}

.is-single-content-opened .c-s-content-wrapper {
    overflow-x: hidden;
    height: 100%
}

.ui-btn-close-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 6;
    top: 0;
    right: 0;
    height: var(--header-h);
    padding: 0 calc(var(--go) * 2 - var(--gw) * 2);
    transform: translateY(-100%);
    transform: translate(0)
}

.ui-btn-close-wrap[data-shown="1"] {
    transform: translate(0)
}

.is-single-content-opened .ui-btn-close-wrap {
    transform: translateY(-100%)
}

.c-archive-li .c-bg-img {
    display: none
}

.c-archive-li[data-visible="1"] .c-bg-img {
    display: block
}

.c-archive-a [data-visible="1"].c-bg-img .elem {
    transition: opacity 1s, transform .8s
}

.is-not-any.is-loaded .c-archive-a:hover [data-visible="1"].c-bg-img .elem {
    transform: scale(1.05)
}

.c-hero-pattern {
    height: calc(var(--vh) * 100);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4
}

.c-hero-pattern .h1 {
    position: relative;
    z-index: 2;
    margin-top: -.25em
}

.c-hero-pattern-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%
}

.c-hero-pattern-img-wrap[data-visible="1"] .c-hero-pattern-img {
    will-change: transform, opacity
}

.c-hero-pattern-img-wrap[data-visible="1"] .c-hero-pattern-img .c-bg-img {
    will-change: transform
}

.c-hero-pattern-img {
    position: absolute;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: var(--r);
    will-change: auto;
    opacity: 0
}

.c-hero-pattern-img .c-bg-img {
    will-change: auto
}

[data-shown="1"] .c-hero-pattern-img[data-index="0"] {
    opacity: 1;
    transition: opacity 2s var(--ease-power4-out);
    transition-delay: 0s
}

[data-shown="1"] .c-hero-pattern-img[data-index="1"] {
    opacity: 1;
    transition: opacity 2s var(--ease-power4-out);
    transition-delay: .2s
}

[data-shown="1"] .c-hero-pattern-img[data-index="2"] {
    opacity: 1;
    transition: opacity 2s var(--ease-power4-out);
    transition-delay: .4s
}

[data-shown="1"] .c-hero-pattern-img[data-index="3"] {
    opacity: 1;
    transition: opacity 2s var(--ease-power4-out);
    transition-delay: .6s
}

[data-shown="1"] .c-hero-pattern-img[data-index="4"] {
    opacity: 1;
    transition: opacity 2s var(--ease-power4-out);
    transition-delay: .8s
}

[data-shown="1"] .c-hero-pattern-img[data-index="5"] {
    opacity: 1;
    transition: opacity 2s var(--ease-power4-out);
    transition-delay: 1s
}

.c-hero-pattern-img[data-index="0"] {
    width: calc(var(--gw) * 10);
    left: calc(var(--gw) * -1);
    bottom: 0
}

.c-hero-pattern-img[data-index="1"] {
    width: calc(var(--gw) * 10);
    top: calc(var(--gw) * -1);
    left: calc(var(--go) + var(--gw) * 3)
}

.c-hero-pattern-img[data-index="2"] {
    width: calc(var(--gw) * 4);
    left: 50%;
    top: 50%;
    margin-left: calc(var(--gw) * -6);
    margin-top: calc(var(--gw) * 2)
}

.c-hero-pattern-img[data-index="3"] {
    width: calc(var(--gw) * 7);
    left: 50%;
    top: 50%;
    margin-left: calc(var(--gw) * -1);
    margin-top: calc(var(--gw) * -7)
}

.c-hero-pattern-img[data-index="4"] {
    width: calc(var(--gw) * 10);
    bottom: calc(var(--gw) * 1 + var(--go));
    right: calc(var(--go))
}

.c-hero-pattern-img[data-index="5"] {
    width: calc(var(--gw) * 8);
    top: calc(var(--header-h) + var(--gw) * 1);
    right: calc(var(--gw) * -1)
}

.c-hero-lead {
    position: absolute;
    z-index: 3;
    bottom: calc(var(--gw) * 3);
    left: 0;
    text-align: center;
    width: 100%
}

.c-archive-span, .c-archive-span .c-sec-video-wrap {
    position: relative;
    z-index: 4
}

.c-archive-sub {
    margin-left: var(--go);
    width: calc(var(--gw) * 33 - var(--go))
}

.c-archive-patterns.c-archive-ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: var(--gw)
}

.c-archive-patterns.c-archive-ul .c-archive-thumb {
    aspect-ratio: 1/1
}

.c-xhr[data-type=single-pattern] .c-s-content-wrapper, [data-xhr-namespace=single-pattern] .c-s-content-wrapper {
    height: calc(var(--vh) * 100);
    position: relative;
    overflow: hidden
}

.c-s-pattern-body .ui-btn-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5
}

.c-s-pattern-content {
    width: 100%;
    padding-right: calc(var(--go) + var(--gw) * 3);
    position: relative
}

.c-e-scroll-wrap {
    max-height: 16.5em;
    overflow: hidden
}

.c-e-scroll {
    margin-bottom: -.15em
}

.c-e-scroll._on .c-e-scroll-bar {
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%
}

.c-e-scroll._on .c-e-scroll-bar .in:after {
    width: 1px;
    height: 100%;
    background-color: var(--col-border);
    position: absolute;
    right: 1px;
    top: 0;
    content: "";
    display: block
}

.c-e-scroll._on .c-e-scroll-thumb {
    z-index: 2;
    position: absolute;
    right: 0;
    top: calc(100% * var(--p1));
    transform: translateY(calc(-100% * var(--p1)));
    width: 100%;
    height: 0;
    background: #000;
    border-radius: 2.5px
}

.c-e-scroll._on .c-e-scroll-wrap {
    padding: 0 2em 0 0
}

.c-vr-scroll {
    overflow: hidden;
    position: relative;
    min-height: calc(var(--vh) * 100)
}

.c-vr-scroll-content {
    width: calc(50% - var(--go));
    height: 100%;
    position: fixed;
    top: 0;
    left: calc(var(--go));
    transform: translateY(calc(-50% * var(--p1)))
}

.c-vr-scroll-ul {
    margin-top: calc(var(--gw) * -0.5);
    margin-bottom: calc(var(--gw) * 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap
}

.c-vr-scroll-li .c-bg-img {
    transition: background .3s
}

.c-vr-scroll-li._on .c-bg-img {
    background-color: transparent
}

.c-vr-scroll-li {
    padding: calc(var(--gw) * 0.5) 0;
    width: 100%
}

.c-vr-scroll-li .c-bg-img {
    display: block;
    height: 100%
}

.c-vr-scroll-li .js-zoom-translate.in {
    position: absolute
}

.c-vr-scroll-content._off {
    overflow: hidden;
    position: relative;
    transform: translateY(0)
}

.c-vr-scroll-content._off, .c-vr-scroll-content._off .c-vr-scroll-ul {
    max-height: calc(var(--vh) * 100);
    height: calc(var(--vh) * 100)
}

.c-vr-scroll-content._off .c-vr-scroll-ul {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.c-vr-scroll-content._off .c-vr-scroll-li {
    padding: var(--go) 0;
    height: 100%;
    width: 100%
}

.c-vr-scroll-content._off .c-vr-scroll-li .c-bg-img, .c-vr-scroll-content._off .c-vr-scroll-li .c-bg-video {
    background: transparent
}

.c-vr-scroll-content._off .c-vr-scroll-li .c-bg-img img, .c-vr-scroll-content._off .c-vr-scroll-li .c-bg-video img, .c-vr-scroll-content._off .c-vr-scroll-li .c-bg-video video {
    object-fit: contain;
    object-position: center center
}

.c-vr-scroll-content._off .c-vr-scroll-li .elem {
    transform: scale(1) !important
}

.c-vr-scroll-progress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 4;
    width: calc(var(--go) + var(--gw) * 2);
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center
}

.c-s-content-aside {
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    height: calc(var(--vh) * 100);
    background-color: var(--col-white);
    z-index: 2;
    padding: var(--go)
}

.c-s-content-aside > .in {
    display: flex;
    align-items: flex-end
}

.c-s-content-aside .c-archive-cat-parent {
    padding-top: 1.25em;
    padding-bottom: 1.25em
}

.c-info-li {
    padding: .2em 0;
    display: flex;
    align-items: center
}

.c-info-th {
    width: 5em;
    padding-top: .1em
}

.c-s-content-aside {
    pointer-events: none
}

.c-s-content-aside .c-e-scroll, .c-s-content-aside .c-info .c-info-td, .c-s-content-aside a, .c-s-content-aside h1 {
    pointer-events: auto
}

.c-s-content-aside h1 {
    display: inline-block
}

.c-s-content-aside .ui-copy {
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0
}

.c-vr-scroll-li {
    position: relative
}

.c-s-content-aside, .c-vr-scroll-li {
    transition: opacity .6s var(--ease-power4-out)
}

.c-vr-scroll-li .ui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4
}

#app .c-vr-scroll-li._on, .is-not-any.is-loaded .js-zoom:hover .ui-icon-body {
    opacity: 1
}

#app .is-zoom-ing .c-vr-scroll-content {
    overflow: visible
}

#app .is-zoom-ing .c-s-content-wrapper {
    pointer-events: none;
    z-index: 5
}

#app .is-zoom-ing .c-vr-scroll-li._on {
    z-index: 4
}

#app .is-zoom-in .ui-icon-zoom .ui-icon-body {
    transform: scale(.5);
    opacity: 0
}

#app .is-zoom-in .c-s-content-aside, #app .is-zoom-in .c-vr-scroll-li {
    pointer-events: none;
    opacity: .3
}

#app .is-zoom-in .c-vr-scroll-li._on {
    opacity: 1
}

#app .is-zoom-in .c-s-content-bg {
    cursor: pointer;
    pointer-events: auto
}

.c-s-content-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    text-indent: -9999px
}

.js-zoom-scale, .js-zoom-translate {
    will-change: auto
}

._ing .js-zoom-scale, ._ing .js-zoom-translate {
    will-change: transform
}

.c-sec-video {
    position: relative;
    z-index: 2
}

.c-sec-video .c-video-full {
    background-color: var(--col-bg-img);
    overflow: hidden;
    clip-path: inset(0 0 0 0 round 0);
    will-change: auto
}

.c-sec-video .c-video-full[data-anim="0"] {
    will-change: clip-path
}

.c-sec-video .c-video-full .c-bg-video[data-visible="1"] .elem video, .c-sec-video .c-video-full .c-bg-video[data-visible="1"] .poster {
    will-change: transform
}

.c-sec-video .c-video-full .elem video, .c-sec-video .c-video-full .poster {
    will-change: auto;
    transform: scale(calc(1 + var(--p2) * 0.1))
}

.c-sec-video .c-video-full {
    clip-path: inset(calc(var(--go) * min(var(--p1) * 2, 1)) calc(var(--go) * min(var(--p1) * 2, 1)) calc(var(--go) * min(var(--p1) * 2, 1)) calc(var(--go) * min(var(--p1) * 2, 1)) round calc(var(--r) * min(var(--p1) * 2, 1)))
}

[data-xhr-namespace=patterns] .c-sec-video-wrap {
    transform: translateY(calc(var(--p2) * (var(--gw) + var(--go)) * -1));
    will-change: auto
}

[data-xhr-namespace=about] .c-sec-video .c-video-full, [data-xhr-namespace=patterns] .c-sec-video .c-video-full {
    will-change: auto;
    transition: none;
    clip-path: inset(calc(var(--go) * 1) calc(var(--go) * 1) calc(var(--go) * 1) calc(var(--go) * 1) round calc(var(--r)))
}

[data-xhr-namespace=about] .c-sec-video .c-video-full {
    margin-top: calc(var(--go) * -1);
    margin-bottom: calc(var(--go) * -1)
}

.c-a-header {
    position: relative;
    height: calc(var(--vh) * 100)
}

.c-a-header .c-body {
    height: 100%
}

.c-a-header .h1 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(calc(-50% - .3em));
    text-align: center;
    width: 100%;
    line-height: 0
}

.c-a-header .h1 .l {
    position: relative;
    display: inline-block;
    height: .95em
}

.c-a-header .h1 .b {
    position: absolute;
    z-index: 1;
    width: 4.35em;
    height: .4em;
    right: 0;
    bottom: -.21em;
    overflow: hidden
}

.c-a-header .h1 .b div {
    background-color: var(--col-yellow);
    width: 100%;
    height: 100%;
    transform: scaleX(0)
}

.c-a-header .h1[data-shown="1"] .b div {
    transform: scale(1);
    transition: transform 1.8s .5s var(--ease-power4-out)
}

.c-a-header .h1 .l .js-split {
    position: relative;
    z-index: 2;
    line-height: 1;
    display: block
}

.c-a-header .c-lead {
    position: absolute;
    bottom: var(--go)
}

.c-a-header .c-lead.l {
    left: var(--go)
}

.c-a-header .c-lead.r {
    right: var(--go);
    text-align: right
}

.c-a-header .h1 {
    z-index: 10
}

.c-frame, .c-sprite {
    pointer-events: none
}

.c-frame {
    width: calc(var(--fw) * 0.035vw);
    height: calc(var(--fh) * 0.035vw)
}

.c-a-header {
    z-index: 1
}

.c-frame .c-img {
    width: calc(var(--fw) * 0.035vw);
    height: calc(var(--fh) * 0.035vw);
    background-position-x: calc(var(--fx) * 0.035vw * -1);
    background-position-y: calc(var(--fy) * 0.035vw * -1);
    background-size: calc(var(--sw) * 0.035vw) calc(var(--sh) * 0.035vw)
}

.js-para-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0
}

.c-sprite[data-type=bg] .c-frame {
    position: absolute;
    z-index: 11
}

.c-sprite[data-type=bg] .c-frame[data-name="1.png"] {
    left: 12.361vw;
    top: 10.416vw
}

.c-sprite[data-type=bg] .c-frame[data-name="2.png"] {
    left: 47.916vw;
    top: 2.777vw
}

.c-sprite[data-type=bg] .c-frame[data-name="3.png"] {
    right: 1.631vw;
    top: 17.013vw
}

.c-sprite[data-type=bg] .c-frame[data-name="4.png"] {
    right: 16.18vw;
    bottom: 6.597vw
}

.c-sprite[data-type=bg] .c-frame[data-name="5.png"] {
    left: 38.888vw;
    bottom: 3.819vw
}

.c-sprite[data-type=bg] .c-frame[data-name="6.png"] {
    left: 6.25vw;
    bottom: 9.722vw
}

.c-sprite[data-type=pop] .c-frame {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25vw;
    height: 25vw;
    z-index: 3
}

.c-sprite[data-type=pop] .c-frame .c-img {
    transform: scale(0)
}

.c-sec-message {
    display: flex;
    justify-content: center;
    align-items: center
}

.c-sec-title .c-clip {
    line-height: 0;
    margin-bottom: .15em
}

.c-sec-title {
    margin-bottom: -.15em;
    line-height: 0
}

.c-sec-profile .c-td-l {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gw)
}

.c-sec-profile .c-td-r {
    width: calc(var(--gw) * 23);
    margin-top: calc(var(--gw) * -3)
}

.c-profile-img {
    overflow: hidden;
    border-radius: var(--r);
    width: calc(var(--gw) * 10)
}

.c-sec-company {
    background-color: var(--col-white)
}

.c-services-li {
    height: calc(var(--vh) * 100);
    overflow: hidden;
    position: relative;
    width: 100vw
}

.c-services-li-panel-clip {
    height: calc(var(--vh) * 100);
    position: relative;
    clip-path: inset(0 0 0 0);
    order: 0;
    place-self: auto;
    margin: 0;
    inset: 0;
    position: absolute;
    flex-basis: auto;
    overflow: visible;
    box-sizing: border-box;
    width: 100vw
}

.c-services-li:first-child .c-services-li-panel-clip {
    clip-path: inset(0 0 0 0 round var(--r) var(--r) 0 0)
}

.c-services-li:last-child .c-services-li-panel-clip {
    clip-path: inset(0 0 0 0 round 0 0 var(--r) var(--r))
}

.c-services-li-panel {
    width: calc(var(--gw) * 20);
    background: var(--col-white);
    padding-top: calc(var(--go) * 1.25);
    padding-bottom: calc(var(--go) * 1.5);
    overflow: hidden;
    border-radius: var(--r)
}

.c-services-li-panel-fixed {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 0;
    z-index: 2;
    transform: translateY(calc(var(--p1) * var(--vh) * 100 * -1 * 0.5 + var(--vh) * 100 * 0.5 * 0.5 - 50%))
}

.c-services-li-bg {
    height: calc(var(--vh) * 100);
    transform: translateY(calc(var(--p1) * var(--vh) * 100 * -1 + var(--vh) * 100 * 0.5 - 50%)) scale(calc(1.1 - var(--p1) * 0.1));
    width: 100%;
    top: 50%;
    left: 0;
    position: fixed;
    z-index: 1
}

.c-services-li-num {
    padding-bottom: 1em
}

.c-services-li-price.c-clip .o {
    display: block
}

.c-services-li-panel-content {
    width: 21em;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.c-services-li-panel-content > div {
    width: 100%
}

.c-service-img {
    overflow: hidden;
    border-radius: var(--r)
}

.c-sec-price {
    background-color: var(--col-white)
}

[lang=en] .c-services-txt {
    text-align: center
}

dl {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

dl dt {
    padding-top: .2em;
    width: calc(var(--gw) * 7)
}

dl dd, dl dt {
    padding-bottom: 1em
}

dl dd {
    width: calc(100% - var(--gw) * 7)
}

dl dd:last-child, dl dt:last-child {
    padding-bottom: 0
}

dl dd .ui-btn {
    margin: .5em 0 1em
}

.c-contact {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: calc(var(--vh) * 100)
}

.c-contact canvas {
    position: absolute;
    z-index: 0;
    opacity: .7
}

.c-contact .h1 .js-split .o {
    padding-top: 0;
    margin-bottom: -.3em
}

.c-contact-header {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1
}

.c-contact-header-body {
    width: 100%
}

.c-contact-content {
    padding-bottom: var(--go);
    position: relative;
    z-index: 1
}

.c-link-b .c-link-title .a {
    height: 100%
}

.c-link-b .c-link-title .a svg {
    transform: rotate(-90deg)
}

.c-link-b .c-link-title .b {
    bottom: 0;
    top: auto
}

.c-link-b .c-link-title .w-label {
    padding-bottom: .8em;
    width: calc(var(--gw) * 4)
}

.c-link-b .c-link-title .w-flex {
    display: flex;
    align-items: flex-end
}

.c-link-b .c-link-title .w-flip {
    height: 1em;
    overflow: hidden
}

.c-link-b .c-link-title.c-clip .o {
    height: 1em;
    margin-bottom: -.22em
}

.c-link-b .c-link-title.c-clip .t {
    padding-top: 0;
    height: 1em
}

.c-link-b .c-link-title .t {
    height: 1em
}

.c-copy .w-flip div {
    transition: transform var(--a-global-t-s) var(--ease-power4-out);
    height: 1.4em
}

.is-not-any.is-loaded .c-copy:hover .w-flip div {
    transform: translateY(-100%)
}

#app .c-copy._ok .w-flip div {
    transform: translateY(-200%)
}

.c-editor-wrap {
    margin-top: calc(var(--go) * -1)
}

.c-editor-aside, .c-editor-main {
    padding-top: var(--go)
}

.c-editor-aside {
    position: sticky;
    top: 0
}

.c-side-ul li {
    margin-bottom: .5em
}

.c-side-ul li > div {
    display: inline-block
}

[data-xhr-namespace="404"] .c-title {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1em
}

[data-xhr-namespace="404"] .c-sprite {
    position: absolute;
    top: 0;
    z-index: 0
}

[data-xhr-namespace="404"] .c-sprite[data-type=pop] {
    z-index: 1
}

[data-xhr-namespace="404"] .p-header {
    height: calc(var(--vh) * 100)
}

[data-xhr-namespace="404"] .js-split .o {
    padding-top: 0
}

[data-xhr-namespace="404"] .l1 {
    position: relative;
    z-index: 2
}

[data-xhr-namespace="404"] .l2 {
    position: relative;
    z-index: 0
}

[data-xhr-namespace="404"] .l3 {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: calc(var(--gw) * 1.5)
}

@media (prefers-reduced-motion: reduce) {
    .c-cursor {
        display: none !important
    }

    * {
        transition: none !important;
        animation: none !important
    }
}

.c-cursor {
    position: fixed;
    z-index: 99;
    pointer-events: none;
    height: 2em;
    width: 4.513vw;
    border-radius: 1em;
    overflow: hidden;
    margin-left: -2.2565vw;
    margin-top: -1.75em
}

.is-any .c-cursor {
    display: none !important
}

.c-cursor-body {
    width: 100%;
    height: 100%;
    position: relative
}

.c-cursor-t {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    height: 2em;
    width: 4.513vw;
    justify-content: center;
    align-items: center;
    color: var(--col-white)
}

[data-cursor=view] .c-cursor-t[data-type=view] .t, [data-cursor=zoom] .c-cursor-t[data-type=zoom] .t {
    transform: translate(0)
}

.c-cursor-blur {
    width: 100%;
    height: 100%;
    border-radius: 1em;
    overflow: hidden;
    backdrop-filter: saturate(100%) blur(.347vw);
    background: hsla(0, 0%, 62.7%, .3);
    transition: opacity .3s, transform var(--a-global-t-s) var(--ease-power4-out);
    opacity: 0;
    transform: translateY(1em);
    z-index: 0
}

.is-cursor-active .c-cursor-blur {
    opacity: 1;
    transform: translate(0)
}

:root {
    --hero-w: calc(var(--gw) * 16);
    --hero-h: calc(var(--hero-w) * 1.33232);
    --hero-g: calc(var(--gw) * 1);
    --hero-r: calc(100vw - var(--hero-l) - var(--hero-w));
    --hero-l: calc(var(--gw) * 3 + var(--hero-g) + var(--hero-g) + var(--gw) * 8 + var(--gw) * 12 + var(--hero-g) * 2);
    --hero-t: calc(var(--gw) * 3);
    --hero-b: calc(var(--gw) * 3);
    --hero-x: calc(var(--hero-l) - 50vw + var(--hero-w) * 0.5);
    --hero-y: calc(var(--hero-h) * -0.33)
}

.c-hero {
    position: relative;
    height: calc(var(--vh) * 230)
}

.c-hero-sticky {
    position: sticky;
    overflow: hidden;
    perspective: 200vw
}

.c-hero-clip, .c-hero-sticky {
    top: 0;
    height: calc(var(--vh) * 100);
    width: 100%;
    z-index: 2
}

.c-hero-clip {
    left: 0;
    position: absolute;
    clip-path: inset(calc(var(--hero-t) * var(--p2)) calc(var(--hero-r) * var(--p2)) calc(var(--hero-b) * var(--p2)) calc(var(--hero-l) * var(--p2)) round calc(var(--r)))
}

.c-hero-mv {
    width: 100%;
    height: 100%;
    transform: scale(calc(1 + var(--p2) * 0.1));
    transform: scale(calc(1 + var(--p2) * 0.1)) translate(calc(var(--hero-x) * var(--p2)))
}

.c-hero-img {
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    border-radius: calc(var(--r) * var(--p2))
}

.c-hero-img[data-x="0"][data-y="0"] {
    width: calc(var(--gw) * 12);
    height: calc(var(--gw) * 12 * 1.33232);
    left: calc(var(--gw) * 3 + var(--hero-g));
    top: var(--hero-t);
    margin-left: calc(var(--gw) * 12 * -1)
}

.c-hero-img[data-x="1"][data-y="0"] {
    top: calc(var(--gw) * 2 + var(--hero-t))
}

.c-hero-img[data-x="1"][data-y="0"], .c-hero-img[data-x="1"][data-y="1"] {
    width: calc(var(--gw) * 8);
    height: calc(var(--gw) * 8 * 1.33232);
    left: calc(var(--gw) * 3 + var(--hero-g) + var(--hero-g))
}

.c-hero-img[data-x="1"][data-y="1"] {
    top: calc(var(--gw) * 2 + var(--hero-t) + var(--gw) * 8 * 1.33232 + var(--hero-g))
}

.c-hero-img[data-x="2"][data-y="0"] {
    width: calc(var(--gw) * 12);
    height: calc(var(--gw) * 12 * 1.33232);
    top: calc(var(--gw) * 4 + var(--hero-t));
    left: calc(var(--gw) * 3 + var(--hero-g) + var(--hero-g) + var(--gw) * 8 + var(--hero-g))
}

.c-hero-img[data-x="3"][data-y="0"] {
    width: calc(var(--gw) * 12);
    height: calc(var(--gw) * 12 * 1.33232);
    top: calc(var(--gw) * 2 + var(--hero-t));
    left: calc(var(--hero-l) + var(--hero-w) + var(--hero-g))
}

.c-hero-img.l:nth-child(0) {
    transform-origin: center left;
    transform: rotateX(calc(0deg * var(--p1))) rotateY(calc(0deg * var(--p1))) rotate(calc(0deg * var(--p1))) translate(calc(var(--go) * var(--p1) * -1 + var(--hero-l) * var(--p1) * -1 + -8vw * var(--p1)), calc(-100vh * var(--p1) * 0.25 + -40vw * var(--p1) * 0.25))
}

.c-hero-img.l:nth-child(0) .c-bg-img {
    transform: scale(calc(1 + var(--p1) * 0.3))
}

.c-hero-img.l:first-child {
    transform-origin: center left;
    transform: rotateX(calc(0deg * var(--p1))) rotateY(calc(0deg * var(--p1))) rotate(calc(0deg * var(--p1))) translate(calc(var(--go) * var(--p1) * -1 + var(--hero-l) * var(--p1) * -1 + -6vw * var(--p1)), calc(-100vh * var(--p1) * 0.25 + -30vw * var(--p1) * 0.25))
}

.c-hero-img.l:first-child .c-bg-img {
    transform: scale(calc(1 + var(--p1) * 0.3))
}

.c-hero-img.l:nth-child(2) {
    transform-origin: center left;
    transform: rotateX(calc(0deg * var(--p1))) rotateY(calc(0deg * var(--p1))) rotate(calc(0deg * var(--p1))) translate(calc(var(--go) * var(--p1) * -1 + var(--hero-l) * var(--p1) * -1 + -4vw * var(--p1)), calc(-100vh * var(--p1) * 0.25 + -20vw * var(--p1) * 0.25))
}

.c-hero-img.l:nth-child(2) .c-bg-img {
    transform: scale(calc(1 + var(--p1) * 0.3))
}

.c-hero-img.l:nth-child(3) {
    transform-origin: center left;
    transform: rotateX(calc(0deg * var(--p1))) rotateY(calc(0deg * var(--p1))) rotate(calc(0deg * var(--p1))) translate(calc(var(--go) * var(--p1) * -1 + var(--hero-l) * var(--p1) * -1 + -2vw * var(--p1)), calc(-100vh * var(--p1) * 0.25 + -10vw * var(--p1) * 0.25))
}

.c-hero-img.l:nth-child(3) .c-bg-img {
    transform: scale(calc(1 + var(--p1) * 0.3))
}

.c-hero-img.l:nth-child(4) {
    transform-origin: center left;
    transform: rotateX(calc(0deg * var(--p1))) rotateY(calc(0deg * var(--p1))) rotate(calc(0deg * var(--p1))) translate(calc(var(--go) * var(--p1) * -1 + var(--hero-l) * var(--p1) * -1 + 0vw * var(--p1)), calc(-100vh * var(--p1) * 0.25 + 0vw * var(--p1) * 0.25))
}

.c-hero-img.l:nth-child(4) .c-bg-img {
    transform: scale(calc(1 + var(--p1) * 0.3))
}

.c-hero-img.r {
    transform-origin: center right;
    transform: rotateX(calc(0deg * var(--p1) * -1)) rotateY(calc(0deg * var(--p1) * -1)) rotate(calc(0deg * var(--p1) * -1)) translate(calc(var(--go) * var(--p1) + var(--hero-r) * var(--p1) * 1), calc(-100vh * var(--p1) * 0.2))
}

.c-hero-img.r .c-bg-img {
    transform: scale(calc(1 + var(--p1) * 0.3))
}

.c-hero-clip, .c-hero-img, .c-hero-mv {
    will-change: auto
}

.c-hero-img[data-visible="1"], [data-visible="1"] .c-hero-mv {
    will-change: transform
}

.c-hero-clip[data-visible="1"] {
    will-change: clip-path
}

.a-clip, .c-clip, .c-flip {
    line-height: 1
}

.a-clip span, .c-clip span, .c-flip span {
    display: inline-block
}

.a-clip .o, .c-clip .o, .c-flip .o {
    position: relative;
    overflow: hidden;
    line-height: 1;
    height: 1.4em;
    display: inline-block
}

.a-clip .t, .c-clip .t, .c-flip .t {
    padding-top: .3em
}

.a-clip .t, .a-clip .w, .c-clip .t, .c-clip .w, .c-flip .t, .c-flip .w {
    line-height: 1;
    height: 1.4em;
    transform: translateY(0)
}

.c-clip-a {
    line-height: 1.5
}

.c-clip-a .o, .c-clip-a .t {
    line-height: 1.5;
    height: auto
}

.c-clip-a .t {
    padding-top: 0
}

.c-clip-a .w {
    line-height: 1.5;
    height: auto
}

.c-clip-i .c-clip .o, .c-clip-i .c-flip .o, .c-clip-i .o, .h3.c-clip .o, .h3.c-flip .o, .t-upper.c-clip .o, .t-upper .c-clip .o, .t-upper.c-flip .o, .t-upper .c-flip .o {
    margin-top: -.06em;
    margin-bottom: -.06em;
    height: .8em
}

.c-clip-i .c-clip .t, .c-clip-i .c-flip .t, .c-clip-i .t, .h3.c-clip .t, .h3.c-flip .t, .t-upper.c-clip .t, .t-upper .c-clip .t, .t-upper.c-flip .t, .t-upper .c-flip .t {
    height: .8em;
    padding-top: 0
}

.c-clip-i .c-clip .w, .c-clip-i .c-flip .w, .c-clip-i .w, .h3.c-clip .w, .h3.c-flip .w, .t-upper.c-clip .w, .t-upper .c-clip .w, .t-upper.c-flip .w, .t-upper .c-flip .w {
    height: .8em
}

.c-clip-svg .o, .c-clip-svg .t, .js-split {
    width: 100%
}

.js-split {
    line-height: .72
}

.js-split .o {
    line-height: 1;
    overflow: hidden;
    padding-top: .2em;
    margin-bottom: -.4em
}

.js-split .o, .js-split span {
    display: inline-block
}

.js-split[data-type=line] div {
    white-space: nowrap;
    word-break: keep-all
}

.js-split .s {
    display: inline-block;
    width: .2em;
    height: 100%
}

.js-split-i, .t-upper.js-split, .t-upper .js-split {
    margin-bottom: -.1em
}

.js-split-i .o, .t-upper.js-split .o, .t-upper .js-split .o {
    margin-top: -.06em;
    padding-top: 0;
    margin-bottom: 0;
    height: .8em
}


.c-local.is-scroll-ready .c-s-body, .ui-icon-body, .ui-icon-body svg, .ui-toggle-menu .b:after, .ui-toggle-menu canvas {
    transition: background .3s, opacity .3s, color .3s, border-radius .3s var(--ease-power4-out), transform var(--a-global-t-s) var(--ease-power4-out)
}

.a-clip .t, .c-clip .t, .c-split .c, .c-split .t, .c-split .w {
    transition: opacity var(--a-clip-o-s) var(--a-clip-o-e), transform var(--a-clip-s) var(--a-clip-e)
}

.c-fade {
    transition: opacity var(--a-clip-s) var(--a-clip-e)
}

.c-hr-scroll-li a, .c-menu-header a, .c-s-header .ui-btn-arrow .i svg, .c-s-header .ui-btn-arrow .w, .ui-btn-close-wrap, .ui-toggle-menu .b {
    transition: background .3s, opacity .3s, transform var(--a-global-t-s) var(--ease-power4-out)
}

.c-menu-bg, .c-menu-body {
    transition: opacity .3s, transform var(--a-global-t-s) var(--ease-power4-out)
}

.c-archive-header, .c-flip .w, .c-logo, .c-nav-wrap, .c-sort-th-name, .c-splash .ui-link-bd .t, .js-slide-toggle-a .a, .ui-copy .c-clip .w, .ui-copy .ui-copy-label .a-clip .w, .ui-toggle-menu .w {
    transition: transform var(--a-global-t-s) var(--ease-power4-out)
}

.ui-btn-ghost {
    transition: background .3s, opacity .3s, transform var(--a-global-t-s) var(--ease-power4-out)
}

.ui-btn-ghost .w, .ui-btn-ghost:after {
    transition: background .3s, opacity .3s, border-radius .3s var(--ease-power4-out), transform var(--a-global-t-s) var(--ease-power4-out)
}

.ui-link-bd .b {
    transition: transform var(--a-hover-s) var(--ease-power2-out)
}

.is-loaded .c-sort-th-tag {
    transition: padding var(--a-global-t-s) var(--ease-power4-out)
}

.is-not-any.is-loaded .ui-btn {
    transition: border-color var(--a-hover-s)
}

#app .c-go-title .js-split .s {
    width: .225em
}

#app .js-split [data-word=push] .s, #app .js-split [data-word=the] .s {
    width: .2em
}

#app .js-split [data-word=In] .s, #app .js-split [data-word=Pushing] .s {
    width: .1em
}

#app .js-split [data-word=Touch] [data-char=T] {
    letter-spacing: -.15em
}

#app .js-split [data-word=boundaries] [data-char=d] {
    letter-spacing: -.075em
}

.c-hero-pattern-title [data-word=Patterns] [data-char=P] {
    letter-spacing: -.115em
}

.c-hero-pattern-title [data-word=Patterns] [data-char=a] {
    letter-spacing: -.135em
}

.c-hero-pattern-title [data-word=Patterns] [data-char=t] {
    letter-spacing: .04em
}

.c-hero-pattern-title [data-word=Patterns] [data-char=e] {
    margin-left: -.0425em
}



.c-lead .js-split {
    line-height: 1.2
}

.c-intro {
    line-height: 1.7
}

[lang=en] .c-sec-company, [lang=en] .c-sec-company .c-clip-a .o, [lang=en] .c-sec-company .c-clip-a .t, [lang=en] .c-services-txt {
    line-height: 1.2
}

[lang=en] dl dt {
    padding-top: 0
}

[lang=en] .c-editor, [lang=en] .c-intro {
    line-height: 1.5
}

[lang=en] .c-editor .js-split {
    line-height: 1.7
}

[lang=en] .c-editor h2, [lang=en] .c-editor h3, [lang=en] .c-editor h4, [lang=en] .c-editor h5, [lang=en] .c-editor h6 {
    line-height: 1.5
}

[lang=en] #app .c-editor.is-ja {
    font-weight: 400;
    line-height: 1.7
}

[lang=en] #app .c-editor.is-ja h2, [lang=en] #app .c-editor.is-ja h3, [lang=en] #app .c-editor.is-ja h4, [lang=en] #app .c-editor.is-ja h5, [lang=en] #app .c-editor.is-ja h6 {
    line-height: 1.6
}

.c-s-title.h4 {
    line-height: 1.2
}

[lang=en] .js-detect-lg.is-ja, [lang=ja] .c-intro, [lang=ja] .w-500j {
    font-weight: 500
}

.w-200 {
    font-weight: 200
}

.w-300 {
    font-weight: 300
}

.w-400 {
    font-weight: 400
}

.w-500 {
    font-weight: 500
}

.w-600 {
    font-weight: 600
}

.h1, .h2, .h3, h1, h2, h3, h4 {
    font-weight: 500;
    line-height: 1
}

.h0 {
    font-size: 12.152vw
}

.h1 {
    font-size: 8.68vw
}

.f-xxxl {
    font-size: 6.944vw
}

.f-xxl {
    font-size: 5.555vw
}

.f-xl, .h3 {
    font-size: 4.861vw
}

.h4 {
    font-size: 3.194vw
}

.f-l {
    font-size: 2.777vw
}

.f-mmml {
    font-size: 2.083vw
}

.f-mml {
    font-size: 1.666vw
}

.f-ml {
    font-size: 1.388vw
}

.c-editor, .c-intro, .f-mm {
    font-size: max(1.041vw, 12px)
}





@media screen and (max-width: 1200px) {
    .is-any .c-menu .c-menu-header a {
        pointer-events: auto;
        opacity: 1;
        transform: translate(0) scale(1)
    }

    .is-any .c-nav-wrap {
        transform: translateY(-100%);
        pointer-events: none
    }

    .is-any .c-logo {
        transform: translate(0);
        pointer-events: auto
    }

    .hide-tb {
        display: none !important
    }

    .show-tb {
        display: block !important
    }

    .c-menu-body {
        width: 50vw;
        max-height: calc(var(--vh) * 100 - var(--header-h) + var(--gw) * 2 - var(--go) * 2)
    }

    .c-menu-lang a {
        width: calc(var(--gw) * 3);
        height: calc(var(--gw) * 3)
    }

    #app .c-sec-video {
        padding: var(--go) var(--go) 0 var(--go)
    }

    #app .c-sec-video .c-video-full {
        clip-path: none;
        height: auto;
        position: relative;
        z-index: 1;
        overflow: hidden;
        border-radius: var(--r);
        width: 100%;
        aspect-ratio: 16/9
    }

    .c-services-li-panel-fixed {
        transform: translateY(calc(var(--p1) * var(--vh) * 100 * -1 * 0.5 + var(--vh) * 100 * 0.5 * 0.5 - 50%))
    }

    .c-services-li-bg {
        height: calc(var(--vh) * 100);
        transform: translateY(calc(var(--p1) * var(--vh) * 100 * -1 + var(--vh) * 100 * 0.5 - 50%)) scale(calc(1.1 - var(--p1) * 0.1))
    }
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    :root {
        --col-gray: #000;
        --header-h: 8.333vw;
        --r: .694vw;
        --go: 3.125vw;
        --hero-w: calc(100vw - var(--gw) * 13 - var(--gw) * 22 * 0.5);
        --hero-h: calc(var(--hero-w) * 1.33232);
        --single-w: var(--hero-w);
        --sprite-vw: 0.05vw;
        --hero-g: calc(var(--gw) * 1);
        --hero-l: calc(var(--hero-g) * -1 + var(--gw) * 13 + var(--hero-g));
        --hero-r: calc(100vw - var(--hero-l) - var(--hero-w));
        --hero-t: calc(var(--gw) * 6);
        --hero-b: calc(var(--vh) * 100 - var(--hero-h) - var(--hero-t))
    }

    [data-tb="0"] {
        height: calc(var(--gw) * 0)
    }

    [data-tb=".5"] {
        height: calc(var(--gw) * 0.5)
    }

    [data-tb="1"] {
        height: calc(var(--gw) * 1)
    }

    [data-tb="1.5"] {
        height: calc(var(--gw) * 1.5)
    }

    [data-tb="2"] {
        height: calc(var(--gw) * 2)
    }

    [data-tb="2.5"] {
        height: calc(var(--gw) * 2.5)
    }

    [data-tb="3"] {
        height: calc(var(--gw) * 3)
    }

    [data-tb="3.5"] {
        height: calc(var(--gw) * 3.5)
    }

    [data-tb="4"] {
        height: calc(var(--gw) * 4)
    }

    [data-tb="4.5"] {
        height: calc(var(--gw) * 4.5)
    }

    [data-tb="5"] {
        height: calc(var(--gw) * 5)
    }

    [data-tb="5.5"] {
        height: calc(var(--gw) * 5.5)
    }

    [data-tb="6"] {
        height: calc(var(--gw) * 6)
    }

    [data-tb="6.5"] {
        height: calc(var(--gw) * 6.5)
    }

    [data-tb="7"] {
        height: calc(var(--gw) * 7)
    }

    [data-tb="7.5"] {
        height: calc(var(--gw) * 7.5)
    }

    [data-tb="8"] {
        height: calc(var(--gw) * 8)
    }

    [data-tb="8.5"] {
        height: calc(var(--gw) * 8.5)
    }

    [data-tb="9"] {
        height: calc(var(--gw) * 9)
    }

    [data-tb="9.5"] {
        height: calc(var(--gw) * 9.5)
    }

    [data-tb="10"] {
        height: calc(var(--gw) * 10)
    }

    [data-tb="10.5"] {
        height: calc(var(--gw) * 10.5)
    }

    [data-tb="11"] {
        height: calc(var(--gw) * 11)
    }

    [data-tb="11.5"] {
        height: calc(var(--gw) * 11.5)
    }

    [data-tb="12"] {
        height: calc(var(--gw) * 12)
    }

    [data-tb="12.5"] {
        height: calc(var(--gw) * 12.5)
    }

    [data-tb="13"] {
        height: calc(var(--gw) * 13)
    }

    [data-tb="13.5"] {
        height: calc(var(--gw) * 13.5)
    }

    [data-tb="14"] {
        height: calc(var(--gw) * 14)
    }

    [data-tb="14.5"] {
        height: calc(var(--gw) * 14.5)
    }

    [data-tb="15"] {
        height: calc(var(--gw) * 15)
    }

    [data-tb="15.5"] {
        height: calc(var(--gw) * 15.5)
    }

    [data-tb="16"] {
        height: calc(var(--gw) * 16)
    }

    [data-tb="16.5"] {
        height: calc(var(--gw) * 16.5)
    }

    [data-tb="17"] {
        height: calc(var(--gw) * 17)
    }

    [data-tb="17.5"] {
        height: calc(var(--gw) * 17.5)
    }

    [data-tb="18"] {
        height: calc(var(--gw) * 18)
    }

    [data-tb="18.5"] {
        height: calc(var(--gw) * 18.5)
    }

    [data-tb="19"] {
        height: calc(var(--gw) * 19)
    }

    [data-tb="19.5"] {
        height: calc(var(--gw) * 19.5)
    }

    [data-tb="20"] {
        height: calc(var(--gw) * 20)
    }

    [data-tb="0"] {
        display: none
    }

    .c-hero-clip, .c-hero-sticky {
        height: calc(var(--vh) * 100)
    }

    .c-hero {
        height: calc(var(--vh) * 200)
    }

    .c-hero-mv {
        transform: scale(calc(.6 + var(--p1) * 0.4 + var(--p2) * 0.1)) translate(calc(var(--hero-x) * var(--p2)), calc(var(--hero-y) * var(--p2)))
    }

    .c-hero-img[data-x="0"][data-y="0"], .c-hero-img[data-x="2"][data-y="0"] {
        display: none
    }

    .c-hero-img[data-x="1"][data-y="0"] {
        top: calc(var(--hero-t) - var(--gw) * 3)
    }

    .c-hero-img[data-x="1"][data-y="0"], .c-hero-img[data-x="1"][data-y="1"] {
        width: calc(var(--gw) * 13);
        height: calc(var(--gw) * 13 * 1.33232);
        left: calc(var(--hero-g) * -1)
    }

    .c-hero-img[data-x="1"][data-y="1"] {
        top: calc(var(--hero-t) - var(--gw) * 3 + var(--gw) * 13 * 1.33232 + var(--hero-g))
    }

    .c-hero-img[data-x="3"][data-y="0"] {
        width: calc(var(--gw) * 22);
        height: calc(var(--gw) * 22 * 1.33232);
        top: var(--hero-t)
    }

    .c-logo a {
        width: 9.027vw
    }

    .c-header-bg, [data-xhr-namespace=home] .c-header-bg {
        height: calc(var(--gw) * 10)
    }

    .c-menu-body {
        width: 60vw;
        max-height: calc(var(--vh) * 100 - var(--header-h) + var(--gw) * 2 - var(--go) * 2)
    }

    .c-menu-content [data-n="2"] {
        height: var(--header-h)
    }

    .p-footer-body {
        height: auto
    }

    .c-git {
        padding-top: calc(var(--go));
        padding-bottom: calc(var(--gw) * 6)
    }

    .c-git-body {
        height: calc(var(--gw) * 12)
    }

    .c-sitemap-lr.c-tr {
        display: block;
        padding: 0
    }

    .c-sitemap-lr.c-tr .c-td-l, .c-sitemap-lr.c-tr .c-td-r {
        padding-bottom: calc(var(--gw) * 3)
    }

    .c-sitemap-lr.c-tr .c-td-r {
        width: 100%
    }

    .c-sitemap-col {
        width: auto;
        min-width: 25%
    }

    .c-sitemap-logo.c-clip {
        display: block;
        width: 20vw;
        height: 4.0404vw
    }

    [data-xhr-namespace=home] .c-sec-video {
        background-color: var(--col-white)
    }

    .c-intro {
        text-align: left
    }

    .c-intro p {
        display: inline
    }

    .c-sec-products {
        padding-top: calc(var(--gw) * 1)
    }

    .c-scroll-patterns {
        padding-top: var(--go);
        padding-left: var(--go);
        padding-right: var(--go);
        height: auto;
        margin-bottom: 0
    }

    .c-scroll-body {
        width: 100%
    }

    .c-scroll-cats {
        height: auto;
        padding-top: calc(var(--gw) * 6)
    }

    .c-scroll-bg {
        height: calc(var(--vh) * 100)
    }

    .c-recent-lr {
        flex-direction: column-reverse
    }

    .c-recent-ul {
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: var(--gw)
    }

    .c-recent-ul li {
        margin: 0
    }

    .c-recent-r, .c-recent-ul a {
        width: 100%
    }

    .c-recent-l {
        width: 100%;
        padding-top: calc(var(--gw) * 1)
    }

    .c-body-thin, .c-body-thinest {
        width: var(--single-w)
    }

    .c-go-img {
        width: var(--hero-w)
    }

    .c-intro br {
        display: none
    }

    [data-ov-sort-static=true] .c-archive-header, [data-ov-sort=true] .c-archive-header {
        transform: translate(0)
    }

    [data-ov-sort-static=true] .c-sort-th-name, [data-ov-sort=true] .c-sort-th-name {
        transform: scale(.6)
    }

    [data-ov-sort-static=true] .c-sort-th-tag, [data-ov-sort=true] .c-sort-th-tag {
        padding-bottom: .1em
    }

    .c-sort-th-tag {
        padding-bottom: .15em
    }

    .c-sort-a {
        padding-top: var(--header-h)
    }

    .c-hero-pattern {
        height: calc(var(--vh) * 100 - var(--header-h))
    }

    .c-hero-lead .ja span {
        display: block
    }

    .c-hero-pattern-img[data-index="0"] {
        width: calc(var(--gw) * 13);
        left: calc(var(--go) * -1);
        bottom: calc(var(--header-h) + var(--go) + var(--gw) * 2)
    }

    .c-hero-pattern-img[data-index="1"] {
        width: calc(var(--gw) * 15);
        top: calc(var(--header-h) + var(--go) * 1);
        left: calc(var(--gw) * -2)
    }

    .c-hero-pattern-img[data-index="2"] {
        width: calc(var(--gw) * 8);
        margin-left: calc(var(--gw) * -7);
        margin-top: calc(var(--gw) * 0.5)
    }

    .c-hero-pattern-img[data-index="3"] {
        width: calc(var(--gw) * 10);
        margin-left: calc(var(--gw) * -1);
        margin-top: calc(var(--gw) * -11)
    }

    .c-hero-pattern-img[data-index="4"] {
        width: calc(var(--gw) * 15);
        bottom: calc(var(--header-h) + var(--go) + var(--gw) * 2);
        right: calc(var(--go) * -2)
    }

    .c-hero-pattern-img[data-index="5"] {
        width: calc(var(--gw) * 12);
        top: calc(var(--header-h) + var(--go) * 1);
        right: calc(var(--gw) * -1)
    }

    .c-archive-patterns.c-archive-ul {
        grid-template-columns: repeat(3, calc(33.33333vw - var(--go) * 4 / 3));
        grid-gap: var(--go)
    }

    [data-xhr-namespace=patterns] .c-sec-video-wrap {
        transform: translateY(calc(var(--go) * -1))
    }

    .c-services-li-panel {
        width: var(--single-w);
        height: auto
    }

    .c-services-li-panel-content {
        width: 100%;
        padding: 0 var(--go)
    }

    .c-services-li-panel-header {
        padding-bottom: var(--header-h)
    }

    .c-frame {
        pointer-events: auto
    }

    .c-frame, .c-frame .c-img {
        width: calc(var(--fw) * var(--sprite-vw));
        height: calc(var(--fh) * var(--sprite-vw))
    }

    .c-frame .c-img {
        background-position-x: calc(var(--fx) * var(--sprite-vw) * -1);
        background-position-y: calc(var(--fy) * var(--sprite-vw) * -1);
        background-size: calc(var(--sw) * var(--sprite-vw)) calc(var(--sh) * var(--sprite-vw))
    }

    .c-sprite[data-type=bg] .c-frame {
        z-index: 0
    }

    .c-sprite[data-type=bg] .c-frame[data-name="1.png"] {
        left: auto;
        top: 100%;
        right: 0;
        bottom: auto;
        transform: translate(calc(var(--go) * -1))
    }

    .c-sprite[data-type=bg] .c-frame[data-name="2.png"] {
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        transform: translate(100%, 100%)
    }

    .c-sprite[data-type=bg] .c-frame[data-name="3.png"] {
        left: 0;
        top: auto;
        right: auto;
        bottom: 0;
        transform: translate(-10%, calc(var(--header-h) * -1))
    }

    .c-sprite[data-type=bg] .c-frame[data-name="4.png"] {
        left: 0;
        top: 50%;
        right: auto;
        bottom: auto;
        transform: translate(calc(75% + var(--go)), -150%)
    }

    .c-sprite[data-type=bg] .c-frame[data-name="5.png"] {
        left: auto;
        top: 25%;
        right: 0;
        bottom: auto;
        transform: translate(calc(var(--go) * -1))
    }

    .c-sprite[data-type=bg] .c-frame[data-name="6.png"] {
        left: 50%;
        top: 0;
        right: auto;
        bottom: auto
    }

    .c-sprite[data-type=bg][data-key=bg404] .c-frame[data-name="5.png"], .c-sprite[data-type=bg][data-key=bg404] .c-frame[data-name="6.png"] {
        transform: rotate(90deg)
    }

    .c-sprite[data-type=bg][data-key=bg404] .c-frame[data-name="7.png"] {
        transform: translate(calc(var(--go) * -1), var(--header-h)) rotate(90deg)
    }

    .c-sec-price {
        padding-top: calc(var(--gw) * 3)
    }

    .c-sec-company .c-tr, .c-sec-profile .c-tr {
        display: block
    }

    .c-sec-profile .c-td-l {
        padding-top: calc(var(--gw) * 3)
    }

    .c-profile-header, .c-sec-company .c-td-l, .c-sec-profile .c-td-l {
        width: var(--single-w);
        margin: 0 auto
    }

    .c-profile-img {
        width: 100%
    }

    .c-sec-company .c-td-r, .c-sec-profile .c-td-r {
        padding-top: calc(var(--gw) * 3);
        width: var(--single-w);
        margin: 0 auto
    }

    .c-link-title {
        padding-top: calc(var(--gw) * 2);
        padding-bottom: calc(var(--gw) * 2)
    }

    [data-xhr-namespace="404"] .c-sprite[data-type=bg] .c-frame[data-name="1.png"] {
        left: auto;
        top: auto;
        right: var(--go);
        bottom: var(--go);
        transform: translate(0)
    }

    [data-xhr-namespace="404"] .c-title {
        padding-bottom: 0
    }

    [data-xhr-namespace="404"] .l3 {
        padding-top: var(--go)
    }
}

@media screen and (max-width: 770px) and (orientation: portrait) {
    .hide-mb {
        display: none !important
    }

    .show-mb {
        display: block !important
    }

    :root {
        --section-h: calc(var(--gw) * 18);
        --header-h: 70px;
        --r: 5px;
        --go: 20px;
        --hero-g: calc(var(--gw) * 2);
        --hero-t: calc(var(--gw) * 20);
        --mv-header-h: calc(var(--gw) * 24);
        --single-w: calc(100vw - var(--go) * 2);
        --sprite-vw: 0.075vw
    }

    [data-mb="0"] {
        height: calc(var(--gw) * 0)
    }

    [data-mb=".5"] {
        height: calc(var(--gw) * 0.5)
    }

    [data-mb="1"] {
        height: calc(var(--gw) * 1)
    }

    [data-mb="1.5"] {
        height: calc(var(--gw) * 1.5)
    }

    [data-mb="2"] {
        height: calc(var(--gw) * 2)
    }

    [data-mb="2.5"] {
        height: calc(var(--gw) * 2.5)
    }

    [data-mb="3"] {
        height: calc(var(--gw) * 3)
    }

    [data-mb="3.5"] {
        height: calc(var(--gw) * 3.5)
    }

    [data-mb="4"] {
        height: calc(var(--gw) * 4)
    }

    [data-mb="4.5"] {
        height: calc(var(--gw) * 4.5)
    }

    [data-mb="5"] {
        height: calc(var(--gw) * 5)
    }

    [data-mb="5.5"] {
        height: calc(var(--gw) * 5.5)
    }

    [data-mb="6"] {
        height: calc(var(--gw) * 6)
    }

    [data-mb="6.5"] {
        height: calc(var(--gw) * 6.5)
    }

    [data-mb="7"] {
        height: calc(var(--gw) * 7)
    }

    [data-mb="7.5"] {
        height: calc(var(--gw) * 7.5)
    }

    [data-mb="8"] {
        height: calc(var(--gw) * 8)
    }

    [data-mb="8.5"] {
        height: calc(var(--gw) * 8.5)
    }

    [data-mb="9"] {
        height: calc(var(--gw) * 9)
    }

    [data-mb="9.5"] {
        height: calc(var(--gw) * 9.5)
    }

    [data-mb="10"] {
        height: calc(var(--gw) * 10)
    }

    [data-mb="10.5"] {
        height: calc(var(--gw) * 10.5)
    }

    [data-mb="11"] {
        height: calc(var(--gw) * 11)
    }

    [data-mb="11.5"] {
        height: calc(var(--gw) * 11.5)
    }

    [data-mb="12"] {
        height: calc(var(--gw) * 12)
    }

    [data-mb="12.5"] {
        height: calc(var(--gw) * 12.5)
    }

    [data-mb="13"] {
        height: calc(var(--gw) * 13)
    }

    [data-mb="13.5"] {
        height: calc(var(--gw) * 13.5)
    }

    [data-mb="14"] {
        height: calc(var(--gw) * 14)
    }

    [data-mb="14.5"] {
        height: calc(var(--gw) * 14.5)
    }

    [data-mb="15"] {
        height: calc(var(--gw) * 15)
    }

    [data-mb="15.5"] {
        height: calc(var(--gw) * 15.5)
    }

    [data-mb="16"] {
        height: calc(var(--gw) * 16)
    }

    [data-mb="16.5"] {
        height: calc(var(--gw) * 16.5)
    }

    [data-mb="17"] {
        height: calc(var(--gw) * 17)
    }

    [data-mb="17.5"] {
        height: calc(var(--gw) * 17.5)
    }

    [data-mb="18"] {
        height: calc(var(--gw) * 18)
    }

    [data-mb="18.5"] {
        height: calc(var(--gw) * 18.5)
    }

    [data-mb="19"] {
        height: calc(var(--gw) * 19)
    }

    [data-mb="19.5"] {
        height: calc(var(--gw) * 19.5)
    }

    [data-mb="20"] {
        height: calc(var(--gw) * 20)
    }

    [data-mb="0"] {
        display: none
    }

    #app .c-sec-n {
        height: var(--section-h)
    }

    #app .c-sec-n2 {
        height: calc(var(--section-h) * 0.5)
    }

    .c-menu-body {
        width: calc(100vw - var(--go) * 3.5);
        max-height: calc(var(--vh) * 100 - var(--header-h) + var(--gw) * 2 - var(--go) * 2);
        padding-right: calc(var(--go) * 0.5);
        margin-left: calc(var(--go) * -0.5)
    }

    .c-menu-content [data-n="2"] {
        height: calc(var(--go) * 1.5)
    }

    .c-menu-content {
        padding: 0 calc(var(--go) * 2) calc(var(--go) * 2) calc(var(--go) * 2)
    }

    .c-menu-bg {
        top: calc(var(--go) * 0.5);
        right: calc(var(--go) * 0.5);
        height: calc(100% - var(--go) * 0.5)
    }

    .c-menu-lang a {
        width: calc(var(--go) * 2);
        height: calc(var(--go) * 2)
    }

    .c-logo a {
        width: 75px
    }

    .c-menu-header a, .ui-btn-close-wrap {
        padding: 0 var(--go)
    }

    .c-header-bg {
        min-height: var(--header-h)
    }

    [data-xhr-namespace=home] .c-header-bg {
        height: var(--mv-header-h)
    }

    .p-header .js-split .o {
        line-height: 1.05
    }

    .c-sec-products {
        padding-top: 0
    }

    .c-scroll-cats {
        padding-top: var(--section-h);
        padding-left: var(--go)
    }

    .c-go-img {
        width: 50vw;
        transform: translate(-50%, -50%)
    }

    .c-go-r {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateY(calc(-50% + 33.33333vw))
    }

    .c-go-r .ui-btn-arrow {
        width: calc(100vw - var(--go) * 4);
        max-width: 100vw
    }

    .c-go-l {
        position: absolute;
        bottom: var(--go);
        left: var(--go)
    }

    .c-go-lr {
        position: static
    }

    .c-go-title {
        position: absolute;
        width: 100%;
        top: var(--go)
    }

    .c-mq {
        padding: var(--go) 0;
        line-height: 0
    }

    [data-layout=page] .c-archive-ul {
        margin-right: calc(var(--go) * -1);
        margin-left: calc(var(--go) * -1);
        grid-template-columns: 1fr;
        grid-gap: calc(var(--go) * 2)
    }

    [data-layout=page] .c-archive-txt {
        padding-right: calc(var(--go));
        padding-left: calc(var(--go))
    }

    .c-links-ul {
        padding-top: calc(var(--go) * 0.5);
        padding-bottom: var(--go)
    }

    .c-link-title {
        padding-top: calc(var(--go));
        padding-bottom: calc(var(--go))
    }

    .c-archive-h {
        padding-top: var(--go)
    }

    .c-recent-ul {
        width: 100vw;
        margin-left: calc(var(--go) * -1)
    }

    .c-icon-title .i {
        width: .7em;
        height: .7em
    }

    .c-sitemap {
        width: 100%
    }

    .c-sitemap-logo.c-clip {
        width: calc(var(--single-w) - var(--gw) * 16);
        height: calc(var(--single-w) * 100 / 495 - var(--gw) * 16 * 100 / 495)
    }

    .c-git {
        padding-bottom: var(--section-h)
    }

    .c-sitemap-lr.c-tr .c-td-l {
        padding-bottom: calc(var(--section-h) * 0.5)
    }

    .c-sitemap-cols {
        flex-wrap: wrap
    }

    .c-sitemap-col {
        min-width: 50%
    }

    .c-sitemap-contact {
        position: relative;
        width: 100%;
        padding-top: var(--go);
        margin-top: calc(var(--section-h) * 0.5);
        display: flex;
        justify-content: space-between;
        align-items: flex-start
    }

    .c-sitemap-contact:before {
        content: "";
        display: block;
        height: 1px;
        width: 100vw;
        background-color: var(--col-border);
        position: absolute;
        left: calc(var(--go) * -1);
        top: 0
    }

    .c-sitemap-ul {
        margin-bottom: -1em
    }

    .c-sitemap-lr.c-tr .c-td-r {
        padding-bottom: var(--go)
    }

    .c-sitemap-contact > div {
        width: 50%
    }

    .c-sitemap-contact-ul {
        padding-top: 0
    }

    .c-address-lr {
        display: block;
        width: 100%
    }

    .c-address-r {
        width: 100%
    }

    .c-sitemap-company-name span:last-child {
        display: block
    }

    .c-copy-right {
        line-height: 1.2
    }

    .c-copy-right span {
        display: block
    }

    .c-address-r {
        padding-top: calc(var(--go))
    }

    .p-footer-body {
        transform: translate(0)
    }

    [data-layout=archive] .c-archive-ul {
        grid-gap: var(--go)
    }

    [data-layout=archive] .c-archive-ul.c-archive-projects {
        grid-template-columns: 1fr 1fr
    }

    [data-layout=archive] .c-archive-projects .c-archive-li .c-archive-txt {
        padding-right: var(--go);
        width: 100%;
        word-break: break-word
    }

    [data-layout=archive] .c-archive-projects .c-archive-li:nth-child(3n-2) .c-archive-txt {
        padding-left: inherit
    }

    [data-layout=archive] .c-archive-projects .c-archive-li:nth-child(2n-1) .c-archive-txt {
        padding-left: var(--go);
        padding-right: 0
    }

    .c-sort-a {
        padding-bottom: 0
    }

    .c-sort-tr {
        display: block
    }

    .c-sort-th {
        width: 100%;
        margin-right: 0
    }

    .c-sort-td {
        text-align: left;
        padding-top: calc(var(--go) * 0.5);
        padding-bottom: calc(var(--go))
    }

    .c-sort-th-c {
        bottom: .5em
    }

    .c-sort-td .c-clip {
        line-height: 0
    }

    .c-sort-td .c-clip .o {
        line-height: 0;
        display: inline-block
    }

    .c-sort-td .c-clip .o:last-child {
        padding-top: 0;
        margin-top: 0;
        padding-left: .5em
    }

    .c-sort .c-links-ul {
        padding-top: 0;
        padding-bottom: var(--go)
    }

    .c-sort-th-tag {
        transform: scale(.8);
        transform-origin: left bottom
    }

    .is-any [data-ov-sort-static=true] .c-sort-th-name, .is-any [data-ov-sort=true] .c-sort-th-name {
        transform: scale(1)
    }

    .is-any [data-ov-sort-static=true] .c-sort-th-tag, .is-any [data-ov-sort=true] .c-sort-th-tag {
        padding-bottom: .175em
    }

    .is-any .c-sort-th-tag {
        padding-bottom: .175em;
        padding-right: .025em
    }

    .is-any [data-xhr-namespace=single-project] .c-s-header {
        position: static
    }

    .is-any [data-xhr-namespace=single-project] .c-s-header .flex {
        padding-top: var(--section-h);
        padding-bottom: calc(var(--section-h) * 0.25);
        display: block
    }

    .is-any [data-xhr-namespace=single-project] .c-s-header .tr {
        display: block
    }

    .is-any [data-xhr-namespace=single-project] .c-s-sub {
        bottom: calc(var(--go) + 1em)
    }

    .is-any [data-xhr-namespace=single-project] .c-s-content {
        padding: calc(var(--section-h) * 0.25) 0 0 0
    }

    .is-any [data-xhr-namespace=single-project] .c-e-scroll {
        padding-bottom: var(--section-h)
    }

    .is-any [data-xhr-namespace=single-pattern] .c-s-pattern-header {
        padding-top: var(--section-h);
        padding-bottom: calc(var(--section-h) * 0.25)
    }

    .is-any [data-xhr-namespace=single-pattern] .c-s-pattern-content-wrap {
        padding-top: 0;
        padding-bottom: calc(var(--section-h))
    }

    .is-any [data-xhr-namespace=single-pattern] .c-s-pattern-content {
        padding-top: calc(var(--section-h) * 0.25)
    }

    .is-any [data-xhr-namespace=single-pattern] .c-s-pattern-body .ui-btn-icon {
        bottom: calc(var(--go) + 1.1em);
        right: 0;
        z-index: 9
    }

    .is-any [data-xhr-namespace=single-pattern] .c-s-content-aside .ui-copy {
        bottom: calc(var(--go))
    }

    .c-hero-pattern {
        height: calc(var(--vh) * 100 - var(--go))
    }

    #app [data-xhr-namespace=patterns] .c-sec-video-wrap {
        transform: translateY(0)
    }

    #app [data-xhr-namespace=patterns] .c-sec-video {
        padding: 0 var(--go) 0 var(--go);
        margin-bottom: calc(var(--gw) * 6)
    }

    .c-hero-pattern-title {
        position: absolute;
        bottom: calc(var(--gw) * 6);
        padding: 0 var(--go)
    }

    .c-hero-pattern-title .c-hero-lead .c-clip-a {
        line-height: 0
    }

    [lang=en] .c-hero-pattern-title .c-hero-lead {
        text-align: left
    }

    [lang=en] .c-hero-pattern-title .c-hero-lead .c-split {
        display: inline;
        font-weight: 400
    }

    [lang=en] .c-lead.f-s {
        font-weight: 400
    }

    .c-hero-pattern .h1 {
        margin-top: 0;
        margin-bottom: calc(var(--go) * 1.5)
    }

    .c-hero-lead {
        position: relative;
        bottom: auto
    }

    .c-hero-pattern-img[data-index="0"] {
        width: calc(var(--gw) * 18);
        left: calc(var(--gw) * -9);
        bottom: calc(var(--go) * 9)
    }

    .c-hero-pattern-img[data-index="1"] {
        width: calc(var(--gw) * 20);
        top: calc(var(--header-h) + var(--go));
        left: calc(var(--go) * -1)
    }

    .c-hero-pattern-img[data-index="2"] {
        width: calc(var(--gw) * 10);
        margin-left: calc(var(--gw) * -10);
        margin-top: calc(var(--gw) * -5)
    }

    .c-hero-pattern-img[data-index="3"] {
        width: calc(var(--gw) * 12);
        margin-top: calc(var(--gw) * -19)
    }

    .c-hero-pattern-img[data-index="4"] {
        width: calc(var(--gw) * 20);
        bottom: calc(var(--go) * 9);
        right: calc(var(--gw) * -6)
    }

    .c-hero-pattern-img[data-index="5"] {
        width: calc(var(--gw) * 14);
        top: calc(var(--header-h) + var(--go) + var(--gw) * 2);
        right: calc(var(--go) * -2)
    }

    .c-archive-sub {
        width: 100%;
        padding: 0 var(--go);
        margin-left: 0
    }

    .ui-btn-icon .i, .ui-copy-icon {
        width: 3em;
        height: 3em
    }

    .ui-copy-icon svg {
        width: 50%
    }

    .c-sort-body-l {
        width: 100%
    }

    .c-sort-body-r {
        display: none
    }

    .c-sprite[data-type=bg] .c-frame[data-name="2.png"] {
        transform: translate(70%, 60%)
    }

    .c-sprite[data-type=bg] .c-frame[data-name="4.png"] {
        transform: translate(calc(20% + var(--go)), -90%)
    }

    .c-sprite[data-type=bg][data-key=bg404] .c-frame[data-name="2.png"] {
        transform: translate(100%, 50%)
    }

    .c-sprite[data-type=bg][data-key=bg404] .c-frame[data-name="4.png"] {
        transform: translate(var(--go))
    }

    .c-a-header .h1 .l {
        height: 1.1em
    }

    .c-a-header .h1 .b {
        bottom: -.1em
    }

    .c-profile-name .c-sec-title > div {
        display: inline-block;
        padding-right: .25em
    }

    .c-sec-company .c-td-r, .c-sec-profile .c-td-l, .c-sec-profile .c-td-r {
        padding-top: calc(var(--gw) * 6)
    }

    .c-sec-profile .c-td-l {
        grid-gap: var(--go)
    }

    .c-services-li-panel-header {
        padding-bottom: 0
    }

    .c-services-li-panel {
        height: calc(var(--vh) * 100 - var(--header-h) * 2);
        max-height: 46em
    }

    .c-services-ul {
        padding-top: var(--go)
    }

    .c-services-li-num {
        padding-bottom: .5em
    }

    .c-services-li-title, .c-services-txt {
        padding-bottom: var(--go)
    }

    dl dt {
        width: 9em
    }

    dl dt .c-clip .t {
        padding-top: .15em
    }

    dl dd {
        width: calc(100% - 9em)
    }

    .c-contact-header .h1 {
        padding-top: calc(var(--gw) * 6);
        padding-bottom: calc(var(--gw) * 6)
    }

    #app .c-contact-content .c-link-b .c-link-title .w-flex {
        display: block
    }

    #app .c-contact-content .c-link-b .c-link-title.c-clip .t, #app .c-contact-content .c-link-title.c-clip .o, #app .c-contact-content .c-link-title.c-clip .w {
        height: auto
    }

    #app .c-contact-content .c-link-b .c-link-title .w-label {
        font-weight: 300
    }

    #app .c-contact-content .c-link-b .c-link-title .a {
        width: .8em;
        margin-bottom: .1em
    }

    .sb-header {
        margin-bottom: calc(var(--gw) * 18)
    }

    .c-editor-aside {
        display: none
    }

    .c-editor-main {
        width: 100%;
        padding-top: 0
    }
}

@media screen and (max-width: 900px) and (orientation: landscape) {
    :root {
        --header-h: 70px
    }

    .c-logo a {
        width: 75px
    }

    .is-any [data-ov-sort-static=true] .c-sort-th-name, .is-any [data-ov-sort=true] .c-sort-th-name {
        transform: scale(1)
    }

    .is-any [data-ov-sort-static=true] .c-sort-th-tag, .is-any [data-ov-sort=true] .c-sort-th-tag {
        padding-bottom: .175em
    }

    .is-any .c-sort-th-tag {
        padding-bottom: .175em;
        padding-right: .025em
    }

    .c-menu-body {
        width: 100vw;
        margin-left: 0;
        padding-right: 0;
        max-height: calc(var(--vh) * 100)
    }

    .c-menu-bg {
        top: 0;
        right: 0;
        height: calc(var(--vh) * 100)
    }

    .c-menu-content {
        padding: 0 var(--go);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: calc(var(--go))
    }

    .c-menu-sub ul {
        display: block
    }

    .c-menu-sub ul li {
        width: auto
    }

    .c-menu-main {
        margin-top: -.2em
    }

    .c-menu-lang {
        align-items: flex-start
    }

    .c-menu-content [data-n] {
        display: none
    }

    .c-services-li-panel {
        width: calc(100% - var(--go) * 2)
    }

    .c-services-li-panel-content {
        width: 100%;
        padding: 0 var(--go)
    }

    .c-service-img {
        display: none
    }

    .c-contact .c-body-thinest {
        width: 100%;
        padding: 0 var(--go)
    }

    .p-footer-body {
        height: auto
    }

    .c-sitemap-lr {
        display: block;
        padding: 0
    }

    .c-sitemap-logo.c-clip {
        margin-top: calc(var(--gw) * 3);
        margin-bottom: calc(var(--gw) * 3)
    }

    .c-archive-sub {
        width: 100%;
        padding: 0 var(--go);
        margin-left: 0
    }
}