/* body{visibility:hidden}*/
.c-alert{display:none}
.c-splash{opacity:0;transition:opacity 1.2s}
.is-loaded body{visibility:visible}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
ul,li{padding:0}
li{list-style:none}
html,body{ width:100%; height:100%}
body{line-height:1.5;-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}
#root,#__next{isolation:isolate}
html{-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-text-size-adjust:100%}
*{padding:0;margin:0;box-sizing:border-box}
html,body{width:100%;height:100%}
.c-assets{pointer-events:none}
.c-assets svg{display:none}

/*@font-face {
    font-family: 'Aeonik Pro';
    src: url('../fonts/AeonikPro-Medium.eot');
    src: url('../fonts/AeonikPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AeonikPro-Medium.woff2') format('woff2'),
        url('../fonts/AeonikPro-Medium.woff') format('woff'),
        url('../fonts/AeonikPro-Medium.ttf') format('truetype'),
        url('../fonts/AeonikPro-Medium.svg#AeonikPro-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}*/


@font-face {
    font-family: 'Inter';
    src: url('Inter-Medium.eot');
    src: url('Inter-Medium.eot?#iefix') format('embedded-opentype'),
        url('Inter-Medium.woff2') format('woff2'),
        url('Inter-Medium.woff') format('woff'),
        url('Inter-Medium.ttf') format('truetype'),
        url('Inter-Medium.svg#Inter-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



html {
font-family: 'Inter', Microsoft Yahei, "微软雅黑", Arial, Helvetica,sans-serif;
}



 
 :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: #204A9F;
                --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
}

            .in {
                position: relative;
                width: 100%;
                height: 100%
            }

            html {
                color: var(--col-black);
                font-variant-ligatures: no-common-ligatures
            }

            .c-palt {
                font-feature-settings: "palt"
            }

            a {
                text-decoration: none;
                color: var(--col-black)
            }

            ::selection {
                color: var(--col-white);
                background-color: var(--col-black)
            }

            .h2,.h3,.t-upper {
                text-transform: uppercase
            }

            .t-c {
                text-align: center
            }

            * {
                backface-visibility: hidden
            }

            [data-current-page=home] a[data-to=home] {
                pointer-events: none
            }

            [data-current-page=home] .c-menu a[data-to=home] {
                color: var(--col-purple)
            }

            [data-current-page=home] .c-nav a[data-to=home] {
                border: 1px solid var(--col-black)
            }

            [data-current-page=works] a[data-to=works] {
                pointer-events: none
            }

            [data-current-page=works] .c-menu a[data-to=works] {
                color: var(--col-purple)
            }

            [data-current-page=works] .c-nav a[data-to=works] {
                border: 1px solid var(--col-black)
            }

            [data-current-page=products] a[data-to=products] {
                pointer-events: none
            }

            [data-current-page=products] .c-menu a[data-to=products] {
                color: var(--col-purple)
            }

            [data-current-page=products] .c-nav a[data-to=products] {
                border: 1px solid var(--col-black)
            }

            [data-current-page=patterns] a[data-to=patterns] {
                pointer-events: none
            }

            [data-current-page=patterns] .c-menu a[data-to=patterns] {
                color: var(--col-purple)
            }

            [data-current-page=patterns] .c-nav a[data-to=patterns] {
                border: 1px solid var(--col-black)
            }

            [data-current-page=exhibitions] a[data-to=exhibitions] {
                pointer-events: none
            }

            [data-current-page=exhibitions] .c-menu a[data-to=exhibitions] {
                color: var(--col-purple)
            }

            [data-current-page=exhibitions] .c-nav a[data-to=exhibitions] {
                border: 1px solid var(--col-black)
            }

            [data-current-page=about] a[data-to=about] {
                pointer-events: none
            }

            [data-current-page=about] .c-menu a[data-to=about] {
                color: var(--col-purple)
            }

            [data-current-page=about] .c-nav a[data-to=about] {
                border: 1px solid var(--col-black)
            }

            [data-current-page=contact] a[data-to=contact] {
                pointer-events: none
            }

            [data-current-page=contact] .c-menu a[data-to=contact] {
                color: var(--col-purple)
            }

            [data-current-page=contact] .c-nav a[data-to=contact] {
                border: 1px solid var(--col-black)
            }

            [data-current-page=privacy-policy] a[data-to=privacy-policy] {
                pointer-events: none
            }

            [data-current-page=privacy-policy] .c-menu a[data-to=privacy-policy] {
                color: var(--col-purple)
            }

            [data-current-page=privacy-policy] .c-nav a[data-to=privacy-policy] {
                border: 1px solid var(--col-black)
            }

            .is-loaded #app [data-d="1"],.is-loaded #app [data-d="1"] .t {
                transition-delay: .05s
            }

            .is-loaded #app .c-delay-child>:first-child .t {
                transition-delay: 25ms
            }

            .is-loaded #app [data-d="2"],.is-loaded #app [data-d="2"] .t {
                transition-delay: .1s
            }

            .is-loaded #app .c-delay-child>:nth-child(2) .t {
                transition-delay: .05s
            }

            .is-loaded #app [data-d="3"],.is-loaded #app [data-d="3"] .t {
                transition-delay: .15s
            }

            .is-loaded #app .c-delay-child>:nth-child(3) .t {
                transition-delay: 75ms
            }

            .is-loaded #app [data-d="4"],.is-loaded #app [data-d="4"] .t {
                transition-delay: .2s
            }

            .is-loaded #app .c-delay-child>:nth-child(4) .t {
                transition-delay: .1s
            }

            .is-loaded #app [data-d="5"],.is-loaded #app [data-d="5"] .t {
                transition-delay: .25s
            }

            .is-loaded #app .c-delay-child>:nth-child(5) .t {
                transition-delay: .125s
            }

            .is-loaded #app [data-d="6"],.is-loaded #app [data-d="6"] .t {
                transition-delay: .3s
            }

            .is-loaded #app .c-delay-child>:nth-child(6) .t {
                transition-delay: .15s
            }

            .is-loaded #app [data-d="7"],.is-loaded #app [data-d="7"] .t {
                transition-delay: .35s
            }

            .is-loaded #app .c-delay-child>:nth-child(7) .t {
                transition-delay: .175s
            }

            .is-loaded #app [data-d="8"],.is-loaded #app [data-d="8"] .t {
                transition-delay: .4s
            }

            .is-loaded #app .c-delay-child>:nth-child(8) .t {
                transition-delay: .2s
            }

            .is-loaded #app [data-d="9"],.is-loaded #app [data-d="9"] .t {
                transition-delay: .45s
            }

            .is-loaded #app .c-delay-child>:nth-child(9) .t {
                transition-delay: .225s
            }

            .is-loaded #app [data-d="10"],.is-loaded #app [data-d="10"] .t {
                transition-delay: .5s
            }

            .is-loaded #app .c-delay-child>:nth-child(10) .t {
                transition-delay: .25s
            }

            .is-loaded #app [data-d="11"],.is-loaded #app [data-d="11"] .t {
                transition-delay: .55s
            }

            .is-loaded #app .c-delay-child>:nth-child(11) .t {
                transition-delay: .275s
            }

            .is-loaded #app [data-d="12"],.is-loaded #app [data-d="12"] .t {
                transition-delay: .6s
            }

            .is-loaded #app .c-delay-child>:nth-child(12) .t {
                transition-delay: .3s
            }

            .is-loaded #app [data-d="13"],.is-loaded #app [data-d="13"] .t {
                transition-delay: .65s
            }

            .is-loaded #app .c-delay-child>:nth-child(13) .t {
                transition-delay: .325s
            }

            .is-loaded #app [data-d="14"],.is-loaded #app [data-d="14"] .t {
                transition-delay: .7s
            }

            .is-loaded #app .c-delay-child>:nth-child(14) .t {
                transition-delay: .35s
            }

            .is-loaded #app [data-d="15"],.is-loaded #app [data-d="15"] .t {
                transition-delay: .75s
            }

            .is-loaded #app .c-delay-child>:nth-child(15) .t {
                transition-delay: .375s
            }

            .is-loaded #app [data-d="16"],.is-loaded #app [data-d="16"] .t {
                transition-delay: .8s
            }

            .is-loaded #app .c-delay-child>:nth-child(16) .t {
                transition-delay: .4s
            }

            .is-loaded #app [data-d="17"],.is-loaded #app [data-d="17"] .t {
                transition-delay: .85s
            }

            .is-loaded #app .c-delay-child>:nth-child(17) .t {
                transition-delay: .425s
            }

            .is-loaded #app [data-d="18"],.is-loaded #app [data-d="18"] .t {
                transition-delay: .9s
            }

            .is-loaded #app .c-delay-child>:nth-child(18) .t {
                transition-delay: .45s
            }

            .is-loaded #app [data-d="19"],.is-loaded #app [data-d="19"] .t {
                transition-delay: .95s
            }

            .is-loaded #app .c-delay-child>:nth-child(19) .t {
                transition-delay: .475s
            }

            .is-loaded #app [data-d="20"],.is-loaded #app [data-d="20"] .t {
                transition-delay: 1s
            }

            .is-loaded #app .c-delay-child>:nth-child(20) .t {
                transition-delay: .5s
            }

            .is-loaded #app [data-d="21"],.is-loaded #app [data-d="21"] .t {
                transition-delay: 1.05s
            }

            .is-loaded #app .c-delay-child>:nth-child(21) .t {
                transition-delay: .525s
            }

            .is-loaded #app [data-d="22"],.is-loaded #app [data-d="22"] .t {
                transition-delay: 1.1s
            }

            .is-loaded #app .c-delay-child>:nth-child(22) .t {
                transition-delay: .55s
            }

            .is-loaded #app [data-d="23"],.is-loaded #app [data-d="23"] .t {
                transition-delay: 1.15s
            }

            .is-loaded #app .c-delay-child>:nth-child(23) .t {
                transition-delay: .575s
            }

            .is-loaded #app [data-d="24"],.is-loaded #app [data-d="24"] .t {
                transition-delay: 1.2s
            }

            .is-loaded #app .c-delay-child>:nth-child(24) .t {
                transition-delay: .6s
            }

            .is-loaded #app [data-d="25"],.is-loaded #app [data-d="25"] .t {
                transition-delay: 1.25s
            }

            .is-loaded #app .c-delay-child>:nth-child(25) .t {
                transition-delay: .625s
            }

            .is-loaded #app [data-d="26"],.is-loaded #app [data-d="26"] .t {
                transition-delay: 1.3s
            }

            .is-loaded #app .c-delay-child>:nth-child(26) .t {
                transition-delay: .65s
            }

            .is-loaded #app [data-d="27"],.is-loaded #app [data-d="27"] .t {
                transition-delay: 1.35s
            }

            .is-loaded #app .c-delay-child>:nth-child(27) .t {
                transition-delay: .675s
            }

            .is-loaded #app [data-d="28"],.is-loaded #app [data-d="28"] .t {
                transition-delay: 1.4s
            }


            .is-loaded #app .c-delay-child>:nth-child(28) .t {
                transition-delay: .7s
            }

            .is-loaded #app [data-d="29"],.is-loaded #app [data-d="29"] .t {
                transition-delay: 1.45s
            }

            .is-loaded #app .c-delay-child>:nth-child(29) .t {
                transition-delay: .725s
            }

            .is-loaded #app [data-d="30"],.is-loaded #app [data-d="30"] .t {
                transition-delay: 1.5s
            }

            .is-loaded #app .c-delay-child>:nth-child(30) .t {
                transition-delay: .75s
            }

            .is-menu-opened .c-menu-content ul>li:first-child .t {
                transition-delay: 25ms
            }

            .is-menu-opened .c-menu-content ul>li:nth-child(2) .t {
                transition-delay: .05s
            }

            .is-menu-opened .c-menu-content ul>li:nth-child(3) .t {
                transition-delay: 75ms
            }

            .is-menu-opened .c-menu-content ul>li:nth-child(4) .t {
                transition-delay: .1s
            }

            .is-menu-opened .c-menu-content ul>li:nth-child(5) .t {
                transition-delay: .125s
            }

            .is-menu-opened .c-menu-content ul>li:nth-child(6) .t {
                transition-delay: .15s
            }

            .is-menu-opened .c-menu-content ul>li:nth-child(7) .t {
                transition-delay: .175s
            }

            .is-menu-opened .c-menu-content ul>li:nth-child(8) .t {
                transition-delay: .2s
            }

            [lang=en] a[data-lang=en],[lang=ja] a[data-lang=ja] {
                pointer-events: none
            }

            [lang=en] a[data-lang=en].ui-link-bd .b,[lang=ja] a[data-lang=ja].ui-link-bd .b {
                transform: translate(0)
            }

            [lang=en] .c-menu-lang a[data-lang=en],[lang=ja] .c-menu-lang a[data-lang=ja] {
                color: var(--col-purple);
                border-color: var(--col-border-purple)
            }

            .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
            }
			
			
			
			 @media screen and (max-width: 770px) and (orientation:portrait) {
				 
			  .index_pro .c-bg-img .elem {
                width: 100vw;
                height: 75vw;
                 }
				 
			.c-archive-body .c-bg-img .elem{
                width: 100%;
                height: 37.5vw;
            } 
			
			.index_prot .o{ height:1.4em !important;}
			.index_prot .o .t{ height:1.4em !important;}
			.index_prot .o .t .w{ height:1.4em !important; line-height:1.4em !important;}
				 	 
				 
			 }
			
			
			

            .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 {
				display:none;
                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: 1
            }

            .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);
				text-align:center;
            }

            #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: 1.2em
            }

            .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))
            }
			
			
			 @media screen and (max-width: 770px) and (orientation:portrait) {

				 .about_bg .elem{ width:50vw !important; height:38vw !important; }
				 
				 .c-go-img-o {width:50vw !important; height:38vw !important;}
				 
				 .c-services-li-panel-body .elem{/* width:100vw !important;*/ height:60vw !important;}
				 
				 
			 }
			

            .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))*/
            }
			
			.p-footer-body .c-sitemap{
			   margin:8vw 0 3vw 0;
				
				}

            .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:8.073vw;
                height: 2.87vw
            }

            .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;
				padding-left: 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,.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: 1.2em;
                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;
			   height:100px;
                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)
            }
			
			  @media screen and (max-width: 770px) and (orientation:portrait) {
			 .c-hero-pattern-img[data-index="0"] .elem{  width:-webkit-calc(var(--gw)*10) !important;} 
			
			 .c-hero-pattern-img[data-index="1"] .elem{ width: -webkit-calc(var(--gw)*10) !important;} 
		    
			 .c-hero-pattern-img[data-index="2"] .elem{ width: -webkit-calc(var(--gw)*4) !important;} 
			 
			 .c-hero-pattern-img[data-index="3"] .elem{ width:-webkit-calc(var(--gw)*7) !important;} 
			 
			 .c-hero-pattern-img[data-index="4"] .elem{ width: -webkit-calc(var(--gw)*10) !important;} 
			 
			 .c-hero-pattern-img[data-index="5"] .elem{ width: -webkit-calc(var(--gw)*8) !important;} 
				  
			  }
			

            .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-template-columns: 1fr 1fr 1fr 1fr;
                grid-gap: var(--gw)
            }

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

            .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
            }
			
			
			 @media screen and (max-width: 770px) {
				.c-vr-scroll-li{height:75vw;!important; margin-bottom:5vw;}

			   .js-zoom-translate .elem{ height:75vw !important}
			
			   
				.c-hr-scroll-li .elem{ width:100vw !important; height:75vw !important}
				
			  }
			

            .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;*/
				display: block;
                height: .95em
            }

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

            .c-a-header .h1 .b div {
                /*background-color: var(--col-yellow);*/
				background-color:#d3ddf1;
                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)
            }
			
			@media screen and (max-width: 770px) and (orientation: portrait){
			 .c-link-b .c-link-title .w-label {
                padding-bottom: .8em;
                width: auto;
            }	
				
			 .c-link-b .c-link-title .w-flip {
                height: auto !important;
               
            }	
				
			 .c-copy .w-flip div {
                height:auto !important;
            }	
				}
				
	
			

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

            .c-link-b .c-link-title .w-flip {
                height: 1.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;
				line-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;
				display:none;
            }

            .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
            }
			
			.c-menu-header .c-clip .o{
                position: relative;
                overflow: hidden;
                line-height: 1;
                height: 0.9em;
                display: inline-block
            }
			

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

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

		    .c-clip .t {
                line-height: 1;
                height: 1.4em;
                transform: translateY(0)
            }
			
			.c-clip-i .w{
			 line-height: 1.1 !important;
	
			}
			

            .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
            }
			
			.t-upper.c-clip .o,.c-clip-i .o,{
				
				margin-top: -.06em;
                margin-bottom: -.06em;
                height: 1.1em;
				
				}



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

            .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: .9em;
                padding-top: 0
            }
			
			  .t-upper.c-clip .t .w {
                line-height: 0.9;
            }
		

            .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: .9em
            }

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

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

             
			 @media screen and (max-width: 770px) and (orientation:portrait) {
			  
			   .c-sort-th-name .js-split {
                line-height: 1 !important;
                }
				
			
			 }

            .js-split .o {
                line-height: 1.2;
                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: .9em
            }

            .p-upper.js-split,.p-upper .js-split {
                margin-bottom: -.25em
            }

            .p-upper.js-split .s,.p-upper .js-split .s {
                width: .15em
            }

            .p-upper.js-split .o,.p-upper .js-split .o {
                margin-top: -.06em;
                padding-top: 0;
                margin-bottom: 0;
                height: .95em
            }

            .p-upper.js-split[data-type=chars],.p-upper .js-split[data-type=chars] {
                margin-bottom: 0
            }

            .p-upper.js-split[data-type=chars] .s,.p-upper .js-split[data-type=chars] .s {
                width: .2em
            }

            .p-upper .c-clip .o,.p-upper .c-flip .o {
                margin-top: -.06em;
                margin-bottom: -.06em;
                height: .95em
            }

            .p-upper .c-clip .t,.p-upper .c-flip .t {
                height: .95em;
                padding-top: 0
            }

            .p-upper .c-clip .w,.p-upper .c-flip .w {
                height: .95em
            }

            .a-clip .t,.c-clip .t,.c-split .c,.c-split .t,.c-split .w {
                transform-origin: left bottom;
                transform: translate3d(0,110%,0);
                will-change: auto
            }

            .c-fade {
                opacity: 0;
                will-change: auto
            }

            .is-loaded #app .c-split[data-shown="1"] .c,.is-loaded #app .c-split[data-shown="1"] .t,.is-loaded #app .c-split[data-shown="1"] .w {
                transform: translateZ(0);
                opacity: 1
            }

            .is-loaded .c-clip._on .t,.is-loaded.is-menu-opened .c-menu-body .t,.is-loaded [data-shown="1"].c-clip .t,.is-loaded [data-shown="1"] .c-clip .t {
                opacity: 1;
                transform: translate(0)
            }

            .is-loaded [data-shown="1"].c-fade,.is-loaded [data-shown="1"] .c-fade {
                opacity: 1
            }

            .a-clip .t[data-anim="1"],.c-clip .t[data-anim="1"],.c-split .c[data-anim="1"],.c-split .t[data-anim="1"],.c-split .w[data-anim="1"] {
                will-change: opacity,transform
            }

            .c-fade[data-anim="1"] {
                will-change: opacity
            }

            .is-not-any.is-loaded .c-flip-wrap:hover .c-flip .w:first-child,.is-not-any.is-loaded .c-flip:hover .w:first-child {
                transform: translateY(-120%)
            }

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

            .ui-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 2em;
                padding-right: 1em;
                padding-left: 1em;
                border: 1px solid var(--col-border);
                border-radius: 5em
            }

            .ui-btn-m {
                min-width: 7.5em;
                height: 2.8em;
                font-weight: 500;
                display: flex
            }

            .ui-anchor .t {
                display: flex;
                align-items: center
            }

            .ui-anchor .w {
                display: inline-block;
                padding-right: 1em
            }

            .ui-anchor .i {
                width: 3em;
                height: auto;
                margin-top: -.7em;
                display: inline-block
            }

            .c-archive-cat .ui-btn-ghost {
                margin-right: .25em;
                margin-bottom: .25em
            }

            .ui-btn-ghost {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 2em;
                padding-right: 1em;
                padding-left: 1em;
                border-radius: 5em;
                position: relative;
                overflow: hidden
            }

            .ui-btn-ghost._off {
                border: 1px solid transparent
            }

            .ui-btn-ghost .o {

                z-index: 2
            }

            .ui-btn-ghost:after {
                z-index: 1;
                background: var(--col-black);
                border-radius: 50%;
                transform: translateY(110%)
            }

            .ui-btn-ghost:after,.ui-btn-ghost:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%
            }

            .ui-btn-ghost:before {
                z-index: 0;
                border-radius: 5em;
                border: 1px solid var(--col-border)
            }

            .ui-btn-ghost .w[aria-hidden=true] {
                color: var(--col-white)
            }

            .ui-btn-fill {
                background: var(--col-white);
                display: flex;
                justify-content: center;
                align-items: center;
                height: 2.8em;
                padding-right: 1em;
                padding-left: 1em;
                border-radius: 5em
            }

            .ui-btn-fill.ui-btn-dark {
                background: var(--col-black);
                color: var(--col-white)
            }

            .ui-btn-fill.ui-btn-dark use {
                fill: var(--col-white)
            }

            .ui-link-parent {
                display: block;
                padding-right: 1em
            }

            .ui-link-parent .t {
                display: flex;
                align-items: center
            }

            .ui-link-parent .b {
                height: .6em;
                width: .6em;
                border-radius: 1em;
                background: var(--col-purple)
            }

            .ui-link-parent .w {
                padding-left: .75em
            }

            .ui-btn-arrow {
                min-width: 15em;
                max-width: 15em;
                height: 2.8em;
                padding-right: 0;
                padding-left: 0;
                font-weight: 500;
                display: flex
            }

            .ui-btn-arrow .w {
                white-space: nowrap
            }

            .ui-btn-arrow .o {
                width: 100%
            }

            .ui-btn-arrow .t {
                padding-top: .2em;
                display: flex;
                justify-content: space-between;
                align-items: center
            }

            .ui-btn-arrow .b {
                height: 1em;
                padding: 0 1em
            }

            .ui-btn-arrow .i {
                width: 2.8em;
                height: 2.8em;
                margin-top: -2px;
                display: flex;
                justify-content: center;
                align-items: center
            }

            .ui-btn-arrow .i svg {
                width: 25%;
                height: 25%;
                transform: rotate(-45deg)
            }

            .ui-btn-arrow use {
                fill: var(--col-black)
            }

            .ui-btn-arrow[target=_blank] .i svg,a[target=_blank] .ui-btn-arrow .i svg {
                transform: rotate(-90deg)
            }

            .ui-btn-auto {
                min-width: 0;
                max-width: 9999px
            }

            .ui-link-bd .o {
                overflow: hidden;
                display: inline-block
            }

            .ui-link-bd .t {
                position: relative
            }

            .ui-link-bd .b {
                width: 100%;
                height: 1px;
                background: var(--col-black);
                position: absolute;
                bottom: .5px;
                transform: translate(-110%)
            }

            .c-menu .ui-link-bd .b {
                background-color: var(--col-white)
            }

            .ui-btn-icon {
                padding-right: 0;
                padding-left: 0;
                display: flex;
                align-items: center
            }

            .ui-btn-icon .o {
                width: 100%
            }

            .ui-btn-icon .t {
                padding-top: .2em;
                display: flex;
                justify-content: space-between;
                align-items: center
            }

            .ui-btn-icon .b {
                height: 1em;
                padding: 0
            }

            .ui-btn-icon .i {
                width: 2.8em;
                height: 2.8em;
                margin-top: -2px;
                display: flex;
                justify-content: center;
                align-items: center
            }

            .ui-btn-icon .i svg {
                width: 28%;
                height: 28%
            }

            .ui-btn-icon use {
                fill: var(--col-black)
            }

            .ui-btn-close,.ui-toggle-menu {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%
            }

            .ui-btn-close .b,.ui-toggle-menu .b {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 2em;
                min-width: 6.944vw;
                padding-right: 1em;
                padding-left: 1em;
                border-radius: 5em;
                position: relative;
                overflow: hidden;
                color: var(--col-white)
            }

            .ui-btn-close .b {
                background: var(--col-black)
            }

            .c-git-body,.ui-toggle-menu .b {
                will-change: transform
            }

            .ui-btn-close .o,.ui-toggle-menu .o {
                position: relative;
                z-index: 3
            }

            .ui-btn-close .w,.ui-toggle-menu .w {
                text-align: center
            }

            .ui-toggle-menu canvas {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                transform: translate(-50%,-50%) scale(1.3);
                max-width: 9999px;
                z-index: 1
            }

            .ui-toggle-menu .b:after {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                background: var(--col-white);
                top: 0;
                left: 0;
                z-index: 2;
                border-radius: 50%;
                transform: translateY(100%)
            }

            .is-menu-opened .ui-toggle-menu .w {
                color: var(--col-black);
                transform: translateY(-100%)
            }

            .is-menu-opened .ui-toggle-menu .w:first-child {
                transform: translateY(-120%)
            }

            .is-menu-opened .ui-toggle-menu .b:after {
                border-radius: 2em;
                transform: translate(0)
            }

            .ui-icon {
                display: flex;
                justify-content: center;
                align-items: center
            }

            .ui-icon-body {
                width: calc(var(--gw));
                height: calc(var(--gw));
                display: block;
                border-radius: 100%;
                overflow: hidden;
                background-color: var(--col-white);
                position: relative;
                opacity: 0
            }

            .ui-icon-body svg {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50%;
                height: 50%
            }

            .ui-icon-body svg,.ui-icon-zoom .ui-icon-body svg:first-child {
                transform: translate(-50%,-50%)
            }

            .ui-copy {
                display: block
            }

            .ui-copy .c-clip .t {
                opacity: 1
            }

            .ui-copy-icon {
                border-radius: var(--r);
                border: 1px solid var(--col-border);
                width: calc(var(--gw)*2);
                height: calc(var(--gw)*2);
                display: flex;
                justify-content: center;
                align-items: center
            }

            .ui-copy-icon svg {
                width: 34%
            }

            .ui-copy-label {
                white-space: nowrap;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 100%;
                padding-left: 1.5em
            }

            .is-not-any.is-loaded .ui-copy:hover .ui-copy-label .a-clip .t,.ui-copy._ok .ui-copy-label .a-clip .t {
                transform: translate(0);
                opacity: 1
            }

            .ui-copy._ok .ui-copy-label .a-clip .w {
                transform: translateY(-100%)
            }

            .c-editor a:hover,.wp-editor a:hover {
                will-change: background-size;
                animation: aLine var(--a-hover-s) var(--ease-power2-out) 0s 1 running
            }

            @keyframes aLine {
                0% {
                    background-size: 0 1px
                }

                to {
                    background-size: 100% 1px
                }
            }

            .ui-link-bd .b {
                will-change: transform
            }

            .is-not-any.is-loaded .ui-link-bd:hover .b {
                transform: translate(0)
            }

            .is-not-any.is-loaded .c-nav .ui-btn:hover,.is-not-any.is-loaded .c-side-ul .ui-btn:hover,.is-not-any.is-loaded .c-sitemap-contact-ul .ui-btn:hover,.is-not-any.is-loaded .ui-btn:hover {
                border-color: var(--col-black)
            }

            .is-not-any.is-loaded .ui-btn-ghost:hover .w {
                transform: translateY(-100%)
            }

            .is-not-any.is-loaded .ui-btn-ghost:hover .w:first-child {
                transform: translateY(-120%)
            }

            .is-not-any.is-loaded .ui-btn-ghost:hover:after {
                border-radius: 2em;
                transform: translate(0)
            }

            .ui-btn-ghost.current {
                pointer-events: none
            }

            .ui-btn-ghost.current .w {
                color: var(--col-white);
                transform: translateY(-100%)
            }

            .ui-btn-ghost.current .w:first-child {
                transform: translateY(-120%)
            }

            .ui-btn-ghost.current:after {
                border-radius: 2em;
                transform: translate(0)
            }

            .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
            }

            .is-leave-ing .is-leave-content .c-fade[data-shown="1"],.is-leave-ing .is-leave-content [data-shown="1"] .c-fade {
                transition: all .6s var(--ease-power2-in-out)!important;
                opacity: 0!important
            }

            .is-leave-ing .is-leave-content .c-clip[data-shown="1"] .t,.is-leave-ing .is-leave-content [data-shown="1"] .c-clip .t {
                transition: all .6s var(--ease-power2-in-out)!important;
                opacity: 0!important;
                transform: translateY(-50%)!important
            }

            .is-leave-ing .is-leave-content [data-d] {
                transition-delay: 0s!important
            }

            .no-bar {
                scrollbar-width: none;
                -ms-overflow-style: none
            }

            .no-bar::-webkit-scrollbar {
                display: none
            }

            body,html {
                overscroll-behavior: none
            }

            #app .lenis.lenis-stopped {
                overflow: hidden
            }

            #app .lenis.lenis-smooth {
                scroll-behavior: auto
            }

            #app .lenis.lenis-smooth [data-lenis-prevent] {
                overscroll-behavior: contain
            }

            html.lenis {
                height: auto
            }

            html.is-inner-scroll {
                scrollbar-width: none;
                -ms-overflow-style: none
            }

            html.is-inner-scroll::-webkit-scrollbar {
                display: none
            }

            html.is-inner-scroll,html.is-inner-scroll body {
                overflow: hidden
            }

            html.is-inner-scroll .c-local {
                position: absolute;
                scroll-behavior: auto;
                overflow-x: hidden;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0
            }
			
		
			
			

            #tinymce td {
                padding: 1em
            }

            .c-editor {
                letter-spacing: 0
            }

            .c-editor,.c-editor .js-split {
                line-height: 1.7
            }

            .c-editor .mce-preview-object {
                border: none
            }

            .c-editor .mce-object-iframe {
                display: block;
                width: 100%
            }

            .c-editor * {
                letter-spacing: 0;
                float: none;
                max-width: 100%
            }

            .c-editor h2 {
                font-size: 1.35em;
                font-weight: 500
            }

            .c-editor h3 {
                font-size: 1.25em;
                font-weight: 500
            }

            .c-editor h4 {
                font-size: 1.15em;
                font-weight: 500
            }

            .c-editor h2,.c-editor h3,.c-editor h4,.c-editor h5,.c-editor h6 {
                margin: 2em 0;
                line-height: 1.6
            }

            .c-editor b,.c-editor strong {
                font-weight: 500
            }

            .c-editor em {
                font-style: italic
            }

            .c-editor a {
                position: relative;
                overflow: hidden;
                vertical-align: bottom;
                background-image: linear-gradient(var(--col-gray),var(--col-gray));
                background-repeat: no-repeat;
                -webkit-box-decoration-break: clone;
                background-size: 100% 1px;
                background-position: 0 100%
            }

            .c-editor blockquote,.c-editor ol,.c-editor p,.c-editor ul {
                margin: 1em 0
            }

            .c-editor:first-child {
                margin-top: 0
            }

            .c-editor:last-child {
                margin-bottom: 0
            }

            .c-editor *:first-child {
                margin-top: 0
            }

            .c-editor *:last-child {
                margin-bottom: 0
            }

            .c-editor iframe {
                width: 100%;
                margin: 1em 0
            }

            .c-editor img,.c-editor video {
                max-width: 100%;
                height: auto;
                margin: 1em 0
            }

            .c-editor ol,.c-editor ul {
                padding-left: 1em;
                margin-left: 0
            }

            .c-editor blockquote {
                padding: 1em;
                font-style: italic
            }

            .c-editor ul li {
                padding-left: 1em;
                list-style: disc
            }

            .c-editor ol li {
                padding-left: 1em;
                list-style: inherit
            }

            .c-editor iframe,.c-editor img,.c-editor video {
                display: block
            }

            .c-editor .wp-caption img {
                margin-bottom: 1em
            }

            .c-editor .wp-caption-text {
                margin-top: 0
            }

            .c-editor .aligncenter {
                margin: 0 auto!important
            }

            .c-editor .alignleft {
                margin-left: 0!important;
                margin-right: auto!important
            }

            .c-editor .alignright {
                margin-right: 0!important;
                margin-left: auto!important
            }

            [data-id=content_en] .c-editor {
                line-height: 1.5
            }

            [data-id=content_en] .c-editor .js-split {
                line-height: 1.7
            }

            [data-id=content_en] .c-editor h2,[data-id=content_en] .c-editor h3,[data-id=content_en] .c-editor h4,[data-id=content_en] .c-editor h5,[data-id=content_en] .c-editor h6 {
                line-height: 1.5
            }

            .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
				/*font-size: 6.25vw*/
            }

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

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

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

            .h4 {
               /* font-size: 3.194vw*/
			    font-size:2.7vw
            }

            .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)*/
			    font-size: 16px;
            }

            .f-m,[lang=en] .f-mm-en,html {
                font-size: max(.902vw,12px)
            }

            .f-s {
                font-size: max(.833vw,12px)
            }

            .f-xs {
                font-size: max(.763vw,12px)
            }

            .f-xxs {
                font-size: max(.694vw,12px)
            }

            @media screen and (max-width: 1200px) {
                .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
                }

                .c-menu .f-mmml,.f-l {
                    font-size: 2.777vw
                }

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

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

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

                .f-m,[lang=en] .f-mm-en,html {
                    font-size: max(.902vw,13px)
                }

                .f-s {
                    font-size: max(.833vw,12px)
                }

                .f-xs {
                    font-size: max(.763vw,12px)
                }

                .f-xxs {
                    font-size: max(.694vw,12px)
                }
            }

            @media screen and (max-width: 1024px) and (orientation:portrait) {
                .c-menu .f-mmml {
                    font-size:4.166vw
                }

                .f-ml,.f-mml {
                    font-size: max(1.25vw,18px)
                }

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

            @media screen and (max-width: 770px) {
                .h0 {
                    font-size:10.416vw
                }

                .c-go-title,.h1 {
                    font-size: 7.638vw
                }

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

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

                .f-xl,.h3 {
                    font-size: max(1.944vw,28px)
                }

                .h4 {
                    font-size: max(3.472vw,50px)
                }

                .c-contact-content .h4,.c-menu .f-mmml,.c-s-header .h4,.c-s-pattern-header .h4,.c-s-pattern-header .h5,.f-l {
                    font-size: max(1.666vw,24px)
                }

                .c-services-li-title.f-l,.p-footer .f-xl {
                    font-size: max(1.527vw,22px)
                }

                .f-ml,.f-mml {
                    font-size: max(1.041vw,15px)
                }

                .c-editor,.c-intro,.c-links-ul.f-ml,.f-mm,[lang=en] .f-mm-en {
                    font-size: max(.902vw,13px)
                }

                .c-recent-l .ui-link-bd,.c-recent-lr .c-arrow-title {
                    font-size: max(.833vw,12px)
                }

                .c-archive-h,.c-sort-th-c,.p-footer .f-s,.p-footer .f-xs,[data-xhr-namespace=about] .c-lead {
                    font-size: max(.763vw,11px)
                }

                .c-icon-p .w,.c-menu-main .f-xs,.p-footer .f-xxs {
                    font-size: max(.694vw,10px)

                }
            }

            .show-mb,.show-tb {
                display: none!important
            }

            .is-ov-dark.is-any .c-header use {
                fill: var(--col-white)
            }

            .is-any .c-header use {
                transition: fill .3s
            }

            .is-any #app .c-local[data-xhr-namespace=single-project] {
                overflow-x: hidden
            }

            .is-any [data-xhr-namespace=single-project] .js-toggle-content {
                display: none
            }

            .is-any [data-xhr-namespace=single-project] .c-s-body {
                position: relative;
                height: auto
            }

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

            .is-any [data-xhr-namespace=single-project] .js-append-scroll .c-hr-scroll-content {
                position: relative
            }

            .is-any [data-xhr-namespace=single-project] .js-append-scroll .c-hr-scroll-content,.is-any [data-xhr-namespace=single-project] .js-append-scroll .c-hr-scroll-li {
                height: calc(var(--vh)*50)
            }

            .is-any [data-xhr-namespace=single-project] .js-append-scroll .c-hr-scroll-content {
                align-items: flex-start;
                overflow: hidden
            }

            .is-any [data-xhr-namespace=single-project] .js-append-scroll .c-hr-scroll-ul {
                align-items: flex-start;
                width: 100vw;
                overflow: scroll;
                height: calc(var(--vh)*50 + 20px)
            }

            .is-any [data-xhr-namespace=single-project] .js-append-scroll .c-hr-scroll-li:first-child {
                padding-left: var(--go)
            }

            .is-any [data-xhr-namespace=single-project] .js-append-scroll .c-hr-scroll-li {
                padding-right: var(--go)
            }

            .is-any [data-xhr-namespace=single-project] .js-append-scroll .c-hr-scroll-ul:last-child {
                display: none
            }

            .is-any [data-xhr-namespace=single-project] .c-s-content .c-body-thin {
                width: 100%
            }

            .is-any [data-xhr-namespace=single-project] .c-s-content,.is-any [data-xhr-namespace=single-project] .c-s-header .flex {
                padding: 0;
                width: var(--single-w);
                margin: 0 auto
            }

            .is-any [data-xhr-namespace=single-project] .c-e-scroll {
                padding-bottom: calc(var(--gw)*6)
            }

            .is-any [data-xhr-namespace=single-project] .c-s-header .flex {
                padding-top: calc(var(--gw)*7);
                padding-bottom: calc(var(--gw)*4)
            }

            .is-any [data-xhr-namespace=single-project] .c-s-header .c-archive-cat-parent .ui-link-parent,.is-any [data-xhr-namespace=single-project] .c-s-header .c-archive-cat:not(.c-archive-cat-parent) {
                margin-top: 1em
            }

            .is-any [data-xhr-namespace=single-project] .c-s-header .c-archive-cat .ui-btn-ghost {
                margin: .25em .25em .25em 0
            }

            .is-any [data-xhr-namespace=single-project] .c-s-sub {
                position: absolute;
                bottom: var(--go);
                right: var(--go);
                z-index: 9
            }

            .is-any [data-xhr-namespace=single-project] .c-s-sub a:last-child {
                margin-left: auto;
                margin-right: 0
            }

            .is-any [data-xhr-namespace=single-pattern] .c-s-content-aside>.in {
                display: block
            }

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

            .is-any [data-xhr-namespace=single-pattern] .c-s-pattern-content-wrap {
                padding-top: calc(var(--gw)*3);
                padding-bottom: calc(var(--gw)*9)
            }

            .is-any [data-xhr-namespace=single-pattern] .c-s-content-wrapper,.is-any [data-xhr-namespace=single-pattern] .c-vr-scroll-progress {
                display: none
            }

            .is-any [data-xhr-namespace=single-pattern] .c-s-content-aside {
                position: relative;
                width: var(--single-w);
                margin: 0 auto;
                height: auto;
                padding: 0
            }

            .is-any [data-xhr-namespace=single-pattern] .c-e-scroll-wrap {
                height: auto;
                max-height: none
            }

            .is-any [data-xhr-namespace=single-pattern] .c-s-pattern-content {
                padding-right: 0
            }

            .is-any [data-xhr-namespace=single-pattern] .c-s-content-aside .c-archive-cat-parent {
                padding-top: 1.75em
            }

            .is-any [data-xhr-namespace=single-pattern] .c-s-content-aside .ui-copy {
                top: auto;
                bottom: calc(var(--go)*1);
                left: 0
            }

            .is-any [data-xhr-namespace=single-pattern] .c-s-pattern-body .ui-btn-icon {
                bottom: calc(var(--go)*1);
                right: 0;
                height: calc(var(--gw)*2)
            }

            .is-any [data-xhr-namespace=single-pattern] .ui-copy-label .a-clip .t {
                transform: translate(0);
                font-weight: 500
            }

            .is-any [data-xhr-namespace=single-pattern] .ui-copy-label .a-clip .w {
                transition: background .3s,opacity .3s,color .3s,border-radius .3s var(--ease-power4-out),transform var(--a-global-t-s) var(--ease-power4-out)
            }

            .is-any [data-xhr-namespace=single-pattern] .js-append-scroll .c-vr-scroll-ul {
                margin-top: 0;
                margin-bottom: calc(var(--go)*-1)
            }

            .is-any [data-xhr-namespace=single-pattern] .js-append-scroll .c-vr-scroll-li {
                padding-top: 0;
                padding-bottom: var(--go)
            }

            .is-any [data-xhr-namespace=single-pattern] .js-append-scroll .c-vr-scroll-content {
                width: 100%;
                position: relative;
                transform: none;
                left: auto
            }

            .is-any [data-xhr-namespace=single-pattern] .js-append-scroll .c-vr-scroll-ul:last-child {
                display: none
            }

            .is-any [data-xhr-namespace=single-pattern] .js-append-scroll ._off .c-vr-scroll-ul:last-child {
                display: block
            }

            .is-any .c-vr-scroll-content._off,.is-any .c-vr-scroll-content._off .c-vr-scroll-ul {
                max-height: none;
                height: auto
            }

            .is-any .ui-copy-icon svg {
                width: 40%
            }

            .is-any .js-zoom {
                pointer-events: none
            }

            .is-any .js-zoom img {
                pointer-events: auto
            }

            .is-any .c-vr-scroll {
                min-height: 0
            }

            .is-any .c-hr-scroll-li a {
                opacity: 1;
                padding-bottom: var(--go);
                padding-right: var(--go)
            }

            .is-any .c-copy .w-flip div:nth-child(2) {
                display: none
            }

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

            .is-any .c-s-title {
                -webkit-line-clamp: unset;
                max-height: none;
                overflow: visible;
                line-height: 1.2;
                margin-bottom: var(--go)
            }

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

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

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

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

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

            .is-any[data-current-layout=single] .c-logo {
                transform: translate(0);
                pointer-events: auto
            }

            .is-any[data-current-layout=single] .c-menu .c-menu-header a {
                transform: translateY(-100%) scale(1)
            }

            @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-recent-ul a{
					width:24vw !important; 
					height:24vw !important;
					
					}

                .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);
					grid-template-columns:1fr 1fr
                }

                [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: .275em;
                    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);*/
					height:auto;
                    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
                }
            }

.menua:hover{ color:#204A9F;}